@cuby-ui/core 0.0.350 → 0.0.352

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 {
@@ -118,11 +118,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: [{
@@ -224,11 +224,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", theme: "theme", size: "size" }, host: { properties: { "attr.data-shape": "this.shape", "class._disabled": "this.disabled", "class._loading": "this.isLoaderShown", "attr.data-appearance": "this.appearance", "attr.data-theme": "this.theme", "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._disabled{opacity:.5}.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%)}: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[data-size=lg]{height:44px;padding:0 16px;border-radius:8px}:host[data-size=lg][data-appearance=action],:host[data-size=lg][data-appearance=outlined],:host[data-size=lg][data-appearance=outlined-gray]{padding:0 15px}:host[data-size=lg]:has(.c-content:empty){width:44px}:host{background:var(--cui-button-background);color:var(--cui-button-color);border:1px solid var(--cui-button-border-color)}@media (hover: hover){:host:hover{background:var(--cui-button-background-hover);color:var(--cui-button-color-hover);border-color:var(--cui-button-border-color-hover)}}:host:active{background:var(--cui-button-background-hover);color:var(--cui-button-color-hover);border-color:var(--cui-button-border-color-hover)}:host:disabled{background:var(--cui-button-background);color:var(--cui-button-color);border-color:var(--cui-button-border-color);opacity:.5}: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=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)}@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)}:host{--cui-button-background: var(--c-background, transparent);--cui-button-background-hover: var(--c-background-hover, transparent);--cui-button-color: var(--c-color, transparent);--cui-button-color-hover: var(--c-color-hover, transparent);--cui-button-border-color: var(--c-border-color, transparent);--cui-button-border-color-hover: var(--c-border-color-hover, transparent)}:host[data-theme=default][data-appearance=action]{--c-background: var(--cui-bg-light-blue);--c-border-color: var(--cui-bg-light-blue);--c-background-hover: var(--cui-light-blue-600);--c-border-color-hover: var(--cui-light-blue-600);--c-color: var(--cui-gray-0);--c-color-hover: var(--cui-gray-0)}:host[data-theme=default][data-appearance=secondary]{--c-background: var(--cui-base-100);--c-background-hover: var(--cui-base-200);--c-border-color: var(--cui-base-100);--c-border-color-hover: var(--cui-base-200);--c-color: var(--cui-base-900);--c-color-hover: var(--cui-base-900)}:host[data-theme=default][data-appearance=outlined]{--c-background: var(--cui-base-0);--c-background-hover: var(--cui-base-50);--c-color: var(--cui-base-900);--c-color-hover: var(--cui-base-900);--c-border-color: var(--cui-base-200);--c-border-color-hover: var(--cui-base-200)}:host[data-theme=default][data-appearance=outlined-gray]{--c-background: var(--cui-base-10);--c-background-hover: var(--cui-base-50);--c-color: var(--cui-base-900);--c-color-hover: var(--cui-base-900);--c-border-color: var(--cui-base-200);--c-border-color-hover: var(--cui-base-200)}:host[data-theme=default][data-appearance=ghost]{--c-background-hover: var(--cui-base-50);--c-color: var(--cui-base-900);--c-color-hover: var(--cui-base-900)}:host[data-theme=default][data-appearance=flat]{--c-background-hover: var(--cui-base-50);--c-color: var(--cui-light-blue-600);--c-color-hover: var(--cui-light-blue-600)}:host[data-theme=default][data-appearance=link]{--c-color: var(--cui-info);--c-color-hover: var(--cui-blue-800)}\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", theme: "theme", size: "size" }, host: { properties: { "attr.data-shape": "this.shape", "class._disabled": "this.disabled", "class._loading": "this.isLoaderShown", "attr.data-appearance": "this.appearance", "attr.data-theme": "this.theme", "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._disabled{opacity:.5}.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%)}: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[data-size=lg]{height:44px;padding:0 16px;border-radius:8px}:host[data-size=lg][data-appearance=action],:host[data-size=lg][data-appearance=outlined],:host[data-size=lg][data-appearance=outlined-gray]{padding:0 15px}:host[data-size=lg]:has(.c-content:empty){width:44px}:host{background:var(--cui-button-background);color:var(--cui-button-color);border:1px solid var(--cui-button-border-color)}@media (hover: hover){:host:hover{background:var(--cui-button-background-hover);color:var(--cui-button-color-hover);border-color:var(--cui-button-border-color-hover)}}:host:active{background:var(--cui-button-background-hover);color:var(--cui-button-color-hover);border-color:var(--cui-button-border-color-hover)}:host:disabled{background:var(--cui-button-background);color:var(--cui-button-color);border-color:var(--cui-button-border-color);opacity:.5}: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=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)}@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)}:host{--cui-button-background: var(--c-background, transparent);--cui-button-background-hover: var(--c-background-hover, transparent);--cui-button-color: var(--c-color, transparent);--cui-button-color-hover: var(--c-color-hover, transparent);--cui-button-border-color: var(--c-border-color, transparent);--cui-button-border-color-hover: var(--c-border-color-hover, transparent)}:host[data-theme=default][data-appearance=action]{--c-background: var(--cui-bg-light-blue);--c-border-color: var(--cui-bg-light-blue);--c-background-hover: var(--cui-light-blue-600);--c-border-color-hover: var(--cui-light-blue-600);--c-color: var(--cui-gray-0);--c-color-hover: var(--cui-gray-0)}:host[data-theme=default][data-appearance=secondary]{--c-background: var(--cui-base-100);--c-background-hover: var(--cui-base-200);--c-border-color: var(--cui-base-100);--c-border-color-hover: var(--cui-base-200);--c-color: var(--cui-base-900);--c-color-hover: var(--cui-base-900)}:host[data-theme=default][data-appearance=outlined]{--c-background: var(--cui-base-0);--c-background-hover: var(--cui-base-50);--c-color: var(--cui-base-900);--c-color-hover: var(--cui-base-900);--c-border-color: var(--cui-base-200);--c-border-color-hover: var(--cui-base-200)}:host[data-theme=default][data-appearance=outlined-gray]{--c-background: var(--cui-base-10);--c-background-hover: var(--cui-base-50);--c-color: var(--cui-base-900);--c-color-hover: var(--cui-base-900);--c-border-color: var(--cui-base-200);--c-border-color-hover: var(--cui-base-200)}:host[data-theme=default][data-appearance=ghost]{--c-background-hover: var(--cui-base-50);--c-color: var(--cui-base-900);--c-color-hover: var(--cui-base-900)}:host[data-theme=default][data-appearance=flat]{--c-background-hover: var(--cui-base-50);--c-color: var(--cui-light-blue-600);--c-color-hover: var(--cui-light-blue-600)}:host[data-theme=default][data-appearance=link]{--c-color: var(--cui-info);--c-color-hover: var(--cui-blue-800)}\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._disabled{opacity:.5}.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%)}: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[data-size=lg]{height:44px;padding:0 16px;border-radius:8px}:host[data-size=lg][data-appearance=action],:host[data-size=lg][data-appearance=outlined],:host[data-size=lg][data-appearance=outlined-gray]{padding:0 15px}:host[data-size=lg]:has(.c-content:empty){width:44px}:host{background:var(--cui-button-background);color:var(--cui-button-color);border:1px solid var(--cui-button-border-color)}@media (hover: hover){:host:hover{background:var(--cui-button-background-hover);color:var(--cui-button-color-hover);border-color:var(--cui-button-border-color-hover)}}:host:active{background:var(--cui-button-background-hover);color:var(--cui-button-color-hover);border-color:var(--cui-button-border-color-hover)}:host:disabled{background:var(--cui-button-background);color:var(--cui-button-color);border-color:var(--cui-button-border-color);opacity:.5}: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=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)}@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)}:host{--cui-button-background: var(--c-background, transparent);--cui-button-background-hover: var(--c-background-hover, transparent);--cui-button-color: var(--c-color, transparent);--cui-button-color-hover: var(--c-color-hover, transparent);--cui-button-border-color: var(--c-border-color, transparent);--cui-button-border-color-hover: var(--c-border-color-hover, transparent)}:host[data-theme=default][data-appearance=action]{--c-background: var(--cui-bg-light-blue);--c-border-color: var(--cui-bg-light-blue);--c-background-hover: var(--cui-light-blue-600);--c-border-color-hover: var(--cui-light-blue-600);--c-color: var(--cui-gray-0);--c-color-hover: var(--cui-gray-0)}:host[data-theme=default][data-appearance=secondary]{--c-background: var(--cui-base-100);--c-background-hover: var(--cui-base-200);--c-border-color: var(--cui-base-100);--c-border-color-hover: var(--cui-base-200);--c-color: var(--cui-base-900);--c-color-hover: var(--cui-base-900)}:host[data-theme=default][data-appearance=outlined]{--c-background: var(--cui-base-0);--c-background-hover: var(--cui-base-50);--c-color: var(--cui-base-900);--c-color-hover: var(--cui-base-900);--c-border-color: var(--cui-base-200);--c-border-color-hover: var(--cui-base-200)}:host[data-theme=default][data-appearance=outlined-gray]{--c-background: var(--cui-base-10);--c-background-hover: var(--cui-base-50);--c-color: var(--cui-base-900);--c-color-hover: var(--cui-base-900);--c-border-color: var(--cui-base-200);--c-border-color-hover: var(--cui-base-200)}:host[data-theme=default][data-appearance=ghost]{--c-background-hover: var(--cui-base-50);--c-color: var(--cui-base-900);--c-color-hover: var(--cui-base-900)}:host[data-theme=default][data-appearance=flat]{--c-background-hover: var(--cui-base-50);--c-color: var(--cui-light-blue-600);--c-color-hover: var(--cui-light-blue-600)}:host[data-theme=default][data-appearance=link]{--c-color: var(--cui-info);--c-color-hover: var(--cui-blue-800)}\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._disabled{opacity:.5}.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%)}: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[data-size=lg]{height:44px;padding:0 16px;border-radius:8px}:host[data-size=lg][data-appearance=action],:host[data-size=lg][data-appearance=outlined],:host[data-size=lg][data-appearance=outlined-gray]{padding:0 15px}:host[data-size=lg]:has(.c-content:empty){width:44px}:host{background:var(--cui-button-background);color:var(--cui-button-color);border:1px solid var(--cui-button-border-color)}@media (hover: hover){:host:hover{background:var(--cui-button-background-hover);color:var(--cui-button-color-hover);border-color:var(--cui-button-border-color-hover)}}:host:active{background:var(--cui-button-background-hover);color:var(--cui-button-color-hover);border-color:var(--cui-button-border-color-hover)}:host:disabled{background:var(--cui-button-background);color:var(--cui-button-color);border-color:var(--cui-button-border-color);opacity:.5}: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=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)}@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)}:host{--cui-button-background: var(--c-background, transparent);--cui-button-background-hover: var(--c-background-hover, transparent);--cui-button-color: var(--c-color, transparent);--cui-button-color-hover: var(--c-color-hover, transparent);--cui-button-border-color: var(--c-border-color, transparent);--cui-button-border-color-hover: var(--c-border-color-hover, transparent)}:host[data-theme=default][data-appearance=action]{--c-background: var(--cui-bg-light-blue);--c-border-color: var(--cui-bg-light-blue);--c-background-hover: var(--cui-light-blue-600);--c-border-color-hover: var(--cui-light-blue-600);--c-color: var(--cui-gray-0);--c-color-hover: var(--cui-gray-0)}:host[data-theme=default][data-appearance=secondary]{--c-background: var(--cui-base-100);--c-background-hover: var(--cui-base-200);--c-border-color: var(--cui-base-100);--c-border-color-hover: var(--cui-base-200);--c-color: var(--cui-base-900);--c-color-hover: var(--cui-base-900)}:host[data-theme=default][data-appearance=outlined]{--c-background: var(--cui-base-0);--c-background-hover: var(--cui-base-50);--c-color: var(--cui-base-900);--c-color-hover: var(--cui-base-900);--c-border-color: var(--cui-base-200);--c-border-color-hover: var(--cui-base-200)}:host[data-theme=default][data-appearance=outlined-gray]{--c-background: var(--cui-base-10);--c-background-hover: var(--cui-base-50);--c-color: var(--cui-base-900);--c-color-hover: var(--cui-base-900);--c-border-color: var(--cui-base-200);--c-border-color-hover: var(--cui-base-200)}:host[data-theme=default][data-appearance=ghost]{--c-background-hover: var(--cui-base-50);--c-color: var(--cui-base-900);--c-color-hover: var(--cui-base-900)}:host[data-theme=default][data-appearance=flat]{--c-background-hover: var(--cui-base-50);--c-color: var(--cui-light-blue-600);--c-color-hover: var(--cui-light-blue-600)}:host[data-theme=default][data-appearance=link]{--c-color: var(--cui-info);--c-color-hover: var(--cui-blue-800)}\n"] }]
         }], propDecorators: { shape: [{
                 type: Input
             }, {
@@ -291,11 +291,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", "theme", "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", "theme", "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: [{
@@ -442,11 +442,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
             }, {
@@ -518,11 +518,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}:host[data-resizing=stretch]{width:100%;padding:0 16px}.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}:host[data-resizing=stretch]{width:100%;padding:0 16px}.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}:host[data-resizing=stretch]{width:100%;padding:0 16px}.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}:host[data-resizing=stretch]{width:100%;padding:0 16px}.c-heading{font-weight:500;font-size:14px;line-height:20px;margin:0 0 8px}\n"] }]
         }], propDecorators: { resizing: [{
                 type: HostBinding,
                 args: ['attr.data-resizing']
@@ -550,11 +550,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%);width:100%}.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%);width:100%}.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%);width:100%}.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%);width:100%}.c-wrapper_position_right{align-items:flex-end;right:20px}.c-wrapper ::ng-deep>*{pointer-events:auto}\n"] }]
         }] });
 
 class CuiAlertModule {
@@ -617,11 +617,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=orange]{color:var(--cui-base-900);background:var(--cui-yellow-bg)}:host[data-color=orange] .c-dots{background:var(--cui-base-900)}: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=orange]{color:var(--cui-base-900);background:var(--cui-yellow-bg)}:host[data-color=orange] .c-dots{background:var(--cui-base-900)}: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=orange]{color:var(--cui-base-900);background:var(--cui-yellow-bg)}:host[data-color=orange] .c-dots{background:var(--cui-base-900)}: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=orange]{color:var(--cui-base-900);background:var(--cui-yellow-bg)}:host[data-color=orange] .c-dots{background:var(--cui-base-900)}: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
             }, {
@@ -1035,11 +1035,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", "theme", "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", "theme", "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
             }, {
@@ -1083,11 +1083,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 }]
@@ -1098,11 +1098,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
             }] } });
