@cuby-ui/core 0.0.322 → 0.0.324

package/fesm2022/cuby-ui-core.mjs

@@ -30,11 +30,11 @@ import { Router } from '@angular/router';
 
 class CuiAccordionComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: "18.2.13", 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"] }]
+            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"] }]
         }] });
 
 class CuiAccordionDirective {
@@ -117,11 +117,11 @@ class CuiSvgComponent {
         return !!this.color;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSvgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: "18.2.13", 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"] }]
+            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: [{
@@ -237,11 +237,11 @@ class CuiButtonComponent {
         return 'currentColor';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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  [color]=\"iconColor\"\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;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=action]{background:var(--c-action-background);color:var(--cui-gray-0);border:1px solid var(--c-action-border-color)}@media (hover: hover){:host[data-appearance=action]:hover{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}}:host[data-appearance=action]:active{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}:host[data-appearance=action]:disabled{background:var(--c-action-background);border-color:var(--c-action-border-color)}:host[data-appearance=action-violet]{background:var(--cui-violet-500);color:var(--cui-gray-0);border:1px solid var(--cui-violet-500)}@media (hover: hover){:host[data-appearance=action-violet]:hover{background:var(--cui-violet-700);border-color:var(--cui-violet-700)}}:host[data-appearance=action-violet]:active{background:var(--cui-violet-700);border-color:var(--cui-violet-700)}:host[data-appearance=action-violet]:disabled{background:var(--cui-violet-500);border-color:var(--cui-violet-500)}:host[data-appearance=action-cyan]{background:var(--cui-cyan-700);color:var(--cui-gray-0);border:1px solid var(--cui-cyan-700)}@media (hover: hover){:host[data-appearance=action-cyan]:hover{background:var(--cui-cyan-800);border-color:var(--cui-cyan-800)}}:host[data-appearance=action-cyan]:active{background:var(--cui-cyan-800);border-color:var(--cui-cyan-800)}:host[data-appearance=action-cyan]:disabled{background:var(--cui-cyan-800);border-color:var(--cui-cyan-800)}:host[data-appearance=vivid-success]{background:var(--cui-success);color:var(--cui-gray-0);border:1px solid var(--cui-success)}@media (hover: hover){:host[data-appearance=vivid-success]:hover{background:var(--cui-green-700);border-color:var(--cui-green-700)}}:host[data-appearance=vivid-success]:active{background:var(--cui-green-700);border-color:var(--cui-green-700)}:host[data-appearance=vivid-success]:disabled{background:var(--cui-success);border-color:var(--cui-success)}: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(--c-outlined-gray-color)}@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=xxxs]{font-size:12px;line-height:14px;height:24px;padding:0 4px;border-radius:6px}:host[data-size=xxxs][data-appearance=action],:host[data-size=xxxs][data-appearance=outlined],:host[data-size=xxxs][data-appearance=outlined-gray]{padding:0 3px}:host[data-size=xxxs]:has(.c-content:empty){width:24px}:host[data-size=xxxs] .c-wrapper{gap:6px}:host[data-size=xxs]{font-size:12px;line-height:14px;height:28px;padding:0 12px;border-radius: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 11px}: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;border-radius:8px}: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;border-radius:8px}: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;border-radius:8px}: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}@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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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  [color]=\"iconColor\"\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;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=action]{background:var(--c-action-background);color:var(--cui-gray-0);border:1px solid var(--c-action-border-color)}@media (hover: hover){:host[data-appearance=action]:hover{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}}:host[data-appearance=action]:active{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}:host[data-appearance=action]:disabled{background:var(--c-action-background);border-color:var(--c-action-border-color)}:host[data-appearance=action-violet]{background:var(--cui-violet-500);color:var(--cui-gray-0);border:1px solid var(--cui-violet-500)}@media (hover: hover){:host[data-appearance=action-violet]:hover{background:var(--cui-violet-700);border-color:var(--cui-violet-700)}}:host[data-appearance=action-violet]:active{background:var(--cui-violet-700);border-color:var(--cui-violet-700)}:host[data-appearance=action-violet]:disabled{background:var(--cui-violet-500);border-color:var(--cui-violet-500)}:host[data-appearance=action-cyan]{background:var(--cui-cyan-700);color:var(--cui-gray-0);border:1px solid var(--cui-cyan-700)}@media (hover: hover){:host[data-appearance=action-cyan]:hover{background:var(--cui-cyan-800);border-color:var(--cui-cyan-800)}}:host[data-appearance=action-cyan]:active{background:var(--cui-cyan-800);border-color:var(--cui-cyan-800)}:host[data-appearance=action-cyan]:disabled{background:var(--cui-cyan-800);border-color:var(--cui-cyan-800)}:host[data-appearance=vivid-success]{background:var(--cui-success);color:var(--cui-gray-0);border:1px solid var(--cui-success)}@media (hover: hover){:host[data-appearance=vivid-success]:hover{background:var(--cui-green-700);border-color:var(--cui-green-700)}}:host[data-appearance=vivid-success]:active{background:var(--cui-green-700);border-color:var(--cui-green-700)}:host[data-appearance=vivid-success]:disabled{background:var(--cui-success);border-color:var(--cui-success)}: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(--c-outlined-gray-color)}@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=xxxs]{font-size:12px;line-height:14px;height:24px;padding:0 4px;border-radius:6px}:host[data-size=xxxs][data-appearance=action],:host[data-size=xxxs][data-appearance=outlined],:host[data-size=xxxs][data-appearance=outlined-gray]{padding:0 3px}:host[data-size=xxxs]:has(.c-content:empty){width:24px}:host[data-size=xxxs] .c-wrapper{gap:6px}:host[data-size=xxs]{font-size:12px;line-height:14px;height:28px;padding:0 12px;border-radius: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 11px}: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;border-radius:8px}: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;border-radius:8px}: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;border-radius:8px}: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}@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: "18.2.13", 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  [color]=\"iconColor\"\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;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=action]{background:var(--c-action-background);color:var(--cui-gray-0);border:1px solid var(--c-action-border-color)}@media (hover: hover){:host[data-appearance=action]:hover{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}}:host[data-appearance=action]:active{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}:host[data-appearance=action]:disabled{background:var(--c-action-background);border-color:var(--c-action-border-color)}:host[data-appearance=action-violet]{background:var(--cui-violet-500);color:var(--cui-gray-0);border:1px solid var(--cui-violet-500)}@media (hover: hover){:host[data-appearance=action-violet]:hover{background:var(--cui-violet-700);border-color:var(--cui-violet-700)}}:host[data-appearance=action-violet]:active{background:var(--cui-violet-700);border-color:var(--cui-violet-700)}:host[data-appearance=action-violet]:disabled{background:var(--cui-violet-500);border-color:var(--cui-violet-500)}:host[data-appearance=action-cyan]{background:var(--cui-cyan-700);color:var(--cui-gray-0);border:1px solid var(--cui-cyan-700)}@media (hover: hover){:host[data-appearance=action-cyan]:hover{background:var(--cui-cyan-800);border-color:var(--cui-cyan-800)}}:host[data-appearance=action-cyan]:active{background:var(--cui-cyan-800);border-color:var(--cui-cyan-800)}:host[data-appearance=action-cyan]:disabled{background:var(--cui-cyan-800);border-color:var(--cui-cyan-800)}:host[data-appearance=vivid-success]{background:var(--cui-success);color:var(--cui-gray-0);border:1px solid var(--cui-success)}@media (hover: hover){:host[data-appearance=vivid-success]:hover{background:var(--cui-green-700);border-color:var(--cui-green-700)}}:host[data-appearance=vivid-success]:active{background:var(--cui-green-700);border-color:var(--cui-green-700)}:host[data-appearance=vivid-success]:disabled{background:var(--cui-success);border-color:var(--cui-success)}: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(--c-outlined-gray-color)}@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=xxxs]{font-size:12px;line-height:14px;height:24px;padding:0 4px;border-radius:6px}:host[data-size=xxxs][data-appearance=action],:host[data-size=xxxs][data-appearance=outlined],:host[data-size=xxxs][data-appearance=outlined-gray]{padding:0 3px}:host[data-size=xxxs]:has(.c-content:empty){width:24px}:host[data-size=xxxs] .c-wrapper{gap:6px}:host[data-size=xxs]{font-size:12px;line-height:14px;height:28px;padding:0 12px;border-radius: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 11px}: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;border-radius:8px}: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;border-radius:8px}: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;border-radius:8px}: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}@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"] }]
+            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  [color]=\"iconColor\"\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;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=action]{background:var(--c-action-background);color:var(--cui-gray-0);border:1px solid var(--c-action-border-color)}@media (hover: hover){:host[data-appearance=action]:hover{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}}:host[data-appearance=action]:active{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}:host[data-appearance=action]:disabled{background:var(--c-action-background);border-color:var(--c-action-border-color)}:host[data-appearance=action-violet]{background:var(--cui-violet-500);color:var(--cui-gray-0);border:1px solid var(--cui-violet-500)}@media (hover: hover){:host[data-appearance=action-violet]:hover{background:var(--cui-violet-700);border-color:var(--cui-violet-700)}}:host[data-appearance=action-violet]:active{background:var(--cui-violet-700);border-color:var(--cui-violet-700)}:host[data-appearance=action-violet]:disabled{background:var(--cui-violet-500);border-color:var(--cui-violet-500)}:host[data-appearance=action-cyan]{background:var(--cui-cyan-700);color:var(--cui-gray-0);border:1px solid var(--cui-cyan-700)}@media (hover: hover){:host[data-appearance=action-cyan]:hover{background:var(--cui-cyan-800);border-color:var(--cui-cyan-800)}}:host[data-appearance=action-cyan]:active{background:var(--cui-cyan-800);border-color:var(--cui-cyan-800)}:host[data-appearance=action-cyan]:disabled{background:var(--cui-cyan-800);border-color:var(--cui-cyan-800)}:host[data-appearance=vivid-success]{background:var(--cui-success);color:var(--cui-gray-0);border:1px solid var(--cui-success)}@media (hover: hover){:host[data-appearance=vivid-success]:hover{background:var(--cui-green-700);border-color:var(--cui-green-700)}}:host[data-appearance=vivid-success]:active{background:var(--cui-green-700);border-color:var(--cui-green-700)}:host[data-appearance=vivid-success]:disabled{background:var(--cui-success);border-color:var(--cui-success)}: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(--c-outlined-gray-color)}@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=xxxs]{font-size:12px;line-height:14px;height:24px;padding:0 4px;border-radius:6px}:host[data-size=xxxs][data-appearance=action],:host[data-size=xxxs][data-appearance=outlined],:host[data-size=xxxs][data-appearance=outlined-gray]{padding:0 3px}:host[data-size=xxxs]:has(.c-content:empty){width:24px}:host[data-size=xxxs] .c-wrapper{gap:6px}:host[data-size=xxs]{font-size:12px;line-height:14px;height:28px;padding:0 12px;border-radius: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 11px}: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;border-radius:8px}: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;border-radius:8px}: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;border-radius:8px}: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}@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
             }, {
@@ -299,11 +299,11 @@ class CuiAccordionItemComponent {
         this.isOpenChange.emit(this.isOpen);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiAccordionItemComponent, selector: "cui-accordion-item", inputs: { isOpen: "isOpen", appearance: "appearance" }, outputs: { isOpenChange: "isOpenChange" }, host: { properties: { "attr.appearance": "this._appearance" } }, 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\" class=\"c-content\">\r\n  <ng-content select=\"[cuiAccordionItemContent]\"></ng-content>\r\n</div>\r\n", styles: [":host{padding:16px;display:flex;flex-direction:column;gap:8px;border-radius:8px;background:var(--cui-base-10)}.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%}:host[appearance=border]{padding:0;gap:0;border-radius:8px;border:1px solid var(--cui-base-200)}:host[appearance=border] .c-header{padding:10px 16px}:host[appearance=border] .c-content{border-top:1px solid var(--cui-base-200)}\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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiAccordionItemComponent, selector: "cui-accordion-item", inputs: { isOpen: "isOpen", appearance: "appearance" }, outputs: { isOpenChange: "isOpenChange" }, host: { properties: { "attr.appearance": "this._appearance" } }, 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\" class=\"c-content\">\n  <ng-content select=\"[cuiAccordionItemContent]\"></ng-content>\n</div>\n", styles: [":host{padding:16px;display:flex;flex-direction:column;gap:8px;border-radius:8px;background:var(--cui-base-10)}.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%}:host[appearance=border]{padding:0;gap:0;border-radius:8px;border:1px solid var(--cui-base-200)}:host[appearance=border] .c-header{padding:10px 16px}:host[appearance=border] .c-content{border-top:1px solid var(--cui-base-200)}\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: "18.2.13", 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\" class=\"c-content\">\r\n  <ng-content select=\"[cuiAccordionItemContent]\"></ng-content>\r\n</div>\r\n", styles: [":host{padding:16px;display:flex;flex-direction:column;gap:8px;border-radius:8px;background:var(--cui-base-10)}.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%}:host[appearance=border]{padding:0;gap:0;border-radius:8px;border:1px solid var(--cui-base-200)}:host[appearance=border] .c-header{padding:10px 16px}:host[appearance=border] .c-content{border-top:1px solid var(--cui-base-200)}\n"] }]
+            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\" class=\"c-content\">\n  <ng-content select=\"[cuiAccordionItemContent]\"></ng-content>\n</div>\n", styles: [":host{padding:16px;display:flex;flex-direction:column;gap:8px;border-radius:8px;background:var(--cui-base-10)}.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%}:host[appearance=border]{padding:0;gap:0;border-radius:8px;border:1px solid var(--cui-base-200)}:host[appearance=border] .c-header{padding:10px 16px}:host[appearance=border] .c-content{border-top:1px solid var(--cui-base-200)}\n"] }]
         }], propDecorators: { isOpen: [{
                 type: Input
             }], appearance: [{
@@ -450,11 +450,11 @@ class CuiNotificationComponent {
         this.iconOptions = this.ICON_OPTIONS[this.mode];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiNotificationComponent, selector: "cui-notification", inputs: { status: "status", mode: "mode", isCloseable: "isCloseable" }, outputs: { closed: "closed" }, host: { properties: { "attr.data-status": "this.status", "attr.data-mode": "this.mode" } }, ngImport: i0, template: "<cui-svg\r\n  class=\"c-icon\"\r\n  [icon]=\"ICONS[status].icon\"\r\n  [color]=\"iconOptions[status].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[data-mode=light]{padding:15px;border:1px solid;color:var(--cui-base-900)}:host[data-mode=light][data-status=info]{border-color:var(--cui-info);background:var(--cui-badge-info-bg)}:host[data-mode=light][data-status=success]{border-color:var(--cui-green-700);background:var(--cui-badge-success-bg)}:host[data-mode=light][data-status=alert]{border-color:var(--cui-yellow-400);background:var(--cui-badge-warning-bg)}:host[data-mode=light][data-status=error]{border-color:var(--cui-danger);background:var(--cui-badge-danger-bg)}: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;margin-top:5px;overflow-wrap:anywhere}.c-icon{margin-top:6px}.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:#fff3}\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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiNotificationComponent, selector: "cui-notification", inputs: { status: "status", mode: "mode", isCloseable: "isCloseable" }, outputs: { closed: "closed" }, host: { properties: { "attr.data-status": "this.status", "attr.data-mode": "this.mode" } }, ngImport: i0, template: "<cui-svg\n  class=\"c-icon\"\n  [icon]=\"ICONS[status].icon\"\n  [color]=\"iconOptions[status].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[data-mode=light]{padding:15px;border:1px solid;color:var(--cui-base-900)}:host[data-mode=light][data-status=info]{border-color:var(--cui-info);background:var(--cui-badge-info-bg)}:host[data-mode=light][data-status=success]{border-color:var(--cui-green-700);background:var(--cui-badge-success-bg)}:host[data-mode=light][data-status=alert]{border-color:var(--cui-yellow-400);background:var(--cui-badge-warning-bg)}:host[data-mode=light][data-status=error]{border-color:var(--cui-danger);background:var(--cui-badge-danger-bg)}: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;margin-top:5px;overflow-wrap:anywhere}.c-icon{margin-top:6px}.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:#fff3}\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: "18.2.13", ngImport: i0, type: CuiNotificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-notification', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-svg\r\n  class=\"c-icon\"\r\n  [icon]=\"ICONS[status].icon\"\r\n  [color]=\"iconOptions[status].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[data-mode=light]{padding:15px;border:1px solid;color:var(--cui-base-900)}:host[data-mode=light][data-status=info]{border-color:var(--cui-info);background:var(--cui-badge-info-bg)}:host[data-mode=light][data-status=success]{border-color:var(--cui-green-700);background:var(--cui-badge-success-bg)}:host[data-mode=light][data-status=alert]{border-color:var(--cui-yellow-400);background:var(--cui-badge-warning-bg)}:host[data-mode=light][data-status=error]{border-color:var(--cui-danger);background:var(--cui-badge-danger-bg)}: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;margin-top:5px;overflow-wrap:anywhere}.c-icon{margin-top:6px}.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:#fff3}\n"] }]
+            args: [{ selector: 'cui-notification', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-svg\n  class=\"c-icon\"\n  [icon]=\"ICONS[status].icon\"\n  [color]=\"iconOptions[status].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[data-mode=light]{padding:15px;border:1px solid;color:var(--cui-base-900)}:host[data-mode=light][data-status=info]{border-color:var(--cui-info);background:var(--cui-badge-info-bg)}:host[data-mode=light][data-status=success]{border-color:var(--cui-green-700);background:var(--cui-badge-success-bg)}:host[data-mode=light][data-status=alert]{border-color:var(--cui-yellow-400);background:var(--cui-badge-warning-bg)}:host[data-mode=light][data-status=error]{border-color:var(--cui-danger);background:var(--cui-badge-danger-bg)}: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;margin-top:5px;overflow-wrap:anywhere}.c-icon{margin-top:6px}.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:#fff3}\n"] }]
         }], propDecorators: { status: [{
                 type: Input
             }, {
@@ -526,11 +526,11 @@ class CuiAlertComponent {
         setTimeout(this.onClosed.bind(this), this.AUTO_CLOSE_DURATION_IN_MILLISECONDS);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiAlertComponent, selector: "cui-alert", host: { properties: { "attr.data-resizing": "this.resizing" } }, ngImport: i0, template: "<cui-notification\r\n  [status]=\"context.status\"\r\n  [mode]=\"context.mode\"\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{font-weight:400;font-size:14px;line-height:20px;max-width:470px}:host[data-resizing=hug]{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", "mode", "isCloseable"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiAlertComponent, selector: "cui-alert", host: { properties: { "attr.data-resizing": "this.resizing" } }, ngImport: i0, template: "<cui-notification\n  [status]=\"context.status\"\n  [mode]=\"context.mode\"\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{font-weight:400;font-size:14px;line-height:20px;max-width:470px}:host[data-resizing=hug]{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", "mode", "isCloseable"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiAlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-notification\r\n  [status]=\"context.status\"\r\n  [mode]=\"context.mode\"\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{font-weight:400;font-size:14px;line-height:20px;max-width:470px}:host[data-resizing=hug]{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"] }]
+            args: [{ selector: 'cui-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-notification\n  [status]=\"context.status\"\n  [mode]=\"context.mode\"\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{font-weight:400;font-size:14px;line-height:20px;max-width:470px}:host[data-resizing=hug]{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']
@@ -558,11 +558,11 @@ class CuiAlertsComponent {
         })));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiAlertsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.CuiFilterPipe, name: "cuiFilter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.CuiFilterPipe, name: "cuiFilter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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"] }]
+            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 CuiAlertModule {
@@ -625,11 +625,11 @@ class CuiBadgeComponent {
         this.isWithDot = this.options.isWithDot;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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\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;flex-shrink:0;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);outline:1px solid var(--cui-violet-400);outline-offset:-1px}: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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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;flex-shrink:0;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);outline:1px solid var(--cui-violet-400);outline-offset:-1px}: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: "18.2.13", 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;flex-shrink:0;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);outline:1px solid var(--cui-violet-400);outline-offset:-1px}: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"] }]
+            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;flex-shrink:0;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);outline:1px solid var(--cui-violet-400);outline-offset:-1px}: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
             }, {
@@ -1039,11 +1039,11 @@ class CuiBannerComponent {
         this.closed.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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\r\n@if (theme$ | async; as theme) {\r\n    <cui-svg\r\n      icon=\"cuiIconX\"\r\n      [color]=\"THEME_CLOSE_BUTTON_ICON_COLORS[theme]\"\r\n    />\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:8px 16px;font-weight:400;font-size:14px;line-height:20px;display:flex;gap:16px;align-items:center;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;align-items:center;gap: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:#fff3}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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\n@if (theme$ | async; as theme) {\n    <cui-svg\n      icon=\"cuiIconX\"\n      [color]=\"THEME_CLOSE_BUTTON_ICON_COLORS[theme]\"\n    />\n}\n</button>\n", styles: [":host{--c-info-icon-color: var(--cui-light-blue-800);--c-alert-icon-color: var(--cui-orange-800);padding:8px 16px;font-weight:400;font-size:14px;line-height:20px;display:flex;gap:16px;align-items:center;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;align-items:center;gap: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:#fff3}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.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: "18.2.13", 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\r\n@if (theme$ | async; as theme) {\r\n    <cui-svg\r\n      icon=\"cuiIconX\"\r\n      [color]=\"THEME_CLOSE_BUTTON_ICON_COLORS[theme]\"\r\n    />\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:8px 16px;font-weight:400;font-size:14px;line-height:20px;display:flex;gap:16px;align-items:center;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;align-items:center;gap: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:#fff3}\n"] }]
+            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\n@if (theme$ | async; as theme) {\n    <cui-svg\n      icon=\"cuiIconX\"\n      [color]=\"THEME_CLOSE_BUTTON_ICON_COLORS[theme]\"\n    />\n}\n</button>\n", styles: [":host{--c-info-icon-color: var(--cui-light-blue-800);--c-alert-icon-color: var(--cui-orange-800);padding:8px 16px;font-weight:400;font-size:14px;line-height:20px;display:flex;gap:16px;align-items:center;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;align-items:center;gap: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:#fff3}\n"] }]
         }], propDecorators: { status: [{
                 type: Input
             }, {
@@ -1087,11 +1087,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class CuiBreadcrumbsComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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;align-items:center;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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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;align-items:center;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: "18.2.13", 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;align-items:center;flex-wrap:wrap;gap:2px}\n"] }]
+            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;align-items:center;flex-wrap:wrap;gap:2px}\n"] }]
         }], propDecorators: { breadcrumbs: [{
                 type: ContentChildren,
                 args: [CuiItemDirective, { read: TemplateRef }]
@@ -1102,11 +1102,11 @@ class CuiBreadcrumbComponent {
         this.isLast = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: "18.2.13", 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"] }]
+            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
             }] } });
@@ -1140,11 +1140,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class CuiButtonGroupComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: "18.2.13", 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"] }]
+            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 {
@@ -1229,11 +1229,11 @@ class CuiDialogsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiDialogsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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);opacity:.3}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "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: i1$1.CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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);opacity:.3}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "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: i1$1.CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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);opacity:.3}\n"] }]
+            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);opacity:.3}\n"] }]
         }] });
 
 const TRANSITION = '{{duration}}ms ease-in-out';
@@ -1548,13 +1548,13 @@ class CuiTooltips {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiTooltips, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiTooltips, isStandalone: true, selector: "cui-tooltips", host: { attributes: { "aria-live": "polite" } }, ngImport: i0, template: "<div\r\n    *ngFor=\"let hint of hints\"\r\n    role=\"tooltip\"\r\n    @cuiParentAnimation\r\n    [cuiActiveZoneParent]=\"hint.activeZone || null\"\r\n\r\n>\r\n    <ng-container *polymorpheusOutlet=\"hint.component; context: {$implicit: hint}\" />\r\n</div>\r\n", styles: [":host{position:fixed;top:0;left:0;inline-size:100%;block-size:0}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CuiActiveZone, selector: "[cuiActiveZone]:not(ng-container), [cuiActiveZoneChange]:not(ng-container), [cuiActiveZoneParent]:not(ng-container)", inputs: ["cuiActiveZoneParent"], outputs: ["cuiActiveZoneChange"], exportAs: ["cuiActiveZone"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], animations: [cuiParentAnimation], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiTooltips, isStandalone: true, selector: "cui-tooltips", host: { attributes: { "aria-live": "polite" } }, ngImport: i0, template: "<div\n    *ngFor=\"let hint of hints\"\n    role=\"tooltip\"\n    @cuiParentAnimation\n    [cuiActiveZoneParent]=\"hint.activeZone || null\"\n\n>\n    <ng-container *polymorpheusOutlet=\"hint.component; context: {$implicit: hint}\" />\n</div>\n", styles: [":host{position:fixed;top:0;left:0;inline-size:100%;block-size:0}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CuiActiveZone, selector: "[cuiActiveZone]:not(ng-container), [cuiActiveZoneChange]:not(ng-container), [cuiActiveZoneParent]:not(ng-container)", inputs: ["cuiActiveZoneParent"], outputs: ["cuiActiveZoneChange"], exportAs: ["cuiActiveZone"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], animations: [cuiParentAnimation], changeDetection: i0.ChangeDetectionStrategy.Default }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiTooltips, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'cui-tooltips', imports: [NgForOf, PolymorpheusTemplate, CuiActiveZone, PolymorpheusOutlet], changeDetection: ChangeDetectionStrategy.Default, animations: [cuiParentAnimation], host: {
                         'aria-live': 'polite',
-                    }, template: "<div\r\n    *ngFor=\"let hint of hints\"\r\n    role=\"tooltip\"\r\n    @cuiParentAnimation\r\n    [cuiActiveZoneParent]=\"hint.activeZone || null\"\r\n\r\n>\r\n    <ng-container *polymorpheusOutlet=\"hint.component; context: {$implicit: hint}\" />\r\n</div>\r\n", styles: [":host{position:fixed;top:0;left:0;inline-size:100%;block-size:0}\n"] }]
+                    }, template: "<div\n    *ngFor=\"let hint of hints\"\n    role=\"tooltip\"\n    @cuiParentAnimation\n    [cuiActiveZoneParent]=\"hint.activeZone || null\"\n\n>\n    <ng-container *polymorpheusOutlet=\"hint.component; context: {$implicit: hint}\" />\n</div>\n", styles: [":host{position:fixed;top:0;left:0;inline-size:100%;block-size:0}\n"] }]
         }] });
 
 class CuiRootComponent {
@@ -1570,11 +1570,11 @@ class CuiRootComponent {
             .subscribe(theme => this.document.documentElement.setAttribute('cuiTheme', theme));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiRootComponent, selector: "cui-root", ngImport: i0, template: "<div class=\"c-content\">\r\n  <ng-content />\r\n</div>\r\n<cui-dialogs />\r\n<cui-alerts />\r\n<cui-tooltips />\r\n", styles: [".c-content{overflow:auto;min-height:100vh;isolation:isolate}\n"], dependencies: [{ kind: "component", type: CuiDialogsComponent, selector: "cui-dialogs" }, { kind: "component", type: CuiAlertsComponent, selector: "cui-alerts" }, { kind: "component", type: CuiTooltips, selector: "cui-tooltips" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiRootComponent, selector: "cui-root", ngImport: i0, template: "<div class=\"c-content\">\n  <ng-content />\n</div>\n<cui-dialogs />\n<cui-alerts />\n<cui-tooltips />\n", styles: [".c-content{overflow:auto;min-height:100vh;isolation:isolate}\n"], dependencies: [{ kind: "component", type: CuiDialogsComponent, selector: "cui-dialogs" }, { kind: "component", type: CuiAlertsComponent, selector: "cui-alerts" }, { kind: "component", type: CuiTooltips, selector: "cui-tooltips" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiRootComponent, decorators: [{
             type: Component,
-            args: [{ selector: CUI_ROOT_SELECTOR, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c-content\">\r\n  <ng-content />\r\n</div>\r\n<cui-dialogs />\r\n<cui-alerts />\r\n<cui-tooltips />\r\n", styles: [".c-content{overflow:auto;min-height:100vh;isolation:isolate}\n"] }]
+            args: [{ selector: CUI_ROOT_SELECTOR, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c-content\">\n  <ng-content />\n</div>\n<cui-dialogs />\n<cui-alerts />\n<cui-tooltips />\n", styles: [".c-content{overflow:auto;min-height:100vh;isolation:isolate}\n"] }]
         }] });
 
 // TODO: сделать структурную директиву
@@ -1624,11 +1624,11 @@ class CuiDialogComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiDialogComponent, selector: "cui-dialog", host: { listeners: { "document:keydown.escape": "onEscape($event)" }, properties: { "attr.data-size": "this.size" } }, hostDirectives: [{ directive: i1$1.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);border:1px solid var(--cui-base-200)}:host:last-of-type{z-index:1}:host[data-size=auto]{width:auto}:host[data-size=sm]{max-width:620px}: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", "ngComponentOutletInputs", "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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiDialogComponent, selector: "cui-dialog", host: { listeners: { "document:keydown.escape": "onEscape($event)" }, properties: { "attr.data-size": "this.size" } }, hostDirectives: [{ directive: i1$1.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);border:1px solid var(--cui-base-200)}:host:last-of-type{z-index:1}:host[data-size=auto]{width:auto}:host[data-size=sm]{max-width:620px}: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", "ngComponentOutletInputs", "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: "18.2.13", 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);border:1px solid var(--cui-base-200)}:host:last-of-type{z-index:1}:host[data-size=auto]{width:auto}:host[data-size=sm]{max-width:620px}:host[data-size=xl]{max-width:1080px}.c-component-container{display:contents}.c-component-container ::ng-deep>*{display:contents}\n"] }]
+            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);border:1px solid var(--cui-base-200)}:host:last-of-type{z-index:1}:host[data-size=auto]{width:auto}:host[data-size=sm]{max-width:620px}: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']
@@ -1639,11 +1639,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class CuiDialogActionsComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiDialogActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: "18.2.13", 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"] }]
+            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 {
@@ -1654,11 +1654,11 @@ class CuiDialogHeaderComponent {
         this.closed.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiDialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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;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.PolymorpheusOutlet, 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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;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.PolymorpheusOutlet, 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: "18.2.13", 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;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"] }]
+            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;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: [{
@@ -2271,12 +2271,12 @@ class CuiTooltipComponent {
         this.apply(cuiPx(Math.round(top)), cuiPx(Math.round(safeLeft)), Math.round((cuiClamp(beakTop, 0, clientHeight) / clientHeight) * 100), Math.round((cuiClamp(beakLeft, 0, clientWidth) / clientWidth) * 100));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiTooltipComponent, isStandalone: true, selector: "cui-tooltip", host: { listeners: { "document:click": "onClick($event.target)" }, properties: { "@cuiScaleIn": "isMobile ? options : desktop", "@cuiFadeIn": "options", "class._untouchable": "pointer", "class._mobile": "isMobile", "attr.data-appearance": "appearance", "attr.cuiTheme": "appearance" } }, providers: CUI_TOOLTIP_PROVIDERS, ngImport: i0, template: `
-    <ng-content />
-    <span
-      *polymorpheusOutlet="content() as text; context: hint.context"
-      [innerHTML]="text"
-    ></span>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiTooltipComponent, isStandalone: true, selector: "cui-tooltip", host: { listeners: { "document:click": "onClick($event.target)" }, properties: { "@cuiScaleIn": "isMobile ? options : desktop", "@cuiFadeIn": "options", "class._untouchable": "pointer", "class._mobile": "isMobile", "attr.data-appearance": "appearance", "attr.cuiTheme": "appearance" } }, providers: CUI_TOOLTIP_PROVIDERS, ngImport: i0, template: `
+    <ng-content />
+    <span
+      *polymorpheusOutlet="content() as text; context: hint.context"
+      [innerHTML]="text"
+    ></span>
   `, isInline: true, styles: [":host{padding:4px 8px;font-weight:400;font-size:14px;line-height:20px;overflow-y:auto;position:absolute;max-inline-size:375px;max-block-size:375px;background:var(--cui-gray-900);border-radius:6px;color:var(--cui-gray-0);box-sizing:border-box;font-family:var(--cui-main-font);white-space:pre-line;overflow-wrap:break-word;transform-origin:var(--left) var(--top)}:host:not([style*=top]){visibility:hidden}:host._untouchable{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], animations: [cuiFadeIn, cuiScaleIn], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
@@ -2287,12 +2287,12 @@ __decorate([
 ], CuiTooltipComponent.prototype, "apply", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiTooltipComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'cui-tooltip', imports: [PolymorpheusOutlet], template: `
-    <ng-content />
-    <span
-      *polymorpheusOutlet="content() as text; context: hint.context"
-      [innerHTML]="text"
-    ></span>
+            args: [{ standalone: true, selector: 'cui-tooltip', imports: [PolymorpheusOutlet], template: `
+    <ng-content />
+    <span
+      *polymorpheusOutlet="content() as text; context: hint.context"
+      [innerHTML]="text"
+    ></span>
   `, changeDetection: ChangeDetectionStrategy.OnPush, providers: CUI_TOOLTIP_PROVIDERS, animations: [cuiFadeIn, cuiScaleIn], host: {
                         '[@cuiScaleIn]': 'isMobile ? options : desktop',
                         '[@cuiFadeIn]': 'options',
@@ -2569,7 +2569,7 @@ class CuiContextMenuComponent {
         this.viewContainerRef.clear();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiContextMenuComponent, selector: "cui-context-menu[items][target]", inputs: { items: "items", target: "target", width: "width", withPaddings: "withPaddings" }, host: { listeners: { "window:resize": "onClose()", "click": "onStopClickPropagation($event)" } }, providers: [CuiDestroyService], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true }, { propertyName: "backdrop", first: true, predicate: ["backdrop"], descendants: true }], hostDirectives: [{ directive: i1$1.CuiClickOutsideDirective }, { directive: i1$1.CuiTargetDirective, inputs: ["ccTarget", "target"] }], ngImport: i0, template: "<ng-template #backdrop>\r\n  <div class=\"c-backdrop\"></div>\r\n</ng-template>\r\n\r\n<ng-template #list>\r\n    <div class=\"c-container\" [style.width]=\"width\">\r\n      <ul class=\"c-ul\" [class.c-ul_with-padding]=\"withPaddings\">\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-backdrop{position:fixed;inset:0}.c-ul{padding: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;width:100%;background:var(--cui-base-0);color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-ul_with-padding{padding-top:7px;padding-bottom:7px}.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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiContextMenuComponent, selector: "cui-context-menu[items][target]", inputs: { items: "items", target: "target", width: "width", withPaddings: "withPaddings" }, host: { listeners: { "window:resize": "onClose()", "click": "onStopClickPropagation($event)" } }, providers: [CuiDestroyService], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true }, { propertyName: "backdrop", first: true, predicate: ["backdrop"], descendants: true }], hostDirectives: [{ directive: i1$1.CuiClickOutsideDirective }, { directive: i1$1.CuiTargetDirective, inputs: ["ccTarget", "target"] }], ngImport: i0, template: "<ng-template #backdrop>\n  <div class=\"c-backdrop\"></div>\n</ng-template>\n\n<ng-template #list>\n    <div class=\"c-container\" [style.width]=\"width\">\n      <ul class=\"c-ul\" [class.c-ul_with-padding]=\"withPaddings\">\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-backdrop{position:fixed;inset:0}.c-ul{padding: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;width:100%;background:var(--cui-base-0);color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-ul_with-padding{padding-top:7px;padding-bottom:7px}.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: "18.2.13", ngImport: i0, type: CuiContextMenuComponent, decorators: [{
             type: Component,
@@ -2579,7 +2579,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             directive: CuiTargetDirective,
                             inputs: ['ccTarget: target']
                         }
-                    ], template: "<ng-template #backdrop>\r\n  <div class=\"c-backdrop\"></div>\r\n</ng-template>\r\n\r\n<ng-template #list>\r\n    <div class=\"c-container\" [style.width]=\"width\">\r\n      <ul class=\"c-ul\" [class.c-ul_with-padding]=\"withPaddings\">\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-backdrop{position:fixed;inset:0}.c-ul{padding: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;width:100%;background:var(--cui-base-0);color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-ul_with-padding{padding-top:7px;padding-bottom:7px}.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"] }]
+                    ], template: "<ng-template #backdrop>\n  <div class=\"c-backdrop\"></div>\n</ng-template>\n\n<ng-template #list>\n    <div class=\"c-container\" [style.width]=\"width\">\n      <ul class=\"c-ul\" [class.c-ul_with-padding]=\"withPaddings\">\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-backdrop{position:fixed;inset:0}.c-ul{padding: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;width:100%;background:var(--cui-base-0);color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-ul_with-padding{padding-top:7px;padding-bottom:7px}.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: [{
@@ -2809,11 +2809,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class CuiFormFieldComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: "18.2.13", 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"] }]
+            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 {
@@ -2834,11 +2834,11 @@ class CuiHintComponent {
         this.hintType = 'info';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: "18.2.13", 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"] }]
+            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
             }, {
@@ -2869,11 +2869,11 @@ class CuiIconButtonComponent {
         return !!this.hoverColor;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: "18.2.13", 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"] }]
+            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: [{
@@ -3150,14 +3150,14 @@ class CuiInputNumberComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiInputNumberComponent, selector: "cui-input-number", inputs: { 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]=\"value\"\r\n  [attr.id]=\"id\"\r\n  [attr.placeholder]=\"placeholder\"\r\n  type=\"text\"\r\n  [maskito]=\"maskOptions\"\r\n  [disabled]=\"isDisabled\"\r\n  class=\"c-input\"\r\n  (input)=\"onInput($event)\"\r\n  (focus)=\"onTouched()\"\r\n>\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$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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  [maskito]=\"maskOptions\"\n  [disabled]=\"isDisabled\"\n  class=\"c-input\"\n  (input)=\"onInput($event)\"\n  (focus)=\"onTouched()\"\n>\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$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { 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: "18.2.13", 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]=\"value\"\r\n  [attr.id]=\"id\"\r\n  [attr.placeholder]=\"placeholder\"\r\n  type=\"text\"\r\n  [maskito]=\"maskOptions\"\r\n  [disabled]=\"isDisabled\"\r\n  class=\"c-input\"\r\n  (input)=\"onInput($event)\"\r\n  (focus)=\"onTouched()\"\r\n>\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"] }]
+                    ], 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  [maskito]=\"maskOptions\"\n  [disabled]=\"isDisabled\"\n  class=\"c-input\"\n  (input)=\"onInput($event)\"\n  (focus)=\"onTouched()\"\n>\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: { precision: [{
                 type: Input
             }], min: [{
@@ -3223,11 +3223,11 @@ class CuiContentWrapperComponent {
         return this.gap();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiContentWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiContentWrapperComponent, isStandalone: true, selector: "cui-content-wrapper, [cuiContentWrapper]", inputs: { backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.background": "this._backgroundColor", "style.gap.px": "this._gap" } }, ngImport: i0, template: "<ng-content />\r\n", styles: [":host{padding:16px;display:flex;flex-direction:column;gap:16px;border-radius:8px}:host:empty{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiContentWrapperComponent, isStandalone: true, selector: "cui-content-wrapper, [cuiContentWrapper]", inputs: { backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.background": "this._backgroundColor", "style.gap.px": "this._gap" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{padding:16px;display:flex;flex-direction:column;gap:16px;border-radius:8px}:host:empty{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiContentWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-content-wrapper, [cuiContentWrapper]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\r\n", styles: [":host{padding:16px;display:flex;flex-direction:column;gap:16px;border-radius:8px}:host:empty{display:contents}\n"] }]
+            args: [{ selector: 'cui-content-wrapper, [cuiContentWrapper]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{padding:16px;display:flex;flex-direction:column;gap:16px;border-radius:8px}:host:empty{display:contents}\n"] }]
         }], propDecorators: { _backgroundColor: [{
                 type: HostBinding,
                 args: ['style.background']
@@ -3312,14 +3312,14 @@ class CuiInputPasswordComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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"] }]
+                    ], 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']
@@ -3411,14 +3411,14 @@ class CuiInputTextComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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"] }]
+                    ], 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']
@@ -3531,14 +3531,14 @@ class CuiInputTimeComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiInputTimeComponent, selector: "cui-input-time", inputs: { mode: "mode" }, 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, CuiInputTimeComponent, true)
-        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<cui-svg\r\n  icon=\"cuiIconClock\"\r\n  color=\"var(--cui-base-500)\"\r\n></cui-svg>\r\n<input\r\n  #input\r\n  [ngModel]=\"computedValue\"\r\n  [attr.id]=\"id\"\r\n  [attr.placeholder]=\"placeholder\"\r\n  type=\"text\"\r\n  [maskito]=\"maskOptions\"\r\n  [disabled]=\"isDisabled\"\r\n  class=\"c-input\"\r\n  (input)=\"onInput($event)\"\r\n  (focus)=\"onTouched()\"\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: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<cui-svg\n  icon=\"cuiIconClock\"\n  color=\"var(--cui-base-500)\"\n></cui-svg>\n<input\n  #input\n  [ngModel]=\"computedValue\"\n  [attr.id]=\"id\"\n  [attr.placeholder]=\"placeholder\"\n  type=\"text\"\n  [maskito]=\"maskOptions\"\n  [disabled]=\"isDisabled\"\n  class=\"c-input\"\n  (input)=\"onInput($event)\"\n  (focus)=\"onTouched()\"\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: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { 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: "18.2.13", ngImport: i0, type: CuiInputTimeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cui-input-time', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         CUI_TEXT_FILED_CONTROLLER_PROVIDER,
                         cuiProvide(NG_VALUE_ACCESSOR, CuiInputTimeComponent, true)
-                    ], template: "<cui-svg\r\n  icon=\"cuiIconClock\"\r\n  color=\"var(--cui-base-500)\"\r\n></cui-svg>\r\n<input\r\n  #input\r\n  [ngModel]=\"computedValue\"\r\n  [attr.id]=\"id\"\r\n  [attr.placeholder]=\"placeholder\"\r\n  type=\"text\"\r\n  [maskito]=\"maskOptions\"\r\n  [disabled]=\"isDisabled\"\r\n  class=\"c-input\"\r\n  (input)=\"onInput($event)\"\r\n  (focus)=\"onTouched()\"\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"] }]
+                    ], template: "<cui-svg\n  icon=\"cuiIconClock\"\n  color=\"var(--cui-base-500)\"\n></cui-svg>\n<input\n  #input\n  [ngModel]=\"computedValue\"\n  [attr.id]=\"id\"\n  [attr.placeholder]=\"placeholder\"\n  type=\"text\"\n  [maskito]=\"maskOptions\"\n  [disabled]=\"isDisabled\"\n  class=\"c-input\"\n  (input)=\"onInput($event)\"\n  (focus)=\"onTouched()\"\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: { mode: [{
                 type: Input
             }], isDisabled: [{
@@ -3591,11 +3591,11 @@ class CuiLabelComponent {
         this.isRequired = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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;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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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;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: "18.2.13", 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;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"] }]
+            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;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
             }] } });
@@ -3630,11 +3630,11 @@ class CuiLetterBoxComponent {
         return this.shape;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiLetterBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiLetterBoxComponent, isStandalone: true, selector: "cui-letter-box", inputs: { letter: "letter", backgroundColor: "backgroundColor", size: "size", shape: "shape" }, host: { properties: { "style.background-color": "this._backgroundColor", "attr.data-size": "this._size", "attr.data-shape": "this._shape" } }, ngImport: i0, template: "{{ letter }}\r\n", styles: [":host{font-weight:600;flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;border-radius:4px;color:var(--cui-gray-0);text-transform:uppercase}:host[data-size=sm]{font-size:12px;line-height:14px;padding-right:4px;padding-left:4px;min-width:18px;height:18px}:host[data-size=md]{font-size:14px;line-height:20px;min-width:24px;height:24px}:host[data-shape=rounded]{padding:0;border-radius:50%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiLetterBoxComponent, isStandalone: true, selector: "cui-letter-box", inputs: { letter: "letter", backgroundColor: "backgroundColor", size: "size", shape: "shape" }, host: { properties: { "style.background-color": "this._backgroundColor", "attr.data-size": "this._size", "attr.data-shape": "this._shape" } }, ngImport: i0, template: "{{ letter }}\n", styles: [":host{font-weight:600;flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;border-radius:4px;color:var(--cui-gray-0);text-transform:uppercase}:host[data-size=sm]{font-size:12px;line-height:14px;padding-right:4px;padding-left:4px;min-width:18px;height:18px}:host[data-size=md]{font-size:14px;line-height:20px;min-width:24px;height:24px}:host[data-shape=rounded]{padding:0;border-radius:50%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiLetterBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-letter-box', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "{{ letter }}\r\n", styles: [":host{font-weight:600;flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;border-radius:4px;color:var(--cui-gray-0);text-transform:uppercase}:host[data-size=sm]{font-size:12px;line-height:14px;padding-right:4px;padding-left:4px;min-width:18px;height:18px}:host[data-size=md]{font-size:14px;line-height:20px;min-width:24px;height:24px}:host[data-shape=rounded]{padding:0;border-radius:50%}\n"] }]
+            args: [{ selector: 'cui-letter-box', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "{{ letter }}\n", styles: [":host{font-weight:600;flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;border-radius:4px;color:var(--cui-gray-0);text-transform:uppercase}:host[data-size=sm]{font-size:12px;line-height:14px;padding-right:4px;padding-left:4px;min-width:18px;height:18px}:host[data-size=md]{font-size:14px;line-height:20px;min-width:24px;height:24px}:host[data-shape=rounded]{padding:0;border-radius:50%}\n"] }]
         }], propDecorators: { letter: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3804,7 +3804,7 @@ class CuiSelectComponent {
             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: "backdrop", first: true, predicate: ["backdrop"], descendants: true }, { propertyName: "optionsWrapper", first: true, predicate: ["optionsWrapper"], descendants: true }], hostDirectives: [{ directive: i1$1.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 #backdrop>\r\n  <div class=\"c-backdrop\"></div>\r\n</ng-template>\r\n<ng-template #optionsWrapper>\r\n  <div\r\n    cuiFocusTrap\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($event, 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);text-align:start}.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-backdrop{position:fixed;inset:0}.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;text-align:start}.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"] }, { kind: "directive", type: i1$1.CuiFocusTrapDirective, selector: "[cuiFocusTrap]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }, { propertyName: "getOptionsListHeightContainer", first: true, predicate: ["getOptionsListHeightContainer"], descendants: true }, { propertyName: "backdrop", first: true, predicate: ["backdrop"], descendants: true }, { propertyName: "optionsWrapper", first: true, predicate: ["optionsWrapper"], descendants: true }], hostDirectives: [{ directive: i1$1.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 #backdrop>\n  <div class=\"c-backdrop\"></div>\n</ng-template>\n<ng-template #optionsWrapper>\n  <div\n    cuiFocusTrap\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($event, 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);text-align:start}.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-backdrop{position:fixed;inset:0}.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;text-align:start}.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"] }, { kind: "directive", type: i1$1.CuiFocusTrapDirective, selector: "[cuiFocusTrap]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSelectComponent, decorators: [{
             type: Component,
@@ -3812,7 +3812,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         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 #backdrop>\r\n  <div class=\"c-backdrop\"></div>\r\n</ng-template>\r\n<ng-template #optionsWrapper>\r\n  <div\r\n    cuiFocusTrap\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($event, 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);text-align:start}.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-backdrop{position:fixed;inset:0}.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;text-align:start}.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"] }]
+                    ], 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 #backdrop>\n  <div class=\"c-backdrop\"></div>\n</ng-template>\n<ng-template #optionsWrapper>\n  <div\n    cuiFocusTrap\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($event, 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);text-align:start}.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-backdrop{position:fixed;inset:0}.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;text-align:start}.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: [{
@@ -3868,13 +3868,13 @@ class CuiEmptyStateComponent {
         this.subtitle = input();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiEmptyStateComponent, isStandalone: true, selector: "cui-empty-state, [cuiEmptyState]", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class._with-title": "!!this.title()" } }, ngImport: i0, template: "@if (title(); as title) {\r\n    <p class=\"title\">{{ title }}</p>\r\n}\r\n@if (subtitle(); as subtitle) {\r\n    <p class=\"subtitle\">{{ subtitle }}</p>\r\n}\r\n<ng-content />\r\n", styles: [":host{--padding-vertical: 24px;--padding-horizontal: 0;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;padding:16px;margin:auto;height:100%;text-align:center}:host._with-title{padding:var(--padding-vertical) var(--padding-horizontal)}.title,.subtitle{margin:0}.title{font-weight:500;font-size:16px;line-height:24px}.subtitle{font-weight:400;font-size:14px;line-height:20px;color:var(--cui-base-500)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiEmptyStateComponent, isStandalone: true, selector: "cui-empty-state, [cuiEmptyState]", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class._with-title": "!!this.title()" } }, ngImport: i0, template: "@if (title(); as title) {\n    <p class=\"title\">{{ title }}</p>\n}\n@if (subtitle(); as subtitle) {\n    <p class=\"subtitle\">{{ subtitle }}</p>\n}\n<ng-content />\n", styles: [":host{--padding-vertical: 24px;--padding-horizontal: 0;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;padding:16px;margin:auto;height:100%;text-align:center}:host._with-title{padding:var(--padding-vertical) var(--padding-horizontal)}.title,.subtitle{margin:0}.title{font-weight:500;font-size:16px;line-height:24px}.subtitle{font-weight:400;font-size:14px;line-height:20px;color:var(--cui-base-500)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEmptyStateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cui-empty-state, [cuiEmptyState]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class._with-title]': '!!this.title()'
-                    }, template: "@if (title(); as title) {\r\n    <p class=\"title\">{{ title }}</p>\r\n}\r\n@if (subtitle(); as subtitle) {\r\n    <p class=\"subtitle\">{{ subtitle }}</p>\r\n}\r\n<ng-content />\r\n", styles: [":host{--padding-vertical: 24px;--padding-horizontal: 0;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;padding:16px;margin:auto;height:100%;text-align:center}:host._with-title{padding:var(--padding-vertical) var(--padding-horizontal)}.title,.subtitle{margin:0}.title{font-weight:500;font-size:16px;line-height:24px}.subtitle{font-weight:400;font-size:14px;line-height:20px;color:var(--cui-base-500)}\n"] }]
+                    }, template: "@if (title(); as title) {\n    <p class=\"title\">{{ title }}</p>\n}\n@if (subtitle(); as subtitle) {\n    <p class=\"subtitle\">{{ subtitle }}</p>\n}\n<ng-content />\n", styles: [":host{--padding-vertical: 24px;--padding-horizontal: 0;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;padding:16px;margin:auto;height:100%;text-align:center}:host._with-title{padding:var(--padding-vertical) var(--padding-horizontal)}.title,.subtitle{margin:0}.title{font-weight:500;font-size:16px;line-height:24px}.subtitle{font-weight:400;font-size:14px;line-height:20px;color:var(--cui-base-500)}\n"] }]
         }] });
 
 const IS_SIDEBAR_OPENED_STORAGE_KEY = 'is-sidebar-opened';
@@ -3912,11 +3912,11 @@ class CuiRenderDynamicComponentsComponent {
         this.dynamicComponents = this.renderDynamicComponentsService.dynamicComponents;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiRenderDynamicComponentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiRenderDynamicComponentsComponent, isStandalone: true, selector: "cui-render-dynamic-components", ngImport: i0, template: "@for (dynamicComponent of dynamicComponents(); let isLast = $last; track $index) {\r\n    <div\r\n        class=\"container\"\r\n        [class.container_hidden]=\"!isLast\"\r\n    >\r\n        <ng-container *ngComponentOutlet=\"dynamicComponent.component; inputs: dynamicComponent.inputs\" />\r\n    </div>\r\n}\r\n", styles: [":host{display:contents}.container{display:contents}.container_hidden{display:none}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiRenderDynamicComponentsComponent, isStandalone: true, selector: "cui-render-dynamic-components", ngImport: i0, template: "@for (dynamicComponent of dynamicComponents(); let isLast = $last; track $index) {\n    <div\n        class=\"container\"\n        [class.container_hidden]=\"!isLast\"\n    >\n        <ng-container *ngComponentOutlet=\"dynamicComponent.component; inputs: dynamicComponent.inputs\" />\n    </div>\n}\n", styles: [":host{display:contents}.container{display:contents}.container_hidden{display:none}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiRenderDynamicComponentsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-render-dynamic-components', imports: [NgComponentOutlet], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (dynamicComponent of dynamicComponents(); let isLast = $last; track $index) {\r\n    <div\r\n        class=\"container\"\r\n        [class.container_hidden]=\"!isLast\"\r\n    >\r\n        <ng-container *ngComponentOutlet=\"dynamicComponent.component; inputs: dynamicComponent.inputs\" />\r\n    </div>\r\n}\r\n", styles: [":host{display:contents}.container{display:contents}.container_hidden{display:none}\n"] }]
+            args: [{ selector: 'cui-render-dynamic-components', imports: [NgComponentOutlet], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (dynamicComponent of dynamicComponents(); let isLast = $last; track $index) {\n    <div\n        class=\"container\"\n        [class.container_hidden]=\"!isLast\"\n    >\n        <ng-container *ngComponentOutlet=\"dynamicComponent.component; inputs: dynamicComponent.inputs\" />\n    </div>\n}\n", styles: [":host{display:contents}.container{display:contents}.container_hidden{display:none}\n"] }]
         }] });
 
 class CuiSidebarService extends CuiRenderDynamicComponentsService {
@@ -3967,11 +3967,11 @@ class CuiSidebarHeaderComponent {
         this.sidebarService.switch();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSidebarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiSidebarHeaderComponent, isStandalone: true, selector: "header[cuiSidebarHeader]", inputs: { headerSlot: { classPropertyName: "headerSlot", publicName: "headerSlot", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"headerSlot()\" [ngTemplateOutletContext]=\"{ $implicit: isOpened() }\" />\r\n<button type=\"button\" class=\"button\" [class.button_opened]=\"isOpened()\" (click)=\"onSwitch($event)\">\r\n  <cui-svg [icon]=\"buttonIcon()\" color=\"var(--cui-base-500)\" />\r\n</button>", styles: [":host{display:flex;gap:8px;align-items:center;padding:8px 12px 22px;position:relative;border-bottom:1px solid var(--cui-base-200);margin-bottom:21px}.button{padding:6px;position:absolute;bottom:0;transform:translateY(calc(50% + .5px));display:flex;border-radius:50%;background:var(--cui-base-100)}.button_opened{right:0}\n"], dependencies: [{ kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiSidebarHeaderComponent, isStandalone: true, selector: "header[cuiSidebarHeader]", inputs: { headerSlot: { classPropertyName: "headerSlot", publicName: "headerSlot", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"headerSlot()\" [ngTemplateOutletContext]=\"{ $implicit: isOpened() }\" />\n<button type=\"button\" class=\"button\" [class.button_opened]=\"isOpened()\" (click)=\"onSwitch($event)\">\n  <cui-svg [icon]=\"buttonIcon()\" color=\"var(--cui-base-500)\" />\n</button>", styles: [":host{display:flex;gap:8px;align-items:center;padding:8px 12px 22px;position:relative;border-bottom:1px solid var(--cui-base-200);margin-bottom:21px}.button{padding:6px;position:absolute;bottom:0;transform:translateY(calc(50% + .5px));display:flex;border-radius:50%;background:var(--cui-base-100)}.button_opened{right:0}\n"], dependencies: [{ kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSidebarHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'header[cuiSidebarHeader]', imports: [CuiSvgModule, NgTemplateOutlet], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngTemplateOutlet]=\"headerSlot()\" [ngTemplateOutletContext]=\"{ $implicit: isOpened() }\" />\r\n<button type=\"button\" class=\"button\" [class.button_opened]=\"isOpened()\" (click)=\"onSwitch($event)\">\r\n  <cui-svg [icon]=\"buttonIcon()\" color=\"var(--cui-base-500)\" />\r\n</button>", styles: [":host{display:flex;gap:8px;align-items:center;padding:8px 12px 22px;position:relative;border-bottom:1px solid var(--cui-base-200);margin-bottom:21px}.button{padding:6px;position:absolute;bottom:0;transform:translateY(calc(50% + .5px));display:flex;border-radius:50%;background:var(--cui-base-100)}.button_opened{right:0}\n"] }]
+            args: [{ selector: 'header[cuiSidebarHeader]', imports: [CuiSvgModule, NgTemplateOutlet], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngTemplateOutlet]=\"headerSlot()\" [ngTemplateOutletContext]=\"{ $implicit: isOpened() }\" />\n<button type=\"button\" class=\"button\" [class.button_opened]=\"isOpened()\" (click)=\"onSwitch($event)\">\n  <cui-svg [icon]=\"buttonIcon()\" color=\"var(--cui-base-500)\" />\n</button>", styles: [":host{display:flex;gap:8px;align-items:center;padding:8px 12px 22px;position:relative;border-bottom:1px solid var(--cui-base-200);margin-bottom:21px}.button{padding:6px;position:absolute;bottom:0;transform:translateY(calc(50% + .5px));display:flex;border-radius:50%;background:var(--cui-base-100)}.button_opened{right:0}\n"] }]
         }] });
 
 class CuiSidebarContainerComponent {
@@ -3984,7 +3984,7 @@ class CuiSidebarContainerComponent {
         this.sidebarService.setWidth(width);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSidebarContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiSidebarContainerComponent, isStandalone: true, selector: "cui-sidebar-container", host: { listeners: { "cuiResizeObserver": "onResize($event.width)" }, properties: { "class._opened": "isOpened()" } }, hostDirectives: [{ directive: i1$1.CuiDimensionsObserverDirective, outputs: ["cuiResizeObserver", "cuiResizeObserver"] }], ngImport: i0, template: "@if (!isHidden()) {\r\n    <ng-content />\r\n}\r\n", styles: [":host{padding:16px 7.5px 8px 8px;position:fixed;top:0;bottom:0;left:0;display:flex;flex-direction:column;border-right:.5px solid var(--cui-base-200);background:var(--cui-base-50)}:host._opened{width:240px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiSidebarContainerComponent, isStandalone: true, selector: "cui-sidebar-container", host: { listeners: { "cuiResizeObserver": "onResize($event.width)" }, properties: { "class._opened": "isOpened()" } }, hostDirectives: [{ directive: i1$1.CuiDimensionsObserverDirective, outputs: ["cuiResizeObserver", "cuiResizeObserver"] }], ngImport: i0, template: "@if (!isHidden()) {\n    <ng-content />\n}\n", styles: [":host{padding:16px 7.5px 8px 8px;position:fixed;top:0;bottom:0;left:0;display:flex;flex-direction:column;border-right:.5px solid var(--cui-base-200);background:var(--cui-base-50)}:host._opened{width:240px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSidebarContainerComponent, decorators: [{
             type: Component,
@@ -3996,7 +3996,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     ], host: {
                         '(cuiResizeObserver)': 'onResize($event.width)',
                         '[class._opened]': 'isOpened()'
-                    }, template: "@if (!isHidden()) {\r\n    <ng-content />\r\n}\r\n", styles: [":host{padding:16px 7.5px 8px 8px;position:fixed;top:0;bottom:0;left:0;display:flex;flex-direction:column;border-right:.5px solid var(--cui-base-200);background:var(--cui-base-50)}:host._opened{width:240px}\n"] }]
+                    }, template: "@if (!isHidden()) {\n    <ng-content />\n}\n", styles: [":host{padding:16px 7.5px 8px 8px;position:fixed;top:0;bottom:0;left:0;display:flex;flex-direction:column;border-right:.5px solid var(--cui-base-200);background:var(--cui-base-50)}:host._opened{width:240px}\n"] }]
         }] });
 
 class CuiSidebarNavigationComponent {
@@ -4005,11 +4005,11 @@ class CuiSidebarNavigationComponent {
         this.slot = input.required();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSidebarNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiSidebarNavigationComponent, isStandalone: true, selector: "cui-sidebar-navigation", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: true, transformFunction: null }, slot: { classPropertyName: "slot", publicName: "slot", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<nav class=\"nav\">\r\n  <ul class=\"list\">\r\n    @for (link of links(); track link.text; let isLast = $last) {\r\n    <ng-container [ngTemplateOutlet]=\"slot()\" [ngTemplateOutletContext]=\"{ $implicit: link, isLast }\" />\r\n    }\r\n  </ul>\r\n</nav>", styles: [".nav{flex:1}.list{display:flex;flex-direction:column;gap:4px;height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiSidebarNavigationComponent, isStandalone: true, selector: "cui-sidebar-navigation", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: true, transformFunction: null }, slot: { classPropertyName: "slot", publicName: "slot", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<nav class=\"nav\">\n  <ul class=\"list\">\n    @for (link of links(); track link.text; let isLast = $last) {\n    <ng-container [ngTemplateOutlet]=\"slot()\" [ngTemplateOutletContext]=\"{ $implicit: link, isLast }\" />\n    }\n  </ul>\n</nav>", styles: [".nav{flex:1}.list{display:flex;flex-direction:column;gap:4px;height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSidebarNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-sidebar-navigation', imports: [NgTemplateOutlet], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"nav\">\r\n  <ul class=\"list\">\r\n    @for (link of links(); track link.text; let isLast = $last) {\r\n    <ng-container [ngTemplateOutlet]=\"slot()\" [ngTemplateOutletContext]=\"{ $implicit: link, isLast }\" />\r\n    }\r\n  </ul>\r\n</nav>", styles: [".nav{flex:1}.list{display:flex;flex-direction:column;gap:4px;height:100%}\n"] }]
+            args: [{ selector: 'cui-sidebar-navigation', imports: [NgTemplateOutlet], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"nav\">\n  <ul class=\"list\">\n    @for (link of links(); track link.text; let isLast = $last) {\n    <ng-container [ngTemplateOutlet]=\"slot()\" [ngTemplateOutletContext]=\"{ $implicit: link, isLast }\" />\n    }\n  </ul>\n</nav>", styles: [".nav{flex:1}.list{display:flex;flex-direction:column;gap:4px;height:100%}\n"] }]
         }] });
 
 class CuiSidebarNavigationItemComponent {
@@ -4020,13 +4020,13 @@ class CuiSidebarNavigationItemComponent {
         this.isOpen = input();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSidebarNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiSidebarNavigationItemComponent, isStandalone: true, selector: "[cuiSidebarNavigationItem]", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class._active": "active()" } }, ngImport: i0, template: "@if (icon(); as icon) {\r\n<cui-svg [icon]=\"icon\" color=\"var(--cui-base-500)\" />\r\n}\r\n@if (isOpen()) {\r\n{{ text() }}\r\n}", styles: [":host{padding:8px 12px;display:flex;gap:12px;width:100%;border-radius:8px}:host:active{background:var(--cui-base-100)}@media (hover: hover){:host:hover{background:var(--cui-base-100)}}:host._active{background:var(--cui-base-100)}\n"], dependencies: [{ kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiSidebarNavigationItemComponent, isStandalone: true, selector: "[cuiSidebarNavigationItem]", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class._active": "active()" } }, ngImport: i0, template: "@if (icon(); as icon) {\n<cui-svg [icon]=\"icon\" color=\"var(--cui-base-500)\" />\n}\n@if (isOpen()) {\n{{ text() }}\n}", styles: [":host{padding:8px 12px;display:flex;gap:12px;width:100%;border-radius:8px}:host:active{background:var(--cui-base-100)}@media (hover: hover){:host:hover{background:var(--cui-base-100)}}:host._active{background:var(--cui-base-100)}\n"], dependencies: [{ kind: "ngmodule", type: CuiSvgModule }, { 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: "18.2.13", ngImport: i0, type: CuiSidebarNavigationItemComponent, decorators: [{
             type: Component,
             args: [{ selector: '[cuiSidebarNavigationItem]', imports: [CuiSvgModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class._active]': 'active()'
-                    }, template: "@if (icon(); as icon) {\r\n<cui-svg [icon]=\"icon\" color=\"var(--cui-base-500)\" />\r\n}\r\n@if (isOpen()) {\r\n{{ text() }}\r\n}", styles: [":host{padding:8px 12px;display:flex;gap:12px;width:100%;border-radius:8px}:host:active{background:var(--cui-base-100)}@media (hover: hover){:host:hover{background:var(--cui-base-100)}}:host._active{background:var(--cui-base-100)}\n"] }]
+                    }, template: "@if (icon(); as icon) {\n<cui-svg [icon]=\"icon\" color=\"var(--cui-base-500)\" />\n}\n@if (isOpen()) {\n{{ text() }}\n}", styles: [":host{padding:8px 12px;display:flex;gap:12px;width:100%;border-radius:8px}:host:active{background:var(--cui-base-100)}@media (hover: hover){:host:hover{background:var(--cui-base-100)}}:host._active{background:var(--cui-base-100)}\n"] }]
         }] });
 
 class CuiSidebarNavigationContainerComponent {
@@ -4035,11 +4035,11 @@ class CuiSidebarNavigationContainerComponent {
         this.title = input();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSidebarNavigationContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiSidebarNavigationContainerComponent, isStandalone: true, selector: "cui-sidebar-navigation-container", inputs: { slot: { classPropertyName: "slot", publicName: "slot", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (title(); as title) {\r\n    <h3 class=\"title\">{{ title }}</h3>\r\n}\r\n\r\n<ng-container [ngTemplateOutlet]=\"slot()\" />\r\n", styles: [":host{display:flex;flex-direction:column;gap:4px}.title{padding:8px 12px;font-weight:400;font-size:14px;line-height:20px;color:var(--cui-base-500);text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiSidebarNavigationContainerComponent, isStandalone: true, selector: "cui-sidebar-navigation-container", inputs: { slot: { classPropertyName: "slot", publicName: "slot", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (title(); as title) {\n    <h3 class=\"title\">{{ title }}</h3>\n}\n\n<ng-container [ngTemplateOutlet]=\"slot()\" />\n", styles: [":host{display:flex;flex-direction:column;gap:4px}.title{padding:8px 12px;font-weight:400;font-size:14px;line-height:20px;color:var(--cui-base-500);text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSidebarNavigationContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-sidebar-navigation-container', imports: [NgTemplateOutlet], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (title(); as title) {\r\n    <h3 class=\"title\">{{ title }}</h3>\r\n}\r\n\r\n<ng-container [ngTemplateOutlet]=\"slot()\" />\r\n", styles: [":host{display:flex;flex-direction:column;gap:4px}.title{padding:8px 12px;font-weight:400;font-size:14px;line-height:20px;color:var(--cui-base-500);text-transform:uppercase}\n"] }]
+            args: [{ selector: 'cui-sidebar-navigation-container', imports: [NgTemplateOutlet], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (title(); as title) {\n    <h3 class=\"title\">{{ title }}</h3>\n}\n\n<ng-container [ngTemplateOutlet]=\"slot()\" />\n", styles: [":host{display:flex;flex-direction:column;gap:4px}.title{padding:8px 12px;font-weight:400;font-size:14px;line-height:20px;color:var(--cui-base-500);text-transform:uppercase}\n"] }]
         }] });
 
 class CuiCardWrapperComponent {
@@ -4047,13 +4047,13 @@ class CuiCardWrapperComponent {
         this.withBorder = input(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCardWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiCardWrapperComponent, isStandalone: true, selector: "cui-card-wrapper, [cuiCardWrapper]", inputs: { withBorder: { classPropertyName: "withBorder", publicName: "withBorder", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class._with-border": "withBorder()" } }, ngImport: i0, template: "<ng-content />\r\n", styles: [":host{--gap: 4px;--background: var(--cui-bg-light);--background-hover: var(--cui-base-10);--border: var(--cui-base-200);display:flex;gap:var(--gap);align-items:center;padding:4px 8px;border-radius:8px;width:100%;background-color:var(--background)}:host:hover{background-color:var(--background-hover)}:host._with-border{border:1px solid var(--border)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiCardWrapperComponent, isStandalone: true, selector: "cui-card-wrapper, [cuiCardWrapper]", inputs: { withBorder: { classPropertyName: "withBorder", publicName: "withBorder", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class._with-border": "withBorder()" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{--gap: 4px;--background: var(--cui-bg-light);--background-hover: var(--cui-base-10);--border: var(--cui-base-200);display:flex;gap:var(--gap);align-items:center;padding:4px 8px;border-radius:8px;width:100%;background-color:var(--background)}:host:hover{background-color:var(--background-hover)}:host._with-border{border:1px solid var(--border)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCardWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cui-card-wrapper, [cuiCardWrapper]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class._with-border]': 'withBorder()'
-                    }, template: "<ng-content />\r\n", styles: [":host{--gap: 4px;--background: var(--cui-bg-light);--background-hover: var(--cui-base-10);--border: var(--cui-base-200);display:flex;gap:var(--gap);align-items:center;padding:4px 8px;border-radius:8px;width:100%;background-color:var(--background)}:host:hover{background-color:var(--background-hover)}:host._with-border{border:1px solid var(--border)}\n"] }]
+                    }, template: "<ng-content />\n", styles: [":host{--gap: 4px;--background: var(--cui-bg-light);--background-hover: var(--cui-base-10);--border: var(--cui-base-200);display:flex;gap:var(--gap);align-items:center;padding:4px 8px;border-radius:8px;width:100%;background-color:var(--background)}:host:hover{background-color:var(--background-hover)}:host._with-border{border:1px solid var(--border)}\n"] }]
         }] });
 
 class CuiLayoutComponent {
@@ -4061,13 +4061,13 @@ class CuiLayoutComponent {
         this.sidebarWidth = input.required();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiLayoutComponent, isStandalone: true, selector: "cui-layout", inputs: { sidebarWidth: { classPropertyName: "sidebarWidth", publicName: "sidebarWidth", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.marginLeft.px": "sidebarWidth()" } }, ngImport: i0, template: "<div class=\"content\">\r\n    <ng-content />\r\n</div>\r\n", styles: [":host{--maxWidth: 1320px;--horizontalPadding: 24px;--verticalPadding: 0;position:relative;display:block;min-height:100vh}:host .content{padding:var(--verticalPadding) var(--horizontalPadding);margin:0 auto;max-width:var(--maxWidth)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiLayoutComponent, isStandalone: true, selector: "cui-layout", inputs: { sidebarWidth: { classPropertyName: "sidebarWidth", publicName: "sidebarWidth", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.marginLeft.px": "sidebarWidth()" } }, ngImport: i0, template: "<div class=\"content\">\n    <ng-content />\n</div>\n", styles: [":host{--maxWidth: 1320px;--horizontalPadding: 24px;--verticalPadding: 0;position:relative;display:block;min-height:100vh}:host .content{padding:var(--verticalPadding) var(--horizontalPadding);margin:0 auto;max-width:var(--maxWidth)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cui-layout', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[style.marginLeft.px]': 'sidebarWidth()'
-                    }, template: "<div class=\"content\">\r\n    <ng-content />\r\n</div>\r\n", styles: [":host{--maxWidth: 1320px;--horizontalPadding: 24px;--verticalPadding: 0;position:relative;display:block;min-height:100vh}:host .content{padding:var(--verticalPadding) var(--horizontalPadding);margin:0 auto;max-width:var(--maxWidth)}\n"] }]
+                    }, template: "<div class=\"content\">\n    <ng-content />\n</div>\n", styles: [":host{--maxWidth: 1320px;--horizontalPadding: 24px;--verticalPadding: 0;position:relative;display:block;min-height:100vh}:host .content{padding:var(--verticalPadding) var(--horizontalPadding);margin:0 auto;max-width:var(--maxWidth)}\n"] }]
         }] });
 
 const CUI_TAB_ACTIVATE = 'cui-tab-activate';
@@ -4079,11 +4079,11 @@ class CuiTabComponent {
         this.element.dispatchEvent(new CustomEvent(CUI_TAB_ACTIVATE, { bubbles: true }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: "18.2.13", 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"] }]
+            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']
@@ -4121,11 +4121,11 @@ class CuiTabsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: "18.2.13", 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"] }]
+            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: [{
@@ -4692,11 +4692,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class SelectOptionComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SelectOptionComponent, isStandalone: true, selector: "cc-select-option", inputs: { tool: "tool" }, ngImport: i0, template: "<ng-container *ngIf=\"tool\">\r\n  <img\r\n      *ngIf=\"tool.image\"\r\n      class=\"image\"\r\n      [src]=\"tool.image\"\r\n      alt=\"\"\r\n  />\r\n  <h3 class=\"title\">{{ tool.title }}</h3>\r\n</ng-container>\r\n", styles: [":host{padding:4px 8px;cursor:pointer;display:flex;align-items:center;gap:8px;border-radius:8px}@media (hover: hover){:host:hover{background-color:var(--cui-base-50)}}:host:active{background-color:var(--cui-base-50)}.title{font-weight:400;font-size:14px;line-height:20px;padding-top:2px;padding-bottom:2px;color:var(--cui-base-900)}.image{width:23px;height:23px;object-fit:cover;object-position:center}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SelectOptionComponent, isStandalone: true, selector: "cc-select-option", inputs: { tool: "tool" }, ngImport: i0, template: "<ng-container *ngIf=\"tool\">\n  <img\n      *ngIf=\"tool.image\"\n      class=\"image\"\n      [src]=\"tool.image\"\n      alt=\"\"\n  />\n  <h3 class=\"title\">{{ tool.title }}</h3>\n</ng-container>\n", styles: [":host{padding:4px 8px;cursor:pointer;display:flex;align-items:center;gap:8px;border-radius:8px}@media (hover: hover){:host:hover{background-color:var(--cui-base-50)}}:host:active{background-color:var(--cui-base-50)}.title{font-weight:400;font-size:14px;line-height:20px;padding-top:2px;padding-bottom:2px;color:var(--cui-base-900)}.image{width:23px;height:23px;object-fit:cover;object-position:center}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cc-select-option', standalone: true, imports: [NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"tool\">\r\n  <img\r\n      *ngIf=\"tool.image\"\r\n      class=\"image\"\r\n      [src]=\"tool.image\"\r\n      alt=\"\"\r\n  />\r\n  <h3 class=\"title\">{{ tool.title }}</h3>\r\n</ng-container>\r\n", styles: [":host{padding:4px 8px;cursor:pointer;display:flex;align-items:center;gap:8px;border-radius:8px}@media (hover: hover){:host:hover{background-color:var(--cui-base-50)}}:host:active{background-color:var(--cui-base-50)}.title{font-weight:400;font-size:14px;line-height:20px;padding-top:2px;padding-bottom:2px;color:var(--cui-base-900)}.image{width:23px;height:23px;object-fit:cover;object-position:center}\n"] }]
+            args: [{ selector: 'cc-select-option', standalone: true, imports: [NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"tool\">\n  <img\n      *ngIf=\"tool.image\"\n      class=\"image\"\n      [src]=\"tool.image\"\n      alt=\"\"\n  />\n  <h3 class=\"title\">{{ tool.title }}</h3>\n</ng-container>\n", styles: [":host{padding:4px 8px;cursor:pointer;display:flex;align-items:center;gap:8px;border-radius:8px}@media (hover: hover){:host:hover{background-color:var(--cui-base-50)}}:host:active{background-color:var(--cui-base-50)}.title{font-weight:400;font-size:14px;line-height:20px;padding-top:2px;padding-bottom:2px;color:var(--cui-base-900)}.image{width:23px;height:23px;object-fit:cover;object-position:center}\n"] }]
         }], propDecorators: { tool: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4812,7 +4812,7 @@ class MarkerSelectComponent {
                 useExisting: forwardRef(() => MarkerSelectComponent),
                 multi: true
             }
-        ], hostDirectives: [{ directive: i1$1.CuiClickOutsideDirective }], ngImport: i0, template: "<ng-container *ngIf=\"isVisible()\">\r\n  <div\r\n      #dropdown\r\n      class=\"dropdown\"\r\n  >\r\n      <header class=\"header\">\r\n          <cui-input-text\r\n              class=\"header__input\"\r\n              cuiTextFieldId=\"estimated\"\r\n              cuiTextFieldPlaceholder=\"Search...\"\r\n          />\r\n          <button\r\n              cuiButton\r\n              type=\"button\"\r\n              appearance=\"ghost\"\r\n              size=\"xxs\"\r\n              icon=\"cuiIconFiltersLines\"\r\n          ></button>\r\n      </header>\r\n      <div class=\"scrollable-content\">\r\n        <cc-select-option\r\n            *ngFor=\"let element of elements\"\r\n            [class._selected]=\"element.id === value?.id\"\r\n            (click)=\"onToolClick(element)\"\r\n            [tool]=\"element\"\r\n        />\r\n      </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{position:fixed;z-index:10;left:0}:host._hidden{visibility:hidden}._selected{background-color:var(--cui-base-50)}.dropdown{box-shadow:0 1px 4px #0000000a,0 1px 4px #0000000a;padding-top:3px;padding-bottom:3px;display:flex;flex-direction:column;gap:4px;border-radius:8px;border:1px solid var(--cui-base-200);max-height:350px;width:345px;background:var(--cui-base-0)}.header{padding:4px 5px;display:flex;align-items:center;gap:4px}.header__input{width:100%}.footer{padding:2px 5px}.title{font-weight:400;font-size:14px;line-height:20px;padding:2px 8px;color:var(--cui-base-500);text-transform:uppercase}.scrollable-content{padding-left:5px;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "ngmodule", type: CuiContextMenuModule }, { kind: "ngmodule", type: CuiInputModule }, { kind: "component", type: CuiInputTextComponent, selector: "cui-input-text" }, { kind: "directive", type: CuiTextFieldIdDirective, selector: "[cuiTextFieldId]", inputs: ["cuiTextFieldId"] }, { kind: "directive", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: SelectOptionComponent, selector: "cc-select-option", inputs: ["tool"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], hostDirectives: [{ directive: i1$1.CuiClickOutsideDirective }], ngImport: i0, template: "<ng-container *ngIf=\"isVisible()\">\n  <div\n      #dropdown\n      class=\"dropdown\"\n  >\n      <header class=\"header\">\n          <cui-input-text\n              class=\"header__input\"\n              cuiTextFieldId=\"estimated\"\n              cuiTextFieldPlaceholder=\"Search...\"\n          />\n          <button\n              cuiButton\n              type=\"button\"\n              appearance=\"ghost\"\n              size=\"xxs\"\n              icon=\"cuiIconFiltersLines\"\n          ></button>\n      </header>\n      <div class=\"scrollable-content\">\n        <cc-select-option\n            *ngFor=\"let element of elements\"\n            [class._selected]=\"element.id === value?.id\"\n            (click)=\"onToolClick(element)\"\n            [tool]=\"element\"\n        />\n      </div>\n  </div>\n</ng-container>\n", styles: [":host{position:fixed;z-index:10;left:0}:host._hidden{visibility:hidden}._selected{background-color:var(--cui-base-50)}.dropdown{box-shadow:0 1px 4px #0000000a,0 1px 4px #0000000a;padding-top:3px;padding-bottom:3px;display:flex;flex-direction:column;gap:4px;border-radius:8px;border:1px solid var(--cui-base-200);max-height:350px;width:345px;background:var(--cui-base-0)}.header{padding:4px 5px;display:flex;align-items:center;gap:4px}.header__input{width:100%}.footer{padding:2px 5px}.title{font-weight:400;font-size:14px;line-height:20px;padding:2px 8px;color:var(--cui-base-500);text-transform:uppercase}.scrollable-content{padding-left:5px;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "ngmodule", type: CuiContextMenuModule }, { kind: "ngmodule", type: CuiInputModule }, { kind: "component", type: CuiInputTextComponent, selector: "cui-input-text" }, { kind: "directive", type: CuiTextFieldIdDirective, selector: "[cuiTextFieldId]", inputs: ["cuiTextFieldId"] }, { kind: "directive", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: SelectOptionComponent, selector: "cc-select-option", inputs: ["tool"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkerSelectComponent, decorators: [{
             type: Component,
@@ -4832,7 +4832,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => MarkerSelectComponent),
                             multi: true
                         }
-                    ], template: "<ng-container *ngIf=\"isVisible()\">\r\n  <div\r\n      #dropdown\r\n      class=\"dropdown\"\r\n  >\r\n      <header class=\"header\">\r\n          <cui-input-text\r\n              class=\"header__input\"\r\n              cuiTextFieldId=\"estimated\"\r\n              cuiTextFieldPlaceholder=\"Search...\"\r\n          />\r\n          <button\r\n              cuiButton\r\n              type=\"button\"\r\n              appearance=\"ghost\"\r\n              size=\"xxs\"\r\n              icon=\"cuiIconFiltersLines\"\r\n          ></button>\r\n      </header>\r\n      <div class=\"scrollable-content\">\r\n        <cc-select-option\r\n            *ngFor=\"let element of elements\"\r\n            [class._selected]=\"element.id === value?.id\"\r\n            (click)=\"onToolClick(element)\"\r\n            [tool]=\"element\"\r\n        />\r\n      </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{position:fixed;z-index:10;left:0}:host._hidden{visibility:hidden}._selected{background-color:var(--cui-base-50)}.dropdown{box-shadow:0 1px 4px #0000000a,0 1px 4px #0000000a;padding-top:3px;padding-bottom:3px;display:flex;flex-direction:column;gap:4px;border-radius:8px;border:1px solid var(--cui-base-200);max-height:350px;width:345px;background:var(--cui-base-0)}.header{padding:4px 5px;display:flex;align-items:center;gap:4px}.header__input{width:100%}.footer{padding:2px 5px}.title{font-weight:400;font-size:14px;line-height:20px;padding:2px 8px;color:var(--cui-base-500);text-transform:uppercase}.scrollable-content{padding-left:5px;overflow:auto}\n"] }]
+                    ], template: "<ng-container *ngIf=\"isVisible()\">\n  <div\n      #dropdown\n      class=\"dropdown\"\n  >\n      <header class=\"header\">\n          <cui-input-text\n              class=\"header__input\"\n              cuiTextFieldId=\"estimated\"\n              cuiTextFieldPlaceholder=\"Search...\"\n          />\n          <button\n              cuiButton\n              type=\"button\"\n              appearance=\"ghost\"\n              size=\"xxs\"\n              icon=\"cuiIconFiltersLines\"\n          ></button>\n      </header>\n      <div class=\"scrollable-content\">\n        <cc-select-option\n            *ngFor=\"let element of elements\"\n            [class._selected]=\"element.id === value?.id\"\n            (click)=\"onToolClick(element)\"\n            [tool]=\"element\"\n        />\n      </div>\n  </div>\n</ng-container>\n", styles: [":host{position:fixed;z-index:10;left:0}:host._hidden{visibility:hidden}._selected{background-color:var(--cui-base-50)}.dropdown{box-shadow:0 1px 4px #0000000a,0 1px 4px #0000000a;padding-top:3px;padding-bottom:3px;display:flex;flex-direction:column;gap:4px;border-radius:8px;border:1px solid var(--cui-base-200);max-height:350px;width:345px;background:var(--cui-base-0)}.header{padding:4px 5px;display:flex;align-items:center;gap:4px}.header__input{width:100%}.footer{padding:2px 5px}.title{font-weight:400;font-size:14px;line-height:20px;padding:2px 8px;color:var(--cui-base-500);text-transform:uppercase}.scrollable-content{padding-left:5px;overflow:auto}\n"] }]
         }], propDecorators: { target: [{
                 type: Input
             }], space: [{
@@ -5038,7 +5038,7 @@ class MarkerModalComponent {
         this.element.style.top = bottom + this.spaceBetweenTargetAndList + 'px';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkerModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MarkerModalComponent, isStandalone: true, selector: "ng-component", inputs: { title: "title", url: "url", tool: "tool", isGlobal: "isGlobal", isTool: "isTool", target: "target", space: "space" }, outputs: { saveClicked: "saveClicked", cancelClicked: "cancelClicked" }, host: { properties: { "class._hidden": "this.hide", "class._fixed": "this.fixed" } }, hostDirectives: [{ directive: i1$1.CuiClickOutsideDirective }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <ng-container *ngIf=\"isVisible()\">\r\n    <form\r\n        autocomplete=\"off\"\r\n        class=\"wrapper\"\r\n    >\r\n        <cui-form-field>\r\n            <!-- eslint-disable-next-line -->\r\n            <label\r\n                [for]=\"titleId\"\r\n                cuiLabel\r\n                [isRequired]=\"true\"\r\n                (click)=\"onTitleLabelClick(titleElement)\"\r\n            >\r\n                {{ t('TITLE') }}\r\n            </label>\r\n            <!-- TODO: \u0435\u0441\u043B\u0438 \u043D\u0430\u0439\u0434\u0435\u0442\u0441\u044F \u0432\u0430\u0440\u0438\u043A \u0441\u0434\u0435\u043B\u0430\u0442\u044C \u0447\u0435\u0440\u0435\u0437 \u0444\u043E\u0440\u043C\u0443 -->\r\n            <div\r\n                class=\"title\"\r\n                [class.title_invalid]=\"isTitleInvalid()\"\r\n            >\r\n                <div\r\n                    #titleElement\r\n                    class=\"title__text\"\r\n                    contenteditable\r\n                    attr.data-placeholder=\"{{ t('TITLE') }}...\"\r\n                    (paste)=\"onTitlePaste($event)\"\r\n                    (keyup)=\"onTitleChange($event)\"\r\n                    [innerHTML]=\"startTitle\"\r\n                ></div>\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"title__clear\"\r\n                    (click)=\"onClearTitle(titleElement)\"\r\n                >\r\n                    <cui-svg\r\n                        icon=\"cuiIconClear\"\r\n                        color=\"var(--cui-base-300)\"\r\n                        class=\"title__icon\"\r\n                    />\r\n                </button>\r\n            </div>\r\n\r\n            <cui-hint *ngIf=\"isTitleInvalid()\" hintType=\"error\">\r\n                <ng-container *ngIf=\"isTitleEmpty()\">\r\n                  {{ t('FIELD_IS_REQUIRED') }}\r\n                </ng-container>\r\n                <ng-container *ngIf=\"isTitleMoreThanMaxLength()\">\r\n                  {{ t('PLEASE_KEEP_FIELD_UNDER_CHARACTERS') }}\r\n                </ng-container>\r\n            </cui-hint>\r\n        </cui-form-field>\r\n        <cui-form-field>\r\n            <label\r\n                [for]=\"dataId\"\r\n                cuiLabel\r\n                [isRequired]=\"true\"\r\n            >\r\n                {{ isTool ? t('TOOL') : t('URL') }}\r\n            </label>\r\n            <ng-container *ngIf=\"dynamicDataControl\">\r\n              <ng-container *ngIf=\"isTool; else input\">\r\n                <div>\r\n                    <button\r\n                        #target=\"elementRef\"\r\n                        class=\"button tool-button\"\r\n                        cuiButton\r\n                        type=\"button\"\r\n                        cuiElement\r\n                        appearance=\"outlined-gray\"\r\n                        size=\"sm\"\r\n                    >\r\n                        {{ $any(dynamicDataControl.value)?.title || t('SELECT_TOOL') }}\r\n                    </button>\r\n                </div>\r\n                <cc-marker-select\r\n                    [formControl]=\"dynamicDataControl\"\r\n                    [target]=\"target.nativeElement\"\r\n                />\r\n              </ng-container>\r\n              <ng-template #input>\r\n                <cui-input-text\r\n                    [cuiTextFieldId]=\"dataId\"\r\n                    [formControl]=\"dynamicDataControl\"\r\n                    autocomplete=\"off\"\r\n                    [cuiTextFieldIsError]=\"isDynamicDataErrorShown\"\r\n                    cuiTextFieldPlaceholder=\"{{ t('LINK') }}...\"\r\n                />\r\n                <cui-hint *ngIf=\"isDynamicDataErrorShown\" hintType=\"error\">\r\n                  <ng-container *ngIf=\"dynamicDataControl.errors?.['required']\">\r\n                    {{ t('FIELD_IS_REQUIRED') }}\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"dynamicDataControl.errors?.['url']\">\r\n                    {{ t('INVALID_URL') }}\r\n                  </ng-container>\r\n                </cui-hint>\r\n              </ng-template>\r\n            </ng-container>\r\n        </cui-form-field>\r\n        <div class=\"buttons\">\r\n            <button\r\n                cuiButton\r\n                type=\"button\"\r\n                appearance=\"outlined-gray\"\r\n                size=\"sm\"\r\n                (click)=\"onCancel()\"\r\n            >\r\n                {{ t('CANCEL') }}\r\n            </button>\r\n            <button\r\n                cuiButton\r\n                type=\"submit\"\r\n                appearance=\"action\"\r\n                size=\"sm\"\r\n                [disabled]=\"isFormInvalid\"\r\n                (click)=\"onSave()\"\r\n            >\r\n                {{ t('SAVE') }}\r\n            </button>\r\n        </div>\r\n    </form>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n", styles: [":host{position:absolute;z-index:1;left:0}:host._fixed{position:fixed}:host._hidden{position:fixed;visibility:hidden}:host ::ng-deep .tool-button{width:100%}:host ::ng-deep .tool-button>span{justify-content:flex-start!important}.wrapper{padding:11px;box-shadow:0 2px 4px -1px #0000000f,0 4px 6px -1px #0000001a;display:flex;flex-direction:column;gap:16px;border-radius:8px;border:1px solid var(--cui-base-200);max-width:450px;background-color:var(--cui-base-0)}.buttons{padding-top:12px;display:flex;justify-content:flex-end;gap:12px}.title{padding:7px 13px;cursor:text;display:flex;align-items:center;gap:8px;border:1px solid var(--cui-base-200);border-radius:8px;width:426px;background:var(--cui-input);color:var(--cui-base-900)}.title:hover{border-color:var(--cui-base-300)}.title:focus-within{outline:none;box-shadow:0 0 0 2px var(--cui-focus);border-color:var(--cui-info)}.title_invalid,.title_invalid:focus-within{box-shadow:none;border-color:var(--cui-danger)}.title__text{flex-grow:1;text-wrap:nowrap;overflow:hidden}.title__text[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.title__text:focus{outline:none}.title__clear{padding:0;visibility:hidden}.title__icon{width:16px}.title__icon ::ng-deep [stroke]{stroke:var(--cui-base-0)}.title__text:not(:empty)+.title__clear{visibility:visible}\n"], dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "directive", type: CuiElementDirective, selector: "[cuiElement]", exportAs: ["elementRef"] }, { kind: "ngmodule", type: CuiFormFieldModule }, { kind: "component", type: CuiFormFieldComponent, selector: "cui-form-field" }, { kind: "ngmodule", type: CuiHintModule }, { kind: "component", type: CuiHintComponent, selector: "cui-hint", inputs: ["hintType"] }, { kind: "ngmodule", type: CuiInputModule }, { kind: "component", type: CuiInputTextComponent, selector: "cui-input-text" }, { kind: "directive", type: CuiTextFieldIdDirective, selector: "[cuiTextFieldId]", inputs: ["cuiTextFieldId"] }, { kind: "directive", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "directive", type: CuiTextFieldIsErrorDirective, selector: "[cuiTextFieldIsError]", inputs: ["cuiTextFieldIsError"] }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "component", type: CuiLabelComponent, selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MarkerSelectComponent, selector: "cc-marker-select", inputs: ["target", "space"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MarkerModalComponent, isStandalone: true, selector: "ng-component", inputs: { title: "title", url: "url", tool: "tool", isGlobal: "isGlobal", isTool: "isTool", target: "target", space: "space" }, outputs: { saveClicked: "saveClicked", cancelClicked: "cancelClicked" }, host: { properties: { "class._hidden": "this.hide", "class._fixed": "this.fixed" } }, hostDirectives: [{ directive: i1$1.CuiClickOutsideDirective }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <ng-container *ngIf=\"isVisible()\">\n    <form\n        autocomplete=\"off\"\n        class=\"wrapper\"\n    >\n        <cui-form-field>\n            <!-- eslint-disable-next-line -->\n            <label\n                [for]=\"titleId\"\n                cuiLabel\n                [isRequired]=\"true\"\n                (click)=\"onTitleLabelClick(titleElement)\"\n            >\n                {{ t('TITLE') }}\n            </label>\n            <!-- TODO: \u0435\u0441\u043B\u0438 \u043D\u0430\u0439\u0434\u0435\u0442\u0441\u044F \u0432\u0430\u0440\u0438\u043A \u0441\u0434\u0435\u043B\u0430\u0442\u044C \u0447\u0435\u0440\u0435\u0437 \u0444\u043E\u0440\u043C\u0443 -->\n            <div\n                class=\"title\"\n                [class.title_invalid]=\"isTitleInvalid()\"\n            >\n                <div\n                    #titleElement\n                    class=\"title__text\"\n                    contenteditable\n                    attr.data-placeholder=\"{{ t('TITLE') }}...\"\n                    (paste)=\"onTitlePaste($event)\"\n                    (keyup)=\"onTitleChange($event)\"\n                    [innerHTML]=\"startTitle\"\n                ></div>\n                <button\n                    type=\"button\"\n                    class=\"title__clear\"\n                    (click)=\"onClearTitle(titleElement)\"\n                >\n                    <cui-svg\n                        icon=\"cuiIconClear\"\n                        color=\"var(--cui-base-300)\"\n                        class=\"title__icon\"\n                    />\n                </button>\n            </div>\n\n            <cui-hint *ngIf=\"isTitleInvalid()\" hintType=\"error\">\n                <ng-container *ngIf=\"isTitleEmpty()\">\n                  {{ t('FIELD_IS_REQUIRED') }}\n                </ng-container>\n                <ng-container *ngIf=\"isTitleMoreThanMaxLength()\">\n                  {{ t('PLEASE_KEEP_FIELD_UNDER_CHARACTERS') }}\n                </ng-container>\n            </cui-hint>\n        </cui-form-field>\n        <cui-form-field>\n            <label\n                [for]=\"dataId\"\n                cuiLabel\n                [isRequired]=\"true\"\n            >\n                {{ isTool ? t('TOOL') : t('URL') }}\n            </label>\n            <ng-container *ngIf=\"dynamicDataControl\">\n              <ng-container *ngIf=\"isTool; else input\">\n                <div>\n                    <button\n                        #target=\"elementRef\"\n                        class=\"button tool-button\"\n                        cuiButton\n                        type=\"button\"\n                        cuiElement\n                        appearance=\"outlined-gray\"\n                        size=\"sm\"\n                    >\n                        {{ $any(dynamicDataControl.value)?.title || t('SELECT_TOOL') }}\n                    </button>\n                </div>\n                <cc-marker-select\n                    [formControl]=\"dynamicDataControl\"\n                    [target]=\"target.nativeElement\"\n                />\n              </ng-container>\n              <ng-template #input>\n                <cui-input-text\n                    [cuiTextFieldId]=\"dataId\"\n                    [formControl]=\"dynamicDataControl\"\n                    autocomplete=\"off\"\n                    [cuiTextFieldIsError]=\"isDynamicDataErrorShown\"\n                    cuiTextFieldPlaceholder=\"{{ t('LINK') }}...\"\n                />\n                <cui-hint *ngIf=\"isDynamicDataErrorShown\" hintType=\"error\">\n                  <ng-container *ngIf=\"dynamicDataControl.errors?.['required']\">\n                    {{ t('FIELD_IS_REQUIRED') }}\n                  </ng-container>\n                  <ng-container *ngIf=\"dynamicDataControl.errors?.['url']\">\n                    {{ t('INVALID_URL') }}\n                  </ng-container>\n                </cui-hint>\n              </ng-template>\n            </ng-container>\n        </cui-form-field>\n        <div class=\"buttons\">\n            <button\n                cuiButton\n                type=\"button\"\n                appearance=\"outlined-gray\"\n                size=\"sm\"\n                (click)=\"onCancel()\"\n            >\n                {{ t('CANCEL') }}\n            </button>\n            <button\n                cuiButton\n                type=\"submit\"\n                appearance=\"action\"\n                size=\"sm\"\n                [disabled]=\"isFormInvalid\"\n                (click)=\"onSave()\"\n            >\n                {{ t('SAVE') }}\n            </button>\n        </div>\n    </form>\n  </ng-container>\n</ng-container>\n\n", styles: [":host{position:absolute;z-index:1;left:0}:host._fixed{position:fixed}:host._hidden{position:fixed;visibility:hidden}:host ::ng-deep .tool-button{width:100%}:host ::ng-deep .tool-button>span{justify-content:flex-start!important}.wrapper{padding:11px;box-shadow:0 2px 4px -1px #0000000f,0 4px 6px -1px #0000001a;display:flex;flex-direction:column;gap:16px;border-radius:8px;border:1px solid var(--cui-base-200);max-width:450px;background-color:var(--cui-base-0)}.buttons{padding-top:12px;display:flex;justify-content:flex-end;gap:12px}.title{padding:7px 13px;cursor:text;display:flex;align-items:center;gap:8px;border:1px solid var(--cui-base-200);border-radius:8px;width:426px;background:var(--cui-input);color:var(--cui-base-900)}.title:hover{border-color:var(--cui-base-300)}.title:focus-within{outline:none;box-shadow:0 0 0 2px var(--cui-focus);border-color:var(--cui-info)}.title_invalid,.title_invalid:focus-within{box-shadow:none;border-color:var(--cui-danger)}.title__text{flex-grow:1;text-wrap:nowrap;overflow:hidden}.title__text[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.title__text:focus{outline:none}.title__clear{padding:0;visibility:hidden}.title__icon{width:16px}.title__icon ::ng-deep [stroke]{stroke:var(--cui-base-0)}.title__text:not(:empty)+.title__clear{visibility:visible}\n"], dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "directive", type: CuiElementDirective, selector: "[cuiElement]", exportAs: ["elementRef"] }, { kind: "ngmodule", type: CuiFormFieldModule }, { kind: "component", type: CuiFormFieldComponent, selector: "cui-form-field" }, { kind: "ngmodule", type: CuiHintModule }, { kind: "component", type: CuiHintComponent, selector: "cui-hint", inputs: ["hintType"] }, { kind: "ngmodule", type: CuiInputModule }, { kind: "component", type: CuiInputTextComponent, selector: "cui-input-text" }, { kind: "directive", type: CuiTextFieldIdDirective, selector: "[cuiTextFieldId]", inputs: ["cuiTextFieldId"] }, { kind: "directive", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "directive", type: CuiTextFieldIsErrorDirective, selector: "[cuiTextFieldIsError]", inputs: ["cuiTextFieldIsError"] }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "component", type: CuiLabelComponent, selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MarkerSelectComponent, selector: "cc-marker-select", inputs: ["target", "space"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkerModalComponent, decorators: [{
             type: Component,
@@ -5055,7 +5055,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ReactiveFormsModule,
                         TranslocoDirective,
                         NgIf
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [CuiClickOutsideDirective], template: "<ng-container *transloco=\"let t\">\r\n  <ng-container *ngIf=\"isVisible()\">\r\n    <form\r\n        autocomplete=\"off\"\r\n        class=\"wrapper\"\r\n    >\r\n        <cui-form-field>\r\n            <!-- eslint-disable-next-line -->\r\n            <label\r\n                [for]=\"titleId\"\r\n                cuiLabel\r\n                [isRequired]=\"true\"\r\n                (click)=\"onTitleLabelClick(titleElement)\"\r\n            >\r\n                {{ t('TITLE') }}\r\n            </label>\r\n            <!-- TODO: \u0435\u0441\u043B\u0438 \u043D\u0430\u0439\u0434\u0435\u0442\u0441\u044F \u0432\u0430\u0440\u0438\u043A \u0441\u0434\u0435\u043B\u0430\u0442\u044C \u0447\u0435\u0440\u0435\u0437 \u0444\u043E\u0440\u043C\u0443 -->\r\n            <div\r\n                class=\"title\"\r\n                [class.title_invalid]=\"isTitleInvalid()\"\r\n            >\r\n                <div\r\n                    #titleElement\r\n                    class=\"title__text\"\r\n                    contenteditable\r\n                    attr.data-placeholder=\"{{ t('TITLE') }}...\"\r\n                    (paste)=\"onTitlePaste($event)\"\r\n                    (keyup)=\"onTitleChange($event)\"\r\n                    [innerHTML]=\"startTitle\"\r\n                ></div>\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"title__clear\"\r\n                    (click)=\"onClearTitle(titleElement)\"\r\n                >\r\n                    <cui-svg\r\n                        icon=\"cuiIconClear\"\r\n                        color=\"var(--cui-base-300)\"\r\n                        class=\"title__icon\"\r\n                    />\r\n                </button>\r\n            </div>\r\n\r\n            <cui-hint *ngIf=\"isTitleInvalid()\" hintType=\"error\">\r\n                <ng-container *ngIf=\"isTitleEmpty()\">\r\n                  {{ t('FIELD_IS_REQUIRED') }}\r\n                </ng-container>\r\n                <ng-container *ngIf=\"isTitleMoreThanMaxLength()\">\r\n                  {{ t('PLEASE_KEEP_FIELD_UNDER_CHARACTERS') }}\r\n                </ng-container>\r\n            </cui-hint>\r\n        </cui-form-field>\r\n        <cui-form-field>\r\n            <label\r\n                [for]=\"dataId\"\r\n                cuiLabel\r\n                [isRequired]=\"true\"\r\n            >\r\n                {{ isTool ? t('TOOL') : t('URL') }}\r\n            </label>\r\n            <ng-container *ngIf=\"dynamicDataControl\">\r\n              <ng-container *ngIf=\"isTool; else input\">\r\n                <div>\r\n                    <button\r\n                        #target=\"elementRef\"\r\n                        class=\"button tool-button\"\r\n                        cuiButton\r\n                        type=\"button\"\r\n                        cuiElement\r\n                        appearance=\"outlined-gray\"\r\n                        size=\"sm\"\r\n                    >\r\n                        {{ $any(dynamicDataControl.value)?.title || t('SELECT_TOOL') }}\r\n                    </button>\r\n                </div>\r\n                <cc-marker-select\r\n                    [formControl]=\"dynamicDataControl\"\r\n                    [target]=\"target.nativeElement\"\r\n                />\r\n              </ng-container>\r\n              <ng-template #input>\r\n                <cui-input-text\r\n                    [cuiTextFieldId]=\"dataId\"\r\n                    [formControl]=\"dynamicDataControl\"\r\n                    autocomplete=\"off\"\r\n                    [cuiTextFieldIsError]=\"isDynamicDataErrorShown\"\r\n                    cuiTextFieldPlaceholder=\"{{ t('LINK') }}...\"\r\n                />\r\n                <cui-hint *ngIf=\"isDynamicDataErrorShown\" hintType=\"error\">\r\n                  <ng-container *ngIf=\"dynamicDataControl.errors?.['required']\">\r\n                    {{ t('FIELD_IS_REQUIRED') }}\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"dynamicDataControl.errors?.['url']\">\r\n                    {{ t('INVALID_URL') }}\r\n                  </ng-container>\r\n                </cui-hint>\r\n              </ng-template>\r\n            </ng-container>\r\n        </cui-form-field>\r\n        <div class=\"buttons\">\r\n            <button\r\n                cuiButton\r\n                type=\"button\"\r\n                appearance=\"outlined-gray\"\r\n                size=\"sm\"\r\n                (click)=\"onCancel()\"\r\n            >\r\n                {{ t('CANCEL') }}\r\n            </button>\r\n            <button\r\n                cuiButton\r\n                type=\"submit\"\r\n                appearance=\"action\"\r\n                size=\"sm\"\r\n                [disabled]=\"isFormInvalid\"\r\n                (click)=\"onSave()\"\r\n            >\r\n                {{ t('SAVE') }}\r\n            </button>\r\n        </div>\r\n    </form>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n", styles: [":host{position:absolute;z-index:1;left:0}:host._fixed{position:fixed}:host._hidden{position:fixed;visibility:hidden}:host ::ng-deep .tool-button{width:100%}:host ::ng-deep .tool-button>span{justify-content:flex-start!important}.wrapper{padding:11px;box-shadow:0 2px 4px -1px #0000000f,0 4px 6px -1px #0000001a;display:flex;flex-direction:column;gap:16px;border-radius:8px;border:1px solid var(--cui-base-200);max-width:450px;background-color:var(--cui-base-0)}.buttons{padding-top:12px;display:flex;justify-content:flex-end;gap:12px}.title{padding:7px 13px;cursor:text;display:flex;align-items:center;gap:8px;border:1px solid var(--cui-base-200);border-radius:8px;width:426px;background:var(--cui-input);color:var(--cui-base-900)}.title:hover{border-color:var(--cui-base-300)}.title:focus-within{outline:none;box-shadow:0 0 0 2px var(--cui-focus);border-color:var(--cui-info)}.title_invalid,.title_invalid:focus-within{box-shadow:none;border-color:var(--cui-danger)}.title__text{flex-grow:1;text-wrap:nowrap;overflow:hidden}.title__text[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.title__text:focus{outline:none}.title__clear{padding:0;visibility:hidden}.title__icon{width:16px}.title__icon ::ng-deep [stroke]{stroke:var(--cui-base-0)}.title__text:not(:empty)+.title__clear{visibility:visible}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [CuiClickOutsideDirective], template: "<ng-container *transloco=\"let t\">\n  <ng-container *ngIf=\"isVisible()\">\n    <form\n        autocomplete=\"off\"\n        class=\"wrapper\"\n    >\n        <cui-form-field>\n            <!-- eslint-disable-next-line -->\n            <label\n                [for]=\"titleId\"\n                cuiLabel\n                [isRequired]=\"true\"\n                (click)=\"onTitleLabelClick(titleElement)\"\n            >\n                {{ t('TITLE') }}\n            </label>\n            <!-- TODO: \u0435\u0441\u043B\u0438 \u043D\u0430\u0439\u0434\u0435\u0442\u0441\u044F \u0432\u0430\u0440\u0438\u043A \u0441\u0434\u0435\u043B\u0430\u0442\u044C \u0447\u0435\u0440\u0435\u0437 \u0444\u043E\u0440\u043C\u0443 -->\n            <div\n                class=\"title\"\n                [class.title_invalid]=\"isTitleInvalid()\"\n            >\n                <div\n                    #titleElement\n                    class=\"title__text\"\n                    contenteditable\n                    attr.data-placeholder=\"{{ t('TITLE') }}...\"\n                    (paste)=\"onTitlePaste($event)\"\n                    (keyup)=\"onTitleChange($event)\"\n                    [innerHTML]=\"startTitle\"\n                ></div>\n                <button\n                    type=\"button\"\n                    class=\"title__clear\"\n                    (click)=\"onClearTitle(titleElement)\"\n                >\n                    <cui-svg\n                        icon=\"cuiIconClear\"\n                        color=\"var(--cui-base-300)\"\n                        class=\"title__icon\"\n                    />\n                </button>\n            </div>\n\n            <cui-hint *ngIf=\"isTitleInvalid()\" hintType=\"error\">\n                <ng-container *ngIf=\"isTitleEmpty()\">\n                  {{ t('FIELD_IS_REQUIRED') }}\n                </ng-container>\n                <ng-container *ngIf=\"isTitleMoreThanMaxLength()\">\n                  {{ t('PLEASE_KEEP_FIELD_UNDER_CHARACTERS') }}\n                </ng-container>\n            </cui-hint>\n        </cui-form-field>\n        <cui-form-field>\n            <label\n                [for]=\"dataId\"\n                cuiLabel\n                [isRequired]=\"true\"\n            >\n                {{ isTool ? t('TOOL') : t('URL') }}\n            </label>\n            <ng-container *ngIf=\"dynamicDataControl\">\n              <ng-container *ngIf=\"isTool; else input\">\n                <div>\n                    <button\n                        #target=\"elementRef\"\n                        class=\"button tool-button\"\n                        cuiButton\n                        type=\"button\"\n                        cuiElement\n                        appearance=\"outlined-gray\"\n                        size=\"sm\"\n                    >\n                        {{ $any(dynamicDataControl.value)?.title || t('SELECT_TOOL') }}\n                    </button>\n                </div>\n                <cc-marker-select\n                    [formControl]=\"dynamicDataControl\"\n                    [target]=\"target.nativeElement\"\n                />\n              </ng-container>\n              <ng-template #input>\n                <cui-input-text\n                    [cuiTextFieldId]=\"dataId\"\n                    [formControl]=\"dynamicDataControl\"\n                    autocomplete=\"off\"\n                    [cuiTextFieldIsError]=\"isDynamicDataErrorShown\"\n                    cuiTextFieldPlaceholder=\"{{ t('LINK') }}...\"\n                />\n                <cui-hint *ngIf=\"isDynamicDataErrorShown\" hintType=\"error\">\n                  <ng-container *ngIf=\"dynamicDataControl.errors?.['required']\">\n                    {{ t('FIELD_IS_REQUIRED') }}\n                  </ng-container>\n                  <ng-container *ngIf=\"dynamicDataControl.errors?.['url']\">\n                    {{ t('INVALID_URL') }}\n                  </ng-container>\n                </cui-hint>\n              </ng-template>\n            </ng-container>\n        </cui-form-field>\n        <div class=\"buttons\">\n            <button\n                cuiButton\n                type=\"button\"\n                appearance=\"outlined-gray\"\n                size=\"sm\"\n                (click)=\"onCancel()\"\n            >\n                {{ t('CANCEL') }}\n            </button>\n            <button\n                cuiButton\n                type=\"submit\"\n                appearance=\"action\"\n                size=\"sm\"\n                [disabled]=\"isFormInvalid\"\n                (click)=\"onSave()\"\n            >\n                {{ t('SAVE') }}\n            </button>\n        </div>\n    </form>\n  </ng-container>\n</ng-container>\n\n", styles: [":host{position:absolute;z-index:1;left:0}:host._fixed{position:fixed}:host._hidden{position:fixed;visibility:hidden}:host ::ng-deep .tool-button{width:100%}:host ::ng-deep .tool-button>span{justify-content:flex-start!important}.wrapper{padding:11px;box-shadow:0 2px 4px -1px #0000000f,0 4px 6px -1px #0000001a;display:flex;flex-direction:column;gap:16px;border-radius:8px;border:1px solid var(--cui-base-200);max-width:450px;background-color:var(--cui-base-0)}.buttons{padding-top:12px;display:flex;justify-content:flex-end;gap:12px}.title{padding:7px 13px;cursor:text;display:flex;align-items:center;gap:8px;border:1px solid var(--cui-base-200);border-radius:8px;width:426px;background:var(--cui-input);color:var(--cui-base-900)}.title:hover{border-color:var(--cui-base-300)}.title:focus-within{outline:none;box-shadow:0 0 0 2px var(--cui-focus);border-color:var(--cui-info)}.title_invalid,.title_invalid:focus-within{box-shadow:none;border-color:var(--cui-danger)}.title__text{flex-grow:1;text-wrap:nowrap;overflow:hidden}.title__text[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.title__text:focus{outline:none}.title__clear{padding:0;visibility:hidden}.title__icon{width:16px}.title__icon ::ng-deep [stroke]{stroke:var(--cui-base-0)}.title__text:not(:empty)+.title__clear{visibility:visible}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], url: [{
@@ -5146,11 +5146,11 @@ class EditorToolModalComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditorToolModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EditorToolModalComponent, isStandalone: true, selector: "ng-component", inputs: { tool: "tool", marker: "marker" }, outputs: { closed: "closed" }, host: { properties: { "class._hidden": "this._isHidden", "class._fullscreen": "this._isFullscreen" } }, hostDirectives: [{ directive: i1$1.CuiClickOutsideDirective }], ngImport: i0, template: "<div class=\"triangle\"></div>\r\n<div class=\"wrapper\">\r\n    <header class=\"header\">\r\n        <h3 class=\"title\">{{ tool.title }}</h3>\r\n        <div class=\"header__buttons\">\r\n            <!-- TODO: replace icon with 'maximize' -->\r\n            <button\r\n                cuiButton\r\n                type=\"button\"\r\n                appearance=\"ghost\"\r\n                size=\"xxs\"\r\n                icon=\"cuiIconArrowSortSm\"\r\n                (click)=\"onMaximizeModal()\"\r\n            ></button>\r\n            <button\r\n                cuiButton\r\n                type=\"button\"\r\n                appearance=\"ghost\"\r\n                size=\"xxs\"\r\n                icon=\"cuiIconX\"\r\n                (click)=\"onCloseModal()\"\r\n            ></button>\r\n        </div>\r\n    </header>\r\n    <div class=\"content\">\r\n        <div class=\"info\">\r\n            <!-- TODO: \u0431\u0443\u0434\u0435\u0442 \u043A\u0430\u0440\u0442\u0438\u043D\u043A\u0430-->\r\n            <p class=\"info__item\">\r\n                <span class=\"info__field\">\u0422\u0438\u043F:</span>\r\n                <span class=\"info__title\">{{ tool.title }}</span>\r\n            </p>\r\n            <p class=\"info__item\">\r\n                <span class=\"info__field\">\u0421\u0442\u0440\u0430\u043D\u0430 \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0438\u0442\u0435\u043B\u044C:</span>\r\n                <span class=\"info__title\">{{ tool.title }}</span>\r\n            </p>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".content{padding-right:23px;padding-left:23px;padding-bottom:7px;font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font);max-height:415px;overflow-y:auto}:host{position:absolute;z-index:10;left:50%;top:30px;min-height:100px;max-width:450px}:host._fullscreen{position:fixed;top:0!important;left:0!important;max-width:none;height:100vh;width:100%;transform:none}:host._fullscreen .content{max-height:calc(100% - 56px)}:host._hidden{visibility:hidden}.triangle{position:absolute;top:-7px;left:50%;width:14px;height:14px;border-radius:2px;border:1px solid var(--cui-base-200);background:var(--cui-base-0);transform:translate(-50%) rotate(45deg)}.wrapper{position:relative;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-base-0);height:100%}.header{padding:8.2px 15px 8px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px}.title{font-weight:500;font-size:14px;line-height:20px;padding-top:2px;padding-bottom:2px;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--cui-base-900)}.info{display:flex;flex-direction:column;gap:8px}.info__item{display:flex;gap:8px}.info__field{font-weight:400;font-size:16px;line-height:24px;text-wrap:nowrap;color:var(--cui-gray-600)}.info__title{font-weight:500;font-size:16px;line-height:24px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:var(--cui-base-900)}\n"], dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EditorToolModalComponent, isStandalone: true, selector: "ng-component", inputs: { tool: "tool", marker: "marker" }, outputs: { closed: "closed" }, host: { properties: { "class._hidden": "this._isHidden", "class._fullscreen": "this._isFullscreen" } }, hostDirectives: [{ directive: i1$1.CuiClickOutsideDirective }], ngImport: i0, template: "<div class=\"triangle\"></div>\n<div class=\"wrapper\">\n    <header class=\"header\">\n        <h3 class=\"title\">{{ tool.title }}</h3>\n        <div class=\"header__buttons\">\n            <!-- TODO: replace icon with 'maximize' -->\n            <button\n                cuiButton\n                type=\"button\"\n                appearance=\"ghost\"\n                size=\"xxs\"\n                icon=\"cuiIconArrowSortSm\"\n                (click)=\"onMaximizeModal()\"\n            ></button>\n            <button\n                cuiButton\n                type=\"button\"\n                appearance=\"ghost\"\n                size=\"xxs\"\n                icon=\"cuiIconX\"\n                (click)=\"onCloseModal()\"\n            ></button>\n        </div>\n    </header>\n    <div class=\"content\">\n        <div class=\"info\">\n            <!-- TODO: \u0431\u0443\u0434\u0435\u0442 \u043A\u0430\u0440\u0442\u0438\u043D\u043A\u0430-->\n            <p class=\"info__item\">\n                <span class=\"info__field\">\u0422\u0438\u043F:</span>\n                <span class=\"info__title\">{{ tool.title }}</span>\n            </p>\n            <p class=\"info__item\">\n                <span class=\"info__field\">\u0421\u0442\u0440\u0430\u043D\u0430 \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0438\u0442\u0435\u043B\u044C:</span>\n                <span class=\"info__title\">{{ tool.title }}</span>\n            </p>\n        </div>\n    </div>\n</div>\n", styles: [".content{padding-right:23px;padding-left:23px;padding-bottom:7px;font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font);max-height:415px;overflow-y:auto}:host{position:absolute;z-index:10;left:50%;top:30px;min-height:100px;max-width:450px}:host._fullscreen{position:fixed;top:0!important;left:0!important;max-width:none;height:100vh;width:100%;transform:none}:host._fullscreen .content{max-height:calc(100% - 56px)}:host._hidden{visibility:hidden}.triangle{position:absolute;top:-7px;left:50%;width:14px;height:14px;border-radius:2px;border:1px solid var(--cui-base-200);background:var(--cui-base-0);transform:translate(-50%) rotate(45deg)}.wrapper{position:relative;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-base-0);height:100%}.header{padding:8.2px 15px 8px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px}.title{font-weight:500;font-size:14px;line-height:20px;padding-top:2px;padding-bottom:2px;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--cui-base-900)}.info{display:flex;flex-direction:column;gap:8px}.info__item{display:flex;gap:8px}.info__field{font-weight:400;font-size:16px;line-height:24px;text-wrap:nowrap;color:var(--cui-gray-600)}.info__title{font-weight:500;font-size:16px;line-height:24px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:var(--cui-base-900)}\n"], dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { 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: "18.2.13", ngImport: i0, type: EditorToolModalComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CuiButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [CuiClickOutsideDirective], template: "<div class=\"triangle\"></div>\r\n<div class=\"wrapper\">\r\n    <header class=\"header\">\r\n        <h3 class=\"title\">{{ tool.title }}</h3>\r\n        <div class=\"header__buttons\">\r\n            <!-- TODO: replace icon with 'maximize' -->\r\n            <button\r\n                cuiButton\r\n                type=\"button\"\r\n                appearance=\"ghost\"\r\n                size=\"xxs\"\r\n                icon=\"cuiIconArrowSortSm\"\r\n                (click)=\"onMaximizeModal()\"\r\n            ></button>\r\n            <button\r\n                cuiButton\r\n                type=\"button\"\r\n                appearance=\"ghost\"\r\n                size=\"xxs\"\r\n                icon=\"cuiIconX\"\r\n                (click)=\"onCloseModal()\"\r\n            ></button>\r\n        </div>\r\n    </header>\r\n    <div class=\"content\">\r\n        <div class=\"info\">\r\n            <!-- TODO: \u0431\u0443\u0434\u0435\u0442 \u043A\u0430\u0440\u0442\u0438\u043D\u043A\u0430-->\r\n            <p class=\"info__item\">\r\n                <span class=\"info__field\">\u0422\u0438\u043F:</span>\r\n                <span class=\"info__title\">{{ tool.title }}</span>\r\n            </p>\r\n            <p class=\"info__item\">\r\n                <span class=\"info__field\">\u0421\u0442\u0440\u0430\u043D\u0430 \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0438\u0442\u0435\u043B\u044C:</span>\r\n                <span class=\"info__title\">{{ tool.title }}</span>\r\n            </p>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".content{padding-right:23px;padding-left:23px;padding-bottom:7px;font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font);max-height:415px;overflow-y:auto}:host{position:absolute;z-index:10;left:50%;top:30px;min-height:100px;max-width:450px}:host._fullscreen{position:fixed;top:0!important;left:0!important;max-width:none;height:100vh;width:100%;transform:none}:host._fullscreen .content{max-height:calc(100% - 56px)}:host._hidden{visibility:hidden}.triangle{position:absolute;top:-7px;left:50%;width:14px;height:14px;border-radius:2px;border:1px solid var(--cui-base-200);background:var(--cui-base-0);transform:translate(-50%) rotate(45deg)}.wrapper{position:relative;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-base-0);height:100%}.header{padding:8.2px 15px 8px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px}.title{font-weight:500;font-size:14px;line-height:20px;padding-top:2px;padding-bottom:2px;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--cui-base-900)}.info{display:flex;flex-direction:column;gap:8px}.info__item{display:flex;gap:8px}.info__field{font-weight:400;font-size:16px;line-height:24px;text-wrap:nowrap;color:var(--cui-gray-600)}.info__title{font-weight:500;font-size:16px;line-height:24px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:var(--cui-base-900)}\n"] }]
+            args: [{ standalone: true, imports: [CuiButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [CuiClickOutsideDirective], template: "<div class=\"triangle\"></div>\n<div class=\"wrapper\">\n    <header class=\"header\">\n        <h3 class=\"title\">{{ tool.title }}</h3>\n        <div class=\"header__buttons\">\n            <!-- TODO: replace icon with 'maximize' -->\n            <button\n                cuiButton\n                type=\"button\"\n                appearance=\"ghost\"\n                size=\"xxs\"\n                icon=\"cuiIconArrowSortSm\"\n                (click)=\"onMaximizeModal()\"\n            ></button>\n            <button\n                cuiButton\n                type=\"button\"\n                appearance=\"ghost\"\n                size=\"xxs\"\n                icon=\"cuiIconX\"\n                (click)=\"onCloseModal()\"\n            ></button>\n        </div>\n    </header>\n    <div class=\"content\">\n        <div class=\"info\">\n            <!-- TODO: \u0431\u0443\u0434\u0435\u0442 \u043A\u0430\u0440\u0442\u0438\u043D\u043A\u0430-->\n            <p class=\"info__item\">\n                <span class=\"info__field\">\u0422\u0438\u043F:</span>\n                <span class=\"info__title\">{{ tool.title }}</span>\n            </p>\n            <p class=\"info__item\">\n                <span class=\"info__field\">\u0421\u0442\u0440\u0430\u043D\u0430 \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0438\u0442\u0435\u043B\u044C:</span>\n                <span class=\"info__title\">{{ tool.title }}</span>\n            </p>\n        </div>\n    </div>\n</div>\n", styles: [".content{padding-right:23px;padding-left:23px;padding-bottom:7px;font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font);max-height:415px;overflow-y:auto}:host{position:absolute;z-index:10;left:50%;top:30px;min-height:100px;max-width:450px}:host._fullscreen{position:fixed;top:0!important;left:0!important;max-width:none;height:100vh;width:100%;transform:none}:host._fullscreen .content{max-height:calc(100% - 56px)}:host._hidden{visibility:hidden}.triangle{position:absolute;top:-7px;left:50%;width:14px;height:14px;border-radius:2px;border:1px solid var(--cui-base-200);background:var(--cui-base-0);transform:translate(-50%) rotate(45deg)}.wrapper{position:relative;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-base-0);height:100%}.header{padding:8.2px 15px 8px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px}.title{font-weight:500;font-size:14px;line-height:20px;padding-top:2px;padding-bottom:2px;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--cui-base-900)}.info{display:flex;flex-direction:column;gap:8px}.info__item{display:flex;gap:8px}.info__field{font-weight:400;font-size:16px;line-height:24px;text-wrap:nowrap;color:var(--cui-gray-600)}.info__title{font-weight:500;font-size:16px;line-height:24px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:var(--cui-base-900)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tool: [{
                 type: Input,
                 args: [{ required: true }]
@@ -6460,8 +6460,8 @@ class CuiRoleMarker extends CuiCustomMarkerTool {
     render() {
         super.render();
         /* eslint-disable */
-        this.button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="-3 -3 24 24" fill="none">
-            <path d="M13.3335 17.5V15.8333C13.3335 14.9493 12.9823 14.1014 12.3572 13.4763C11.7321 12.8512 10.8842 12.5 10.0002 12.5H4.16683C3.28277 12.5 2.43493 12.8512 1.80981 13.4763C1.18469 14.1014 0.833496 14.9493 0.833496 15.8333V17.5M16.6668 6.66667V11.6667M19.1668 9.16667H14.1668M10.4168 5.83333C10.4168 7.67428 8.92445 9.16667 7.0835 9.16667C5.24255 9.16667 3.75016 7.67428 3.75016 5.83333C3.75016 3.99238 5.24255 2.5 7.0835 2.5C8.92445 2.5 10.4168 3.99238 10.4168 5.83333Z" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        this.button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="-3 -3 24 24" fill="none">
+            <path d="M13.3335 17.5V15.8333C13.3335 14.9493 12.9823 14.1014 12.3572 13.4763C11.7321 12.8512 10.8842 12.5 10.0002 12.5H4.16683C3.28277 12.5 2.43493 12.8512 1.80981 13.4763C1.18469 14.1014 0.833496 14.9493 0.833496 15.8333V17.5M16.6668 6.66667V11.6667M19.1668 9.16667H14.1668M10.4168 5.83333C10.4168 7.67428 8.92445 9.16667 7.0835 9.16667C5.24255 9.16667 3.75016 7.67428 3.75016 5.83333C3.75016 3.99238 5.24255 2.5 7.0835 2.5C8.92445 2.5 10.4168 3.99238 10.4168 5.83333Z" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>`;
         /* eslint-enable */
         return this.button;
@@ -7433,11 +7433,11 @@ class CuiEditorComponent {
         this.abortController = new AbortController();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiEditorComponent, isStandalone: true, selector: "cui-editor", inputs: { editorApiId: "editorApiId", config: "config", requestSize: "requestSize" }, outputs: { editorEmpty: "editorEmpty" }, providers: [CuiEditorService, CuiJTextApiService], viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n    #editor\r\n    [id]=\"editorId\"\r\n    data-editor\r\n    [class._readonly]=\"config.readOnly\"\r\n></div>\r\n", styles: [":host{--textColor: var(--cui-base-900);--menuBackground: var(--cui-base-0);--menuBorder: var(--cui-base-200);--menuItemHover: var(--cui-base-10);--menuItemBackground: var(cui-base-900);--menuIconBackground: var(--cui-base-50);--menuIconHover: var(--cui-base-10);font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font)}:host ::ng-deep .ce-popover{--color-background: var(--menuBackground);--color-text-primary: var(--textColor);--color-border: var(--menuBorder);--color-border-icon: var(--menuBorder);--color-background-item: var(--menuItemBackground);--color-background-item-hover: var(--menuItemHover)}:host ::ng-deep .ce-popover__search{background:var(--menuIconBackground)}:host ::ng-deep .ce-popover .ce-popover-item__icon{background:var(--menuIconBackground)}:host ::ng-deep .ce-conversion-toolbar{background-color:var(--menuBackground);border-color:var(--menuBorder)}:host ::ng-deep .ce-conversion-toolbar__tools{padding:0 6px 6px}:host ::ng-deep .ce-conversion-tool{padding:3px;border-radius:6px}:host ::ng-deep .ce-conversion-tool__icon{border:1px solid var(--menuBorder);background-color:var(--menuIconBackground);box-shadow:none}:host ::ng-deep .ce-conversion-tool:hover{background-color:var(--menuItemHover)}:host ::ng-deep .ce-conversion-tool:hover .ce-conversion-tool__icon{border-color:var(--menuIconHover)}:host ::ng-deep .combined-text-block{padding:.4em 0;line-height:1.6em;outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part{outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child,:host ::ng-deep .combined-text-block .combined-text-block-part._selected{display:list-item}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child::marker,:host ::ng-deep .combined-text-block .combined-text-block-part._selected::marker{content:\"\"}:host ::ng-deep .image-tool__image{border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}:host ::ng-deep .image-tool__image-preloader{background-color:var(--cui-base-200)}:host ::ng-deep .image-tool__image-preloader:after{border:1px solid var(--cui-base-200);border-top:1px solid var(--cui-blue-600)}:host ::ng-deep .cdx-button{border:1px solid var(--cui-base-200);color:var(--textColor);background-color:var(--cui-base-0);box-shadow:none}:host ::ng-deep .ce-inline-toolbar{border-color:var(--cui-base-100);color:var(--textColor);background-color:var(--cui-base-0)}:host ::ng-deep .ce-inline-toolbar__dropdown:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-inline-tool:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{color:var(--cui-base-500)}:host ::ng-deep .ce-toolbar__plus:hover,:host ::ng-deep .ce-toolbar__settings-btn:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__actions{right:100%}:host ::ng-deep .ce-toolbar__content{max-width:none}@media (max-width: 650px){:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{border-color:var(--menuBorder);background-color:var(--menuBackground)}:host ::ng-deep .ce-toolbar__actions{inset:0 auto auto 0}}:host ::ng-deep .ce-block--selected .ce-block__content{background-color:var(--cui-base-200)}:host ::ng-deep .ce-block__content{max-width:100%}:host ::ng-deep .ce-block:only-of-type .combined-text-block[data-placeholder-active][data-empty=true]:before{content:attr(data-placeholder-active);position:absolute;color:var(--cui-base-400)}:host ::ng-deep [data-editor]{padding-right:4px;width:100%;height:100%;min-height:200px;overflow:hidden auto;scrollbar-gutter:stable}:host ::ng-deep [data-editor] .codex-editor{margin-left:60px}:host ::ng-deep [data-editor] .codex-editor--narrow .ce-popover{right:auto}:host ::ng-deep [data-editor] .codex-editor__redactor{margin-right:auto;padding-bottom:260px!important}@media (max-width: 650px){:host ::ng-deep [data-editor] .codex-editor{margin-left:0}}:host ::ng-deep [data-editor]._readonly{min-height:auto}:host ::ng-deep [data-editor]._readonly .codex-editor{margin:auto}:host ::ng-deep [data-editor]._readonly .codex-editor__redactor{padding-bottom:0!important}:host ::ng-deep [data-editor]._readonly .combined-text-block{padding:0}:host ::ng-deep [data-editor] [data-item-name=move-up],:host ::ng-deep [data-editor] [data-item-name=move-down],:host ::ng-deep [data-editor] [data-tool=paragraph]{display:none}:host ::ng-deep [data-editor] *::selection{background:var(--cui-base-200)}:host ::ng-deep [data-editor] a{color:var(--cui-light-blue-600)}:host ::ng-deep .marker{cursor:pointer;text-decoration:underline;color:var(--cui-light-blue-600);background-color:transparent}:host ::ng-deep .tool-marker,:host ::ng-deep .role-marker{margin:0 5px}:host ::ng-deep .tool-marker{color:#e97c00}:host ::ng-deep .role-marker{color:#8803f1}.form{height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiEditorComponent, isStandalone: true, selector: "cui-editor", inputs: { editorApiId: "editorApiId", config: "config", requestSize: "requestSize" }, outputs: { editorEmpty: "editorEmpty" }, providers: [CuiEditorService, CuiJTextApiService], viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    #editor\n    [id]=\"editorId\"\n    data-editor\n    [class._readonly]=\"config.readOnly\"\n></div>\n", styles: [":host{--textColor: var(--cui-base-900);--menuBackground: var(--cui-base-0);--menuBorder: var(--cui-base-200);--menuItemHover: var(--cui-base-10);--menuItemBackground: var(cui-base-900);--menuIconBackground: var(--cui-base-50);--menuIconHover: var(--cui-base-10);font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font)}:host ::ng-deep .ce-popover{--color-background: var(--menuBackground);--color-text-primary: var(--textColor);--color-border: var(--menuBorder);--color-border-icon: var(--menuBorder);--color-background-item: var(--menuItemBackground);--color-background-item-hover: var(--menuItemHover)}:host ::ng-deep .ce-popover__search{background:var(--menuIconBackground)}:host ::ng-deep .ce-popover .ce-popover-item__icon{background:var(--menuIconBackground)}:host ::ng-deep .ce-conversion-toolbar{background-color:var(--menuBackground);border-color:var(--menuBorder)}:host ::ng-deep .ce-conversion-toolbar__tools{padding:0 6px 6px}:host ::ng-deep .ce-conversion-tool{padding:3px;border-radius:6px}:host ::ng-deep .ce-conversion-tool__icon{border:1px solid var(--menuBorder);background-color:var(--menuIconBackground);box-shadow:none}:host ::ng-deep .ce-conversion-tool:hover{background-color:var(--menuItemHover)}:host ::ng-deep .ce-conversion-tool:hover .ce-conversion-tool__icon{border-color:var(--menuIconHover)}:host ::ng-deep .combined-text-block{padding:.4em 0;line-height:1.6em;outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part{outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child,:host ::ng-deep .combined-text-block .combined-text-block-part._selected{display:list-item}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child::marker,:host ::ng-deep .combined-text-block .combined-text-block-part._selected::marker{content:\"\"}:host ::ng-deep .image-tool__image{border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}:host ::ng-deep .image-tool__image-preloader{background-color:var(--cui-base-200)}:host ::ng-deep .image-tool__image-preloader:after{border:1px solid var(--cui-base-200);border-top:1px solid var(--cui-blue-600)}:host ::ng-deep .cdx-button{border:1px solid var(--cui-base-200);color:var(--textColor);background-color:var(--cui-base-0);box-shadow:none}:host ::ng-deep .ce-inline-toolbar{border-color:var(--cui-base-100);color:var(--textColor);background-color:var(--cui-base-0)}:host ::ng-deep .ce-inline-toolbar__dropdown:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-inline-tool:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{color:var(--cui-base-500)}:host ::ng-deep .ce-toolbar__plus:hover,:host ::ng-deep .ce-toolbar__settings-btn:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__actions{right:100%}:host ::ng-deep .ce-toolbar__content{max-width:none}@media (max-width: 650px){:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{border-color:var(--menuBorder);background-color:var(--menuBackground)}:host ::ng-deep .ce-toolbar__actions{inset:0 auto auto 0}}:host ::ng-deep .ce-block--selected .ce-block__content{background-color:var(--cui-base-200)}:host ::ng-deep .ce-block__content{max-width:100%}:host ::ng-deep .ce-block:only-of-type .combined-text-block[data-placeholder-active][data-empty=true]:before{content:attr(data-placeholder-active);position:absolute;color:var(--cui-base-400)}:host ::ng-deep [data-editor]{padding-right:4px;width:100%;height:100%;min-height:200px;overflow:hidden auto;scrollbar-gutter:stable}:host ::ng-deep [data-editor] .codex-editor{margin-left:60px}:host ::ng-deep [data-editor] .codex-editor--narrow .ce-popover{right:auto}:host ::ng-deep [data-editor] .codex-editor__redactor{margin-right:auto;padding-bottom:260px!important}@media (max-width: 650px){:host ::ng-deep [data-editor] .codex-editor{margin-left:0}}:host ::ng-deep [data-editor]._readonly{min-height:auto}:host ::ng-deep [data-editor]._readonly .codex-editor{margin:auto}:host ::ng-deep [data-editor]._readonly .codex-editor__redactor{padding-bottom:0!important}:host ::ng-deep [data-editor]._readonly .combined-text-block{padding:0}:host ::ng-deep [data-editor] [data-item-name=move-up],:host ::ng-deep [data-editor] [data-item-name=move-down],:host ::ng-deep [data-editor] [data-tool=paragraph]{display:none}:host ::ng-deep [data-editor] *::selection{background:var(--cui-base-200)}:host ::ng-deep [data-editor] a{color:var(--cui-light-blue-600)}:host ::ng-deep .marker{cursor:pointer;text-decoration:underline;color:var(--cui-light-blue-600);background-color:transparent}:host ::ng-deep .tool-marker,:host ::ng-deep .role-marker{margin:0 5px}:host ::ng-deep .tool-marker{color:#e97c00}:host ::ng-deep .role-marker{color:#8803f1}.form{height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-editor', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiEditorService, CuiJTextApiService], template: "<div\r\n    #editor\r\n    [id]=\"editorId\"\r\n    data-editor\r\n    [class._readonly]=\"config.readOnly\"\r\n></div>\r\n", styles: [":host{--textColor: var(--cui-base-900);--menuBackground: var(--cui-base-0);--menuBorder: var(--cui-base-200);--menuItemHover: var(--cui-base-10);--menuItemBackground: var(cui-base-900);--menuIconBackground: var(--cui-base-50);--menuIconHover: var(--cui-base-10);font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font)}:host ::ng-deep .ce-popover{--color-background: var(--menuBackground);--color-text-primary: var(--textColor);--color-border: var(--menuBorder);--color-border-icon: var(--menuBorder);--color-background-item: var(--menuItemBackground);--color-background-item-hover: var(--menuItemHover)}:host ::ng-deep .ce-popover__search{background:var(--menuIconBackground)}:host ::ng-deep .ce-popover .ce-popover-item__icon{background:var(--menuIconBackground)}:host ::ng-deep .ce-conversion-toolbar{background-color:var(--menuBackground);border-color:var(--menuBorder)}:host ::ng-deep .ce-conversion-toolbar__tools{padding:0 6px 6px}:host ::ng-deep .ce-conversion-tool{padding:3px;border-radius:6px}:host ::ng-deep .ce-conversion-tool__icon{border:1px solid var(--menuBorder);background-color:var(--menuIconBackground);box-shadow:none}:host ::ng-deep .ce-conversion-tool:hover{background-color:var(--menuItemHover)}:host ::ng-deep .ce-conversion-tool:hover .ce-conversion-tool__icon{border-color:var(--menuIconHover)}:host ::ng-deep .combined-text-block{padding:.4em 0;line-height:1.6em;outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part{outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child,:host ::ng-deep .combined-text-block .combined-text-block-part._selected{display:list-item}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child::marker,:host ::ng-deep .combined-text-block .combined-text-block-part._selected::marker{content:\"\"}:host ::ng-deep .image-tool__image{border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}:host ::ng-deep .image-tool__image-preloader{background-color:var(--cui-base-200)}:host ::ng-deep .image-tool__image-preloader:after{border:1px solid var(--cui-base-200);border-top:1px solid var(--cui-blue-600)}:host ::ng-deep .cdx-button{border:1px solid var(--cui-base-200);color:var(--textColor);background-color:var(--cui-base-0);box-shadow:none}:host ::ng-deep .ce-inline-toolbar{border-color:var(--cui-base-100);color:var(--textColor);background-color:var(--cui-base-0)}:host ::ng-deep .ce-inline-toolbar__dropdown:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-inline-tool:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{color:var(--cui-base-500)}:host ::ng-deep .ce-toolbar__plus:hover,:host ::ng-deep .ce-toolbar__settings-btn:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__actions{right:100%}:host ::ng-deep .ce-toolbar__content{max-width:none}@media (max-width: 650px){:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{border-color:var(--menuBorder);background-color:var(--menuBackground)}:host ::ng-deep .ce-toolbar__actions{inset:0 auto auto 0}}:host ::ng-deep .ce-block--selected .ce-block__content{background-color:var(--cui-base-200)}:host ::ng-deep .ce-block__content{max-width:100%}:host ::ng-deep .ce-block:only-of-type .combined-text-block[data-placeholder-active][data-empty=true]:before{content:attr(data-placeholder-active);position:absolute;color:var(--cui-base-400)}:host ::ng-deep [data-editor]{padding-right:4px;width:100%;height:100%;min-height:200px;overflow:hidden auto;scrollbar-gutter:stable}:host ::ng-deep [data-editor] .codex-editor{margin-left:60px}:host ::ng-deep [data-editor] .codex-editor--narrow .ce-popover{right:auto}:host ::ng-deep [data-editor] .codex-editor__redactor{margin-right:auto;padding-bottom:260px!important}@media (max-width: 650px){:host ::ng-deep [data-editor] .codex-editor{margin-left:0}}:host ::ng-deep [data-editor]._readonly{min-height:auto}:host ::ng-deep [data-editor]._readonly .codex-editor{margin:auto}:host ::ng-deep [data-editor]._readonly .codex-editor__redactor{padding-bottom:0!important}:host ::ng-deep [data-editor]._readonly .combined-text-block{padding:0}:host ::ng-deep [data-editor] [data-item-name=move-up],:host ::ng-deep [data-editor] [data-item-name=move-down],:host ::ng-deep [data-editor] [data-tool=paragraph]{display:none}:host ::ng-deep [data-editor] *::selection{background:var(--cui-base-200)}:host ::ng-deep [data-editor] a{color:var(--cui-light-blue-600)}:host ::ng-deep .marker{cursor:pointer;text-decoration:underline;color:var(--cui-light-blue-600);background-color:transparent}:host ::ng-deep .tool-marker,:host ::ng-deep .role-marker{margin:0 5px}:host ::ng-deep .tool-marker{color:#e97c00}:host ::ng-deep .role-marker{color:#8803f1}.form{height:100%}\n"] }]
+            args: [{ selector: 'cui-editor', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiEditorService, CuiJTextApiService], template: "<div\n    #editor\n    [id]=\"editorId\"\n    data-editor\n    [class._readonly]=\"config.readOnly\"\n></div>\n", styles: [":host{--textColor: var(--cui-base-900);--menuBackground: var(--cui-base-0);--menuBorder: var(--cui-base-200);--menuItemHover: var(--cui-base-10);--menuItemBackground: var(cui-base-900);--menuIconBackground: var(--cui-base-50);--menuIconHover: var(--cui-base-10);font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font)}:host ::ng-deep .ce-popover{--color-background: var(--menuBackground);--color-text-primary: var(--textColor);--color-border: var(--menuBorder);--color-border-icon: var(--menuBorder);--color-background-item: var(--menuItemBackground);--color-background-item-hover: var(--menuItemHover)}:host ::ng-deep .ce-popover__search{background:var(--menuIconBackground)}:host ::ng-deep .ce-popover .ce-popover-item__icon{background:var(--menuIconBackground)}:host ::ng-deep .ce-conversion-toolbar{background-color:var(--menuBackground);border-color:var(--menuBorder)}:host ::ng-deep .ce-conversion-toolbar__tools{padding:0 6px 6px}:host ::ng-deep .ce-conversion-tool{padding:3px;border-radius:6px}:host ::ng-deep .ce-conversion-tool__icon{border:1px solid var(--menuBorder);background-color:var(--menuIconBackground);box-shadow:none}:host ::ng-deep .ce-conversion-tool:hover{background-color:var(--menuItemHover)}:host ::ng-deep .ce-conversion-tool:hover .ce-conversion-tool__icon{border-color:var(--menuIconHover)}:host ::ng-deep .combined-text-block{padding:.4em 0;line-height:1.6em;outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part{outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child,:host ::ng-deep .combined-text-block .combined-text-block-part._selected{display:list-item}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child::marker,:host ::ng-deep .combined-text-block .combined-text-block-part._selected::marker{content:\"\"}:host ::ng-deep .image-tool__image{border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}:host ::ng-deep .image-tool__image-preloader{background-color:var(--cui-base-200)}:host ::ng-deep .image-tool__image-preloader:after{border:1px solid var(--cui-base-200);border-top:1px solid var(--cui-blue-600)}:host ::ng-deep .cdx-button{border:1px solid var(--cui-base-200);color:var(--textColor);background-color:var(--cui-base-0);box-shadow:none}:host ::ng-deep .ce-inline-toolbar{border-color:var(--cui-base-100);color:var(--textColor);background-color:var(--cui-base-0)}:host ::ng-deep .ce-inline-toolbar__dropdown:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-inline-tool:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{color:var(--cui-base-500)}:host ::ng-deep .ce-toolbar__plus:hover,:host ::ng-deep .ce-toolbar__settings-btn:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__actions{right:100%}:host ::ng-deep .ce-toolbar__content{max-width:none}@media (max-width: 650px){:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{border-color:var(--menuBorder);background-color:var(--menuBackground)}:host ::ng-deep .ce-toolbar__actions{inset:0 auto auto 0}}:host ::ng-deep .ce-block--selected .ce-block__content{background-color:var(--cui-base-200)}:host ::ng-deep .ce-block__content{max-width:100%}:host ::ng-deep .ce-block:only-of-type .combined-text-block[data-placeholder-active][data-empty=true]:before{content:attr(data-placeholder-active);position:absolute;color:var(--cui-base-400)}:host ::ng-deep [data-editor]{padding-right:4px;width:100%;height:100%;min-height:200px;overflow:hidden auto;scrollbar-gutter:stable}:host ::ng-deep [data-editor] .codex-editor{margin-left:60px}:host ::ng-deep [data-editor] .codex-editor--narrow .ce-popover{right:auto}:host ::ng-deep [data-editor] .codex-editor__redactor{margin-right:auto;padding-bottom:260px!important}@media (max-width: 650px){:host ::ng-deep [data-editor] .codex-editor{margin-left:0}}:host ::ng-deep [data-editor]._readonly{min-height:auto}:host ::ng-deep [data-editor]._readonly .codex-editor{margin:auto}:host ::ng-deep [data-editor]._readonly .codex-editor__redactor{padding-bottom:0!important}:host ::ng-deep [data-editor]._readonly .combined-text-block{padding:0}:host ::ng-deep [data-editor] [data-item-name=move-up],:host ::ng-deep [data-editor] [data-item-name=move-down],:host ::ng-deep [data-editor] [data-tool=paragraph]{display:none}:host ::ng-deep [data-editor] *::selection{background:var(--cui-base-200)}:host ::ng-deep [data-editor] a{color:var(--cui-light-blue-600)}:host ::ng-deep .marker{cursor:pointer;text-decoration:underline;color:var(--cui-light-blue-600);background-color:transparent}:host ::ng-deep .tool-marker,:host ::ng-deep .role-marker{margin:0 5px}:host ::ng-deep .tool-marker{color:#e97c00}:host ::ng-deep .role-marker{color:#8803f1}.form{height:100%}\n"] }]
         }], propDecorators: { editorRef: [{
                 type: ViewChild,
                 args: ['editor']
@@ -7516,7 +7516,7 @@ class CuiEditorModalComponent {
         this.modalClosed.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiEditorModalComponent, isStandalone: true, selector: "cui-editor-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, buttonTemplate: { classPropertyName: "buttonTemplate", publicName: "buttonTemplate", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, editorId: { classPropertyName: "editorId", publicName: "editorId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editorCreated: "editorCreated", modalClosed: "modalClosed" }, ngImport: i0, template: "@if (buttonTemplate(); as template) {\r\n    <button\r\n        type=\"button\"\r\n        class=\"button\"\r\n        (click)=\"onModalOpen()\"\r\n    >\r\n        <ng-container [ngTemplateOutlet]=\"template\" />\r\n    </button>\r\n} @else {\r\n    <button\r\n        class=\"description\"\r\n        cuiButton\r\n        type=\"button\"\r\n        appearance=\"outlined-gray\"\r\n        icon=\"cuiIconRichText\"\r\n        size=\"sm\"\r\n        (click)=\"onModalOpen()\"\r\n        [disabled]=\"isButtonDisabled()\"\r\n    >\r\n        @if (editorId()) {\r\n            <span class=\"description__text _created\">{{ 'Description' }}</span>\r\n            <cui-svg\r\n                class=\"description__icon\"\r\n                icon=\"cuiIconEdit\"\r\n                color=\"var(--cui-base-500)\"\r\n            />\r\n        } @else {\r\n            <cui-svg\r\n                class=\"description__icon\"\r\n                icon=\"cuiIconPlus\"\r\n                color=\"var(--cui-light-blue-600)\"\r\n            />\r\n            <span class=\"description__text\">{{ 'Add description' }}</span>\r\n        }\r\n    </button>\r\n}\r\n@if (isOpen()) {\r\n    <div class=\"wrapper\">\r\n        @if (editorId(); as id) {\r\n            <header class=\"header\">\r\n                <div class=\"info\">\r\n                    <button\r\n                        cuiButton\r\n                        type=\"button\"\r\n                        icon=\"cuiIconChevronLeft\"\r\n                        size=\"xxs\"\r\n                        appearance=\"secondary\"\r\n                        shape=\"rounded\"\r\n                        (click)=\"close()\"\r\n                    ></button>\r\n                    <h1 class=\"title\">{{ title() }}</h1>\r\n                </div>\r\n                <div class=\"actions\">\r\n                    <!-- <cui-loader /> -->\r\n                    <button\r\n                        type=\"button\"\r\n                        cuiButton\r\n                        size=\"xs\"\r\n                        (click)=\"close()\"\r\n                    >\r\n                        {{ 'Done' }}\r\n                    </button>\r\n                </div>\r\n            </header>\r\n\r\n            <section class=\"section\">\r\n                <cui-editor\r\n                    #editorComponent\r\n                    class=\"editor\"\r\n                    [editorApiId]=\"id\"\r\n                    [config]=\"config()\"\r\n                />\r\n            </section>\r\n        }\r\n    </div>\r\n}\r\n", styles: [":host ::ng-deep .delete{width:max-content}:host ::ng-deep .delete .c-content{display:flex;align-items:center;gap:4px;color:var(--cui-danger)}:host ::ng-deep .description .c-content{display:flex;align-items:center;gap:4px}.button{padding:0}.description{width:max-content}.description__text{color:var(--cui-light-blue-600)}.description__text._created{color:var(--cui-base-900)}.description__icon{padding:4px}.wrapper{position:fixed;z-index:10;inset:0;background-color:var(--cui-base-0)}.header{display:flex;justify-content:space-between;padding:8px 16px;border-bottom:.5px solid var(--cui-base-200);background:var(--cui-base-0)}.info,.actions{display:flex;gap:12px;align-items:center}.section{padding-right:24px;padding-left:24px;padding-top:24px;height:calc(100% - 50px);overflow:hidden}.title{font-weight:500;font-size:14px;line-height:20px;margin:0}.editor{padding-right:32px;padding-left:32px;padding-top:32px;display:block;margin:0 auto;max-width:750px;height:100%}\n"], dependencies: [{ kind: "component", type: CuiEditorComponent, selector: "cui-editor", inputs: ["editorApiId", "config", "requestSize"], outputs: ["editorEmpty"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiEditorModalComponent, isStandalone: true, selector: "cui-editor-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, buttonTemplate: { classPropertyName: "buttonTemplate", publicName: "buttonTemplate", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, editorId: { classPropertyName: "editorId", publicName: "editorId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editorCreated: "editorCreated", modalClosed: "modalClosed" }, ngImport: i0, template: "@if (buttonTemplate(); as template) {\n    <button\n        type=\"button\"\n        class=\"button\"\n        (click)=\"onModalOpen()\"\n    >\n        <ng-container [ngTemplateOutlet]=\"template\" />\n    </button>\n} @else {\n    <button\n        class=\"description\"\n        cuiButton\n        type=\"button\"\n        appearance=\"outlined-gray\"\n        icon=\"cuiIconRichText\"\n        size=\"sm\"\n        (click)=\"onModalOpen()\"\n        [disabled]=\"isButtonDisabled()\"\n    >\n        @if (editorId()) {\n            <span class=\"description__text _created\">{{ 'Description' }}</span>\n            <cui-svg\n                class=\"description__icon\"\n                icon=\"cuiIconEdit\"\n                color=\"var(--cui-base-500)\"\n            />\n        } @else {\n            <cui-svg\n                class=\"description__icon\"\n                icon=\"cuiIconPlus\"\n                color=\"var(--cui-light-blue-600)\"\n            />\n            <span class=\"description__text\">{{ 'Add description' }}</span>\n        }\n    </button>\n}\n@if (isOpen()) {\n    <div class=\"wrapper\">\n        @if (editorId(); as id) {\n            <header class=\"header\">\n                <div class=\"info\">\n                    <button\n                        cuiButton\n                        type=\"button\"\n                        icon=\"cuiIconChevronLeft\"\n                        size=\"xxs\"\n                        appearance=\"secondary\"\n                        shape=\"rounded\"\n                        (click)=\"close()\"\n                    ></button>\n                    <h1 class=\"title\">{{ title() }}</h1>\n                </div>\n                <div class=\"actions\">\n                    <!-- <cui-loader /> -->\n                    <button\n                        type=\"button\"\n                        cuiButton\n                        size=\"xs\"\n                        (click)=\"close()\"\n                    >\n                        {{ 'Done' }}\n                    </button>\n                </div>\n            </header>\n\n            <section class=\"section\">\n                <cui-editor\n                    #editorComponent\n                    class=\"editor\"\n                    [editorApiId]=\"id\"\n                    [config]=\"config()\"\n                />\n            </section>\n        }\n    </div>\n}\n", styles: [":host ::ng-deep .delete{width:max-content}:host ::ng-deep .delete .c-content{display:flex;align-items:center;gap:4px;color:var(--cui-danger)}:host ::ng-deep .description .c-content{display:flex;align-items:center;gap:4px}.button{padding:0}.description{width:max-content}.description__text{color:var(--cui-light-blue-600)}.description__text._created{color:var(--cui-base-900)}.description__icon{padding:4px}.wrapper{position:fixed;z-index:10;inset:0;background-color:var(--cui-base-0)}.header{display:flex;justify-content:space-between;padding:8px 16px;border-bottom:.5px solid var(--cui-base-200);background:var(--cui-base-0)}.info,.actions{display:flex;gap:12px;align-items:center}.section{padding-right:24px;padding-left:24px;padding-top:24px;height:calc(100% - 50px);overflow:hidden}.title{font-weight:500;font-size:14px;line-height:20px;margin:0}.editor{padding-right:32px;padding-left:32px;padding-top:32px;display:block;margin:0 auto;max-width:750px;height:100%}\n"], dependencies: [{ kind: "component", type: CuiEditorComponent, selector: "cui-editor", inputs: ["editorApiId", "config", "requestSize"], outputs: ["editorEmpty"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorModalComponent, decorators: [{
             type: Component,
@@ -7525,7 +7525,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         CuiButtonModule,
                         NgTemplateOutlet,
                         CuiSvgModule
-                    ], standalone: true, template: "@if (buttonTemplate(); as template) {\r\n    <button\r\n        type=\"button\"\r\n        class=\"button\"\r\n        (click)=\"onModalOpen()\"\r\n    >\r\n        <ng-container [ngTemplateOutlet]=\"template\" />\r\n    </button>\r\n} @else {\r\n    <button\r\n        class=\"description\"\r\n        cuiButton\r\n        type=\"button\"\r\n        appearance=\"outlined-gray\"\r\n        icon=\"cuiIconRichText\"\r\n        size=\"sm\"\r\n        (click)=\"onModalOpen()\"\r\n        [disabled]=\"isButtonDisabled()\"\r\n    >\r\n        @if (editorId()) {\r\n            <span class=\"description__text _created\">{{ 'Description' }}</span>\r\n            <cui-svg\r\n                class=\"description__icon\"\r\n                icon=\"cuiIconEdit\"\r\n                color=\"var(--cui-base-500)\"\r\n            />\r\n        } @else {\r\n            <cui-svg\r\n                class=\"description__icon\"\r\n                icon=\"cuiIconPlus\"\r\n                color=\"var(--cui-light-blue-600)\"\r\n            />\r\n            <span class=\"description__text\">{{ 'Add description' }}</span>\r\n        }\r\n    </button>\r\n}\r\n@if (isOpen()) {\r\n    <div class=\"wrapper\">\r\n        @if (editorId(); as id) {\r\n            <header class=\"header\">\r\n                <div class=\"info\">\r\n                    <button\r\n                        cuiButton\r\n                        type=\"button\"\r\n                        icon=\"cuiIconChevronLeft\"\r\n                        size=\"xxs\"\r\n                        appearance=\"secondary\"\r\n                        shape=\"rounded\"\r\n                        (click)=\"close()\"\r\n                    ></button>\r\n                    <h1 class=\"title\">{{ title() }}</h1>\r\n                </div>\r\n                <div class=\"actions\">\r\n                    <!-- <cui-loader /> -->\r\n                    <button\r\n                        type=\"button\"\r\n                        cuiButton\r\n                        size=\"xs\"\r\n                        (click)=\"close()\"\r\n                    >\r\n                        {{ 'Done' }}\r\n                    </button>\r\n                </div>\r\n            </header>\r\n\r\n            <section class=\"section\">\r\n                <cui-editor\r\n                    #editorComponent\r\n                    class=\"editor\"\r\n                    [editorApiId]=\"id\"\r\n                    [config]=\"config()\"\r\n                />\r\n            </section>\r\n        }\r\n    </div>\r\n}\r\n", styles: [":host ::ng-deep .delete{width:max-content}:host ::ng-deep .delete .c-content{display:flex;align-items:center;gap:4px;color:var(--cui-danger)}:host ::ng-deep .description .c-content{display:flex;align-items:center;gap:4px}.button{padding:0}.description{width:max-content}.description__text{color:var(--cui-light-blue-600)}.description__text._created{color:var(--cui-base-900)}.description__icon{padding:4px}.wrapper{position:fixed;z-index:10;inset:0;background-color:var(--cui-base-0)}.header{display:flex;justify-content:space-between;padding:8px 16px;border-bottom:.5px solid var(--cui-base-200);background:var(--cui-base-0)}.info,.actions{display:flex;gap:12px;align-items:center}.section{padding-right:24px;padding-left:24px;padding-top:24px;height:calc(100% - 50px);overflow:hidden}.title{font-weight:500;font-size:14px;line-height:20px;margin:0}.editor{padding-right:32px;padding-left:32px;padding-top:32px;display:block;margin:0 auto;max-width:750px;height:100%}\n"] }]
+                    ], standalone: true, template: "@if (buttonTemplate(); as template) {\n    <button\n        type=\"button\"\n        class=\"button\"\n        (click)=\"onModalOpen()\"\n    >\n        <ng-container [ngTemplateOutlet]=\"template\" />\n    </button>\n} @else {\n    <button\n        class=\"description\"\n        cuiButton\n        type=\"button\"\n        appearance=\"outlined-gray\"\n        icon=\"cuiIconRichText\"\n        size=\"sm\"\n        (click)=\"onModalOpen()\"\n        [disabled]=\"isButtonDisabled()\"\n    >\n        @if (editorId()) {\n            <span class=\"description__text _created\">{{ 'Description' }}</span>\n            <cui-svg\n                class=\"description__icon\"\n                icon=\"cuiIconEdit\"\n                color=\"var(--cui-base-500)\"\n            />\n        } @else {\n            <cui-svg\n                class=\"description__icon\"\n                icon=\"cuiIconPlus\"\n                color=\"var(--cui-light-blue-600)\"\n            />\n            <span class=\"description__text\">{{ 'Add description' }}</span>\n        }\n    </button>\n}\n@if (isOpen()) {\n    <div class=\"wrapper\">\n        @if (editorId(); as id) {\n            <header class=\"header\">\n                <div class=\"info\">\n                    <button\n                        cuiButton\n                        type=\"button\"\n                        icon=\"cuiIconChevronLeft\"\n                        size=\"xxs\"\n                        appearance=\"secondary\"\n                        shape=\"rounded\"\n                        (click)=\"close()\"\n                    ></button>\n                    <h1 class=\"title\">{{ title() }}</h1>\n                </div>\n                <div class=\"actions\">\n                    <!-- <cui-loader /> -->\n                    <button\n                        type=\"button\"\n                        cuiButton\n                        size=\"xs\"\n                        (click)=\"close()\"\n                    >\n                        {{ 'Done' }}\n                    </button>\n                </div>\n            </header>\n\n            <section class=\"section\">\n                <cui-editor\n                    #editorComponent\n                    class=\"editor\"\n                    [editorApiId]=\"id\"\n                    [config]=\"config()\"\n                />\n            </section>\n        }\n    </div>\n}\n", styles: [":host ::ng-deep .delete{width:max-content}:host ::ng-deep .delete .c-content{display:flex;align-items:center;gap:4px;color:var(--cui-danger)}:host ::ng-deep .description .c-content{display:flex;align-items:center;gap:4px}.button{padding:0}.description{width:max-content}.description__text{color:var(--cui-light-blue-600)}.description__text._created{color:var(--cui-base-900)}.description__icon{padding:4px}.wrapper{position:fixed;z-index:10;inset:0;background-color:var(--cui-base-0)}.header{display:flex;justify-content:space-between;padding:8px 16px;border-bottom:.5px solid var(--cui-base-200);background:var(--cui-base-0)}.info,.actions{display:flex;gap:12px;align-items:center}.section{padding-right:24px;padding-left:24px;padding-top:24px;height:calc(100% - 50px);overflow:hidden}.title{font-weight:500;font-size:14px;line-height:20px;margin:0}.editor{padding-right:32px;padding-left:32px;padding-top:32px;display:block;margin:0 auto;max-width:750px;height:100%}\n"] }]
         }] });
 
 class CuiEditorBlockComponent {
@@ -7566,7 +7566,7 @@ class CuiEditorBlockComponent {
         }, { allowSignalWrites: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiEditorBlockComponent, isStandalone: true, selector: "cui-editor-block", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, editorId: { classPropertyName: "editorId", publicName: "editorId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editorEmpty: "editorEmpty" }, viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <div class=\"wrapper\">\r\n        <span class=\"title\">\r\n            {{ t('DESCRIPTION') }}\r\n            @if (required()) {\r\n                <span class=\"title__required\">*</span>\r\n            }\r\n        </span>\r\n        <ng-template #button>\r\n            <button\r\n                [cuiTooltip]=\"t('EXPAND_EDITOR_TO_FULLSCREEN')\"\r\n                cuiButton\r\n                size=\"xxs\"\r\n                type=\"button\"\r\n                appearance=\"ghost\"\r\n                icon=\"cuiIconMaximizeSm\"\r\n                (click)=\"onToggleDescriptionModal()\"\r\n            ></button>\r\n        </ng-template>\r\n        <cui-editor-modal\r\n            [title]=\"title()\"\r\n            [editorId]=\"editorId()\"\r\n            [buttonTemplate]=\"button\"\r\n            [config]=\"config()\"\r\n            (modalClosed)=\"onToggleDescriptionModal()\"\r\n        />\r\n    </div>\r\n    <div\r\n        #editorContainer\r\n        cuiContentWrapper\r\n        class=\"editor\"\r\n        [class.editor_invalid]=\"required() && isDescriptionEmpty()\"\r\n    >\r\n        @if (!isDescriptionModalOpen() && editorConfig()) {\r\n            <cui-editor\r\n                #editorComponent\r\n                [editorApiId]=\"editorId()\"\r\n                [config]=\"editorConfig()!\"\r\n                (editorEmpty)=\"onDescriptionChange($event)\"\r\n            />\r\n        }\r\n    </div>\r\n    @if (required() && isDescriptionEmpty()) {\r\n        <cui-hint hintType=\"error\">{{ t('DESCRIPTION_IS_REQUIRED') }}</cui-hint>\r\n    }\r\n</ng-container>\r\n", styles: [":host{--max-editor-height: 650px;padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--cui-base-10);border-radius:8px}:host .editor{max-height:var(--max-editor-height)}.wrapper{display:flex;gap:8px;align-items:center;justify-content:space-between}.editor{padding-top:16px;padding-bottom:16px;display:block;overflow:auto}.editor_invalid{border:1px solid var(--cui-danger)}.title{font-weight:500;font-size:14px;line-height:20px}.title__required{color:var(--cui-danger)}\n"], dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "component", type: CuiEditorModalComponent, selector: "cui-editor-modal", inputs: ["title", "buttonTemplate", "config", "editorId"], outputs: ["editorCreated", "modalClosed"] }, { kind: "component", type: CuiEditorComponent, selector: "cui-editor", inputs: ["editorApiId", "config", "requestSize"], outputs: ["editorEmpty"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiContentWrapperComponent, selector: "cui-content-wrapper, [cuiContentWrapper]", inputs: ["backgroundColor", "gap"] }, { kind: "directive", type: CuiTooltipDirective, selector: "[cuiTooltip]:not(ng-container):not(ng-template)", inputs: ["cuiTooltipContext", "cuiTooltipAppearance", "cuiTooltip"] }, { kind: "ngmodule", type: CuiHintModule }, { kind: "component", type: CuiHintComponent, selector: "cui-hint", inputs: ["hintType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiEditorBlockComponent, isStandalone: true, selector: "cui-editor-block", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, editorId: { classPropertyName: "editorId", publicName: "editorId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editorEmpty: "editorEmpty" }, viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <div class=\"wrapper\">\n        <span class=\"title\">\n            {{ t('DESCRIPTION') }}\n            @if (required()) {\n                <span class=\"title__required\">*</span>\n            }\n        </span>\n        <ng-template #button>\n            <button\n                [cuiTooltip]=\"t('EXPAND_EDITOR_TO_FULLSCREEN')\"\n                cuiButton\n                size=\"xxs\"\n                type=\"button\"\n                appearance=\"ghost\"\n                icon=\"cuiIconMaximizeSm\"\n                (click)=\"onToggleDescriptionModal()\"\n            ></button>\n        </ng-template>\n        <cui-editor-modal\n            [title]=\"title()\"\n            [editorId]=\"editorId()\"\n            [buttonTemplate]=\"button\"\n            [config]=\"config()\"\n            (modalClosed)=\"onToggleDescriptionModal()\"\n        />\n    </div>\n    <div\n        #editorContainer\n        cuiContentWrapper\n        class=\"editor\"\n        [class.editor_invalid]=\"required() && isDescriptionEmpty()\"\n    >\n        @if (!isDescriptionModalOpen() && editorConfig()) {\n            <cui-editor\n                #editorComponent\n                [editorApiId]=\"editorId()\"\n                [config]=\"editorConfig()!\"\n                (editorEmpty)=\"onDescriptionChange($event)\"\n            />\n        }\n    </div>\n    @if (required() && isDescriptionEmpty()) {\n        <cui-hint hintType=\"error\">{{ t('DESCRIPTION_IS_REQUIRED') }}</cui-hint>\n    }\n</ng-container>\n", styles: [":host{--max-editor-height: 650px;padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--cui-base-10);border-radius:8px}:host .editor{max-height:var(--max-editor-height)}.wrapper{display:flex;gap:8px;align-items:center;justify-content:space-between}.editor{padding-top:16px;padding-bottom:16px;display:block;overflow:auto}.editor_invalid{border:1px solid var(--cui-danger)}.title{font-weight:500;font-size:14px;line-height:20px}.title__required{color:var(--cui-danger)}\n"], dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "component", type: CuiEditorModalComponent, selector: "cui-editor-modal", inputs: ["title", "buttonTemplate", "config", "editorId"], outputs: ["editorCreated", "modalClosed"] }, { kind: "component", type: CuiEditorComponent, selector: "cui-editor", inputs: ["editorApiId", "config", "requestSize"], outputs: ["editorEmpty"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiContentWrapperComponent, selector: "cui-content-wrapper, [cuiContentWrapper]", inputs: ["backgroundColor", "gap"] }, { kind: "directive", type: CuiTooltipDirective, selector: "[cuiTooltip]:not(ng-container):not(ng-template)", inputs: ["cuiTooltipContext", "cuiTooltipAppearance", "cuiTooltip"] }, { kind: "ngmodule", type: CuiHintModule }, { kind: "component", type: CuiHintComponent, selector: "cui-hint", inputs: ["hintType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorBlockComponent, decorators: [{
             type: Component,
@@ -7578,7 +7578,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         CuiContentWrapperComponent,
                         CuiTooltip,
                         CuiHintModule
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n    <div class=\"wrapper\">\r\n        <span class=\"title\">\r\n            {{ t('DESCRIPTION') }}\r\n            @if (required()) {\r\n                <span class=\"title__required\">*</span>\r\n            }\r\n        </span>\r\n        <ng-template #button>\r\n            <button\r\n                [cuiTooltip]=\"t('EXPAND_EDITOR_TO_FULLSCREEN')\"\r\n                cuiButton\r\n                size=\"xxs\"\r\n                type=\"button\"\r\n                appearance=\"ghost\"\r\n                icon=\"cuiIconMaximizeSm\"\r\n                (click)=\"onToggleDescriptionModal()\"\r\n            ></button>\r\n        </ng-template>\r\n        <cui-editor-modal\r\n            [title]=\"title()\"\r\n            [editorId]=\"editorId()\"\r\n            [buttonTemplate]=\"button\"\r\n            [config]=\"config()\"\r\n            (modalClosed)=\"onToggleDescriptionModal()\"\r\n        />\r\n    </div>\r\n    <div\r\n        #editorContainer\r\n        cuiContentWrapper\r\n        class=\"editor\"\r\n        [class.editor_invalid]=\"required() && isDescriptionEmpty()\"\r\n    >\r\n        @if (!isDescriptionModalOpen() && editorConfig()) {\r\n            <cui-editor\r\n                #editorComponent\r\n                [editorApiId]=\"editorId()\"\r\n                [config]=\"editorConfig()!\"\r\n                (editorEmpty)=\"onDescriptionChange($event)\"\r\n            />\r\n        }\r\n    </div>\r\n    @if (required() && isDescriptionEmpty()) {\r\n        <cui-hint hintType=\"error\">{{ t('DESCRIPTION_IS_REQUIRED') }}</cui-hint>\r\n    }\r\n</ng-container>\r\n", styles: [":host{--max-editor-height: 650px;padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--cui-base-10);border-radius:8px}:host .editor{max-height:var(--max-editor-height)}.wrapper{display:flex;gap:8px;align-items:center;justify-content:space-between}.editor{padding-top:16px;padding-bottom:16px;display:block;overflow:auto}.editor_invalid{border:1px solid var(--cui-danger)}.title{font-weight:500;font-size:14px;line-height:20px}.title__required{color:var(--cui-danger)}\n"] }]
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    <div class=\"wrapper\">\n        <span class=\"title\">\n            {{ t('DESCRIPTION') }}\n            @if (required()) {\n                <span class=\"title__required\">*</span>\n            }\n        </span>\n        <ng-template #button>\n            <button\n                [cuiTooltip]=\"t('EXPAND_EDITOR_TO_FULLSCREEN')\"\n                cuiButton\n                size=\"xxs\"\n                type=\"button\"\n                appearance=\"ghost\"\n                icon=\"cuiIconMaximizeSm\"\n                (click)=\"onToggleDescriptionModal()\"\n            ></button>\n        </ng-template>\n        <cui-editor-modal\n            [title]=\"title()\"\n            [editorId]=\"editorId()\"\n            [buttonTemplate]=\"button\"\n            [config]=\"config()\"\n            (modalClosed)=\"onToggleDescriptionModal()\"\n        />\n    </div>\n    <div\n        #editorContainer\n        cuiContentWrapper\n        class=\"editor\"\n        [class.editor_invalid]=\"required() && isDescriptionEmpty()\"\n    >\n        @if (!isDescriptionModalOpen() && editorConfig()) {\n            <cui-editor\n                #editorComponent\n                [editorApiId]=\"editorId()\"\n                [config]=\"editorConfig()!\"\n                (editorEmpty)=\"onDescriptionChange($event)\"\n            />\n        }\n    </div>\n    @if (required() && isDescriptionEmpty()) {\n        <cui-hint hintType=\"error\">{{ t('DESCRIPTION_IS_REQUIRED') }}</cui-hint>\n    }\n</ng-container>\n", styles: [":host{--max-editor-height: 650px;padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--cui-base-10);border-radius:8px}:host .editor{max-height:var(--max-editor-height)}.wrapper{display:flex;gap:8px;align-items:center;justify-content:space-between}.editor{padding-top:16px;padding-bottom:16px;display:block;overflow:auto}.editor_invalid{border:1px solid var(--cui-danger)}.title{font-weight:500;font-size:14px;line-height:20px}.title__required{color:var(--cui-danger)}\n"] }]
         }], ctorParameters: () => [] });
 
 const cuiXNdjsonInterceptor = (request, next) => {
@@ -7844,11 +7844,11 @@ class CuiGeneralControlErrorHintComponent {
         return this.isVisible() ?? (this.control().invalid && this.control().dirty);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiGeneralControlErrorHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiGeneralControlErrorHintComponent, isStandalone: true, selector: "cui-general-control-error-hint", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    @if (isInvalid) {\r\n        @if (control().errors; as errors) {\r\n            <cui-hint hintType=\"error\">\r\n                @if (errors['required']) {\r\n                    {{ t('FIELD_IS_REQUIRED') }}\r\n                } @else if (errors['minlength']) {\r\n                    {{ t('PLEASE_KEEP_FIELD_AT_LEAST_CHARACTERS', { value: errors['minlength'].requiredLength }) }}\r\n                } @else if (errors['maxlength']) {\r\n                    {{ t('PLEASE_KEEP_FIELD_UNDER_CHARACTERS', { value: errors['maxlength'].requiredLength }) }}\r\n                } @else if (errors['extraSpaces']) {\r\n                    {{ t('MUST_BE_WITHOUT_EXTRA_SPACES') }}\r\n                } @else if (errors['min']) {\r\n                    {{ t('MIN_VALUE_MUST_BE_MORE_THAN', { value: errors['min'].min }) }}\r\n                } @else if (errors['max']) {\r\n                    {{ t('MAX_VALUE_MUST_BE_LESS_THAN', { value: errors['max'].max }) }}\r\n                } @else if (errors['email']) {\r\n                    {{ t('INVALID_EMAIL_ADDRESS') }}\r\n                }\r\n            </cui-hint>\r\n        }\r\n    }\r\n</ng-container>\r\n", styles: [":host{display:inline-block}:host:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CuiHintModule }, { kind: "component", type: CuiHintComponent, selector: "cui-hint", inputs: ["hintType"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiGeneralControlErrorHintComponent, isStandalone: true, selector: "cui-general-control-error-hint", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    @if (isInvalid) {\n        @if (control().errors; as errors) {\n            <cui-hint hintType=\"error\">\n                @if (errors['required']) {\n                    {{ t('FIELD_IS_REQUIRED') }}\n                } @else if (errors['minlength']) {\n                    {{ t('PLEASE_KEEP_FIELD_AT_LEAST_CHARACTERS', { value: errors['minlength'].requiredLength }) }}\n                } @else if (errors['maxlength']) {\n                    {{ t('PLEASE_KEEP_FIELD_UNDER_CHARACTERS', { value: errors['maxlength'].requiredLength }) }}\n                } @else if (errors['extraSpaces']) {\n                    {{ t('MUST_BE_WITHOUT_EXTRA_SPACES') }}\n                } @else if (errors['min']) {\n                    {{ t('MIN_VALUE_MUST_BE_MORE_THAN', { value: errors['min'].min }) }}\n                } @else if (errors['max']) {\n                    {{ t('MAX_VALUE_MUST_BE_LESS_THAN', { value: errors['max'].max }) }}\n                } @else if (errors['email']) {\n                    {{ t('INVALID_EMAIL_ADDRESS') }}\n                }\n            </cui-hint>\n        }\n    }\n</ng-container>\n", styles: [":host{display:inline-block}:host:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CuiHintModule }, { kind: "component", type: CuiHintComponent, selector: "cui-hint", inputs: ["hintType"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiGeneralControlErrorHintComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-general-control-error-hint', imports: [CuiHintModule, TranslocoDirective], standalone: true, changeDetection: ChangeDetectionStrategy.Default, template: "<ng-container *transloco=\"let t\">\r\n    @if (isInvalid) {\r\n        @if (control().errors; as errors) {\r\n            <cui-hint hintType=\"error\">\r\n                @if (errors['required']) {\r\n                    {{ t('FIELD_IS_REQUIRED') }}\r\n                } @else if (errors['minlength']) {\r\n                    {{ t('PLEASE_KEEP_FIELD_AT_LEAST_CHARACTERS', { value: errors['minlength'].requiredLength }) }}\r\n                } @else if (errors['maxlength']) {\r\n                    {{ t('PLEASE_KEEP_FIELD_UNDER_CHARACTERS', { value: errors['maxlength'].requiredLength }) }}\r\n                } @else if (errors['extraSpaces']) {\r\n                    {{ t('MUST_BE_WITHOUT_EXTRA_SPACES') }}\r\n                } @else if (errors['min']) {\r\n                    {{ t('MIN_VALUE_MUST_BE_MORE_THAN', { value: errors['min'].min }) }}\r\n                } @else if (errors['max']) {\r\n                    {{ t('MAX_VALUE_MUST_BE_LESS_THAN', { value: errors['max'].max }) }}\r\n                } @else if (errors['email']) {\r\n                    {{ t('INVALID_EMAIL_ADDRESS') }}\r\n                }\r\n            </cui-hint>\r\n        }\r\n    }\r\n</ng-container>\r\n", styles: [":host{display:inline-block}:host:empty{display:none}\n"] }]
+            args: [{ selector: 'cui-general-control-error-hint', imports: [CuiHintModule, TranslocoDirective], standalone: true, changeDetection: ChangeDetectionStrategy.Default, template: "<ng-container *transloco=\"let t\">\n    @if (isInvalid) {\n        @if (control().errors; as errors) {\n            <cui-hint hintType=\"error\">\n                @if (errors['required']) {\n                    {{ t('FIELD_IS_REQUIRED') }}\n                } @else if (errors['minlength']) {\n                    {{ t('PLEASE_KEEP_FIELD_AT_LEAST_CHARACTERS', { value: errors['minlength'].requiredLength }) }}\n                } @else if (errors['maxlength']) {\n                    {{ t('PLEASE_KEEP_FIELD_UNDER_CHARACTERS', { value: errors['maxlength'].requiredLength }) }}\n                } @else if (errors['extraSpaces']) {\n                    {{ t('MUST_BE_WITHOUT_EXTRA_SPACES') }}\n                } @else if (errors['min']) {\n                    {{ t('MIN_VALUE_MUST_BE_MORE_THAN', { value: errors['min'].min }) }}\n                } @else if (errors['max']) {\n                    {{ t('MAX_VALUE_MUST_BE_LESS_THAN', { value: errors['max'].max }) }}\n                } @else if (errors['email']) {\n                    {{ t('INVALID_EMAIL_ADDRESS') }}\n                }\n            </cui-hint>\n        }\n    }\n</ng-container>\n", styles: [":host{display:inline-block}:host:empty{display:none}\n"] }]
         }] });
 
 class CuiCategoryFormComponent {
@@ -7904,7 +7904,7 @@ class CuiCategoryFormComponent {
         Promise.resolve().then(() => this.input().nativeElement.focus());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCategoryFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: CuiCategoryFormComponent, isStandalone: true, selector: "cui-category-form", inputs: { isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, defaultTitle: { classPropertyName: "defaultTitle", publicName: "defaultTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { created: "created", canceled: "canceled" }, host: { listeners: { "click": "onHostClick($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <form\r\n        [formGroup]=\"form\"\r\n        class=\"form\"\r\n        (ngSubmit)=\"onSubmit()\"\r\n    >\r\n        <div class=\"input\">\r\n            <input\r\n                #input\r\n                cuiGhostInput\r\n                formControlName=\"title\"\r\n                type=\"text\"\r\n                placeholder=\"{{ t('ADD_CATEGORY_NAME') }}...\"\r\n                [isError]=\"isTitleInvalid\"\r\n                (keyup)=\"$event.preventDefault()\"\r\n            />\r\n            <cui-general-control-error-hint [control]=\"titleControl\" />\r\n        </div>\r\n        <button\r\n            cuiIconButton\r\n            type=\"submit\"\r\n            icon=\"cuiIconCheck\"\r\n            color=\"var(--cui-success)\"\r\n            [disabled]=\"isSubmitButtonDisabled\"\r\n            class=\"button\"\r\n        ></button>\r\n    </form>\r\n    <button\r\n        cuiIconButton\r\n        type=\"button\"\r\n        icon=\"cuiIconXCircle\"\r\n        color=\"var(--cui-danger)\"\r\n        (click)=\"onCancel($event)\"\r\n        [disabled]=\"isDisabled()\"\r\n        class=\"button\"\r\n    ></button>\r\n</ng-container>\r\n", styles: [":host{padding-top:2px;padding-bottom:2px;display:flex;gap:4px;flex-grow:1}.form,.input{flex-grow:1}.form{display:flex;gap:4px}.input{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.button{width:28px}.button:disabled{opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: CuiFormFieldModule }, { kind: "ngmodule", type: CuiHintModule }, { kind: "ngmodule", type: CuiIconButtonModule }, { kind: "component", type: CuiIconButtonComponent, selector: "button[cuiIconButton][icon], a[cuiIconButton][icon]", inputs: ["icon", "color", "hoverColor"] }, { kind: "component", type: CuiGeneralControlErrorHintComponent, selector: "cui-general-control-error-hint", inputs: ["control", "isVisible"] }, { kind: "component", type: CuiGhostInputComponent, selector: "input [cuiGhostInput]", inputs: ["isError"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: CuiCategoryFormComponent, isStandalone: true, selector: "cui-category-form", inputs: { isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, defaultTitle: { classPropertyName: "defaultTitle", publicName: "defaultTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { created: "created", canceled: "canceled" }, host: { listeners: { "click": "onHostClick($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <form\n        [formGroup]=\"form\"\n        class=\"form\"\n        (ngSubmit)=\"onSubmit()\"\n    >\n        <div class=\"input\">\n            <input\n                #input\n                cuiGhostInput\n                formControlName=\"title\"\n                type=\"text\"\n                placeholder=\"{{ t('ADD_CATEGORY_NAME') }}...\"\n                [isError]=\"isTitleInvalid\"\n                (keyup)=\"$event.preventDefault()\"\n            />\n            <cui-general-control-error-hint [control]=\"titleControl\" />\n        </div>\n        <button\n            cuiIconButton\n            type=\"submit\"\n            icon=\"cuiIconCheck\"\n            color=\"var(--cui-success)\"\n            [disabled]=\"isSubmitButtonDisabled\"\n            class=\"button\"\n        ></button>\n    </form>\n    <button\n        cuiIconButton\n        type=\"button\"\n        icon=\"cuiIconXCircle\"\n        color=\"var(--cui-danger)\"\n        (click)=\"onCancel($event)\"\n        [disabled]=\"isDisabled()\"\n        class=\"button\"\n    ></button>\n</ng-container>\n", styles: [":host{padding-top:2px;padding-bottom:2px;display:flex;gap:4px;flex-grow:1}.form,.input{flex-grow:1}.form{display:flex;gap:4px}.input{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.button{width:28px}.button:disabled{opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: CuiFormFieldModule }, { kind: "ngmodule", type: CuiHintModule }, { kind: "ngmodule", type: CuiIconButtonModule }, { kind: "component", type: CuiIconButtonComponent, selector: "button[cuiIconButton][icon], a[cuiIconButton][icon]", inputs: ["icon", "color", "hoverColor"] }, { kind: "component", type: CuiGeneralControlErrorHintComponent, selector: "cui-general-control-error-hint", inputs: ["control", "isVisible"] }, { kind: "component", type: CuiGhostInputComponent, selector: "input [cuiGhostInput]", inputs: ["isError"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCategoryFormComponent, decorators: [{
             type: Component,
@@ -7918,7 +7918,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         TranslocoDirective
                     ], standalone: true, host: {
                         '(click)': 'onHostClick($event)'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n    <form\r\n        [formGroup]=\"form\"\r\n        class=\"form\"\r\n        (ngSubmit)=\"onSubmit()\"\r\n    >\r\n        <div class=\"input\">\r\n            <input\r\n                #input\r\n                cuiGhostInput\r\n                formControlName=\"title\"\r\n                type=\"text\"\r\n                placeholder=\"{{ t('ADD_CATEGORY_NAME') }}...\"\r\n                [isError]=\"isTitleInvalid\"\r\n                (keyup)=\"$event.preventDefault()\"\r\n            />\r\n            <cui-general-control-error-hint [control]=\"titleControl\" />\r\n        </div>\r\n        <button\r\n            cuiIconButton\r\n            type=\"submit\"\r\n            icon=\"cuiIconCheck\"\r\n            color=\"var(--cui-success)\"\r\n            [disabled]=\"isSubmitButtonDisabled\"\r\n            class=\"button\"\r\n        ></button>\r\n    </form>\r\n    <button\r\n        cuiIconButton\r\n        type=\"button\"\r\n        icon=\"cuiIconXCircle\"\r\n        color=\"var(--cui-danger)\"\r\n        (click)=\"onCancel($event)\"\r\n        [disabled]=\"isDisabled()\"\r\n        class=\"button\"\r\n    ></button>\r\n</ng-container>\r\n", styles: [":host{padding-top:2px;padding-bottom:2px;display:flex;gap:4px;flex-grow:1}.form,.input{flex-grow:1}.form{display:flex;gap:4px}.input{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.button{width:28px}.button:disabled{opacity:.5}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    <form\n        [formGroup]=\"form\"\n        class=\"form\"\n        (ngSubmit)=\"onSubmit()\"\n    >\n        <div class=\"input\">\n            <input\n                #input\n                cuiGhostInput\n                formControlName=\"title\"\n                type=\"text\"\n                placeholder=\"{{ t('ADD_CATEGORY_NAME') }}...\"\n                [isError]=\"isTitleInvalid\"\n                (keyup)=\"$event.preventDefault()\"\n            />\n            <cui-general-control-error-hint [control]=\"titleControl\" />\n        </div>\n        <button\n            cuiIconButton\n            type=\"submit\"\n            icon=\"cuiIconCheck\"\n            color=\"var(--cui-success)\"\n            [disabled]=\"isSubmitButtonDisabled\"\n            class=\"button\"\n        ></button>\n    </form>\n    <button\n        cuiIconButton\n        type=\"button\"\n        icon=\"cuiIconXCircle\"\n        color=\"var(--cui-danger)\"\n        (click)=\"onCancel($event)\"\n        [disabled]=\"isDisabled()\"\n        class=\"button\"\n    ></button>\n</ng-container>\n", styles: [":host{padding-top:2px;padding-bottom:2px;display:flex;gap:4px;flex-grow:1}.form,.input{flex-grow:1}.form{display:flex;gap:4px}.input{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.button{width:28px}.button:disabled{opacity:.5}\n"] }]
         }], ctorParameters: () => [] });
 
 class CuiCreateCategoryItemComponent {
@@ -7934,11 +7934,11 @@ class CuiCreateCategoryItemComponent {
         this.canceled.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCreateCategoryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiCreateCategoryItemComponent, isStandalone: true, selector: "cui-create-category-item", inputs: { isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { created: "created", canceled: "canceled" }, ngImport: i0, template: "<cui-svg\r\n    icon=\"cuiIconFolder\"\r\n    color=\"var(--cui-base-500)\"\r\n    class=\"icon\"\r\n/>\r\n<cui-category-form\r\n    [isDisabled]=\"isDisabled()\"\r\n    (created)=\"onSubmit($event)\"\r\n    (canceled)=\"onCancel()\"\r\n/>\r\n", styles: [":host{padding-right:4px;padding-left:4px;display:flex;gap:4px;align-items:flex-start;min-height:32px}.icon{padding:6px 2px}\n"], dependencies: [{ kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "component", type: CuiCategoryFormComponent, selector: "cui-category-form", inputs: ["isDisabled", "defaultTitle"], outputs: ["created", "canceled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiCreateCategoryItemComponent, isStandalone: true, selector: "cui-create-category-item", inputs: { isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { created: "created", canceled: "canceled" }, ngImport: i0, template: "<cui-svg\n    icon=\"cuiIconFolder\"\n    color=\"var(--cui-base-500)\"\n    class=\"icon\"\n/>\n<cui-category-form\n    [isDisabled]=\"isDisabled()\"\n    (created)=\"onSubmit($event)\"\n    (canceled)=\"onCancel()\"\n/>\n", styles: [":host{padding-right:4px;padding-left:4px;display:flex;gap:4px;align-items:flex-start;min-height:32px}.icon{padding:6px 2px}\n"], dependencies: [{ kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "component", type: CuiCategoryFormComponent, selector: "cui-category-form", inputs: ["isDisabled", "defaultTitle"], outputs: ["created", "canceled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCreateCategoryItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-create-category-item', imports: [CuiSvgModule, CuiCategoryFormComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-svg\r\n    icon=\"cuiIconFolder\"\r\n    color=\"var(--cui-base-500)\"\r\n    class=\"icon\"\r\n/>\r\n<cui-category-form\r\n    [isDisabled]=\"isDisabled()\"\r\n    (created)=\"onSubmit($event)\"\r\n    (canceled)=\"onCancel()\"\r\n/>\r\n", styles: [":host{padding-right:4px;padding-left:4px;display:flex;gap:4px;align-items:flex-start;min-height:32px}.icon{padding:6px 2px}\n"] }]
+            args: [{ selector: 'cui-create-category-item', imports: [CuiSvgModule, CuiCategoryFormComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-svg\n    icon=\"cuiIconFolder\"\n    color=\"var(--cui-base-500)\"\n    class=\"icon\"\n/>\n<cui-category-form\n    [isDisabled]=\"isDisabled()\"\n    (created)=\"onSubmit($event)\"\n    (canceled)=\"onCancel()\"\n/>\n", styles: [":host{padding-right:4px;padding-left:4px;display:flex;gap:4px;align-items:flex-start;min-height:32px}.icon{padding:6px 2px}\n"] }]
         }] });
 
 class CuiCategoryItemComponent {
@@ -8037,7 +8037,7 @@ class CuiCategoryItemComponent {
         }, { allowSignalWrites: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCategoryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiCategoryItemComponent, isStandalone: true, selector: "cui-category-item", inputs: { stageStorage: { classPropertyName: "stageStorage", publicName: "stageStorage", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *cuiLet=\"category() as stage\">\r\n    <button\r\n        type=\"button\"\r\n        [style.align-items]=\"alignItems()\"\r\n        [disabled]=\"isStageCreationLoading()\"\r\n        class=\"category\"\r\n        (click)=\"onSelectCategory()\"\r\n    >\r\n        <button\r\n            type=\"button\"\r\n            ccFlexContainerDirective\r\n            class=\"category__open-close-button\"\r\n            [class.category__open-close-button_hidden]=\"isOpenCloseButtonHidden()\"\r\n            (click)=\"onToggleChildren($event)\"\r\n        >\r\n            <cui-svg\r\n                [icon]=\"openCloseButtonIcon()\"\r\n                color=\"var(--cui-base-500)\"\r\n            />\r\n        </button>\r\n        <cui-svg\r\n            [icon]=\"stageStorageIcon()\"\r\n            color=\"var(--cui-base-500)\"\r\n            class=\"icon\"\r\n        />\r\n        @if (isTitleEdit()) {\r\n            <cui-category-form\r\n                [defaultTitle]=\"stage.title\"\r\n                (created)=\"onTitleChanged($event)\"\r\n                (canceled)=\"onCancelTitleEdit()\"\r\n            />\r\n        } @else {\r\n            <span class=\"category__title\">{{ stage.title }}</span>\r\n\r\n            <button\r\n                cuiButton\r\n                type=\"button\"\r\n                appearance=\"ghost\"\r\n                size=\"xxs\"\r\n                icon=\"cuiIconEdit\"\r\n                class=\"category__add-subcategory-button\"\r\n                (click)=\"onStartTitleEdit($event)\"\r\n            ></button>\r\n            <button\r\n                cuiButton\r\n                type=\"button\"\r\n                appearance=\"ghost\"\r\n                size=\"xxs\"\r\n                icon=\"cuiIconPlus\"\r\n                class=\"category__add-subcategory-button\"\r\n                (click)=\"onStartCreatingSubcategory($event)\"\r\n            ></button>\r\n        }\r\n    </button>\r\n    <div\r\n        [hidden]=\"!areChildrenOpened()\"\r\n        class=\"list-wrapper\"\r\n    >\r\n        <cui-categories-list [stageStorages]=\"stageStorageChildren()\" />\r\n        @if (isCreateCategoryControlVisible()) {\r\n            <cui-create-category-item\r\n                class=\"create-category\"\r\n                [isDisabled]=\"isSubcategoryCreationLoading()\"\r\n                (created)=\"onCreateNewSubcategoryCategory($event)\"\r\n                (canceled)=\"onCreatingSubcategoryCanceled()\"\r\n            />\r\n        }\r\n    </div>\r\n</ng-container>\r\n", styles: [".category{display:flex;gap:4px;padding:2px 4px;width:100%;min-height:32px;border-radius:8px}@media (hover: hover){.category:hover{background:var(--cui-base-10)}}.category:active{background:var(--cui-base-10)}.category__open-close-button{padding:2px;border-radius:4px;margin:4px 0}@media (hover: hover){.category__open-close-button:hover{background:var(--cui-base-100)}}.category__open-close-button:active{background:var(--cui-base-100)}.category__open-close-button_hidden{visibility:hidden}.category__title{flex:1;text-align:start;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.category__add-subcategory-button{--cui-base-50: var(--cui-base-200)}.list-wrapper{padding-left:8px}.create-category{margin-left:24px}.icon{padding-right:2px;padding-left:2px;height:28px}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CuiButtonModule) }, { kind: "component", type: i0.forwardRef(() => CuiButtonComponent), selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "ngmodule", type: i0.forwardRef(() => CuiIconButtonModule) }, { kind: "directive", type: i0.forwardRef(() => CuiLetDirective), selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "ngmodule", type: i0.forwardRef(() => CuiSvgModule) }, { kind: "component", type: i0.forwardRef(() => CuiSvgComponent), selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "component", type: i0.forwardRef(() => CuiCategoryFormComponent), selector: "cui-category-form", inputs: ["isDisabled", "defaultTitle"], outputs: ["created", "canceled"] }, { kind: "component", type: i0.forwardRef(() => CuiCreateCategoryItemComponent), selector: "cui-create-category-item", inputs: ["isDisabled"], outputs: ["created", "canceled"] }, { kind: "component", type: i0.forwardRef(() => CuiCategoriesListComponent), selector: "cui-categories-list", inputs: ["stageStorages"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiCategoryItemComponent, isStandalone: true, selector: "cui-category-item", inputs: { stageStorage: { classPropertyName: "stageStorage", publicName: "stageStorage", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *cuiLet=\"category() as stage\">\n    <button\n        type=\"button\"\n        [style.align-items]=\"alignItems()\"\n        [disabled]=\"isStageCreationLoading()\"\n        class=\"category\"\n        (click)=\"onSelectCategory()\"\n    >\n        <button\n            type=\"button\"\n            ccFlexContainerDirective\n            class=\"category__open-close-button\"\n            [class.category__open-close-button_hidden]=\"isOpenCloseButtonHidden()\"\n            (click)=\"onToggleChildren($event)\"\n        >\n            <cui-svg\n                [icon]=\"openCloseButtonIcon()\"\n                color=\"var(--cui-base-500)\"\n            />\n        </button>\n        <cui-svg\n            [icon]=\"stageStorageIcon()\"\n            color=\"var(--cui-base-500)\"\n            class=\"icon\"\n        />\n        @if (isTitleEdit()) {\n            <cui-category-form\n                [defaultTitle]=\"stage.title\"\n                (created)=\"onTitleChanged($event)\"\n                (canceled)=\"onCancelTitleEdit()\"\n            />\n        } @else {\n            <span class=\"category__title\">{{ stage.title }}</span>\n\n            <button\n                cuiButton\n                type=\"button\"\n                appearance=\"ghost\"\n                size=\"xxs\"\n                icon=\"cuiIconEdit\"\n                class=\"category__add-subcategory-button\"\n                (click)=\"onStartTitleEdit($event)\"\n            ></button>\n            <button\n                cuiButton\n                type=\"button\"\n                appearance=\"ghost\"\n                size=\"xxs\"\n                icon=\"cuiIconPlus\"\n                class=\"category__add-subcategory-button\"\n                (click)=\"onStartCreatingSubcategory($event)\"\n            ></button>\n        }\n    </button>\n    <div\n        [hidden]=\"!areChildrenOpened()\"\n        class=\"list-wrapper\"\n    >\n        <cui-categories-list [stageStorages]=\"stageStorageChildren()\" />\n        @if (isCreateCategoryControlVisible()) {\n            <cui-create-category-item\n                class=\"create-category\"\n                [isDisabled]=\"isSubcategoryCreationLoading()\"\n                (created)=\"onCreateNewSubcategoryCategory($event)\"\n                (canceled)=\"onCreatingSubcategoryCanceled()\"\n            />\n        }\n    </div>\n</ng-container>\n", styles: [".category{display:flex;gap:4px;padding:2px 4px;width:100%;min-height:32px;border-radius:8px}@media (hover: hover){.category:hover{background:var(--cui-base-10)}}.category:active{background:var(--cui-base-10)}.category__open-close-button{padding:2px;border-radius:4px;margin:4px 0}@media (hover: hover){.category__open-close-button:hover{background:var(--cui-base-100)}}.category__open-close-button:active{background:var(--cui-base-100)}.category__open-close-button_hidden{visibility:hidden}.category__title{flex:1;text-align:start;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.category__add-subcategory-button{--cui-base-50: var(--cui-base-200)}.list-wrapper{padding-left:8px}.create-category{margin-left:24px}.icon{padding-right:2px;padding-left:2px;height:28px}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CuiButtonModule) }, { kind: "component", type: i0.forwardRef(() => CuiButtonComponent), selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "ngmodule", type: i0.forwardRef(() => CuiIconButtonModule) }, { kind: "directive", type: i0.forwardRef(() => CuiLetDirective), selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "ngmodule", type: i0.forwardRef(() => CuiSvgModule) }, { kind: "component", type: i0.forwardRef(() => CuiSvgComponent), selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "component", type: i0.forwardRef(() => CuiCategoryFormComponent), selector: "cui-category-form", inputs: ["isDisabled", "defaultTitle"], outputs: ["created", "canceled"] }, { kind: "component", type: i0.forwardRef(() => CuiCreateCategoryItemComponent), selector: "cui-create-category-item", inputs: ["isDisabled"], outputs: ["created", "canceled"] }, { kind: "component", type: i0.forwardRef(() => CuiCategoriesListComponent), selector: "cui-categories-list", inputs: ["stageStorages"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCategoryItemComponent, decorators: [{
             type: Component,
@@ -8049,7 +8049,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         CuiCategoryFormComponent,
                         CuiCreateCategoryItemComponent,
                         forwardRef(() => CuiCategoriesListComponent)
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *cuiLet=\"category() as stage\">\r\n    <button\r\n        type=\"button\"\r\n        [style.align-items]=\"alignItems()\"\r\n        [disabled]=\"isStageCreationLoading()\"\r\n        class=\"category\"\r\n        (click)=\"onSelectCategory()\"\r\n    >\r\n        <button\r\n            type=\"button\"\r\n            ccFlexContainerDirective\r\n            class=\"category__open-close-button\"\r\n            [class.category__open-close-button_hidden]=\"isOpenCloseButtonHidden()\"\r\n            (click)=\"onToggleChildren($event)\"\r\n        >\r\n            <cui-svg\r\n                [icon]=\"openCloseButtonIcon()\"\r\n                color=\"var(--cui-base-500)\"\r\n            />\r\n        </button>\r\n        <cui-svg\r\n            [icon]=\"stageStorageIcon()\"\r\n            color=\"var(--cui-base-500)\"\r\n            class=\"icon\"\r\n        />\r\n        @if (isTitleEdit()) {\r\n            <cui-category-form\r\n                [defaultTitle]=\"stage.title\"\r\n                (created)=\"onTitleChanged($event)\"\r\n                (canceled)=\"onCancelTitleEdit()\"\r\n            />\r\n        } @else {\r\n            <span class=\"category__title\">{{ stage.title }}</span>\r\n\r\n            <button\r\n                cuiButton\r\n                type=\"button\"\r\n                appearance=\"ghost\"\r\n                size=\"xxs\"\r\n                icon=\"cuiIconEdit\"\r\n                class=\"category__add-subcategory-button\"\r\n                (click)=\"onStartTitleEdit($event)\"\r\n            ></button>\r\n            <button\r\n                cuiButton\r\n                type=\"button\"\r\n                appearance=\"ghost\"\r\n                size=\"xxs\"\r\n                icon=\"cuiIconPlus\"\r\n                class=\"category__add-subcategory-button\"\r\n                (click)=\"onStartCreatingSubcategory($event)\"\r\n            ></button>\r\n        }\r\n    </button>\r\n    <div\r\n        [hidden]=\"!areChildrenOpened()\"\r\n        class=\"list-wrapper\"\r\n    >\r\n        <cui-categories-list [stageStorages]=\"stageStorageChildren()\" />\r\n        @if (isCreateCategoryControlVisible()) {\r\n            <cui-create-category-item\r\n                class=\"create-category\"\r\n                [isDisabled]=\"isSubcategoryCreationLoading()\"\r\n                (created)=\"onCreateNewSubcategoryCategory($event)\"\r\n                (canceled)=\"onCreatingSubcategoryCanceled()\"\r\n            />\r\n        }\r\n    </div>\r\n</ng-container>\r\n", styles: [".category{display:flex;gap:4px;padding:2px 4px;width:100%;min-height:32px;border-radius:8px}@media (hover: hover){.category:hover{background:var(--cui-base-10)}}.category:active{background:var(--cui-base-10)}.category__open-close-button{padding:2px;border-radius:4px;margin:4px 0}@media (hover: hover){.category__open-close-button:hover{background:var(--cui-base-100)}}.category__open-close-button:active{background:var(--cui-base-100)}.category__open-close-button_hidden{visibility:hidden}.category__title{flex:1;text-align:start;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.category__add-subcategory-button{--cui-base-50: var(--cui-base-200)}.list-wrapper{padding-left:8px}.create-category{margin-left:24px}.icon{padding-right:2px;padding-left:2px;height:28px}\n"] }]
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *cuiLet=\"category() as stage\">\n    <button\n        type=\"button\"\n        [style.align-items]=\"alignItems()\"\n        [disabled]=\"isStageCreationLoading()\"\n        class=\"category\"\n        (click)=\"onSelectCategory()\"\n    >\n        <button\n            type=\"button\"\n            ccFlexContainerDirective\n            class=\"category__open-close-button\"\n            [class.category__open-close-button_hidden]=\"isOpenCloseButtonHidden()\"\n            (click)=\"onToggleChildren($event)\"\n        >\n            <cui-svg\n                [icon]=\"openCloseButtonIcon()\"\n                color=\"var(--cui-base-500)\"\n            />\n        </button>\n        <cui-svg\n            [icon]=\"stageStorageIcon()\"\n            color=\"var(--cui-base-500)\"\n            class=\"icon\"\n        />\n        @if (isTitleEdit()) {\n            <cui-category-form\n                [defaultTitle]=\"stage.title\"\n                (created)=\"onTitleChanged($event)\"\n                (canceled)=\"onCancelTitleEdit()\"\n            />\n        } @else {\n            <span class=\"category__title\">{{ stage.title }}</span>\n\n            <button\n                cuiButton\n                type=\"button\"\n                appearance=\"ghost\"\n                size=\"xxs\"\n                icon=\"cuiIconEdit\"\n                class=\"category__add-subcategory-button\"\n                (click)=\"onStartTitleEdit($event)\"\n            ></button>\n            <button\n                cuiButton\n                type=\"button\"\n                appearance=\"ghost\"\n                size=\"xxs\"\n                icon=\"cuiIconPlus\"\n                class=\"category__add-subcategory-button\"\n                (click)=\"onStartCreatingSubcategory($event)\"\n            ></button>\n        }\n    </button>\n    <div\n        [hidden]=\"!areChildrenOpened()\"\n        class=\"list-wrapper\"\n    >\n        <cui-categories-list [stageStorages]=\"stageStorageChildren()\" />\n        @if (isCreateCategoryControlVisible()) {\n            <cui-create-category-item\n                class=\"create-category\"\n                [isDisabled]=\"isSubcategoryCreationLoading()\"\n                (created)=\"onCreateNewSubcategoryCategory($event)\"\n                (canceled)=\"onCreatingSubcategoryCanceled()\"\n            />\n        }\n    </div>\n</ng-container>\n", styles: [".category{display:flex;gap:4px;padding:2px 4px;width:100%;min-height:32px;border-radius:8px}@media (hover: hover){.category:hover{background:var(--cui-base-10)}}.category:active{background:var(--cui-base-10)}.category__open-close-button{padding:2px;border-radius:4px;margin:4px 0}@media (hover: hover){.category__open-close-button:hover{background:var(--cui-base-100)}}.category__open-close-button:active{background:var(--cui-base-100)}.category__open-close-button_hidden{visibility:hidden}.category__title{flex:1;text-align:start;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.category__add-subcategory-button{--cui-base-50: var(--cui-base-200)}.list-wrapper{padding-left:8px}.create-category{margin-left:24px}.icon{padding-right:2px;padding-left:2px;height:28px}\n"] }]
         }], ctorParameters: () => [] });
 
 class CuiCategoriesListComponent {
@@ -8057,11 +8057,11 @@ class CuiCategoriesListComponent {
         this.stageStorages = input.required();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCategoriesListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiCategoriesListComponent, isStandalone: true, selector: "cui-categories-list", inputs: { stageStorages: { classPropertyName: "stageStorages", publicName: "stageStorages", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (stageStorage of stageStorages(); track stageStorage.id) {\r\n    <cui-category-item [stageStorage]=\"stageStorage\" />\r\n}\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CuiIconButtonModule) }, { kind: "ngmodule", type: i0.forwardRef(() => CuiSvgModule) }, { kind: "component", type: i0.forwardRef(() => CuiCategoryItemComponent), selector: "cui-category-item", inputs: ["stageStorage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiCategoriesListComponent, isStandalone: true, selector: "cui-categories-list", inputs: { stageStorages: { classPropertyName: "stageStorages", publicName: "stageStorages", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (stageStorage of stageStorages(); track stageStorage.id) {\n    <cui-category-item [stageStorage]=\"stageStorage\" />\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CuiIconButtonModule) }, { kind: "ngmodule", type: i0.forwardRef(() => CuiSvgModule) }, { kind: "component", type: i0.forwardRef(() => CuiCategoryItemComponent), selector: "cui-category-item", inputs: ["stageStorage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCategoriesListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-categories-list', imports: [CuiIconButtonModule, CuiSvgModule, forwardRef(() => CuiCategoryItemComponent)], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (stageStorage of stageStorages(); track stageStorage.id) {\r\n    <cui-category-item [stageStorage]=\"stageStorage\" />\r\n}\r\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'cui-categories-list', imports: [CuiIconButtonModule, CuiSvgModule, forwardRef(() => CuiCategoryItemComponent)], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (stageStorage of stageStorages(); track stageStorage.id) {\n    <cui-category-item [stageStorage]=\"stageStorage\" />\n}\n", styles: [":host{display:block}\n"] }]
         }] });
 
 class CuiCategoriesComponent {
@@ -8280,7 +8280,7 @@ class CuiCheckListBlockListItemActionCardComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCheckListBlockListItemActionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiCheckListBlockListItemActionCardComponent, isStandalone: true, selector: "cui-checklist-block-list-item-action-card", inputs: { purposeType: { classPropertyName: "purposeType", publicName: "purposeType", isSignal: true, isRequired: false, transformFunction: null }, isConsiderationNeeded: { classPropertyName: "isConsiderationNeeded", publicName: "isConsiderationNeeded", isSignal: true, isRequired: false, transformFunction: null }, actionInfo: { classPropertyName: "actionInfo", publicName: "actionInfo", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { consideredCorrectChanged: "consideredCorrectChanged", checkListActionChanged: "checkListActionChanged" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <div\r\n        class=\"card\"\r\n        [formGroup]=\"actionForm\"\r\n    >\r\n        <div class=\"title-container\">\r\n            <span class=\"title\">{{ actionInfo().title }}</span>\r\n            @if (isConsiderationNeeded()) {\r\n                <label\r\n                    cuiLabel\r\n                    class=\"title__input\"\r\n                >\r\n                    <input\r\n                        cuiRadio\r\n                        type=\"radio\"\r\n                        [checked]=\"actionInfo().considerCorrect\"\r\n                        [formControl]=\"isConsideredCorrectControl\"\r\n                        [value]=\"true\"\r\n                    />\r\n                    {{ t('CONSIDER_CORRECT') }}\r\n                </label>\r\n            }\r\n        </div>\r\n        <div class=\"blocks\">\r\n            <div\r\n                class=\"block-card\"\r\n                [formGroup]=\"photoGroup\"\r\n            >\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiCheckbox\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isEnable\"\r\n                    />\r\n                    {{ t('PHOTO') }}\r\n                </label>\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiToggle\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isRequired\"\r\n                    />\r\n                    {{ t('REQUIRED') }}\r\n                </label>\r\n            </div>\r\n            <div\r\n                class=\"block-card\"\r\n                [formGroup]=\"commentGroup\"\r\n            >\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiCheckbox\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isEnable\"\r\n                    />\r\n                    {{ t('COMMENT') }}\r\n                </label>\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiToggle\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isRequired\"\r\n                    />\r\n                    {{ t('REQUIRED') }}\r\n                </label>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [":host{flex:1 1 240px;min-width:240px}.card{padding:11px;display:flex;flex-direction:column;gap:10px;border:1px solid var(--cui-base-200);border-radius:8px}.title-container{display:flex;flex-direction:row;gap:8px;justify-content:space-between;align-items:center}.title{font-weight:500;font-size:14px;line-height:20px}.title__input{font-weight:400;font-size:14px;line-height:20px}.blocks{display:flex;flex-direction:column;gap:8px}.block-card{padding:13px 11px;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--cui-base-200);border-radius:8px}.block-card_multiple-lines{flex-direction:column;align-items:unset}.block-card__checkboxes-container{padding:13px 8px;display:flex;gap:12px}\n"], dependencies: [{ kind: "ngmodule", type: CuiCheckboxModule }, { kind: "component", type: CuiCheckboxComponent, selector: "input[type=\"checkbox\"][cuiCheckbox]" }, { kind: "ngmodule", type: CuiFormFieldModule }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "component", type: CuiLabelComponent, selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "ngmodule", type: CuiRadioModule }, { kind: "component", type: CuiRadioComponent, selector: "input[type=\"radio\"][cuiRadio]" }, { kind: "ngmodule", type: CuiSelectModule }, { kind: "ngmodule", type: CuiTextareaModule }, { kind: "ngmodule", type: CuiTextFieldControllerModule }, { kind: "ngmodule", type: CuiToggleModule }, { kind: "component", type: CuiToggleComponent, selector: "input[type=\"checkbox\"][cuiToggle]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiCheckListBlockListItemActionCardComponent, isStandalone: true, selector: "cui-checklist-block-list-item-action-card", inputs: { purposeType: { classPropertyName: "purposeType", publicName: "purposeType", isSignal: true, isRequired: false, transformFunction: null }, isConsiderationNeeded: { classPropertyName: "isConsiderationNeeded", publicName: "isConsiderationNeeded", isSignal: true, isRequired: false, transformFunction: null }, actionInfo: { classPropertyName: "actionInfo", publicName: "actionInfo", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { consideredCorrectChanged: "consideredCorrectChanged", checkListActionChanged: "checkListActionChanged" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <div\n        class=\"card\"\n        [formGroup]=\"actionForm\"\n    >\n        <div class=\"title-container\">\n            <span class=\"title\">{{ actionInfo().title }}</span>\n            @if (isConsiderationNeeded()) {\n                <label\n                    cuiLabel\n                    class=\"title__input\"\n                >\n                    <input\n                        cuiRadio\n                        type=\"radio\"\n                        [checked]=\"actionInfo().considerCorrect\"\n                        [formControl]=\"isConsideredCorrectControl\"\n                        [value]=\"true\"\n                    />\n                    {{ t('CONSIDER_CORRECT') }}\n                </label>\n            }\n        </div>\n        <div class=\"blocks\">\n            <div\n                class=\"block-card\"\n                [formGroup]=\"photoGroup\"\n            >\n                <label cuiLabel>\n                    <input\n                        cuiCheckbox\n                        type=\"checkbox\"\n                        formControlName=\"isEnable\"\n                    />\n                    {{ t('PHOTO') }}\n                </label>\n                <label cuiLabel>\n                    <input\n                        cuiToggle\n                        type=\"checkbox\"\n                        formControlName=\"isRequired\"\n                    />\n                    {{ t('REQUIRED') }}\n                </label>\n            </div>\n            <div\n                class=\"block-card\"\n                [formGroup]=\"commentGroup\"\n            >\n                <label cuiLabel>\n                    <input\n                        cuiCheckbox\n                        type=\"checkbox\"\n                        formControlName=\"isEnable\"\n                    />\n                    {{ t('COMMENT') }}\n                </label>\n                <label cuiLabel>\n                    <input\n                        cuiToggle\n                        type=\"checkbox\"\n                        formControlName=\"isRequired\"\n                    />\n                    {{ t('REQUIRED') }}\n                </label>\n            </div>\n        </div>\n    </div>\n</ng-container>\n", styles: [":host{flex:1 1 240px;min-width:240px}.card{padding:11px;display:flex;flex-direction:column;gap:10px;border:1px solid var(--cui-base-200);border-radius:8px}.title-container{display:flex;flex-direction:row;gap:8px;justify-content:space-between;align-items:center}.title{font-weight:500;font-size:14px;line-height:20px}.title__input{font-weight:400;font-size:14px;line-height:20px}.blocks{display:flex;flex-direction:column;gap:8px}.block-card{padding:13px 11px;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--cui-base-200);border-radius:8px}.block-card_multiple-lines{flex-direction:column;align-items:unset}.block-card__checkboxes-container{padding:13px 8px;display:flex;gap:12px}\n"], dependencies: [{ kind: "ngmodule", type: CuiCheckboxModule }, { kind: "component", type: CuiCheckboxComponent, selector: "input[type=\"checkbox\"][cuiCheckbox]" }, { kind: "ngmodule", type: CuiFormFieldModule }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "component", type: CuiLabelComponent, selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "ngmodule", type: CuiRadioModule }, { kind: "component", type: CuiRadioComponent, selector: "input[type=\"radio\"][cuiRadio]" }, { kind: "ngmodule", type: CuiSelectModule }, { kind: "ngmodule", type: CuiTextareaModule }, { kind: "ngmodule", type: CuiTextFieldControllerModule }, { kind: "ngmodule", type: CuiToggleModule }, { kind: "component", type: CuiToggleComponent, selector: "input[type=\"checkbox\"][cuiToggle]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCheckListBlockListItemActionCardComponent, decorators: [{
             type: Component,
@@ -8295,7 +8295,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         CuiToggleModule,
                         ReactiveFormsModule,
                         TranslocoDirective
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n    <div\r\n        class=\"card\"\r\n        [formGroup]=\"actionForm\"\r\n    >\r\n        <div class=\"title-container\">\r\n            <span class=\"title\">{{ actionInfo().title }}</span>\r\n            @if (isConsiderationNeeded()) {\r\n                <label\r\n                    cuiLabel\r\n                    class=\"title__input\"\r\n                >\r\n                    <input\r\n                        cuiRadio\r\n                        type=\"radio\"\r\n                        [checked]=\"actionInfo().considerCorrect\"\r\n                        [formControl]=\"isConsideredCorrectControl\"\r\n                        [value]=\"true\"\r\n                    />\r\n                    {{ t('CONSIDER_CORRECT') }}\r\n                </label>\r\n            }\r\n        </div>\r\n        <div class=\"blocks\">\r\n            <div\r\n                class=\"block-card\"\r\n                [formGroup]=\"photoGroup\"\r\n            >\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiCheckbox\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isEnable\"\r\n                    />\r\n                    {{ t('PHOTO') }}\r\n                </label>\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiToggle\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isRequired\"\r\n                    />\r\n                    {{ t('REQUIRED') }}\r\n                </label>\r\n            </div>\r\n            <div\r\n                class=\"block-card\"\r\n                [formGroup]=\"commentGroup\"\r\n            >\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiCheckbox\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isEnable\"\r\n                    />\r\n                    {{ t('COMMENT') }}\r\n                </label>\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiToggle\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isRequired\"\r\n                    />\r\n                    {{ t('REQUIRED') }}\r\n                </label>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [":host{flex:1 1 240px;min-width:240px}.card{padding:11px;display:flex;flex-direction:column;gap:10px;border:1px solid var(--cui-base-200);border-radius:8px}.title-container{display:flex;flex-direction:row;gap:8px;justify-content:space-between;align-items:center}.title{font-weight:500;font-size:14px;line-height:20px}.title__input{font-weight:400;font-size:14px;line-height:20px}.blocks{display:flex;flex-direction:column;gap:8px}.block-card{padding:13px 11px;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--cui-base-200);border-radius:8px}.block-card_multiple-lines{flex-direction:column;align-items:unset}.block-card__checkboxes-container{padding:13px 8px;display:flex;gap:12px}\n"] }]
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    <div\n        class=\"card\"\n        [formGroup]=\"actionForm\"\n    >\n        <div class=\"title-container\">\n            <span class=\"title\">{{ actionInfo().title }}</span>\n            @if (isConsiderationNeeded()) {\n                <label\n                    cuiLabel\n                    class=\"title__input\"\n                >\n                    <input\n                        cuiRadio\n                        type=\"radio\"\n                        [checked]=\"actionInfo().considerCorrect\"\n                        [formControl]=\"isConsideredCorrectControl\"\n                        [value]=\"true\"\n                    />\n                    {{ t('CONSIDER_CORRECT') }}\n                </label>\n            }\n        </div>\n        <div class=\"blocks\">\n            <div\n                class=\"block-card\"\n                [formGroup]=\"photoGroup\"\n            >\n                <label cuiLabel>\n                    <input\n                        cuiCheckbox\n                        type=\"checkbox\"\n                        formControlName=\"isEnable\"\n                    />\n                    {{ t('PHOTO') }}\n                </label>\n                <label cuiLabel>\n                    <input\n                        cuiToggle\n                        type=\"checkbox\"\n                        formControlName=\"isRequired\"\n                    />\n                    {{ t('REQUIRED') }}\n                </label>\n            </div>\n            <div\n                class=\"block-card\"\n                [formGroup]=\"commentGroup\"\n            >\n                <label cuiLabel>\n                    <input\n                        cuiCheckbox\n                        type=\"checkbox\"\n                        formControlName=\"isEnable\"\n                    />\n                    {{ t('COMMENT') }}\n                </label>\n                <label cuiLabel>\n                    <input\n                        cuiToggle\n                        type=\"checkbox\"\n                        formControlName=\"isRequired\"\n                    />\n                    {{ t('REQUIRED') }}\n                </label>\n            </div>\n        </div>\n    </div>\n</ng-container>\n", styles: [":host{flex:1 1 240px;min-width:240px}.card{padding:11px;display:flex;flex-direction:column;gap:10px;border:1px solid var(--cui-base-200);border-radius:8px}.title-container{display:flex;flex-direction:row;gap:8px;justify-content:space-between;align-items:center}.title{font-weight:500;font-size:14px;line-height:20px}.title__input{font-weight:400;font-size:14px;line-height:20px}.blocks{display:flex;flex-direction:column;gap:8px}.block-card{padding:13px 11px;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--cui-base-200);border-radius:8px}.block-card_multiple-lines{flex-direction:column;align-items:unset}.block-card__checkboxes-container{padding:13px 8px;display:flex;gap:12px}\n"] }]
         }], ctorParameters: () => [] });
 
 class CuiCheckListBlockListItemActionWithVerificationComponent {
@@ -8328,11 +8328,11 @@ class CuiCheckListBlockListItemActionWithVerificationComponent {
             .subscribe((checkListItem) => this.checkListBlockService.updateCheckListItem(checkListItem));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCheckListBlockListItemActionWithVerificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiCheckListBlockListItemActionWithVerificationComponent, isStandalone: true, selector: "cui-checklist-block-list-item-action-with-verification", inputs: { checkListItem: { classPropertyName: "checkListItem", publicName: "checkListItem", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <ng-container *cuiLet=\"checkListItem().content as checkListItemContent\">\r\n        <div class=\"action\">\r\n            <div class=\"action__header action__assignee-header\">\r\n                {{ t('CONDITIONAL_LOGIC_FOR_ASSIGNEE') | uppercase }}\r\n            </div>\r\n            <div class=\"action__content\">\r\n                <div class=\"cards-container\">\r\n                    <cui-checklist-block-list-item-action-card\r\n                        [purposeType]=\"'ASSIGN'\"\r\n                        [actionInfo]=\"checkListItemContent.actionsAssignee![0]\"\r\n                        [isConsiderationNeeded]=\"true\"\r\n                        (consideredCorrectChanged)=\"onConsiderCorrectChanged($event, 'ASSIGN')\"\r\n                        (checkListActionChanged)=\"\r\n                            onCheckListActionChanged($event, checkListItemContent.actionsAssignee![0].id, 'ASSIGN')\r\n                        \"\r\n                    />\r\n                    <cui-checklist-block-list-item-action-card\r\n                        [purposeType]=\"'ASSIGN'\"\r\n                        [actionInfo]=\"checkListItemContent.actionsAssignee![1]\"\r\n                        [isConsiderationNeeded]=\"true\"\r\n                        (consideredCorrectChanged)=\"onConsiderCorrectChanged($event, 'ASSIGN')\"\r\n                        (checkListActionChanged)=\"\r\n                            onCheckListActionChanged($event, checkListItemContent.actionsAssignee![1].id, 'ASSIGN')\r\n                        \"\r\n                    />\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"action\">\r\n            <div class=\"action__header action__approver-header\">\r\n                {{ t('CONDITIONAL_LOGIC_FOR_APPROVER') | uppercase }}\r\n            </div>\r\n            <div class=\"action__content\">\r\n                <div class=\"cards-container\">\r\n                    <cui-checklist-block-list-item-action-card\r\n                        [purposeType]=\"'APPROVE'\"\r\n                        [actionInfo]=\"checkListItemContent.actionsApprove![0]\"\r\n                        (consideredCorrectChanged)=\"onConsiderCorrectChanged($event, 'APPROVE')\"\r\n                        (checkListActionChanged)=\"\r\n                            onCheckListActionChanged($event, checkListItemContent.actionsApprove![0].id, 'APPROVE')\r\n                        \"\r\n                    />\r\n                    <cui-checklist-block-list-item-action-card\r\n                        [purposeType]=\"'APPROVE'\"\r\n                        [actionInfo]=\"checkListItemContent.actionsApprove![1]\"\r\n                        (consideredCorrectChanged)=\"onConsiderCorrectChanged($event, 'APPROVE')\"\r\n                        (checkListActionChanged)=\"\r\n                            onCheckListActionChanged($event, checkListItemContent.actionsApprove![1].id, 'APPROVE')\r\n                        \"\r\n                    />\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</ng-container>\r\n", styles: [":host{padding-right:15px;padding-left:15px;padding-bottom:15px;display:flex;flex-direction:column;gap:16px;border-radius:inherit}.action{display:flex;flex-direction:column;border:1px solid var(--cui-base-200);border-radius:8px}.action__content{padding:15px;display:flex;flex-direction:column;border-radius:8px;background:var(--cui-base-0);gap:16px}.action__header{font-weight:400;font-size:12px;line-height:14px;padding:15px 19px 15.5px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--cui-base-900);border-bottom:.5px solid var(--cui-base-200);border-radius:8px 8px 0 0}.action__assignee-header{background:var(--cui-badge-warning-bg)}.action__approver-header{background:var(--cui-badge-violet-bg)}.action__estimated-time{display:flex;flex-direction:column;gap:4px}.action__input{padding:11px 13px;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-gray-10);outline:none}.action__input:focus-within{box-shadow:0 0 0 2px var(--cui-blue-100);border-color:var(--cui-blue-600)}.cards-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-items:center;gap:16px}\n"], dependencies: [{ kind: "component", type: CuiCheckListBlockListItemActionCardComponent, selector: "cui-checklist-block-list-item-action-card", inputs: ["purposeType", "isConsiderationNeeded", "actionInfo"], outputs: ["consideredCorrectChanged", "checkListActionChanged"] }, { kind: "directive", type: CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiCheckListBlockListItemActionWithVerificationComponent, isStandalone: true, selector: "cui-checklist-block-list-item-action-with-verification", inputs: { checkListItem: { classPropertyName: "checkListItem", publicName: "checkListItem", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <ng-container *cuiLet=\"checkListItem().content as checkListItemContent\">\n        <div class=\"action\">\n            <div class=\"action__header action__assignee-header\">\n                {{ t('CONDITIONAL_LOGIC_FOR_ASSIGNEE') | uppercase }}\n            </div>\n            <div class=\"action__content\">\n                <div class=\"cards-container\">\n                    <cui-checklist-block-list-item-action-card\n                        [purposeType]=\"'ASSIGN'\"\n                        [actionInfo]=\"checkListItemContent.actionsAssignee![0]\"\n                        [isConsiderationNeeded]=\"true\"\n                        (consideredCorrectChanged)=\"onConsiderCorrectChanged($event, 'ASSIGN')\"\n                        (checkListActionChanged)=\"\n                            onCheckListActionChanged($event, checkListItemContent.actionsAssignee![0].id, 'ASSIGN')\n                        \"\n                    />\n                    <cui-checklist-block-list-item-action-card\n                        [purposeType]=\"'ASSIGN'\"\n                        [actionInfo]=\"checkListItemContent.actionsAssignee![1]\"\n                        [isConsiderationNeeded]=\"true\"\n                        (consideredCorrectChanged)=\"onConsiderCorrectChanged($event, 'ASSIGN')\"\n                        (checkListActionChanged)=\"\n                            onCheckListActionChanged($event, checkListItemContent.actionsAssignee![1].id, 'ASSIGN')\n                        \"\n                    />\n                </div>\n            </div>\n        </div>\n        <div class=\"action\">\n            <div class=\"action__header action__approver-header\">\n                {{ t('CONDITIONAL_LOGIC_FOR_APPROVER') | uppercase }}\n            </div>\n            <div class=\"action__content\">\n                <div class=\"cards-container\">\n                    <cui-checklist-block-list-item-action-card\n                        [purposeType]=\"'APPROVE'\"\n                        [actionInfo]=\"checkListItemContent.actionsApprove![0]\"\n                        (consideredCorrectChanged)=\"onConsiderCorrectChanged($event, 'APPROVE')\"\n                        (checkListActionChanged)=\"\n                            onCheckListActionChanged($event, checkListItemContent.actionsApprove![0].id, 'APPROVE')\n                        \"\n                    />\n                    <cui-checklist-block-list-item-action-card\n                        [purposeType]=\"'APPROVE'\"\n                        [actionInfo]=\"checkListItemContent.actionsApprove![1]\"\n                        (consideredCorrectChanged)=\"onConsiderCorrectChanged($event, 'APPROVE')\"\n                        (checkListActionChanged)=\"\n                            onCheckListActionChanged($event, checkListItemContent.actionsApprove![1].id, 'APPROVE')\n                        \"\n                    />\n                </div>\n            </div>\n        </div>\n    </ng-container>\n</ng-container>\n", styles: [":host{padding-right:15px;padding-left:15px;padding-bottom:15px;display:flex;flex-direction:column;gap:16px;border-radius:inherit}.action{display:flex;flex-direction:column;border:1px solid var(--cui-base-200);border-radius:8px}.action__content{padding:15px;display:flex;flex-direction:column;border-radius:8px;background:var(--cui-base-0);gap:16px}.action__header{font-weight:400;font-size:12px;line-height:14px;padding:15px 19px 15.5px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--cui-base-900);border-bottom:.5px solid var(--cui-base-200);border-radius:8px 8px 0 0}.action__assignee-header{background:var(--cui-badge-warning-bg)}.action__approver-header{background:var(--cui-badge-violet-bg)}.action__estimated-time{display:flex;flex-direction:column;gap:4px}.action__input{padding:11px 13px;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-gray-10);outline:none}.action__input:focus-within{box-shadow:0 0 0 2px var(--cui-blue-100);border-color:var(--cui-blue-600)}.cards-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-items:center;gap:16px}\n"], dependencies: [{ kind: "component", type: CuiCheckListBlockListItemActionCardComponent, selector: "cui-checklist-block-list-item-action-card", inputs: ["purposeType", "isConsiderationNeeded", "actionInfo"], outputs: ["consideredCorrectChanged", "checkListActionChanged"] }, { kind: "directive", type: CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCheckListBlockListItemActionWithVerificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-checklist-block-list-item-action-with-verification', imports: [CuiCheckListBlockListItemActionCardComponent, CuiLetDirective, TranslocoDirective, UpperCasePipe], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n    <ng-container *cuiLet=\"checkListItem().content as checkListItemContent\">\r\n        <div class=\"action\">\r\n            <div class=\"action__header action__assignee-header\">\r\n                {{ t('CONDITIONAL_LOGIC_FOR_ASSIGNEE') | uppercase }}\r\n            </div>\r\n            <div class=\"action__content\">\r\n                <div class=\"cards-container\">\r\n                    <cui-checklist-block-list-item-action-card\r\n                        [purposeType]=\"'ASSIGN'\"\r\n                        [actionInfo]=\"checkListItemContent.actionsAssignee![0]\"\r\n                        [isConsiderationNeeded]=\"true\"\r\n                        (consideredCorrectChanged)=\"onConsiderCorrectChanged($event, 'ASSIGN')\"\r\n                        (checkListActionChanged)=\"\r\n                            onCheckListActionChanged($event, checkListItemContent.actionsAssignee![0].id, 'ASSIGN')\r\n                        \"\r\n                    />\r\n                    <cui-checklist-block-list-item-action-card\r\n                        [purposeType]=\"'ASSIGN'\"\r\n                        [actionInfo]=\"checkListItemContent.actionsAssignee![1]\"\r\n                        [isConsiderationNeeded]=\"true\"\r\n                        (consideredCorrectChanged)=\"onConsiderCorrectChanged($event, 'ASSIGN')\"\r\n                        (checkListActionChanged)=\"\r\n                            onCheckListActionChanged($event, checkListItemContent.actionsAssignee![1].id, 'ASSIGN')\r\n                        \"\r\n                    />\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"action\">\r\n            <div class=\"action__header action__approver-header\">\r\n                {{ t('CONDITIONAL_LOGIC_FOR_APPROVER') | uppercase }}\r\n            </div>\r\n            <div class=\"action__content\">\r\n                <div class=\"cards-container\">\r\n                    <cui-checklist-block-list-item-action-card\r\n                        [purposeType]=\"'APPROVE'\"\r\n                        [actionInfo]=\"checkListItemContent.actionsApprove![0]\"\r\n                        (consideredCorrectChanged)=\"onConsiderCorrectChanged($event, 'APPROVE')\"\r\n                        (checkListActionChanged)=\"\r\n                            onCheckListActionChanged($event, checkListItemContent.actionsApprove![0].id, 'APPROVE')\r\n                        \"\r\n                    />\r\n                    <cui-checklist-block-list-item-action-card\r\n                        [purposeType]=\"'APPROVE'\"\r\n                        [actionInfo]=\"checkListItemContent.actionsApprove![1]\"\r\n                        (consideredCorrectChanged)=\"onConsiderCorrectChanged($event, 'APPROVE')\"\r\n                        (checkListActionChanged)=\"\r\n                            onCheckListActionChanged($event, checkListItemContent.actionsApprove![1].id, 'APPROVE')\r\n                        \"\r\n                    />\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</ng-container>\r\n", styles: [":host{padding-right:15px;padding-left:15px;padding-bottom:15px;display:flex;flex-direction:column;gap:16px;border-radius:inherit}.action{display:flex;flex-direction:column;border:1px solid var(--cui-base-200);border-radius:8px}.action__content{padding:15px;display:flex;flex-direction:column;border-radius:8px;background:var(--cui-base-0);gap:16px}.action__header{font-weight:400;font-size:12px;line-height:14px;padding:15px 19px 15.5px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--cui-base-900);border-bottom:.5px solid var(--cui-base-200);border-radius:8px 8px 0 0}.action__assignee-header{background:var(--cui-badge-warning-bg)}.action__approver-header{background:var(--cui-badge-violet-bg)}.action__estimated-time{display:flex;flex-direction:column;gap:4px}.action__input{padding:11px 13px;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-gray-10);outline:none}.action__input:focus-within{box-shadow:0 0 0 2px var(--cui-blue-100);border-color:var(--cui-blue-600)}.cards-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-items:center;gap:16px}\n"] }]
+            args: [{ selector: 'cui-checklist-block-list-item-action-with-verification', imports: [CuiCheckListBlockListItemActionCardComponent, CuiLetDirective, TranslocoDirective, UpperCasePipe], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    <ng-container *cuiLet=\"checkListItem().content as checkListItemContent\">\n        <div class=\"action\">\n            <div class=\"action__header action__assignee-header\">\n                {{ t('CONDITIONAL_LOGIC_FOR_ASSIGNEE') | uppercase }}\n            </div>\n            <div class=\"action__content\">\n                <div class=\"cards-container\">\n                    <cui-checklist-block-list-item-action-card\n                        [purposeType]=\"'ASSIGN'\"\n                        [actionInfo]=\"checkListItemContent.actionsAssignee![0]\"\n                        [isConsiderationNeeded]=\"true\"\n                        (consideredCorrectChanged)=\"onConsiderCorrectChanged($event, 'ASSIGN')\"\n                        (checkListActionChanged)=\"\n                            onCheckListActionChanged($event, checkListItemContent.actionsAssignee![0].id, 'ASSIGN')\n                        \"\n                    />\n                    <cui-checklist-block-list-item-action-card\n                        [purposeType]=\"'ASSIGN'\"\n                        [actionInfo]=\"checkListItemContent.actionsAssignee![1]\"\n                        [isConsiderationNeeded]=\"true\"\n                        (consideredCorrectChanged)=\"onConsiderCorrectChanged($event, 'ASSIGN')\"\n                        (checkListActionChanged)=\"\n                            onCheckListActionChanged($event, checkListItemContent.actionsAssignee![1].id, 'ASSIGN')\n                        \"\n                    />\n                </div>\n            </div>\n        </div>\n        <div class=\"action\">\n            <div class=\"action__header action__approver-header\">\n                {{ t('CONDITIONAL_LOGIC_FOR_APPROVER') | uppercase }}\n            </div>\n            <div class=\"action__content\">\n                <div class=\"cards-container\">\n                    <cui-checklist-block-list-item-action-card\n                        [purposeType]=\"'APPROVE'\"\n                        [actionInfo]=\"checkListItemContent.actionsApprove![0]\"\n                        (consideredCorrectChanged)=\"onConsiderCorrectChanged($event, 'APPROVE')\"\n                        (checkListActionChanged)=\"\n                            onCheckListActionChanged($event, checkListItemContent.actionsApprove![0].id, 'APPROVE')\n                        \"\n                    />\n                    <cui-checklist-block-list-item-action-card\n                        [purposeType]=\"'APPROVE'\"\n                        [actionInfo]=\"checkListItemContent.actionsApprove![1]\"\n                        (consideredCorrectChanged)=\"onConsiderCorrectChanged($event, 'APPROVE')\"\n                        (checkListActionChanged)=\"\n                            onCheckListActionChanged($event, checkListItemContent.actionsApprove![1].id, 'APPROVE')\n                        \"\n                    />\n                </div>\n            </div>\n        </div>\n    </ng-container>\n</ng-container>\n", styles: [":host{padding-right:15px;padding-left:15px;padding-bottom:15px;display:flex;flex-direction:column;gap:16px;border-radius:inherit}.action{display:flex;flex-direction:column;border:1px solid var(--cui-base-200);border-radius:8px}.action__content{padding:15px;display:flex;flex-direction:column;border-radius:8px;background:var(--cui-base-0);gap:16px}.action__header{font-weight:400;font-size:12px;line-height:14px;padding:15px 19px 15.5px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--cui-base-900);border-bottom:.5px solid var(--cui-base-200);border-radius:8px 8px 0 0}.action__assignee-header{background:var(--cui-badge-warning-bg)}.action__approver-header{background:var(--cui-badge-violet-bg)}.action__estimated-time{display:flex;flex-direction:column;gap:4px}.action__input{padding:11px 13px;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-gray-10);outline:none}.action__input:focus-within{box-shadow:0 0 0 2px var(--cui-blue-100);border-color:var(--cui-blue-600)}.cards-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-items:center;gap:16px}\n"] }]
         }] });
 
 class CuiCheckListBlockListItemActionWithoutVerificationComponent {
@@ -8355,11 +8355,11 @@ class CuiCheckListBlockListItemActionWithoutVerificationComponent {
             .subscribe((checkListItem) => this.checkListBlockService.updateCheckListItem(checkListItem));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCheckListBlockListItemActionWithoutVerificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiCheckListBlockListItemActionWithoutVerificationComponent, isStandalone: true, selector: "cui-checklist-block-list-item-action-without-verification", inputs: { checkListItem: { classPropertyName: "checkListItem", publicName: "checkListItem", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <ng-container *cuiLet=\"checkListItem().content as checkListItemContent\">\r\n        <div class=\"action\">\r\n            <div class=\"action__header\">\r\n                {{ t('CONDITIONAL_LOGIC') | uppercase }}\r\n            </div>\r\n            <div class=\"action__content\">\r\n                <div class=\"cards-container\">\r\n                    <cui-checklist-block-list-item-action-card\r\n                        [actionInfo]=\"checkListItemContent.actionsAssignee![0]\"\r\n                        (checkListActionChanged)=\"\r\n                            onCheckListActionChanged($event, checkListItemContent.actionsAssignee![0].id)\r\n                        \"\r\n                    />\r\n                    <cui-checklist-block-list-item-action-card\r\n                        [actionInfo]=\"checkListItemContent.actionsAssignee![1]\"\r\n                        (checkListActionChanged)=\"\r\n                            onCheckListActionChanged($event, checkListItemContent.actionsAssignee![1].id)\r\n                        \"\r\n                    />\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</ng-container>\r\n", styles: [":host{padding-right:15px;padding-left:15px;padding-bottom:15px;border-radius:inherit}.action{display:flex;flex-direction:column;border:1px solid var(--cui-base-200);border-radius:8px}.action__content{padding:15px;display:flex;flex-direction:column;border-radius:8px;background:var(--cui-base-0);gap:16px}.action__header{font-weight:400;font-size:12px;line-height:14px;padding:15px 19px 15.5px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--cui-base-900);border-bottom:.5px solid var(--cui-base-200);border-radius:8px 8px 0 0}.cards-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-items:center;gap:16px}\n"], dependencies: [{ kind: "component", type: CuiCheckListBlockListItemActionCardComponent, selector: "cui-checklist-block-list-item-action-card", inputs: ["purposeType", "isConsiderationNeeded", "actionInfo"], outputs: ["consideredCorrectChanged", "checkListActionChanged"] }, { kind: "directive", type: CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiCheckListBlockListItemActionWithoutVerificationComponent, isStandalone: true, selector: "cui-checklist-block-list-item-action-without-verification", inputs: { checkListItem: { classPropertyName: "checkListItem", publicName: "checkListItem", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <ng-container *cuiLet=\"checkListItem().content as checkListItemContent\">\n        <div class=\"action\">\n            <div class=\"action__header\">\n                {{ t('CONDITIONAL_LOGIC') | uppercase }}\n            </div>\n            <div class=\"action__content\">\n                <div class=\"cards-container\">\n                    <cui-checklist-block-list-item-action-card\n                        [actionInfo]=\"checkListItemContent.actionsAssignee![0]\"\n                        (checkListActionChanged)=\"\n                            onCheckListActionChanged($event, checkListItemContent.actionsAssignee![0].id)\n                        \"\n                    />\n                    <cui-checklist-block-list-item-action-card\n                        [actionInfo]=\"checkListItemContent.actionsAssignee![1]\"\n                        (checkListActionChanged)=\"\n                            onCheckListActionChanged($event, checkListItemContent.actionsAssignee![1].id)\n                        \"\n                    />\n                </div>\n            </div>\n        </div>\n    </ng-container>\n</ng-container>\n", styles: [":host{padding-right:15px;padding-left:15px;padding-bottom:15px;border-radius:inherit}.action{display:flex;flex-direction:column;border:1px solid var(--cui-base-200);border-radius:8px}.action__content{padding:15px;display:flex;flex-direction:column;border-radius:8px;background:var(--cui-base-0);gap:16px}.action__header{font-weight:400;font-size:12px;line-height:14px;padding:15px 19px 15.5px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--cui-base-900);border-bottom:.5px solid var(--cui-base-200);border-radius:8px 8px 0 0}.cards-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-items:center;gap:16px}\n"], dependencies: [{ kind: "component", type: CuiCheckListBlockListItemActionCardComponent, selector: "cui-checklist-block-list-item-action-card", inputs: ["purposeType", "isConsiderationNeeded", "actionInfo"], outputs: ["consideredCorrectChanged", "checkListActionChanged"] }, { kind: "directive", type: CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCheckListBlockListItemActionWithoutVerificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-checklist-block-list-item-action-without-verification', imports: [CuiCheckListBlockListItemActionCardComponent, CuiLetDirective, TranslocoDirective, UpperCasePipe], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n    <ng-container *cuiLet=\"checkListItem().content as checkListItemContent\">\r\n        <div class=\"action\">\r\n            <div class=\"action__header\">\r\n                {{ t('CONDITIONAL_LOGIC') | uppercase }}\r\n            </div>\r\n            <div class=\"action__content\">\r\n                <div class=\"cards-container\">\r\n                    <cui-checklist-block-list-item-action-card\r\n                        [actionInfo]=\"checkListItemContent.actionsAssignee![0]\"\r\n                        (checkListActionChanged)=\"\r\n                            onCheckListActionChanged($event, checkListItemContent.actionsAssignee![0].id)\r\n                        \"\r\n                    />\r\n                    <cui-checklist-block-list-item-action-card\r\n                        [actionInfo]=\"checkListItemContent.actionsAssignee![1]\"\r\n                        (checkListActionChanged)=\"\r\n                            onCheckListActionChanged($event, checkListItemContent.actionsAssignee![1].id)\r\n                        \"\r\n                    />\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</ng-container>\r\n", styles: [":host{padding-right:15px;padding-left:15px;padding-bottom:15px;border-radius:inherit}.action{display:flex;flex-direction:column;border:1px solid var(--cui-base-200);border-radius:8px}.action__content{padding:15px;display:flex;flex-direction:column;border-radius:8px;background:var(--cui-base-0);gap:16px}.action__header{font-weight:400;font-size:12px;line-height:14px;padding:15px 19px 15.5px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--cui-base-900);border-bottom:.5px solid var(--cui-base-200);border-radius:8px 8px 0 0}.cards-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-items:center;gap:16px}\n"] }]
+            args: [{ selector: 'cui-checklist-block-list-item-action-without-verification', imports: [CuiCheckListBlockListItemActionCardComponent, CuiLetDirective, TranslocoDirective, UpperCasePipe], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    <ng-container *cuiLet=\"checkListItem().content as checkListItemContent\">\n        <div class=\"action\">\n            <div class=\"action__header\">\n                {{ t('CONDITIONAL_LOGIC') | uppercase }}\n            </div>\n            <div class=\"action__content\">\n                <div class=\"cards-container\">\n                    <cui-checklist-block-list-item-action-card\n                        [actionInfo]=\"checkListItemContent.actionsAssignee![0]\"\n                        (checkListActionChanged)=\"\n                            onCheckListActionChanged($event, checkListItemContent.actionsAssignee![0].id)\n                        \"\n                    />\n                    <cui-checklist-block-list-item-action-card\n                        [actionInfo]=\"checkListItemContent.actionsAssignee![1]\"\n                        (checkListActionChanged)=\"\n                            onCheckListActionChanged($event, checkListItemContent.actionsAssignee![1].id)\n                        \"\n                    />\n                </div>\n            </div>\n        </div>\n    </ng-container>\n</ng-container>\n", styles: [":host{padding-right:15px;padding-left:15px;padding-bottom:15px;border-radius:inherit}.action{display:flex;flex-direction:column;border:1px solid var(--cui-base-200);border-radius:8px}.action__content{padding:15px;display:flex;flex-direction:column;border-radius:8px;background:var(--cui-base-0);gap:16px}.action__header{font-weight:400;font-size:12px;line-height:14px;padding:15px 19px 15.5px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--cui-base-900);border-bottom:.5px solid var(--cui-base-200);border-radius:8px 8px 0 0}.cards-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-items:center;gap:16px}\n"] }]
         }] });
 
 class CuiChecklistBlockTitleControlComponent {
@@ -8370,7 +8370,7 @@ class CuiChecklistBlockTitleControlComponent {
         return this.control().invalid && this.control().dirty;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiChecklistBlockTitleControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiChecklistBlockTitleControlComponent, isStandalone: true, selector: "cui-checklist-block-title-control", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <cui-form-field>\r\n        <label\r\n            cuiLabel\r\n            [isRequired]=\"true\"\r\n            for=\"title\"\r\n        >\r\n            {{ t('TITLE') }}\r\n        </label>\r\n        <cui-input-text\r\n            [formControl]=\"control()\"\r\n            cuiTextFieldId=\"title\"\r\n            [cuiTextFieldIsError]=\"isTitleError\"\r\n            cuiTextFieldPlaceholder=\"{{ t('ADD_A_TITLE') }}...\"\r\n        />\r\n        <cui-general-control-error-hint [control]=\"control()\" />\r\n    </cui-form-field>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CuiContextMenuModule }, { kind: "ngmodule", type: CuiFormFieldModule }, { kind: "component", type: CuiFormFieldComponent, selector: "cui-form-field" }, { kind: "ngmodule", type: CuiHintModule }, { kind: "ngmodule", type: CuiInputModule }, { kind: "component", type: CuiInputTextComponent, selector: "cui-input-text" }, { kind: "directive", type: CuiTextFieldIdDirective, selector: "[cuiTextFieldId]", inputs: ["cuiTextFieldId"] }, { kind: "directive", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "directive", type: CuiTextFieldIsErrorDirective, selector: "[cuiTextFieldIsError]", inputs: ["cuiTextFieldIsError"] }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "component", type: CuiLabelComponent, selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "ngmodule", type: CuiTextFieldControllerModule }, { kind: "component", type: CuiGeneralControlErrorHintComponent, selector: "cui-general-control-error-hint", inputs: ["control", "isVisible"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiChecklistBlockTitleControlComponent, isStandalone: true, selector: "cui-checklist-block-title-control", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <cui-form-field>\n        <label\n            cuiLabel\n            [isRequired]=\"true\"\n            for=\"title\"\n        >\n            {{ t('TITLE') }}\n        </label>\n        <cui-input-text\n            [formControl]=\"control()\"\n            cuiTextFieldId=\"title\"\n            [cuiTextFieldIsError]=\"isTitleError\"\n            cuiTextFieldPlaceholder=\"{{ t('ADD_A_TITLE') }}...\"\n        />\n        <cui-general-control-error-hint [control]=\"control()\" />\n    </cui-form-field>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CuiContextMenuModule }, { kind: "ngmodule", type: CuiFormFieldModule }, { kind: "component", type: CuiFormFieldComponent, selector: "cui-form-field" }, { kind: "ngmodule", type: CuiHintModule }, { kind: "ngmodule", type: CuiInputModule }, { kind: "component", type: CuiInputTextComponent, selector: "cui-input-text" }, { kind: "directive", type: CuiTextFieldIdDirective, selector: "[cuiTextFieldId]", inputs: ["cuiTextFieldId"] }, { kind: "directive", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "directive", type: CuiTextFieldIsErrorDirective, selector: "[cuiTextFieldIsError]", inputs: ["cuiTextFieldIsError"] }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "component", type: CuiLabelComponent, selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "ngmodule", type: CuiTextFieldControllerModule }, { kind: "component", type: CuiGeneralControlErrorHintComponent, selector: "cui-general-control-error-hint", inputs: ["control", "isVisible"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiChecklistBlockTitleControlComponent, decorators: [{
             type: Component,
@@ -8384,7 +8384,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         CuiGeneralControlErrorHintComponent,
                         ReactiveFormsModule,
                         TranslocoDirective
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n    <cui-form-field>\r\n        <label\r\n            cuiLabel\r\n            [isRequired]=\"true\"\r\n            for=\"title\"\r\n        >\r\n            {{ t('TITLE') }}\r\n        </label>\r\n        <cui-input-text\r\n            [formControl]=\"control()\"\r\n            cuiTextFieldId=\"title\"\r\n            [cuiTextFieldIsError]=\"isTitleError\"\r\n            cuiTextFieldPlaceholder=\"{{ t('ADD_A_TITLE') }}...\"\r\n        />\r\n        <cui-general-control-error-hint [control]=\"control()\" />\r\n    </cui-form-field>\r\n</ng-container>\r\n" }]
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    <cui-form-field>\n        <label\n            cuiLabel\n            [isRequired]=\"true\"\n            for=\"title\"\n        >\n            {{ t('TITLE') }}\n        </label>\n        <cui-input-text\n            [formControl]=\"control()\"\n            cuiTextFieldId=\"title\"\n            [cuiTextFieldIsError]=\"isTitleError\"\n            cuiTextFieldPlaceholder=\"{{ t('ADD_A_TITLE') }}...\"\n        />\n        <cui-general-control-error-hint [control]=\"control()\" />\n    </cui-form-field>\n</ng-container>\n" }]
         }] });
 
 class CuiChecklistBlockListItemContainerComponent {
@@ -8499,7 +8499,7 @@ class CuiChecklistBlockListItemContainerComponent {
             .subscribe((data) => data?.canceled || this.checkListBlockService.deleteCheckListItem(this.checkListItem().id));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiChecklistBlockListItemContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiChecklistBlockListItemContainerComponent, isStandalone: true, selector: "cui-checklist-block-list-item-container", inputs: { checkListBlockItem: { classPropertyName: "checkListBlockItem", publicName: "checkListBlockItem", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <ng-container *cuiLet=\"checkListItemWithOptions() as checkListItem\">\r\n        <header\r\n            class=\"header\"\r\n            [style.border-left-color]=\"headerBorderColor()\"\r\n            [class.header__opened]=\"isOpen()\"\r\n        >\r\n            <button\r\n                class=\"icon-drag\"\r\n                cuiButton\r\n                cuiDragPointer\r\n                type=\"button\"\r\n                appearance=\"ghost\"\r\n                size=\"xxs\"\r\n                [icon]=\"'cuiIconDragHandleDots'\"\r\n                (mouseenter)=\"onAllowDrag()\"\r\n                (mouseleave)=\"onProhibitDrag()\"\r\n            ></button>\r\n            <button\r\n                cuiButton\r\n                type=\"button\"\r\n                appearance=\"ghost\"\r\n                size=\"xxs\"\r\n                [style.transform]=\"rotate()\"\r\n                icon=\"cuiIconCaretDownFillXxs\"\r\n                (click)=\"onRowToggle()\"\r\n            ></button>\r\n            <cui-svg\r\n                [icon]=\"iconChecklistType()\"\r\n                color=\"var(--cui-base-500)\"\r\n            />\r\n            <div class=\"header__content\">\r\n                <div class=\"header__numeration\">{{ index() }}.</div>\r\n                <div class=\"header__text\">{{ headerText() }}</div>\r\n            </div>\r\n            @if (isTitleEmpty) {\r\n                <cui-svg\r\n                    [cuiTooltip]=\"t('TITLE_IS_REQUIRED')\"\r\n                    icon=\"cuiIconAlertTriangle\"\r\n                    color=\"var(--cui-danger)\"\r\n                    class=\"icon\"\r\n                />\r\n            }\r\n            <button\r\n                #actionButton=\"elementRef\"\r\n                cuiButton\r\n                type=\"button\"\r\n                cuiElement\r\n                appearance=\"ghost\"\r\n                size=\"xxs\"\r\n                icon=\"cuiIconMoreVertical\"\r\n                class=\"list__context-menu-button\"\r\n            ></button>\r\n            <cui-context-menu\r\n                [items]=\"checkListItem.options\"\r\n                [target]=\"actionButton.nativeElement\"\r\n            />\r\n        </header>\r\n        @if (isOpen()) {\r\n            <div class=\"info\">\r\n                <cui-checklist-block-title-control [control]=\"titleControl\" />\r\n                <cui-editor-block\r\n                    [config]=\"config()\"\r\n                    [editorId]=\"checkListItem.textContainerId!\"\r\n                    [title]=\"titleControl.value\"\r\n                />\r\n            </div>\r\n            <ng-container\r\n                [ngComponentOutlet]=\"checkListItemComponent()\"\r\n                [ngComponentOutletInputs]=\"{\r\n                    checkListItem: checkListItem\r\n                }\"\r\n            />\r\n        }\r\n    </ng-container>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column;gap:16px;border-radius:inherit;background-color:var(--cui-base-0)}.header{padding-right:7px;padding-left:7px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:4px;background:var(--cui-base-0);border-radius:inherit;border-left:6px solid var(--cui-yellow-bg)}.header__content{display:flex;flex-direction:row;align-items:center;gap:8px;flex:1}.header__numeration{font-weight:600;font-size:13px;line-height:16px;padding-right:8px;padding-left:8px;display:flex;justify-content:center;align-items:center}.header__text{font-weight:500;font-size:14px;line-height:20px;padding-top:11px;padding-bottom:11px;flex:1;width:0;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}.header__opened{background:var(--cui-badge-info-bg);border-bottom:.5px solid var(--cui-base-200);border-bottom-left-radius:0;border-bottom-right-radius:0}.header:hover{background:var(--cui-base-10)}.info{padding-right:15px;padding-left:15px;display:flex;flex-direction:column;gap:16px}.icon{padding:6px;width:max-content}\n"], dependencies: [{ kind: "directive", type: CuiTooltipDirective, selector: "[cuiTooltip]:not(ng-container):not(ng-template)", inputs: ["cuiTooltipContext", "cuiTooltipAppearance", "cuiTooltip"] }, { kind: "component", type: CuiEditorBlockComponent, selector: "cui-editor-block", inputs: ["title", "editorId", "config", "required"], outputs: ["editorEmpty"] }, { kind: "component", type: CuiChecklistBlockTitleControlComponent, selector: "cui-checklist-block-title-control", inputs: ["control"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "ngmodule", type: CuiContextMenuModule }, { kind: "component", type: CuiContextMenuComponent, selector: "cui-context-menu[items][target]", inputs: ["items", "target", "width", "withPaddings"] }, { kind: "directive", type: CuiElementDirective, selector: "[cuiElement]", exportAs: ["elementRef"] }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "directive", type: CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: CuiDragPointerDirective, selector: "[cuiDragPointer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiChecklistBlockListItemContainerComponent, isStandalone: true, selector: "cui-checklist-block-list-item-container", inputs: { checkListBlockItem: { classPropertyName: "checkListBlockItem", publicName: "checkListBlockItem", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <ng-container *cuiLet=\"checkListItemWithOptions() as checkListItem\">\n        <header\n            class=\"header\"\n            [style.border-left-color]=\"headerBorderColor()\"\n            [class.header__opened]=\"isOpen()\"\n        >\n            <button\n                class=\"icon-drag\"\n                cuiButton\n                cuiDragPointer\n                type=\"button\"\n                appearance=\"ghost\"\n                size=\"xxs\"\n                [icon]=\"'cuiIconDragHandleDots'\"\n                (mouseenter)=\"onAllowDrag()\"\n                (mouseleave)=\"onProhibitDrag()\"\n            ></button>\n            <button\n                cuiButton\n                type=\"button\"\n                appearance=\"ghost\"\n                size=\"xxs\"\n                [style.transform]=\"rotate()\"\n                icon=\"cuiIconCaretDownFillXxs\"\n                (click)=\"onRowToggle()\"\n            ></button>\n            <cui-svg\n                [icon]=\"iconChecklistType()\"\n                color=\"var(--cui-base-500)\"\n            />\n            <div class=\"header__content\">\n                <div class=\"header__numeration\">{{ index() }}.</div>\n                <div class=\"header__text\">{{ headerText() }}</div>\n            </div>\n            @if (isTitleEmpty) {\n                <cui-svg\n                    [cuiTooltip]=\"t('TITLE_IS_REQUIRED')\"\n                    icon=\"cuiIconAlertTriangle\"\n                    color=\"var(--cui-danger)\"\n                    class=\"icon\"\n                />\n            }\n            <button\n                #actionButton=\"elementRef\"\n                cuiButton\n                type=\"button\"\n                cuiElement\n                appearance=\"ghost\"\n                size=\"xxs\"\n                icon=\"cuiIconMoreVertical\"\n                class=\"list__context-menu-button\"\n            ></button>\n            <cui-context-menu\n                [items]=\"checkListItem.options\"\n                [target]=\"actionButton.nativeElement\"\n            />\n        </header>\n        @if (isOpen()) {\n            <div class=\"info\">\n                <cui-checklist-block-title-control [control]=\"titleControl\" />\n                <cui-editor-block\n                    [config]=\"config()\"\n                    [editorId]=\"checkListItem.textContainerId!\"\n                    [title]=\"titleControl.value\"\n                />\n            </div>\n            <ng-container\n                [ngComponentOutlet]=\"checkListItemComponent()\"\n                [ngComponentOutletInputs]=\"{\n                    checkListItem: checkListItem\n                }\"\n            />\n        }\n    </ng-container>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;gap:16px;border-radius:inherit;background-color:var(--cui-base-0)}.header{padding-right:7px;padding-left:7px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:4px;background:var(--cui-base-0);border-radius:inherit;border-left:6px solid var(--cui-yellow-bg)}.header__content{display:flex;flex-direction:row;align-items:center;gap:8px;flex:1}.header__numeration{font-weight:600;font-size:13px;line-height:16px;padding-right:8px;padding-left:8px;display:flex;justify-content:center;align-items:center}.header__text{font-weight:500;font-size:14px;line-height:20px;padding-top:11px;padding-bottom:11px;flex:1;width:0;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}.header__opened{background:var(--cui-badge-info-bg);border-bottom:.5px solid var(--cui-base-200);border-bottom-left-radius:0;border-bottom-right-radius:0}.header:hover{background:var(--cui-base-10)}.info{padding-right:15px;padding-left:15px;display:flex;flex-direction:column;gap:16px}.icon{padding:6px;width:max-content}\n"], dependencies: [{ kind: "directive", type: CuiTooltipDirective, selector: "[cuiTooltip]:not(ng-container):not(ng-template)", inputs: ["cuiTooltipContext", "cuiTooltipAppearance", "cuiTooltip"] }, { kind: "component", type: CuiEditorBlockComponent, selector: "cui-editor-block", inputs: ["title", "editorId", "config", "required"], outputs: ["editorEmpty"] }, { kind: "component", type: CuiChecklistBlockTitleControlComponent, selector: "cui-checklist-block-title-control", inputs: ["control"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "ngmodule", type: CuiContextMenuModule }, { kind: "component", type: CuiContextMenuComponent, selector: "cui-context-menu[items][target]", inputs: ["items", "target", "width", "withPaddings"] }, { kind: "directive", type: CuiElementDirective, selector: "[cuiElement]", exportAs: ["elementRef"] }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "directive", type: CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: CuiDragPointerDirective, selector: "[cuiDragPointer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiChecklistBlockListItemContainerComponent, decorators: [{
             type: Component,
@@ -8516,7 +8516,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         NgComponentOutlet,
                         TranslocoDirective,
                         CuiDragPointerDirective
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n    <ng-container *cuiLet=\"checkListItemWithOptions() as checkListItem\">\r\n        <header\r\n            class=\"header\"\r\n            [style.border-left-color]=\"headerBorderColor()\"\r\n            [class.header__opened]=\"isOpen()\"\r\n        >\r\n            <button\r\n                class=\"icon-drag\"\r\n                cuiButton\r\n                cuiDragPointer\r\n                type=\"button\"\r\n                appearance=\"ghost\"\r\n                size=\"xxs\"\r\n                [icon]=\"'cuiIconDragHandleDots'\"\r\n                (mouseenter)=\"onAllowDrag()\"\r\n                (mouseleave)=\"onProhibitDrag()\"\r\n            ></button>\r\n            <button\r\n                cuiButton\r\n                type=\"button\"\r\n                appearance=\"ghost\"\r\n                size=\"xxs\"\r\n                [style.transform]=\"rotate()\"\r\n                icon=\"cuiIconCaretDownFillXxs\"\r\n                (click)=\"onRowToggle()\"\r\n            ></button>\r\n            <cui-svg\r\n                [icon]=\"iconChecklistType()\"\r\n                color=\"var(--cui-base-500)\"\r\n            />\r\n            <div class=\"header__content\">\r\n                <div class=\"header__numeration\">{{ index() }}.</div>\r\n                <div class=\"header__text\">{{ headerText() }}</div>\r\n            </div>\r\n            @if (isTitleEmpty) {\r\n                <cui-svg\r\n                    [cuiTooltip]=\"t('TITLE_IS_REQUIRED')\"\r\n                    icon=\"cuiIconAlertTriangle\"\r\n                    color=\"var(--cui-danger)\"\r\n                    class=\"icon\"\r\n                />\r\n            }\r\n            <button\r\n                #actionButton=\"elementRef\"\r\n                cuiButton\r\n                type=\"button\"\r\n                cuiElement\r\n                appearance=\"ghost\"\r\n                size=\"xxs\"\r\n                icon=\"cuiIconMoreVertical\"\r\n                class=\"list__context-menu-button\"\r\n            ></button>\r\n            <cui-context-menu\r\n                [items]=\"checkListItem.options\"\r\n                [target]=\"actionButton.nativeElement\"\r\n            />\r\n        </header>\r\n        @if (isOpen()) {\r\n            <div class=\"info\">\r\n                <cui-checklist-block-title-control [control]=\"titleControl\" />\r\n                <cui-editor-block\r\n                    [config]=\"config()\"\r\n                    [editorId]=\"checkListItem.textContainerId!\"\r\n                    [title]=\"titleControl.value\"\r\n                />\r\n            </div>\r\n            <ng-container\r\n                [ngComponentOutlet]=\"checkListItemComponent()\"\r\n                [ngComponentOutletInputs]=\"{\r\n                    checkListItem: checkListItem\r\n                }\"\r\n            />\r\n        }\r\n    </ng-container>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column;gap:16px;border-radius:inherit;background-color:var(--cui-base-0)}.header{padding-right:7px;padding-left:7px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:4px;background:var(--cui-base-0);border-radius:inherit;border-left:6px solid var(--cui-yellow-bg)}.header__content{display:flex;flex-direction:row;align-items:center;gap:8px;flex:1}.header__numeration{font-weight:600;font-size:13px;line-height:16px;padding-right:8px;padding-left:8px;display:flex;justify-content:center;align-items:center}.header__text{font-weight:500;font-size:14px;line-height:20px;padding-top:11px;padding-bottom:11px;flex:1;width:0;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}.header__opened{background:var(--cui-badge-info-bg);border-bottom:.5px solid var(--cui-base-200);border-bottom-left-radius:0;border-bottom-right-radius:0}.header:hover{background:var(--cui-base-10)}.info{padding-right:15px;padding-left:15px;display:flex;flex-direction:column;gap:16px}.icon{padding:6px;width:max-content}\n"] }]
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    <ng-container *cuiLet=\"checkListItemWithOptions() as checkListItem\">\n        <header\n            class=\"header\"\n            [style.border-left-color]=\"headerBorderColor()\"\n            [class.header__opened]=\"isOpen()\"\n        >\n            <button\n                class=\"icon-drag\"\n                cuiButton\n                cuiDragPointer\n                type=\"button\"\n                appearance=\"ghost\"\n                size=\"xxs\"\n                [icon]=\"'cuiIconDragHandleDots'\"\n                (mouseenter)=\"onAllowDrag()\"\n                (mouseleave)=\"onProhibitDrag()\"\n            ></button>\n            <button\n                cuiButton\n                type=\"button\"\n                appearance=\"ghost\"\n                size=\"xxs\"\n                [style.transform]=\"rotate()\"\n                icon=\"cuiIconCaretDownFillXxs\"\n                (click)=\"onRowToggle()\"\n            ></button>\n            <cui-svg\n                [icon]=\"iconChecklistType()\"\n                color=\"var(--cui-base-500)\"\n            />\n            <div class=\"header__content\">\n                <div class=\"header__numeration\">{{ index() }}.</div>\n                <div class=\"header__text\">{{ headerText() }}</div>\n            </div>\n            @if (isTitleEmpty) {\n                <cui-svg\n                    [cuiTooltip]=\"t('TITLE_IS_REQUIRED')\"\n                    icon=\"cuiIconAlertTriangle\"\n                    color=\"var(--cui-danger)\"\n                    class=\"icon\"\n                />\n            }\n            <button\n                #actionButton=\"elementRef\"\n                cuiButton\n                type=\"button\"\n                cuiElement\n                appearance=\"ghost\"\n                size=\"xxs\"\n                icon=\"cuiIconMoreVertical\"\n                class=\"list__context-menu-button\"\n            ></button>\n            <cui-context-menu\n                [items]=\"checkListItem.options\"\n                [target]=\"actionButton.nativeElement\"\n            />\n        </header>\n        @if (isOpen()) {\n            <div class=\"info\">\n                <cui-checklist-block-title-control [control]=\"titleControl\" />\n                <cui-editor-block\n                    [config]=\"config()\"\n                    [editorId]=\"checkListItem.textContainerId!\"\n                    [title]=\"titleControl.value\"\n                />\n            </div>\n            <ng-container\n                [ngComponentOutlet]=\"checkListItemComponent()\"\n                [ngComponentOutletInputs]=\"{\n                    checkListItem: checkListItem\n                }\"\n            />\n        }\n    </ng-container>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;gap:16px;border-radius:inherit;background-color:var(--cui-base-0)}.header{padding-right:7px;padding-left:7px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:4px;background:var(--cui-base-0);border-radius:inherit;border-left:6px solid var(--cui-yellow-bg)}.header__content{display:flex;flex-direction:row;align-items:center;gap:8px;flex:1}.header__numeration{font-weight:600;font-size:13px;line-height:16px;padding-right:8px;padding-left:8px;display:flex;justify-content:center;align-items:center}.header__text{font-weight:500;font-size:14px;line-height:20px;padding-top:11px;padding-bottom:11px;flex:1;width:0;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}.header__opened{background:var(--cui-badge-info-bg);border-bottom:.5px solid var(--cui-base-200);border-bottom-left-radius:0;border-bottom-right-radius:0}.header:hover{background:var(--cui-base-10)}.info{padding-right:15px;padding-left:15px;display:flex;flex-direction:column;gap:16px}.icon{padding:6px;width:max-content}\n"] }]
         }] });
 
 class CuiCheckListBlockListItemEvaluationCriteriaComponent {
@@ -8601,7 +8601,7 @@ class CuiCheckListBlockListItemEvaluationCriteriaComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCheckListBlockListItemEvaluationCriteriaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiCheckListBlockListItemEvaluationCriteriaComponent, isStandalone: true, selector: "li[cuiChecklistBlockListItemEvaluationCriteria]", inputs: { loadingIds: { classPropertyName: "loadingIds", publicName: "loadingIds", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, criteriaGroup: { classPropertyName: "criteriaGroup", publicName: "criteriaGroup", isSignal: true, isRequired: true, transformFunction: null }, evaluationCriteriaFormArray: { classPropertyName: "evaluationCriteriaFormArray", publicName: "evaluationCriteriaFormArray", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { saveClicked: "saveClicked", deleteClicked: "deleteClicked", cancelClicked: "cancelClicked" }, ngImport: i0, template: "<div *transloco=\"let t\">\r\n    <form\r\n        *cuiLet=\"criteriaGroup() as form\"\r\n        [formGroup]=\"form\"\r\n        [class.form_edit]=\"isEditMode()\"\r\n        clas=\"form\"\r\n    >\r\n        <div class=\"content\">\r\n            <span class=\"index\">{{ index() }}.</span>\r\n            @if (!isEditMode()) {\r\n                <cui-svg\r\n                    cuiDragPointer\r\n                    icon=\"cuiIconDragHandleDots\"\r\n                    color=\"var(--cui-base-500)\"\r\n                    class=\"icon\"\r\n                />\r\n            }\r\n            <div\r\n                style.gap=\"{{gap()}}px\"\r\n                class=\"wrapper\"\r\n            >\r\n                <cui-input-number\r\n                    formControlName=\"evaluation\"\r\n                    cuiTextFieldPlaceholder=\"0\"\r\n                    [cuiTextFieldIsError]=\"isEvaluationInvalid\"\r\n                    [min]=\"1\"\r\n                    [max]=\"99\"\r\n                    class=\"input-number\"\r\n                />\r\n                <textarea\r\n                    cuiTextarea\r\n                    formControlName=\"criteria\"\r\n                    [rows]=\"1\"\r\n                    [cuiTextFieldIsError]=\"isCriteriaInvalid\"\r\n                    placeholder=\"{{ t('ADD_A_DESCRIPTION') }}...\"\r\n                    class=\"textarea\"\r\n                ></textarea>\r\n            </div>\r\n            @if (isEditMode()) {\r\n                <button\r\n                    type=\"submit\"\r\n                    cuiIconButton\r\n                    icon=\"cuiIconCheck\"\r\n                    color=\"var(--cui-success)\"\r\n                    [disabled]=\"form.invalid\"\r\n                    class=\"button\"\r\n                    (click)=\"onSave()\"\r\n                ></button>\r\n                <button\r\n                    type=\"button\"\r\n                    cuiIconButton\r\n                    icon=\"cuiIconXCircle\"\r\n                    color=\"var(--cui-danger)\"\r\n                    class=\"button\"\r\n                    (click)=\"onCancel()\"\r\n                ></button>\r\n            } @else {\r\n                <button\r\n                    cuiButton\r\n                    type=\"button\"\r\n                    appearance=\"ghost\"\r\n                    size=\"xxs\"\r\n                    icon=\"cuiIconEdit\"\r\n                    [disabled]=\"isLoading()\"\r\n                    (click)=\"onToggleEditMode()\"\r\n                ></button>\r\n                <button\r\n                    cuiButton\r\n                    type=\"button\"\r\n                    appearance=\"ghost\"\r\n                    size=\"xxs\"\r\n                    icon=\"cuiIconTrash\"\r\n                    [isLoaderShown]=\"isLoading()\"\r\n                    (click)=\"onDelete()\"\r\n                ></button>\r\n            }\r\n        </div>\r\n        <cui-general-control-error-hint\r\n            [control]=\"form.controls.criteria\"\r\n            class=\"error-hint\"\r\n        />\r\n    </form>\r\n</div>\r\n", styles: [".form{display:flex;flex-direction:column;gap:8px}.form_edit{padding:12px;border-radius:8px;border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}.content{display:flex;gap:8px;align-items:center}.index{font-weight:500;font-size:14px;line-height:20px;width:22px}.icon{cursor:grab}.icon:active{cursor:grabbing}.wrapper{display:flex;flex-grow:1}.input-number{padding-right:9px;padding-left:9px;flex-shrink:0;width:44px;background:inherit}.input-number._disabled{cursor:initial;opacity:1;border-right-width:0;border-radius:8px 0 0 8px}.input-number ::ng-deep .c-input{text-align:center}.input-number ::ng-deep .c-input:disabled{cursor:text}.textarea{background:var(--cui-base-0)}.textarea:disabled{cursor:initial;opacity:1;background:var(--cui-base-0);border-left-width:0;border-radius:0 8px 8px 0}.button:disabled{cursor:not-allowed;opacity:.5}.error-hint{margin-left:82px}.cui-drag-drop-placeholder{height:44px;border:1px dashed var(--cui-base-200);border-radius:8px;background:var(--cui-base-0)}\n"], dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "ngmodule", type: CuiIconButtonModule }, { kind: "component", type: CuiIconButtonComponent, selector: "button[cuiIconButton][icon], a[cuiIconButton][icon]", inputs: ["icon", "color", "hoverColor"] }, { kind: "ngmodule", type: CuiInputModule }, { kind: "directive", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "directive", type: CuiTextFieldIsErrorDirective, selector: "[cuiTextFieldIsError]", inputs: ["cuiTextFieldIsError"] }, { kind: "directive", type: CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "ngmodule", type: CuiTextareaModule }, { kind: "component", type: CuiTextareaComponent, selector: "textarea[cuiTextarea]", inputs: ["rows", "noBordersAndPaddings"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: CuiInputNumberModule }, { kind: "component", type: CuiInputNumberComponent, selector: "cui-input-number", inputs: ["precision", "min", "max"] }, { kind: "directive", type: CuiDragPointerDirective, selector: "[cuiDragPointer]" }, { kind: "component", type: CuiGeneralControlErrorHintComponent, selector: "cui-general-control-error-hint", inputs: ["control", "isVisible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiCheckListBlockListItemEvaluationCriteriaComponent, isStandalone: true, selector: "li[cuiChecklistBlockListItemEvaluationCriteria]", inputs: { loadingIds: { classPropertyName: "loadingIds", publicName: "loadingIds", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, criteriaGroup: { classPropertyName: "criteriaGroup", publicName: "criteriaGroup", isSignal: true, isRequired: true, transformFunction: null }, evaluationCriteriaFormArray: { classPropertyName: "evaluationCriteriaFormArray", publicName: "evaluationCriteriaFormArray", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { saveClicked: "saveClicked", deleteClicked: "deleteClicked", cancelClicked: "cancelClicked" }, ngImport: i0, template: "<div *transloco=\"let t\">\n    <form\n        *cuiLet=\"criteriaGroup() as form\"\n        [formGroup]=\"form\"\n        [class.form_edit]=\"isEditMode()\"\n        clas=\"form\"\n    >\n        <div class=\"content\">\n            <span class=\"index\">{{ index() }}.</span>\n            @if (!isEditMode()) {\n                <cui-svg\n                    cuiDragPointer\n                    icon=\"cuiIconDragHandleDots\"\n                    color=\"var(--cui-base-500)\"\n                    class=\"icon\"\n                />\n            }\n            <div\n                style.gap=\"{{gap()}}px\"\n                class=\"wrapper\"\n            >\n                <cui-input-number\n                    formControlName=\"evaluation\"\n                    cuiTextFieldPlaceholder=\"0\"\n                    [cuiTextFieldIsError]=\"isEvaluationInvalid\"\n                    [min]=\"1\"\n                    [max]=\"99\"\n                    class=\"input-number\"\n                />\n                <textarea\n                    cuiTextarea\n                    formControlName=\"criteria\"\n                    [rows]=\"1\"\n                    [cuiTextFieldIsError]=\"isCriteriaInvalid\"\n                    placeholder=\"{{ t('ADD_A_DESCRIPTION') }}...\"\n                    class=\"textarea\"\n                ></textarea>\n            </div>\n            @if (isEditMode()) {\n                <button\n                    type=\"submit\"\n                    cuiIconButton\n                    icon=\"cuiIconCheck\"\n                    color=\"var(--cui-success)\"\n                    [disabled]=\"form.invalid\"\n                    class=\"button\"\n                    (click)=\"onSave()\"\n                ></button>\n                <button\n                    type=\"button\"\n                    cuiIconButton\n                    icon=\"cuiIconXCircle\"\n                    color=\"var(--cui-danger)\"\n                    class=\"button\"\n                    (click)=\"onCancel()\"\n                ></button>\n            } @else {\n                <button\n                    cuiButton\n                    type=\"button\"\n                    appearance=\"ghost\"\n                    size=\"xxs\"\n                    icon=\"cuiIconEdit\"\n                    [disabled]=\"isLoading()\"\n                    (click)=\"onToggleEditMode()\"\n                ></button>\n                <button\n                    cuiButton\n                    type=\"button\"\n                    appearance=\"ghost\"\n                    size=\"xxs\"\n                    icon=\"cuiIconTrash\"\n                    [isLoaderShown]=\"isLoading()\"\n                    (click)=\"onDelete()\"\n                ></button>\n            }\n        </div>\n        <cui-general-control-error-hint\n            [control]=\"form.controls.criteria\"\n            class=\"error-hint\"\n        />\n    </form>\n</div>\n", styles: [".form{display:flex;flex-direction:column;gap:8px}.form_edit{padding:12px;border-radius:8px;border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}.content{display:flex;gap:8px;align-items:center}.index{font-weight:500;font-size:14px;line-height:20px;width:22px}.icon{cursor:grab}.icon:active{cursor:grabbing}.wrapper{display:flex;flex-grow:1}.input-number{padding-right:9px;padding-left:9px;flex-shrink:0;width:44px;background:inherit}.input-number._disabled{cursor:initial;opacity:1;border-right-width:0;border-radius:8px 0 0 8px}.input-number ::ng-deep .c-input{text-align:center}.input-number ::ng-deep .c-input:disabled{cursor:text}.textarea{background:var(--cui-base-0)}.textarea:disabled{cursor:initial;opacity:1;background:var(--cui-base-0);border-left-width:0;border-radius:0 8px 8px 0}.button:disabled{cursor:not-allowed;opacity:.5}.error-hint{margin-left:82px}.cui-drag-drop-placeholder{height:44px;border:1px dashed var(--cui-base-200);border-radius:8px;background:var(--cui-base-0)}\n"], dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "ngmodule", type: CuiIconButtonModule }, { kind: "component", type: CuiIconButtonComponent, selector: "button[cuiIconButton][icon], a[cuiIconButton][icon]", inputs: ["icon", "color", "hoverColor"] }, { kind: "ngmodule", type: CuiInputModule }, { kind: "directive", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "directive", type: CuiTextFieldIsErrorDirective, selector: "[cuiTextFieldIsError]", inputs: ["cuiTextFieldIsError"] }, { kind: "directive", type: CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "ngmodule", type: CuiTextareaModule }, { kind: "component", type: CuiTextareaComponent, selector: "textarea[cuiTextarea]", inputs: ["rows", "noBordersAndPaddings"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: CuiInputNumberModule }, { kind: "component", type: CuiInputNumberComponent, selector: "cui-input-number", inputs: ["precision", "min", "max"] }, { kind: "directive", type: CuiDragPointerDirective, selector: "[cuiDragPointer]" }, { kind: "component", type: CuiGeneralControlErrorHintComponent, selector: "cui-general-control-error-hint", inputs: ["control", "isVisible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCheckListBlockListItemEvaluationCriteriaComponent, decorators: [{
             type: Component,
@@ -8617,7 +8617,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         CuiInputNumberModule,
                         CuiDragPointerDirective,
                         CuiGeneralControlErrorHintComponent
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *transloco=\"let t\">\r\n    <form\r\n        *cuiLet=\"criteriaGroup() as form\"\r\n        [formGroup]=\"form\"\r\n        [class.form_edit]=\"isEditMode()\"\r\n        clas=\"form\"\r\n    >\r\n        <div class=\"content\">\r\n            <span class=\"index\">{{ index() }}.</span>\r\n            @if (!isEditMode()) {\r\n                <cui-svg\r\n                    cuiDragPointer\r\n                    icon=\"cuiIconDragHandleDots\"\r\n                    color=\"var(--cui-base-500)\"\r\n                    class=\"icon\"\r\n                />\r\n            }\r\n            <div\r\n                style.gap=\"{{gap()}}px\"\r\n                class=\"wrapper\"\r\n            >\r\n                <cui-input-number\r\n                    formControlName=\"evaluation\"\r\n                    cuiTextFieldPlaceholder=\"0\"\r\n                    [cuiTextFieldIsError]=\"isEvaluationInvalid\"\r\n                    [min]=\"1\"\r\n                    [max]=\"99\"\r\n                    class=\"input-number\"\r\n                />\r\n                <textarea\r\n                    cuiTextarea\r\n                    formControlName=\"criteria\"\r\n                    [rows]=\"1\"\r\n                    [cuiTextFieldIsError]=\"isCriteriaInvalid\"\r\n                    placeholder=\"{{ t('ADD_A_DESCRIPTION') }}...\"\r\n                    class=\"textarea\"\r\n                ></textarea>\r\n            </div>\r\n            @if (isEditMode()) {\r\n                <button\r\n                    type=\"submit\"\r\n                    cuiIconButton\r\n                    icon=\"cuiIconCheck\"\r\n                    color=\"var(--cui-success)\"\r\n                    [disabled]=\"form.invalid\"\r\n                    class=\"button\"\r\n                    (click)=\"onSave()\"\r\n                ></button>\r\n                <button\r\n                    type=\"button\"\r\n                    cuiIconButton\r\n                    icon=\"cuiIconXCircle\"\r\n                    color=\"var(--cui-danger)\"\r\n                    class=\"button\"\r\n                    (click)=\"onCancel()\"\r\n                ></button>\r\n            } @else {\r\n                <button\r\n                    cuiButton\r\n                    type=\"button\"\r\n                    appearance=\"ghost\"\r\n                    size=\"xxs\"\r\n                    icon=\"cuiIconEdit\"\r\n                    [disabled]=\"isLoading()\"\r\n                    (click)=\"onToggleEditMode()\"\r\n                ></button>\r\n                <button\r\n                    cuiButton\r\n                    type=\"button\"\r\n                    appearance=\"ghost\"\r\n                    size=\"xxs\"\r\n                    icon=\"cuiIconTrash\"\r\n                    [isLoaderShown]=\"isLoading()\"\r\n                    (click)=\"onDelete()\"\r\n                ></button>\r\n            }\r\n        </div>\r\n        <cui-general-control-error-hint\r\n            [control]=\"form.controls.criteria\"\r\n            class=\"error-hint\"\r\n        />\r\n    </form>\r\n</div>\r\n", styles: [".form{display:flex;flex-direction:column;gap:8px}.form_edit{padding:12px;border-radius:8px;border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}.content{display:flex;gap:8px;align-items:center}.index{font-weight:500;font-size:14px;line-height:20px;width:22px}.icon{cursor:grab}.icon:active{cursor:grabbing}.wrapper{display:flex;flex-grow:1}.input-number{padding-right:9px;padding-left:9px;flex-shrink:0;width:44px;background:inherit}.input-number._disabled{cursor:initial;opacity:1;border-right-width:0;border-radius:8px 0 0 8px}.input-number ::ng-deep .c-input{text-align:center}.input-number ::ng-deep .c-input:disabled{cursor:text}.textarea{background:var(--cui-base-0)}.textarea:disabled{cursor:initial;opacity:1;background:var(--cui-base-0);border-left-width:0;border-radius:0 8px 8px 0}.button:disabled{cursor:not-allowed;opacity:.5}.error-hint{margin-left:82px}.cui-drag-drop-placeholder{height:44px;border:1px dashed var(--cui-base-200);border-radius:8px;background:var(--cui-base-0)}\n"] }]
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *transloco=\"let t\">\n    <form\n        *cuiLet=\"criteriaGroup() as form\"\n        [formGroup]=\"form\"\n        [class.form_edit]=\"isEditMode()\"\n        clas=\"form\"\n    >\n        <div class=\"content\">\n            <span class=\"index\">{{ index() }}.</span>\n            @if (!isEditMode()) {\n                <cui-svg\n                    cuiDragPointer\n                    icon=\"cuiIconDragHandleDots\"\n                    color=\"var(--cui-base-500)\"\n                    class=\"icon\"\n                />\n            }\n            <div\n                style.gap=\"{{gap()}}px\"\n                class=\"wrapper\"\n            >\n                <cui-input-number\n                    formControlName=\"evaluation\"\n                    cuiTextFieldPlaceholder=\"0\"\n                    [cuiTextFieldIsError]=\"isEvaluationInvalid\"\n                    [min]=\"1\"\n                    [max]=\"99\"\n                    class=\"input-number\"\n                />\n                <textarea\n                    cuiTextarea\n                    formControlName=\"criteria\"\n                    [rows]=\"1\"\n                    [cuiTextFieldIsError]=\"isCriteriaInvalid\"\n                    placeholder=\"{{ t('ADD_A_DESCRIPTION') }}...\"\n                    class=\"textarea\"\n                ></textarea>\n            </div>\n            @if (isEditMode()) {\n                <button\n                    type=\"submit\"\n                    cuiIconButton\n                    icon=\"cuiIconCheck\"\n                    color=\"var(--cui-success)\"\n                    [disabled]=\"form.invalid\"\n                    class=\"button\"\n                    (click)=\"onSave()\"\n                ></button>\n                <button\n                    type=\"button\"\n                    cuiIconButton\n                    icon=\"cuiIconXCircle\"\n                    color=\"var(--cui-danger)\"\n                    class=\"button\"\n                    (click)=\"onCancel()\"\n                ></button>\n            } @else {\n                <button\n                    cuiButton\n                    type=\"button\"\n                    appearance=\"ghost\"\n                    size=\"xxs\"\n                    icon=\"cuiIconEdit\"\n                    [disabled]=\"isLoading()\"\n                    (click)=\"onToggleEditMode()\"\n                ></button>\n                <button\n                    cuiButton\n                    type=\"button\"\n                    appearance=\"ghost\"\n                    size=\"xxs\"\n                    icon=\"cuiIconTrash\"\n                    [isLoaderShown]=\"isLoading()\"\n                    (click)=\"onDelete()\"\n                ></button>\n            }\n        </div>\n        <cui-general-control-error-hint\n            [control]=\"form.controls.criteria\"\n            class=\"error-hint\"\n        />\n    </form>\n</div>\n", styles: [".form{display:flex;flex-direction:column;gap:8px}.form_edit{padding:12px;border-radius:8px;border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}.content{display:flex;gap:8px;align-items:center}.index{font-weight:500;font-size:14px;line-height:20px;width:22px}.icon{cursor:grab}.icon:active{cursor:grabbing}.wrapper{display:flex;flex-grow:1}.input-number{padding-right:9px;padding-left:9px;flex-shrink:0;width:44px;background:inherit}.input-number._disabled{cursor:initial;opacity:1;border-right-width:0;border-radius:8px 0 0 8px}.input-number ::ng-deep .c-input{text-align:center}.input-number ::ng-deep .c-input:disabled{cursor:text}.textarea{background:var(--cui-base-0)}.textarea:disabled{cursor:initial;opacity:1;background:var(--cui-base-0);border-left-width:0;border-radius:0 8px 8px 0}.button:disabled{cursor:not-allowed;opacity:.5}.error-hint{margin-left:82px}.cui-drag-drop-placeholder{height:44px;border:1px dashed var(--cui-base-200);border-radius:8px;background:var(--cui-base-0)}\n"] }]
         }], ctorParameters: () => [] });
 
 class CuiCheckListBlockListItemEvaluationComponent {
@@ -8861,7 +8861,7 @@ class CuiCheckListBlockListItemEvaluationComponent {
         array.splice(toIndex, 0, item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCheckListBlockListItemEvaluationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiCheckListBlockListItemEvaluationComponent, isStandalone: true, selector: "cui-checklist-block-list-item-evaluation", inputs: { checkListItem: { classPropertyName: "checkListItem", publicName: "checkListItem", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <div class=\"action\">\r\n        <div class=\"action__inputs-container\">\r\n            <div\r\n                class=\"action__input\"\r\n                [formGroup]=\"photoFormGroup\"\r\n            >\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiCheckbox\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isEnable\"\r\n                    />\r\n                    {{ t('PHOTO') }}\r\n                </label>\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiToggle\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isRequired\"\r\n                    />\r\n                    {{ t('REQUIRED') }}\r\n                </label>\r\n            </div>\r\n            <div\r\n                class=\"action__input\"\r\n                [formGroup]=\"commentFormGroup\"\r\n            >\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiCheckbox\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isEnable\"\r\n                    />\r\n                    {{ t('COMMENT') }}\r\n                </label>\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiToggle\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isRequired\"\r\n                    />\r\n                    {{ t('REQUIRED') }}\r\n                </label>\r\n            </div>\r\n        </div>\r\n        <div class=\"action__criteria-title-container\">\r\n            <label\r\n                cuiLabel\r\n                [isRequired]=\"true\"\r\n                for=\"evaluationCriteria\"\r\n            >\r\n                {{ t('EVALUATION_CRITERIA') }}\r\n            </label>\r\n            <p class=\"action__criteria-subtitle\">{{ t('EACH_EVALUATION_CRITERION_SHOULD_BE') }}</p>\r\n        </div>\r\n        <ul\r\n            cuiDragList\r\n            class=\"list\"\r\n        >\r\n            @for (control of evaluationCriteriaFormArray.controls; track control.controls['id']; let index = $index) {\r\n                <li\r\n                    cuiChecklistBlockListItemEvaluationCriteria\r\n                    [index]=\"index + 1\"\r\n                    cuiDragDrop\r\n                    [disabled]=\"isAddButtonDisabled()\"\r\n                    (elementDragged)=\"onDrop($event)\"\r\n                    [criteriaGroup]=\"control\"\r\n                    [evaluationCriteriaFormArray]=\"evaluationCriteriaFormArray\"\r\n                    [loadingIds]=\"loadingIds()\"\r\n                    (saveClicked)=\"onSaveEvaluationCriteria($event)\"\r\n                    (cancelClicked)=\"onCancelNewEvaluationCriteria()\"\r\n                    (deleteClicked)=\"openModalDeleteEvaluationCriteria($event)\"\r\n                ></li>\r\n            } @empty {\r\n                <li\r\n                    cuiEmptyState\r\n                    [subtitle]=\"t('NO_EVALUATION_CRITERIA_TO_VIEW')\"\r\n                ></li>\r\n            }\r\n        </ul>\r\n        <div class=\"action__footer\">\r\n            <button\r\n                cuiButton\r\n                size=\"xxs\"\r\n                appearance=\"flat\"\r\n                icon=\"cuiIconPlus\"\r\n                type=\"button\"\r\n                [disabled]=\"isAddButtonDisabled()\"\r\n                (click)=\"onAddEvaluationCriteriaItem()\"\r\n            >\r\n                {{ t('NEW_OPTION') }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column;border-radius:inherit}.action{padding:15px;display:flex;flex-direction:column;border-radius:0 0 8px 8px;gap:16px;background:var(--cui-base-10)}.action__criteria-title-container{display:flex;flex-direction:column;gap:4px}.action__criteria-subtitle{font-weight:400;font-size:14px;line-height:20px;color:var(--cui-base-500)}.action__inputs-container{display:flex;flex-direction:column;gap:8px;background:var(--cui-base-0)}.action__input{padding-right:11px;padding-left:11px;display:flex;height:48px;flex-direction:row;justify-content:space-between;border:1px solid var(--cui-base-200);border-radius:8px}.action__criteria{display:flex;flex-direction:row;align-items:center;gap:12px}.action__criteria-index{padding:8px;font-weight:500;font-size:14px;line-height:20px;display:flex;width:44px;flex-direction:row;justify-content:center;align-items:center;border-radius:8px;background-color:var(--cui-base-0)}.action__criteria-input{flex:1;background:var(--cui-base-0)}.list{display:flex;flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "component", type: CuiCheckListBlockListItemEvaluationCriteriaComponent, selector: "li[cuiChecklistBlockListItemEvaluationCriteria]", inputs: ["loadingIds", "index", "criteriaGroup", "evaluationCriteriaFormArray"], outputs: ["saveClicked", "deleteClicked", "cancelClicked"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "ngmodule", type: CuiCheckboxModule }, { kind: "component", type: CuiCheckboxComponent, selector: "input[type=\"checkbox\"][cuiCheckbox]" }, { kind: "ngmodule", type: CuiContextMenuModule }, { kind: "ngmodule", type: CuiHintModule }, { kind: "ngmodule", type: CuiInputModule }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "component", type: CuiLabelComponent, selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "ngmodule", type: CuiTextareaModule }, { kind: "ngmodule", type: CuiTextFieldControllerModule }, { kind: "ngmodule", type: CuiToggleModule }, { kind: "component", type: CuiToggleComponent, selector: "input[type=\"checkbox\"][cuiToggle]" }, { kind: "component", type: CuiEmptyStateComponent, selector: "cui-empty-state, [cuiEmptyState]", inputs: ["title", "subtitle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: CuiDragDropDirective, selector: "[cuiDragDrop]", inputs: ["disabled"], outputs: ["elementDragged"] }, { kind: "directive", type: CuiDragListDirective, selector: "[cuiDragList]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiCheckListBlockListItemEvaluationComponent, isStandalone: true, selector: "cui-checklist-block-list-item-evaluation", inputs: { checkListItem: { classPropertyName: "checkListItem", publicName: "checkListItem", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <div class=\"action\">\n        <div class=\"action__inputs-container\">\n            <div\n                class=\"action__input\"\n                [formGroup]=\"photoFormGroup\"\n            >\n                <label cuiLabel>\n                    <input\n                        cuiCheckbox\n                        type=\"checkbox\"\n                        formControlName=\"isEnable\"\n                    />\n                    {{ t('PHOTO') }}\n                </label>\n                <label cuiLabel>\n                    <input\n                        cuiToggle\n                        type=\"checkbox\"\n                        formControlName=\"isRequired\"\n                    />\n                    {{ t('REQUIRED') }}\n                </label>\n            </div>\n            <div\n                class=\"action__input\"\n                [formGroup]=\"commentFormGroup\"\n            >\n                <label cuiLabel>\n                    <input\n                        cuiCheckbox\n                        type=\"checkbox\"\n                        formControlName=\"isEnable\"\n                    />\n                    {{ t('COMMENT') }}\n                </label>\n                <label cuiLabel>\n                    <input\n                        cuiToggle\n                        type=\"checkbox\"\n                        formControlName=\"isRequired\"\n                    />\n                    {{ t('REQUIRED') }}\n                </label>\n            </div>\n        </div>\n        <div class=\"action__criteria-title-container\">\n            <label\n                cuiLabel\n                [isRequired]=\"true\"\n                for=\"evaluationCriteria\"\n            >\n                {{ t('EVALUATION_CRITERIA') }}\n            </label>\n            <p class=\"action__criteria-subtitle\">{{ t('EACH_EVALUATION_CRITERION_SHOULD_BE') }}</p>\n        </div>\n        <ul\n            cuiDragList\n            class=\"list\"\n        >\n            @for (control of evaluationCriteriaFormArray.controls; track control.controls['id']; let index = $index) {\n                <li\n                    cuiChecklistBlockListItemEvaluationCriteria\n                    [index]=\"index + 1\"\n                    cuiDragDrop\n                    [disabled]=\"isAddButtonDisabled()\"\n                    (elementDragged)=\"onDrop($event)\"\n                    [criteriaGroup]=\"control\"\n                    [evaluationCriteriaFormArray]=\"evaluationCriteriaFormArray\"\n                    [loadingIds]=\"loadingIds()\"\n                    (saveClicked)=\"onSaveEvaluationCriteria($event)\"\n                    (cancelClicked)=\"onCancelNewEvaluationCriteria()\"\n                    (deleteClicked)=\"openModalDeleteEvaluationCriteria($event)\"\n                ></li>\n            } @empty {\n                <li\n                    cuiEmptyState\n                    [subtitle]=\"t('NO_EVALUATION_CRITERIA_TO_VIEW')\"\n                ></li>\n            }\n        </ul>\n        <div class=\"action__footer\">\n            <button\n                cuiButton\n                size=\"xxs\"\n                appearance=\"flat\"\n                icon=\"cuiIconPlus\"\n                type=\"button\"\n                [disabled]=\"isAddButtonDisabled()\"\n                (click)=\"onAddEvaluationCriteriaItem()\"\n            >\n                {{ t('NEW_OPTION') }}\n            </button>\n        </div>\n    </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;border-radius:inherit}.action{padding:15px;display:flex;flex-direction:column;border-radius:0 0 8px 8px;gap:16px;background:var(--cui-base-10)}.action__criteria-title-container{display:flex;flex-direction:column;gap:4px}.action__criteria-subtitle{font-weight:400;font-size:14px;line-height:20px;color:var(--cui-base-500)}.action__inputs-container{display:flex;flex-direction:column;gap:8px;background:var(--cui-base-0)}.action__input{padding-right:11px;padding-left:11px;display:flex;height:48px;flex-direction:row;justify-content:space-between;border:1px solid var(--cui-base-200);border-radius:8px}.action__criteria{display:flex;flex-direction:row;align-items:center;gap:12px}.action__criteria-index{padding:8px;font-weight:500;font-size:14px;line-height:20px;display:flex;width:44px;flex-direction:row;justify-content:center;align-items:center;border-radius:8px;background-color:var(--cui-base-0)}.action__criteria-input{flex:1;background:var(--cui-base-0)}.list{display:flex;flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "component", type: CuiCheckListBlockListItemEvaluationCriteriaComponent, selector: "li[cuiChecklistBlockListItemEvaluationCriteria]", inputs: ["loadingIds", "index", "criteriaGroup", "evaluationCriteriaFormArray"], outputs: ["saveClicked", "deleteClicked", "cancelClicked"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "ngmodule", type: CuiCheckboxModule }, { kind: "component", type: CuiCheckboxComponent, selector: "input[type=\"checkbox\"][cuiCheckbox]" }, { kind: "ngmodule", type: CuiContextMenuModule }, { kind: "ngmodule", type: CuiHintModule }, { kind: "ngmodule", type: CuiInputModule }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "component", type: CuiLabelComponent, selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "ngmodule", type: CuiTextareaModule }, { kind: "ngmodule", type: CuiTextFieldControllerModule }, { kind: "ngmodule", type: CuiToggleModule }, { kind: "component", type: CuiToggleComponent, selector: "input[type=\"checkbox\"][cuiToggle]" }, { kind: "component", type: CuiEmptyStateComponent, selector: "cui-empty-state, [cuiEmptyState]", inputs: ["title", "subtitle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: CuiDragDropDirective, selector: "[cuiDragDrop]", inputs: ["disabled"], outputs: ["elementDragged"] }, { kind: "directive", type: CuiDragListDirective, selector: "[cuiDragList]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCheckListBlockListItemEvaluationComponent, decorators: [{
             type: Component,
@@ -8881,7 +8881,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         TranslocoDirective,
                         CuiDragDropDirective,
                         CuiDragListDirective
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n    <div class=\"action\">\r\n        <div class=\"action__inputs-container\">\r\n            <div\r\n                class=\"action__input\"\r\n                [formGroup]=\"photoFormGroup\"\r\n            >\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiCheckbox\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isEnable\"\r\n                    />\r\n                    {{ t('PHOTO') }}\r\n                </label>\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiToggle\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isRequired\"\r\n                    />\r\n                    {{ t('REQUIRED') }}\r\n                </label>\r\n            </div>\r\n            <div\r\n                class=\"action__input\"\r\n                [formGroup]=\"commentFormGroup\"\r\n            >\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiCheckbox\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isEnable\"\r\n                    />\r\n                    {{ t('COMMENT') }}\r\n                </label>\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiToggle\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isRequired\"\r\n                    />\r\n                    {{ t('REQUIRED') }}\r\n                </label>\r\n            </div>\r\n        </div>\r\n        <div class=\"action__criteria-title-container\">\r\n            <label\r\n                cuiLabel\r\n                [isRequired]=\"true\"\r\n                for=\"evaluationCriteria\"\r\n            >\r\n                {{ t('EVALUATION_CRITERIA') }}\r\n            </label>\r\n            <p class=\"action__criteria-subtitle\">{{ t('EACH_EVALUATION_CRITERION_SHOULD_BE') }}</p>\r\n        </div>\r\n        <ul\r\n            cuiDragList\r\n            class=\"list\"\r\n        >\r\n            @for (control of evaluationCriteriaFormArray.controls; track control.controls['id']; let index = $index) {\r\n                <li\r\n                    cuiChecklistBlockListItemEvaluationCriteria\r\n                    [index]=\"index + 1\"\r\n                    cuiDragDrop\r\n                    [disabled]=\"isAddButtonDisabled()\"\r\n                    (elementDragged)=\"onDrop($event)\"\r\n                    [criteriaGroup]=\"control\"\r\n                    [evaluationCriteriaFormArray]=\"evaluationCriteriaFormArray\"\r\n                    [loadingIds]=\"loadingIds()\"\r\n                    (saveClicked)=\"onSaveEvaluationCriteria($event)\"\r\n                    (cancelClicked)=\"onCancelNewEvaluationCriteria()\"\r\n                    (deleteClicked)=\"openModalDeleteEvaluationCriteria($event)\"\r\n                ></li>\r\n            } @empty {\r\n                <li\r\n                    cuiEmptyState\r\n                    [subtitle]=\"t('NO_EVALUATION_CRITERIA_TO_VIEW')\"\r\n                ></li>\r\n            }\r\n        </ul>\r\n        <div class=\"action__footer\">\r\n            <button\r\n                cuiButton\r\n                size=\"xxs\"\r\n                appearance=\"flat\"\r\n                icon=\"cuiIconPlus\"\r\n                type=\"button\"\r\n                [disabled]=\"isAddButtonDisabled()\"\r\n                (click)=\"onAddEvaluationCriteriaItem()\"\r\n            >\r\n                {{ t('NEW_OPTION') }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column;border-radius:inherit}.action{padding:15px;display:flex;flex-direction:column;border-radius:0 0 8px 8px;gap:16px;background:var(--cui-base-10)}.action__criteria-title-container{display:flex;flex-direction:column;gap:4px}.action__criteria-subtitle{font-weight:400;font-size:14px;line-height:20px;color:var(--cui-base-500)}.action__inputs-container{display:flex;flex-direction:column;gap:8px;background:var(--cui-base-0)}.action__input{padding-right:11px;padding-left:11px;display:flex;height:48px;flex-direction:row;justify-content:space-between;border:1px solid var(--cui-base-200);border-radius:8px}.action__criteria{display:flex;flex-direction:row;align-items:center;gap:12px}.action__criteria-index{padding:8px;font-weight:500;font-size:14px;line-height:20px;display:flex;width:44px;flex-direction:row;justify-content:center;align-items:center;border-radius:8px;background-color:var(--cui-base-0)}.action__criteria-input{flex:1;background:var(--cui-base-0)}.list{display:flex;flex-direction:column;gap:8px}\n"] }]
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    <div class=\"action\">\n        <div class=\"action__inputs-container\">\n            <div\n                class=\"action__input\"\n                [formGroup]=\"photoFormGroup\"\n            >\n                <label cuiLabel>\n                    <input\n                        cuiCheckbox\n                        type=\"checkbox\"\n                        formControlName=\"isEnable\"\n                    />\n                    {{ t('PHOTO') }}\n                </label>\n                <label cuiLabel>\n                    <input\n                        cuiToggle\n                        type=\"checkbox\"\n                        formControlName=\"isRequired\"\n                    />\n                    {{ t('REQUIRED') }}\n                </label>\n            </div>\n            <div\n                class=\"action__input\"\n                [formGroup]=\"commentFormGroup\"\n            >\n                <label cuiLabel>\n                    <input\n                        cuiCheckbox\n                        type=\"checkbox\"\n                        formControlName=\"isEnable\"\n                    />\n                    {{ t('COMMENT') }}\n                </label>\n                <label cuiLabel>\n                    <input\n                        cuiToggle\n                        type=\"checkbox\"\n                        formControlName=\"isRequired\"\n                    />\n                    {{ t('REQUIRED') }}\n                </label>\n            </div>\n        </div>\n        <div class=\"action__criteria-title-container\">\n            <label\n                cuiLabel\n                [isRequired]=\"true\"\n                for=\"evaluationCriteria\"\n            >\n                {{ t('EVALUATION_CRITERIA') }}\n            </label>\n            <p class=\"action__criteria-subtitle\">{{ t('EACH_EVALUATION_CRITERION_SHOULD_BE') }}</p>\n        </div>\n        <ul\n            cuiDragList\n            class=\"list\"\n        >\n            @for (control of evaluationCriteriaFormArray.controls; track control.controls['id']; let index = $index) {\n                <li\n                    cuiChecklistBlockListItemEvaluationCriteria\n                    [index]=\"index + 1\"\n                    cuiDragDrop\n                    [disabled]=\"isAddButtonDisabled()\"\n                    (elementDragged)=\"onDrop($event)\"\n                    [criteriaGroup]=\"control\"\n                    [evaluationCriteriaFormArray]=\"evaluationCriteriaFormArray\"\n                    [loadingIds]=\"loadingIds()\"\n                    (saveClicked)=\"onSaveEvaluationCriteria($event)\"\n                    (cancelClicked)=\"onCancelNewEvaluationCriteria()\"\n                    (deleteClicked)=\"openModalDeleteEvaluationCriteria($event)\"\n                ></li>\n            } @empty {\n                <li\n                    cuiEmptyState\n                    [subtitle]=\"t('NO_EVALUATION_CRITERIA_TO_VIEW')\"\n                ></li>\n            }\n        </ul>\n        <div class=\"action__footer\">\n            <button\n                cuiButton\n                size=\"xxs\"\n                appearance=\"flat\"\n                icon=\"cuiIconPlus\"\n                type=\"button\"\n                [disabled]=\"isAddButtonDisabled()\"\n                (click)=\"onAddEvaluationCriteriaItem()\"\n            >\n                {{ t('NEW_OPTION') }}\n            </button>\n        </div>\n    </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;border-radius:inherit}.action{padding:15px;display:flex;flex-direction:column;border-radius:0 0 8px 8px;gap:16px;background:var(--cui-base-10)}.action__criteria-title-container{display:flex;flex-direction:column;gap:4px}.action__criteria-subtitle{font-weight:400;font-size:14px;line-height:20px;color:var(--cui-base-500)}.action__inputs-container{display:flex;flex-direction:column;gap:8px;background:var(--cui-base-0)}.action__input{padding-right:11px;padding-left:11px;display:flex;height:48px;flex-direction:row;justify-content:space-between;border:1px solid var(--cui-base-200);border-radius:8px}.action__criteria{display:flex;flex-direction:row;align-items:center;gap:12px}.action__criteria-index{padding:8px;font-weight:500;font-size:14px;line-height:20px;display:flex;width:44px;flex-direction:row;justify-content:center;align-items:center;border-radius:8px;background-color:var(--cui-base-0)}.action__criteria-input{flex:1;background:var(--cui-base-0)}.list{display:flex;flex-direction:column;gap:8px}\n"] }]
         }] });
 
 class CuiChecklistBlockListComponent {
@@ -8937,7 +8937,7 @@ class CuiChecklistBlockListComponent {
         return this.checkListItemActionWithoutVerification;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiChecklistBlockListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiChecklistBlockListComponent, isStandalone: true, selector: "cui-checklist-block-list", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <ng-container *cuiLet=\"checkListItemsWithComponents() as checkListItemsWithComponents\">\r\n        @if (checkListItemsWithComponents?.length) {\r\n            <ul\r\n                class=\"list__items\"\r\n                #list\r\n                cuiDragList\r\n            >\r\n                <ng-container *ngTemplateOutlet=\"items; context: { $implicit: checkListItemsWithComponents }\" />\r\n                <ng-template\r\n                    #items\r\n                    let-items\r\n                    let-isHidden=\"isHidden\"\r\n                >\r\n                    @for (item of items; track item.id; let index = $index) {\r\n                        <li\r\n                            [attr.data-id]=\"item.content.id\"\r\n                            [attr.data-parent-id]=\"componentId()\"\r\n                            [hidden]=\"isHidden\"\r\n                            cuiHandleScroll\r\n                            cuiDragDrop\r\n                            class=\"list__item\"\r\n                            [class.list__item_disabled]=\"isLoading()\"\r\n                            (elementDragged)=\"moveTreeStruct($event, item)\"\r\n                        >\r\n                            <cui-checklist-block-list-item-container\r\n                                [checkListBlockItem]=\"item\"\r\n                                [index]=\"index + 1\"\r\n                                [config]=\"config()\"\r\n                            />\r\n                        </li>\r\n                    }\r\n                </ng-template>\r\n            </ul>\r\n        } @else {\r\n            <cui-empty-state [subtitle]=\"t('NO_CHECKLIST_ITEMS')\" />\r\n        }\r\n    </ng-container>\r\n</ng-container>\r\n", styles: [":host ::ng-deep .codex-editor-overlay{position:unset}.list__items{display:flex;flex-direction:column;border:1px solid var(--cui-base-200);border-radius:8px}.list__item{border-bottom:.5px solid var(--cui-base-200)}.list__item_disabled{pointer-events:none;opacity:.5}.list__item:only-child{border-radius:8px!important}.list__item:first-child{border-radius:8px 8px 0 0}.list__item:last-child{border-radius:0 0 8px 8px;border:none}.cui-drag-drop-placeholder{position:relative;z-index:1;height:40px;border:1px dashed var(--cui-base-200);border-radius:8px;background:var(--cui-base-0)}\n"], dependencies: [{ kind: "component", type: CuiChecklistBlockListItemContainerComponent, selector: "cui-checklist-block-list-item-container", inputs: ["checkListBlockItem", "config", "index"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "ngmodule", type: CuiContextMenuModule }, { kind: "directive", type: CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "component", type: CuiEmptyStateComponent, selector: "cui-empty-state, [cuiEmptyState]", inputs: ["title", "subtitle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: CuiDragDropDirective, selector: "[cuiDragDrop]", inputs: ["disabled"], outputs: ["elementDragged"] }, { kind: "directive", type: CuiHandleScrollDirective, selector: "[cuiHandleScroll]", inputs: ["scrollSpeed"] }, { kind: "directive", type: CuiDragListDirective, selector: "[cuiDragList]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiChecklistBlockListComponent, isStandalone: true, selector: "cui-checklist-block-list", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <ng-container *cuiLet=\"checkListItemsWithComponents() as checkListItemsWithComponents\">\n        @if (checkListItemsWithComponents?.length) {\n            <ul\n                class=\"list__items\"\n                #list\n                cuiDragList\n            >\n                <ng-container *ngTemplateOutlet=\"items; context: { $implicit: checkListItemsWithComponents }\" />\n                <ng-template\n                    #items\n                    let-items\n                    let-isHidden=\"isHidden\"\n                >\n                    @for (item of items; track item.id; let index = $index) {\n                        <li\n                            [attr.data-id]=\"item.content.id\"\n                            [attr.data-parent-id]=\"componentId()\"\n                            [hidden]=\"isHidden\"\n                            cuiHandleScroll\n                            cuiDragDrop\n                            class=\"list__item\"\n                            [class.list__item_disabled]=\"isLoading()\"\n                            (elementDragged)=\"moveTreeStruct($event, item)\"\n                        >\n                            <cui-checklist-block-list-item-container\n                                [checkListBlockItem]=\"item\"\n                                [index]=\"index + 1\"\n                                [config]=\"config()\"\n                            />\n                        </li>\n                    }\n                </ng-template>\n            </ul>\n        } @else {\n            <cui-empty-state [subtitle]=\"t('NO_CHECKLIST_ITEMS')\" />\n        }\n    </ng-container>\n</ng-container>\n", styles: [":host ::ng-deep .codex-editor-overlay{position:unset}.list__items{display:flex;flex-direction:column;border:1px solid var(--cui-base-200);border-radius:8px}.list__item{border-bottom:.5px solid var(--cui-base-200)}.list__item_disabled{pointer-events:none;opacity:.5}.list__item:only-child{border-radius:8px!important}.list__item:first-child{border-radius:8px 8px 0 0}.list__item:last-child{border-radius:0 0 8px 8px;border:none}.cui-drag-drop-placeholder{position:relative;z-index:1;height:40px;border:1px dashed var(--cui-base-200);border-radius:8px;background:var(--cui-base-0)}\n"], dependencies: [{ kind: "component", type: CuiChecklistBlockListItemContainerComponent, selector: "cui-checklist-block-list-item-container", inputs: ["checkListBlockItem", "config", "index"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "ngmodule", type: CuiContextMenuModule }, { kind: "directive", type: CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "component", type: CuiEmptyStateComponent, selector: "cui-empty-state, [cuiEmptyState]", inputs: ["title", "subtitle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: CuiDragDropDirective, selector: "[cuiDragDrop]", inputs: ["disabled"], outputs: ["elementDragged"] }, { kind: "directive", type: CuiHandleScrollDirective, selector: "[cuiHandleScroll]", inputs: ["scrollSpeed"] }, { kind: "directive", type: CuiDragListDirective, selector: "[cuiDragList]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiChecklistBlockListComponent, decorators: [{
             type: Component,
@@ -8952,7 +8952,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         CuiDragDropDirective,
                         CuiHandleScrollDirective,
                         CuiDragListDirective
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n    <ng-container *cuiLet=\"checkListItemsWithComponents() as checkListItemsWithComponents\">\r\n        @if (checkListItemsWithComponents?.length) {\r\n            <ul\r\n                class=\"list__items\"\r\n                #list\r\n                cuiDragList\r\n            >\r\n                <ng-container *ngTemplateOutlet=\"items; context: { $implicit: checkListItemsWithComponents }\" />\r\n                <ng-template\r\n                    #items\r\n                    let-items\r\n                    let-isHidden=\"isHidden\"\r\n                >\r\n                    @for (item of items; track item.id; let index = $index) {\r\n                        <li\r\n                            [attr.data-id]=\"item.content.id\"\r\n                            [attr.data-parent-id]=\"componentId()\"\r\n                            [hidden]=\"isHidden\"\r\n                            cuiHandleScroll\r\n                            cuiDragDrop\r\n                            class=\"list__item\"\r\n                            [class.list__item_disabled]=\"isLoading()\"\r\n                            (elementDragged)=\"moveTreeStruct($event, item)\"\r\n                        >\r\n                            <cui-checklist-block-list-item-container\r\n                                [checkListBlockItem]=\"item\"\r\n                                [index]=\"index + 1\"\r\n                                [config]=\"config()\"\r\n                            />\r\n                        </li>\r\n                    }\r\n                </ng-template>\r\n            </ul>\r\n        } @else {\r\n            <cui-empty-state [subtitle]=\"t('NO_CHECKLIST_ITEMS')\" />\r\n        }\r\n    </ng-container>\r\n</ng-container>\r\n", styles: [":host ::ng-deep .codex-editor-overlay{position:unset}.list__items{display:flex;flex-direction:column;border:1px solid var(--cui-base-200);border-radius:8px}.list__item{border-bottom:.5px solid var(--cui-base-200)}.list__item_disabled{pointer-events:none;opacity:.5}.list__item:only-child{border-radius:8px!important}.list__item:first-child{border-radius:8px 8px 0 0}.list__item:last-child{border-radius:0 0 8px 8px;border:none}.cui-drag-drop-placeholder{position:relative;z-index:1;height:40px;border:1px dashed var(--cui-base-200);border-radius:8px;background:var(--cui-base-0)}\n"] }]
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    <ng-container *cuiLet=\"checkListItemsWithComponents() as checkListItemsWithComponents\">\n        @if (checkListItemsWithComponents?.length) {\n            <ul\n                class=\"list__items\"\n                #list\n                cuiDragList\n            >\n                <ng-container *ngTemplateOutlet=\"items; context: { $implicit: checkListItemsWithComponents }\" />\n                <ng-template\n                    #items\n                    let-items\n                    let-isHidden=\"isHidden\"\n                >\n                    @for (item of items; track item.id; let index = $index) {\n                        <li\n                            [attr.data-id]=\"item.content.id\"\n                            [attr.data-parent-id]=\"componentId()\"\n                            [hidden]=\"isHidden\"\n                            cuiHandleScroll\n                            cuiDragDrop\n                            class=\"list__item\"\n                            [class.list__item_disabled]=\"isLoading()\"\n                            (elementDragged)=\"moveTreeStruct($event, item)\"\n                        >\n                            <cui-checklist-block-list-item-container\n                                [checkListBlockItem]=\"item\"\n                                [index]=\"index + 1\"\n                                [config]=\"config()\"\n                            />\n                        </li>\n                    }\n                </ng-template>\n            </ul>\n        } @else {\n            <cui-empty-state [subtitle]=\"t('NO_CHECKLIST_ITEMS')\" />\n        }\n    </ng-container>\n</ng-container>\n", styles: [":host ::ng-deep .codex-editor-overlay{position:unset}.list__items{display:flex;flex-direction:column;border:1px solid var(--cui-base-200);border-radius:8px}.list__item{border-bottom:.5px solid var(--cui-base-200)}.list__item_disabled{pointer-events:none;opacity:.5}.list__item:only-child{border-radius:8px!important}.list__item:first-child{border-radius:8px 8px 0 0}.list__item:last-child{border-radius:0 0 8px 8px;border:none}.cui-drag-drop-placeholder{position:relative;z-index:1;height:40px;border:1px dashed var(--cui-base-200);border-radius:8px;background:var(--cui-base-0)}\n"] }]
         }] });
 
 class CuiChecklistBlockComponent {
@@ -9003,7 +9003,7 @@ class CuiChecklistBlockComponent {
             .subscribe((checkListItem) => this.checkListBlockService.addCheckListItem(checkListItem));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiChecklistBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiChecklistBlockComponent, isStandalone: true, selector: "cui-checklist-block, [cuiCheckListBlock]", inputs: { componentId: { classPropertyName: "componentId", publicName: "componentId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, providers: [CuiCheckListBlockService], ngImport: i0, template: "<cui-content-wrapper\r\n    *transloco=\"let t\"\r\n    backgroundColor=\"var(--cui-base-10)\"\r\n    [gap]=\"16\"\r\n>\r\n    <ng-container *cuiLet=\"checkListItems() as checkListItems\">\r\n        <header class=\"header\">\r\n            <h2 class=\"heading\">{{ t('CHECKLIST') }}</h2>\r\n\r\n            @if (checkListItems) {\r\n                <span class=\"item\">{{ checkListItems?.length }} {{ t('ITEM_VARIANT') }}</span>\r\n            }\r\n        </header>\r\n        <cui-content-wrapper>\r\n            <cui-checklist-block-list [config]=\"config()\" />\r\n        </cui-content-wrapper>\r\n        <div>\r\n            <button\r\n                #actionButton=\"elementRef\"\r\n                cuiElement\r\n                cuiButton\r\n                type=\"button\"\r\n                appearance=\"flat\"\r\n                size=\"xxs\"\r\n                icon=\"cuiIconPlus\"\r\n            >\r\n                {{ t('ADD_NEW_ITEM') }}\r\n            </button>\r\n            <cui-context-menu\r\n                [items]=\"CHECKLIST_BLOCK_SELECT_OPTIONS\"\r\n                [target]=\"actionButton.nativeElement\"\r\n            />\r\n        </div>\r\n    </ng-container>\r\n</cui-content-wrapper>\r\n", styles: [".header{display:flex;gap:12px;align-items:center;justify-content:space-between}.heading{font-weight:500;font-size:16px;line-height:24px}.item{font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-500)}\n"], dependencies: [{ kind: "component", type: CuiChecklistBlockListComponent, selector: "cui-checklist-block-list", inputs: ["config"] }, { kind: "component", type: CuiContentWrapperComponent, selector: "cui-content-wrapper, [cuiContentWrapper]", inputs: ["backgroundColor", "gap"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "ngmodule", type: CuiContextMenuModule }, { kind: "component", type: CuiContextMenuComponent, selector: "cui-context-menu[items][target]", inputs: ["items", "target", "width", "withPaddings"] }, { kind: "directive", type: CuiElementDirective, selector: "[cuiElement]", exportAs: ["elementRef"] }, { kind: "directive", type: CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiChecklistBlockComponent, isStandalone: true, selector: "cui-checklist-block, [cuiCheckListBlock]", inputs: { componentId: { classPropertyName: "componentId", publicName: "componentId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, providers: [CuiCheckListBlockService], ngImport: i0, template: "<cui-content-wrapper\n    *transloco=\"let t\"\n    backgroundColor=\"var(--cui-base-10)\"\n    [gap]=\"16\"\n>\n    <ng-container *cuiLet=\"checkListItems() as checkListItems\">\n        <header class=\"header\">\n            <h2 class=\"heading\">{{ t('CHECKLIST') }}</h2>\n\n            @if (checkListItems) {\n                <span class=\"item\">{{ checkListItems?.length }} {{ t('ITEM_VARIANT') }}</span>\n            }\n        </header>\n        <cui-content-wrapper>\n            <cui-checklist-block-list [config]=\"config()\" />\n        </cui-content-wrapper>\n        <div>\n            <button\n                #actionButton=\"elementRef\"\n                cuiElement\n                cuiButton\n                type=\"button\"\n                appearance=\"flat\"\n                size=\"xxs\"\n                icon=\"cuiIconPlus\"\n            >\n                {{ t('ADD_NEW_ITEM') }}\n            </button>\n            <cui-context-menu\n                [items]=\"CHECKLIST_BLOCK_SELECT_OPTIONS\"\n                [target]=\"actionButton.nativeElement\"\n            />\n        </div>\n    </ng-container>\n</cui-content-wrapper>\n", styles: [".header{display:flex;gap:12px;align-items:center;justify-content:space-between}.heading{font-weight:500;font-size:16px;line-height:24px}.item{font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-500)}\n"], dependencies: [{ kind: "component", type: CuiChecklistBlockListComponent, selector: "cui-checklist-block-list", inputs: ["config"] }, { kind: "component", type: CuiContentWrapperComponent, selector: "cui-content-wrapper, [cuiContentWrapper]", inputs: ["backgroundColor", "gap"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "ngmodule", type: CuiContextMenuModule }, { kind: "component", type: CuiContextMenuComponent, selector: "cui-context-menu[items][target]", inputs: ["items", "target", "width", "withPaddings"] }, { kind: "directive", type: CuiElementDirective, selector: "[cuiElement]", exportAs: ["elementRef"] }, { kind: "directive", type: CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiChecklistBlockComponent, decorators: [{
             type: Component,
@@ -9015,10 +9015,151 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         CuiElementDirective,
                         CuiLetDirective,
                         TranslocoDirective
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiCheckListBlockService], template: "<cui-content-wrapper\r\n    *transloco=\"let t\"\r\n    backgroundColor=\"var(--cui-base-10)\"\r\n    [gap]=\"16\"\r\n>\r\n    <ng-container *cuiLet=\"checkListItems() as checkListItems\">\r\n        <header class=\"header\">\r\n            <h2 class=\"heading\">{{ t('CHECKLIST') }}</h2>\r\n\r\n            @if (checkListItems) {\r\n                <span class=\"item\">{{ checkListItems?.length }} {{ t('ITEM_VARIANT') }}</span>\r\n            }\r\n        </header>\r\n        <cui-content-wrapper>\r\n            <cui-checklist-block-list [config]=\"config()\" />\r\n        </cui-content-wrapper>\r\n        <div>\r\n            <button\r\n                #actionButton=\"elementRef\"\r\n                cuiElement\r\n                cuiButton\r\n                type=\"button\"\r\n                appearance=\"flat\"\r\n                size=\"xxs\"\r\n                icon=\"cuiIconPlus\"\r\n            >\r\n                {{ t('ADD_NEW_ITEM') }}\r\n            </button>\r\n            <cui-context-menu\r\n                [items]=\"CHECKLIST_BLOCK_SELECT_OPTIONS\"\r\n                [target]=\"actionButton.nativeElement\"\r\n            />\r\n        </div>\r\n    </ng-container>\r\n</cui-content-wrapper>\r\n", styles: [".header{display:flex;gap:12px;align-items:center;justify-content:space-between}.heading{font-weight:500;font-size:16px;line-height:24px}.item{font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-500)}\n"] }]
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiCheckListBlockService], template: "<cui-content-wrapper\n    *transloco=\"let t\"\n    backgroundColor=\"var(--cui-base-10)\"\n    [gap]=\"16\"\n>\n    <ng-container *cuiLet=\"checkListItems() as checkListItems\">\n        <header class=\"header\">\n            <h2 class=\"heading\">{{ t('CHECKLIST') }}</h2>\n\n            @if (checkListItems) {\n                <span class=\"item\">{{ checkListItems?.length }} {{ t('ITEM_VARIANT') }}</span>\n            }\n        </header>\n        <cui-content-wrapper>\n            <cui-checklist-block-list [config]=\"config()\" />\n        </cui-content-wrapper>\n        <div>\n            <button\n                #actionButton=\"elementRef\"\n                cuiElement\n                cuiButton\n                type=\"button\"\n                appearance=\"flat\"\n                size=\"xxs\"\n                icon=\"cuiIconPlus\"\n            >\n                {{ t('ADD_NEW_ITEM') }}\n            </button>\n            <cui-context-menu\n                [items]=\"CHECKLIST_BLOCK_SELECT_OPTIONS\"\n                [target]=\"actionButton.nativeElement\"\n            />\n        </div>\n    </ng-container>\n</cui-content-wrapper>\n", styles: [".header{display:flex;gap:12px;align-items:center;justify-content:space-between}.heading{font-weight:500;font-size:16px;line-height:24px}.item{font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-500)}\n"] }]
         }], ctorParameters: () => [] });
 
-const UTILITY_MODAL_SERVICE_TOKEN = new InjectionToken('UTILITY_MODAL_SERVICE_TOKEN');
+class CuiUtilityReadonlyThumbnailComponent {
+    constructor() {
+        this.thumbnailUrl = input.required();
+        this.isVideo = input(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiUtilityReadonlyThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiUtilityReadonlyThumbnailComponent, isStandalone: true, selector: "cui-utility-readonly-thumbnail", inputs: { thumbnailUrl: { classPropertyName: "thumbnailUrl", publicName: "thumbnailUrl", isSignal: true, isRequired: true, transformFunction: null }, isVideo: { classPropertyName: "isVideo", publicName: "isVideo", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let url = thumbnailUrl();\n\n@if (url?.src; as src) {\n    @if (isVideo()) {\n        <video\n            class=\"thumbnail\"\n            [src]=\"src\"\n            controls\n        ></video>\n    } @else {\n        <img\n            class=\"thumbnail\"\n            [src]=\"src\"\n            [alt]=\"url?.name\"\n        />\n    }\n}\n", styles: [".thumbnail{width:100%;max-height:271px;object-fit:contain}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiUtilityReadonlyThumbnailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-utility-readonly-thumbnail', imports: [], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let url = thumbnailUrl();\n\n@if (url?.src; as src) {\n    @if (isVideo()) {\n        <video\n            class=\"thumbnail\"\n            [src]=\"src\"\n            controls\n        ></video>\n    } @else {\n        <img\n            class=\"thumbnail\"\n            [src]=\"src\"\n            [alt]=\"url?.name\"\n        />\n    }\n}\n", styles: [".thumbnail{width:100%;max-height:271px;object-fit:contain}\n"] }]
+        }] });
+
+class CuiInstructionReadonlyInfoComponent {
+    constructor() {
+        this.hostElement = inject(ElementRef).nativeElement;
+        this.frameApiService = inject(CuiFrameApiService);
+        this.isVideo = false;
+        this.jText = signal(null);
+        this.thumbnailUrl = signal(null);
+        this.isDescriptionEmpty = computed(() => !this.jText()?.notEmpty);
+        this.framerId = input.required();
+        this.element = input(this.hostElement);
+        this.tools = input.required();
+        this.editorResourceUrl = input.required();
+        this.initConfigEffect();
+        this.initFramerIdEffect();
+    }
+    initConfigEffect() {
+        effect(() => {
+            this.editorConfig = { readOnly: true, tools: this.tools(), element: this.element() };
+        });
+    }
+    initFramerIdEffect() {
+        effect(() => {
+            const framerId = this.framerId();
+            if (!framerId) {
+                return;
+            }
+            this.subscription?.unsubscribe();
+            this.initFrameFragments();
+        });
+    }
+    initFrameFragments() {
+        const frameId = this.framerId();
+        this.jText.set(null);
+        this.thumbnailUrl.set(null);
+        if (!frameId) {
+            return;
+        }
+        const fragmentActions = {
+            ["J_TEXT" /* FragmentType.jText */]: (fragment) => {
+                this.jText.set(fragment);
+            },
+            ["RESOURCE_FILE" /* FragmentType.resourceFile */]: (fragment) => {
+                this.setResourceFile(fragment);
+            }
+        };
+        this.subscription = this.frameApiService.getFrame(frameId).subscribe((frame) => {
+            frame.fragments.forEach((fragment) => fragmentActions[fragment.type](fragment));
+        });
+    }
+    setResourceFile(resource) {
+        const url = `${this.editorResourceUrl()}${resource.fileId}`;
+        this.isVideo = resource?.name?.split('.').pop() === 'mp4';
+        if (!url) {
+            return;
+        }
+        this.thumbnailUrl.set({ src: resource.fileId && url, name: resource.name || resource.type });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiInstructionReadonlyInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiInstructionReadonlyInfoComponent, isStandalone: true, selector: "cui-instruction-readonly-info", inputs: { framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: false, transformFunction: null }, tools: { classPropertyName: "tools", publicName: "tools", isSignal: true, isRequired: true, transformFunction: null }, editorResourceUrl: { classPropertyName: "editorResourceUrl", publicName: "editorResourceUrl", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    @if (jText()) {\n        @if (!isDescriptionEmpty()) {\n            @if (thumbnailUrl(); as thumbnailUrl) {\n                <cui-utility-readonly-thumbnail [thumbnailUrl]=\"thumbnailUrl\" [isVideo]=\"isVideo\" />\n            }\n\n            @if (jText()?.id; as id) {\n                <div class=\"wrapper\">\n                    <cui-editor\n                        class=\"editor\"\n                        [editorApiId]=\"id\"\n                        [config]=\"editorConfig\"\n                    />\n                </div>\n            }\n        } @else {\n            <cui-empty-state [subtitle]=\"t('NO_DESCRIPTION_WAS_PROVIDED')\" />\n        }\n    }\n</ng-container>\n", styles: [":host{padding-top:16px;padding-right:16px;padding-left:16px;display:flex;flex-direction:column;gap:12px;height:100%;overflow:auto}.wrapper{padding:12px}.editor{display:block;height:100%;overflow:auto}\n"], dependencies: [{ kind: "component", type: CuiEditorComponent, selector: "cui-editor", inputs: ["editorApiId", "config", "requestSize"], outputs: ["editorEmpty"] }, { kind: "component", type: CuiEmptyStateComponent, selector: "cui-empty-state, [cuiEmptyState]", inputs: ["title", "subtitle"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiUtilityReadonlyThumbnailComponent, selector: "cui-utility-readonly-thumbnail", inputs: ["thumbnailUrl", "isVideo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiInstructionReadonlyInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-instruction-readonly-info', imports: [CuiEditorComponent, CuiEmptyStateComponent, TranslocoDirective, CuiUtilityReadonlyThumbnailComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    @if (jText()) {\n        @if (!isDescriptionEmpty()) {\n            @if (thumbnailUrl(); as thumbnailUrl) {\n                <cui-utility-readonly-thumbnail [thumbnailUrl]=\"thumbnailUrl\" [isVideo]=\"isVideo\" />\n            }\n\n            @if (jText()?.id; as id) {\n                <div class=\"wrapper\">\n                    <cui-editor\n                        class=\"editor\"\n                        [editorApiId]=\"id\"\n                        [config]=\"editorConfig\"\n                    />\n                </div>\n            }\n        } @else {\n            <cui-empty-state [subtitle]=\"t('NO_DESCRIPTION_WAS_PROVIDED')\" />\n        }\n    }\n</ng-container>\n", styles: [":host{padding-top:16px;padding-right:16px;padding-left:16px;display:flex;flex-direction:column;gap:12px;height:100%;overflow:auto}.wrapper{padding:12px}.editor{display:block;height:100%;overflow:auto}\n"] }]
+        }], ctorParameters: () => [] });
+
+class CuiCriterionReadonlyInfoComponent {
+    constructor() {
+        this.hostElement = inject(ElementRef).nativeElement;
+        this.frameApiService = inject(CuiFrameApiService);
+        this.isVideo = false;
+        this.jText = signal(null);
+        this.thumbnailUrl = signal(null);
+        this.isDescriptionEmpty = computed(() => !this.jText()?.notEmpty);
+        this.framerId = input.required();
+        this.element = input(this.hostElement);
+        this.tools = input.required();
+        this.editorResourceUrl = input.required();
+        this.initConfigEffect();
+        this.initFramerIdEffect();
+    }
+    initConfigEffect() {
+        effect(() => {
+            this.editorConfig = { readOnly: true, tools: this.tools(), element: this.element() };
+        });
+    }
+    initFramerIdEffect() {
+        effect(() => {
+            const framerId = this.framerId();
+            if (!framerId) {
+                return;
+            }
+            this.subscription?.unsubscribe();
+            this.initFrameFragments();
+        });
+    }
+    initFrameFragments() {
+        const frameId = this.framerId();
+        this.jText.set(null);
+        this.thumbnailUrl.set(null);
+        if (!frameId) {
+            return;
+        }
+        const fragmentActions = {
+            ["J_TEXT" /* FragmentType.jText */]: (fragment) => {
+                this.jText.set(fragment);
+            },
+            ["RESOURCE_FILE" /* FragmentType.resourceFile */]: (fragment) => {
+                this.setResourceFile(fragment);
+            }
+        };
+        this.subscription = this.frameApiService.getFrame(frameId).subscribe((frame) => {
+            frame.fragments.forEach((fragment) => fragmentActions[fragment.type](fragment));
+        });
+    }
+    setResourceFile(resource) {
+        const url = `${this.editorResourceUrl()}${resource.fileId}`;
+        this.isVideo = resource?.name?.split('.').pop() === 'mp4';
+        if (!url) {
+            return;
+        }
+        this.thumbnailUrl.set({ src: resource.fileId && url, name: resource.name || resource.type });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCriterionReadonlyInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiCriterionReadonlyInfoComponent, isStandalone: true, selector: "cui-criterion-readonly-info", inputs: { framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: false, transformFunction: null }, tools: { classPropertyName: "tools", publicName: "tools", isSignal: true, isRequired: true, transformFunction: null }, editorResourceUrl: { classPropertyName: "editorResourceUrl", publicName: "editorResourceUrl", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    @if (jText()) {\n        @if (!isDescriptionEmpty()) {\n            @if (thumbnailUrl(); as thumbnailUrl) {\n                <cui-utility-readonly-thumbnail [thumbnailUrl]=\"thumbnailUrl\" [isVideo]=\"isVideo\" />\n            }\n\n            @if (jText()?.id; as id) {\n                <div class=\"wrapper\">\n                    <cui-editor\n                        class=\"editor\"\n                        [editorApiId]=\"id\"\n                        [config]=\"editorConfig\"\n                    />\n                </div>\n            }\n        } @else {\n            <cui-empty-state [subtitle]=\"t('NO_DESCRIPTION_WAS_PROVIDED')\" />\n        }\n    }\n</ng-container>\n", styles: [":host{padding-top:16px;padding-right:16px;padding-left:16px;display:flex;flex-direction:column;gap:12px;height:100%;overflow:auto}.wrapper{padding:12px}.editor{display:block;height:100%;overflow:auto}\n"], dependencies: [{ kind: "component", type: CuiEditorComponent, selector: "cui-editor", inputs: ["editorApiId", "config", "requestSize"], outputs: ["editorEmpty"] }, { kind: "component", type: CuiEmptyStateComponent, selector: "cui-empty-state, [cuiEmptyState]", inputs: ["title", "subtitle"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiUtilityReadonlyThumbnailComponent, selector: "cui-utility-readonly-thumbnail", inputs: ["thumbnailUrl", "isVideo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCriterionReadonlyInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-criterion-readonly-info', imports: [CuiEditorComponent, CuiEmptyStateComponent, TranslocoDirective, CuiUtilityReadonlyThumbnailComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    @if (jText()) {\n        @if (!isDescriptionEmpty()) {\n            @if (thumbnailUrl(); as thumbnailUrl) {\n                <cui-utility-readonly-thumbnail [thumbnailUrl]=\"thumbnailUrl\" [isVideo]=\"isVideo\" />\n            }\n\n            @if (jText()?.id; as id) {\n                <div class=\"wrapper\">\n                    <cui-editor\n                        class=\"editor\"\n                        [editorApiId]=\"id\"\n                        [config]=\"editorConfig\"\n                    />\n                </div>\n            }\n        } @else {\n            <cui-empty-state [subtitle]=\"t('NO_DESCRIPTION_WAS_PROVIDED')\" />\n        }\n    }\n</ng-container>\n", styles: [":host{padding-top:16px;padding-right:16px;padding-left:16px;display:flex;flex-direction:column;gap:12px;height:100%;overflow:auto}.wrapper{padding:12px}.editor{display:block;height:100%;overflow:auto}\n"] }]
+        }], ctorParameters: () => [] });
 
 class CuiUtilityThumbnailComponent {
     constructor() {
@@ -9101,11 +9242,11 @@ class CuiUtilityThumbnailComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiUtilityThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiUtilityThumbnailComponent, isStandalone: true, selector: "cui-utility-thumbnail", inputs: { thumbnail: { classPropertyName: "thumbnail", publicName: "thumbnail", isSignal: true, isRequired: true, transformFunction: null }, framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, baseResourceUrl: { classPropertyName: "baseResourceUrl", publicName: "baseResourceUrl", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { thumbnail: "thumbnailChange" }, ngImport: i0, template: "<section\r\n    *transloco=\"let t\"\r\n    class=\"file\"\r\n>\r\n    <span class=\"title\">{{ t('THUMBNAIL') }}</span>\r\n    <div class=\"upload\">\r\n        <div class=\"upload-file\">\r\n            @if (thumbnail()?.name; as fileId) {\r\n                <div class=\"image\">\r\n                    <span class=\"image__name\">{{ thumbnail()?.name }}</span>\r\n                    <!-- TODO: ngSrc -->\r\n                    <img\r\n                        class=\"image__view\"\r\n                        [src]=\"thumbnailUrl()\"\r\n                        height=\"120\"\r\n                        width=\"184\"\r\n                        alt=\"Thumbnail\"\r\n                    />\r\n                </div>\r\n            }\r\n            <div class=\"info\">\r\n                <button\r\n                    type=\"button\"\r\n                    cuiButton\r\n                    appearance=\"outlined-gray\"\r\n                    size=\"xxs\"\r\n                    icon=\"cuiIconUpload\"\r\n                    (click)=\"onSelectFile()\"\r\n                >\r\n                    {{ uploadButtonName() }}\r\n                </button>\r\n                @if (thumbnail()?.name) {\r\n                    <button\r\n                        class=\"remove-button\"\r\n                        cuiButton\r\n                        appearance=\"link\"\r\n                        size=\"sm\"\r\n                        type=\"button\"\r\n                        (click)=\"onRemoveThumbnail()\"\r\n                    >\r\n                        {{ t('REMOVE') }}\r\n                    </button>\r\n                }\r\n\r\n                <span class=\"accepted\">{{ t('ACCEPTED') }}: JPG, JPEG, PNG, MP4 {{ t('UP_TO') }} 20MB</span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</section>\r\n", styles: [".file{display:flex;flex-direction:column;gap:4px}.title{font-weight:500;font-size:14px;line-height:20px;display:flex;gap:2px}.title_required{color:var(--cui-danger)}.upload{padding:12px 16px;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-base-10)}.upload-file{display:flex;align-items:center;gap:8px}.upload-file input[type=file]{display:none}.info{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.accepted{color:var(--cui-base-500)}.remove-button ::ng-deep .c-content{color:var(--cui-danger)!important}.image{position:relative;display:inline-block}.image__view{border-radius:8px;object-fit:cover}.image__name{position:absolute;top:6px;left:14px;color:var(--cui-base-0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px;z-index:1}.image:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0003;z-index:0;pointer-events:none;border-radius:8px}\n"], dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiUtilityThumbnailComponent, isStandalone: true, selector: "cui-utility-thumbnail", inputs: { thumbnail: { classPropertyName: "thumbnail", publicName: "thumbnail", isSignal: true, isRequired: true, transformFunction: null }, framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, baseResourceUrl: { classPropertyName: "baseResourceUrl", publicName: "baseResourceUrl", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { thumbnail: "thumbnailChange" }, ngImport: i0, template: "<section\n    *transloco=\"let t\"\n    class=\"file\"\n>\n    <span class=\"title\">{{ t('THUMBNAIL') }}</span>\n    <div class=\"upload\">\n        <div class=\"upload-file\">\n            @if (thumbnail()?.name; as fileId) {\n                <div class=\"image\">\n                    <span class=\"image__name\">{{ thumbnail()?.name }}</span>\n                    <!-- TODO: ngSrc -->\n                    <img\n                        class=\"image__view\"\n                        [src]=\"thumbnailUrl()\"\n                        height=\"120\"\n                        width=\"184\"\n                        alt=\"Thumbnail\"\n                    />\n                </div>\n            }\n            <div class=\"info\">\n                <button\n                    type=\"button\"\n                    cuiButton\n                    appearance=\"outlined-gray\"\n                    size=\"xxs\"\n                    icon=\"cuiIconUpload\"\n                    (click)=\"onSelectFile()\"\n                >\n                    {{ uploadButtonName() }}\n                </button>\n                @if (thumbnail()?.name) {\n                    <button\n                        class=\"remove-button\"\n                        cuiButton\n                        appearance=\"link\"\n                        size=\"sm\"\n                        type=\"button\"\n                        (click)=\"onRemoveThumbnail()\"\n                    >\n                        {{ t('REMOVE') }}\n                    </button>\n                }\n\n                <span class=\"accepted\">{{ t('ACCEPTED') }}: JPG, JPEG, PNG, MP4 {{ t('UP_TO') }} 20MB</span>\n            </div>\n        </div>\n    </div>\n</section>\n", styles: [".file{display:flex;flex-direction:column;gap:4px}.title{font-weight:500;font-size:14px;line-height:20px;display:flex;gap:2px}.title_required{color:var(--cui-danger)}.upload{padding:12px 16px;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-base-10)}.upload-file{display:flex;align-items:center;gap:8px}.upload-file input[type=file]{display:none}.info{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.accepted{color:var(--cui-base-500)}.remove-button ::ng-deep .c-content{color:var(--cui-danger)!important}.image{position:relative;display:inline-block}.image__view{border-radius:8px;object-fit:cover}.image__name{position:absolute;top:6px;left:14px;color:var(--cui-base-0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px;z-index:1}.image:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0003;z-index:0;pointer-events:none;border-radius:8px}\n"], dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiUtilityThumbnailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-utility-thumbnail', imports: [TranslocoDirective], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\r\n    *transloco=\"let t\"\r\n    class=\"file\"\r\n>\r\n    <span class=\"title\">{{ t('THUMBNAIL') }}</span>\r\n    <div class=\"upload\">\r\n        <div class=\"upload-file\">\r\n            @if (thumbnail()?.name; as fileId) {\r\n                <div class=\"image\">\r\n                    <span class=\"image__name\">{{ thumbnail()?.name }}</span>\r\n                    <!-- TODO: ngSrc -->\r\n                    <img\r\n                        class=\"image__view\"\r\n                        [src]=\"thumbnailUrl()\"\r\n                        height=\"120\"\r\n                        width=\"184\"\r\n                        alt=\"Thumbnail\"\r\n                    />\r\n                </div>\r\n            }\r\n            <div class=\"info\">\r\n                <button\r\n                    type=\"button\"\r\n                    cuiButton\r\n                    appearance=\"outlined-gray\"\r\n                    size=\"xxs\"\r\n                    icon=\"cuiIconUpload\"\r\n                    (click)=\"onSelectFile()\"\r\n                >\r\n                    {{ uploadButtonName() }}\r\n                </button>\r\n                @if (thumbnail()?.name) {\r\n                    <button\r\n                        class=\"remove-button\"\r\n                        cuiButton\r\n                        appearance=\"link\"\r\n                        size=\"sm\"\r\n                        type=\"button\"\r\n                        (click)=\"onRemoveThumbnail()\"\r\n                    >\r\n                        {{ t('REMOVE') }}\r\n                    </button>\r\n                }\r\n\r\n                <span class=\"accepted\">{{ t('ACCEPTED') }}: JPG, JPEG, PNG, MP4 {{ t('UP_TO') }} 20MB</span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</section>\r\n", styles: [".file{display:flex;flex-direction:column;gap:4px}.title{font-weight:500;font-size:14px;line-height:20px;display:flex;gap:2px}.title_required{color:var(--cui-danger)}.upload{padding:12px 16px;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-base-10)}.upload-file{display:flex;align-items:center;gap:8px}.upload-file input[type=file]{display:none}.info{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.accepted{color:var(--cui-base-500)}.remove-button ::ng-deep .c-content{color:var(--cui-danger)!important}.image{position:relative;display:inline-block}.image__view{border-radius:8px;object-fit:cover}.image__name{position:absolute;top:6px;left:14px;color:var(--cui-base-0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px;z-index:1}.image:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0003;z-index:0;pointer-events:none;border-radius:8px}\n"] }]
+            args: [{ selector: 'cui-utility-thumbnail', imports: [TranslocoDirective], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n    *transloco=\"let t\"\n    class=\"file\"\n>\n    <span class=\"title\">{{ t('THUMBNAIL') }}</span>\n    <div class=\"upload\">\n        <div class=\"upload-file\">\n            @if (thumbnail()?.name; as fileId) {\n                <div class=\"image\">\n                    <span class=\"image__name\">{{ thumbnail()?.name }}</span>\n                    <!-- TODO: ngSrc -->\n                    <img\n                        class=\"image__view\"\n                        [src]=\"thumbnailUrl()\"\n                        height=\"120\"\n                        width=\"184\"\n                        alt=\"Thumbnail\"\n                    />\n                </div>\n            }\n            <div class=\"info\">\n                <button\n                    type=\"button\"\n                    cuiButton\n                    appearance=\"outlined-gray\"\n                    size=\"xxs\"\n                    icon=\"cuiIconUpload\"\n                    (click)=\"onSelectFile()\"\n                >\n                    {{ uploadButtonName() }}\n                </button>\n                @if (thumbnail()?.name) {\n                    <button\n                        class=\"remove-button\"\n                        cuiButton\n                        appearance=\"link\"\n                        size=\"sm\"\n                        type=\"button\"\n                        (click)=\"onRemoveThumbnail()\"\n                    >\n                        {{ t('REMOVE') }}\n                    </button>\n                }\n\n                <span class=\"accepted\">{{ t('ACCEPTED') }}: JPG, JPEG, PNG, MP4 {{ t('UP_TO') }} 20MB</span>\n            </div>\n        </div>\n    </div>\n</section>\n", styles: [".file{display:flex;flex-direction:column;gap:4px}.title{font-weight:500;font-size:14px;line-height:20px;display:flex;gap:2px}.title_required{color:var(--cui-danger)}.upload{padding:12px 16px;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-base-10)}.upload-file{display:flex;align-items:center;gap:8px}.upload-file input[type=file]{display:none}.info{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.accepted{color:var(--cui-base-500)}.remove-button ::ng-deep .c-content{color:var(--cui-danger)!important}.image{position:relative;display:inline-block}.image__view{border-radius:8px;object-fit:cover}.image__name{position:absolute;top:6px;left:14px;color:var(--cui-base-0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px;z-index:1}.image:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0003;z-index:0;pointer-events:none;border-radius:8px}\n"] }]
         }] });
 
 class CuiCriterionInfoFormComponent {
@@ -9216,7 +9357,7 @@ class CuiCriterionInfoFormComponent {
         return !this.isDescriptionEmpty() && !this.form.invalid;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCriterionInfoFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiCriterionInfoFormComponent, isStandalone: true, selector: "cui-criterion-info-form", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, baseResourceUrl: { classPropertyName: "baseResourceUrl", publicName: "baseResourceUrl", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { formChanged: "formChanged", isFormValidChanged: "isFormValidChanged" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <section class=\"content\">\r\n        <cui-form-field>\r\n            <label\r\n                cuiLabel\r\n                [isRequired]=\"true\"\r\n                [for]=\"titleId\"\r\n            >\r\n                {{ t('TITLE') }}\r\n            </label>\r\n\r\n            <cui-input-text\r\n                [cuiTextFieldId]=\"titleId\"\r\n                [cuiTextFieldPlaceholder]=\"t('ADD_A_TITLE')\"\r\n                [cuiTextFieldIsError]=\"isTitleError\"\r\n                [formControl]=\"form.controls.title\"\r\n            />\r\n\r\n            @if (isTitleError) {\r\n                <cui-general-control-error-hint\r\n                    [control]=\"form.controls.title\"\r\n                    [isVisible]=\"true\"\r\n                />\r\n            }\r\n        </cui-form-field>\r\n\r\n        <cui-utility-thumbnail\r\n            [baseResourceUrl]=\"baseResourceUrl()\"\r\n            [framerId]=\"framerId()\"\r\n            [(thumbnail)]=\"thumbnail\"\r\n        />\r\n\r\n        @if (editorId(); as editorId) {\r\n            <cui-editor-block\r\n                [title]=\"form.controls.title.value || title()\"\r\n                [config]=\"config()\"\r\n                [editorId]=\"editorId\"\r\n                [required]=\"true\"\r\n                class=\"editor\"\r\n                (editorEmpty)=\"onEditorEmpty($event)\"\r\n            />\r\n        }\r\n    </section>\r\n</ng-container>\r\n", styles: ["::ng-deep cui-dialog:has(.instruction-description-modal){inset:0;margin:auto;transform:none!important}:host{--editor-height: 650px;display:block}:host .editor{--max-editor-height: var(--editor-height)}.content{display:flex;flex-direction:column;gap:16px;padding:16px 24px}\n"], dependencies: [{ kind: "ngmodule", type: CuiAccordionModule }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiEditorBlockComponent, selector: "cui-editor-block", inputs: ["title", "editorId", "config", "required"], outputs: ["editorEmpty"] }, { kind: "ngmodule", type: CuiFormFieldModule }, { kind: "component", type: CuiFormFieldComponent, selector: "cui-form-field" }, { kind: "component", type: CuiGeneralControlErrorHintComponent, selector: "cui-general-control-error-hint", inputs: ["control", "isVisible"] }, { kind: "ngmodule", type: CuiHintModule }, { kind: "ngmodule", type: CuiInputModule }, { kind: "component", type: CuiInputTextComponent, selector: "cui-input-text" }, { kind: "directive", type: CuiTextFieldIdDirective, selector: "[cuiTextFieldId]", inputs: ["cuiTextFieldId"] }, { kind: "directive", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "directive", type: CuiTextFieldIsErrorDirective, selector: "[cuiTextFieldIsError]", inputs: ["cuiTextFieldIsError"] }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "component", type: CuiLabelComponent, selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "component", type: CuiUtilityThumbnailComponent, selector: "cui-utility-thumbnail", inputs: ["thumbnail", "framerId", "baseResourceUrl"], outputs: ["thumbnailChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiCriterionInfoFormComponent, isStandalone: true, selector: "cui-criterion-info-form", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, baseResourceUrl: { classPropertyName: "baseResourceUrl", publicName: "baseResourceUrl", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { formChanged: "formChanged", isFormValidChanged: "isFormValidChanged" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <section class=\"content\">\n        <cui-form-field>\n            <label\n                cuiLabel\n                [isRequired]=\"true\"\n                [for]=\"titleId\"\n            >\n                {{ t('TITLE') }}\n            </label>\n\n            <cui-input-text\n                [cuiTextFieldId]=\"titleId\"\n                [cuiTextFieldPlaceholder]=\"t('ADD_A_TITLE')\"\n                [cuiTextFieldIsError]=\"isTitleError\"\n                [formControl]=\"form.controls.title\"\n            />\n\n            @if (isTitleError) {\n                <cui-general-control-error-hint\n                    [control]=\"form.controls.title\"\n                    [isVisible]=\"true\"\n                />\n            }\n        </cui-form-field>\n\n        <cui-utility-thumbnail\n            [baseResourceUrl]=\"baseResourceUrl()\"\n            [framerId]=\"framerId()\"\n            [(thumbnail)]=\"thumbnail\"\n        />\n\n        @if (editorId(); as editorId) {\n            <cui-editor-block\n                [title]=\"form.controls.title.value || title()\"\n                [config]=\"config()\"\n                [editorId]=\"editorId\"\n                [required]=\"true\"\n                class=\"editor\"\n                (editorEmpty)=\"onEditorEmpty($event)\"\n            />\n        }\n    </section>\n</ng-container>\n", styles: ["::ng-deep cui-dialog:has(.instruction-description-modal){inset:0;margin:auto;transform:none!important}:host{--editor-height: 650px;display:block}:host .editor{--max-editor-height: var(--editor-height)}.content{display:flex;flex-direction:column;gap:16px;padding:16px 24px}\n"], dependencies: [{ kind: "ngmodule", type: CuiAccordionModule }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiEditorBlockComponent, selector: "cui-editor-block", inputs: ["title", "editorId", "config", "required"], outputs: ["editorEmpty"] }, { kind: "ngmodule", type: CuiFormFieldModule }, { kind: "component", type: CuiFormFieldComponent, selector: "cui-form-field" }, { kind: "component", type: CuiGeneralControlErrorHintComponent, selector: "cui-general-control-error-hint", inputs: ["control", "isVisible"] }, { kind: "ngmodule", type: CuiHintModule }, { kind: "ngmodule", type: CuiInputModule }, { kind: "component", type: CuiInputTextComponent, selector: "cui-input-text" }, { kind: "directive", type: CuiTextFieldIdDirective, selector: "[cuiTextFieldId]", inputs: ["cuiTextFieldId"] }, { kind: "directive", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "directive", type: CuiTextFieldIsErrorDirective, selector: "[cuiTextFieldIsError]", inputs: ["cuiTextFieldIsError"] }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "component", type: CuiLabelComponent, selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "component", type: CuiUtilityThumbnailComponent, selector: "cui-utility-thumbnail", inputs: ["thumbnail", "framerId", "baseResourceUrl"], outputs: ["thumbnailChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCriterionInfoFormComponent, decorators: [{
             type: Component,
@@ -9232,175 +9373,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         CuiUtilityThumbnailComponent,
                         ReactiveFormsModule,
                         TranslocoDirective
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n    <section class=\"content\">\r\n        <cui-form-field>\r\n            <label\r\n                cuiLabel\r\n                [isRequired]=\"true\"\r\n                [for]=\"titleId\"\r\n            >\r\n                {{ t('TITLE') }}\r\n            </label>\r\n\r\n            <cui-input-text\r\n                [cuiTextFieldId]=\"titleId\"\r\n                [cuiTextFieldPlaceholder]=\"t('ADD_A_TITLE')\"\r\n                [cuiTextFieldIsError]=\"isTitleError\"\r\n                [formControl]=\"form.controls.title\"\r\n            />\r\n\r\n            @if (isTitleError) {\r\n                <cui-general-control-error-hint\r\n                    [control]=\"form.controls.title\"\r\n                    [isVisible]=\"true\"\r\n                />\r\n            }\r\n        </cui-form-field>\r\n\r\n        <cui-utility-thumbnail\r\n            [baseResourceUrl]=\"baseResourceUrl()\"\r\n            [framerId]=\"framerId()\"\r\n            [(thumbnail)]=\"thumbnail\"\r\n        />\r\n\r\n        @if (editorId(); as editorId) {\r\n            <cui-editor-block\r\n                [title]=\"form.controls.title.value || title()\"\r\n                [config]=\"config()\"\r\n                [editorId]=\"editorId\"\r\n                [required]=\"true\"\r\n                class=\"editor\"\r\n                (editorEmpty)=\"onEditorEmpty($event)\"\r\n            />\r\n        }\r\n    </section>\r\n</ng-container>\r\n", styles: ["::ng-deep cui-dialog:has(.instruction-description-modal){inset:0;margin:auto;transform:none!important}:host{--editor-height: 650px;display:block}:host .editor{--max-editor-height: var(--editor-height)}.content{display:flex;flex-direction:column;gap:16px;padding:16px 24px}\n"] }]
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    <section class=\"content\">\n        <cui-form-field>\n            <label\n                cuiLabel\n                [isRequired]=\"true\"\n                [for]=\"titleId\"\n            >\n                {{ t('TITLE') }}\n            </label>\n\n            <cui-input-text\n                [cuiTextFieldId]=\"titleId\"\n                [cuiTextFieldPlaceholder]=\"t('ADD_A_TITLE')\"\n                [cuiTextFieldIsError]=\"isTitleError\"\n                [formControl]=\"form.controls.title\"\n            />\n\n            @if (isTitleError) {\n                <cui-general-control-error-hint\n                    [control]=\"form.controls.title\"\n                    [isVisible]=\"true\"\n                />\n            }\n        </cui-form-field>\n\n        <cui-utility-thumbnail\n            [baseResourceUrl]=\"baseResourceUrl()\"\n            [framerId]=\"framerId()\"\n            [(thumbnail)]=\"thumbnail\"\n        />\n\n        @if (editorId(); as editorId) {\n            <cui-editor-block\n                [title]=\"form.controls.title.value || title()\"\n                [config]=\"config()\"\n                [editorId]=\"editorId\"\n                [required]=\"true\"\n                class=\"editor\"\n                (editorEmpty)=\"onEditorEmpty($event)\"\n            />\n        }\n    </section>\n</ng-container>\n", styles: ["::ng-deep cui-dialog:has(.instruction-description-modal){inset:0;margin:auto;transform:none!important}:host{--editor-height: 650px;display:block}:host .editor{--max-editor-height: var(--editor-height)}.content{display:flex;flex-direction:column;gap:16px;padding:16px 24px}\n"] }]
         }], ctorParameters: () => [] });
 
-class CuiCriterionInfoComponent {
+const UTILITY_MODAL_SERVICE_TOKEN = new InjectionToken('UTILITY_MODAL_SERVICE_TOKEN');
+
+class CuiUtilityModalCreateComponent {
     constructor() {
-        this.destroyRef = inject(DestroyRef);
-        this.translocoService = inject(TranslocoService);
-        this.cuiIdService = inject(CuiIdService);
-        this.cuiCategoriesModalService = inject(CuiSelectedCategoryService);
-        this.treeStructNavigatorApiService = inject(CuiTreeStructNavigatorApiService);
-        this.criterionApiService = inject(UTILITY_MODAL_SERVICE_TOKEN);
-        this.skipCategoryChange = false;
-        this.TYPE = "CRITERION_STORAGE" /* TreeStructType.Criteria */;
-        this.categoryId = this.cuiIdService.generate();
-        this.category = this.cuiCategoriesModalService.category;
+        this.window = inject(CUI_WINDOW);
+        this.cuiDialogContext = inject(CUI_DIALOG_CONTEXT);
+        this.utilityModalService = inject(UTILITY_MODAL_SERVICE_TOKEN);
+        this.prevUtility = this.cuiDialogContext.data.utility;
+        this.editorResourceUrl = this.cuiDialogContext.data.editorResourceUrl;
+        this.tools = this.cuiDialogContext.data.tools;
+        this.header = this.cuiDialogContext.data.header;
+        this._utility = computed(() => signal(this.initialUtility()));
         this.isFormValid = signal(false);
-        this.prevCategoryId = signal(null);
-        this.editorConfig = signal(null);
-        this.labelColor = computed(() => this.category()?.title ? 'var(--cui-base-900)' : 'var(--cui-base-400)');
-        this.selectTitle = computed(() => this.category()?.title ?? this.translocoService.translate('SELECT') + '...');
-        this.element = viewChild('scrollContent');
-        this.criterion = model();
-        this.tools = input.required();
-        this.editorResourceUrl = input.required();
-        this.validationChanged = output();
-        this.criterionCreated = output();
-        this.initConfigEffect();
-        this.initCategoryEffect();
+        this.utility = computed(() => this._utility()());
+        this.initialUtility = input.required();
     }
     ngOnInit() {
-        this.initCategory();
-    }
-    onFormChanged(values, criterionId) {
-        const actions = {
-            title: (title) => this.changeTitle(title, criterionId)
-        };
-        forkJoin(Object.keys(values).map((key) => actions[key](values[key] || '')))
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe();
+        this.initWindowUnloadEvent();
     }
-    onFormValidationChanged(isValid) {
-        this.isFormValid.set(isValid);
-        this.validationChanged.emit(isValid);
+    ngOnDestroy() {
+        this.window.onbeforeunload = null;
     }
-    initCategoryEffect() {
-        effect(() => {
-            const category = this.category();
-            const storageObjectCriterion = untracked(this.criterion);
-            if (!category || this.skipCategoryChange) {
-                this.skipCategoryChange = false;
-                return;
-            }
-            if (storageObjectCriterion) {
-                this.changeCategory(category.id, storageObjectCriterion.id);
-                return;
-            }
-            this.createCriterion(category.id);
-        });
+    onSave() {
+        this.cuiDialogContext.completeWith(this.initialUtility() ? { prevId: this.prevUtility.id, ...this.utility() } : this.utility());
     }
-    initConfigEffect() {
-        effect(() => {
-            const element = this.element()?.nativeElement;
-            if (!element) {
-                return;
-            }
-            this.editorConfig.set({ tools: this.tools(), element });
-        });
+    onCancel() {
+        this.destroyUtility();
+        const returnedValue = this.initialUtility() ? this.utility() : null;
+        this.cuiDialogContext.completeWith(returnedValue);
     }
-    initCategory() {
-        const storageObjectId = this.criterion()?.id;
-        if (!storageObjectId) {
-            return;
-        }
-        this.treeStructNavigatorApiService
-            .getCategory(storageObjectId, "CRITERION_STORAGE" /* TreeStructType.Criteria */)
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((category) => {
-            this.skipCategoryChange = true;
-            this.prevCategoryId.set(category.id);
-            this.cuiCategoriesModalService.setCurrentCategory(category);
-        });
+    initWindowUnloadEvent() {
+        this.window.onbeforeunload = () => this.destroyUtility();
     }
-    changeCategory(categoryId, targetId) {
-        const prevCategoryId = untracked(this.prevCategoryId);
-        if (!prevCategoryId) {
+    destroyUtility() {
+        const utility = this.utility();
+        if (!utility || this.initialUtility()) {
             return;
         }
-        this.subscription?.unsubscribe();
-        this.subscription = this.treeStructNavigatorApiService
-            .moveElement({
-            type: "MOVING_TARGET_TREE_STRUCT" /* MovingType.TARGET_TREE_STRUCT */,
-            movableItemId: targetId,
-            treeStructTargetItemId: categoryId,
-            treeStructMovableItemId: prevCategoryId
-        })
-            .subscribe(() => this.prevCategoryId.set(categoryId));
-    }
-    createCriterion(categoryId) {
-        this.criterionCreated.emit(categoryId);
-        this.prevCategoryId.set(categoryId);
-    }
-    changeTitle(value, criterionId) {
-        return this.criterionApiService.changeTitle(criterionId, value).pipe(finalize(() => this.criterion.update((prev) => ({
-            ...prev,
-            storageElement: { ...prev.storageElement, title: value }
-        }))));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCriterionInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiCriterionInfoComponent, isStandalone: true, selector: "cui-criterion-info", inputs: { criterion: { classPropertyName: "criterion", publicName: "criterion", isSignal: true, isRequired: false, transformFunction: null }, tools: { classPropertyName: "tools", publicName: "tools", isSignal: true, isRequired: true, transformFunction: null }, editorResourceUrl: { classPropertyName: "editorResourceUrl", publicName: "editorResourceUrl", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { criterion: "criterionChange", validationChanged: "validationChanged", criterionCreated: "criterionCreated" }, providers: [CuiSelectedCategoryService], viewQueries: [{ propertyName: "element", first: true, predicate: ["scrollContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n    class=\"wrapper\"\r\n    *transloco=\"let t\"\r\n>\r\n    <div\r\n        #scrollContent\r\n        class=\"content content_scrollable\"\r\n    >\r\n        <div class=\"category\">\r\n            <cui-form-field>\r\n                <label\r\n                    cuiLabel\r\n                    [for]=\"categoryId\"\r\n                    [isRequired]=\"true\"\r\n                >\r\n                    {{ t('SELECT_CATEGORY') }}\r\n                </label>\r\n                <cui-categories\r\n                    [buttonId]=\"categoryId\"\r\n                    [treeStructType]=\"TYPE\"\r\n                >\r\n                    <div class=\"select\">\r\n                        <span [style.color]=\"labelColor()\">\r\n                            {{ selectTitle() }}\r\n                        </span>\r\n\r\n                        <cui-svg icon=\"cuiIconChevronDown\" />\r\n                    </div>\r\n                </cui-categories>\r\n            </cui-form-field>\r\n        </div>\r\n\r\n        @let criterionData = criterion();\r\n        @let editorConfigData = editorConfig();\r\n\r\n        @if (editorConfigData && criterionData) {\r\n            <cui-criterion-info-form\r\n                [config]=\"editorConfigData\"\r\n                [baseResourceUrl]=\"editorResourceUrl()\"\r\n                [title]=\"criterionData.storageElement.title\"\r\n                [framerId]=\"criterionData.storageElement.framerCriterionId\"\r\n                class=\"utility\"\r\n                (isFormValidChanged)=\"onFormValidationChanged($event)\"\r\n                (formChanged)=\"onFormChanged($event, criterionData.id)\"\r\n            />\r\n        }\r\n    </div>\r\n</div>\r\n", styles: [".wrapper{display:flex;flex-direction:column;height:100%}.content{height:calc(100vh - 109px)}.content_scrollable{overflow:auto}.category{padding-top:16px;padding-right:23px;padding-left:23px}.select{padding:7px 13px;font-weight:400;font-size:14px;line-height:20px;display:flex;justify-content:space-between;height:36px;border-radius:8px;border:1px solid var(--cui-base-200);color:var(--cui-base-900);background:var(--cui-input)}.utility{--editor-height: none}\n"], dependencies: [{ kind: "ngmodule", type: CuiBadgeModule }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiCategoriesComponent, selector: "cui-categories", inputs: ["treeStructType", "buttonId", "disabled"] }, { kind: "ngmodule", type: CuiDialogModule }, { kind: "ngmodule", type: CuiFormFieldModule }, { kind: "component", type: CuiFormFieldComponent, selector: "cui-form-field" }, { kind: "component", type: CuiCriterionInfoFormComponent, selector: "cui-criterion-info-form", inputs: ["title", "framerId", "baseResourceUrl", "config"], outputs: ["formChanged", "isFormValidChanged"] }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "component", type: CuiLabelComponent, selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i4.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCriterionInfoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cui-criterion-info', imports: [
-                        CuiBadgeModule,
-                        CuiButtonModule,
-                        CuiCategoriesComponent,
-                        CuiDialogModule,
-                        CuiFormFieldModule,
-                        CuiCriterionInfoFormComponent,
-                        CuiLabelModule,
-                        CuiSvgModule,
-                        TranslocoModule
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiSelectedCategoryService], template: "<div\r\n    class=\"wrapper\"\r\n    *transloco=\"let t\"\r\n>\r\n    <div\r\n        #scrollContent\r\n        class=\"content content_scrollable\"\r\n    >\r\n        <div class=\"category\">\r\n            <cui-form-field>\r\n                <label\r\n                    cuiLabel\r\n                    [for]=\"categoryId\"\r\n                    [isRequired]=\"true\"\r\n                >\r\n                    {{ t('SELECT_CATEGORY') }}\r\n                </label>\r\n                <cui-categories\r\n                    [buttonId]=\"categoryId\"\r\n                    [treeStructType]=\"TYPE\"\r\n                >\r\n                    <div class=\"select\">\r\n                        <span [style.color]=\"labelColor()\">\r\n                            {{ selectTitle() }}\r\n                        </span>\r\n\r\n                        <cui-svg icon=\"cuiIconChevronDown\" />\r\n                    </div>\r\n                </cui-categories>\r\n            </cui-form-field>\r\n        </div>\r\n\r\n        @let criterionData = criterion();\r\n        @let editorConfigData = editorConfig();\r\n\r\n        @if (editorConfigData && criterionData) {\r\n            <cui-criterion-info-form\r\n                [config]=\"editorConfigData\"\r\n                [baseResourceUrl]=\"editorResourceUrl()\"\r\n                [title]=\"criterionData.storageElement.title\"\r\n                [framerId]=\"criterionData.storageElement.framerCriterionId\"\r\n                class=\"utility\"\r\n                (isFormValidChanged)=\"onFormValidationChanged($event)\"\r\n                (formChanged)=\"onFormChanged($event, criterionData.id)\"\r\n            />\r\n        }\r\n    </div>\r\n</div>\r\n", styles: [".wrapper{display:flex;flex-direction:column;height:100%}.content{height:calc(100vh - 109px)}.content_scrollable{overflow:auto}.category{padding-top:16px;padding-right:23px;padding-left:23px}.select{padding:7px 13px;font-weight:400;font-size:14px;line-height:20px;display:flex;justify-content:space-between;height:36px;border-radius:8px;border:1px solid var(--cui-base-200);color:var(--cui-base-900);background:var(--cui-input)}.utility{--editor-height: none}\n"] }]
-        }], ctorParameters: () => [] });
-
-class CuiUtilityModalCreateComponent {
-    constructor() {
-        this.window = inject(CUI_WINDOW);
-        this.cuiDialogContext = inject(CUI_DIALOG_CONTEXT);
-        this.utilityModalService = inject(UTILITY_MODAL_SERVICE_TOKEN);
-        this.prevUtility = this.cuiDialogContext.data.utility;
-        this.editorResourceUrl = this.cuiDialogContext.data.editorResourceUrl;
-        this.tools = this.cuiDialogContext.data.tools;
-        this.header = this.cuiDialogContext.data.header;
-        this._utility = computed(() => signal(this.initialUtility()));
-        this.isFormValid = signal(false);
-        this.utility = computed(() => this._utility()());
-        this.initialUtility = input.required();
-    }
-    ngOnInit() {
-        this.initWindowUnloadEvent();
-    }
-    ngOnDestroy() {
-        this.window.onbeforeunload = null;
-    }
-    onSave() {
-        this.cuiDialogContext.completeWith(this.initialUtility() ? { prevId: this.prevUtility.id, ...this.utility() } : this.utility());
-    }
-    onCancel() {
-        this.destroyUtility();
-        const returnedValue = this.initialUtility() ? this.utility() : null;
-        this.cuiDialogContext.completeWith(returnedValue);
-    }
-    initWindowUnloadEvent() {
-        this.window.onbeforeunload = () => this.destroyUtility();
-    }
-    destroyUtility() {
-        const utility = this.utility();
-        if (!utility || this.initialUtility()) {
-            return;
-        }
-        this.utilityModalService.deleteUtility(utility).subscribe();
+        this.utilityModalService.deleteUtility(utility).subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiUtilityModalCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiUtilityModalCreateComponent, isStandalone: true, selector: "cui-utility-modal-create", inputs: { initialUtility: { classPropertyName: "initialUtility", publicName: "initialUtility", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div\r\n    class=\"wrapper\"\r\n    *transloco=\"let t\"\r\n>\r\n    <header class=\"header\">\r\n        <ng-container [ngTemplateOutlet]=\"header\" />\r\n\r\n        <div class=\"header__content\">\r\n            <cui-loader />\r\n\r\n            <div class=\"actions\">\r\n                @if (!initialUtility()) {\r\n                    <button\r\n                        type=\"button\"\r\n                        cuiButton\r\n                        appearance=\"secondary\"\r\n                        (click)=\"onCancel()\"\r\n                    >\r\n                        {{ t('CANCEL') }}\r\n                    </button>\r\n                }\r\n\r\n                <button\r\n                    type=\"button\"\r\n                    cuiButton\r\n                    [disabled]=\"!isFormValid()\"\r\n                    appearance=\"action-violet\"\r\n                    (click)=\"onSave()\"\r\n                >\r\n                    {{ t('DONE') }}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </header>\r\n\r\n    <ng-content />\r\n</div>\r\n", styles: [".header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px}.header__content{display:flex;gap:8px}.actions{display:flex;gap:16px}\n"], dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "component", type: CuiLoaderComponent, selector: "cui-loader" }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiUtilityModalCreateComponent, isStandalone: true, selector: "cui-utility-modal-create", inputs: { initialUtility: { classPropertyName: "initialUtility", publicName: "initialUtility", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div\n    class=\"wrapper\"\n    *transloco=\"let t\"\n>\n    <header class=\"header\">\n        <ng-container [ngTemplateOutlet]=\"header\" />\n\n        <div class=\"header__content\">\n            <cui-loader />\n\n            <div class=\"actions\">\n                @if (!initialUtility()) {\n                    <button\n                        type=\"button\"\n                        cuiButton\n                        appearance=\"secondary\"\n                        (click)=\"onCancel()\"\n                    >\n                        {{ t('CANCEL') }}\n                    </button>\n                }\n\n                <button\n                    type=\"button\"\n                    cuiButton\n                    [disabled]=\"!isFormValid()\"\n                    appearance=\"action-violet\"\n                    (click)=\"onSave()\"\n                >\n                    {{ t('DONE') }}\n                </button>\n            </div>\n        </div>\n    </header>\n\n    <ng-content />\n</div>\n", styles: [".header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px}.header__content{display:flex;gap:8px}.actions{display:flex;gap:16px}\n"], dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "component", type: CuiLoaderComponent, selector: "cui-loader" }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiUtilityModalCreateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-utility-modal-create', imports: [CuiButtonModule, CuiLoaderComponent, CuiSvgModule, NgTemplateOutlet, TranslocoDirective], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n    class=\"wrapper\"\r\n    *transloco=\"let t\"\r\n>\r\n    <header class=\"header\">\r\n        <ng-container [ngTemplateOutlet]=\"header\" />\r\n\r\n        <div class=\"header__content\">\r\n            <cui-loader />\r\n\r\n            <div class=\"actions\">\r\n                @if (!initialUtility()) {\r\n                    <button\r\n                        type=\"button\"\r\n                        cuiButton\r\n                        appearance=\"secondary\"\r\n                        (click)=\"onCancel()\"\r\n                    >\r\n                        {{ t('CANCEL') }}\r\n                    </button>\r\n                }\r\n\r\n                <button\r\n                    type=\"button\"\r\n                    cuiButton\r\n                    [disabled]=\"!isFormValid()\"\r\n                    appearance=\"action-violet\"\r\n                    (click)=\"onSave()\"\r\n                >\r\n                    {{ t('DONE') }}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </header>\r\n\r\n    <ng-content />\r\n</div>\r\n", styles: [".header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px}.header__content{display:flex;gap:8px}.actions{display:flex;gap:16px}\n"] }]
+            args: [{ selector: 'cui-utility-modal-create', imports: [CuiButtonModule, CuiLoaderComponent, CuiSvgModule, NgTemplateOutlet, TranslocoDirective], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"wrapper\"\n    *transloco=\"let t\"\n>\n    <header class=\"header\">\n        <ng-container [ngTemplateOutlet]=\"header\" />\n\n        <div class=\"header__content\">\n            <cui-loader />\n\n            <div class=\"actions\">\n                @if (!initialUtility()) {\n                    <button\n                        type=\"button\"\n                        cuiButton\n                        appearance=\"secondary\"\n                        (click)=\"onCancel()\"\n                    >\n                        {{ t('CANCEL') }}\n                    </button>\n                }\n\n                <button\n                    type=\"button\"\n                    cuiButton\n                    [disabled]=\"!isFormValid()\"\n                    appearance=\"action-violet\"\n                    (click)=\"onSave()\"\n                >\n                    {{ t('DONE') }}\n                </button>\n            </div>\n        </div>\n    </header>\n\n    <ng-content />\n</div>\n", styles: [".header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px}.header__content{display:flex;gap:8px}.actions{display:flex;gap:16px}\n"] }]
         }] });
 
 class CuiCriterionModalCreateComponent {
@@ -9429,11 +9450,11 @@ class CuiCriterionModalCreateComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCriterionModalCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiCriterionModalCreateComponent, isStandalone: true, selector: "ng-component", inputs: { initialUtility: { classPropertyName: "initialUtility", publicName: "initialUtility", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<cui-utility-modal-create [initialUtility]=\"criterion()\">\r\n    <cui-criterion-info\r\n        [criterion]=\"criterion()\"\r\n        [tools]=\"tools\"\r\n        [editorResourceUrl]=\"editorResourceUrl\"\r\n        (validationChanged)=\"isFormValid.set($event)\"\r\n        (criterionCreated)=\"onCriterionCreated($event)\"\r\n    />\r\n</cui-utility-modal-create>\r\n", dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiCriterionInfoComponent, selector: "cui-criterion-info", inputs: ["criterion", "tools", "editorResourceUrl"], outputs: ["criterionChange", "validationChanged", "criterionCreated"] }, { kind: "component", type: CuiUtilityModalCreateComponent, selector: "cui-utility-modal-create", inputs: ["initialUtility"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiCriterionModalCreateComponent, isStandalone: true, selector: "ng-component", inputs: { initialUtility: { classPropertyName: "initialUtility", publicName: "initialUtility", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<cui-utility-modal-create [initialUtility]=\"criterion()\">\n    <cui-criterion-info\n        [criterion]=\"criterion()\"\n        [tools]=\"tools\"\n        [editorResourceUrl]=\"editorResourceUrl\"\n        (validationChanged)=\"isFormValid.set($event)\"\n        (criterionCreated)=\"onCriterionCreated($event)\"\n    />\n</cui-utility-modal-create>\n", dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiCriterionInfoComponent, selector: "cui-criterion-info", inputs: ["criterion", "tools", "editorResourceUrl"], outputs: ["criterionChange", "validationChanged", "criterionCreated"] }, { kind: "component", type: CuiUtilityModalCreateComponent, selector: "cui-utility-modal-create", inputs: ["initialUtility"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCriterionModalCreateComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CuiButtonModule, CuiSvgModule, CuiCriterionInfoComponent, CuiUtilityModalCreateComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-utility-modal-create [initialUtility]=\"criterion()\">\r\n    <cui-criterion-info\r\n        [criterion]=\"criterion()\"\r\n        [tools]=\"tools\"\r\n        [editorResourceUrl]=\"editorResourceUrl\"\r\n        (validationChanged)=\"isFormValid.set($event)\"\r\n        (criterionCreated)=\"onCriterionCreated($event)\"\r\n    />\r\n</cui-utility-modal-create>\r\n" }]
+            args: [{ imports: [CuiButtonModule, CuiSvgModule, CuiCriterionInfoComponent, CuiUtilityModalCreateComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-utility-modal-create [initialUtility]=\"criterion()\">\n    <cui-criterion-info\n        [criterion]=\"criterion()\"\n        [tools]=\"tools\"\n        [editorResourceUrl]=\"editorResourceUrl\"\n        (validationChanged)=\"isFormValid.set($event)\"\n        (criterionCreated)=\"onCriterionCreated($event)\"\n    />\n</cui-utility-modal-create>\n" }]
         }] });
 
 class CuiInstructionInfoFormComponent {
@@ -9727,91 +9748,13 @@ class CuiInstructionModalCreateComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiInstructionModalCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiInstructionModalCreateComponent, isStandalone: true, selector: "ng-component", inputs: { initialUtility: { classPropertyName: "initialUtility", publicName: "initialUtility", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<cui-utility-modal-create [initialUtility]=\"instruction()\">\r\n    <cui-instruction-info\r\n        [instruction]=\"instruction()\"\r\n        [tools]=\"tools\"\r\n        [editorResourceUrl]=\"editorResourceUrl\"\r\n        (validationChanged)=\"isFormValid.set($event)\"\r\n        (instructionCreated)=\"onInstructionCreated($event)\"\r\n    />\r\n</cui-utility-modal-create>\r\n", dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiUtilityModalCreateComponent, selector: "cui-utility-modal-create", inputs: ["initialUtility"] }, { kind: "component", type: CuiInstructionInfoComponent, selector: "cui-instruction-info", inputs: ["instruction", "tools", "editorResourceUrl"], outputs: ["instructionChange", "validationChanged", "instructionCreated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiInstructionModalCreateComponent, isStandalone: true, selector: "ng-component", inputs: { initialUtility: { classPropertyName: "initialUtility", publicName: "initialUtility", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<cui-utility-modal-create [initialUtility]=\"instruction()\">\n    <cui-instruction-info\n        [instruction]=\"instruction()\"\n        [tools]=\"tools\"\n        [editorResourceUrl]=\"editorResourceUrl\"\n        (validationChanged)=\"isFormValid.set($event)\"\n        (instructionCreated)=\"onInstructionCreated($event)\"\n    />\n</cui-utility-modal-create>\n", dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiUtilityModalCreateComponent, selector: "cui-utility-modal-create", inputs: ["initialUtility"] }, { kind: "component", type: CuiInstructionInfoComponent, selector: "cui-instruction-info", inputs: ["instruction", "tools", "editorResourceUrl"], outputs: ["instructionChange", "validationChanged", "instructionCreated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiInstructionModalCreateComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CuiButtonModule, CuiSvgModule, CuiUtilityModalCreateComponent, CuiInstructionInfoComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-utility-modal-create [initialUtility]=\"instruction()\">\r\n    <cui-instruction-info\r\n        [instruction]=\"instruction()\"\r\n        [tools]=\"tools\"\r\n        [editorResourceUrl]=\"editorResourceUrl\"\r\n        (validationChanged)=\"isFormValid.set($event)\"\r\n        (instructionCreated)=\"onInstructionCreated($event)\"\r\n    />\r\n</cui-utility-modal-create>\r\n" }]
+            args: [{ imports: [CuiButtonModule, CuiSvgModule, CuiUtilityModalCreateComponent, CuiInstructionInfoComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-utility-modal-create [initialUtility]=\"instruction()\">\n    <cui-instruction-info\n        [instruction]=\"instruction()\"\n        [tools]=\"tools\"\n        [editorResourceUrl]=\"editorResourceUrl\"\n        (validationChanged)=\"isFormValid.set($event)\"\n        (instructionCreated)=\"onInstructionCreated($event)\"\n    />\n</cui-utility-modal-create>\n" }]
         }] });
 
-class CuiUtilityReadonlyThumbnailComponent {
-    constructor() {
-        this.thumbnailUrl = input.required();
-        this.isVideo = input(false);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiUtilityReadonlyThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiUtilityReadonlyThumbnailComponent, isStandalone: true, selector: "cui-utility-readonly-thumbnail", inputs: { thumbnailUrl: { classPropertyName: "thumbnailUrl", publicName: "thumbnailUrl", isSignal: true, isRequired: true, transformFunction: null }, isVideo: { classPropertyName: "isVideo", publicName: "isVideo", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let url = thumbnailUrl();\r\n\r\n@if (url?.src; as src) {\r\n    @if (isVideo()) {\r\n        <video\r\n            class=\"thumbnail\"\r\n            [src]=\"src\"\r\n            controls\r\n        ></video>\r\n    } @else {\r\n        <img\r\n            class=\"thumbnail\"\r\n            [src]=\"src\"\r\n            [alt]=\"url?.name\"\r\n        />\r\n    }\r\n}\r\n", styles: [".thumbnail{width:100%;max-height:271px;object-fit:contain}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiUtilityReadonlyThumbnailComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cui-utility-readonly-thumbnail', imports: [], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let url = thumbnailUrl();\r\n\r\n@if (url?.src; as src) {\r\n    @if (isVideo()) {\r\n        <video\r\n            class=\"thumbnail\"\r\n            [src]=\"src\"\r\n            controls\r\n        ></video>\r\n    } @else {\r\n        <img\r\n            class=\"thumbnail\"\r\n            [src]=\"src\"\r\n            [alt]=\"url?.name\"\r\n        />\r\n    }\r\n}\r\n", styles: [".thumbnail{width:100%;max-height:271px;object-fit:contain}\n"] }]
-        }] });
-
-class CuiCriterionReadonlyInfoComponent {
-    constructor() {
-        this.hostElement = inject(ElementRef).nativeElement;
-        this.frameApiService = inject(CuiFrameApiService);
-        this.isVideo = false;
-        this.jText = signal(null);
-        this.thumbnailUrl = signal(null);
-        this.isDescriptionEmpty = computed(() => !this.jText()?.notEmpty);
-        this.framerId = input.required();
-        this.element = input(this.hostElement);
-        this.tools = input.required();
-        this.editorResourceUrl = input.required();
-        this.initConfigEffect();
-        this.initFramerIdEffect();
-    }
-    initConfigEffect() {
-        effect(() => {
-            this.editorConfig = { readOnly: true, tools: this.tools(), element: this.element() };
-        });
-    }
-    initFramerIdEffect() {
-        effect(() => {
-            const framerId = this.framerId();
-            if (!framerId) {
-                return;
-            }
-            this.subscription?.unsubscribe();
-            this.initFrameFragments();
-        });
-    }
-    initFrameFragments() {
-        const frameId = this.framerId();
-        this.jText.set(null);
-        this.thumbnailUrl.set(null);
-        if (!frameId) {
-            return;
-        }
-        const fragmentActions = {
-            ["J_TEXT" /* FragmentType.jText */]: (fragment) => {
-                this.jText.set(fragment);
-            },
-            ["RESOURCE_FILE" /* FragmentType.resourceFile */]: (fragment) => {
-                this.setResourceFile(fragment);
-            }
-        };
-        this.subscription = this.frameApiService.getFrame(frameId).subscribe((frame) => {
-            frame.fragments.forEach((fragment) => fragmentActions[fragment.type](fragment));
-        });
-    }
-    setResourceFile(resource) {
-        const url = `${this.editorResourceUrl()}${resource.fileId}`;
-        this.isVideo = resource?.name?.split('.').pop() === 'mp4';
-        if (!url) {
-            return;
-        }
-        this.thumbnailUrl.set({ src: resource.fileId && url, name: resource.name || resource.type });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCriterionReadonlyInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiCriterionReadonlyInfoComponent, isStandalone: true, selector: "cui-criterion-readonly-info", inputs: { framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: false, transformFunction: null }, tools: { classPropertyName: "tools", publicName: "tools", isSignal: true, isRequired: true, transformFunction: null }, editorResourceUrl: { classPropertyName: "editorResourceUrl", publicName: "editorResourceUrl", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    @if (jText()) {\r\n        @if (!isDescriptionEmpty()) {\r\n            @if (thumbnailUrl(); as thumbnailUrl) {\r\n                <cui-utility-readonly-thumbnail [thumbnailUrl]=\"thumbnailUrl\" [isVideo]=\"isVideo\" />\r\n            }\r\n\r\n            @if (jText()?.id; as id) {\r\n                <div class=\"wrapper\">\r\n                    <cui-editor\r\n                        class=\"editor\"\r\n                        [editorApiId]=\"id\"\r\n                        [config]=\"editorConfig\"\r\n                    />\r\n                </div>\r\n            }\r\n        } @else {\r\n            <cui-empty-state [subtitle]=\"t('NO_DESCRIPTION_WAS_PROVIDED')\" />\r\n        }\r\n    }\r\n</ng-container>\r\n", styles: [":host{padding-top:16px;padding-right:16px;padding-left:16px;display:flex;flex-direction:column;gap:12px;height:100%;overflow:auto}.wrapper{padding:12px}.editor{display:block;height:100%;overflow:auto}\n"], dependencies: [{ kind: "component", type: CuiEditorComponent, selector: "cui-editor", inputs: ["editorApiId", "config", "requestSize"], outputs: ["editorEmpty"] }, { kind: "component", type: CuiEmptyStateComponent, selector: "cui-empty-state, [cuiEmptyState]", inputs: ["title", "subtitle"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiUtilityReadonlyThumbnailComponent, selector: "cui-utility-readonly-thumbnail", inputs: ["thumbnailUrl", "isVideo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCriterionReadonlyInfoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cui-criterion-readonly-info', imports: [CuiEditorComponent, CuiEmptyStateComponent, TranslocoDirective, CuiUtilityReadonlyThumbnailComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n    @if (jText()) {\r\n        @if (!isDescriptionEmpty()) {\r\n            @if (thumbnailUrl(); as thumbnailUrl) {\r\n                <cui-utility-readonly-thumbnail [thumbnailUrl]=\"thumbnailUrl\" [isVideo]=\"isVideo\" />\r\n            }\r\n\r\n            @if (jText()?.id; as id) {\r\n                <div class=\"wrapper\">\r\n                    <cui-editor\r\n                        class=\"editor\"\r\n                        [editorApiId]=\"id\"\r\n                        [config]=\"editorConfig\"\r\n                    />\r\n                </div>\r\n            }\r\n        } @else {\r\n            <cui-empty-state [subtitle]=\"t('NO_DESCRIPTION_WAS_PROVIDED')\" />\r\n        }\r\n    }\r\n</ng-container>\r\n", styles: [":host{padding-top:16px;padding-right:16px;padding-left:16px;display:flex;flex-direction:column;gap:12px;height:100%;overflow:auto}.wrapper{padding:12px}.editor{display:block;height:100%;overflow:auto}\n"] }]
-        }], ctorParameters: () => [] });
-
 class CuiReadonlyUtilityModalComponent {
     constructor() {
         this.destroyRef = inject(DestroyRef);
@@ -9836,11 +9779,11 @@ class CuiReadonlyUtilityModalComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiReadonlyUtilityModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiReadonlyUtilityModalComponent, isStandalone: true, selector: "cui-readonly-utility-modal", inputs: { utility: { classPropertyName: "utility", publicName: "utility", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { utilityUnbinded: "utilityUnbinded" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <header class=\"header\">\r\n        <ng-container [ngTemplateOutlet]=\"header\" />\r\n\r\n        <cui-badge\r\n            color=\"violet\"\r\n            class=\"badge\"\r\n        >\r\n            <cui-svg\r\n                class=\"icon\"\r\n                icon=\"cuiIconVariant\"\r\n                color=\"var(--cui-violet-400)\"\r\n            />\r\n            {{ t('INSERTED') }}\r\n        </cui-badge>\r\n\r\n        <button\r\n            type=\"button\"\r\n            cuiButton\r\n            appearance=\"ghost\"\r\n            icon=\"cuiIconX\"\r\n            class=\"button\"\r\n            (click)=\"onClose()\"\r\n        ></button>\r\n    </header>\r\n\r\n    <ng-content />\r\n\r\n    <div class=\"actions\">\r\n        <button\r\n            type=\"button\"\r\n            #button\r\n            cuiButton\r\n            size=\"sm\"\r\n            icon=\"cuiIconLinkBroken\"\r\n            appearance=\"action-violet\"\r\n            [isLoaderShown]=\"isLoading()\"\r\n            (click)=\"onUnbind()\"\r\n        >\r\n            {{ t('UNBIND') }}\r\n        </button>\r\n    </div>\r\n</ng-container>\r\n", styles: [".header{display:flex;gap:8px;align-items:center;padding:16px 24px}.header__title{font-weight:500;font-size:16px;line-height:24px}.button{margin-left:auto}.actions{padding:16px;border-top:1px solid var(--cui-base-200)}.badge{display:flex;gap:4px;align-items:center;font-weight:500;font-size:14px;line-height:20px}\n"], dependencies: [{ kind: "ngmodule", type: CuiBadgeModule }, { kind: "component", type: CuiBadgeComponent, selector: "cui-badge", inputs: ["color", "size", "isWithDot"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiReadonlyUtilityModalComponent, isStandalone: true, selector: "cui-readonly-utility-modal", inputs: { utility: { classPropertyName: "utility", publicName: "utility", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { utilityUnbinded: "utilityUnbinded" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <header class=\"header\">\n        <ng-container [ngTemplateOutlet]=\"header\" />\n\n        <cui-badge\n            color=\"violet\"\n            class=\"badge\"\n        >\n            <cui-svg\n                class=\"icon\"\n                icon=\"cuiIconVariant\"\n                color=\"var(--cui-violet-400)\"\n            />\n            {{ t('INSERTED') }}\n        </cui-badge>\n\n        <button\n            type=\"button\"\n            cuiButton\n            appearance=\"ghost\"\n            icon=\"cuiIconX\"\n            class=\"button\"\n            (click)=\"onClose()\"\n        ></button>\n    </header>\n\n    <ng-content />\n\n    <div class=\"actions\">\n        <button\n            type=\"button\"\n            #button\n            cuiButton\n            size=\"sm\"\n            icon=\"cuiIconLinkBroken\"\n            appearance=\"action-violet\"\n            [isLoaderShown]=\"isLoading()\"\n            (click)=\"onUnbind()\"\n        >\n            {{ t('UNBIND') }}\n        </button>\n    </div>\n</ng-container>\n", styles: [".header{display:flex;gap:8px;align-items:center;padding:16px 24px}.header__title{font-weight:500;font-size:16px;line-height:24px}.button{margin-left:auto}.actions{padding:16px;border-top:1px solid var(--cui-base-200)}.badge{display:flex;gap:4px;align-items:center;font-weight:500;font-size:14px;line-height:20px}\n"], dependencies: [{ kind: "ngmodule", type: CuiBadgeModule }, { kind: "component", type: CuiBadgeComponent, selector: "cui-badge", inputs: ["color", "size", "isWithDot"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiReadonlyUtilityModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-readonly-utility-modal', imports: [CuiBadgeModule, CuiButtonModule, CuiSvgModule, NgTemplateOutlet, TranslocoDirective], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n    <header class=\"header\">\r\n        <ng-container [ngTemplateOutlet]=\"header\" />\r\n\r\n        <cui-badge\r\n            color=\"violet\"\r\n            class=\"badge\"\r\n        >\r\n            <cui-svg\r\n                class=\"icon\"\r\n                icon=\"cuiIconVariant\"\r\n                color=\"var(--cui-violet-400)\"\r\n            />\r\n            {{ t('INSERTED') }}\r\n        </cui-badge>\r\n\r\n        <button\r\n            type=\"button\"\r\n            cuiButton\r\n            appearance=\"ghost\"\r\n            icon=\"cuiIconX\"\r\n            class=\"button\"\r\n            (click)=\"onClose()\"\r\n        ></button>\r\n    </header>\r\n\r\n    <ng-content />\r\n\r\n    <div class=\"actions\">\r\n        <button\r\n            type=\"button\"\r\n            #button\r\n            cuiButton\r\n            size=\"sm\"\r\n            icon=\"cuiIconLinkBroken\"\r\n            appearance=\"action-violet\"\r\n            [isLoaderShown]=\"isLoading()\"\r\n            (click)=\"onUnbind()\"\r\n        >\r\n            {{ t('UNBIND') }}\r\n        </button>\r\n    </div>\r\n</ng-container>\r\n", styles: [".header{display:flex;gap:8px;align-items:center;padding:16px 24px}.header__title{font-weight:500;font-size:16px;line-height:24px}.button{margin-left:auto}.actions{padding:16px;border-top:1px solid var(--cui-base-200)}.badge{display:flex;gap:4px;align-items:center;font-weight:500;font-size:14px;line-height:20px}\n"] }]
+            args: [{ selector: 'cui-readonly-utility-modal', imports: [CuiBadgeModule, CuiButtonModule, CuiSvgModule, NgTemplateOutlet, TranslocoDirective], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    <header class=\"header\">\n        <ng-container [ngTemplateOutlet]=\"header\" />\n\n        <cui-badge\n            color=\"violet\"\n            class=\"badge\"\n        >\n            <cui-svg\n                class=\"icon\"\n                icon=\"cuiIconVariant\"\n                color=\"var(--cui-violet-400)\"\n            />\n            {{ t('INSERTED') }}\n        </cui-badge>\n\n        <button\n            type=\"button\"\n            cuiButton\n            appearance=\"ghost\"\n            icon=\"cuiIconX\"\n            class=\"button\"\n            (click)=\"onClose()\"\n        ></button>\n    </header>\n\n    <ng-content />\n\n    <div class=\"actions\">\n        <button\n            type=\"button\"\n            #button\n            cuiButton\n            size=\"sm\"\n            icon=\"cuiIconLinkBroken\"\n            appearance=\"action-violet\"\n            [isLoaderShown]=\"isLoading()\"\n            (click)=\"onUnbind()\"\n        >\n            {{ t('UNBIND') }}\n        </button>\n    </div>\n</ng-container>\n", styles: [".header{display:flex;gap:8px;align-items:center;padding:16px 24px}.header__title{font-weight:500;font-size:16px;line-height:24px}.button{margin-left:auto}.actions{padding:16px;border-top:1px solid var(--cui-base-200)}.badge{display:flex;gap:4px;align-items:center;font-weight:500;font-size:14px;line-height:20px}\n"] }]
         }] });
 
 class CuiReadonlyCriterionModalComponent {
@@ -9862,7 +9805,7 @@ class CuiReadonlyCriterionModalComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiReadonlyCriterionModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiReadonlyCriterionModalComponent, isStandalone: true, selector: "cui-readonly-criterion-modal", inputs: { criterion: { classPropertyName: "criterion", publicName: "criterion", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<cui-readonly-utility-modal\r\n    [utility]=\"criterion()\"\r\n    (utilityUnbinded)=\"onUnbind($event)\"\r\n>\r\n    <ng-container *transloco=\"let t\">\r\n        <div\r\n            #scrollContainer\r\n            class=\"info\"\r\n        >\r\n            <h3 class=\"title\">{{ criterion().storageElement.title }}</h3>\r\n\r\n            <cui-criterion-readonly-info\r\n                [framerId]=\"framerId()\"\r\n                [editorResourceUrl]=\"editorResourceUrl\"\r\n                [tools]=\"tools\"\r\n                [element]=\"scrollContainer\"\r\n                class=\"info__block\"\r\n            />\r\n        </div>\r\n    </ng-container>\r\n</cui-readonly-utility-modal>\r\n", styles: [".info{padding:16px 8px;display:flex;flex-direction:column;height:calc(100vh - 177px);overflow:auto}.info__block{overflow:visible}.title{padding-right:16px;padding-left:16px;font-weight:500;font-size:16px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: CuiBadgeModule }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiCriterionReadonlyInfoComponent, selector: "cui-criterion-readonly-info", inputs: ["framerId", "element", "tools", "editorResourceUrl"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiReadonlyUtilityModalComponent, selector: "cui-readonly-utility-modal", inputs: ["utility"], outputs: ["utilityUnbinded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiReadonlyCriterionModalComponent, isStandalone: true, selector: "cui-readonly-criterion-modal", inputs: { criterion: { classPropertyName: "criterion", publicName: "criterion", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<cui-readonly-utility-modal\n    [utility]=\"criterion()\"\n    (utilityUnbinded)=\"onUnbind($event)\"\n>\n    <ng-container *transloco=\"let t\">\n        <div\n            #scrollContainer\n            class=\"info\"\n        >\n            <h3 class=\"title\">{{ criterion().storageElement.title }}</h3>\n\n            <cui-criterion-readonly-info\n                [framerId]=\"framerId()\"\n                [editorResourceUrl]=\"editorResourceUrl\"\n                [tools]=\"tools\"\n                [element]=\"scrollContainer\"\n                class=\"info__block\"\n            />\n        </div>\n    </ng-container>\n</cui-readonly-utility-modal>\n", styles: [".info{padding:16px 8px;display:flex;flex-direction:column;height:calc(100vh - 177px);overflow:auto}.info__block{overflow:visible}.title{padding-right:16px;padding-left:16px;font-weight:500;font-size:16px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: CuiBadgeModule }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiCriterionReadonlyInfoComponent, selector: "cui-criterion-readonly-info", inputs: ["framerId", "element", "tools", "editorResourceUrl"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiReadonlyUtilityModalComponent, selector: "cui-readonly-utility-modal", inputs: ["utility"], outputs: ["utilityUnbinded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiReadonlyCriterionModalComponent, decorators: [{
             type: Component,
@@ -9873,74 +9816,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         CuiCriterionReadonlyInfoComponent,
                         TranslocoDirective,
                         CuiReadonlyUtilityModalComponent
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-readonly-utility-modal\r\n    [utility]=\"criterion()\"\r\n    (utilityUnbinded)=\"onUnbind($event)\"\r\n>\r\n    <ng-container *transloco=\"let t\">\r\n        <div\r\n            #scrollContainer\r\n            class=\"info\"\r\n        >\r\n            <h3 class=\"title\">{{ criterion().storageElement.title }}</h3>\r\n\r\n            <cui-criterion-readonly-info\r\n                [framerId]=\"framerId()\"\r\n                [editorResourceUrl]=\"editorResourceUrl\"\r\n                [tools]=\"tools\"\r\n                [element]=\"scrollContainer\"\r\n                class=\"info__block\"\r\n            />\r\n        </div>\r\n    </ng-container>\r\n</cui-readonly-utility-modal>\r\n", styles: [".info{padding:16px 8px;display:flex;flex-direction:column;height:calc(100vh - 177px);overflow:auto}.info__block{overflow:visible}.title{padding-right:16px;padding-left:16px;font-weight:500;font-size:16px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow:visible}\n"] }]
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-readonly-utility-modal\n    [utility]=\"criterion()\"\n    (utilityUnbinded)=\"onUnbind($event)\"\n>\n    <ng-container *transloco=\"let t\">\n        <div\n            #scrollContainer\n            class=\"info\"\n        >\n            <h3 class=\"title\">{{ criterion().storageElement.title }}</h3>\n\n            <cui-criterion-readonly-info\n                [framerId]=\"framerId()\"\n                [editorResourceUrl]=\"editorResourceUrl\"\n                [tools]=\"tools\"\n                [element]=\"scrollContainer\"\n                class=\"info__block\"\n            />\n        </div>\n    </ng-container>\n</cui-readonly-utility-modal>\n", styles: [".info{padding:16px 8px;display:flex;flex-direction:column;height:calc(100vh - 177px);overflow:auto}.info__block{overflow:visible}.title{padding-right:16px;padding-left:16px;font-weight:500;font-size:16px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow:visible}\n"] }]
         }] });
 
-class CuiInstructionReadonlyInfoComponent {
-    constructor() {
-        this.hostElement = inject(ElementRef).nativeElement;
-        this.frameApiService = inject(CuiFrameApiService);
-        this.isVideo = false;
-        this.jText = signal(null);
-        this.thumbnailUrl = signal(null);
-        this.isDescriptionEmpty = computed(() => !this.jText()?.notEmpty);
-        this.framerId = input.required();
-        this.element = input(this.hostElement);
-        this.tools = input.required();
-        this.editorResourceUrl = input.required();
-        this.initConfigEffect();
-        this.initFramerIdEffect();
-    }
-    initConfigEffect() {
-        effect(() => {
-            this.editorConfig = { readOnly: true, tools: this.tools(), element: this.element() };
-        });
-    }
-    initFramerIdEffect() {
-        effect(() => {
-            const framerId = this.framerId();
-            if (!framerId) {
-                return;
-            }
-            this.subscription?.unsubscribe();
-            this.initFrameFragments();
-        });
-    }
-    initFrameFragments() {
-        const frameId = this.framerId();
-        this.jText.set(null);
-        this.thumbnailUrl.set(null);
-        if (!frameId) {
-            return;
-        }
-        const fragmentActions = {
-            ["J_TEXT" /* FragmentType.jText */]: (fragment) => {
-                this.jText.set(fragment);
-            },
-            ["RESOURCE_FILE" /* FragmentType.resourceFile */]: (fragment) => {
-                this.setResourceFile(fragment);
-            }
-        };
-        this.subscription = this.frameApiService.getFrame(frameId).subscribe((frame) => {
-            frame.fragments.forEach((fragment) => fragmentActions[fragment.type](fragment));
-        });
-    }
-    setResourceFile(resource) {
-        const url = `${this.editorResourceUrl()}${resource.fileId}`;
-        this.isVideo = resource?.name?.split('.').pop() === 'mp4';
-        if (!url) {
-            return;
-        }
-        this.thumbnailUrl.set({ src: resource.fileId && url, name: resource.name || resource.type });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiInstructionReadonlyInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiInstructionReadonlyInfoComponent, isStandalone: true, selector: "cui-instruction-readonly-info", inputs: { framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: false, transformFunction: null }, tools: { classPropertyName: "tools", publicName: "tools", isSignal: true, isRequired: true, transformFunction: null }, editorResourceUrl: { classPropertyName: "editorResourceUrl", publicName: "editorResourceUrl", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    @if (jText()) {\r\n        @if (!isDescriptionEmpty()) {\r\n            @if (thumbnailUrl(); as thumbnailUrl) {\r\n                <cui-utility-readonly-thumbnail [thumbnailUrl]=\"thumbnailUrl\" [isVideo]=\"isVideo\" />\r\n            }\r\n\r\n            @if (jText()?.id; as id) {\r\n                <div class=\"wrapper\">\r\n                    <cui-editor\r\n                        class=\"editor\"\r\n                        [editorApiId]=\"id\"\r\n                        [config]=\"editorConfig\"\r\n                    />\r\n                </div>\r\n            }\r\n        } @else {\r\n            <cui-empty-state [subtitle]=\"t('NO_DESCRIPTION_WAS_PROVIDED')\" />\r\n        }\r\n    }\r\n</ng-container>\r\n", styles: [":host{padding-top:16px;padding-right:16px;padding-left:16px;display:flex;flex-direction:column;gap:12px;height:100%;overflow:auto}.wrapper{padding:12px}.editor{display:block;height:100%;overflow:auto}\n"], dependencies: [{ kind: "component", type: CuiEditorComponent, selector: "cui-editor", inputs: ["editorApiId", "config", "requestSize"], outputs: ["editorEmpty"] }, { kind: "component", type: CuiEmptyStateComponent, selector: "cui-empty-state, [cuiEmptyState]", inputs: ["title", "subtitle"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiUtilityReadonlyThumbnailComponent, selector: "cui-utility-readonly-thumbnail", inputs: ["thumbnailUrl", "isVideo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiInstructionReadonlyInfoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cui-instruction-readonly-info', imports: [CuiEditorComponent, CuiEmptyStateComponent, TranslocoDirective, CuiUtilityReadonlyThumbnailComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n    @if (jText()) {\r\n        @if (!isDescriptionEmpty()) {\r\n            @if (thumbnailUrl(); as thumbnailUrl) {\r\n                <cui-utility-readonly-thumbnail [thumbnailUrl]=\"thumbnailUrl\" [isVideo]=\"isVideo\" />\r\n            }\r\n\r\n            @if (jText()?.id; as id) {\r\n                <div class=\"wrapper\">\r\n                    <cui-editor\r\n                        class=\"editor\"\r\n                        [editorApiId]=\"id\"\r\n                        [config]=\"editorConfig\"\r\n                    />\r\n                </div>\r\n            }\r\n        } @else {\r\n            <cui-empty-state [subtitle]=\"t('NO_DESCRIPTION_WAS_PROVIDED')\" />\r\n        }\r\n    }\r\n</ng-container>\r\n", styles: [":host{padding-top:16px;padding-right:16px;padding-left:16px;display:flex;flex-direction:column;gap:12px;height:100%;overflow:auto}.wrapper{padding:12px}.editor{display:block;height:100%;overflow:auto}\n"] }]
-        }], ctorParameters: () => [] });
-
 class CuiReadonlyInstructionModalComponent {
     constructor() {
         this.cuiDialogContext = inject(CUI_DIALOG_CONTEXT);
@@ -9960,7 +9838,7 @@ class CuiReadonlyInstructionModalComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiReadonlyInstructionModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiReadonlyInstructionModalComponent, isStandalone: true, selector: "cui-readonly-instruction-modal", inputs: { instruction: { classPropertyName: "instruction", publicName: "instruction", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <cui-readonly-utility-modal [utility]=\"instruction()\" (utilityUnbinded)=\"onUnbind($event)\">\r\n            <div\r\n                #scrollContainer\r\n                class=\"info\"\r\n            >\r\n                <h3 class=\"title\">{{ instruction().storageElement.title }}</h3>\r\n\r\n                <cui-instruction-readonly-info\r\n                    [framerId]=\"framerId()\"\r\n                    [editorResourceUrl]=\"editorResourceUrl\"\r\n                    [tools]=\"tools\"\r\n                    [element]=\"scrollContainer\"\r\n                    class=\"info__block\"\r\n                />\r\n            </div>\r\n    </cui-readonly-utility-modal>\r\n</ng-container>\r\n", styles: [".info{padding:16px 8px;display:flex;flex-direction:column;height:calc(100vh - 177px);overflow:auto}.info__block{overflow:visible}.title{padding-right:16px;padding-left:16px;font-weight:500;font-size:16px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: CuiBadgeModule }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiInstructionReadonlyInfoComponent, selector: "cui-instruction-readonly-info", inputs: ["framerId", "element", "tools", "editorResourceUrl"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiReadonlyUtilityModalComponent, selector: "cui-readonly-utility-modal", inputs: ["utility"], outputs: ["utilityUnbinded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiReadonlyInstructionModalComponent, isStandalone: true, selector: "cui-readonly-instruction-modal", inputs: { instruction: { classPropertyName: "instruction", publicName: "instruction", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <cui-readonly-utility-modal [utility]=\"instruction()\" (utilityUnbinded)=\"onUnbind($event)\">\n            <div\n                #scrollContainer\n                class=\"info\"\n            >\n                <h3 class=\"title\">{{ instruction().storageElement.title }}</h3>\n\n                <cui-instruction-readonly-info\n                    [framerId]=\"framerId()\"\n                    [editorResourceUrl]=\"editorResourceUrl\"\n                    [tools]=\"tools\"\n                    [element]=\"scrollContainer\"\n                    class=\"info__block\"\n                />\n            </div>\n    </cui-readonly-utility-modal>\n</ng-container>\n", styles: [".info{padding:16px 8px;display:flex;flex-direction:column;height:calc(100vh - 177px);overflow:auto}.info__block{overflow:visible}.title{padding-right:16px;padding-left:16px;font-weight:500;font-size:16px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: CuiBadgeModule }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiInstructionReadonlyInfoComponent, selector: "cui-instruction-readonly-info", inputs: ["framerId", "element", "tools", "editorResourceUrl"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiReadonlyUtilityModalComponent, selector: "cui-readonly-utility-modal", inputs: ["utility"], outputs: ["utilityUnbinded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiReadonlyInstructionModalComponent, decorators: [{
             type: Component,
@@ -9971,7 +9849,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         CuiInstructionReadonlyInfoComponent,
                         TranslocoDirective,
                         CuiReadonlyUtilityModalComponent
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n    <cui-readonly-utility-modal [utility]=\"instruction()\" (utilityUnbinded)=\"onUnbind($event)\">\r\n            <div\r\n                #scrollContainer\r\n                class=\"info\"\r\n            >\r\n                <h3 class=\"title\">{{ instruction().storageElement.title }}</h3>\r\n\r\n                <cui-instruction-readonly-info\r\n                    [framerId]=\"framerId()\"\r\n                    [editorResourceUrl]=\"editorResourceUrl\"\r\n                    [tools]=\"tools\"\r\n                    [element]=\"scrollContainer\"\r\n                    class=\"info__block\"\r\n                />\r\n            </div>\r\n    </cui-readonly-utility-modal>\r\n</ng-container>\r\n", styles: [".info{padding:16px 8px;display:flex;flex-direction:column;height:calc(100vh - 177px);overflow:auto}.info__block{overflow:visible}.title{padding-right:16px;padding-left:16px;font-weight:500;font-size:16px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow:visible}\n"] }]
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    <cui-readonly-utility-modal [utility]=\"instruction()\" (utilityUnbinded)=\"onUnbind($event)\">\n            <div\n                #scrollContainer\n                class=\"info\"\n            >\n                <h3 class=\"title\">{{ instruction().storageElement.title }}</h3>\n\n                <cui-instruction-readonly-info\n                    [framerId]=\"framerId()\"\n                    [editorResourceUrl]=\"editorResourceUrl\"\n                    [tools]=\"tools\"\n                    [element]=\"scrollContainer\"\n                    class=\"info__block\"\n                />\n            </div>\n    </cui-readonly-utility-modal>\n</ng-container>\n", styles: [".info{padding:16px 8px;display:flex;flex-direction:column;height:calc(100vh - 177px);overflow:auto}.info__block{overflow:visible}.title{padding-right:16px;padding-left:16px;font-weight:500;font-size:16px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow:visible}\n"] }]
         }] });
 
 class CuiUtilityModalComponent {
@@ -9986,16 +9864,138 @@ class CuiUtilityModalComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiUtilityModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiUtilityModalComponent, isStandalone: true, selector: "cui-utility-modal", providers: [CuiRenderDynamicComponentsService], ngImport: i0, template: "<cui-render-dynamic-components />\r\n", styles: [".host{display:block;height:calc(100vh - 40px)}\n"], dependencies: [{ kind: "component", type: CuiRenderDynamicComponentsComponent, selector: "cui-render-dynamic-components" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiUtilityModalComponent, isStandalone: true, selector: "cui-utility-modal", providers: [CuiRenderDynamicComponentsService], ngImport: i0, template: "<cui-render-dynamic-components />\n", styles: [".host{display:block;height:calc(100vh - 40px)}\n"], dependencies: [{ kind: "component", type: CuiRenderDynamicComponentsComponent, selector: "cui-render-dynamic-components" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiUtilityModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-utility-modal', imports: [CuiRenderDynamicComponentsComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiRenderDynamicComponentsService], template: "<cui-render-dynamic-components />\r\n", styles: [".host{display:block;height:calc(100vh - 40px)}\n"] }]
+            args: [{ selector: 'cui-utility-modal', imports: [CuiRenderDynamicComponentsComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiRenderDynamicComponentsService], template: "<cui-render-dynamic-components />\n", styles: [".host{display:block;height:calc(100vh - 40px)}\n"] }]
+        }], ctorParameters: () => [] });
+
+class CuiCriterionInfoComponent {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.translocoService = inject(TranslocoService);
+        this.cuiIdService = inject(CuiIdService);
+        this.cuiCategoriesModalService = inject(CuiSelectedCategoryService);
+        this.treeStructNavigatorApiService = inject(CuiTreeStructNavigatorApiService);
+        this.criterionApiService = inject(UTILITY_MODAL_SERVICE_TOKEN);
+        this.skipCategoryChange = false;
+        this.TYPE = "CRITERION_STORAGE" /* TreeStructType.Criteria */;
+        this.categoryId = this.cuiIdService.generate();
+        this.category = this.cuiCategoriesModalService.category;
+        this.isFormValid = signal(false);
+        this.prevCategoryId = signal(null);
+        this.editorConfig = signal(null);
+        this.labelColor = computed(() => this.category()?.title ? 'var(--cui-base-900)' : 'var(--cui-base-400)');
+        this.selectTitle = computed(() => this.category()?.title ?? this.translocoService.translate('SELECT') + '...');
+        this.element = viewChild('scrollContent');
+        this.criterion = model();
+        this.tools = input.required();
+        this.editorResourceUrl = input.required();
+        this.validationChanged = output();
+        this.criterionCreated = output();
+        this.initConfigEffect();
+        this.initCategoryEffect();
+    }
+    ngOnInit() {
+        this.initCategory();
+    }
+    onFormChanged(values, criterionId) {
+        const actions = {
+            title: (title) => this.changeTitle(title, criterionId)
+        };
+        forkJoin(Object.keys(values).map((key) => actions[key](values[key] || '')))
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe();
+    }
+    onFormValidationChanged(isValid) {
+        this.isFormValid.set(isValid);
+        this.validationChanged.emit(isValid);
+    }
+    initCategoryEffect() {
+        effect(() => {
+            const category = this.category();
+            const storageObjectCriterion = untracked(this.criterion);
+            if (!category || this.skipCategoryChange) {
+                this.skipCategoryChange = false;
+                return;
+            }
+            if (storageObjectCriterion) {
+                this.changeCategory(category.id, storageObjectCriterion.id);
+                return;
+            }
+            this.createCriterion(category.id);
+        });
+    }
+    initConfigEffect() {
+        effect(() => {
+            const element = this.element()?.nativeElement;
+            if (!element) {
+                return;
+            }
+            this.editorConfig.set({ tools: this.tools(), element });
+        });
+    }
+    initCategory() {
+        const storageObjectId = this.criterion()?.id;
+        if (!storageObjectId) {
+            return;
+        }
+        this.treeStructNavigatorApiService
+            .getCategory(storageObjectId, "CRITERION_STORAGE" /* TreeStructType.Criteria */)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((category) => {
+            this.skipCategoryChange = true;
+            this.prevCategoryId.set(category.id);
+            this.cuiCategoriesModalService.setCurrentCategory(category);
+        });
+    }
+    changeCategory(categoryId, targetId) {
+        const prevCategoryId = untracked(this.prevCategoryId);
+        if (!prevCategoryId) {
+            return;
+        }
+        this.subscription?.unsubscribe();
+        this.subscription = this.treeStructNavigatorApiService
+            .moveElement({
+            type: "MOVING_TARGET_TREE_STRUCT" /* MovingType.TARGET_TREE_STRUCT */,
+            movableItemId: targetId,
+            treeStructTargetItemId: categoryId,
+            treeStructMovableItemId: prevCategoryId
+        })
+            .subscribe(() => this.prevCategoryId.set(categoryId));
+    }
+    createCriterion(categoryId) {
+        this.criterionCreated.emit(categoryId);
+        this.prevCategoryId.set(categoryId);
+    }
+    changeTitle(value, criterionId) {
+        return this.criterionApiService.changeTitle(criterionId, value).pipe(finalize(() => this.criterion.update((prev) => ({
+            ...prev,
+            storageElement: { ...prev.storageElement, title: value }
+        }))));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCriterionInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiCriterionInfoComponent, isStandalone: true, selector: "cui-criterion-info", inputs: { criterion: { classPropertyName: "criterion", publicName: "criterion", isSignal: true, isRequired: false, transformFunction: null }, tools: { classPropertyName: "tools", publicName: "tools", isSignal: true, isRequired: true, transformFunction: null }, editorResourceUrl: { classPropertyName: "editorResourceUrl", publicName: "editorResourceUrl", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { criterion: "criterionChange", validationChanged: "validationChanged", criterionCreated: "criterionCreated" }, providers: [CuiSelectedCategoryService], viewQueries: [{ propertyName: "element", first: true, predicate: ["scrollContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    class=\"wrapper\"\n    *transloco=\"let t\"\n>\n    <div\n        #scrollContent\n        class=\"content content_scrollable\"\n    >\n        <div class=\"category\">\n            <cui-form-field>\n                <label\n                    cuiLabel\n                    [for]=\"categoryId\"\n                    [isRequired]=\"true\"\n                >\n                    {{ t('SELECT_CATEGORY') }}\n                </label>\n                <cui-categories\n                    [buttonId]=\"categoryId\"\n                    [treeStructType]=\"TYPE\"\n                >\n                    <div class=\"select\">\n                        <span [style.color]=\"labelColor()\">\n                            {{ selectTitle() }}\n                        </span>\n\n                        <cui-svg icon=\"cuiIconChevronDown\" />\n                    </div>\n                </cui-categories>\n            </cui-form-field>\n        </div>\n\n        @let criterionData = criterion();\n        @let editorConfigData = editorConfig();\n\n        @if (editorConfigData && criterionData) {\n            <cui-criterion-info-form\n                [config]=\"editorConfigData\"\n                [baseResourceUrl]=\"editorResourceUrl()\"\n                [title]=\"criterionData.storageElement.title\"\n                [framerId]=\"criterionData.storageElement.framerCriterionId\"\n                class=\"utility\"\n                (isFormValidChanged)=\"onFormValidationChanged($event)\"\n                (formChanged)=\"onFormChanged($event, criterionData.id)\"\n            />\n        }\n    </div>\n</div>\n", styles: [".wrapper{display:flex;flex-direction:column;height:100%}.content{height:calc(100vh - 109px)}.content_scrollable{overflow:auto}.category{padding-top:16px;padding-right:23px;padding-left:23px}.select{padding:7px 13px;font-weight:400;font-size:14px;line-height:20px;display:flex;justify-content:space-between;height:36px;border-radius:8px;border:1px solid var(--cui-base-200);color:var(--cui-base-900);background:var(--cui-input)}.utility{--editor-height: none}\n"], dependencies: [{ kind: "ngmodule", type: CuiBadgeModule }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiCategoriesComponent, selector: "cui-categories", inputs: ["treeStructType", "buttonId", "disabled"] }, { kind: "ngmodule", type: CuiDialogModule }, { kind: "ngmodule", type: CuiFormFieldModule }, { kind: "component", type: CuiFormFieldComponent, selector: "cui-form-field" }, { kind: "component", type: CuiCriterionInfoFormComponent, selector: "cui-criterion-info-form", inputs: ["title", "framerId", "baseResourceUrl", "config"], outputs: ["formChanged", "isFormValidChanged"] }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "component", type: CuiLabelComponent, selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i4.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCriterionInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-criterion-info', imports: [
+                        CuiBadgeModule,
+                        CuiButtonModule,
+                        CuiCategoriesComponent,
+                        CuiDialogModule,
+                        CuiFormFieldModule,
+                        CuiCriterionInfoFormComponent,
+                        CuiLabelModule,
+                        CuiSvgModule,
+                        TranslocoModule
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiSelectedCategoryService], template: "<div\n    class=\"wrapper\"\n    *transloco=\"let t\"\n>\n    <div\n        #scrollContent\n        class=\"content content_scrollable\"\n    >\n        <div class=\"category\">\n            <cui-form-field>\n                <label\n                    cuiLabel\n                    [for]=\"categoryId\"\n                    [isRequired]=\"true\"\n                >\n                    {{ t('SELECT_CATEGORY') }}\n                </label>\n                <cui-categories\n                    [buttonId]=\"categoryId\"\n                    [treeStructType]=\"TYPE\"\n                >\n                    <div class=\"select\">\n                        <span [style.color]=\"labelColor()\">\n                            {{ selectTitle() }}\n                        </span>\n\n                        <cui-svg icon=\"cuiIconChevronDown\" />\n                    </div>\n                </cui-categories>\n            </cui-form-field>\n        </div>\n\n        @let criterionData = criterion();\n        @let editorConfigData = editorConfig();\n\n        @if (editorConfigData && criterionData) {\n            <cui-criterion-info-form\n                [config]=\"editorConfigData\"\n                [baseResourceUrl]=\"editorResourceUrl()\"\n                [title]=\"criterionData.storageElement.title\"\n                [framerId]=\"criterionData.storageElement.framerCriterionId\"\n                class=\"utility\"\n                (isFormValidChanged)=\"onFormValidationChanged($event)\"\n                (formChanged)=\"onFormChanged($event, criterionData.id)\"\n            />\n        }\n    </div>\n</div>\n", styles: [".wrapper{display:flex;flex-direction:column;height:100%}.content{height:calc(100vh - 109px)}.content_scrollable{overflow:auto}.category{padding-top:16px;padding-right:23px;padding-left:23px}.select{padding:7px 13px;font-weight:400;font-size:14px;line-height:20px;display:flex;justify-content:space-between;height:36px;border-radius:8px;border:1px solid var(--cui-base-200);color:var(--cui-base-900);background:var(--cui-input)}.utility{--editor-height: none}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AngularOutsideLoaderService, CUI_ALERTS, CUI_ALERT_CONTEXT, CUI_ALERT_DEFAULT_OPTIONS, CUI_ALERT_OPTIONS, CUI_ANIMATIONS_DEFAULT_DURATION, 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_INPUT_TIME_DEFAULT_OPTIONS, CUI_INPUT_TIME_OPTIONS, CUI_NOTIFICATION_DEFAULT_OPTIONS, CUI_NOTIFICATION_ICONS, CUI_NOTIFICATION_ICON_OPTIONS, CUI_NOTIFICATION_ICON_OPTIONS_DEFAULT_MODE, CUI_NOTIFICATION_ICON_OPTIONS_LIGHT_MODE, 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, CUI_TOOLTIP_COMPONENT, CUI_TOOLTIP_DEFAULT_OPTIONS, CUI_TOOLTIP_DIRECTIONS, CUI_TOOLTIP_OPTIONS, CUI_TOOLTIP_PROVIDERS, CuiAccordionComponent, CuiAccordionDirective, CuiAccordionItemComponent, CuiAccordionModule, CuiAlertComponent, CuiAlertModule, CuiAlertService, CuiAlertsComponent, CuiAttachesTool, CuiAuthBase, CuiAuthService, CuiBadgeComponent, CuiBadgeModule, CuiBannerComponent, CuiBannerModule, CuiBreadcrumbComponent, CuiBreadcrumbsComponent, CuiBreadcrumbsModule, CuiButtonComponent, CuiButtonGroupComponent, CuiButtonGroupModule, CuiButtonModule, CuiCardWrapperComponent, CuiCategoriesComponent, CuiCheckboxComponent, CuiCheckboxModule, CuiChecklistBlockComponent, CuiContentWrapperComponent, CuiContextMenuComponent, CuiContextMenuModule, CuiCriterionModalCreateComponent, CuiDeleteModalComponent, CuiDialogActionsComponent, CuiDialogComponent, CuiDialogHeaderComponent, CuiDialogModule, CuiDialogService, CuiDialogsComponent, CuiDropdownDirective, CuiDropdownWrapperComponent, CuiEditorBlockComponent, CuiEditorComponent, CuiEditorModalComponent, CuiEditorReadonlyComponent, CuiEditorTranslations, CuiEmptyStateComponent, CuiFileUploaderStatus, CuiFormFieldComponent, CuiFormFieldModule, CuiGeneralControlErrorHintComponent, CuiGhostInputComponent, CuiHeaderTool, CuiHintComponent, CuiHintModule, CuiIconButtonComponent, CuiIconButtonModule, CuiImageTool, CuiInputModule, CuiInputNumberComponent, CuiInputNumberModule, CuiInputPasswordComponent, CuiInputPasswordModule, CuiInputTextComponent, CuiInputTimeComponent, CuiInputTimeModule, CuiInstructionModalCreateComponent, CuiLabelComponent, CuiLabelModule, CuiLayoutComponent, CuiLetterBoxComponent, CuiLinkMarker, CuiListTool, CuiLoaderComponent, CuiLoaderService, CuiLoadingState, CuiNotificationComponent, CuiNotificationModule, CuiPositionService, CuiRadioComponent, CuiRadioModule, CuiReadonlyCriterionModalComponent, CuiReadonlyInstructionModalComponent, CuiRenderDynamicComponentsComponent, CuiRenderDynamicComponentsService, CuiRoleMarker, CuiRootComponent, CuiRootModule, CuiSelectComponent, CuiSelectModule, CuiSelectedCategoryService, CuiSidebarContainerComponent, CuiSidebarHeaderComponent, CuiSidebarNavigationComponent, CuiSidebarNavigationContainerComponent, CuiSidebarNavigationItemComponent, CuiSidebarService, CuiSvgComponent, CuiSvgModule, CuiTabComponent, CuiTabsComponent, CuiTabsModule, CuiTextFieldController, CuiTextFieldControllerModule, CuiTextFieldIconLeftDirective, CuiTextFieldIdDirective, CuiTextFieldIsErrorDirective, CuiTextFieldPlaceholderDirective, CuiTextFieldSizeDirective, CuiTextareaComponent, CuiTextareaModule, CuiThemeService, CuiToggleComponent, CuiToggleModule, CuiToolMarker, CuiTooltip, CuiTooltipComponent, CuiTooltipDescribe, CuiTooltipDirective, CuiTooltipDriver, CuiTooltipHost, CuiTooltipHover, CuiTooltipManual, CuiTooltipOptionsDirective, CuiTooltipOverflow, CuiTooltipPointer, CuiTooltipPosition, CuiTooltipService, CuiTooltipUnstyled, CuiTooltipUnstyledComponent, CuiTooltips, CuiUtilityModalComponent, CuiVideoTool, CuiVisualViewportService, UTILITY_MODAL_SERVICE_TOKEN, cuiAuthInterceptor, cuiCreateDefaultValidators, cuiErrorHandlerInterceptor, cuiGetDuration, cuiIsObscured, cuiLoaderInterceptor, cuiOverrideOptions, cuiProvideEditor, cuiRemoveSpaces, cuiReplace, cuiToAnimationOptions, cuiTooltipOptionsProvider, cuiXNdjsonInterceptor, provideCuiAuth };
+export { AngularOutsideLoaderService, CUI_ALERTS, CUI_ALERT_CONTEXT, CUI_ALERT_DEFAULT_OPTIONS, CUI_ALERT_OPTIONS, CUI_ANIMATIONS_DEFAULT_DURATION, 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_INPUT_TIME_DEFAULT_OPTIONS, CUI_INPUT_TIME_OPTIONS, CUI_NOTIFICATION_DEFAULT_OPTIONS, CUI_NOTIFICATION_ICONS, CUI_NOTIFICATION_ICON_OPTIONS, CUI_NOTIFICATION_ICON_OPTIONS_DEFAULT_MODE, CUI_NOTIFICATION_ICON_OPTIONS_LIGHT_MODE, 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, CUI_TOOLTIP_COMPONENT, CUI_TOOLTIP_DEFAULT_OPTIONS, CUI_TOOLTIP_DIRECTIONS, CUI_TOOLTIP_OPTIONS, CUI_TOOLTIP_PROVIDERS, CuiAccordionComponent, CuiAccordionDirective, CuiAccordionItemComponent, CuiAccordionModule, CuiAlertComponent, CuiAlertModule, CuiAlertService, CuiAlertsComponent, CuiAttachesTool, CuiAuthBase, CuiAuthService, CuiBadgeComponent, CuiBadgeModule, CuiBannerComponent, CuiBannerModule, CuiBreadcrumbComponent, CuiBreadcrumbsComponent, CuiBreadcrumbsModule, CuiButtonComponent, CuiButtonGroupComponent, CuiButtonGroupModule, CuiButtonModule, CuiCardWrapperComponent, CuiCategoriesComponent, CuiCheckboxComponent, CuiCheckboxModule, CuiChecklistBlockComponent, CuiContentWrapperComponent, CuiContextMenuComponent, CuiContextMenuModule, CuiCriterionInfoComponent, CuiCriterionModalCreateComponent, CuiCriterionReadonlyInfoComponent, CuiDeleteModalComponent, CuiDialogActionsComponent, CuiDialogComponent, CuiDialogHeaderComponent, CuiDialogModule, CuiDialogService, CuiDialogsComponent, CuiDropdownDirective, CuiDropdownWrapperComponent, CuiEditorBlockComponent, CuiEditorComponent, CuiEditorModalComponent, CuiEditorReadonlyComponent, CuiEditorTranslations, CuiEmptyStateComponent, CuiFileUploaderStatus, CuiFormFieldComponent, CuiFormFieldModule, CuiGeneralControlErrorHintComponent, CuiGhostInputComponent, CuiHeaderTool, CuiHintComponent, CuiHintModule, CuiIconButtonComponent, CuiIconButtonModule, CuiImageTool, CuiInputModule, CuiInputNumberComponent, CuiInputNumberModule, CuiInputPasswordComponent, CuiInputPasswordModule, CuiInputTextComponent, CuiInputTimeComponent, CuiInputTimeModule, CuiInstructionInfoComponent, CuiInstructionModalCreateComponent, CuiInstructionReadonlyInfoComponent, CuiLabelComponent, CuiLabelModule, CuiLayoutComponent, CuiLetterBoxComponent, CuiLinkMarker, CuiListTool, CuiLoaderComponent, CuiLoaderService, CuiLoadingState, CuiNotificationComponent, CuiNotificationModule, CuiPositionService, CuiRadioComponent, CuiRadioModule, CuiReadonlyCriterionModalComponent, CuiReadonlyInstructionModalComponent, CuiRenderDynamicComponentsComponent, CuiRenderDynamicComponentsService, CuiRoleMarker, CuiRootComponent, CuiRootModule, CuiSelectComponent, CuiSelectModule, CuiSelectedCategoryService, CuiSidebarContainerComponent, CuiSidebarHeaderComponent, CuiSidebarNavigationComponent, CuiSidebarNavigationContainerComponent, CuiSidebarNavigationItemComponent, CuiSidebarService, CuiSvgComponent, CuiSvgModule, CuiTabComponent, CuiTabsComponent, CuiTabsModule, CuiTextFieldController, CuiTextFieldControllerModule, CuiTextFieldIconLeftDirective, CuiTextFieldIdDirective, CuiTextFieldIsErrorDirective, CuiTextFieldPlaceholderDirective, CuiTextFieldSizeDirective, CuiTextareaComponent, CuiTextareaModule, CuiThemeService, CuiToggleComponent, CuiToggleModule, CuiToolMarker, CuiTooltip, CuiTooltipComponent, CuiTooltipDescribe, CuiTooltipDirective, CuiTooltipDriver, CuiTooltipHost, CuiTooltipHover, CuiTooltipManual, CuiTooltipOptionsDirective, CuiTooltipOverflow, CuiTooltipPointer, CuiTooltipPosition, CuiTooltipService, CuiTooltipUnstyled, CuiTooltipUnstyledComponent, CuiTooltips, CuiUtilityModalComponent, CuiVideoTool, CuiVisualViewportService, UTILITY_MODAL_SERVICE_TOKEN, cuiAuthInterceptor, cuiCreateDefaultValidators, cuiErrorHandlerInterceptor, cuiGetDuration, cuiIsObscured, cuiLoaderInterceptor, cuiOverrideOptions, cuiProvideEditor, cuiRemoveSpaces, cuiReplace, cuiToAnimationOptions, cuiTooltipOptionsProvider, cuiXNdjsonInterceptor, provideCuiAuth };
 //# sourceMappingURL=cuby-ui-core.mjs.map