@@ -1136,11 +1136,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 {
@@ -1225,11 +1225,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';
@@ -1544,13 +1544,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 {
@@ -1566,11 +1566,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: сделать структурную директиву
@@ -1620,11 +1620,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']
@@ -1635,11 +1635,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 {
@@ -1650,11 +1650,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", "theme", "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", "theme", "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: [{
@@ -2267,12 +2267,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([
@@ -2283,12 +2283,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',
@@ -2565,7 +2565,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,
@@ -2575,7 +2575,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: [{
@@ -2805,11 +2805,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 {
@@ -2830,11 +2830,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
             }, {
@@ -2865,11 +2865,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: [{
@@ -3146,14 +3146,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: [{
@@ -3219,11 +3219,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']
@@ -3308,14 +3308,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']
@@ -3407,14 +3407,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']
@@ -3527,14 +3527,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: [{
@@ -3587,11 +3587,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
             }] } });
@@ -3626,11 +3626,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 }]
@@ -3800,7 +3800,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,
@@ -3808,7 +3808,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: [{
@@ -3864,13 +3864,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';
@@ -3908,11 +3908,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 {
@@ -3963,11 +3963,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 {
@@ -3980,7 +3980,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,
@@ -3992,7 +3992,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 {
@@ -4001,11 +4001,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 {
@@ -4016,13 +4016,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 {
@@ -4031,11 +4031,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 {
@@ -4043,13 +4043,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 {
@@ -4057,13 +4057,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_TABS_SERVICE_TOKEN = new InjectionToken('CUI_TABS_SERVICE');
@@ -4155,11 +4155,11 @@ class CuiTabsComponent {
         }, { allowSignalWrites: true });
     }
     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: "17.0.0", version: "18.2.13", type: CuiTabsComponent, isStandalone: true, selector: "cui-tabs", inputs: { headerSlot: { classPropertyName: "headerSlot", publicName: "headerSlot", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: CUI_TABS_SERVICE_TOKEN, useClass: CuiTabsServiceImpl }], ngImport: i0, template: "@if (headerSlot(); as header) {\r\n    <ng-container\r\n        [ngTemplateOutlet]=\"header\"\r\n        [ngTemplateOutletContext]=\"{ $implicit: buttons }\"\r\n    />\r\n} @else {\r\n    <header class=\"header\">\r\n        <ng-container [ngTemplateOutlet]=\"buttons\" />\r\n    </header>\r\n}\r\n\r\n<ng-template #buttons>\r\n    @for (tab of tabs(); track tab.id) {\r\n        <button\r\n            type=\"button\"\r\n            class=\"button\"\r\n            (click)=\"onSelectTab($event, tab)\"\r\n        >\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"tab.button\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: tab.data, isActive: tab.id === activeTab()?.id }\"\r\n            />\r\n        </button>\r\n    }\r\n</ng-template>\r\n\r\n@if (activeTab()?.content; as content) {\r\n    <ng-container\r\n        [ngTemplateOutlet]=\"content\"\r\n        [ngTemplateOutletContext]=\"{ $implicit: activeTab()?.data }\"\r\n    />\r\n}\r\n", styles: [":host{display:flex;flex-direction:column}.header{display:flex}.button{display:contents}\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: CuiTabsComponent, isStandalone: true, selector: "cui-tabs", inputs: { headerSlot: { classPropertyName: "headerSlot", publicName: "headerSlot", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: CUI_TABS_SERVICE_TOKEN, useClass: CuiTabsServiceImpl }], ngImport: i0, template: "@if (headerSlot(); as header) {\n    <ng-container\n        [ngTemplateOutlet]=\"header\"\n        [ngTemplateOutletContext]=\"{ $implicit: buttons }\"\n    />\n} @else {\n    <header class=\"header\">\n        <ng-container [ngTemplateOutlet]=\"buttons\" />\n    </header>\n}\n\n<ng-template #buttons>\n    @for (tab of tabs(); track tab.id) {\n        <button\n            type=\"button\"\n            class=\"button\"\n            (click)=\"onSelectTab($event, tab)\"\n        >\n            <ng-container\n                [ngTemplateOutlet]=\"tab.button\"\n                [ngTemplateOutletContext]=\"{ $implicit: tab.data, isActive: tab.id === activeTab()?.id }\"\n            />\n        </button>\n    }\n</ng-template>\n\n@if (activeTab()?.content; as content) {\n    <ng-container\n        [ngTemplateOutlet]=\"content\"\n        [ngTemplateOutletContext]=\"{ $implicit: activeTab()?.data }\"\n    />\n}\n", styles: [":host{display:flex;flex-direction:column}.header{display:flex}.button{display:contents}\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: CuiTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-tabs', imports: [NgTemplateOutlet], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: CUI_TABS_SERVICE_TOKEN, useClass: CuiTabsServiceImpl }], template: "@if (headerSlot(); as header) {\r\n    <ng-container\r\n        [ngTemplateOutlet]=\"header\"\r\n        [ngTemplateOutletContext]=\"{ $implicit: buttons }\"\r\n    />\r\n} @else {\r\n    <header class=\"header\">\r\n        <ng-container [ngTemplateOutlet]=\"buttons\" />\r\n    </header>\r\n}\r\n\r\n<ng-template #buttons>\r\n    @for (tab of tabs(); track tab.id) {\r\n        <button\r\n            type=\"button\"\r\n            class=\"button\"\r\n            (click)=\"onSelectTab($event, tab)\"\r\n        >\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"tab.button\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: tab.data, isActive: tab.id === activeTab()?.id }\"\r\n            />\r\n        </button>\r\n    }\r\n</ng-template>\r\n\r\n@if (activeTab()?.content; as content) {\r\n    <ng-container\r\n        [ngTemplateOutlet]=\"content\"\r\n        [ngTemplateOutletContext]=\"{ $implicit: activeTab()?.data }\"\r\n    />\r\n}\r\n", styles: [":host{display:flex;flex-direction:column}.header{display:flex}.button{display:contents}\n"] }]
+            args: [{ selector: 'cui-tabs', imports: [NgTemplateOutlet], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: CUI_TABS_SERVICE_TOKEN, useClass: CuiTabsServiceImpl }], template: "@if (headerSlot(); as header) {\n    <ng-container\n        [ngTemplateOutlet]=\"header\"\n        [ngTemplateOutletContext]=\"{ $implicit: buttons }\"\n    />\n} @else {\n    <header class=\"header\">\n        <ng-container [ngTemplateOutlet]=\"buttons\" />\n    </header>\n}\n\n<ng-template #buttons>\n    @for (tab of tabs(); track tab.id) {\n        <button\n            type=\"button\"\n            class=\"button\"\n            (click)=\"onSelectTab($event, tab)\"\n        >\n            <ng-container\n                [ngTemplateOutlet]=\"tab.button\"\n                [ngTemplateOutletContext]=\"{ $implicit: tab.data, isActive: tab.id === activeTab()?.id }\"\n            />\n        </button>\n    }\n</ng-template>\n\n@if (activeTab()?.content; as content) {\n    <ng-container\n        [ngTemplateOutlet]=\"content\"\n        [ngTemplateOutletContext]=\"{ $implicit: activeTab()?.data }\"\n    />\n}\n", styles: [":host{display:flex;flex-direction:column}.header{display:flex}.button{display:contents}\n"] }]
         }], ctorParameters: () => [] });
 
 class CuiTextareaComponent {
@@ -4703,13 +4703,97 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
+const CUI_RESOURCE_URL = new InjectionToken('CUI_RESOURCE_URL');
+
+function getEditorTools(resourceUrl) {
+    return {
+        header: {
+            class: CuiHeaderTool,
+            config: {
+                levels: [2, 3, 4],
+                defaultLevel: 2
+            }
+        },
+        list: {
+            class: CuiListTool,
+            inlineToolbar: true,
+            config: {
+                defaultStyle: 'unordered'
+            }
+        },
+        attaches: {
+            class: CuiAttachesTool,
+            config: {
+                endpoint: resourceUrl,
+                field: 'resource',
+                types: '.pdf,.doc,.docx'
+            }
+        },
+        video: {
+            class: CuiVideoTool,
+            config: {
+                endpoint: resourceUrl,
+                field: 'resource'
+            }
+        },
+        image: {
+            class: CuiImageTool,
+            config: {
+                endpoint: resourceUrl,
+                field: 'resource'
+            }
+        }
+    };
+}
+
+class EditorBaseService {
+    constructor() {
+        this.editorResourceUrl = inject(CUI_RESOURCE_URL);
+        this.TOOLS = {
+            ...getEditorTools(this.editorResourceUrl),
+            attaches: {
+                class: CuiAttachesTool,
+                config: {
+                    endpoint: this.editorResourceUrl,
+                    field: 'resource',
+                    types: '.pdf,.doc,.docx',
+                    fileClicked: (file) => this.openFileInBrowser(file)
+                }
+            }
+        };
+        this.tools = this.TOOLS;
+    }
+}
+
+class CuiEditorToolsService extends EditorBaseService {
+    constructor() {
+        super();
+    }
+    async openFileInBrowser(file) {
+        if (!file?.url) {
+            return;
+        }
+        const encodedUrl = encodeURIComponent(file.url);
+        const googleViewerUrl = `https://docs.google.com/viewer?url=${encodedUrl}&embedded=true`;
+        window.open(googleViewerUrl, '_blank');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorToolsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorToolsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorToolsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
 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 }]
@@ -4825,7 +4909,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", "theme", "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", "theme", "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,
@@ -4845,7 +4929,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: [{
@@ -5051,7 +5135,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", "theme", "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", "theme", "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,
@@ -5068,7 +5152,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: [{
@@ -5159,11 +5243,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", "theme", "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", "theme", "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 }]
@@ -6482,8 +6566,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;
@@ -7455,11 +7539,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']
@@ -7581,7 +7665,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", "theme", "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", "theme", "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,
@@ -7590,7 +7674,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 {
@@ -7631,7 +7715,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", "theme", "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", "theme", "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,
@@ -7643,9 +7727,13 @@ 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: () => [] });
 
+function provideCuiEditorResourceUrl(resourceUrl) {
+    return { provide: CUI_RESOURCE_URL, useValue: resourceUrl };
+}
+
 const cuiXNdjsonInterceptor = (request, next) => {
     if (request.headers.get('Content-Type') !== 'application/x-ndjson') {
         return next(request);
@@ -7909,11 +7997,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 {
@@ -7969,7 +8057,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,
@@ -7983,7 +8071,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 {
@@ -7999,11 +8087,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 {
@@ -8102,7 +8190,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", "theme", "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", "theme", "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,
@@ -8114,7 +8202,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 {
@@ -8122,11 +8210,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 {
@@ -8345,7 +8433,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,
@@ -8360,7 +8448,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 {
@@ -8393,11 +8481,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 {
@@ -8420,11 +8508,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 {
@@ -8435,7 +8523,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,
@@ -8449,7 +8537,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 {
@@ -8564,7 +8652,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", "theme", "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", "theme", "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,
@@ -8581,7 +8669,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 {
@@ -8666,7 +8754,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", "theme", "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", "theme", "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,
@@ -8682,7 +8770,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 {
@@ -8926,7 +9014,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", "theme", "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", "theme", "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,
@@ -8946,7 +9034,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 {
@@ -9002,7 +9090,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,
@@ -9017,7 +9105,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 {
@@ -9068,7 +9156,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", "theme", "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", "theme", "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,
@@ -9080,7 +9168,7 @@ 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: () => [] });
 
 class CuiUtilityReadonlyThumbnailComponent {
@@ -9089,11 +9177,11 @@ class CuiUtilityReadonlyThumbnailComponent {
         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 }); }
+    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();\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"] }]
+            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 {
@@ -9154,11 +9242,11 @@ class CuiInstructionReadonlyInfoComponent {
         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 }); }
+    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\">\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"] }]
+            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 {
@@ -9219,11 +9307,11 @@ class CuiCriterionReadonlyInfoComponent {
         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 }); }
+    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\">\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"] }]
+            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 {
@@ -9307,11 +9395,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 {
@@ -9422,7 +9510,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,
@@ -9438,7 +9526,7 @@ 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: () => [] });
 
 const UTILITY_MODAL_SERVICE_TOKEN = new InjectionToken('UTILITY_MODAL_SERVICE_TOKEN');
@@ -9482,11 +9570,11 @@ class CuiUtilityModalCreateComponent {
         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", "theme", "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", "theme", "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 {
@@ -9515,11 +9603,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 {
@@ -9813,11 +9901,11 @@ 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 CuiReadonlyUtilityModalComponent {
@@ -9844,11 +9932,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", "theme", "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", "theme", "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 {
@@ -9870,7 +9958,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,
@@ -9881,7 +9969,7 @@ 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 CuiReadonlyInstructionModalComponent {
@@ -9903,7 +9991,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,
@@ -9914,7 +10002,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 {
@@ -9929,11 +10017,11 @@ 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 {
@@ -10041,7 +10129,7 @@ class CuiCriterionInfoComponent {
         }))));
     }
     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 }); }
+    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,
@@ -10055,7 +10143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         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"] }]
+                    ], 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: () => [] });
 
 class CuiSelectModalFolderComponent {
@@ -10066,11 +10154,11 @@ class CuiSelectModalFolderComponent {
         this.isOpen = input(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSelectModalFolderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiSelectModalFolderComponent, isStandalone: true, selector: "cui-select-modal-folder", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, buttonSlot: { classPropertyName: "buttonSlot", publicName: "buttonSlot", isSignal: true, isRequired: true, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<cui-card-wrapper class=\"wrapper\">\r\n    <ng-container [ngTemplateOutlet]=\"buttonSlot()\" />\r\n\r\n    <cui-svg\r\n        [icon]=\"icon()\"\r\n        class=\"icon\"\r\n    />\r\n\r\n    <span class=\"title\">{{ title() }}</span>\r\n</cui-card-wrapper>\r\n", styles: [":host{--border-color: var(--cui-base-200);--padding-horizontal: 8px;--padding-vertical: 8px}:host .wrapper{--border: var(--border-color);padding:var(--padding-vertical) var(--padding-horizontal)}.title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon{padding:2px}\n"], dependencies: [{ kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "component", type: CuiCardWrapperComponent, selector: "cui-card-wrapper, [cuiCardWrapper]", inputs: ["withBorder"] }, { 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: CuiSelectModalFolderComponent, isStandalone: true, selector: "cui-select-modal-folder", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, buttonSlot: { classPropertyName: "buttonSlot", publicName: "buttonSlot", isSignal: true, isRequired: true, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<cui-card-wrapper class=\"wrapper\">\n    <ng-container [ngTemplateOutlet]=\"buttonSlot()\" />\n\n    <cui-svg\n        [icon]=\"icon()\"\n        class=\"icon\"\n    />\n\n    <span class=\"title\">{{ title() }}</span>\n</cui-card-wrapper>\n", styles: [":host{--border-color: var(--cui-base-200);--padding-horizontal: 8px;--padding-vertical: 8px}:host .wrapper{--border: var(--border-color);padding:var(--padding-vertical) var(--padding-horizontal)}.title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon{padding:2px}\n"], dependencies: [{ kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "component", type: CuiCardWrapperComponent, selector: "cui-card-wrapper, [cuiCardWrapper]", inputs: ["withBorder"] }, { 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: CuiSelectModalFolderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-select-modal-folder', imports: [CuiSvgModule, CuiCardWrapperComponent, NgTemplateOutlet], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-card-wrapper class=\"wrapper\">\r\n    <ng-container [ngTemplateOutlet]=\"buttonSlot()\" />\r\n\r\n    <cui-svg\r\n        [icon]=\"icon()\"\r\n        class=\"icon\"\r\n    />\r\n\r\n    <span class=\"title\">{{ title() }}</span>\r\n</cui-card-wrapper>\r\n", styles: [":host{--border-color: var(--cui-base-200);--padding-horizontal: 8px;--padding-vertical: 8px}:host .wrapper{--border: var(--border-color);padding:var(--padding-vertical) var(--padding-horizontal)}.title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon{padding:2px}\n"] }]
+            args: [{ selector: 'cui-select-modal-folder', imports: [CuiSvgModule, CuiCardWrapperComponent, NgTemplateOutlet], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-card-wrapper class=\"wrapper\">\n    <ng-container [ngTemplateOutlet]=\"buttonSlot()\" />\n\n    <cui-svg\n        [icon]=\"icon()\"\n        class=\"icon\"\n    />\n\n    <span class=\"title\">{{ title() }}</span>\n</cui-card-wrapper>\n", styles: [":host{--border-color: var(--cui-base-200);--padding-horizontal: 8px;--padding-vertical: 8px}:host .wrapper{--border: var(--border-color);padding:var(--padding-vertical) var(--padding-horizontal)}.title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon{padding:2px}\n"] }]
         }] });
 
 class CuiSelectModalSearchComponent {
@@ -10086,11 +10174,11 @@ class CuiSelectModalSearchComponent {
             .subscribe((value) => this.searchStringChanged.emit(value));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSelectModalSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiSelectModalSearchComponent, isStandalone: true, selector: "cui-select-modal-search", inputs: { searchControl: { classPropertyName: "searchControl", publicName: "searchControl", isSignal: true, isRequired: true, transformFunction: null }, controlDelay: { classPropertyName: "controlDelay", publicName: "controlDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchStringChanged: "searchStringChanged" }, ngImport: i0, template: "<cui-input-text\r\n    cuiTextFieldPlaceholder=\"Search...\"\r\n    cuiTextFieldIconLeft=\"cuiIconSearch\"\r\n    [formControl]=\"searchControl()\"\r\n    class=\"search\"\r\n/>\r\n<button\r\n    class=\"filters\"\r\n    type=\"button\"\r\n    cuiIconButton\r\n    icon=\"cuiIconFiltersLines\"\r\n></button>\r\n", styles: [":host{padding-right:15px;display:flex;align-items:center;gap:4px}.search{width:100%}.filters{padding:4px;width:auto;height:auto}\n"], dependencies: [{ kind: "ngmodule", type: CuiInputModule }, { kind: "component", type: CuiInputTextComponent, selector: "cui-input-text" }, { kind: "directive", type: CuiTextFieldIconLeftDirective, selector: "[cuiTextFieldIconLeft]", inputs: ["cuiTextFieldIconLeft"] }, { kind: "directive", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "ngmodule", type: CuiIconButtonModule }, { kind: "component", type: CuiIconButtonComponent, selector: "button[cuiIconButton][icon], a[cuiIconButton][icon]", inputs: ["icon", "color", "hoverColor"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiSelectModalSearchComponent, isStandalone: true, selector: "cui-select-modal-search", inputs: { searchControl: { classPropertyName: "searchControl", publicName: "searchControl", isSignal: true, isRequired: true, transformFunction: null }, controlDelay: { classPropertyName: "controlDelay", publicName: "controlDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchStringChanged: "searchStringChanged" }, ngImport: i0, template: "<cui-input-text\n    cuiTextFieldPlaceholder=\"Search...\"\n    cuiTextFieldIconLeft=\"cuiIconSearch\"\n    [formControl]=\"searchControl()\"\n    class=\"search\"\n/>\n<button\n    class=\"filters\"\n    type=\"button\"\n    cuiIconButton\n    icon=\"cuiIconFiltersLines\"\n></button>\n", styles: [":host{padding-right:15px;display:flex;align-items:center;gap:4px}.search{width:100%}.filters{padding:4px;width:auto;height:auto}\n"], dependencies: [{ kind: "ngmodule", type: CuiInputModule }, { kind: "component", type: CuiInputTextComponent, selector: "cui-input-text" }, { kind: "directive", type: CuiTextFieldIconLeftDirective, selector: "[cuiTextFieldIconLeft]", inputs: ["cuiTextFieldIconLeft"] }, { kind: "directive", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "ngmodule", type: CuiIconButtonModule }, { kind: "component", type: CuiIconButtonComponent, selector: "button[cuiIconButton][icon], a[cuiIconButton][icon]", inputs: ["icon", "color", "hoverColor"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSelectModalSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-select-modal-search', imports: [CuiInputModule, CuiIconButtonModule, ReactiveFormsModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-input-text\r\n    cuiTextFieldPlaceholder=\"Search...\"\r\n    cuiTextFieldIconLeft=\"cuiIconSearch\"\r\n    [formControl]=\"searchControl()\"\r\n    class=\"search\"\r\n/>\r\n<button\r\n    class=\"filters\"\r\n    type=\"button\"\r\n    cuiIconButton\r\n    icon=\"cuiIconFiltersLines\"\r\n></button>\r\n", styles: [":host{padding-right:15px;display:flex;align-items:center;gap:4px}.search{width:100%}.filters{padding:4px;width:auto;height:auto}\n"] }]
+            args: [{ selector: 'cui-select-modal-search', imports: [CuiInputModule, CuiIconButtonModule, ReactiveFormsModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-input-text\n    cuiTextFieldPlaceholder=\"Search...\"\n    cuiTextFieldIconLeft=\"cuiIconSearch\"\n    [formControl]=\"searchControl()\"\n    class=\"search\"\n/>\n<button\n    class=\"filters\"\n    type=\"button\"\n    cuiIconButton\n    icon=\"cuiIconFiltersLines\"\n></button>\n", styles: [":host{padding-right:15px;display:flex;align-items:center;gap:4px}.search{width:100%}.filters{padding:4px;width:auto;height:auto}\n"] }]
         }] });
 
 class CuiSelectModalComponent {
@@ -10105,7 +10193,7 @@ class CuiSelectModalComponent {
         this.context.completeWith();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSelectModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiSelectModalComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <div class=\"content\">\r\n        <header\r\n            class=\"header\"\r\n            cuiDialogHeader\r\n            [heading]=\"heading\"\r\n            (closed)=\"onCancel()\"\r\n        ></header>\r\n        <div class=\"wrapper\">\r\n            <div class=\"left-block\">\r\n                @if (leftData) {\r\n                    <ng-container\r\n                        [ngComponentOutlet]=\"leftData.component\"\r\n                        [ngComponentOutletInputs]=\"leftData.inputs\"\r\n                    />\r\n                }\r\n            </div>\r\n            <div class=\"right-block\">\r\n                @if (rightData) {\r\n                    <ng-container\r\n                        [ngComponentOutlet]=\"rightData.component\"\r\n                        [ngComponentOutletInputs]=\"rightData.inputs\"\r\n                    />\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [".header{padding-right:16px;padding-left:16px}.content{display:flex;flex-direction:column;height:calc(100vh - 180px)}.wrapper{display:flex;flex-direction:row;flex-grow:1;border-top:1px solid var(--cui-base-200);width:100%;min-height:400px;overflow-y:hidden}.left-block{padding-left:16px;padding-top:19px;flex-shrink:0;display:flex;flex-direction:column;gap:16px;width:50%;border-right:1px solid var(--cui-base-200)}.right-block{position:relative;width:50%;overflow:hidden}.right-block__head{padding:16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--cui-base-200)}.right-block__title{font-weight:500;font-size:14px;line-height:20px;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}.right-block__subtitle{font-weight:400;font-size:14px;line-height:20px;margin-bottom:16px;text-transform:uppercase;color:var(--cui-base-500)}\n"], dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "ngmodule", type: CuiDialogModule }, { kind: "component", type: CuiDialogHeaderComponent, selector: "header[cuiDialogHeader][heading]", inputs: ["heading", "headingContext", "subheading"], outputs: ["closed"] }, { kind: "ngmodule", type: CuiIconButtonModule }, { kind: "ngmodule", type: CuiInputModule }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiSelectModalComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <div class=\"content\">\n        <header\n            class=\"header\"\n            cuiDialogHeader\n            [heading]=\"heading\"\n            (closed)=\"onCancel()\"\n        ></header>\n        <div class=\"wrapper\">\n            <div class=\"left-block\">\n                @if (leftData) {\n                    <ng-container\n                        [ngComponentOutlet]=\"leftData.component\"\n                        [ngComponentOutletInputs]=\"leftData.inputs\"\n                    />\n                }\n            </div>\n            <div class=\"right-block\">\n                @if (rightData) {\n                    <ng-container\n                        [ngComponentOutlet]=\"rightData.component\"\n                        [ngComponentOutletInputs]=\"rightData.inputs\"\n                    />\n                }\n            </div>\n        </div>\n    </div>\n</ng-container>\n", styles: [".header{padding-right:16px;padding-left:16px}.content{display:flex;flex-direction:column;height:calc(100vh - 180px)}.wrapper{display:flex;flex-direction:row;flex-grow:1;border-top:1px solid var(--cui-base-200);width:100%;min-height:400px;overflow-y:hidden}.left-block{padding-left:16px;padding-top:19px;flex-shrink:0;display:flex;flex-direction:column;gap:16px;width:50%;border-right:1px solid var(--cui-base-200)}.right-block{position:relative;width:50%;overflow:hidden}.right-block__head{padding:16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--cui-base-200)}.right-block__title{font-weight:500;font-size:14px;line-height:20px;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}.right-block__subtitle{font-weight:400;font-size:14px;line-height:20px;margin-bottom:16px;text-transform:uppercase;color:var(--cui-base-500)}\n"], dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "ngmodule", type: CuiDialogModule }, { kind: "component", type: CuiDialogHeaderComponent, selector: "header[cuiDialogHeader][heading]", inputs: ["heading", "headingContext", "subheading"], outputs: ["closed"] }, { kind: "ngmodule", type: CuiIconButtonModule }, { kind: "ngmodule", type: CuiInputModule }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSelectModalComponent, decorators: [{
             type: Component,
@@ -10116,7 +10204,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         CuiInputModule,
                         NgComponentOutlet,
                         TranslocoDirective
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n    <div class=\"content\">\r\n        <header\r\n            class=\"header\"\r\n            cuiDialogHeader\r\n            [heading]=\"heading\"\r\n            (closed)=\"onCancel()\"\r\n        ></header>\r\n        <div class=\"wrapper\">\r\n            <div class=\"left-block\">\r\n                @if (leftData) {\r\n                    <ng-container\r\n                        [ngComponentOutlet]=\"leftData.component\"\r\n                        [ngComponentOutletInputs]=\"leftData.inputs\"\r\n                    />\r\n                }\r\n            </div>\r\n            <div class=\"right-block\">\r\n                @if (rightData) {\r\n                    <ng-container\r\n                        [ngComponentOutlet]=\"rightData.component\"\r\n                        [ngComponentOutletInputs]=\"rightData.inputs\"\r\n                    />\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [".header{padding-right:16px;padding-left:16px}.content{display:flex;flex-direction:column;height:calc(100vh - 180px)}.wrapper{display:flex;flex-direction:row;flex-grow:1;border-top:1px solid var(--cui-base-200);width:100%;min-height:400px;overflow-y:hidden}.left-block{padding-left:16px;padding-top:19px;flex-shrink:0;display:flex;flex-direction:column;gap:16px;width:50%;border-right:1px solid var(--cui-base-200)}.right-block{position:relative;width:50%;overflow:hidden}.right-block__head{padding:16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--cui-base-200)}.right-block__title{font-weight:500;font-size:14px;line-height:20px;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}.right-block__subtitle{font-weight:400;font-size:14px;line-height:20px;margin-bottom:16px;text-transform:uppercase;color:var(--cui-base-500)}\n"] }]
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    <div class=\"content\">\n        <header\n            class=\"header\"\n            cuiDialogHeader\n            [heading]=\"heading\"\n            (closed)=\"onCancel()\"\n        ></header>\n        <div class=\"wrapper\">\n            <div class=\"left-block\">\n                @if (leftData) {\n                    <ng-container\n                        [ngComponentOutlet]=\"leftData.component\"\n                        [ngComponentOutletInputs]=\"leftData.inputs\"\n                    />\n                }\n            </div>\n            <div class=\"right-block\">\n                @if (rightData) {\n                    <ng-container\n                        [ngComponentOutlet]=\"rightData.component\"\n                        [ngComponentOutletInputs]=\"rightData.inputs\"\n                    />\n                }\n            </div>\n        </div>\n    </div>\n</ng-container>\n", styles: [".header{padding-right:16px;padding-left:16px}.content{display:flex;flex-direction:column;height:calc(100vh - 180px)}.wrapper{display:flex;flex-direction:row;flex-grow:1;border-top:1px solid var(--cui-base-200);width:100%;min-height:400px;overflow-y:hidden}.left-block{padding-left:16px;padding-top:19px;flex-shrink:0;display:flex;flex-direction:column;gap:16px;width:50%;border-right:1px solid var(--cui-base-200)}.right-block{position:relative;width:50%;overflow:hidden}.right-block__head{padding:16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--cui-base-200)}.right-block__title{font-weight:500;font-size:14px;line-height:20px;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}.right-block__subtitle{font-weight:400;font-size:14px;line-height:20px;margin-bottom:16px;text-transform:uppercase;color:var(--cui-base-500)}\n"] }]
         }] });
 
 class CuiSelectModalService {
@@ -10196,11 +10284,11 @@ class CuiStorageListItemComponent {
             .subscribe((response) => this.storageElements.set(response));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiStorageListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiStorageListItemComponent, isStandalone: true, selector: "li[cuiStorageListItem]", inputs: { storage: { classPropertyName: "storage", publicName: "storage", isSignal: true, isRequired: true, transformFunction: null }, elementSlot: { classPropertyName: "elementSlot", publicName: "elementSlot", isSignal: true, isRequired: false, transformFunction: null }, itemSlot: { classPropertyName: "itemSlot", publicName: "itemSlot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *cuiLet=\"storage() as storage\">\r\n    <div class=\"wrapper\">\r\n        <ng-template #openCloseButton>\r\n            @if (hasContent()) {\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"button\"\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            }\r\n        </ng-template>\r\n\r\n        @if (itemSlot(); as item) {\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    item;\r\n                    context: {\r\n                        $implicit: storage,\r\n                        openCloseButton,\r\n                        areContentOpened: areContentOpened(),\r\n                        hasContent: hasContent()\r\n                    }\r\n                \"\r\n            />\r\n        }\r\n\r\n        <div\r\n            class=\"content\"\r\n            [class.content_hidden]=\"!areContentOpened()\"\r\n        >\r\n            <div class=\"lists\">\r\n                @if (storageChildren().length) {\r\n                    <cui-storage-list\r\n                        [storages]=\"storageChildren()\"\r\n                        [elementSlot]=\"elementSlot()\"\r\n                        [itemSlot]=\"itemSlot()\"\r\n                    />\r\n                }\r\n                @if (storageElements().length && elementSlot()) {\r\n                    <ul class=\"list\">\r\n                        @for (element of storageElements(); track element.id) {\r\n                            <li class=\"item\">\r\n                                <ng-container\r\n                                    *ngTemplateOutlet=\"\r\n                                        elementSlot()!;\r\n                                        context: { $implicit: element, storage: storage }\r\n                                    \"\r\n                                />\r\n                            </li>\r\n                        }\r\n                    </ul>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [".button{padding:2px;display:flex;border-radius:4px}@media (hover: hover){.button:hover{background:var(--cui-base-200)}}.button :active{background:var(--cui-base-200)}.icon{padding:2px}.wrapper{display:flex;flex-direction:column;gap:8px}.content{padding-left:20px}.content_hidden{display:none}.lists{display:flex;flex-direction:column;gap:8px;position:relative}.lists>*{z-index:1}.lists:has(>:nth-child(2)):before{content:\"\";position:absolute;top:0;bottom:0;left:8px;width:1px;background:var(--cui-base-200)}.list{display:flex;flex-direction:column;gap:8px}.item{position:relative}.item:not(:last-child):before{content:\"\";position:absolute;top:0;left:8px;bottom:-8px;z-index:-1;width:1px;background:var(--cui-base-200)}\n"], dependencies: [{ 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: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => CuiStorageListComponent), selector: "cui-storage-list", inputs: ["storages", "elementSlot", "itemSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiStorageListItemComponent, isStandalone: true, selector: "li[cuiStorageListItem]", inputs: { storage: { classPropertyName: "storage", publicName: "storage", isSignal: true, isRequired: true, transformFunction: null }, elementSlot: { classPropertyName: "elementSlot", publicName: "elementSlot", isSignal: true, isRequired: false, transformFunction: null }, itemSlot: { classPropertyName: "itemSlot", publicName: "itemSlot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *cuiLet=\"storage() as storage\">\n    <div class=\"wrapper\">\n        <ng-template #openCloseButton>\n            @if (hasContent()) {\n                <button\n                    type=\"button\"\n                    class=\"button\"\n                    (click)=\"onToggleChildren($event)\"\n                >\n                    <cui-svg\n                        [icon]=\"openCloseButtonIcon()\"\n                        color=\"var(--cui-base-500)\"\n                    />\n                </button>\n            }\n        </ng-template>\n\n        @if (itemSlot(); as item) {\n            <ng-container\n                *ngTemplateOutlet=\"\n                    item;\n                    context: {\n                        $implicit: storage,\n                        openCloseButton,\n                        areContentOpened: areContentOpened(),\n                        hasContent: hasContent()\n                    }\n                \"\n            />\n        }\n\n        <div\n            class=\"content\"\n            [class.content_hidden]=\"!areContentOpened()\"\n        >\n            <div class=\"lists\">\n                @if (storageChildren().length) {\n                    <cui-storage-list\n                        [storages]=\"storageChildren()\"\n                        [elementSlot]=\"elementSlot()\"\n                        [itemSlot]=\"itemSlot()\"\n                    />\n                }\n                @if (storageElements().length && elementSlot()) {\n                    <ul class=\"list\">\n                        @for (element of storageElements(); track element.id) {\n                            <li class=\"item\">\n                                <ng-container\n                                    *ngTemplateOutlet=\"\n                                        elementSlot()!;\n                                        context: { $implicit: element, storage: storage }\n                                    \"\n                                />\n                            </li>\n                        }\n                    </ul>\n                }\n            </div>\n        </div>\n    </div>\n</ng-container>\n", styles: [".button{padding:2px;display:flex;border-radius:4px}@media (hover: hover){.button:hover{background:var(--cui-base-200)}}.button :active{background:var(--cui-base-200)}.icon{padding:2px}.wrapper{display:flex;flex-direction:column;gap:8px}.content{padding-left:20px}.content_hidden{display:none}.lists{display:flex;flex-direction:column;gap:8px;position:relative}.lists>*{z-index:1}.lists:has(>:nth-child(2)):before{content:\"\";position:absolute;top:0;bottom:0;left:8px;width:1px;background:var(--cui-base-200)}.list{display:flex;flex-direction:column;gap:8px}.item{position:relative}.item:not(:last-child):before{content:\"\";position:absolute;top:0;left:8px;bottom:-8px;z-index:-1;width:1px;background:var(--cui-base-200)}\n"], dependencies: [{ 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: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => CuiStorageListComponent), selector: "cui-storage-list", inputs: ["storages", "elementSlot", "itemSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiStorageListItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'li[cuiStorageListItem]', imports: [CuiLetDirective, CuiSvgModule, NgTemplateOutlet, forwardRef(() => CuiStorageListComponent)], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *cuiLet=\"storage() as storage\">\r\n    <div class=\"wrapper\">\r\n        <ng-template #openCloseButton>\r\n            @if (hasContent()) {\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"button\"\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            }\r\n        </ng-template>\r\n\r\n        @if (itemSlot(); as item) {\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    item;\r\n                    context: {\r\n                        $implicit: storage,\r\n                        openCloseButton,\r\n                        areContentOpened: areContentOpened(),\r\n                        hasContent: hasContent()\r\n                    }\r\n                \"\r\n            />\r\n        }\r\n\r\n        <div\r\n            class=\"content\"\r\n            [class.content_hidden]=\"!areContentOpened()\"\r\n        >\r\n            <div class=\"lists\">\r\n                @if (storageChildren().length) {\r\n                    <cui-storage-list\r\n                        [storages]=\"storageChildren()\"\r\n                        [elementSlot]=\"elementSlot()\"\r\n                        [itemSlot]=\"itemSlot()\"\r\n                    />\r\n                }\r\n                @if (storageElements().length && elementSlot()) {\r\n                    <ul class=\"list\">\r\n                        @for (element of storageElements(); track element.id) {\r\n                            <li class=\"item\">\r\n                                <ng-container\r\n                                    *ngTemplateOutlet=\"\r\n                                        elementSlot()!;\r\n                                        context: { $implicit: element, storage: storage }\r\n                                    \"\r\n                                />\r\n                            </li>\r\n                        }\r\n                    </ul>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [".button{padding:2px;display:flex;border-radius:4px}@media (hover: hover){.button:hover{background:var(--cui-base-200)}}.button :active{background:var(--cui-base-200)}.icon{padding:2px}.wrapper{display:flex;flex-direction:column;gap:8px}.content{padding-left:20px}.content_hidden{display:none}.lists{display:flex;flex-direction:column;gap:8px;position:relative}.lists>*{z-index:1}.lists:has(>:nth-child(2)):before{content:\"\";position:absolute;top:0;bottom:0;left:8px;width:1px;background:var(--cui-base-200)}.list{display:flex;flex-direction:column;gap:8px}.item{position:relative}.item:not(:last-child):before{content:\"\";position:absolute;top:0;left:8px;bottom:-8px;z-index:-1;width:1px;background:var(--cui-base-200)}\n"] }]
+            args: [{ selector: 'li[cuiStorageListItem]', imports: [CuiLetDirective, CuiSvgModule, NgTemplateOutlet, forwardRef(() => CuiStorageListComponent)], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *cuiLet=\"storage() as storage\">\n    <div class=\"wrapper\">\n        <ng-template #openCloseButton>\n            @if (hasContent()) {\n                <button\n                    type=\"button\"\n                    class=\"button\"\n                    (click)=\"onToggleChildren($event)\"\n                >\n                    <cui-svg\n                        [icon]=\"openCloseButtonIcon()\"\n                        color=\"var(--cui-base-500)\"\n                    />\n                </button>\n            }\n        </ng-template>\n\n        @if (itemSlot(); as item) {\n            <ng-container\n                *ngTemplateOutlet=\"\n                    item;\n                    context: {\n                        $implicit: storage,\n                        openCloseButton,\n                        areContentOpened: areContentOpened(),\n                        hasContent: hasContent()\n                    }\n                \"\n            />\n        }\n\n        <div\n            class=\"content\"\n            [class.content_hidden]=\"!areContentOpened()\"\n        >\n            <div class=\"lists\">\n                @if (storageChildren().length) {\n                    <cui-storage-list\n                        [storages]=\"storageChildren()\"\n                        [elementSlot]=\"elementSlot()\"\n                        [itemSlot]=\"itemSlot()\"\n                    />\n                }\n                @if (storageElements().length && elementSlot()) {\n                    <ul class=\"list\">\n                        @for (element of storageElements(); track element.id) {\n                            <li class=\"item\">\n                                <ng-container\n                                    *ngTemplateOutlet=\"\n                                        elementSlot()!;\n                                        context: { $implicit: element, storage: storage }\n                                    \"\n                                />\n                            </li>\n                        }\n                    </ul>\n                }\n            </div>\n        </div>\n    </div>\n</ng-container>\n", styles: [".button{padding:2px;display:flex;border-radius:4px}@media (hover: hover){.button:hover{background:var(--cui-base-200)}}.button :active{background:var(--cui-base-200)}.icon{padding:2px}.wrapper{display:flex;flex-direction:column;gap:8px}.content{padding-left:20px}.content_hidden{display:none}.lists{display:flex;flex-direction:column;gap:8px;position:relative}.lists>*{z-index:1}.lists:has(>:nth-child(2)):before{content:\"\";position:absolute;top:0;bottom:0;left:8px;width:1px;background:var(--cui-base-200)}.list{display:flex;flex-direction:column;gap:8px}.item{position:relative}.item:not(:last-child):before{content:\"\";position:absolute;top:0;left:8px;bottom:-8px;z-index:-1;width:1px;background:var(--cui-base-200)}\n"] }]
         }], ctorParameters: () => [] });
 
 class CuiStorageListComponent {
@@ -10210,16 +10298,16 @@ class CuiStorageListComponent {
         this.itemSlot = input();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiStorageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiStorageListComponent, isStandalone: true, selector: "cui-storage-list", inputs: { storages: { classPropertyName: "storages", publicName: "storages", isSignal: true, isRequired: true, transformFunction: null }, elementSlot: { classPropertyName: "elementSlot", publicName: "elementSlot", isSignal: true, isRequired: false, transformFunction: null }, itemSlot: { classPropertyName: "itemSlot", publicName: "itemSlot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ul class=\"list\">\r\n    @for (storage of storages(); track storage.id) {\r\n        <li\r\n            cuiStorageListItem\r\n            [storage]=\"storage\"\r\n            [elementSlot]=\"elementSlot()\"\r\n            [itemSlot]=\"itemSlot()\"\r\n            class=\"item\"\r\n        ></li>\r\n    }\r\n</ul>\r\n", styles: [":host{display:block}.list{display:flex;flex-direction:column;gap:8px}.item{position:relative;z-index:0}.item:not(:last-child):before{content:\"\";position:absolute;top:0;left:8px;bottom:-8px;z-index:-1;width:1px;background:var(--cui-base-200)}\n"], dependencies: [{ kind: "component", type: CuiStorageListItemComponent, selector: "li[cuiStorageListItem]", inputs: ["storage", "elementSlot", "itemSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiStorageListComponent, isStandalone: true, selector: "cui-storage-list", inputs: { storages: { classPropertyName: "storages", publicName: "storages", isSignal: true, isRequired: true, transformFunction: null }, elementSlot: { classPropertyName: "elementSlot", publicName: "elementSlot", isSignal: true, isRequired: false, transformFunction: null }, itemSlot: { classPropertyName: "itemSlot", publicName: "itemSlot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ul class=\"list\">\n    @for (storage of storages(); track storage.id) {\n        <li\n            cuiStorageListItem\n            [storage]=\"storage\"\n            [elementSlot]=\"elementSlot()\"\n            [itemSlot]=\"itemSlot()\"\n            class=\"item\"\n        ></li>\n    }\n</ul>\n", styles: [":host{display:block}.list{display:flex;flex-direction:column;gap:8px}.item{position:relative;z-index:0}.item:not(:last-child):before{content:\"\";position:absolute;top:0;left:8px;bottom:-8px;z-index:-1;width:1px;background:var(--cui-base-200)}\n"], dependencies: [{ kind: "component", type: CuiStorageListItemComponent, selector: "li[cuiStorageListItem]", inputs: ["storage", "elementSlot", "itemSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiStorageListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-storage-list', imports: [CuiStorageListItemComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"list\">\r\n    @for (storage of storages(); track storage.id) {\r\n        <li\r\n            cuiStorageListItem\r\n            [storage]=\"storage\"\r\n            [elementSlot]=\"elementSlot()\"\r\n            [itemSlot]=\"itemSlot()\"\r\n            class=\"item\"\r\n        ></li>\r\n    }\r\n</ul>\r\n", styles: [":host{display:block}.list{display:flex;flex-direction:column;gap:8px}.item{position:relative;z-index:0}.item:not(:last-child):before{content:\"\";position:absolute;top:0;left:8px;bottom:-8px;z-index:-1;width:1px;background:var(--cui-base-200)}\n"] }]
+            args: [{ selector: 'cui-storage-list', imports: [CuiStorageListItemComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"list\">\n    @for (storage of storages(); track storage.id) {\n        <li\n            cuiStorageListItem\n            [storage]=\"storage\"\n            [elementSlot]=\"elementSlot()\"\n            [itemSlot]=\"itemSlot()\"\n            class=\"item\"\n        ></li>\n    }\n</ul>\n", styles: [":host{display:block}.list{display:flex;flex-direction:column;gap:8px}.item{position:relative;z-index:0}.item:not(:last-child):before{content:\"\";position:absolute;top:0;left:8px;bottom:-8px;z-index:-1;width:1px;background:var(--cui-base-200)}\n"] }]
         }] });
 
 /**
  * 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_STORAGE_LIST_SERVICE_TOKEN, CUI_TABS_SERVICE_TOKEN, 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, CuiSelectModalComponent, CuiSelectModalFolderComponent, CuiSelectModalSearchComponent, CuiSelectModalService, CuiSelectModule, CuiSelectedCategoryService, CuiSidebarContainerComponent, CuiSidebarHeaderComponent, CuiSidebarNavigationComponent, CuiSidebarNavigationContainerComponent, CuiSidebarNavigationItemComponent, CuiSidebarService, CuiStorageListComponent, CuiSvgComponent, CuiSvgModule, CuiTabDirective, CuiTabsComponent, 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_RESOURCE_URL, CUI_ROOT_SELECTOR, CUI_STORAGE_LIST_SERVICE_TOKEN, CUI_TABS_SERVICE_TOKEN, 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, CuiEditorToolsService, 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, CuiSelectModalComponent, CuiSelectModalFolderComponent, CuiSelectModalSearchComponent, CuiSelectModalService, CuiSelectModule, CuiSelectedCategoryService, CuiSidebarContainerComponent, CuiSidebarHeaderComponent, CuiSidebarNavigationComponent, CuiSidebarNavigationContainerComponent, CuiSidebarNavigationItemComponent, CuiSidebarService, CuiStorageListComponent, CuiSvgComponent, CuiSvgModule, CuiTabDirective, CuiTabsComponent, 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, provideCuiEditorResourceUrl };
 //# sourceMappingURL=cuby-ui-core.mjs.map