npm - @cuby-ui/core - Versions diffs - 0.0.485 → 0.0.488 - Mend

@cuby-ui/core 0.0.485 → 0.0.488

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/fesm2022/cuby-ui-core.mjs CHANGED Viewed

@@ -2402,11 +2402,11 @@ class ContentHeaderComponent {
         this.tooltip = input();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContentHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ContentHeaderComponent, isStandalone: true, selector: "header[cuiContentHeader]", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, subheading: { classPropertyName: "subheading", publicName: "subheading", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"wrapper\">\n    <span class=\"heading\">\n        {{ heading() }}\n\n        @if (tooltip(); as tooltip) {\n            <cui-svg\n                icon=\"cuiIconQuestionCircleBold\"\n                [cuiTooltip]=\"tooltip\"\n            />\n        }\n    </span>\n\n    @if (subheading(); as subheading) {\n        <h2 class=\"subheading\">{{ subheading }}</h2>\n    }\n</div>\n\n<ng-content />\n", styles: [":host{display:flex;justify-content:space-between;align-items:center;gap:12px}.wrapper{display:flex;flex-direction:column;gap:4px}.heading{display:flex;gap:4px;align-items:center;font-weight:500;font-size:16px;line-height:24px}.subheading{font-weight:400;font-size:14px;line-height:20px;color:var(--cui-base-500)}\n"], dependencies: [{ kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "directive", type: CuiTooltipDirective, selector: "[cuiTooltip]:not(ng-container):not(ng-template)", inputs: ["cuiTooltipContext", "cuiTooltipAppearance", "cuiTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ContentHeaderComponent, isStandalone: true, selector: "header[cuiContentHeader]", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, subheading: { classPropertyName: "subheading", publicName: "subheading", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"wrapper\">\n    <span class=\"heading\">\n        {{ heading() }}\n\n        @if (tooltip(); as tooltip) {\n            <cui-svg\n                icon=\"cuiIconQuestionCircleBold\"\n                [cuiTooltip]=\"tooltip\"\n            />\n        }\n    </span>\n\n    @if (subheading(); as subheading) {\n        <h2 class=\"subheading\">{{ subheading }}</h2>\n    }\n</div>\n\n<ng-content />\n", styles: [":host{display:flex;justify-content:space-between;align-items:center;gap:12px}.wrapper{display:flex;flex-direction:column;gap:4px}.heading{display:flex;flex-direction:row;gap:4px;align-items:center;justify-content:flex-start;font-weight:500;font-size:16px;line-height:24px}.subheading{font-weight:400;font-size:14px;line-height:20px;color:var(--cui-base-500)}\n"], dependencies: [{ kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "directive", type: CuiTooltipDirective, selector: "[cuiTooltip]:not(ng-container):not(ng-template)", inputs: ["cuiTooltipContext", "cuiTooltipAppearance", "cuiTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContentHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'header[cuiContentHeader]', imports: [CuiSvgModule, CuiTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"wrapper\">\n    <span class=\"heading\">\n        {{ heading() }}\n\n        @if (tooltip(); as tooltip) {\n            <cui-svg\n                icon=\"cuiIconQuestionCircleBold\"\n                [cuiTooltip]=\"tooltip\"\n            />\n        }\n    </span>\n\n    @if (subheading(); as subheading) {\n        <h2 class=\"subheading\">{{ subheading }}</h2>\n    }\n</div>\n\n<ng-content />\n", styles: [":host{display:flex;justify-content:space-between;align-items:center;gap:12px}.wrapper{display:flex;flex-direction:column;gap:4px}.heading{display:flex;gap:4px;align-items:center;font-weight:500;font-size:16px;line-height:24px}.subheading{font-weight:400;font-size:14px;line-height:20px;color:var(--cui-base-500)}\n"] }]
+            args: [{ selector: 'header[cuiContentHeader]', imports: [CuiSvgModule, CuiTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"wrapper\">\n    <span class=\"heading\">\n        {{ heading() }}\n\n        @if (tooltip(); as tooltip) {\n            <cui-svg\n                icon=\"cuiIconQuestionCircleBold\"\n                [cuiTooltip]=\"tooltip\"\n            />\n        }\n    </span>\n\n    @if (subheading(); as subheading) {\n        <h2 class=\"subheading\">{{ subheading }}</h2>\n    }\n</div>\n\n<ng-content />\n", styles: [":host{display:flex;justify-content:space-between;align-items:center;gap:12px}.wrapper{display:flex;flex-direction:column;gap:4px}.heading{display:flex;flex-direction:row;gap:4px;align-items:center;justify-content:flex-start;font-weight:500;font-size:16px;line-height:24px}.subheading{font-weight:400;font-size:14px;line-height:20px;color:var(--cui-base-500)}\n"] }]
         }] });
 const CUI_ROOT_SELECTOR = 'cui-root';
@@ -2945,11 +2945,11 @@ class CuiDropdownWrapperComponent {
         this.maxHeight = '350px';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiDropdownWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CuiDropdownWrapperComponent, isStandalone: true, selector: "cui-dropdown-wrapper", inputs: { title: "title", width: "width", maxHeight: "maxHeight" }, hostDirectives: [{ directive: i1$1.CuiFocusTrapDirective }], ngImport: i0, template: "<div\r\n    [style.width]=\"width\"\r\n    [style.max-height]=\"maxHeight\"\r\n    class=\"dropdown\"\r\n>\r\n    <header\r\n        *ngIf=\"title\"\r\n        class=\"header\"\r\n    >\r\n        <h3 class=\"title\">{{ title }}</h3>\r\n        <ng-content select=\"[ccDropdownHeaderContent]\" />\r\n    </header>\r\n\r\n    <div class=\"scrollable-content\">\r\n        <ng-content />\r\n    </div>\r\n    <footer class=\"footer\">\r\n        <ng-content select=\"[ccDropdownFooterContent]\" />\r\n    </footer>\r\n</div>\r\n", styles: [".dropdown{box-shadow:0 1px 4px #0000000a,0 1px 4px #0000000a;padding-top:3px;padding-bottom:3px;display:flex;flex-direction:column;border-radius:8px;border:1px solid var(--cui-base-200);height:100%;width:345px;background:var(--cui-base-0)}.header{padding-right:5px;padding-left:5px;display:flex;flex-direction:column;justify-content:center}.title{font-weight:400;font-size:14px;line-height:20px;padding:4px 8px;color:var(--cui-base-500);text-transform:uppercase}.scrollable-content{overflow:auto}.footer{padding:2px 5px}.footer:empty{display:contents}\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.14", type: CuiDropdownWrapperComponent, isStandalone: true, selector: "cui-dropdown-wrapper", inputs: { title: "title", width: "width", maxHeight: "maxHeight" }, hostDirectives: [{ directive: i1$1.CuiFocusTrapDirective }], ngImport: i0, template: "<div\r\n    [style.width]=\"width\"\r\n    [style.max-height]=\"maxHeight\"\r\n    class=\"dropdown\"\r\n>\r\n    <header\r\n        *ngIf=\"title\"\r\n        class=\"header\"\r\n    >\r\n        <h3 class=\"title\">{{ title }}</h3>\r\n        <ng-content select=\"[ccDropdownHeaderContent]\" />\r\n    </header>\r\n\r\n    <div class=\"scrollable-content\">\r\n        <ng-content />\r\n    </div>\r\n    <footer class=\"footer\">\r\n        <ng-content select=\"[ccDropdownFooterContent]\" />\r\n    </footer>\r\n</div>\r\n", styles: [".dropdown{box-shadow:0 1px 4px #0000000a,0 1px 4px #0000000a;padding-top:3px;padding-bottom:3px;display:flex;flex-direction:column;gap:0;border-radius:8px;border:1px solid var(--cui-base-200);height:100%;width:345px;background:var(--cui-base-0)}.header{padding-right:5px;padding-left:5px;display:flex;flex-direction:column;gap:0;align-items:stretch;justify-content:center}.title{font-weight:400;font-size:14px;line-height:20px;padding:4px 8px;color:var(--cui-base-500);text-transform:uppercase}.scrollable-content{overflow:auto}.footer{padding:2px 5px}.footer:empty{display:contents}\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.14", ngImport: i0, type: CuiDropdownWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-dropdown-wrapper', standalone: true, imports: [NgIf], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [CuiFocusTrapDirective], template: "<div\r\n    [style.width]=\"width\"\r\n    [style.max-height]=\"maxHeight\"\r\n    class=\"dropdown\"\r\n>\r\n    <header\r\n        *ngIf=\"title\"\r\n        class=\"header\"\r\n    >\r\n        <h3 class=\"title\">{{ title }}</h3>\r\n        <ng-content select=\"[ccDropdownHeaderContent]\" />\r\n    </header>\r\n\r\n    <div class=\"scrollable-content\">\r\n        <ng-content />\r\n    </div>\r\n    <footer class=\"footer\">\r\n        <ng-content select=\"[ccDropdownFooterContent]\" />\r\n    </footer>\r\n</div>\r\n", styles: [".dropdown{box-shadow:0 1px 4px #0000000a,0 1px 4px #0000000a;padding-top:3px;padding-bottom:3px;display:flex;flex-direction:column;border-radius:8px;border:1px solid var(--cui-base-200);height:100%;width:345px;background:var(--cui-base-0)}.header{padding-right:5px;padding-left:5px;display:flex;flex-direction:column;justify-content:center}.title{font-weight:400;font-size:14px;line-height:20px;padding:4px 8px;color:var(--cui-base-500);text-transform:uppercase}.scrollable-content{overflow:auto}.footer{padding:2px 5px}.footer:empty{display:contents}\n"] }]
+            args: [{ selector: 'cui-dropdown-wrapper', standalone: true, imports: [NgIf], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [CuiFocusTrapDirective], template: "<div\r\n    [style.width]=\"width\"\r\n    [style.max-height]=\"maxHeight\"\r\n    class=\"dropdown\"\r\n>\r\n    <header\r\n        *ngIf=\"title\"\r\n        class=\"header\"\r\n    >\r\n        <h3 class=\"title\">{{ title }}</h3>\r\n        <ng-content select=\"[ccDropdownHeaderContent]\" />\r\n    </header>\r\n\r\n    <div class=\"scrollable-content\">\r\n        <ng-content />\r\n    </div>\r\n    <footer class=\"footer\">\r\n        <ng-content select=\"[ccDropdownFooterContent]\" />\r\n    </footer>\r\n</div>\r\n", styles: [".dropdown{box-shadow:0 1px 4px #0000000a,0 1px 4px #0000000a;padding-top:3px;padding-bottom:3px;display:flex;flex-direction:column;gap:0;border-radius:8px;border:1px solid var(--cui-base-200);height:100%;width:345px;background:var(--cui-base-0)}.header{padding-right:5px;padding-left:5px;display:flex;flex-direction:column;gap:0;align-items:stretch;justify-content:center}.title{font-weight:400;font-size:14px;line-height:20px;padding:4px 8px;color:var(--cui-base-500);text-transform:uppercase}.scrollable-content{overflow:auto}.footer{padding:2px 5px}.footer:empty{display:contents}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], width: [{
@@ -3596,11 +3596,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class InsertedComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InsertedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: InsertedComponent, isStandalone: true, selector: "cui-inserted", ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <cui-badge color=\"violet\">\n        <cui-svg\n            class=\"icon\"\n            icon=\"cuiIconVariant\"\n            color=\"var(--cui-violet-400)\"\n        />\n        {{ t('INSERTED') }}\n    </cui-badge>\n</ng-container>\n", styles: [":host{display:contents}.violet{display:flex;gap:4px;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CuiBadgeModule }, { kind: "component", type: CuiBadgeComponent, selector: "cui-badge", inputs: ["color", "size", "isWithDot"] }, { 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: "14.0.0", version: "18.2.14", type: InsertedComponent, isStandalone: true, selector: "cui-inserted", ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <cui-badge color=\"violet\">\n        <cui-svg\n            class=\"icon\"\n            icon=\"cuiIconVariant\"\n            color=\"var(--cui-violet-400)\"\n        />\n        {{ t('INSERTED') }}\n    </cui-badge>\n</ng-container>\n", styles: [":host{display:contents}.violet{display:flex;flex-direction:row;gap:4px;align-items:center;justify-content:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CuiBadgeModule }, { kind: "component", type: CuiBadgeComponent, selector: "cui-badge", inputs: ["color", "size", "isWithDot"] }, { 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.14", ngImport: i0, type: InsertedComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-inserted', imports: [CuiBadgeModule, CuiSvgModule, TranslocoModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    <cui-badge color=\"violet\">\n        <cui-svg\n            class=\"icon\"\n            icon=\"cuiIconVariant\"\n            color=\"var(--cui-violet-400)\"\n        />\n        {{ t('INSERTED') }}\n    </cui-badge>\n</ng-container>\n", styles: [":host{display:contents}.violet{display:flex;gap:4px;align-items:center}\n"] }]
+            args: [{ selector: 'cui-inserted', imports: [CuiBadgeModule, CuiSvgModule, TranslocoModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    <cui-badge color=\"violet\">\n        <cui-svg\n            class=\"icon\"\n            icon=\"cuiIconVariant\"\n            color=\"var(--cui-violet-400)\"\n        />\n        {{ t('INSERTED') }}\n    </cui-badge>\n</ng-container>\n", styles: [":host{display:contents}.violet{display:flex;flex-direction:row;gap:4px;align-items:center;justify-content:flex-start}\n"] }]
         }] });
 class ModalHeaderComponent {
@@ -3898,11 +3898,11 @@ class CuiSidebarHeaderComponent {
         this.sidebarService.switch();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiSidebarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: CuiSidebarHeaderComponent, isStandalone: true, selector: "header[cuiSidebarHeader]", inputs: { headerSlot: { classPropertyName: "headerSlot", publicName: "headerSlot", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container\n    [ngTemplateOutlet]=\"headerSlot()\"\n    [ngTemplateOutletContext]=\"{ $implicit: isOpened() }\"\n/>\n<button\n    type=\"button\"\n    class=\"button\"\n    [class.button_opened]=\"isOpened()\"\n    (click)=\"onSwitch($event)\"\n>\n    <cui-svg\n        [icon]=\"buttonIcon()\"\n        color=\"var(--cui-base-500)\"\n    />\n</button>\n", 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.14", type: CuiSidebarHeaderComponent, isStandalone: true, selector: "header[cuiSidebarHeader]", inputs: { headerSlot: { classPropertyName: "headerSlot", publicName: "headerSlot", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container\n    [ngTemplateOutlet]=\"headerSlot()\"\n    [ngTemplateOutletContext]=\"{ $implicit: isOpened() }\"\n/>\n<button\n    type=\"button\"\n    class=\"button\"\n    [class.button_opened]=\"isOpened()\"\n    (click)=\"onSwitch($event)\"\n>\n    <cui-svg\n        [icon]=\"buttonIcon()\"\n        color=\"var(--cui-base-500)\"\n    />\n</button>\n", styles: [":host{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:flex-start;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.14", ngImport: i0, type: CuiSidebarHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'header[cuiSidebarHeader]', imports: [CuiSvgModule, NgTemplateOutlet], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container\n    [ngTemplateOutlet]=\"headerSlot()\"\n    [ngTemplateOutletContext]=\"{ $implicit: isOpened() }\"\n/>\n<button\n    type=\"button\"\n    class=\"button\"\n    [class.button_opened]=\"isOpened()\"\n    (click)=\"onSwitch($event)\"\n>\n    <cui-svg\n        [icon]=\"buttonIcon()\"\n        color=\"var(--cui-base-500)\"\n    />\n</button>\n", 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\n    [ngTemplateOutlet]=\"headerSlot()\"\n    [ngTemplateOutletContext]=\"{ $implicit: isOpened() }\"\n/>\n<button\n    type=\"button\"\n    class=\"button\"\n    [class.button_opened]=\"isOpened()\"\n    (click)=\"onSwitch($event)\"\n>\n    <cui-svg\n        [icon]=\"buttonIcon()\"\n        color=\"var(--cui-base-500)\"\n    />\n</button>\n", styles: [":host{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:flex-start;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 {
@@ -3979,14 +3979,14 @@ class CuiCardWrapperComponent {
         this.isSelected = input(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiCardWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: CuiCardWrapperComponent, isStandalone: true, selector: "cui-card-wrapper, [cuiCardWrapper]", inputs: { withBorder: { classPropertyName: "withBorder", publicName: "withBorder", isSignal: true, isRequired: false, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class._with-border": "withBorder()", "class._selected": "isSelected()" } }, 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)}:host._selected{background:var(--cui-badge-info-bg)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: CuiCardWrapperComponent, isStandalone: true, selector: "cui-card-wrapper, [cuiCardWrapper]", inputs: { withBorder: { classPropertyName: "withBorder", publicName: "withBorder", isSignal: true, isRequired: false, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class._with-border": "withBorder()", "class._selected": "isSelected()" } }, 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;flex-direction:row;gap:var(--gap);align-items:center;justify-content:flex-start;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)}:host._selected{background:var(--cui-badge-info-bg)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiCardWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cui-card-wrapper, [cuiCardWrapper]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class._with-border]': 'withBorder()',
                         '[class._selected]': 'isSelected()'
-                    }, 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)}:host._selected{background:var(--cui-badge-info-bg)}\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;flex-direction:row;gap:var(--gap);align-items:center;justify-content:flex-start;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)}:host._selected{background:var(--cui-badge-info-bg)}\n"] }]
         }] });
 class CuiLayoutComponent {
@@ -4068,11 +4068,11 @@ class CuiAbstractTabsComponent {
         }, { allowSignalWrites: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiAbstractTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiAbstractTabsComponent, isStandalone: true, selector: "cui-abstract-tabs", inputs: { headerSlot: { classPropertyName: "headerSlot", publicName: "headerSlot", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiAbstractTabsComponent, isStandalone: true, selector: "cui-abstract-tabs", inputs: { headerSlot: { classPropertyName: "headerSlot", publicName: "headerSlot", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, 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;gap:0}.header{display:flex;flex-direction:row;gap:0}.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.14", ngImport: i0, type: CuiAbstractTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-abstract-tabs', imports: [NgTemplateOutlet], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+            args: [{ selector: 'cui-abstract-tabs', imports: [NgTemplateOutlet], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, 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;gap:0}.header{display:flex;flex-direction:row;gap:0}.button{display:contents}\n"] }]
         }], ctorParameters: () => [] });
 class CuiTabsServiceImpl extends CuiAbstractTabsService {
@@ -5397,13 +5397,13 @@ class EditorAttachesToolComponent extends EditorToolComponent {
         return event.key !== 'Enter';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditorAttachesToolComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EditorAttachesToolComponent, isStandalone: true, selector: "ng-component", inputs: { file: "file", title: "title" }, outputs: { fileClicked: "fileClicked" }, host: { properties: { "class._hidden": "isShowLoadButton" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading; else preloader\">\r\n    <ng-container *transloco=\"let t\">\r\n        <div\r\n            *ngIf=\"file; else buttonTemplate\"\r\n            class=\"file\"\r\n        >\r\n            <cui-file-icon\r\n                *ngIf=\"file.extension\"\r\n                [extension]=\"file.extension\"\r\n            ></cui-file-icon>\r\n\r\n            <div class=\"info\">\r\n                <div\r\n                    class=\"title\"\r\n                    attr.data-placeholder=\"{{ t('FILE_TITLE') }}...\"\r\n                    [innerHTML]=\"title\"\r\n                    [attr.contenteditable]=\"!readOnly\"\r\n                    (paste)=\"onTitlePaste($event)\"\r\n                    (keydown)=\"onPreventEnter($event)\"\r\n                    (keyup)=\"onTitleChange($event)\"\r\n                ></div>\r\n                <div\r\n                    *ngIf=\"file.size; let size\"\r\n                    class=\"size\"\r\n                >\r\n                    {{ size | fileSize }}\r\n                </div>\r\n            </div>\r\n            <a\r\n                class=\"download\"\r\n                (click)=\"onFileClick()\"\r\n            >\r\n                <cui-svg\r\n                    icon=\"cuiIconChevronRightSm\"\r\n                    color=\"var(--cui-base-500)\"\r\n                />\r\n            </a>\r\n        </div>\r\n        <ng-template #buttonTemplate>\r\n            <button\r\n                [class]=\"['select-btn', this.api.styles.button]\"\r\n                (click)=\"onSelectFile()\"\r\n                type=\"button\"\r\n            >\r\n                <cui-svg icon=\"cuiIconPaperclipSm\" />\r\n                &nbsp;{{ buttonContent }}\r\n            </button>\r\n        </ng-template>\r\n    </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #preloader>\r\n    <div class=\"wrapper\">\r\n        <div class=\"preloader\"></div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{padding-top:4px;padding-bottom:4px;font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font);display:block}:host._hidden{display:none}:host ::ng-deep .icon path{stroke:none}.file{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:4px 12px;border-radius:8px;border:1px solid var(--cui-base-200);background-color:var(--cui-base-10)}.info{display:flex;flex-direction:column;gap:2px;flex-grow:1;width:0;word-wrap:break-word}.extension{display:flex;align-items:flex-end;padding:6px 2px;font-weight:500;font-size:12px;line-height:14px;border-radius:8px;width:35px;height:35px;color:var(--cui-gray-0)}.size{font-weight:400;font-size:13px;line-height:16px;color:var(--cui-base-500)}.download{padding:6px;flex-shrink:0;margin-left:auto;border-radius:8px;color:var(--cui-base-0)}.wrapper{display:flex;flex-direction:column;margin-bottom:10px;border-radius:8px;border:1px solid var(--cui-base-200);min-height:50px;background-color:var(--cui-base-0);overflow:hidden}.wrapper._loaded{min-height:auto}.preloader{width:30px;height:30px;border-radius:50%;background-size:cover;margin:auto;position:relative;background-position:center center}@keyframes preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preloader:after{content:\"\";position:absolute;z-index:3;width:30px;height:30px;border-radius:50%;border:2px solid var(--cui-base-200);border-top-color:var(--cui-blue-600);left:50%;top:50%;margin-top:-15px;margin-left:-15px;animation:preloader-spin 2s infinite linear;box-sizing:border-box}.title{font-weight:400;font-size:14px;line-height:20px;outline:none}.title[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.select-btn{display:flex;align-items:center;justify-content:center;width:100%}\n"], dependencies: [{ kind: "pipe", type: FileSizePipe, name: "fileSize" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiFileIconComponent, selector: "cui-file-icon", inputs: ["extension", "color"] }, { 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: "14.0.0", version: "18.2.14", type: EditorAttachesToolComponent, isStandalone: true, selector: "ng-component", inputs: { file: "file", title: "title" }, outputs: { fileClicked: "fileClicked" }, host: { properties: { "class._hidden": "isShowLoadButton" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading; else preloader\">\r\n    <ng-container *transloco=\"let t\">\r\n        <div\r\n            *ngIf=\"file; else buttonTemplate\"\r\n            class=\"file\"\r\n        >\r\n            <cui-file-icon\r\n                *ngIf=\"file.extension\"\r\n                [extension]=\"file.extension\"\r\n            ></cui-file-icon>\r\n\r\n            <div class=\"info\">\r\n                <div\r\n                    class=\"title\"\r\n                    attr.data-placeholder=\"{{ t('FILE_TITLE') }}...\"\r\n                    [innerHTML]=\"title\"\r\n                    [attr.contenteditable]=\"!readOnly\"\r\n                    (paste)=\"onTitlePaste($event)\"\r\n                    (keydown)=\"onPreventEnter($event)\"\r\n                    (keyup)=\"onTitleChange($event)\"\r\n                ></div>\r\n                <div\r\n                    *ngIf=\"file.size; let size\"\r\n                    class=\"size\"\r\n                >\r\n                    {{ size | fileSize }}\r\n                </div>\r\n            </div>\r\n            <a\r\n                class=\"download\"\r\n                (click)=\"onFileClick()\"\r\n            >\r\n                <cui-svg\r\n                    icon=\"cuiIconChevronRightSm\"\r\n                    color=\"var(--cui-base-500)\"\r\n                />\r\n            </a>\r\n        </div>\r\n        <ng-template #buttonTemplate>\r\n            <button\r\n                [class]=\"['select-btn', this.api.styles.button]\"\r\n                (click)=\"onSelectFile()\"\r\n                type=\"button\"\r\n            >\r\n                <cui-svg icon=\"cuiIconPaperclipSm\" />\r\n                &nbsp;{{ buttonContent }}\r\n            </button>\r\n        </ng-template>\r\n    </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #preloader>\r\n    <div class=\"wrapper\">\r\n        <div class=\"preloader\"></div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{padding-top:4px;padding-bottom:4px;font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font);display:block}:host._hidden{display:none}:host ::ng-deep .icon path{stroke:none}.file{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:space-between;padding:4px 12px;border-radius:8px;border:1px solid var(--cui-base-200);background-color:var(--cui-base-10)}.info{display:flex;flex-direction:column;gap:2px;flex-grow:1;width:0;word-wrap:break-word}.extension{display:flex;flex-direction:row;gap:0;align-items:flex-end;justify-content:flex-start;padding:6px 2px;font-weight:500;font-size:12px;line-height:14px;border-radius:8px;width:35px;height:35px;color:var(--cui-gray-0)}.size{font-weight:400;font-size:13px;line-height:16px;color:var(--cui-base-500)}.download{padding:6px;flex-shrink:0;margin-left:auto;border-radius:8px;color:var(--cui-base-0)}.wrapper{display:flex;flex-direction:column;gap:0;margin-bottom:10px;border-radius:8px;border:1px solid var(--cui-base-200);min-height:50px;background-color:var(--cui-base-0);overflow:hidden}.wrapper._loaded{min-height:auto}.preloader{width:30px;height:30px;border-radius:50%;background-size:cover;margin:auto;position:relative;background-position:center center}@keyframes preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preloader:after{content:\"\";position:absolute;z-index:3;width:30px;height:30px;border-radius:50%;border:2px solid var(--cui-base-200);border-top-color:var(--cui-blue-600);left:50%;top:50%;margin-top:-15px;margin-left:-15px;animation:preloader-spin 2s infinite linear;box-sizing:border-box}.title{font-weight:400;font-size:14px;line-height:20px;outline:none}.title[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.select-btn{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:center;width:100%}\n"], dependencies: [{ kind: "pipe", type: FileSizePipe, name: "fileSize" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiFileIconComponent, selector: "cui-file-icon", inputs: ["extension", "color"] }, { 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.14", ngImport: i0, type: EditorAttachesToolComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [FileSizePipe, FormsModule, NgIf, TranslocoDirective, CuiFileIconComponent, CuiSvgModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class._hidden]': 'isShowLoadButton'
-                    }, template: "<ng-container *ngIf=\"!isLoading; else preloader\">\r\n    <ng-container *transloco=\"let t\">\r\n        <div\r\n            *ngIf=\"file; else buttonTemplate\"\r\n            class=\"file\"\r\n        >\r\n            <cui-file-icon\r\n                *ngIf=\"file.extension\"\r\n                [extension]=\"file.extension\"\r\n            ></cui-file-icon>\r\n\r\n            <div class=\"info\">\r\n                <div\r\n                    class=\"title\"\r\n                    attr.data-placeholder=\"{{ t('FILE_TITLE') }}...\"\r\n                    [innerHTML]=\"title\"\r\n                    [attr.contenteditable]=\"!readOnly\"\r\n                    (paste)=\"onTitlePaste($event)\"\r\n                    (keydown)=\"onPreventEnter($event)\"\r\n                    (keyup)=\"onTitleChange($event)\"\r\n                ></div>\r\n                <div\r\n                    *ngIf=\"file.size; let size\"\r\n                    class=\"size\"\r\n                >\r\n                    {{ size | fileSize }}\r\n                </div>\r\n            </div>\r\n            <a\r\n                class=\"download\"\r\n                (click)=\"onFileClick()\"\r\n            >\r\n                <cui-svg\r\n                    icon=\"cuiIconChevronRightSm\"\r\n                    color=\"var(--cui-base-500)\"\r\n                />\r\n            </a>\r\n        </div>\r\n        <ng-template #buttonTemplate>\r\n            <button\r\n                [class]=\"['select-btn', this.api.styles.button]\"\r\n                (click)=\"onSelectFile()\"\r\n                type=\"button\"\r\n            >\r\n                <cui-svg icon=\"cuiIconPaperclipSm\" />\r\n                &nbsp;{{ buttonContent }}\r\n            </button>\r\n        </ng-template>\r\n    </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #preloader>\r\n    <div class=\"wrapper\">\r\n        <div class=\"preloader\"></div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{padding-top:4px;padding-bottom:4px;font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font);display:block}:host._hidden{display:none}:host ::ng-deep .icon path{stroke:none}.file{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:4px 12px;border-radius:8px;border:1px solid var(--cui-base-200);background-color:var(--cui-base-10)}.info{display:flex;flex-direction:column;gap:2px;flex-grow:1;width:0;word-wrap:break-word}.extension{display:flex;align-items:flex-end;padding:6px 2px;font-weight:500;font-size:12px;line-height:14px;border-radius:8px;width:35px;height:35px;color:var(--cui-gray-0)}.size{font-weight:400;font-size:13px;line-height:16px;color:var(--cui-base-500)}.download{padding:6px;flex-shrink:0;margin-left:auto;border-radius:8px;color:var(--cui-base-0)}.wrapper{display:flex;flex-direction:column;margin-bottom:10px;border-radius:8px;border:1px solid var(--cui-base-200);min-height:50px;background-color:var(--cui-base-0);overflow:hidden}.wrapper._loaded{min-height:auto}.preloader{width:30px;height:30px;border-radius:50%;background-size:cover;margin:auto;position:relative;background-position:center center}@keyframes preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preloader:after{content:\"\";position:absolute;z-index:3;width:30px;height:30px;border-radius:50%;border:2px solid var(--cui-base-200);border-top-color:var(--cui-blue-600);left:50%;top:50%;margin-top:-15px;margin-left:-15px;animation:preloader-spin 2s infinite linear;box-sizing:border-box}.title{font-weight:400;font-size:14px;line-height:20px;outline:none}.title[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.select-btn{display:flex;align-items:center;justify-content:center;width:100%}\n"] }]
+                    }, template: "<ng-container *ngIf=\"!isLoading; else preloader\">\r\n    <ng-container *transloco=\"let t\">\r\n        <div\r\n            *ngIf=\"file; else buttonTemplate\"\r\n            class=\"file\"\r\n        >\r\n            <cui-file-icon\r\n                *ngIf=\"file.extension\"\r\n                [extension]=\"file.extension\"\r\n            ></cui-file-icon>\r\n\r\n            <div class=\"info\">\r\n                <div\r\n                    class=\"title\"\r\n                    attr.data-placeholder=\"{{ t('FILE_TITLE') }}...\"\r\n                    [innerHTML]=\"title\"\r\n                    [attr.contenteditable]=\"!readOnly\"\r\n                    (paste)=\"onTitlePaste($event)\"\r\n                    (keydown)=\"onPreventEnter($event)\"\r\n                    (keyup)=\"onTitleChange($event)\"\r\n                ></div>\r\n                <div\r\n                    *ngIf=\"file.size; let size\"\r\n                    class=\"size\"\r\n                >\r\n                    {{ size | fileSize }}\r\n                </div>\r\n            </div>\r\n            <a\r\n                class=\"download\"\r\n                (click)=\"onFileClick()\"\r\n            >\r\n                <cui-svg\r\n                    icon=\"cuiIconChevronRightSm\"\r\n                    color=\"var(--cui-base-500)\"\r\n                />\r\n            </a>\r\n        </div>\r\n        <ng-template #buttonTemplate>\r\n            <button\r\n                [class]=\"['select-btn', this.api.styles.button]\"\r\n                (click)=\"onSelectFile()\"\r\n                type=\"button\"\r\n            >\r\n                <cui-svg icon=\"cuiIconPaperclipSm\" />\r\n                &nbsp;{{ buttonContent }}\r\n            </button>\r\n        </ng-template>\r\n    </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #preloader>\r\n    <div class=\"wrapper\">\r\n        <div class=\"preloader\"></div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{padding-top:4px;padding-bottom:4px;font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font);display:block}:host._hidden{display:none}:host ::ng-deep .icon path{stroke:none}.file{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:space-between;padding:4px 12px;border-radius:8px;border:1px solid var(--cui-base-200);background-color:var(--cui-base-10)}.info{display:flex;flex-direction:column;gap:2px;flex-grow:1;width:0;word-wrap:break-word}.extension{display:flex;flex-direction:row;gap:0;align-items:flex-end;justify-content:flex-start;padding:6px 2px;font-weight:500;font-size:12px;line-height:14px;border-radius:8px;width:35px;height:35px;color:var(--cui-gray-0)}.size{font-weight:400;font-size:13px;line-height:16px;color:var(--cui-base-500)}.download{padding:6px;flex-shrink:0;margin-left:auto;border-radius:8px;color:var(--cui-base-0)}.wrapper{display:flex;flex-direction:column;gap:0;margin-bottom:10px;border-radius:8px;border:1px solid var(--cui-base-200);min-height:50px;background-color:var(--cui-base-0);overflow:hidden}.wrapper._loaded{min-height:auto}.preloader{width:30px;height:30px;border-radius:50%;background-size:cover;margin:auto;position:relative;background-position:center center}@keyframes preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preloader:after{content:\"\";position:absolute;z-index:3;width:30px;height:30px;border-radius:50%;border:2px solid var(--cui-base-200);border-top-color:var(--cui-blue-600);left:50%;top:50%;margin-top:-15px;margin-left:-15px;animation:preloader-spin 2s infinite linear;box-sizing:border-box}.title{font-weight:400;font-size:14px;line-height:20px;outline:none}.title[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.select-btn{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:center;width:100%}\n"] }]
         }], propDecorators: { file: [{
                 type: Input,
                 args: [{ required: true }]
@@ -6715,7 +6715,7 @@ class CuiCombinedTextBlockTool {
     save(blockContent) {
         const textBlocks = [];
         blockContent.querySelectorAll(this.TAG).forEach((span) => {
-            textBlocks.push(this.getBlockPartObject(span.dataset['id'], span.innerHTML));
+            textBlocks.push(this.getBlockPartObject(span.dataset['localId'], span.innerHTML));
         });
         return textBlocks;
     }
@@ -6767,25 +6767,7 @@ class CuiCombinedTextBlockTool {
         this.removeBlocks(removedElementsIds);
         this.changes.clear();
     }
-    getNextIndex() {
-        recalculateIndexes(this.api.blocks);
-        const index = this.api.blocks.getCurrentBlockIndex();
-        const block = this.api.blocks.getBlockByIndex(index);
-        const dataIndex = Number(block?.holder.dataset['index']);
-        const selection = window.getSelection();
-        const range = selection?.rangeCount ? selection.getRangeAt(0) : null;
-        const caretPosition = range?.startOffset ?? 1;
-        let nextBlockIndex = dataIndex;
-        if (caretPosition !== 0) {
-            const blockContainer = block?.holder.querySelector('.' + COMBINED_TEXT_BLOCK);
-            const childrenCount = blockContainer?.children?.length ? blockContainer?.children?.length - 1 : 0;
-            nextBlockIndex = dataIndex + childrenCount + 1;
-        }
-        if (!nextBlockIndex) {
-            nextBlockIndex ||= 0;
-        }
-        return nextBlockIndex;
-    }
+    // RIP 13.01.2026 - private getNextIndex(): number
     getBlockPartObject(blockId, text) {
         return {
             id: blockId,
@@ -6853,7 +6835,7 @@ class CuiCombinedTextBlockTool {
             return;
         }
         const addedBlocks = splicedParts.map((block) => {
-            const blockId = block.dataset['id'];
+            const blockId = block.dataset['localId'];
             return {
                 id: blockId,
                 type: COMBINED_TEXT_BLOCK_PART,
@@ -6865,7 +6847,7 @@ class CuiCombinedTextBlockTool {
             };
         });
         const previousElement = updatedElements.values().next().value;
-        const id = previousElement?.dataset['id'];
+        const id = previousElement?.dataset['localId'];
         const index = Number(previousElement?.dataset['index']) + 1;
         const blockIndex = this.data.textBlocks.findIndex((block) => block.id === id);
         this.data.textBlocks.splice(blockIndex, 0, ...addedBlocks);
@@ -6882,7 +6864,7 @@ class CuiCombinedTextBlockTool {
         }
         const updatedBlocks = [...updatedElements.values()].map((block) => {
             return {
-                id: block.dataset['id'],
+                id: block.dataset['localId'],
                 type: COMBINED_TEXT_BLOCK_PART,
                 data: {
                     text: block.innerHTML,
@@ -6901,7 +6883,7 @@ class CuiCombinedTextBlockTool {
             if (!(node instanceof HTMLElement)) {
                 return;
             }
-            const blockId = node.dataset['id'];
+            const blockId = node.dataset['localId'];
             if (!blockId) {
                 return;
             }
@@ -6942,6 +6924,7 @@ class CuiCombinedTextBlockTool {
         textElement.classList.add(COMBINED_TEXT_BLOCK_PART);
         textElement.innerHTML = text;
         textElement.dataset['id'] = id;
+        textElement.dataset['localId'] = id;
         return textElement;
     }
     convertDefaultDataToCustom(data) {
@@ -7168,6 +7151,7 @@ class CuiEditorComponent {
         this.isSkip = false;
         this.isRequested = false;
         this.isDestroyed = false;
+        // Нужен для соотношения локального ID и основного ID после создания элемента
         this.blockIdsMap = new Map();
         this.combinedBlocks = new Map();
         this.index = 0;
@@ -7464,10 +7448,17 @@ class CuiEditorComponent {
         if (!blockIds.length) {
             return;
         }
+        this.updateElementLocalIdWithMainId(blockIds, addedBlocks);
         addedBlocks.forEach((blockData, index) => {
             this.blockIdsMap.set(blockData.id, blockIds[index]);
         });
     }
+    updateElementLocalIdWithMainId(blockIds, blocks) {
+        blocks.forEach((block, index) => {
+            const element = document.querySelector(`[data-id="${block.id}"]`);
+            element.dataset['id'] = blockIds[index];
+        });
+    }
     setStartBlock() {
         if (this.blockIdsMap.size) {
             this.setFocus();
@@ -7632,11 +7623,11 @@ class CuiEditorModalComponent {
         this.modalClosed.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiEditorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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;flex-direction:row;gap:0;align-items:stretch;justify-content:space-between;padding:8px 16px;border-bottom:.5px solid var(--cui-base-200);background:var(--cui-base-0)}.info,.actions{display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:flex-start}.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.14", ngImport: i0, type: CuiEditorModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-editor-modal', imports: [CuiEditorComponent, CuiButtonModule, NgTemplateOutlet, CuiSvgModule], 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"] }]
+            args: [{ selector: 'cui-editor-modal', imports: [CuiEditorComponent, CuiButtonModule, NgTemplateOutlet, CuiSvgModule], 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;flex-direction:row;gap:0;align-items:stretch;justify-content:space-between;padding:8px 16px;border-bottom:.5px solid var(--cui-base-200);background:var(--cui-base-0)}.info,.actions{display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:flex-start}.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 {
@@ -7677,7 +7668,7 @@ class CuiEditorBlockComponent {
         }, { allowSignalWrites: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiEditorBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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;flex-direction:row;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.14", ngImport: i0, type: CuiEditorBlockComponent, decorators: [{
             type: Component,
@@ -7689,7 +7680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         CuiContentWrapperComponent,
                         CuiTooltip,
                         CuiHintModule
-                    ], 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"] }]
+                    ], 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;flex-direction:row;gap:8px;align-items:center;justify-content:space-between}.editor{padding-top:16px;padding-bottom:16px;display:block;overflow:auto}.editor_invalid{border:1px solid var(--cui-danger)}.title{font-weight:500;font-size:14px;line-height:20px}.title__required{color:var(--cui-danger)}\n"] }]
         }], ctorParameters: () => [] });
 const EDITOR_CUSTOM_ELEMENTS = [
@@ -7956,14 +7947,14 @@ class CuiCircleLoaderComponent {
         this.size = input('md');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiCircleLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: CuiCircleLoaderComponent, isStandalone: true, selector: "cui-circle-loader", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "size()", "class._center": "position() === \"center\"" } }, ngImport: i0, template: "<cui-svg\n    icon=\"cuiIconLoading\"\n    color=\"var(--cui-base-900)\"\n    class=\"loading\"\n/>\n", styles: [".loading{animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host.xs ::ng-deep svg{width:20px}:host.sm ::ng-deep svg{width:16px}:host.md ::ng-deep svg{width:32px}:host.lg ::ng-deep svg{width:64px}:host._center{display:flex;align-items:center;justify-content:center}\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.1.0", version: "18.2.14", type: CuiCircleLoaderComponent, isStandalone: true, selector: "cui-circle-loader", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "size()", "class._center": "position() === \"center\"" } }, ngImport: i0, template: "<cui-svg\n    icon=\"cuiIconLoading\"\n    color=\"var(--cui-base-900)\"\n    class=\"loading\"\n/>\n", styles: [".loading{animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host.xs ::ng-deep svg{width:20px}:host.sm ::ng-deep svg{width:16px}:host.md ::ng-deep svg{width:32px}:host.lg ::ng-deep svg{width:64px}:host._center{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:center}\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.14", ngImport: i0, type: CuiCircleLoaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cui-circle-loader', standalone: true, imports: [CuiSvgModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'size()',
                         '[class._center]': 'position() === "center"'
-                    }, template: "<cui-svg\n    icon=\"cuiIconLoading\"\n    color=\"var(--cui-base-900)\"\n    class=\"loading\"\n/>\n", styles: [".loading{animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host.xs ::ng-deep svg{width:20px}:host.sm ::ng-deep svg{width:16px}:host.md ::ng-deep svg{width:32px}:host.lg ::ng-deep svg{width:64px}:host._center{display:flex;align-items:center;justify-content:center}\n"] }]
+                    }, template: "<cui-svg\n    icon=\"cuiIconLoading\"\n    color=\"var(--cui-base-900)\"\n    class=\"loading\"\n/>\n", styles: [".loading{animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host.xs ::ng-deep svg{width:20px}:host.sm ::ng-deep svg{width:16px}:host.md ::ng-deep svg{width:32px}:host.lg ::ng-deep svg{width:64px}:host._center{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:center}\n"] }]
         }] });
 class CuiLinearLoaderComponent {
@@ -7998,11 +7989,11 @@ class CuiDeleteModalComponent {
         this.context.completeWith({ canceled: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiDeleteModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiDeleteModalComponent, isStandalone: true, selector: "cui-delete-modal", ngImport: i0, template: "<div\n    *transloco=\"let t\"\n    class=\"wrapper\"\n>\n    <div class=\"content\">\n        <div class=\"header\">\n            <h3 class=\"title\">{{ t(title) }}</h3>\n            <button\n                type=\"button\"\n                cuiButton\n                icon=\"cuiIconX\"\n                appearance=\"ghost\"\n                [disabled]=\"isLoading()\"\n                class=\"close-btn\"\n                (click)=\"onCancel()\"\n            ></button>\n        </div>\n        <div class=\"info\">\n            @for (text of content; track text) {\n                <p [innerHTML]=\"t(text)\"></p>\n            }\n        </div>\n    </div>\n\n    <div class=\"footer\">\n        <button\n            type=\"button\"\n            cuiButton\n            (click)=\"onCancel()\"\n            [disabled]=\"isLoading()\"\n            appearance=\"secondary\"\n        >\n            {{ t('CANCEL') }}\n        </button>\n        <button\n            type=\"button\"\n            cuiButton\n            [isLoaderShown]=\"isLoading()\"\n            [disabled]=\"isDisabled\"\n            [cuiTooltip]=\"isDisabled && t('IN_DEVELOPMENT')\"\n            appearance=\"destructive\"\n            (click)=\"onDelete()\"\n        >\n            {{ t('YES_DELETE') }}\n        </button>\n    </div>\n</div>\n", styles: [".wrapper{display:flex;flex-direction:column;gap:24px;padding:23px;border-radius:12px;width:400px}.header{display:flex;gap:8px;justify-content:space-between}.content{display:flex;flex-direction:column;gap:12px}.title{font-weight:500;font-size:18px;line-height:28px}.info{display:flex;flex-direction:column;gap:16px;font-weight:400;font-size:14px;line-height:20px}.footer{display:flex;gap:12px;justify-content:flex-end}.close-btn{margin:-8px}\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: TranslocoModule }, { kind: "directive", type: i4.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: CuiTooltipDirective, selector: "[cuiTooltip]:not(ng-container):not(ng-template)", inputs: ["cuiTooltipContext", "cuiTooltipAppearance", "cuiTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiDeleteModalComponent, isStandalone: true, selector: "cui-delete-modal", ngImport: i0, template: "<div\n    *transloco=\"let t\"\n    class=\"wrapper\"\n>\n    <div class=\"content\">\n        <div class=\"header\">\n            <h3 class=\"title\">{{ t(title) }}</h3>\n            <button\n                type=\"button\"\n                cuiButton\n                icon=\"cuiIconX\"\n                appearance=\"ghost\"\n                [disabled]=\"isLoading()\"\n                class=\"close-btn\"\n                (click)=\"onCancel()\"\n            ></button>\n        </div>\n        <div class=\"info\">\n            @for (text of content; track text) {\n                <p [innerHTML]=\"t(text)\"></p>\n            }\n        </div>\n    </div>\n\n    <div class=\"footer\">\n        <button\n            type=\"button\"\n            cuiButton\n            (click)=\"onCancel()\"\n            [disabled]=\"isLoading()\"\n            appearance=\"secondary\"\n        >\n            {{ t('CANCEL') }}\n        </button>\n        <button\n            type=\"button\"\n            cuiButton\n            [isLoaderShown]=\"isLoading()\"\n            [disabled]=\"isDisabled\"\n            [cuiTooltip]=\"isDisabled && t('IN_DEVELOPMENT')\"\n            appearance=\"destructive\"\n            (click)=\"onDelete()\"\n        >\n            {{ t('YES_DELETE') }}\n        </button>\n    </div>\n</div>\n", styles: [".wrapper{display:flex;flex-direction:column;gap:24px;padding:23px;border-radius:12px;width:400px}.header{display:flex;flex-direction:row;gap:8px;align-items:stretch;justify-content:space-between}.content{display:flex;flex-direction:column;gap:12px}.title{font-weight:500;font-size:18px;line-height:28px}.info{display:flex;flex-direction:column;gap:16px;font-weight:400;font-size:14px;line-height:20px}.footer{display:flex;flex-direction:row;gap:12px;align-items:stretch;justify-content:flex-end}.close-btn{margin:-8px}\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: TranslocoModule }, { kind: "directive", type: i4.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: CuiTooltipDirective, selector: "[cuiTooltip]:not(ng-container):not(ng-template)", inputs: ["cuiTooltipContext", "cuiTooltipAppearance", "cuiTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiDeleteModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-delete-modal', imports: [CuiButtonModule, TranslocoModule, CuiTooltip], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    *transloco=\"let t\"\n    class=\"wrapper\"\n>\n    <div class=\"content\">\n        <div class=\"header\">\n            <h3 class=\"title\">{{ t(title) }}</h3>\n            <button\n                type=\"button\"\n                cuiButton\n                icon=\"cuiIconX\"\n                appearance=\"ghost\"\n                [disabled]=\"isLoading()\"\n                class=\"close-btn\"\n                (click)=\"onCancel()\"\n            ></button>\n        </div>\n        <div class=\"info\">\n            @for (text of content; track text) {\n                <p [innerHTML]=\"t(text)\"></p>\n            }\n        </div>\n    </div>\n\n    <div class=\"footer\">\n        <button\n            type=\"button\"\n            cuiButton\n            (click)=\"onCancel()\"\n            [disabled]=\"isLoading()\"\n            appearance=\"secondary\"\n        >\n            {{ t('CANCEL') }}\n        </button>\n        <button\n            type=\"button\"\n            cuiButton\n            [isLoaderShown]=\"isLoading()\"\n            [disabled]=\"isDisabled\"\n            [cuiTooltip]=\"isDisabled && t('IN_DEVELOPMENT')\"\n            appearance=\"destructive\"\n            (click)=\"onDelete()\"\n        >\n            {{ t('YES_DELETE') }}\n        </button>\n    </div>\n</div>\n", styles: [".wrapper{display:flex;flex-direction:column;gap:24px;padding:23px;border-radius:12px;width:400px}.header{display:flex;gap:8px;justify-content:space-between}.content{display:flex;flex-direction:column;gap:12px}.title{font-weight:500;font-size:18px;line-height:28px}.info{display:flex;flex-direction:column;gap:16px;font-weight:400;font-size:14px;line-height:20px}.footer{display:flex;gap:12px;justify-content:flex-end}.close-btn{margin:-8px}\n"] }]
+            args: [{ selector: 'cui-delete-modal', imports: [CuiButtonModule, TranslocoModule, CuiTooltip], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    *transloco=\"let t\"\n    class=\"wrapper\"\n>\n    <div class=\"content\">\n        <div class=\"header\">\n            <h3 class=\"title\">{{ t(title) }}</h3>\n            <button\n                type=\"button\"\n                cuiButton\n                icon=\"cuiIconX\"\n                appearance=\"ghost\"\n                [disabled]=\"isLoading()\"\n                class=\"close-btn\"\n                (click)=\"onCancel()\"\n            ></button>\n        </div>\n        <div class=\"info\">\n            @for (text of content; track text) {\n                <p [innerHTML]=\"t(text)\"></p>\n            }\n        </div>\n    </div>\n\n    <div class=\"footer\">\n        <button\n            type=\"button\"\n            cuiButton\n            (click)=\"onCancel()\"\n            [disabled]=\"isLoading()\"\n            appearance=\"secondary\"\n        >\n            {{ t('CANCEL') }}\n        </button>\n        <button\n            type=\"button\"\n            cuiButton\n            [isLoaderShown]=\"isLoading()\"\n            [disabled]=\"isDisabled\"\n            [cuiTooltip]=\"isDisabled && t('IN_DEVELOPMENT')\"\n            appearance=\"destructive\"\n            (click)=\"onDelete()\"\n        >\n            {{ t('YES_DELETE') }}\n        </button>\n    </div>\n</div>\n", styles: [".wrapper{display:flex;flex-direction:column;gap:24px;padding:23px;border-radius:12px;width:400px}.header{display:flex;flex-direction:row;gap:8px;align-items:stretch;justify-content:space-between}.content{display:flex;flex-direction:column;gap:12px}.title{font-weight:500;font-size:18px;line-height:28px}.info{display:flex;flex-direction:column;gap:16px;font-weight:400;font-size:14px;line-height:20px}.footer{display:flex;flex-direction:row;gap:12px;align-items:stretch;justify-content:flex-end}.close-btn{margin:-8px}\n"] }]
         }] });
 class CuiSelectedCategoryService {
@@ -8110,7 +8101,7 @@ class CuiCategoryFormComponent {
         Promise.resolve().then(() => this.input().nativeElement.focus());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiCategoryFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", 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;flex-direction:row;gap:4px}.input{display:flex;flex-direction:column;gap:4px;align-items:flex-start;justify-content: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.14", ngImport: i0, type: CuiCategoryFormComponent, decorators: [{
             type: Component,
@@ -8124,7 +8115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         TranslocoDirective
                     ], standalone: true, host: {
                         '(click)': 'onHostClick($event)'
-                    }, 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"] }]
+                    }, 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;flex-direction:row;gap:4px}.input{display:flex;flex-direction:column;gap:4px;align-items:flex-start;justify-content:flex-start}.button{width:28px}.button:disabled{opacity:.5}\n"] }]
         }], ctorParameters: () => [] });
 class CuiCreateCategoryItemComponent {
@@ -8246,7 +8237,7 @@ class CuiCategoryItemComponent {
         }, { allowSignalWrites: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiCategoryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiCategoryItemComponent, isStandalone: true, selector: "cui-category-item", inputs: { stageStorage: { classPropertyName: "stageStorage", publicName: "stageStorage", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, 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            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\n            [stageStorages]=\"stageStorageChildren()\"\n            [context]=\"context()\"\n        />\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{display:flex;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", "context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiCategoryItemComponent, isStandalone: true, selector: "cui-category-item", inputs: { stageStorage: { classPropertyName: "stageStorage", publicName: "stageStorage", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, 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            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\n            [stageStorages]=\"stageStorageChildren()\"\n            [context]=\"context()\"\n        />\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;flex-direction:row;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{display:flex;flex-direction:row;gap:0;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", "context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiCategoryItemComponent, decorators: [{
             type: Component,
@@ -8258,7 +8249,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         CuiCategoryFormComponent,
                         CuiCreateCategoryItemComponent,
                         forwardRef(() => CuiCategoriesListComponent)
-                    ], 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            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\n            [stageStorages]=\"stageStorageChildren()\"\n            [context]=\"context()\"\n        />\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{display:flex;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            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\n            [stageStorages]=\"stageStorageChildren()\"\n            [context]=\"context()\"\n        />\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;flex-direction:row;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{display:flex;flex-direction:row;gap:0;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 {
@@ -8814,7 +8805,7 @@ class CuiCheckListBlockListItemEvaluationCriteriaComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiCheckListBlockListItemEvaluationCriteriaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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;flex-direction:row;gap:8px;align-items:center;justify-content:flex-start}.index{font-weight:500;font-size:14px;line-height:20px;width:22px}.icon{cursor:grab}.icon:active{cursor:grabbing}.wrapper{display:flex;flex-direction:row;gap:0;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.14", ngImport: i0, type: CuiCheckListBlockListItemEvaluationCriteriaComponent, decorators: [{
             type: Component,
@@ -8830,7 +8821,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         CuiInputNumberModule,
                         CuiDragPointerDirective,
                         CuiGeneralControlErrorHintComponent
-                    ], 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"] }]
+                    ], 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;flex-direction:row;gap:8px;align-items:center;justify-content:flex-start}.index{font-weight:500;font-size:14px;line-height:20px;width:22px}.icon{cursor:grab}.icon:active{cursor:grabbing}.wrapper{display:flex;flex-direction:row;gap:0;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 {
@@ -9216,7 +9207,7 @@ class CuiChecklistBlockComponent {
             .subscribe((checkListItem) => this.checkListBlockService.addCheckListItem(checkListItem));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiChecklistBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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;flex-direction:row;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.14", ngImport: i0, type: CuiChecklistBlockComponent, decorators: [{
             type: Component,
@@ -9228,7 +9219,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         CuiElementDirective,
                         CuiLetDirective,
                         TranslocoDirective
-                    ], 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"] }]
+                    ], 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;flex-direction:row;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 {
@@ -9390,11 +9381,11 @@ class CuiUtilityThumbnailComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiUtilityThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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"] }, { 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: "17.0.0", version: "18.2.14", 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;flex-direction:row;gap:8px;align-items:center;justify-content:flex-start;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"] }, { 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.14", ngImport: i0, type: CuiUtilityThumbnailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-utility-thumbnail', imports: [TranslocoDirective, CuiButtonModule], 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"] }]
+            args: [{ selector: 'cui-utility-thumbnail', imports: [TranslocoDirective, CuiButtonModule], 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;flex-direction:row;gap:8px;align-items:center;justify-content:flex-start;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 {
@@ -9565,11 +9556,11 @@ class CuiUtilityModalCreateComponent {
         this.utilityModalService.deleteUtility(utility).subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiUtilityModalCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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-stated-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: CuiStatedLoaderComponent, selector: "cui-stated-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.14", 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-stated-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;flex-direction:row;gap:0;align-items:center;justify-content:space-between;padding:16px 24px}.header__content{display:flex;flex-direction:row;gap:8px}.actions{display:flex;flex-direction:row;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: CuiStatedLoaderComponent, selector: "cui-stated-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.14", ngImport: i0, type: CuiUtilityModalCreateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-utility-modal-create', imports: [CuiButtonModule, CuiStatedLoaderComponent, 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-stated-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"] }]
+            args: [{ selector: 'cui-utility-modal-create', imports: [CuiButtonModule, CuiStatedLoaderComponent, 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-stated-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;flex-direction:row;gap:0;align-items:center;justify-content:space-between;padding:16px 24px}.header__content{display:flex;flex-direction:row;gap:8px}.actions{display:flex;flex-direction:row;gap:16px}\n"] }]
         }] });
 class CuiCriterionModalCreateComponent {
@@ -9930,11 +9921,11 @@ class CuiReadonlyUtilityModalComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiReadonlyUtilityModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", 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;flex-direction:row;gap:8px;align-items:center;justify-content:flex-start;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;flex-direction:row;gap:4px;align-items:center;justify-content:flex-start;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.14", 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\">\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"] }]
+            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;flex-direction:row;gap:8px;align-items:center;justify-content:flex-start;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;flex-direction:row;gap:4px;align-items:center;justify-content:flex-start;font-weight:500;font-size:14px;line-height:20px}\n"] }]
         }] });
 class CuiCriterionReadonlyInfoComponent {
@@ -10273,11 +10264,11 @@ class CuiFramerPreviewComponent {
         this.thumbnailUrl.set({ src: resource.fileId && url, name: resource.name || resource.type });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiFramerPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiFramerPreviewComponent, isStandalone: true, selector: "cui-framer-preview", inputs: { framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, editorResourceUrl: { classPropertyName: "editorResourceUrl", publicName: "editorResourceUrl", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    @if (jText()) {\n        @if (!isDescriptionEmpty()) {\n            @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\n            <div class=\"content\">\n                @if (title(); as title) {\n                    <div class=\"title\">{{ title }}</div>\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            </div>\n        } @else {\n            <cui-empty-state [subtitle]=\"t('NO_DESCRIPTION_WAS_PROVIDED')\" />\n        }\n    }\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:auto}.thumbnail{width:100%;max-height:271px;object-fit:contain}.content{display:flex;flex-direction:column;gap:14px;padding:16px 12px}.title{font-weight:500;font-size:18px;line-height:28px}.editor{display:block;height:100%;overflow:auto}\n"], dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiFramerPreviewComponent, isStandalone: true, selector: "cui-framer-preview", inputs: { framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, editorResourceUrl: { classPropertyName: "editorResourceUrl", publicName: "editorResourceUrl", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    @if (jText()) {\n        @if (!isDescriptionEmpty()) {\n            @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\n            <div class=\"content\">\n                @if (title(); as title) {\n                    <div class=\"title\">{{ title }}</div>\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            </div>\n        } @else {\n            <cui-empty-state [subtitle]=\"t('NO_DESCRIPTION_WAS_PROVIDED')\" />\n        }\n    }\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;gap:0;height:100%;overflow:auto}.thumbnail{width:100%;max-height:271px;object-fit:contain}.content{display:flex;flex-direction:column;gap:14px;padding:16px 12px}.title{font-weight:500;font-size:18px;line-height:28px}.editor{display:block;height:100%;overflow:auto}\n"], dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiFramerPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-framer-preview', imports: [TranslocoDirective, CuiEditorComponent, CuiEmptyStateComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    @if (jText()) {\n        @if (!isDescriptionEmpty()) {\n            @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\n            <div class=\"content\">\n                @if (title(); as title) {\n                    <div class=\"title\">{{ title }}</div>\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            </div>\n        } @else {\n            <cui-empty-state [subtitle]=\"t('NO_DESCRIPTION_WAS_PROVIDED')\" />\n        }\n    }\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:auto}.thumbnail{width:100%;max-height:271px;object-fit:contain}.content{display:flex;flex-direction:column;gap:14px;padding:16px 12px}.title{font-weight:500;font-size:18px;line-height:28px}.editor{display:block;height:100%;overflow:auto}\n"] }]
+            args: [{ selector: 'cui-framer-preview', imports: [TranslocoDirective, CuiEditorComponent, CuiEmptyStateComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    @if (jText()) {\n        @if (!isDescriptionEmpty()) {\n            @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\n            <div class=\"content\">\n                @if (title(); as title) {\n                    <div class=\"title\">{{ title }}</div>\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            </div>\n        } @else {\n            <cui-empty-state [subtitle]=\"t('NO_DESCRIPTION_WAS_PROVIDED')\" />\n        }\n    }\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;gap:0;height:100%;overflow:auto}.thumbnail{width:100%;max-height:271px;object-fit:contain}.content{display:flex;flex-direction:column;gap:14px;padding:16px 12px}.title{font-weight:500;font-size:18px;line-height:28px}.editor{display:block;height:100%;overflow:auto}\n"] }]
         }], ctorParameters: () => [] });
 class CuiSelectModalFolderComponent {
@@ -10557,13 +10548,13 @@ class CuiActivityItemComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiActivityItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiActivityItemComponent, isStandalone: true, selector: "cui-activity-item", inputs: { activity: { classPropertyName: "activity", publicName: "activity", isSignal: true, isRequired: true, transformFunction: null }, companyId: { classPropertyName: "companyId", publicName: "companyId", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.selected": "isSelected()" } }, ngImport: i0, template: "<div\n    class=\"wrapper\"\n    (click)=\"onGoToActivity()\"\n    [cuiTooltip]=\"activity().description\"\n>\n    <button\n        type=\"button\"\n        class=\"activity-button\"\n    >\n        <cui-letter-box\n            [letter]=\"activity().description[0]\"\n            [shape]=\"'rounded'\"\n            [backgroundColor]=\"letterBackgroundColor()\"\n            size=\"md\"\n        />\n        <div class=\"text\">\n            <span class=\"title\">{{ activity().description }}</span>\n            <span class=\"sub-title\">{{ typeCompany() }}</span>\n        </div>\n    </button>\n\n    @if (isSelected()) {\n        <div class=\"icon-wrapper\">\n            <cui-svg\n                [icon]=\"'cuiIconCheck'\"\n                color=\"var(--cui-info)\"\n            />\n        </div>\n    }\n</div>\n", styles: [":host(.selected){background:var(--cui-badge-blue-bg);border-radius:8px}.wrapper{display:flex;justify-content:space-between}.activity-button{display:flex;gap:8px;align-items:center;padding-left:4px;height:36px;color:var(--cui-base-900)}.icon-wrapper{display:flex;align-items:center;justify-content:center;padding:8px}.text,.title{display:flex;flex-direction:column;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-items:flex-start}.sub-title{font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-400)}\n"], dependencies: [{ kind: "component", type: CuiLetterBoxComponent, selector: "cui-letter-box", inputs: ["letter", "backgroundColor", "size", "shape"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "directive", type: CuiTooltipDirective, selector: "[cuiTooltip]:not(ng-container):not(ng-template)", inputs: ["cuiTooltipContext", "cuiTooltipAppearance", "cuiTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiActivityItemComponent, isStandalone: true, selector: "cui-activity-item", inputs: { activity: { classPropertyName: "activity", publicName: "activity", isSignal: true, isRequired: true, transformFunction: null }, companyId: { classPropertyName: "companyId", publicName: "companyId", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.selected": "isSelected()" } }, ngImport: i0, template: "<div\n    class=\"wrapper\"\n    (click)=\"onGoToActivity()\"\n    [cuiTooltip]=\"activity().description\"\n>\n    <button\n        type=\"button\"\n        class=\"activity-button\"\n    >\n        <cui-letter-box\n            [letter]=\"activity().description[0]\"\n            [shape]=\"'rounded'\"\n            [backgroundColor]=\"letterBackgroundColor()\"\n            size=\"md\"\n        />\n        <div class=\"text\">\n            <span class=\"title\">{{ activity().description }}</span>\n            <span class=\"sub-title\">{{ typeCompany() }}</span>\n        </div>\n    </button>\n\n    @if (isSelected()) {\n        <div class=\"icon-wrapper\">\n            <cui-svg\n                [icon]=\"'cuiIconCheck'\"\n                color=\"var(--cui-info)\"\n            />\n        </div>\n    }\n</div>\n", styles: [":host(.selected){background:var(--cui-badge-blue-bg);border-radius:8px}.wrapper{display:flex;flex-direction:row;gap:0;justify-content:space-between}.activity-button{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:flex-start;padding-left:4px;height:36px;color:var(--cui-base-900)}.icon-wrapper{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:center;padding:8px}.text,.title{display:flex;flex-direction:column;gap:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-items:flex-start}.sub-title{font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-400)}\n"], dependencies: [{ kind: "component", type: CuiLetterBoxComponent, selector: "cui-letter-box", inputs: ["letter", "backgroundColor", "size", "shape"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "directive", type: CuiTooltipDirective, selector: "[cuiTooltip]:not(ng-container):not(ng-template)", inputs: ["cuiTooltipContext", "cuiTooltipAppearance", "cuiTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiActivityItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cui-activity-item', standalone: true, imports: [CuiLetterBoxComponent, CuiSvgModule, CuiTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.selected]': 'isSelected()'
-                    }, template: "<div\n    class=\"wrapper\"\n    (click)=\"onGoToActivity()\"\n    [cuiTooltip]=\"activity().description\"\n>\n    <button\n        type=\"button\"\n        class=\"activity-button\"\n    >\n        <cui-letter-box\n            [letter]=\"activity().description[0]\"\n            [shape]=\"'rounded'\"\n            [backgroundColor]=\"letterBackgroundColor()\"\n            size=\"md\"\n        />\n        <div class=\"text\">\n            <span class=\"title\">{{ activity().description }}</span>\n            <span class=\"sub-title\">{{ typeCompany() }}</span>\n        </div>\n    </button>\n\n    @if (isSelected()) {\n        <div class=\"icon-wrapper\">\n            <cui-svg\n                [icon]=\"'cuiIconCheck'\"\n                color=\"var(--cui-info)\"\n            />\n        </div>\n    }\n</div>\n", styles: [":host(.selected){background:var(--cui-badge-blue-bg);border-radius:8px}.wrapper{display:flex;justify-content:space-between}.activity-button{display:flex;gap:8px;align-items:center;padding-left:4px;height:36px;color:var(--cui-base-900)}.icon-wrapper{display:flex;align-items:center;justify-content:center;padding:8px}.text,.title{display:flex;flex-direction:column;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-items:flex-start}.sub-title{font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-400)}\n"] }]
+                    }, template: "<div\n    class=\"wrapper\"\n    (click)=\"onGoToActivity()\"\n    [cuiTooltip]=\"activity().description\"\n>\n    <button\n        type=\"button\"\n        class=\"activity-button\"\n    >\n        <cui-letter-box\n            [letter]=\"activity().description[0]\"\n            [shape]=\"'rounded'\"\n            [backgroundColor]=\"letterBackgroundColor()\"\n            size=\"md\"\n        />\n        <div class=\"text\">\n            <span class=\"title\">{{ activity().description }}</span>\n            <span class=\"sub-title\">{{ typeCompany() }}</span>\n        </div>\n    </button>\n\n    @if (isSelected()) {\n        <div class=\"icon-wrapper\">\n            <cui-svg\n                [icon]=\"'cuiIconCheck'\"\n                color=\"var(--cui-info)\"\n            />\n        </div>\n    }\n</div>\n", styles: [":host(.selected){background:var(--cui-badge-blue-bg);border-radius:8px}.wrapper{display:flex;flex-direction:row;gap:0;justify-content:space-between}.activity-button{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:flex-start;padding-left:4px;height:36px;color:var(--cui-base-900)}.icon-wrapper{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:center;padding:8px}.text,.title{display:flex;flex-direction:column;gap:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-items:flex-start}.sub-title{font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-400)}\n"] }]
         }] });
 class CompanyItemComponent {
@@ -10614,13 +10605,13 @@ class CompanyItemComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CompanyItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CompanyItemComponent, isStandalone: true, selector: "cui-company-item", inputs: { company: { classPropertyName: "company", publicName: "company", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.selected": "isSelected()" } }, ngImport: i0, template: "<div\n    class=\"title-company\"\n    (click)=\"onGoToCompany()\"\n    [cuiTooltip]=\"company().name\"\n>\n    <button\n        type=\"button\"\n        class=\"company-button\"\n    >\n        <cui-letter-box\n            [letter]=\"company().name[0]\"\n            [backgroundColor]=\"'var(--cui-orange-500)'\"\n            size=\"md\"\n        />\n        <div class=\"text\">\n            <span class=\"title\">{{ company().name }}</span>\n            <span class=\"sub-title\">{{ 'COMPANY' | transloco }}</span>\n        </div>\n    </button>\n\n    @if (isSelected()) {\n        <div class=\"icon-wrapper\">\n            <cui-svg\n                [icon]=\"'cuiIconCheck'\"\n                color=\"var(--cui-info)\"\n            />\n        </div>\n    }\n</div>\n", styles: [":host(.selected){background:var(--cui-badge-blue-bg);border-radius:8px}.title-company{display:flex;justify-content:space-between}.title-company:hover{width:100%;border-radius:8px;background-color:var(--cui-badge-light-blue-bg)}.company-button{display:flex;gap:8px;align-items:center;padding-left:4px;height:36px;color:var(--cui-base-900)}.icon-wrapper{display:flex;align-items:center;justify-content:center;padding:8px}.title{display:flex;flex-direction:column;font-weight:500;font-size:14px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--cui-base-900);align-items:flex-start}.sub-title{font-weight:400;font-size:12px;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--cui-base-400)}.text{display:flex;flex-direction:column;align-items:flex-start}\n"], dependencies: [{ kind: "component", type: CuiLetterBoxComponent, selector: "cui-letter-box", inputs: ["letter", "backgroundColor", "size", "shape"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: CuiTooltipDirective, selector: "[cuiTooltip]:not(ng-container):not(ng-template)", inputs: ["cuiTooltipContext", "cuiTooltipAppearance", "cuiTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CompanyItemComponent, isStandalone: true, selector: "cui-company-item", inputs: { company: { classPropertyName: "company", publicName: "company", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.selected": "isSelected()" } }, ngImport: i0, template: "<div\n    class=\"title-company\"\n    (click)=\"onGoToCompany()\"\n    [cuiTooltip]=\"company().name\"\n>\n    <button\n        type=\"button\"\n        class=\"company-button\"\n    >\n        <cui-letter-box\n            [letter]=\"company().name[0]\"\n            [backgroundColor]=\"'var(--cui-orange-500)'\"\n            size=\"md\"\n        />\n        <div class=\"text\">\n            <span class=\"title\">{{ company().name }}</span>\n            <span class=\"sub-title\">{{ 'COMPANY' | transloco }}</span>\n        </div>\n    </button>\n\n    @if (isSelected()) {\n        <div class=\"icon-wrapper\">\n            <cui-svg\n                [icon]=\"'cuiIconCheck'\"\n                color=\"var(--cui-info)\"\n            />\n        </div>\n    }\n</div>\n", styles: [":host(.selected){background:var(--cui-badge-blue-bg);border-radius:8px}.title-company{display:flex;flex-direction:row;gap:0;justify-content:space-between}.title-company:hover{width:100%;border-radius:8px;background-color:var(--cui-badge-light-blue-bg)}.company-button{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:flex-start;padding-left:4px;height:36px;color:var(--cui-base-900)}.icon-wrapper{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:center;padding:8px}.title{display:flex;flex-direction:column;gap:0;font-weight:500;font-size:14px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--cui-base-900);align-items:flex-start}.sub-title{font-weight:400;font-size:12px;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--cui-base-400)}.text{display:flex;flex-direction:column;gap:0;align-items:flex-start}\n"], dependencies: [{ kind: "component", type: CuiLetterBoxComponent, selector: "cui-letter-box", inputs: ["letter", "backgroundColor", "size", "shape"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: CuiTooltipDirective, selector: "[cuiTooltip]:not(ng-container):not(ng-template)", inputs: ["cuiTooltipContext", "cuiTooltipAppearance", "cuiTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CompanyItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cui-company-item', standalone: true, imports: [CuiLetterBoxComponent, CuiSvgModule, TranslocoPipe, CuiTooltip], host: {
                         '[class.selected]': 'isSelected()'
-                    }, template: "<div\n    class=\"title-company\"\n    (click)=\"onGoToCompany()\"\n    [cuiTooltip]=\"company().name\"\n>\n    <button\n        type=\"button\"\n        class=\"company-button\"\n    >\n        <cui-letter-box\n            [letter]=\"company().name[0]\"\n            [backgroundColor]=\"'var(--cui-orange-500)'\"\n            size=\"md\"\n        />\n        <div class=\"text\">\n            <span class=\"title\">{{ company().name }}</span>\n            <span class=\"sub-title\">{{ 'COMPANY' | transloco }}</span>\n        </div>\n    </button>\n\n    @if (isSelected()) {\n        <div class=\"icon-wrapper\">\n            <cui-svg\n                [icon]=\"'cuiIconCheck'\"\n                color=\"var(--cui-info)\"\n            />\n        </div>\n    }\n</div>\n", styles: [":host(.selected){background:var(--cui-badge-blue-bg);border-radius:8px}.title-company{display:flex;justify-content:space-between}.title-company:hover{width:100%;border-radius:8px;background-color:var(--cui-badge-light-blue-bg)}.company-button{display:flex;gap:8px;align-items:center;padding-left:4px;height:36px;color:var(--cui-base-900)}.icon-wrapper{display:flex;align-items:center;justify-content:center;padding:8px}.title{display:flex;flex-direction:column;font-weight:500;font-size:14px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--cui-base-900);align-items:flex-start}.sub-title{font-weight:400;font-size:12px;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--cui-base-400)}.text{display:flex;flex-direction:column;align-items:flex-start}\n"] }]
+                    }, template: "<div\n    class=\"title-company\"\n    (click)=\"onGoToCompany()\"\n    [cuiTooltip]=\"company().name\"\n>\n    <button\n        type=\"button\"\n        class=\"company-button\"\n    >\n        <cui-letter-box\n            [letter]=\"company().name[0]\"\n            [backgroundColor]=\"'var(--cui-orange-500)'\"\n            size=\"md\"\n        />\n        <div class=\"text\">\n            <span class=\"title\">{{ company().name }}</span>\n            <span class=\"sub-title\">{{ 'COMPANY' | transloco }}</span>\n        </div>\n    </button>\n\n    @if (isSelected()) {\n        <div class=\"icon-wrapper\">\n            <cui-svg\n                [icon]=\"'cuiIconCheck'\"\n                color=\"var(--cui-info)\"\n            />\n        </div>\n    }\n</div>\n", styles: [":host(.selected){background:var(--cui-badge-blue-bg);border-radius:8px}.title-company{display:flex;flex-direction:row;gap:0;justify-content:space-between}.title-company:hover{width:100%;border-radius:8px;background-color:var(--cui-badge-light-blue-bg)}.company-button{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:flex-start;padding-left:4px;height:36px;color:var(--cui-base-900)}.icon-wrapper{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:center;padding:8px}.title{display:flex;flex-direction:column;gap:0;font-weight:500;font-size:14px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--cui-base-900);align-items:flex-start}.sub-title{font-weight:400;font-size:12px;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--cui-base-400)}.text{display:flex;flex-direction:column;gap:0;align-items:flex-start}\n"] }]
         }] });
 class ButtonChangeThemeComponent {
@@ -10632,7 +10623,7 @@ class ButtonChangeThemeComponent {
         this.cuiThemeService.next(theme);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonChangeThemeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ButtonChangeThemeComponent, isStandalone: true, selector: "cui-button-change-theme", ngImport: i0, template: "@let currentTheme = theme$ | async;\n\n<ng-container *transloco=\"let t\">\n<button type=\"button\"\n        class=\"custom-button\">\n    <div class=\"content-button\">\n        <cui-svg icon=\"cuiIconPaletteSm\" />\n        <div class=\"text-and-sub-button\">\n            {{ t('SWITCH_THEME') }}\n            <div class=\"group-sub-button\">\n                <div\n                    [class.button-select]=\"currentTheme === 'dark'\"\n                    class=\"container-sub-button\"\n                >\n                    <cui-svg\n                        icon=\"cuiIconMoon\"\n                        color=\"var(--cui-base-500)\"\n                        (click)=\"onChangeTheme('dark')\"\n                    />\n                </div>\n                <div\n                    [class.button-select]=\"currentTheme === 'light'\"\n                    class=\"container-sub-button\"\n                >\n                    <cui-svg\n                        icon=\"cuiIconSun\"\n                        color=\"var(--cui-base-500)\"\n                        (click)=\"onChangeTheme('light')\"\n                    />\n                </div>\n            </div>\n        </div>\n    </div>\n</button>\n</ng-container>\n", styles: [".content-button{display:flex;gap:8px;align-items:center;padding-right:8px;padding-left:8px;height:36px;color:var(--cui-base-900)}.text-and-sub-button{display:flex;align-items:center;justify-content:space-between;width:100%}.group-sub-button{display:flex;gap:4px}.container-sub-button{display:flex;align-items:center;justify-content:center;text-transform:capitalize;border:solid 1px var(--cui-base-200);border-radius:4px;width:28px;height:28px}.button-select{border:solid 1px var(--cui-badge-blue-border);background-color:var(--cui-badge-blue-bg)}.custom-button{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ButtonChangeThemeComponent, isStandalone: true, selector: "cui-button-change-theme", ngImport: i0, template: "@let currentTheme = theme$ | async;\n\n<ng-container *transloco=\"let t\">\n<button type=\"button\"\n        class=\"custom-button\">\n    <div class=\"content-button\">\n        <cui-svg icon=\"cuiIconPaletteSm\" />\n        <div class=\"text-and-sub-button\">\n            {{ t('SWITCH_THEME') }}\n            <div class=\"group-sub-button\">\n                <div\n                    [class.button-select]=\"currentTheme === 'dark'\"\n                    class=\"container-sub-button\"\n                >\n                    <cui-svg\n                        icon=\"cuiIconMoon\"\n                        color=\"var(--cui-base-500)\"\n                        (click)=\"onChangeTheme('dark')\"\n                    />\n                </div>\n                <div\n                    [class.button-select]=\"currentTheme === 'light'\"\n                    class=\"container-sub-button\"\n                >\n                    <cui-svg\n                        icon=\"cuiIconSun\"\n                        color=\"var(--cui-base-500)\"\n                        (click)=\"onChangeTheme('light')\"\n                    />\n                </div>\n            </div>\n        </div>\n    </div>\n</button>\n</ng-container>\n", styles: [".content-button{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:flex-start;padding-right:8px;padding-left:8px;height:36px;color:var(--cui-base-900)}.text-and-sub-button{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:space-between;width:100%}.group-sub-button{display:flex;flex-direction:row;gap:4px}.container-sub-button{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:center;text-transform:capitalize;border:solid 1px var(--cui-base-200);border-radius:4px;width:28px;height:28px}.button-select{border:solid 1px var(--cui-badge-blue-border);background-color:var(--cui-badge-blue-bg)}.custom-button{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonChangeThemeComponent, decorators: [{
             type: Component,
@@ -10640,7 +10631,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         CuiSvgModule,
                         AsyncPipe,
                         TranslocoDirective
-                    ], template: "@let currentTheme = theme$ | async;\n\n<ng-container *transloco=\"let t\">\n<button type=\"button\"\n        class=\"custom-button\">\n    <div class=\"content-button\">\n        <cui-svg icon=\"cuiIconPaletteSm\" />\n        <div class=\"text-and-sub-button\">\n            {{ t('SWITCH_THEME') }}\n            <div class=\"group-sub-button\">\n                <div\n                    [class.button-select]=\"currentTheme === 'dark'\"\n                    class=\"container-sub-button\"\n                >\n                    <cui-svg\n                        icon=\"cuiIconMoon\"\n                        color=\"var(--cui-base-500)\"\n                        (click)=\"onChangeTheme('dark')\"\n                    />\n                </div>\n                <div\n                    [class.button-select]=\"currentTheme === 'light'\"\n                    class=\"container-sub-button\"\n                >\n                    <cui-svg\n                        icon=\"cuiIconSun\"\n                        color=\"var(--cui-base-500)\"\n                        (click)=\"onChangeTheme('light')\"\n                    />\n                </div>\n            </div>\n        </div>\n    </div>\n</button>\n</ng-container>\n", styles: [".content-button{display:flex;gap:8px;align-items:center;padding-right:8px;padding-left:8px;height:36px;color:var(--cui-base-900)}.text-and-sub-button{display:flex;align-items:center;justify-content:space-between;width:100%}.group-sub-button{display:flex;gap:4px}.container-sub-button{display:flex;align-items:center;justify-content:center;text-transform:capitalize;border:solid 1px var(--cui-base-200);border-radius:4px;width:28px;height:28px}.button-select{border:solid 1px var(--cui-badge-blue-border);background-color:var(--cui-badge-blue-bg)}.custom-button{width:100%}\n"] }]
+                    ], template: "@let currentTheme = theme$ | async;\n\n<ng-container *transloco=\"let t\">\n<button type=\"button\"\n        class=\"custom-button\">\n    <div class=\"content-button\">\n        <cui-svg icon=\"cuiIconPaletteSm\" />\n        <div class=\"text-and-sub-button\">\n            {{ t('SWITCH_THEME') }}\n            <div class=\"group-sub-button\">\n                <div\n                    [class.button-select]=\"currentTheme === 'dark'\"\n                    class=\"container-sub-button\"\n                >\n                    <cui-svg\n                        icon=\"cuiIconMoon\"\n                        color=\"var(--cui-base-500)\"\n                        (click)=\"onChangeTheme('dark')\"\n                    />\n                </div>\n                <div\n                    [class.button-select]=\"currentTheme === 'light'\"\n                    class=\"container-sub-button\"\n                >\n                    <cui-svg\n                        icon=\"cuiIconSun\"\n                        color=\"var(--cui-base-500)\"\n                        (click)=\"onChangeTheme('light')\"\n                    />\n                </div>\n            </div>\n        </div>\n    </div>\n</button>\n</ng-container>\n", styles: [".content-button{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:flex-start;padding-right:8px;padding-left:8px;height:36px;color:var(--cui-base-900)}.text-and-sub-button{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:space-between;width:100%}.group-sub-button{display:flex;flex-direction:row;gap:4px}.container-sub-button{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:center;text-transform:capitalize;border:solid 1px var(--cui-base-200);border-radius:4px;width:28px;height:28px}.button-select{border:solid 1px var(--cui-badge-blue-border);background-color:var(--cui-badge-blue-bg)}.custom-button{width:100%}\n"] }]
         }] });
 class CuiUserActionContextMenuComponent {
@@ -10690,7 +10681,7 @@ class CuiUserActionContextMenuComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiUserActionContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiUserActionContextMenuComponent, isStandalone: true, selector: "cui-user-action-context-menu", outputs: { currentActivityChange: "currentActivityChange" }, ngImport: i0, template: "@let currentLang = lang$ | async;\n\n<ng-container *transloco=\"let t\">\n    <button\n        type=\"button\"\n        [cuiDropdown]=\"content\"\n        class=\"select\"\n        (isOpened)=\"onToggleOpenState($event)\"\n    >\n        <ng-content />\n    </button>\n\n    <ng-template #content>\n        @if (isOpen()) {\n            <cui-dropdown-wrapper\n                width=\"300px\"\n                maxHeight=\"500px\"\n            >\n                <div\n                    #dropdownContainer\n                    class=\"wrapper\"\n                >\n                    <div class=\"block-name\">\n                        <div>\n                            <cui-letter-box\n                                [letter]=\"fullName[0]\"\n                                [shape]=\"'rounded'\"\n                                size=\"md\"\n                            />\n                        </div>\n                        <div>\n                            <ul class=\"title-text\">\n                                {{\n                                    fullName\n                                }}\n                            </ul>\n                            <ul class=\"subtitle-text\">\n                                {{\n                                    email\n                                }}\n                            </ul>\n                        </div>\n                    </div>\n                    <div\n                        class=\"wrapper-platform block-platform\"\n                        (click)=\"onGoToPlatform()\"\n                    >\n                        <cui-svg\n                            icon=\"cuiIconLogo\"\n                            color=\"var(--cui-base-900)\"\n                        />\n                        <div>{{ t('CUBY_PLATFORM') }}</div>\n                    </div>\n                    <div class=\"list-company\">\n                        @for (company of companies(); track company.id) {\n                            <cui-company-item [company]=\"company\" />\n\n                            <div class=\"list-activity\">\n                                @for (activity of company.contexts; track activity) {\n                                    <cui-activity-item\n                                        class=\"activity-item\"\n                                        [activity]=\"activity\"\n                                        [companyId]=\"company.companyId\"\n                                    />\n                                } @empty {\n                                    <div class=\"sub-title-text\">{{ t('YOU_DONT_HAVE_ACTIVITY_IN_THIS_COMPANY') }}</div>\n                                }\n                            </div>\n                        } @empty {\n                            <div class=\"sub-title-text\">{{ t('YOU_DONT_HAVE_COMPANY') }}</div>\n                        }\n                    </div>\n                    <div class=\"block-button\">\n                       <cui-button-change-theme />\n                        <button type=\"button\">\n                            <div class=\"content-button\">\n                                <cui-svg icon=\"cuiIconGlobeSm\" />\n                                <div class=\"text-and-sub-button\">\n                                    {{ t('LANGUAGE') }}\n                                    <div class=\"group-sub-button\">\n                                        @for (lang of langs; track lang) {\n                                            <div\n                                                [class.container-sub-button__select]=\"currentLang === lang\"\n                                                class=\"container-sub-button\"\n                                                (click)=\"onChangeLang(lang)\"\n                                            >\n                                                {{ lang }}\n                                            </div>\n                                        }\n                                    </div>\n                                </div>\n                            </div>\n                        </button>\n                        <button\n                            type=\"button\"\n                            (click)=\"onLogout()\"\n                        >\n                            <div class=\"content-button\">\n                                <cui-svg icon=\"cuiIconLogOutSm\" />\n                                <div class=\"text-and-sub-button\">{{ t('LOG_OUT') }}</div>\n                            </div>\n                        </button>\n                    </div>\n                </div>\n            </cui-dropdown-wrapper>\n        }\n    </ng-template>\n</ng-container>\n", styles: [".wrapper{padding:8px}.wrapper-platform{padding:8px 16px;margin-top:4px}.block-name{display:flex;gap:12px;align-items:center;padding-bottom:8px;border-bottom:solid 1px var(--cui-base-200);color:var(--cui-base-900)}.title-text{font-weight:500;font-size:14px;line-height:20px;color:var(--cui-base-900)}.subtitle-text{font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-900)}.list-company{display:flex;flex-direction:column;padding:8px;max-height:250px;overflow-y:auto}.list-activity{display:flex;flex-direction:column;gap:4px;padding-top:4px;padding-bottom:4px;border-bottom:solid 1px var(--cui-base-200);margin-bottom:4px}.block-button{display:flex;flex-direction:column;gap:8px;padding-top:8px;width:100%}.content-button{display:flex;gap:8px;align-items:center;padding-right:8px;padding-left:8px;height:36px;color:var(--cui-base-900)}.text-and-sub-button{display:flex;align-items:center;justify-content:space-between;width:100%}.container-sub-button{display:flex;align-items:center;justify-content:center;text-transform:capitalize;border:solid 1px var(--cui-base-200);border-radius:4px;width:28px;height:28px}.group-sub-button{display:flex;gap:4px}.container-sub-button__select{border:solid 1px var(--cui-badge-blue-border);background-color:var(--cui-badge-blue-bg)}.block-platform{display:flex;gap:8px;color:var(--cui-base-900);cursor:pointer}.block-platform:hover{background-color:var(--cui-badge-light-blue-bg);border-radius:8px}.sub-title-text{display:flex;align-items:center;justify-content:center;font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-900);text-align:center}.activity-item{border-radius:8px;cursor:pointer}.activity-item:hover{background-color:var(--cui-badge-light-blue-bg)}\n"], dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "directive", type: CuiDropdownDirective, selector: "[cuiDropdown]", inputs: ["cuiDropdown", "orientation"], outputs: ["isOpened"], exportAs: ["cuiDropdown"] }, { kind: "component", type: CuiDropdownWrapperComponent, selector: "cui-dropdown-wrapper", inputs: ["title", "width", "maxHeight"] }, { kind: "component", type: CuiLetterBoxComponent, selector: "cui-letter-box", inputs: ["letter", "backgroundColor", "size", "shape"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "ngmodule", type: CuiContextMenuModule }, { kind: "component", type: CuiActivityItemComponent, selector: "cui-activity-item", inputs: ["activity", "companyId"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: CompanyItemComponent, selector: "cui-company-item", inputs: ["company", "selected"] }, { kind: "component", type: ButtonChangeThemeComponent, selector: "cui-button-change-theme" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiUserActionContextMenuComponent, isStandalone: true, selector: "cui-user-action-context-menu", outputs: { currentActivityChange: "currentActivityChange" }, ngImport: i0, template: "@let currentLang = lang$ | async;\n\n<ng-container *transloco=\"let t\">\n    <button\n        type=\"button\"\n        [cuiDropdown]=\"content\"\n        class=\"select\"\n        (isOpened)=\"onToggleOpenState($event)\"\n    >\n        <ng-content />\n    </button>\n\n    <ng-template #content>\n        @if (isOpen()) {\n            <cui-dropdown-wrapper\n                width=\"300px\"\n                maxHeight=\"500px\"\n            >\n                <div\n                    #dropdownContainer\n                    class=\"wrapper\"\n                >\n                    <div class=\"block-name\">\n                        <div>\n                            <cui-letter-box\n                                [letter]=\"fullName[0]\"\n                                [shape]=\"'rounded'\"\n                                size=\"md\"\n                            />\n                        </div>\n                        <div>\n                            <ul class=\"title-text\">\n                                {{\n                                    fullName\n                                }}\n                            </ul>\n                            <ul class=\"subtitle-text\">\n                                {{\n                                    email\n                                }}\n                            </ul>\n                        </div>\n                    </div>\n                    <div\n                        class=\"wrapper-platform block-platform\"\n                        (click)=\"onGoToPlatform()\"\n                    >\n                        <cui-svg\n                            icon=\"cuiIconLogo\"\n                            color=\"var(--cui-base-900)\"\n                        />\n                        <div>{{ t('CUBY_PLATFORM') }}</div>\n                    </div>\n                    <div class=\"list-company\">\n                        @for (company of companies(); track company.id) {\n                            <cui-company-item [company]=\"company\" />\n\n                            <div class=\"list-activity\">\n                                @for (activity of company.contexts; track activity) {\n                                    <cui-activity-item\n                                        class=\"activity-item\"\n                                        [activity]=\"activity\"\n                                        [companyId]=\"company.companyId\"\n                                    />\n                                } @empty {\n                                    <div class=\"sub-title-text\">{{ t('YOU_DONT_HAVE_ACTIVITY_IN_THIS_COMPANY') }}</div>\n                                }\n                            </div>\n                        } @empty {\n                            <div class=\"sub-title-text\">{{ t('YOU_DONT_HAVE_COMPANY') }}</div>\n                        }\n                    </div>\n                    <div class=\"block-button\">\n                       <cui-button-change-theme />\n                        <button type=\"button\">\n                            <div class=\"content-button\">\n                                <cui-svg icon=\"cuiIconGlobeSm\" />\n                                <div class=\"text-and-sub-button\">\n                                    {{ t('LANGUAGE') }}\n                                    <div class=\"group-sub-button\">\n                                        @for (lang of langs; track lang) {\n                                            <div\n                                                [class.container-sub-button__select]=\"currentLang === lang\"\n                                                class=\"container-sub-button\"\n                                                (click)=\"onChangeLang(lang)\"\n                                            >\n                                                {{ lang }}\n                                            </div>\n                                        }\n                                    </div>\n                                </div>\n                            </div>\n                        </button>\n                        <button\n                            type=\"button\"\n                            (click)=\"onLogout()\"\n                        >\n                            <div class=\"content-button\">\n                                <cui-svg icon=\"cuiIconLogOutSm\" />\n                                <div class=\"text-and-sub-button\">{{ t('LOG_OUT') }}</div>\n                            </div>\n                        </button>\n                    </div>\n                </div>\n            </cui-dropdown-wrapper>\n        }\n    </ng-template>\n</ng-container>\n", styles: [".wrapper{padding:8px}.wrapper-platform{padding:8px 16px;margin-top:4px}.block-name{display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:flex-start;padding-bottom:8px;border-bottom:solid 1px var(--cui-base-200);color:var(--cui-base-900)}.title-text{font-weight:500;font-size:14px;line-height:20px;color:var(--cui-base-900)}.subtitle-text{font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-900)}.list-company{display:flex;flex-direction:column;gap:0;padding:8px;max-height:250px;overflow-y:auto}.list-activity{display:flex;flex-direction:column;gap:4px;padding-top:4px;padding-bottom:4px;border-bottom:solid 1px var(--cui-base-200);margin-bottom:4px}.block-button{display:flex;flex-direction:column;gap:8px;padding-top:8px;width:100%}.content-button{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:flex-start;padding-right:8px;padding-left:8px;height:36px;color:var(--cui-base-900)}.text-and-sub-button{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:space-between;width:100%}.container-sub-button{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:center;text-transform:capitalize;border:solid 1px var(--cui-base-200);border-radius:4px;width:28px;height:28px}.group-sub-button{display:flex;flex-direction:row;gap:4px}.container-sub-button__select{border:solid 1px var(--cui-badge-blue-border);background-color:var(--cui-badge-blue-bg)}.block-platform{display:flex;gap:8px;color:var(--cui-base-900);cursor:pointer}.block-platform:hover{background-color:var(--cui-badge-light-blue-bg);border-radius:8px}.sub-title-text{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:center;font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-900);text-align:center}.activity-item{border-radius:8px;cursor:pointer}.activity-item:hover{background-color:var(--cui-badge-light-blue-bg)}\n"], dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "directive", type: CuiDropdownDirective, selector: "[cuiDropdown]", inputs: ["cuiDropdown", "orientation"], outputs: ["isOpened"], exportAs: ["cuiDropdown"] }, { kind: "component", type: CuiDropdownWrapperComponent, selector: "cui-dropdown-wrapper", inputs: ["title", "width", "maxHeight"] }, { kind: "component", type: CuiLetterBoxComponent, selector: "cui-letter-box", inputs: ["letter", "backgroundColor", "size", "shape"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "ngmodule", type: CuiContextMenuModule }, { kind: "component", type: CuiActivityItemComponent, selector: "cui-activity-item", inputs: ["activity", "companyId"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: CompanyItemComponent, selector: "cui-company-item", inputs: ["company", "selected"] }, { kind: "component", type: ButtonChangeThemeComponent, selector: "cui-button-change-theme" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiUserActionContextMenuComponent, decorators: [{
             type: Component,
@@ -10708,7 +10699,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         CuiActivityItemComponent,
                         ButtonChangeThemeComponent,
                         ButtonChangeThemeComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let currentLang = lang$ | async;\n\n<ng-container *transloco=\"let t\">\n    <button\n        type=\"button\"\n        [cuiDropdown]=\"content\"\n        class=\"select\"\n        (isOpened)=\"onToggleOpenState($event)\"\n    >\n        <ng-content />\n    </button>\n\n    <ng-template #content>\n        @if (isOpen()) {\n            <cui-dropdown-wrapper\n                width=\"300px\"\n                maxHeight=\"500px\"\n            >\n                <div\n                    #dropdownContainer\n                    class=\"wrapper\"\n                >\n                    <div class=\"block-name\">\n                        <div>\n                            <cui-letter-box\n                                [letter]=\"fullName[0]\"\n                                [shape]=\"'rounded'\"\n                                size=\"md\"\n                            />\n                        </div>\n                        <div>\n                            <ul class=\"title-text\">\n                                {{\n                                    fullName\n                                }}\n                            </ul>\n                            <ul class=\"subtitle-text\">\n                                {{\n                                    email\n                                }}\n                            </ul>\n                        </div>\n                    </div>\n                    <div\n                        class=\"wrapper-platform block-platform\"\n                        (click)=\"onGoToPlatform()\"\n                    >\n                        <cui-svg\n                            icon=\"cuiIconLogo\"\n                            color=\"var(--cui-base-900)\"\n                        />\n                        <div>{{ t('CUBY_PLATFORM') }}</div>\n                    </div>\n                    <div class=\"list-company\">\n                        @for (company of companies(); track company.id) {\n                            <cui-company-item [company]=\"company\" />\n\n                            <div class=\"list-activity\">\n                                @for (activity of company.contexts; track activity) {\n                                    <cui-activity-item\n                                        class=\"activity-item\"\n                                        [activity]=\"activity\"\n                                        [companyId]=\"company.companyId\"\n                                    />\n                                } @empty {\n                                    <div class=\"sub-title-text\">{{ t('YOU_DONT_HAVE_ACTIVITY_IN_THIS_COMPANY') }}</div>\n                                }\n                            </div>\n                        } @empty {\n                            <div class=\"sub-title-text\">{{ t('YOU_DONT_HAVE_COMPANY') }}</div>\n                        }\n                    </div>\n                    <div class=\"block-button\">\n                       <cui-button-change-theme />\n                        <button type=\"button\">\n                            <div class=\"content-button\">\n                                <cui-svg icon=\"cuiIconGlobeSm\" />\n                                <div class=\"text-and-sub-button\">\n                                    {{ t('LANGUAGE') }}\n                                    <div class=\"group-sub-button\">\n                                        @for (lang of langs; track lang) {\n                                            <div\n                                                [class.container-sub-button__select]=\"currentLang === lang\"\n                                                class=\"container-sub-button\"\n                                                (click)=\"onChangeLang(lang)\"\n                                            >\n                                                {{ lang }}\n                                            </div>\n                                        }\n                                    </div>\n                                </div>\n                            </div>\n                        </button>\n                        <button\n                            type=\"button\"\n                            (click)=\"onLogout()\"\n                        >\n                            <div class=\"content-button\">\n                                <cui-svg icon=\"cuiIconLogOutSm\" />\n                                <div class=\"text-and-sub-button\">{{ t('LOG_OUT') }}</div>\n                            </div>\n                        </button>\n                    </div>\n                </div>\n            </cui-dropdown-wrapper>\n        }\n    </ng-template>\n</ng-container>\n", styles: [".wrapper{padding:8px}.wrapper-platform{padding:8px 16px;margin-top:4px}.block-name{display:flex;gap:12px;align-items:center;padding-bottom:8px;border-bottom:solid 1px var(--cui-base-200);color:var(--cui-base-900)}.title-text{font-weight:500;font-size:14px;line-height:20px;color:var(--cui-base-900)}.subtitle-text{font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-900)}.list-company{display:flex;flex-direction:column;padding:8px;max-height:250px;overflow-y:auto}.list-activity{display:flex;flex-direction:column;gap:4px;padding-top:4px;padding-bottom:4px;border-bottom:solid 1px var(--cui-base-200);margin-bottom:4px}.block-button{display:flex;flex-direction:column;gap:8px;padding-top:8px;width:100%}.content-button{display:flex;gap:8px;align-items:center;padding-right:8px;padding-left:8px;height:36px;color:var(--cui-base-900)}.text-and-sub-button{display:flex;align-items:center;justify-content:space-between;width:100%}.container-sub-button{display:flex;align-items:center;justify-content:center;text-transform:capitalize;border:solid 1px var(--cui-base-200);border-radius:4px;width:28px;height:28px}.group-sub-button{display:flex;gap:4px}.container-sub-button__select{border:solid 1px var(--cui-badge-blue-border);background-color:var(--cui-badge-blue-bg)}.block-platform{display:flex;gap:8px;color:var(--cui-base-900);cursor:pointer}.block-platform:hover{background-color:var(--cui-badge-light-blue-bg);border-radius:8px}.sub-title-text{display:flex;align-items:center;justify-content:center;font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-900);text-align:center}.activity-item{border-radius:8px;cursor:pointer}.activity-item:hover{background-color:var(--cui-badge-light-blue-bg)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let currentLang = lang$ | async;\n\n<ng-container *transloco=\"let t\">\n    <button\n        type=\"button\"\n        [cuiDropdown]=\"content\"\n        class=\"select\"\n        (isOpened)=\"onToggleOpenState($event)\"\n    >\n        <ng-content />\n    </button>\n\n    <ng-template #content>\n        @if (isOpen()) {\n            <cui-dropdown-wrapper\n                width=\"300px\"\n                maxHeight=\"500px\"\n            >\n                <div\n                    #dropdownContainer\n                    class=\"wrapper\"\n                >\n                    <div class=\"block-name\">\n                        <div>\n                            <cui-letter-box\n                                [letter]=\"fullName[0]\"\n                                [shape]=\"'rounded'\"\n                                size=\"md\"\n                            />\n                        </div>\n                        <div>\n                            <ul class=\"title-text\">\n                                {{\n                                    fullName\n                                }}\n                            </ul>\n                            <ul class=\"subtitle-text\">\n                                {{\n                                    email\n                                }}\n                            </ul>\n                        </div>\n                    </div>\n                    <div\n                        class=\"wrapper-platform block-platform\"\n                        (click)=\"onGoToPlatform()\"\n                    >\n                        <cui-svg\n                            icon=\"cuiIconLogo\"\n                            color=\"var(--cui-base-900)\"\n                        />\n                        <div>{{ t('CUBY_PLATFORM') }}</div>\n                    </div>\n                    <div class=\"list-company\">\n                        @for (company of companies(); track company.id) {\n                            <cui-company-item [company]=\"company\" />\n\n                            <div class=\"list-activity\">\n                                @for (activity of company.contexts; track activity) {\n                                    <cui-activity-item\n                                        class=\"activity-item\"\n                                        [activity]=\"activity\"\n                                        [companyId]=\"company.companyId\"\n                                    />\n                                } @empty {\n                                    <div class=\"sub-title-text\">{{ t('YOU_DONT_HAVE_ACTIVITY_IN_THIS_COMPANY') }}</div>\n                                }\n                            </div>\n                        } @empty {\n                            <div class=\"sub-title-text\">{{ t('YOU_DONT_HAVE_COMPANY') }}</div>\n                        }\n                    </div>\n                    <div class=\"block-button\">\n                       <cui-button-change-theme />\n                        <button type=\"button\">\n                            <div class=\"content-button\">\n                                <cui-svg icon=\"cuiIconGlobeSm\" />\n                                <div class=\"text-and-sub-button\">\n                                    {{ t('LANGUAGE') }}\n                                    <div class=\"group-sub-button\">\n                                        @for (lang of langs; track lang) {\n                                            <div\n                                                [class.container-sub-button__select]=\"currentLang === lang\"\n                                                class=\"container-sub-button\"\n                                                (click)=\"onChangeLang(lang)\"\n                                            >\n                                                {{ lang }}\n                                            </div>\n                                        }\n                                    </div>\n                                </div>\n                            </div>\n                        </button>\n                        <button\n                            type=\"button\"\n                            (click)=\"onLogout()\"\n                        >\n                            <div class=\"content-button\">\n                                <cui-svg icon=\"cuiIconLogOutSm\" />\n                                <div class=\"text-and-sub-button\">{{ t('LOG_OUT') }}</div>\n                            </div>\n                        </button>\n                    </div>\n                </div>\n            </cui-dropdown-wrapper>\n        }\n    </ng-template>\n</ng-container>\n", styles: [".wrapper{padding:8px}.wrapper-platform{padding:8px 16px;margin-top:4px}.block-name{display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:flex-start;padding-bottom:8px;border-bottom:solid 1px var(--cui-base-200);color:var(--cui-base-900)}.title-text{font-weight:500;font-size:14px;line-height:20px;color:var(--cui-base-900)}.subtitle-text{font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-900)}.list-company{display:flex;flex-direction:column;gap:0;padding:8px;max-height:250px;overflow-y:auto}.list-activity{display:flex;flex-direction:column;gap:4px;padding-top:4px;padding-bottom:4px;border-bottom:solid 1px var(--cui-base-200);margin-bottom:4px}.block-button{display:flex;flex-direction:column;gap:8px;padding-top:8px;width:100%}.content-button{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:flex-start;padding-right:8px;padding-left:8px;height:36px;color:var(--cui-base-900)}.text-and-sub-button{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:space-between;width:100%}.container-sub-button{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:center;text-transform:capitalize;border:solid 1px var(--cui-base-200);border-radius:4px;width:28px;height:28px}.group-sub-button{display:flex;flex-direction:row;gap:4px}.container-sub-button__select{border:solid 1px var(--cui-badge-blue-border);background-color:var(--cui-badge-blue-bg)}.block-platform{display:flex;gap:8px;color:var(--cui-base-900);cursor:pointer}.block-platform:hover{background-color:var(--cui-badge-light-blue-bg);border-radius:8px}.sub-title-text{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:center;font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-900);text-align:center}.activity-item{border-radius:8px;cursor:pointer}.activity-item:hover{background-color:var(--cui-badge-light-blue-bg)}\n"] }]
         }], ctorParameters: () => [] });
 class AssigneeRoleItemComponent {
@@ -10728,11 +10719,11 @@ class AssigneeRoleItemComponent {
         this.deleteClicked = output();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AssigneeRoleItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AssigneeRoleItemComponent, isStandalone: true, selector: "cui-assignee-role-item", inputs: { role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteClicked: "deleteClicked" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <span></span>\n    <span\n        class=\"title\"\n        [cuiTooltip]=\"role()\"\n    >\n        {{ role() }}\n    </span>\n\n    @if (!readonly()) {\n        @if (empty()) {\n            <cui-alert-hint\n                status=\"warning\"\n                [tooltipText]=\"t('NO_ENTITIES_ADDED')\"\n            />\n        }\n        <cui-options-button [options]=\"OPTIONS\" />\n    } @else {\n        <span></span>\n    }\n</ng-container>\n", styles: [":host{display:flex;gap:8px;align-items:center;justify-content:center;width:100%}.title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}\n"], dependencies: [{ kind: "directive", type: CuiTooltipDirective, selector: "[cuiTooltip]:not(ng-container):not(ng-template)", inputs: ["cuiTooltipContext", "cuiTooltipAppearance", "cuiTooltip"] }, { kind: "component", type: AlertHintComponent, selector: "cui-alert-hint", inputs: ["status", "tooltipText"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: OptionsButtonComponent, selector: "cui-options-button", inputs: ["options", "hoverBackgroundColor"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AssigneeRoleItemComponent, isStandalone: true, selector: "cui-assignee-role-item", inputs: { role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteClicked: "deleteClicked" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <span></span>\n    <span\n        class=\"title\"\n        [cuiTooltip]=\"role()\"\n    >\n        {{ role() }}\n    </span>\n\n    @if (!readonly()) {\n        @if (empty()) {\n            <cui-alert-hint\n                status=\"warning\"\n                [tooltipText]=\"t('NO_ENTITIES_ADDED')\"\n            />\n        }\n        <cui-options-button [options]=\"OPTIONS\" />\n    } @else {\n        <span></span>\n    }\n</ng-container>\n", styles: [":host{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;width:100%}.title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}\n"], dependencies: [{ kind: "directive", type: CuiTooltipDirective, selector: "[cuiTooltip]:not(ng-container):not(ng-template)", inputs: ["cuiTooltipContext", "cuiTooltipAppearance", "cuiTooltip"] }, { kind: "component", type: AlertHintComponent, selector: "cui-alert-hint", inputs: ["status", "tooltipText"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: OptionsButtonComponent, selector: "cui-options-button", inputs: ["options", "hoverBackgroundColor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AssigneeRoleItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-assignee-role-item', standalone: true, imports: [CuiTooltip, AlertHintComponent, TranslocoDirective, OptionsButtonComponent], template: "<ng-container *transloco=\"let t\">\n    <span></span>\n    <span\n        class=\"title\"\n        [cuiTooltip]=\"role()\"\n    >\n        {{ role() }}\n    </span>\n\n    @if (!readonly()) {\n        @if (empty()) {\n            <cui-alert-hint\n                status=\"warning\"\n                [tooltipText]=\"t('NO_ENTITIES_ADDED')\"\n            />\n        }\n        <cui-options-button [options]=\"OPTIONS\" />\n    } @else {\n        <span></span>\n    }\n</ng-container>\n", styles: [":host{display:flex;gap:8px;align-items:center;justify-content:center;width:100%}.title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}\n"] }]
+            args: [{ selector: 'cui-assignee-role-item', standalone: true, imports: [CuiTooltip, AlertHintComponent, TranslocoDirective, OptionsButtonComponent], template: "<ng-container *transloco=\"let t\">\n    <span></span>\n    <span\n        class=\"title\"\n        [cuiTooltip]=\"role()\"\n    >\n        {{ role() }}\n    </span>\n\n    @if (!readonly()) {\n        @if (empty()) {\n            <cui-alert-hint\n                status=\"warning\"\n                [tooltipText]=\"t('NO_ENTITIES_ADDED')\"\n            />\n        }\n        <cui-options-button [options]=\"OPTIONS\" />\n    } @else {\n        <span></span>\n    }\n</ng-container>\n", styles: [":host{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;width:100%}.title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}\n"] }]
         }] });
 class AssigneeRolesTabsComponent {
@@ -10770,11 +10761,11 @@ class AssigneeRolesTabsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AssigneeRolesTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AssigneeRolesTabsComponent, isStandalone: true, selector: "cui-assignee-roles-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, itemSlot: { classPropertyName: "itemSlot", publicName: "itemSlot", isSignal: true, isRequired: true, transformFunction: null }, buttonSlot: { classPropertyName: "buttonSlot", publicName: "buttonSlot", isSignal: true, isRequired: true, transformFunction: null }, contentSlot: { classPropertyName: "contentSlot", publicName: "contentSlot", isSignal: true, isRequired: true, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndexChange: "selectedIndexChange" }, providers: [provideCuiTabs(CuiTabsServiceImpl)], viewQueries: [{ propertyName: "buttons", first: true, predicate: ["buttons"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <cui-tabs\n        class=\"tabs\"\n        [selectedIndex]=\"selectedIndex()\"\n        [headerSlot]=\"headerSlot\"\n    >\n        <ng-template\n            #headerSlot\n            let-buttons\n        >\n            <header class=\"header\">\n                <div\n                    #buttons\n                    class=\"buttons\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"buttons\" />\n                </div>\n                <div class=\"actions\">\n                    @if (tabs().length > 4) {\n                        <button\n                            cuiButton\n                            type=\"button\"\n                            appearance=\"ghost\"\n                            size=\"xxs\"\n                            icon=\"cuiIconChevronLeft\"\n                            (click)=\"onScrollLeft()\"\n                        ></button>\n                        <button\n                            cuiButton\n                            type=\"button\"\n                            appearance=\"ghost\"\n                            size=\"xxs\"\n                            icon=\"cuiIconChevronRight\"\n                            (click)=\"onScrollRight()\"\n                        ></button>\n                    }\n\n                    <ng-container [ngTemplateOutlet]=\"buttonSlot()\" />\n                </div>\n            </header>\n        </ng-template>\n\n        @for (tab of tabs(); track trackTab($index, tab); let i = $index) {\n            <cui-tab\n                [data]=\"tab\"\n                [buttonSlot]=\"cuiButtonSlot\"\n                [contentSlot]=\"cuiContentSlot\"\n                class=\"tab\"\n            >\n                <ng-template\n                    #cuiButtonSlot\n                    let-isActive=\"isActive\"\n                    let-element\n                >\n                    <div\n                        class=\"button\"\n                        [class.button_active]=\"isActive\"\n                        (click)=\"onSelectTab(i)\"\n                        (keyup.enter)=\"onSelectTab(i)\"\n                        role=\"button\"\n                        tabindex=\"0\"\n                    >\n                        <ng-container\n                            [ngTemplateOutlet]=\"itemSlot()\"\n                            [ngTemplateOutletContext]=\"{ $implicit: element }\"\n                        />\n                    </div>\n                </ng-template>\n                <ng-template\n                    #cuiContentSlot\n                    let-element\n                >\n                    <div class=\"content\">\n                        <ng-container\n                            [ngTemplateOutlet]=\"contentSlot()\"\n                            [ngTemplateOutletContext]=\"{ $implicit: element }\"\n                        />\n                    </div>\n                </ng-template>\n            </cui-tab>\n        }\n    </cui-tabs>\n</ng-container>\n", styles: [":host{display:block;width:100%}.tabs{display:flex;flex-direction:column;gap:8px;border-radius:8px;border:1px solid var(--cui-base-200)}.header{display:flex;gap:4px;align-items:center;padding-top:8px;padding-right:12px;padding-left:12px;border-radius:8px 8px 0 0;border-bottom:.5px solid var(--cui-base-200);background-color:var(--cui-base-10)}.buttons{display:flex;align-items:center;justify-content:space-evenly;flex:1;margin-bottom:-1px;overflow:scroll hidden;scrollbar-width:none}.actions{padding-left:4px;border-left:1px solid var(--cui-base-200)}.content{padding:12px;animation:fade-in .15s ease-in}.button{display:flex;align-items:center;justify-content:space-between;padding:8px;flex:1 0 180px}.button_active{position:relative;border-radius:8px 8px 0 0;border:.5px solid var(--cui-base-200);border-bottom-width:0;background-color:var(--cui-base-0)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "component", type: CuiTabsComponent, selector: "cui-tabs", inputs: ["headerSlot", "selectedIndex"] }, { kind: "directive", type: CuiTabDirective, selector: "cui-tab, [cuiTab]", inputs: ["buttonSlot", "contentSlot", "data"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AssigneeRolesTabsComponent, isStandalone: true, selector: "cui-assignee-roles-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, itemSlot: { classPropertyName: "itemSlot", publicName: "itemSlot", isSignal: true, isRequired: true, transformFunction: null }, buttonSlot: { classPropertyName: "buttonSlot", publicName: "buttonSlot", isSignal: true, isRequired: true, transformFunction: null }, contentSlot: { classPropertyName: "contentSlot", publicName: "contentSlot", isSignal: true, isRequired: true, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndexChange: "selectedIndexChange" }, providers: [provideCuiTabs(CuiTabsServiceImpl)], viewQueries: [{ propertyName: "buttons", first: true, predicate: ["buttons"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <cui-tabs\n        class=\"tabs\"\n        [selectedIndex]=\"selectedIndex()\"\n        [headerSlot]=\"headerSlot\"\n    >\n        <ng-template\n            #headerSlot\n            let-buttons\n        >\n            <header class=\"header\">\n                <div\n                    #buttons\n                    class=\"buttons\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"buttons\" />\n                </div>\n                <div class=\"actions\">\n                    @if (tabs().length > 4) {\n                        <button\n                            cuiButton\n                            type=\"button\"\n                            appearance=\"ghost\"\n                            size=\"xxs\"\n                            icon=\"cuiIconChevronLeft\"\n                            (click)=\"onScrollLeft()\"\n                        ></button>\n                        <button\n                            cuiButton\n                            type=\"button\"\n                            appearance=\"ghost\"\n                            size=\"xxs\"\n                            icon=\"cuiIconChevronRight\"\n                            (click)=\"onScrollRight()\"\n                        ></button>\n                    }\n\n                    <ng-container [ngTemplateOutlet]=\"buttonSlot()\" />\n                </div>\n            </header>\n        </ng-template>\n\n        @for (tab of tabs(); track trackTab($index, tab); let i = $index) {\n            <cui-tab\n                [data]=\"tab\"\n                [buttonSlot]=\"cuiButtonSlot\"\n                [contentSlot]=\"cuiContentSlot\"\n                class=\"tab\"\n            >\n                <ng-template\n                    #cuiButtonSlot\n                    let-isActive=\"isActive\"\n                    let-element\n                >\n                    <div\n                        class=\"button\"\n                        [class.button_active]=\"isActive\"\n                        (click)=\"onSelectTab(i)\"\n                        (keyup.enter)=\"onSelectTab(i)\"\n                        role=\"button\"\n                        tabindex=\"0\"\n                    >\n                        <ng-container\n                            [ngTemplateOutlet]=\"itemSlot()\"\n                            [ngTemplateOutletContext]=\"{ $implicit: element }\"\n                        />\n                    </div>\n                </ng-template>\n                <ng-template\n                    #cuiContentSlot\n                    let-element\n                >\n                    <div class=\"content\">\n                        <ng-container\n                            [ngTemplateOutlet]=\"contentSlot()\"\n                            [ngTemplateOutletContext]=\"{ $implicit: element }\"\n                        />\n                    </div>\n                </ng-template>\n            </cui-tab>\n        }\n    </cui-tabs>\n</ng-container>\n", styles: [":host{display:block;width:100%}.tabs{display:flex;flex-direction:column;gap:8px;border-radius:8px;border:1px solid var(--cui-base-200)}.header{display:flex;flex-direction:row;gap:4px;align-items:center;justify-content:flex-start;padding-top:8px;padding-right:12px;padding-left:12px;border-radius:8px 8px 0 0;border-bottom:.5px solid var(--cui-base-200);background-color:var(--cui-base-10)}.buttons{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:space-evenly;flex:1;margin-bottom:-1px;overflow:scroll hidden;scrollbar-width:none}.actions{padding-left:4px;border-left:1px solid var(--cui-base-200)}.content{padding:12px;animation:fade-in .15s ease-in}.button{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:space-between;padding:8px;flex:1 0 180px}.button_active{position:relative;border-radius:8px 8px 0 0;border:.5px solid var(--cui-base-200);border-bottom-width:0;background-color:var(--cui-base-0)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "component", type: CuiTabsComponent, selector: "cui-tabs", inputs: ["headerSlot", "selectedIndex"] }, { kind: "directive", type: CuiTabDirective, selector: "cui-tab, [cuiTab]", inputs: ["buttonSlot", "contentSlot", "data"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AssigneeRolesTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-assignee-roles-tabs', standalone: true, imports: [CuiTabsComponent, CuiTabDirective, TranslocoDirective, CuiButtonModule, NgTemplateOutlet], providers: [provideCuiTabs(CuiTabsServiceImpl)], template: "<ng-container *transloco=\"let t\">\n    <cui-tabs\n        class=\"tabs\"\n        [selectedIndex]=\"selectedIndex()\"\n        [headerSlot]=\"headerSlot\"\n    >\n        <ng-template\n            #headerSlot\n            let-buttons\n        >\n            <header class=\"header\">\n                <div\n                    #buttons\n                    class=\"buttons\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"buttons\" />\n                </div>\n                <div class=\"actions\">\n                    @if (tabs().length > 4) {\n                        <button\n                            cuiButton\n                            type=\"button\"\n                            appearance=\"ghost\"\n                            size=\"xxs\"\n                            icon=\"cuiIconChevronLeft\"\n                            (click)=\"onScrollLeft()\"\n                        ></button>\n                        <button\n                            cuiButton\n                            type=\"button\"\n                            appearance=\"ghost\"\n                            size=\"xxs\"\n                            icon=\"cuiIconChevronRight\"\n                            (click)=\"onScrollRight()\"\n                        ></button>\n                    }\n\n                    <ng-container [ngTemplateOutlet]=\"buttonSlot()\" />\n                </div>\n            </header>\n        </ng-template>\n\n        @for (tab of tabs(); track trackTab($index, tab); let i = $index) {\n            <cui-tab\n                [data]=\"tab\"\n                [buttonSlot]=\"cuiButtonSlot\"\n                [contentSlot]=\"cuiContentSlot\"\n                class=\"tab\"\n            >\n                <ng-template\n                    #cuiButtonSlot\n                    let-isActive=\"isActive\"\n                    let-element\n                >\n                    <div\n                        class=\"button\"\n                        [class.button_active]=\"isActive\"\n                        (click)=\"onSelectTab(i)\"\n                        (keyup.enter)=\"onSelectTab(i)\"\n                        role=\"button\"\n                        tabindex=\"0\"\n                    >\n                        <ng-container\n                            [ngTemplateOutlet]=\"itemSlot()\"\n                            [ngTemplateOutletContext]=\"{ $implicit: element }\"\n                        />\n                    </div>\n                </ng-template>\n                <ng-template\n                    #cuiContentSlot\n                    let-element\n                >\n                    <div class=\"content\">\n                        <ng-container\n                            [ngTemplateOutlet]=\"contentSlot()\"\n                            [ngTemplateOutletContext]=\"{ $implicit: element }\"\n                        />\n                    </div>\n                </ng-template>\n            </cui-tab>\n        }\n    </cui-tabs>\n</ng-container>\n", styles: [":host{display:block;width:100%}.tabs{display:flex;flex-direction:column;gap:8px;border-radius:8px;border:1px solid var(--cui-base-200)}.header{display:flex;gap:4px;align-items:center;padding-top:8px;padding-right:12px;padding-left:12px;border-radius:8px 8px 0 0;border-bottom:.5px solid var(--cui-base-200);background-color:var(--cui-base-10)}.buttons{display:flex;align-items:center;justify-content:space-evenly;flex:1;margin-bottom:-1px;overflow:scroll hidden;scrollbar-width:none}.actions{padding-left:4px;border-left:1px solid var(--cui-base-200)}.content{padding:12px;animation:fade-in .15s ease-in}.button{display:flex;align-items:center;justify-content:space-between;padding:8px;flex:1 0 180px}.button_active{position:relative;border-radius:8px 8px 0 0;border:.5px solid var(--cui-base-200);border-bottom-width:0;background-color:var(--cui-base-0)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
+            args: [{ selector: 'cui-assignee-roles-tabs', standalone: true, imports: [CuiTabsComponent, CuiTabDirective, TranslocoDirective, CuiButtonModule, NgTemplateOutlet], providers: [provideCuiTabs(CuiTabsServiceImpl)], template: "<ng-container *transloco=\"let t\">\n    <cui-tabs\n        class=\"tabs\"\n        [selectedIndex]=\"selectedIndex()\"\n        [headerSlot]=\"headerSlot\"\n    >\n        <ng-template\n            #headerSlot\n            let-buttons\n        >\n            <header class=\"header\">\n                <div\n                    #buttons\n                    class=\"buttons\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"buttons\" />\n                </div>\n                <div class=\"actions\">\n                    @if (tabs().length > 4) {\n                        <button\n                            cuiButton\n                            type=\"button\"\n                            appearance=\"ghost\"\n                            size=\"xxs\"\n                            icon=\"cuiIconChevronLeft\"\n                            (click)=\"onScrollLeft()\"\n                        ></button>\n                        <button\n                            cuiButton\n                            type=\"button\"\n                            appearance=\"ghost\"\n                            size=\"xxs\"\n                            icon=\"cuiIconChevronRight\"\n                            (click)=\"onScrollRight()\"\n                        ></button>\n                    }\n\n                    <ng-container [ngTemplateOutlet]=\"buttonSlot()\" />\n                </div>\n            </header>\n        </ng-template>\n\n        @for (tab of tabs(); track trackTab($index, tab); let i = $index) {\n            <cui-tab\n                [data]=\"tab\"\n                [buttonSlot]=\"cuiButtonSlot\"\n                [contentSlot]=\"cuiContentSlot\"\n                class=\"tab\"\n            >\n                <ng-template\n                    #cuiButtonSlot\n                    let-isActive=\"isActive\"\n                    let-element\n                >\n                    <div\n                        class=\"button\"\n                        [class.button_active]=\"isActive\"\n                        (click)=\"onSelectTab(i)\"\n                        (keyup.enter)=\"onSelectTab(i)\"\n                        role=\"button\"\n                        tabindex=\"0\"\n                    >\n                        <ng-container\n                            [ngTemplateOutlet]=\"itemSlot()\"\n                            [ngTemplateOutletContext]=\"{ $implicit: element }\"\n                        />\n                    </div>\n                </ng-template>\n                <ng-template\n                    #cuiContentSlot\n                    let-element\n                >\n                    <div class=\"content\">\n                        <ng-container\n                            [ngTemplateOutlet]=\"contentSlot()\"\n                            [ngTemplateOutletContext]=\"{ $implicit: element }\"\n                        />\n                    </div>\n                </ng-template>\n            </cui-tab>\n        }\n    </cui-tabs>\n</ng-container>\n", styles: [":host{display:block;width:100%}.tabs{display:flex;flex-direction:column;gap:8px;border-radius:8px;border:1px solid var(--cui-base-200)}.header{display:flex;flex-direction:row;gap:4px;align-items:center;justify-content:flex-start;padding-top:8px;padding-right:12px;padding-left:12px;border-radius:8px 8px 0 0;border-bottom:.5px solid var(--cui-base-200);background-color:var(--cui-base-10)}.buttons{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:space-evenly;flex:1;margin-bottom:-1px;overflow:scroll hidden;scrollbar-width:none}.actions{padding-left:4px;border-left:1px solid var(--cui-base-200)}.content{padding:12px;animation:fade-in .15s ease-in}.button{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:space-between;padding:8px;flex:1 0 180px}.button_active{position:relative;border-radius:8px 8px 0 0;border:.5px solid var(--cui-base-200);border-bottom-width:0;background-color:var(--cui-base-0)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
         }] });
 class UtilityInfoReadonlyComponent {
@@ -10925,11 +10916,11 @@ class ModalHeaderInsertedButtonsComponent {
         this.unbindClicked.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModalHeaderInsertedButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ModalHeaderInsertedButtonsComponent, isStandalone: true, selector: "cui-modal-header-inserted-buttons", outputs: { unbindClicked: "unbindClicked" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <!-- TODO: \u0434\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043F\u0435\u0440\u0435\u0445\u043E\u0434 \u043D\u0430 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0438 \u043A\u043E\u0433\u0434\u0430 \u043F\u043E\u044F\u0432\u0438\u0442\u0441\u044F \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430 -->\n    <button\n        cuiButton\n        [cuiTooltip]=\"t('IN_DEVELOPMENT')\"\n        type=\"button\"\n        size=\"sm\"\n        appearance=\"outlined-gray\"\n        iconRight=\"cuiIconExternalLinkSm\"\n        [disabled]=\"true\"\n    >\n        {{ t('VIEW') }}\n    </button>\n    <button\n        cuiButton\n        type=\"button\"\n        size=\"sm\"\n        icon=\"cuiIconLinkBroken\"\n        appearance=\"action\"\n        class=\"cc-violet-action-button\"\n        (click)=\"onUnbind()\"\n    >\n        {{ t('UNBIND') }}\n    </button>\n</ng-container>\n", styles: [":host{display:flex;gap:8px;align-items:center;justify-content:flex-end}\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: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: CuiTooltipDirective, selector: "[cuiTooltip]:not(ng-container):not(ng-template)", inputs: ["cuiTooltipContext", "cuiTooltipAppearance", "cuiTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ModalHeaderInsertedButtonsComponent, isStandalone: true, selector: "cui-modal-header-inserted-buttons", outputs: { unbindClicked: "unbindClicked" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <!-- TODO: \u0434\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043F\u0435\u0440\u0435\u0445\u043E\u0434 \u043D\u0430 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0438 \u043A\u043E\u0433\u0434\u0430 \u043F\u043E\u044F\u0432\u0438\u0442\u0441\u044F \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430 -->\n    <button\n        cuiButton\n        [cuiTooltip]=\"t('IN_DEVELOPMENT')\"\n        type=\"button\"\n        size=\"sm\"\n        appearance=\"outlined-gray\"\n        iconRight=\"cuiIconExternalLinkSm\"\n        [disabled]=\"true\"\n    >\n        {{ t('VIEW') }}\n    </button>\n    <button\n        cuiButton\n        type=\"button\"\n        size=\"sm\"\n        icon=\"cuiIconLinkBroken\"\n        appearance=\"action\"\n        class=\"cc-violet-action-button\"\n        (click)=\"onUnbind()\"\n    >\n        {{ t('UNBIND') }}\n    </button>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:flex-end}\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: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: CuiTooltipDirective, selector: "[cuiTooltip]:not(ng-container):not(ng-template)", inputs: ["cuiTooltipContext", "cuiTooltipAppearance", "cuiTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModalHeaderInsertedButtonsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-modal-header-inserted-buttons', standalone: true, imports: [CuiButtonModule, TranslocoDirective, CuiTooltip], template: "<ng-container *transloco=\"let t\">\n    <!-- TODO: \u0434\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043F\u0435\u0440\u0435\u0445\u043E\u0434 \u043D\u0430 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0438 \u043A\u043E\u0433\u0434\u0430 \u043F\u043E\u044F\u0432\u0438\u0442\u0441\u044F \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430 -->\n    <button\n        cuiButton\n        [cuiTooltip]=\"t('IN_DEVELOPMENT')\"\n        type=\"button\"\n        size=\"sm\"\n        appearance=\"outlined-gray\"\n        iconRight=\"cuiIconExternalLinkSm\"\n        [disabled]=\"true\"\n    >\n        {{ t('VIEW') }}\n    </button>\n    <button\n        cuiButton\n        type=\"button\"\n        size=\"sm\"\n        icon=\"cuiIconLinkBroken\"\n        appearance=\"action\"\n        class=\"cc-violet-action-button\"\n        (click)=\"onUnbind()\"\n    >\n        {{ t('UNBIND') }}\n    </button>\n</ng-container>\n", styles: [":host{display:flex;gap:8px;align-items:center;justify-content:flex-end}\n"] }]
+            args: [{ selector: 'cui-modal-header-inserted-buttons', standalone: true, imports: [CuiButtonModule, TranslocoDirective, CuiTooltip], template: "<ng-container *transloco=\"let t\">\n    <!-- TODO: \u0434\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043F\u0435\u0440\u0435\u0445\u043E\u0434 \u043D\u0430 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0438 \u043A\u043E\u0433\u0434\u0430 \u043F\u043E\u044F\u0432\u0438\u0442\u0441\u044F \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430 -->\n    <button\n        cuiButton\n        [cuiTooltip]=\"t('IN_DEVELOPMENT')\"\n        type=\"button\"\n        size=\"sm\"\n        appearance=\"outlined-gray\"\n        iconRight=\"cuiIconExternalLinkSm\"\n        [disabled]=\"true\"\n    >\n        {{ t('VIEW') }}\n    </button>\n    <button\n        cuiButton\n        type=\"button\"\n        size=\"sm\"\n        icon=\"cuiIconLinkBroken\"\n        appearance=\"action\"\n        class=\"cc-violet-action-button\"\n        (click)=\"onUnbind()\"\n    >\n        {{ t('UNBIND') }}\n    </button>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:flex-end}\n"] }]
         }] });
 class ModalInfoTabComponent {
@@ -10960,13 +10951,13 @@ class ToolFormReadonlyComponent {
         this.tool = input.required();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolFormReadonlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ToolFormReadonlyComponent, isStandalone: true, selector: "cc-tool-form-readonly", inputs: { tool: { classPropertyName: "tool", publicName: "tool", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class._disabled": "tool().isDelete" } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <td class=\"cc-table__td info custom\">\n        {{ tool().name }}\n\n        @if (tool().isDelete) {\n            <cui-badge\n                class=\"badge\"\n                [size]=\"'sm'\"\n                color=\"red\"\n            >\n                {{ t('DELETED') }}\n            </cui-badge>\n        }\n    </td>\n    <td class=\"cc-table__td custom\">\n        {{ tool().quantity }}\n    </td>\n    <td class=\"cc-table__td custom\">\n        {{ tool().unit }}\n    </td>\n</ng-container>\n", styles: [".custom{display:flex;align-items:center;padding-right:4px;padding-left:4px;min-height:53px}:host{display:contents}:host._disabled .custom{pointer-events:none;opacity:.7}:host._disabled .button{opacity:1;pointer-events:all}.info{display:flex}.badge{margin-left:auto}\n"], dependencies: [{ kind: "ngmodule", type: CuiBadgeModule }, { kind: "component", type: CuiBadgeComponent, selector: "cui-badge", inputs: ["color", "size", "isWithDot"] }, { 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.14", type: ToolFormReadonlyComponent, isStandalone: true, selector: "cc-tool-form-readonly", inputs: { tool: { classPropertyName: "tool", publicName: "tool", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class._disabled": "tool().isDelete" } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <td class=\"cc-table__td info custom\">\n        {{ tool().name }}\n\n        @if (tool().isDelete) {\n            <cui-badge\n                class=\"badge\"\n                [size]=\"'sm'\"\n                color=\"red\"\n            >\n                {{ t('DELETED') }}\n            </cui-badge>\n        }\n    </td>\n    <td class=\"cc-table__td custom\">\n        {{ tool().quantity }}\n    </td>\n    <td class=\"cc-table__td custom\">\n        {{ tool().unit }}\n    </td>\n</ng-container>\n", styles: [".custom{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:flex-start;padding-right:4px;padding-left:4px;min-height:53px}:host{display:contents}:host._disabled .custom{pointer-events:none;opacity:.7}:host._disabled .button{opacity:1;pointer-events:all}.info{display:flex;flex-direction:row;gap:0}.badge{margin-left:auto}\n"], dependencies: [{ kind: "ngmodule", type: CuiBadgeModule }, { kind: "component", type: CuiBadgeComponent, selector: "cui-badge", inputs: ["color", "size", "isWithDot"] }, { 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.14", ngImport: i0, type: ToolFormReadonlyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cc-tool-form-readonly', imports: [CuiBadgeModule, TranslocoDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class._disabled]': 'tool().isDelete'
-                    }, standalone: true, template: "<ng-container *transloco=\"let t\">\n    <td class=\"cc-table__td info custom\">\n        {{ tool().name }}\n\n        @if (tool().isDelete) {\n            <cui-badge\n                class=\"badge\"\n                [size]=\"'sm'\"\n                color=\"red\"\n            >\n                {{ t('DELETED') }}\n            </cui-badge>\n        }\n    </td>\n    <td class=\"cc-table__td custom\">\n        {{ tool().quantity }}\n    </td>\n    <td class=\"cc-table__td custom\">\n        {{ tool().unit }}\n    </td>\n</ng-container>\n", styles: [".custom{display:flex;align-items:center;padding-right:4px;padding-left:4px;min-height:53px}:host{display:contents}:host._disabled .custom{pointer-events:none;opacity:.7}:host._disabled .button{opacity:1;pointer-events:all}.info{display:flex}.badge{margin-left:auto}\n"] }]
+                    }, standalone: true, template: "<ng-container *transloco=\"let t\">\n    <td class=\"cc-table__td info custom\">\n        {{ tool().name }}\n\n        @if (tool().isDelete) {\n            <cui-badge\n                class=\"badge\"\n                [size]=\"'sm'\"\n                color=\"red\"\n            >\n                {{ t('DELETED') }}\n            </cui-badge>\n        }\n    </td>\n    <td class=\"cc-table__td custom\">\n        {{ tool().quantity }}\n    </td>\n    <td class=\"cc-table__td custom\">\n        {{ tool().unit }}\n    </td>\n</ng-container>\n", styles: [".custom{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:flex-start;padding-right:4px;padding-left:4px;min-height:53px}:host{display:contents}:host._disabled .custom{pointer-events:none;opacity:.7}:host._disabled .button{opacity:1;pointer-events:all}.info{display:flex;flex-direction:row;gap:0}.badge{margin-left:auto}\n"] }]
         }] });
 class ConsumableFormItemReadonlyComponent {
@@ -10975,11 +10966,11 @@ class ConsumableFormItemReadonlyComponent {
         this.consumable = input.required();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConsumableFormItemReadonlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: ConsumableFormItemReadonlyComponent, isStandalone: true, selector: "cui-consumable-form-item-readonly", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, consumable: { classPropertyName: "consumable", publicName: "consumable", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let consumableData = consumable();\n\n<form\n    *transloco=\"let t\"\n    class=\"form\"\n>\n    <span class=\"title\">{{ title() }}</span>\n\n    <div class=\"content\">\n        <div class=\"field\">\n            <span class=\"readonly-item\">{{ t('AMOUNT') }}:</span>\n            <span class=\"readonly-item\">{{ consumableData.quantity }}</span>\n            <span class=\"readonly-item\">{{ consumableData.unit | lowercase }}</span>\n        </div>\n\n        <div class=\"field\">\n            <span class=\"readonly-item\">{{ t('MEASURE') }}:</span>\n            <span class=\"readonly-item\">{{ consumableData.measure.value }}</span>\n            <span class=\"readonly-item\">{{ consumableData.measure.unit | lowercase }}</span>\n        </div>\n    </div>\n</form>\n", styles: [":host{padding-top:6px;padding-bottom:6px;display:block}.title{font-weight:400;font-size:14px;line-height:20px;min-width:80px}.content{display:flex;flex-direction:column;gap:8px}.input{padding-right:84px;width:134px}.options{position:absolute;inset:1px 1px 1px auto;min-width:80px}.options ::ng-deep .c-button{border:0}.form{display:flex;gap:8px}.field{display:flex;gap:4px;position:relative}\n"], dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: ConsumableFormItemReadonlyComponent, isStandalone: true, selector: "cui-consumable-form-item-readonly", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, consumable: { classPropertyName: "consumable", publicName: "consumable", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let consumableData = consumable();\n\n<form\n    *transloco=\"let t\"\n    class=\"form\"\n>\n    <span class=\"title\">{{ title() }}</span>\n\n    <div class=\"content\">\n        <div class=\"field\">\n            <span class=\"readonly-item\">{{ t('AMOUNT') }}:</span>\n            <span class=\"readonly-item\">{{ consumableData.quantity }}</span>\n            <span class=\"readonly-item\">{{ consumableData.unit | lowercase }}</span>\n        </div>\n\n        <div class=\"field\">\n            <span class=\"readonly-item\">{{ t('MEASURE') }}:</span>\n            <span class=\"readonly-item\">{{ consumableData.measure.value }}</span>\n            <span class=\"readonly-item\">{{ consumableData.measure.unit | lowercase }}</span>\n        </div>\n    </div>\n</form>\n", styles: [":host{padding-top:6px;padding-bottom:6px;display:block}.title{font-weight:400;font-size:14px;line-height:20px;min-width:80px}.content{display:flex;flex-direction:column;gap:8px}.input{padding-right:84px;width:134px}.options{position:absolute;inset:1px 1px 1px auto;min-width:80px}.options ::ng-deep .c-button{border:0}.form{display:flex;flex-direction:row;gap:8px}.field{display:flex;flex-direction:row;gap:4px;position:relative}\n"], dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConsumableFormItemReadonlyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-consumable-form-item-readonly', imports: [TranslocoDirective, LowerCasePipe], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@let consumableData = consumable();\n\n<form\n    *transloco=\"let t\"\n    class=\"form\"\n>\n    <span class=\"title\">{{ title() }}</span>\n\n    <div class=\"content\">\n        <div class=\"field\">\n            <span class=\"readonly-item\">{{ t('AMOUNT') }}:</span>\n            <span class=\"readonly-item\">{{ consumableData.quantity }}</span>\n            <span class=\"readonly-item\">{{ consumableData.unit | lowercase }}</span>\n        </div>\n\n        <div class=\"field\">\n            <span class=\"readonly-item\">{{ t('MEASURE') }}:</span>\n            <span class=\"readonly-item\">{{ consumableData.measure.value }}</span>\n            <span class=\"readonly-item\">{{ consumableData.measure.unit | lowercase }}</span>\n        </div>\n    </div>\n</form>\n", styles: [":host{padding-top:6px;padding-bottom:6px;display:block}.title{font-weight:400;font-size:14px;line-height:20px;min-width:80px}.content{display:flex;flex-direction:column;gap:8px}.input{padding-right:84px;width:134px}.options{position:absolute;inset:1px 1px 1px auto;min-width:80px}.options ::ng-deep .c-button{border:0}.form{display:flex;gap:8px}.field{display:flex;gap:4px;position:relative}\n"] }]
+            args: [{ selector: 'cui-consumable-form-item-readonly', imports: [TranslocoDirective, LowerCasePipe], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@let consumableData = consumable();\n\n<form\n    *transloco=\"let t\"\n    class=\"form\"\n>\n    <span class=\"title\">{{ title() }}</span>\n\n    <div class=\"content\">\n        <div class=\"field\">\n            <span class=\"readonly-item\">{{ t('AMOUNT') }}:</span>\n            <span class=\"readonly-item\">{{ consumableData.quantity }}</span>\n            <span class=\"readonly-item\">{{ consumableData.unit | lowercase }}</span>\n        </div>\n\n        <div class=\"field\">\n            <span class=\"readonly-item\">{{ t('MEASURE') }}:</span>\n            <span class=\"readonly-item\">{{ consumableData.measure.value }}</span>\n            <span class=\"readonly-item\">{{ consumableData.measure.unit | lowercase }}</span>\n        </div>\n    </div>\n</form>\n", styles: [":host{padding-top:6px;padding-bottom:6px;display:block}.title{font-weight:400;font-size:14px;line-height:20px;min-width:80px}.content{display:flex;flex-direction:column;gap:8px}.input{padding-right:84px;width:134px}.options{position:absolute;inset:1px 1px 1px auto;min-width:80px}.options ::ng-deep .c-button{border:0}.form{display:flex;flex-direction:row;gap:8px}.field{display:flex;flex-direction:row;gap:4px;position:relative}\n"] }]
         }] });
 const CUI_DEFAULT_CONTROL_DELAY = 700;
@@ -11025,7 +11016,7 @@ class ConsumableFormItemComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConsumableFormItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ConsumableFormItemComponent, isStandalone: true, selector: "cc-consumable-form-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, consumptionOptions: { classPropertyName: "consumptionOptions", publicName: "consumptionOptions", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { consumableChanged: "consumableChanged" }, ngImport: i0, template: "@let formData = form();\n\n@if (readonly()) {\n    <cui-consumable-form-item-readonly\n        [title]=\"title()\"\n        [consumable]=\"consumable()\"\n    />\n} @else {\n    <form\n        [formGroup]=\"formData\"\n        *transloco=\"let t\"\n        class=\"form\"\n    >\n        <span class=\"title\">{{ title() }}</span>\n\n        <div class=\"wrapper-input\">\n            <div class=\"form__input\">\n                @let quantity = formData.controls.quantity;\n\n                <label [for]=\"consumptionId\">{{ t('AMOUNT') }}</label>\n                <div class=\"field\">\n                    <cui-input-number\n                        [cuiTextFieldId]=\"quantityId\"\n                        cuiTextFieldPlaceholder=\"0\"\n                        formControlName=\"quantity\"\n                        [cuiTextFieldIsError]=\"!!quantity.errors && quantity.dirty\"\n                        class=\"input\"\n                    />\n\n                    <cui-select\n                        [options]=\"piecesOptions()\"\n                        [class.options--error]=\"hasFormError()\"\n                        formControlName=\"unit\"\n                        class=\"options\"\n                    />\n                </div>\n                <cui-general-control-error-hint\n                    [control]=\"quantity\"\n                    [isVisible]=\"!!quantity.errors && quantity.dirty\"\n                />\n            </div>\n\n            <div class=\"form__input\">\n                @let measureFormGroup = formData.controls.measure;\n                @let consumption = measureFormGroup.controls.value;\n\n                <label [for]=\"consumptionId\">{{ t('MEASURE') }}</label>\n                <div\n                    class=\"field\"\n                    [formGroup]=\"measureFormGroup\"\n                >\n                    <cui-input-number\n                        [cuiTextFieldId]=\"consumptionId\"\n                        cuiTextFieldPlaceholder=\"0\"\n                        formControlName=\"value\"\n                        [precision]=\"3\"\n                        [cuiTextFieldIsError]=\"!!consumption.errors && consumption.dirty\"\n                        class=\"input\"\n                    />\n\n                    <cui-select\n                        [options]=\"consumptionOptions()\"\n                        [class.options--error]=\"hasFormError()\"\n                        formControlName=\"unit\"\n                        class=\"options\"\n                    />\n                </div>\n                <cui-general-control-error-hint\n                    [control]=\"consumption\"\n                    [isVisible]=\"!!consumption.errors && consumption.dirty\"\n                />\n            </div>\n        </div>\n    </form>\n}\n", styles: [":host{padding-top:6px;padding-bottom:6px;display:block}.title{font-weight:400;font-size:14px;line-height:20px;min-width:80px;align-self:center}.input{padding-right:84px;width:240px}.options{position:absolute;inset:1px 1px 1px auto;min-width:90px}.options ::ng-deep .c-button{border:0;height:100%}.options--error{inset:1px 20px 1px auto}.wrapper-input{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}.form{display:flex;gap:8px;flex-wrap:wrap}.form__input{display:flex;flex-direction:column;gap:4px}.form__input cui-general-control-error-hint{display:block;min-height:20px}.field{display:flex;gap:4px;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CuiAccordionModule }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "ngmodule", type: CuiContextMenuModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.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: CuiTextFieldIdDirective, selector: "[cuiTextFieldId]", inputs: ["cuiTextFieldId"] }, { kind: "directive", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "directive", type: CuiTextFieldIsErrorDirective, selector: "[cuiTextFieldIsError]", inputs: ["cuiTextFieldIsError"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "ngmodule", type: CuiFormFieldModule }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "ngmodule", type: CuiSelectModule }, { kind: "component", type: CuiSelectComponent, selector: "cui-select[options]", inputs: ["options", "defaultOptionText"] }, { kind: "component", type: ConsumableFormItemReadonlyComponent, selector: "cui-consumable-form-item-readonly", inputs: ["title", "consumable"] }, { 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.14", type: ConsumableFormItemComponent, isStandalone: true, selector: "cc-consumable-form-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, consumptionOptions: { classPropertyName: "consumptionOptions", publicName: "consumptionOptions", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { consumableChanged: "consumableChanged" }, ngImport: i0, template: "@let formData = form();\n\n@if (readonly()) {\n    <cui-consumable-form-item-readonly\n        [title]=\"title()\"\n        [consumable]=\"consumable()\"\n    />\n} @else {\n    <form\n        [formGroup]=\"formData\"\n        *transloco=\"let t\"\n        class=\"form\"\n    >\n        <span class=\"title\">{{ title() }}</span>\n\n        <div class=\"wrapper-input\">\n            <div class=\"form__input\">\n                @let quantity = formData.controls.quantity;\n\n                <label [for]=\"consumptionId\">{{ t('AMOUNT') }}</label>\n                <div class=\"field\">\n                    <cui-input-number\n                        [cuiTextFieldId]=\"quantityId\"\n                        cuiTextFieldPlaceholder=\"0\"\n                        formControlName=\"quantity\"\n                        [cuiTextFieldIsError]=\"!!quantity.errors && quantity.dirty\"\n                        class=\"input\"\n                    />\n\n                    <cui-select\n                        [options]=\"piecesOptions()\"\n                        [class.options--error]=\"hasFormError()\"\n                        formControlName=\"unit\"\n                        class=\"options\"\n                    />\n                </div>\n                <cui-general-control-error-hint\n                    [control]=\"quantity\"\n                    [isVisible]=\"!!quantity.errors && quantity.dirty\"\n                />\n            </div>\n\n            <div class=\"form__input\">\n                @let measureFormGroup = formData.controls.measure;\n                @let consumption = measureFormGroup.controls.value;\n\n                <label [for]=\"consumptionId\">{{ t('MEASURE') }}</label>\n                <div\n                    class=\"field\"\n                    [formGroup]=\"measureFormGroup\"\n                >\n                    <cui-input-number\n                        [cuiTextFieldId]=\"consumptionId\"\n                        cuiTextFieldPlaceholder=\"0\"\n                        formControlName=\"value\"\n                        [precision]=\"3\"\n                        [cuiTextFieldIsError]=\"!!consumption.errors && consumption.dirty\"\n                        class=\"input\"\n                    />\n\n                    <cui-select\n                        [options]=\"consumptionOptions()\"\n                        [class.options--error]=\"hasFormError()\"\n                        formControlName=\"unit\"\n                        class=\"options\"\n                    />\n                </div>\n                <cui-general-control-error-hint\n                    [control]=\"consumption\"\n                    [isVisible]=\"!!consumption.errors && consumption.dirty\"\n                />\n            </div>\n        </div>\n    </form>\n}\n", styles: [":host{padding-top:6px;padding-bottom:6px;display:block}.title{font-weight:400;font-size:14px;line-height:20px;min-width:80px;align-self:center}.input{padding-right:84px;width:240px}.options{position:absolute;inset:1px 1px 1px auto;min-width:90px}.options ::ng-deep .c-button{border:0;height:100%}.options--error{inset:1px 20px 1px auto}.wrapper-input{display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}.form{display:flex;flex-direction:row;gap:8px;flex-wrap:wrap}.form__input{display:flex;flex-direction:column;gap:4px}.form__input cui-general-control-error-hint{display:block;min-height:20px}.field{display:flex;flex-direction:row;gap:4px;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CuiAccordionModule }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "ngmodule", type: CuiContextMenuModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.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: CuiTextFieldIdDirective, selector: "[cuiTextFieldId]", inputs: ["cuiTextFieldId"] }, { kind: "directive", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "directive", type: CuiTextFieldIsErrorDirective, selector: "[cuiTextFieldIsError]", inputs: ["cuiTextFieldIsError"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "ngmodule", type: CuiFormFieldModule }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "ngmodule", type: CuiSelectModule }, { kind: "component", type: CuiSelectComponent, selector: "cui-select[options]", inputs: ["options", "defaultOptionText"] }, { kind: "component", type: ConsumableFormItemReadonlyComponent, selector: "cui-consumable-form-item-readonly", inputs: ["title", "consumable"] }, { 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.14", ngImport: i0, type: ConsumableFormItemComponent, decorators: [{
             type: Component,
@@ -11042,7 +11033,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         CuiSelectModule,
                         ConsumableFormItemReadonlyComponent,
                         CuiGeneralControlErrorHintComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@let formData = form();\n\n@if (readonly()) {\n    <cui-consumable-form-item-readonly\n        [title]=\"title()\"\n        [consumable]=\"consumable()\"\n    />\n} @else {\n    <form\n        [formGroup]=\"formData\"\n        *transloco=\"let t\"\n        class=\"form\"\n    >\n        <span class=\"title\">{{ title() }}</span>\n\n        <div class=\"wrapper-input\">\n            <div class=\"form__input\">\n                @let quantity = formData.controls.quantity;\n\n                <label [for]=\"consumptionId\">{{ t('AMOUNT') }}</label>\n                <div class=\"field\">\n                    <cui-input-number\n                        [cuiTextFieldId]=\"quantityId\"\n                        cuiTextFieldPlaceholder=\"0\"\n                        formControlName=\"quantity\"\n                        [cuiTextFieldIsError]=\"!!quantity.errors && quantity.dirty\"\n                        class=\"input\"\n                    />\n\n                    <cui-select\n                        [options]=\"piecesOptions()\"\n                        [class.options--error]=\"hasFormError()\"\n                        formControlName=\"unit\"\n                        class=\"options\"\n                    />\n                </div>\n                <cui-general-control-error-hint\n                    [control]=\"quantity\"\n                    [isVisible]=\"!!quantity.errors && quantity.dirty\"\n                />\n            </div>\n\n            <div class=\"form__input\">\n                @let measureFormGroup = formData.controls.measure;\n                @let consumption = measureFormGroup.controls.value;\n\n                <label [for]=\"consumptionId\">{{ t('MEASURE') }}</label>\n                <div\n                    class=\"field\"\n                    [formGroup]=\"measureFormGroup\"\n                >\n                    <cui-input-number\n                        [cuiTextFieldId]=\"consumptionId\"\n                        cuiTextFieldPlaceholder=\"0\"\n                        formControlName=\"value\"\n                        [precision]=\"3\"\n                        [cuiTextFieldIsError]=\"!!consumption.errors && consumption.dirty\"\n                        class=\"input\"\n                    />\n\n                    <cui-select\n                        [options]=\"consumptionOptions()\"\n                        [class.options--error]=\"hasFormError()\"\n                        formControlName=\"unit\"\n                        class=\"options\"\n                    />\n                </div>\n                <cui-general-control-error-hint\n                    [control]=\"consumption\"\n                    [isVisible]=\"!!consumption.errors && consumption.dirty\"\n                />\n            </div>\n        </div>\n    </form>\n}\n", styles: [":host{padding-top:6px;padding-bottom:6px;display:block}.title{font-weight:400;font-size:14px;line-height:20px;min-width:80px;align-self:center}.input{padding-right:84px;width:240px}.options{position:absolute;inset:1px 1px 1px auto;min-width:90px}.options ::ng-deep .c-button{border:0;height:100%}.options--error{inset:1px 20px 1px auto}.wrapper-input{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}.form{display:flex;gap:8px;flex-wrap:wrap}.form__input{display:flex;flex-direction:column;gap:4px}.form__input cui-general-control-error-hint{display:block;min-height:20px}.field{display:flex;gap:4px;position:relative}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@let formData = form();\n\n@if (readonly()) {\n    <cui-consumable-form-item-readonly\n        [title]=\"title()\"\n        [consumable]=\"consumable()\"\n    />\n} @else {\n    <form\n        [formGroup]=\"formData\"\n        *transloco=\"let t\"\n        class=\"form\"\n    >\n        <span class=\"title\">{{ title() }}</span>\n\n        <div class=\"wrapper-input\">\n            <div class=\"form__input\">\n                @let quantity = formData.controls.quantity;\n\n                <label [for]=\"consumptionId\">{{ t('AMOUNT') }}</label>\n                <div class=\"field\">\n                    <cui-input-number\n                        [cuiTextFieldId]=\"quantityId\"\n                        cuiTextFieldPlaceholder=\"0\"\n                        formControlName=\"quantity\"\n                        [cuiTextFieldIsError]=\"!!quantity.errors && quantity.dirty\"\n                        class=\"input\"\n                    />\n\n                    <cui-select\n                        [options]=\"piecesOptions()\"\n                        [class.options--error]=\"hasFormError()\"\n                        formControlName=\"unit\"\n                        class=\"options\"\n                    />\n                </div>\n                <cui-general-control-error-hint\n                    [control]=\"quantity\"\n                    [isVisible]=\"!!quantity.errors && quantity.dirty\"\n                />\n            </div>\n\n            <div class=\"form__input\">\n                @let measureFormGroup = formData.controls.measure;\n                @let consumption = measureFormGroup.controls.value;\n\n                <label [for]=\"consumptionId\">{{ t('MEASURE') }}</label>\n                <div\n                    class=\"field\"\n                    [formGroup]=\"measureFormGroup\"\n                >\n                    <cui-input-number\n                        [cuiTextFieldId]=\"consumptionId\"\n                        cuiTextFieldPlaceholder=\"0\"\n                        formControlName=\"value\"\n                        [precision]=\"3\"\n                        [cuiTextFieldIsError]=\"!!consumption.errors && consumption.dirty\"\n                        class=\"input\"\n                    />\n\n                    <cui-select\n                        [options]=\"consumptionOptions()\"\n                        [class.options--error]=\"hasFormError()\"\n                        formControlName=\"unit\"\n                        class=\"options\"\n                    />\n                </div>\n                <cui-general-control-error-hint\n                    [control]=\"consumption\"\n                    [isVisible]=\"!!consumption.errors && consumption.dirty\"\n                />\n            </div>\n        </div>\n    </form>\n}\n", styles: [":host{padding-top:6px;padding-bottom:6px;display:block}.title{font-weight:400;font-size:14px;line-height:20px;min-width:80px;align-self:center}.input{padding-right:84px;width:240px}.options{position:absolute;inset:1px 1px 1px auto;min-width:90px}.options ::ng-deep .c-button{border:0;height:100%}.options--error{inset:1px 20px 1px auto}.wrapper-input{display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}.form{display:flex;flex-direction:row;gap:8px;flex-wrap:wrap}.form__input{display:flex;flex-direction:column;gap:4px}.form__input cui-general-control-error-hint{display:block;min-height:20px}.field{display:flex;flex-direction:row;gap:4px;position:relative}\n"] }]
         }], ctorParameters: () => [] });
 class ToolFormComponent {
@@ -11115,7 +11106,7 @@ class ToolFormComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ToolFormComponent, isStandalone: true, selector: "cui-tool-form", inputs: { utilityId: { classPropertyName: "utilityId", publicName: "utilityId", isSignal: true, isRequired: true, transformFunction: null }, tool: { classPropertyName: "tool", publicName: "tool", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, resourceType: { classPropertyName: "resourceType", publicName: "resourceType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toolChanged: "toolChanged", toolDeleted: "toolDeleted" }, host: { properties: { "class._disabled": "isLoading() || tool().isDelete" } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    @let controlsData = controls();\n\n    @if (readonly()) {\n        <cc-tool-form-readonly [tool]=\"tool()\" />\n    } @else if (controlsData) {\n        <td class=\"cc-table__td info custom\">\n            {{ tool().name }}\n\n            @if (tool().isDelete) {\n                <cui-badge\n                    class=\"badge\"\n                    [size]=\"'sm'\"\n                    color=\"red\"\n                >\n                    {{ t('DELETED') }}\n                </cui-badge>\n            }\n        </td>\n        <td class=\"cc-table__td custom\">\n            <cui-input-number\n                type=\"text\"\n                [formControl]=\"controlsData.quantity\"\n                [cuiTextFieldIsError]=\"!!controlsData.quantity.errors && controlsData.quantity.dirty\"\n            />\n            <cui-general-control-error-hint\n                [control]=\"controlsData.quantity\"\n                [isVisible]=\"!!controlsData.quantity.errors && controlsData.quantity.dirty\"\n            />\n        </td>\n        <td class=\"cc-table__td custom\">\n            <cui-select\n                [formControl]=\"controlsData.unit\"\n                [options]=\"toolboxOptions()\"\n            />\n        </td>\n        <td class=\"cc-table__td button custom\">\n            <button\n                type=\"button\"\n                cuiButton\n                icon=\"cuiIconTrash\"\n                size=\"xxs\"\n                appearance=\"ghost\"\n                [isLoaderShown]=\"isLoading()\"\n                (click)=\"onDeleteToolbox()\"\n            ></button>\n        </td>\n    }\n</ng-container>\n", styles: [":host{display:contents}:host._disabled .custom{pointer-events:none;opacity:.7}:host._disabled .button{opacity:1;pointer-events:all}.info{display:flex}.badge{margin-left:auto}.custom{padding-right:4px;padding-left:4px}.readonly{min-height:36px}\n"], dependencies: [{ kind: "component", type: ToolFormReadonlyComponent, selector: "cc-tool-form-readonly", inputs: ["tool"] }, { kind: "ngmodule", type: CuiSelectModule }, { kind: "component", type: CuiSelectComponent, selector: "cui-select[options]", inputs: ["options", "defaultOptionText"] }, { kind: "directive", type: CuiTextFieldIsErrorDirective, selector: "[cuiTextFieldIsError]", inputs: ["cuiTextFieldIsError"] }, { 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: "ngmodule", type: CuiBadgeModule }, { kind: "component", type: CuiBadgeComponent, selector: "cui-badge", inputs: ["color", "size", "isWithDot"] }, { 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: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "theme", "size"] }, { 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.14", type: ToolFormComponent, isStandalone: true, selector: "cui-tool-form", inputs: { utilityId: { classPropertyName: "utilityId", publicName: "utilityId", isSignal: true, isRequired: true, transformFunction: null }, tool: { classPropertyName: "tool", publicName: "tool", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, resourceType: { classPropertyName: "resourceType", publicName: "resourceType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toolChanged: "toolChanged", toolDeleted: "toolDeleted" }, host: { properties: { "class._disabled": "isLoading() || tool().isDelete" } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    @let controlsData = controls();\n\n    @if (readonly()) {\n        <cc-tool-form-readonly [tool]=\"tool()\" />\n    } @else if (controlsData) {\n        <td class=\"cc-table__td info custom\">\n            {{ tool().name }}\n\n            @if (tool().isDelete) {\n                <cui-badge\n                    class=\"badge\"\n                    [size]=\"'sm'\"\n                    color=\"red\"\n                >\n                    {{ t('DELETED') }}\n                </cui-badge>\n            }\n        </td>\n        <td class=\"cc-table__td custom\">\n            <cui-input-number\n                type=\"text\"\n                [formControl]=\"controlsData.quantity\"\n                [cuiTextFieldIsError]=\"!!controlsData.quantity.errors && controlsData.quantity.dirty\"\n            />\n            <cui-general-control-error-hint\n                [control]=\"controlsData.quantity\"\n                [isVisible]=\"!!controlsData.quantity.errors && controlsData.quantity.dirty\"\n            />\n        </td>\n        <td class=\"cc-table__td custom\">\n            <cui-select\n                [formControl]=\"controlsData.unit\"\n                [options]=\"toolboxOptions()\"\n            />\n        </td>\n        <td class=\"cc-table__td button custom\">\n            <button\n                type=\"button\"\n                cuiButton\n                icon=\"cuiIconTrash\"\n                size=\"xxs\"\n                appearance=\"ghost\"\n                [isLoaderShown]=\"isLoading()\"\n                (click)=\"onDeleteToolbox()\"\n            ></button>\n        </td>\n    }\n</ng-container>\n", styles: [":host{display:contents}:host._disabled .custom{pointer-events:none;opacity:.7}:host._disabled .button{opacity:1;pointer-events:all}.info{display:flex;flex-direction:row;gap:0}.badge{margin-left:auto}.custom{padding-right:4px;padding-left:4px}.readonly{min-height:36px}\n"], dependencies: [{ kind: "component", type: ToolFormReadonlyComponent, selector: "cc-tool-form-readonly", inputs: ["tool"] }, { kind: "ngmodule", type: CuiSelectModule }, { kind: "component", type: CuiSelectComponent, selector: "cui-select[options]", inputs: ["options", "defaultOptionText"] }, { kind: "directive", type: CuiTextFieldIsErrorDirective, selector: "[cuiTextFieldIsError]", inputs: ["cuiTextFieldIsError"] }, { 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: "ngmodule", type: CuiBadgeModule }, { kind: "component", type: CuiBadgeComponent, selector: "cui-badge", inputs: ["color", "size", "isWithDot"] }, { 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: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "theme", "size"] }, { 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.14", ngImport: i0, type: ToolFormComponent, decorators: [{
             type: Component,
@@ -11130,7 +11121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         CuiGeneralControlErrorHintComponent
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class._disabled]': 'isLoading() || tool().isDelete'
-                    }, standalone: true, template: "<ng-container *transloco=\"let t\">\n    @let controlsData = controls();\n\n    @if (readonly()) {\n        <cc-tool-form-readonly [tool]=\"tool()\" />\n    } @else if (controlsData) {\n        <td class=\"cc-table__td info custom\">\n            {{ tool().name }}\n\n            @if (tool().isDelete) {\n                <cui-badge\n                    class=\"badge\"\n                    [size]=\"'sm'\"\n                    color=\"red\"\n                >\n                    {{ t('DELETED') }}\n                </cui-badge>\n            }\n        </td>\n        <td class=\"cc-table__td custom\">\n            <cui-input-number\n                type=\"text\"\n                [formControl]=\"controlsData.quantity\"\n                [cuiTextFieldIsError]=\"!!controlsData.quantity.errors && controlsData.quantity.dirty\"\n            />\n            <cui-general-control-error-hint\n                [control]=\"controlsData.quantity\"\n                [isVisible]=\"!!controlsData.quantity.errors && controlsData.quantity.dirty\"\n            />\n        </td>\n        <td class=\"cc-table__td custom\">\n            <cui-select\n                [formControl]=\"controlsData.unit\"\n                [options]=\"toolboxOptions()\"\n            />\n        </td>\n        <td class=\"cc-table__td button custom\">\n            <button\n                type=\"button\"\n                cuiButton\n                icon=\"cuiIconTrash\"\n                size=\"xxs\"\n                appearance=\"ghost\"\n                [isLoaderShown]=\"isLoading()\"\n                (click)=\"onDeleteToolbox()\"\n            ></button>\n        </td>\n    }\n</ng-container>\n", styles: [":host{display:contents}:host._disabled .custom{pointer-events:none;opacity:.7}:host._disabled .button{opacity:1;pointer-events:all}.info{display:flex}.badge{margin-left:auto}.custom{padding-right:4px;padding-left:4px}.readonly{min-height:36px}\n"] }]
+                    }, standalone: true, template: "<ng-container *transloco=\"let t\">\n    @let controlsData = controls();\n\n    @if (readonly()) {\n        <cc-tool-form-readonly [tool]=\"tool()\" />\n    } @else if (controlsData) {\n        <td class=\"cc-table__td info custom\">\n            {{ tool().name }}\n\n            @if (tool().isDelete) {\n                <cui-badge\n                    class=\"badge\"\n                    [size]=\"'sm'\"\n                    color=\"red\"\n                >\n                    {{ t('DELETED') }}\n                </cui-badge>\n            }\n        </td>\n        <td class=\"cc-table__td custom\">\n            <cui-input-number\n                type=\"text\"\n                [formControl]=\"controlsData.quantity\"\n                [cuiTextFieldIsError]=\"!!controlsData.quantity.errors && controlsData.quantity.dirty\"\n            />\n            <cui-general-control-error-hint\n                [control]=\"controlsData.quantity\"\n                [isVisible]=\"!!controlsData.quantity.errors && controlsData.quantity.dirty\"\n            />\n        </td>\n        <td class=\"cc-table__td custom\">\n            <cui-select\n                [formControl]=\"controlsData.unit\"\n                [options]=\"toolboxOptions()\"\n            />\n        </td>\n        <td class=\"cc-table__td button custom\">\n            <button\n                type=\"button\"\n                cuiButton\n                icon=\"cuiIconTrash\"\n                size=\"xxs\"\n                appearance=\"ghost\"\n                [isLoaderShown]=\"isLoading()\"\n                (click)=\"onDeleteToolbox()\"\n            ></button>\n        </td>\n    }\n</ng-container>\n", styles: [":host{display:contents}:host._disabled .custom{pointer-events:none;opacity:.7}:host._disabled .button{opacity:1;pointer-events:all}.info{display:flex;flex-direction:row;gap:0}.badge{margin-left:auto}.custom{padding-right:4px;padding-left:4px}.readonly{min-height:36px}\n"] }]
         }], ctorParameters: () => [] });
 class ResourcesBlockPartComponent {
@@ -11329,7 +11320,7 @@ class ConsumableFormComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConsumableFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ConsumableFormComponent, isStandalone: true, selector: "cui-consumable-form", inputs: { utilityId: { classPropertyName: "utilityId", publicName: "utilityId", isSignal: true, isRequired: true, transformFunction: null }, consumable: { classPropertyName: "consumable", publicName: "consumable", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { consumableChanged: "consumableChanged", consumableDeleted: "consumableDeleted" }, ngImport: i0, template: "<cui-accordion-item\n    *transloco=\"let t\"\n    class=\"accordion\"\n>\n    <div class=\"header\">\n        {{ consumable().name }}\n\n        @if (!readonly()) {\n            <cui-options-button [options]=\"CONSUMABLE_OPTIONS\" />\n        }\n    </div>\n\n    <div\n        cuiAccordionItemContent\n        class=\"content\"\n    >\n        <div class=\"info\">\n            <div class=\"title\">{{ t('SEASON_CONSUMPTION') }}</div>\n\n            @if (allSeasonForm() && consumptionOptions().length) {\n                <cc-consumable-form-item\n                    title=\"{{ t('ALL_SEASON') }}:\"\n                    [consumptionOptions]=\"consumptionOptions()\"\n                    [form]=\"allSeasonForm()!\"\n                    [readonly]=\"readonly()\"\n                    (consumableChanged)=\"onConsumableChanged()\"\n                />\n            }\n        </div>\n\n        <div>\n            @for (season of seasonForms(); track season) {\n                <div class=\"season\">\n                    @if (consumptionOptions().length) {\n                        <cc-consumable-form-item\n                            title=\"{{ t(season.type) }}:\"\n                            [consumptionOptions]=\"consumptionOptions()\"\n                            [form]=\"season.form\"\n                            [readonly]=\"readonly()\"\n                            (consumableChanged)=\"onConsumableChanged()\"\n                        />\n                    }\n\n                    @if (!readonly()) {\n                        <div class=\"container-trash\">\n                            <button\n                                type=\"button\"\n                                cuiButton\n                                size=\"xxs\"\n                                appearance=\"ghost\"\n                                icon=\"cuiIconTrash\"\n                                (click)=\"onRemoveSeason(season.type)\"\n                            ></button>\n                        </div>\n                    }\n                </div>\n            }\n        </div>\n        @if (!readonly()) {\n            <button\n                #seasonButton=\"elementRef\"\n                cuiButton\n                cuiElement\n                type=\"button\"\n                appearance=\"flat\"\n                size=\"xxs\"\n                icon=\"cuiIconPlus\"\n                [disabled]=\"!availableSeasons().length\"\n                class=\"add-button\"\n            >\n                {{ t('ADD_SEASON') }}\n            </button>\n            <cui-context-menu\n                [items]=\"SEASON_OPTIONS()\"\n                [target]=\"seasonButton.nativeElement\"\n            />\n        }\n    </div>\n</cui-accordion-item>\n", styles: [":host{display:flex;width:100%}.info{display:flex;flex-direction:column;gap:8px;padding-bottom:8px}.accordion{display:flex;flex-direction:column;gap:16px;padding-top:8px;padding-bottom:8px;flex-grow:1;border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}.season{display:flex;gap:8px;align-items:center;padding:16px;border:solid 1px var(--cui-base-200);border-radius:8px}.header{display:flex;justify-content:space-between;align-items:center}.title{font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-500);text-transform:uppercase}.content{display:flex;flex-direction:column;gap:4px}.container-trash{display:flex;align-items:center;justify-content:center}.add-button{align-self:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CuiAccordionModule }, { kind: "component", type: CuiAccordionItemComponent, selector: "cui-accordion-item", inputs: ["isOpen", "appearance"], outputs: ["isOpenChange"] }, { 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: ReactiveFormsModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: OptionsButtonComponent, selector: "cui-options-button", inputs: ["options", "hoverBackgroundColor"] }, { kind: "ngmodule", type: CuiInputNumberModule }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "ngmodule", type: CuiFormFieldModule }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "component", type: ConsumableFormItemComponent, selector: "cc-consumable-form-item", inputs: ["title", "consumptionOptions", "form", "readonly"], outputs: ["consumableChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ConsumableFormComponent, isStandalone: true, selector: "cui-consumable-form", inputs: { utilityId: { classPropertyName: "utilityId", publicName: "utilityId", isSignal: true, isRequired: true, transformFunction: null }, consumable: { classPropertyName: "consumable", publicName: "consumable", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { consumableChanged: "consumableChanged", consumableDeleted: "consumableDeleted" }, ngImport: i0, template: "<cui-accordion-item\n    *transloco=\"let t\"\n    class=\"accordion\"\n>\n    <div class=\"header\">\n        {{ consumable().name }}\n\n        @if (!readonly()) {\n            <cui-options-button [options]=\"CONSUMABLE_OPTIONS\" />\n        }\n    </div>\n\n    <div\n        cuiAccordionItemContent\n        class=\"content\"\n    >\n        <div class=\"info\">\n            <div class=\"title\">{{ t('SEASON_CONSUMPTION') }}</div>\n\n            @if (allSeasonForm() && consumptionOptions().length) {\n                <cc-consumable-form-item\n                    title=\"{{ t('ALL_SEASON') }}:\"\n                    [consumptionOptions]=\"consumptionOptions()\"\n                    [form]=\"allSeasonForm()!\"\n                    [readonly]=\"readonly()\"\n                    (consumableChanged)=\"onConsumableChanged()\"\n                />\n            }\n        </div>\n\n        <div>\n            @for (season of seasonForms(); track season) {\n                <div class=\"season\">\n                    @if (consumptionOptions().length) {\n                        <cc-consumable-form-item\n                            title=\"{{ t(season.type) }}:\"\n                            [consumptionOptions]=\"consumptionOptions()\"\n                            [form]=\"season.form\"\n                            [readonly]=\"readonly()\"\n                            (consumableChanged)=\"onConsumableChanged()\"\n                        />\n                    }\n\n                    @if (!readonly()) {\n                        <div class=\"container-trash\">\n                            <button\n                                type=\"button\"\n                                cuiButton\n                                size=\"xxs\"\n                                appearance=\"ghost\"\n                                icon=\"cuiIconTrash\"\n                                (click)=\"onRemoveSeason(season.type)\"\n                            ></button>\n                        </div>\n                    }\n                </div>\n            }\n        </div>\n        @if (!readonly()) {\n            <button\n                #seasonButton=\"elementRef\"\n                cuiButton\n                cuiElement\n                type=\"button\"\n                appearance=\"flat\"\n                size=\"xxs\"\n                icon=\"cuiIconPlus\"\n                [disabled]=\"!availableSeasons().length\"\n                class=\"add-button\"\n            >\n                {{ t('ADD_SEASON') }}\n            </button>\n            <cui-context-menu\n                [items]=\"SEASON_OPTIONS()\"\n                [target]=\"seasonButton.nativeElement\"\n            />\n        }\n    </div>\n</cui-accordion-item>\n", styles: [":host{display:flex;flex-direction:row;gap:0;width:100%}.info{display:flex;flex-direction:column;gap:8px;padding-bottom:8px}.accordion{display:flex;flex-direction:column;gap:16px;padding-top:8px;padding-bottom:8px;flex-grow:1;border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}.season{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:flex-start;padding:16px;border:solid 1px var(--cui-base-200);border-radius:8px}.header{display:flex;flex-direction:row;gap:0;justify-content:space-between;align-items:center}.title{font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-500);text-transform:uppercase}.content{display:flex;flex-direction:column;gap:4px}.container-trash{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:center}.add-button{align-self:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CuiAccordionModule }, { kind: "component", type: CuiAccordionItemComponent, selector: "cui-accordion-item", inputs: ["isOpen", "appearance"], outputs: ["isOpenChange"] }, { 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: ReactiveFormsModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: OptionsButtonComponent, selector: "cui-options-button", inputs: ["options", "hoverBackgroundColor"] }, { kind: "ngmodule", type: CuiInputNumberModule }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "ngmodule", type: CuiFormFieldModule }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "component", type: ConsumableFormItemComponent, selector: "cc-consumable-form-item", inputs: ["title", "consumptionOptions", "form", "readonly"], outputs: ["consumableChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConsumableFormComponent, decorators: [{
             type: Component,
@@ -11348,7 +11339,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ConsumableFormItemComponent,
                         ConsumableFormItemComponent,
                         ConsumableFormItemComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<cui-accordion-item\n    *transloco=\"let t\"\n    class=\"accordion\"\n>\n    <div class=\"header\">\n        {{ consumable().name }}\n\n        @if (!readonly()) {\n            <cui-options-button [options]=\"CONSUMABLE_OPTIONS\" />\n        }\n    </div>\n\n    <div\n        cuiAccordionItemContent\n        class=\"content\"\n    >\n        <div class=\"info\">\n            <div class=\"title\">{{ t('SEASON_CONSUMPTION') }}</div>\n\n            @if (allSeasonForm() && consumptionOptions().length) {\n                <cc-consumable-form-item\n                    title=\"{{ t('ALL_SEASON') }}:\"\n                    [consumptionOptions]=\"consumptionOptions()\"\n                    [form]=\"allSeasonForm()!\"\n                    [readonly]=\"readonly()\"\n                    (consumableChanged)=\"onConsumableChanged()\"\n                />\n            }\n        </div>\n\n        <div>\n            @for (season of seasonForms(); track season) {\n                <div class=\"season\">\n                    @if (consumptionOptions().length) {\n                        <cc-consumable-form-item\n                            title=\"{{ t(season.type) }}:\"\n                            [consumptionOptions]=\"consumptionOptions()\"\n                            [form]=\"season.form\"\n                            [readonly]=\"readonly()\"\n                            (consumableChanged)=\"onConsumableChanged()\"\n                        />\n                    }\n\n                    @if (!readonly()) {\n                        <div class=\"container-trash\">\n                            <button\n                                type=\"button\"\n                                cuiButton\n                                size=\"xxs\"\n                                appearance=\"ghost\"\n                                icon=\"cuiIconTrash\"\n                                (click)=\"onRemoveSeason(season.type)\"\n                            ></button>\n                        </div>\n                    }\n                </div>\n            }\n        </div>\n        @if (!readonly()) {\n            <button\n                #seasonButton=\"elementRef\"\n                cuiButton\n                cuiElement\n                type=\"button\"\n                appearance=\"flat\"\n                size=\"xxs\"\n                icon=\"cuiIconPlus\"\n                [disabled]=\"!availableSeasons().length\"\n                class=\"add-button\"\n            >\n                {{ t('ADD_SEASON') }}\n            </button>\n            <cui-context-menu\n                [items]=\"SEASON_OPTIONS()\"\n                [target]=\"seasonButton.nativeElement\"\n            />\n        }\n    </div>\n</cui-accordion-item>\n", styles: [":host{display:flex;width:100%}.info{display:flex;flex-direction:column;gap:8px;padding-bottom:8px}.accordion{display:flex;flex-direction:column;gap:16px;padding-top:8px;padding-bottom:8px;flex-grow:1;border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}.season{display:flex;gap:8px;align-items:center;padding:16px;border:solid 1px var(--cui-base-200);border-radius:8px}.header{display:flex;justify-content:space-between;align-items:center}.title{font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-500);text-transform:uppercase}.content{display:flex;flex-direction:column;gap:4px}.container-trash{display:flex;align-items:center;justify-content:center}.add-button{align-self:flex-start}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<cui-accordion-item\n    *transloco=\"let t\"\n    class=\"accordion\"\n>\n    <div class=\"header\">\n        {{ consumable().name }}\n\n        @if (!readonly()) {\n            <cui-options-button [options]=\"CONSUMABLE_OPTIONS\" />\n        }\n    </div>\n\n    <div\n        cuiAccordionItemContent\n        class=\"content\"\n    >\n        <div class=\"info\">\n            <div class=\"title\">{{ t('SEASON_CONSUMPTION') }}</div>\n\n            @if (allSeasonForm() && consumptionOptions().length) {\n                <cc-consumable-form-item\n                    title=\"{{ t('ALL_SEASON') }}:\"\n                    [consumptionOptions]=\"consumptionOptions()\"\n                    [form]=\"allSeasonForm()!\"\n                    [readonly]=\"readonly()\"\n                    (consumableChanged)=\"onConsumableChanged()\"\n                />\n            }\n        </div>\n\n        <div>\n            @for (season of seasonForms(); track season) {\n                <div class=\"season\">\n                    @if (consumptionOptions().length) {\n                        <cc-consumable-form-item\n                            title=\"{{ t(season.type) }}:\"\n                            [consumptionOptions]=\"consumptionOptions()\"\n                            [form]=\"season.form\"\n                            [readonly]=\"readonly()\"\n                            (consumableChanged)=\"onConsumableChanged()\"\n                        />\n                    }\n\n                    @if (!readonly()) {\n                        <div class=\"container-trash\">\n                            <button\n                                type=\"button\"\n                                cuiButton\n                                size=\"xxs\"\n                                appearance=\"ghost\"\n                                icon=\"cuiIconTrash\"\n                                (click)=\"onRemoveSeason(season.type)\"\n                            ></button>\n                        </div>\n                    }\n                </div>\n            }\n        </div>\n        @if (!readonly()) {\n            <button\n                #seasonButton=\"elementRef\"\n                cuiButton\n                cuiElement\n                type=\"button\"\n                appearance=\"flat\"\n                size=\"xxs\"\n                icon=\"cuiIconPlus\"\n                [disabled]=\"!availableSeasons().length\"\n                class=\"add-button\"\n            >\n                {{ t('ADD_SEASON') }}\n            </button>\n            <cui-context-menu\n                [items]=\"SEASON_OPTIONS()\"\n                [target]=\"seasonButton.nativeElement\"\n            />\n        }\n    </div>\n</cui-accordion-item>\n", styles: [":host{display:flex;flex-direction:row;gap:0;width:100%}.info{display:flex;flex-direction:column;gap:8px;padding-bottom:8px}.accordion{display:flex;flex-direction:column;gap:16px;padding-top:8px;padding-bottom:8px;flex-grow:1;border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}.season{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:flex-start;padding:16px;border:solid 1px var(--cui-base-200);border-radius:8px}.header{display:flex;flex-direction:row;gap:0;justify-content:space-between;align-items:center}.title{font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-500);text-transform:uppercase}.content{display:flex;flex-direction:column;gap:4px}.container-trash{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:center}.add-button{align-self:flex-start}\n"] }]
         }], ctorParameters: () => [] });
 class ResourcesBlockConsumablesComponent {
@@ -11468,7 +11459,7 @@ class ResourcesBlockContentComponent {
         this.subjectModalBase.addResource(this.utilityId());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ResourcesBlockContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ResourcesBlockContentComponent, isStandalone: true, selector: "cui-resources-block-content", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, utilityId: { classPropertyName: "utilityId", publicName: "utilityId", isSignal: true, isRequired: true, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resourcesAdded: "resourcesAdded" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    @if (!empty()) {\n        <ng-content />\n    } @else {\n        <cui-empty-state [subtitle]=\"t(emptyState())\" />\n    }\n\n    @if (!readonly()) {\n        <button\n            type=\"button\"\n            cuiButton\n            appearance=\"flat\"\n            size=\"xxs\"\n            icon=\"cuiIconPlus\"\n            (click)=\"onAddResource()\"\n        >\n            {{ t('ADD') }} {{ type() | titlecase }}\n        </button>\n    }\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;gap:8px;align-items:flex-start}\n"], dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiEmptyStateComponent, selector: "cui-empty-state, [cuiEmptyState]", inputs: ["title", "subtitle"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "theme", "size"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ResourcesBlockContentComponent, isStandalone: true, selector: "cui-resources-block-content", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, utilityId: { classPropertyName: "utilityId", publicName: "utilityId", isSignal: true, isRequired: true, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resourcesAdded: "resourcesAdded" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    @if (!empty()) {\n        <ng-content />\n    } @else {\n        <cui-empty-state [subtitle]=\"t(emptyState())\" />\n    }\n\n    @if (!readonly()) {\n        <button\n            type=\"button\"\n            cuiButton\n            appearance=\"flat\"\n            size=\"xxs\"\n            icon=\"cuiIconPlus\"\n            (click)=\"onAddResource()\"\n        >\n            {{ t('ADD') }} {{ type() | titlecase }}\n        </button>\n    }\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:flex-start}\n"], dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiEmptyStateComponent, selector: "cui-empty-state, [cuiEmptyState]", inputs: ["title", "subtitle"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "theme", "size"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ResourcesBlockContentComponent, decorators: [{
             type: Component,
@@ -11479,7 +11470,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         TitleCasePipe,
                         CuiButtonModule,
                         CuiEmptyStateComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<ng-container *transloco=\"let t\">\n    @if (!empty()) {\n        <ng-content />\n    } @else {\n        <cui-empty-state [subtitle]=\"t(emptyState())\" />\n    }\n\n    @if (!readonly()) {\n        <button\n            type=\"button\"\n            cuiButton\n            appearance=\"flat\"\n            size=\"xxs\"\n            icon=\"cuiIconPlus\"\n            (click)=\"onAddResource()\"\n        >\n            {{ t('ADD') }} {{ type() | titlecase }}\n        </button>\n    }\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;gap:8px;align-items:flex-start}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<ng-container *transloco=\"let t\">\n    @if (!empty()) {\n        <ng-content />\n    } @else {\n        <cui-empty-state [subtitle]=\"t(emptyState())\" />\n    }\n\n    @if (!readonly()) {\n        <button\n            type=\"button\"\n            cuiButton\n            appearance=\"flat\"\n            size=\"xxs\"\n            icon=\"cuiIconPlus\"\n            (click)=\"onAddResource()\"\n        >\n            {{ t('ADD') }} {{ type() | titlecase }}\n        </button>\n    }\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:flex-start}\n"] }]
         }] });
 let ResourcesBlockTabsComponent$1 = class ResourcesBlockTabsComponent {
@@ -11550,13 +11541,13 @@ class ResourcesOptionsComponent {
             .subscribe((resource) => this.resourceAdded.emit(resource));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ResourcesOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ResourcesOptionsComponent, isStandalone: true, selector: "cui-resources-options", inputs: { types: { classPropertyName: "types", publicName: "types", isSignal: true, isRequired: true, transformFunction: null }, utilityId: { classPropertyName: "utilityId", publicName: "utilityId", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resourceAdded: "resourceAdded" }, host: { properties: { "class._flat": "appearance() === 'flat'" } }, hostDirectives: [{ directive: i1$1.CuiClickOutsideDirective }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <div class=\"utility\">\n        <button\n            #actionButton=\"elementRef\"\n            cuiElement\n            cuiButton\n            type=\"button\"\n            [appearance]=\"appearance()\"\n            [isLoaderShown]=\"isLoading()\"\n            [disabled]=\"disabled()\"\n            size=\"xxs\"\n            icon=\"cuiIconPlus\"\n        >\n            @if (isWithTitle()) {\n                {{ t('ADD_UTILITY') }}\n            }\n        </button>\n\n        <cui-context-menu\n            [items]=\"options()\"\n            [target]=\"actionButton.nativeElement\"\n        />\n    </div>\n</ng-container>\n", styles: [":host{display:flex;align-items:center;justify-content:space-evenly;flex:1;overflow:scroll hidden;scrollbar-width:none;margin-bottom:-2px}:host._flat{padding:7px;border-radius:8px;border:1px dashed var(--cui-base-200)}\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: CuiContextMenuModule }, { kind: "component", type: CuiContextMenuComponent, selector: "cui-context-menu[items][target]", inputs: ["items", "target", "width", "withPaddings"] }, { 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.14", type: ResourcesOptionsComponent, isStandalone: true, selector: "cui-resources-options", inputs: { types: { classPropertyName: "types", publicName: "types", isSignal: true, isRequired: true, transformFunction: null }, utilityId: { classPropertyName: "utilityId", publicName: "utilityId", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resourceAdded: "resourceAdded" }, host: { properties: { "class._flat": "appearance() === 'flat'" } }, hostDirectives: [{ directive: i1$1.CuiClickOutsideDirective }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <div class=\"utility\">\n        <button\n            #actionButton=\"elementRef\"\n            cuiElement\n            cuiButton\n            type=\"button\"\n            [appearance]=\"appearance()\"\n            [isLoaderShown]=\"isLoading()\"\n            [disabled]=\"disabled()\"\n            size=\"xxs\"\n            icon=\"cuiIconPlus\"\n        >\n            @if (isWithTitle()) {\n                {{ t('ADD_UTILITY') }}\n            }\n        </button>\n\n        <cui-context-menu\n            [items]=\"options()\"\n            [target]=\"actionButton.nativeElement\"\n        />\n    </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:space-evenly;flex:1;overflow:scroll hidden;scrollbar-width:none;margin-bottom:-2px}:host._flat{padding:7px;border-radius:8px;border:1px dashed var(--cui-base-200)}\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: CuiContextMenuModule }, { kind: "component", type: CuiContextMenuComponent, selector: "cui-context-menu[items][target]", inputs: ["items", "target", "width", "withPaddings"] }, { 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.14", ngImport: i0, type: ResourcesOptionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cui-resources-options', imports: [CuiButtonModule, CuiElementDirective, CuiContextMenuModule, TranslocoDirective], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [CuiClickOutsideDirective], host: {
                         '[class._flat]': "appearance() === 'flat'"
-                    }, standalone: true, template: "<ng-container *transloco=\"let t\">\n    <div class=\"utility\">\n        <button\n            #actionButton=\"elementRef\"\n            cuiElement\n            cuiButton\n            type=\"button\"\n            [appearance]=\"appearance()\"\n            [isLoaderShown]=\"isLoading()\"\n            [disabled]=\"disabled()\"\n            size=\"xxs\"\n            icon=\"cuiIconPlus\"\n        >\n            @if (isWithTitle()) {\n                {{ t('ADD_UTILITY') }}\n            }\n        </button>\n\n        <cui-context-menu\n            [items]=\"options()\"\n            [target]=\"actionButton.nativeElement\"\n        />\n    </div>\n</ng-container>\n", styles: [":host{display:flex;align-items:center;justify-content:space-evenly;flex:1;overflow:scroll hidden;scrollbar-width:none;margin-bottom:-2px}:host._flat{padding:7px;border-radius:8px;border:1px dashed var(--cui-base-200)}\n"] }]
+                    }, standalone: true, template: "<ng-container *transloco=\"let t\">\n    <div class=\"utility\">\n        <button\n            #actionButton=\"elementRef\"\n            cuiElement\n            cuiButton\n            type=\"button\"\n            [appearance]=\"appearance()\"\n            [isLoaderShown]=\"isLoading()\"\n            [disabled]=\"disabled()\"\n            size=\"xxs\"\n            icon=\"cuiIconPlus\"\n        >\n            @if (isWithTitle()) {\n                {{ t('ADD_UTILITY') }}\n            }\n        </button>\n\n        <cui-context-menu\n            [items]=\"options()\"\n            [target]=\"actionButton.nativeElement\"\n        />\n    </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:space-evenly;flex:1;overflow:scroll hidden;scrollbar-width:none;margin-bottom:-2px}:host._flat{padding:7px;border-radius:8px;border:1px dashed var(--cui-base-200)}\n"] }]
         }] });
 class ResourcesBlockComponent {
@@ -11666,7 +11657,7 @@ class ResourcesBlockComponent {
         }))));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ResourcesBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ResourcesBlockComponent, isStandalone: true, selector: "cui-resources-block", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, resourceComponent: { classPropertyName: "resourceComponent", publicName: "resourceComponent", isSignal: true, isRequired: true, transformFunction: null }, utilityId: { classPropertyName: "utilityId", publicName: "utilityId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { resourceComponentDeleted: "resourceComponentDeleted" }, ngImport: i0, template: "@let structure = resourceComponent().structure;\n\n<cui-content-wrapper\n    class=\"custom-wrapper\"\n    *transloco=\"let t\"\n    backgroundColor=\"var(--cui-base-10)\"\n    [gap]=\"16\"\n>\n    <header\n        cuiContentHeader\n        [heading]=\"title()\"\n    >\n        <div class=\"content\">\n            @if (!structure.length) {\n                <cui-alert-hint\n                    status=\"warning\"\n                    [tooltipText]=\"t('NO_ENTITIES_ADDED')\"\n                />\n            }\n            <cui-options-button [options]=\"RESOURCES_COMPONENT_OPTIONS\" />\n        </div>\n    </header>\n\n    <cui-content-wrapper class=\"custom-wrapper\">\n        @if (structure.length) {\n            <cui-resources-block-tabs\n                [utilityId]=\"utilityId()\"\n                [buttonSlot]=\"buttonSlot\"\n                [resourceComponent]=\"resourceComponent()\"\n                [selectedIndex]=\"currentTabIndex()\"\n                (selectedIndexChange)=\"currentTabIndex.set($event)\"\n                (resourceAdded)=\"onResourcesAdded($event.resources, $event.container)\"\n                (resourceDeleted)=\"onResourceStructureRemoved($event)\"\n            />\n        } @else {\n            <cui-resources-options\n                [utilityId]=\"utilityId()\"\n                [types]=\"availableTypes()\"\n                (resourceAdded)=\"onAddResourcesType($event)\"\n            />\n        }\n    </cui-content-wrapper>\n</cui-content-wrapper>\n\n<ng-template #buttonSlot>\n    <cui-resources-options\n        [utilityId]=\"utilityId()\"\n        [types]=\"availableTypes()\"\n        [disabled]=\"!availableTypes().length\"\n        appearance=\"ghost\"\n        (resourceAdded)=\"onAddResourcesType($event)\"\n    />\n</ng-template>\n", styles: [":host{display:flex;align-items:center;justify-content:space-evenly;flex:1;overflow:scroll hidden;scrollbar-width:none;margin-bottom:-2px}:host._flat{padding:7px;border-radius:8px;border:1px dashed var(--cui-base-200)}\n"], dependencies: [{ kind: "component", type: CuiContentWrapperComponent, selector: "cui-content-wrapper, [cuiContentWrapper]", inputs: ["backgroundColor", "gap"] }, { kind: "component", type: AlertHintComponent, selector: "cui-alert-hint", inputs: ["status", "tooltipText"] }, { kind: "component", type: OptionsButtonComponent, selector: "cui-options-button", inputs: ["options", "hoverBackgroundColor"] }, { kind: "component", type: ResourcesBlockTabsComponent, selector: "cui-resources-block-tabs", inputs: ["resourceComponent", "utilityId", "buttonSlot", "readonly", "selectedIndex"], outputs: ["resourceAdded", "resourceDeleted", "selectedIndexChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: ResourcesOptionsComponent, selector: "cui-resources-options", inputs: ["types", "utilityId", "appearance", "disabled"], outputs: ["resourceAdded"] }, { kind: "component", type: ContentHeaderComponent, selector: "header[cuiContentHeader]", inputs: ["heading", "subheading", "tooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ResourcesBlockComponent, isStandalone: true, selector: "cui-resources-block", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, resourceComponent: { classPropertyName: "resourceComponent", publicName: "resourceComponent", isSignal: true, isRequired: true, transformFunction: null }, utilityId: { classPropertyName: "utilityId", publicName: "utilityId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { resourceComponentDeleted: "resourceComponentDeleted" }, ngImport: i0, template: "@let structure = resourceComponent().structure;\n\n<cui-content-wrapper\n    class=\"custom-wrapper\"\n    *transloco=\"let t\"\n    backgroundColor=\"var(--cui-base-10)\"\n    [gap]=\"16\"\n>\n    <header\n        cuiContentHeader\n        [heading]=\"title()\"\n    >\n        <div class=\"content\">\n            @if (!structure.length) {\n                <cui-alert-hint\n                    status=\"warning\"\n                    [tooltipText]=\"t('NO_ENTITIES_ADDED')\"\n                />\n            }\n            <cui-options-button [options]=\"RESOURCES_COMPONENT_OPTIONS\" />\n        </div>\n    </header>\n\n    <cui-content-wrapper class=\"custom-wrapper\">\n        @if (structure.length) {\n            <cui-resources-block-tabs\n                [utilityId]=\"utilityId()\"\n                [buttonSlot]=\"buttonSlot\"\n                [resourceComponent]=\"resourceComponent()\"\n                [selectedIndex]=\"currentTabIndex()\"\n                (selectedIndexChange)=\"currentTabIndex.set($event)\"\n                (resourceAdded)=\"onResourcesAdded($event.resources, $event.container)\"\n                (resourceDeleted)=\"onResourceStructureRemoved($event)\"\n            />\n        } @else {\n            <cui-resources-options\n                [utilityId]=\"utilityId()\"\n                [types]=\"availableTypes()\"\n                (resourceAdded)=\"onAddResourcesType($event)\"\n            />\n        }\n    </cui-content-wrapper>\n</cui-content-wrapper>\n\n<ng-template #buttonSlot>\n    <cui-resources-options\n        [utilityId]=\"utilityId()\"\n        [types]=\"availableTypes()\"\n        [disabled]=\"!availableTypes().length\"\n        appearance=\"ghost\"\n        (resourceAdded)=\"onAddResourcesType($event)\"\n    />\n</ng-template>\n", styles: [":host{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:space-evenly;flex:1;overflow:scroll hidden;scrollbar-width:none;margin-bottom:-2px}:host._flat{padding:7px;border-radius:8px;border:1px dashed var(--cui-base-200)}\n"], dependencies: [{ kind: "component", type: CuiContentWrapperComponent, selector: "cui-content-wrapper, [cuiContentWrapper]", inputs: ["backgroundColor", "gap"] }, { kind: "component", type: AlertHintComponent, selector: "cui-alert-hint", inputs: ["status", "tooltipText"] }, { kind: "component", type: OptionsButtonComponent, selector: "cui-options-button", inputs: ["options", "hoverBackgroundColor"] }, { kind: "component", type: ResourcesBlockTabsComponent, selector: "cui-resources-block-tabs", inputs: ["resourceComponent", "utilityId", "buttonSlot", "readonly", "selectedIndex"], outputs: ["resourceAdded", "resourceDeleted", "selectedIndexChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: ResourcesOptionsComponent, selector: "cui-resources-options", inputs: ["types", "utilityId", "appearance", "disabled"], outputs: ["resourceAdded"] }, { kind: "component", type: ContentHeaderComponent, selector: "header[cuiContentHeader]", inputs: ["heading", "subheading", "tooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ResourcesBlockComponent, decorators: [{
             type: Component,
@@ -11678,7 +11669,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         TranslocoDirective,
                         ResourcesOptionsComponent,
                         ContentHeaderComponent
-                    ], template: "@let structure = resourceComponent().structure;\n\n<cui-content-wrapper\n    class=\"custom-wrapper\"\n    *transloco=\"let t\"\n    backgroundColor=\"var(--cui-base-10)\"\n    [gap]=\"16\"\n>\n    <header\n        cuiContentHeader\n        [heading]=\"title()\"\n    >\n        <div class=\"content\">\n            @if (!structure.length) {\n                <cui-alert-hint\n                    status=\"warning\"\n                    [tooltipText]=\"t('NO_ENTITIES_ADDED')\"\n                />\n            }\n            <cui-options-button [options]=\"RESOURCES_COMPONENT_OPTIONS\" />\n        </div>\n    </header>\n\n    <cui-content-wrapper class=\"custom-wrapper\">\n        @if (structure.length) {\n            <cui-resources-block-tabs\n                [utilityId]=\"utilityId()\"\n                [buttonSlot]=\"buttonSlot\"\n                [resourceComponent]=\"resourceComponent()\"\n                [selectedIndex]=\"currentTabIndex()\"\n                (selectedIndexChange)=\"currentTabIndex.set($event)\"\n                (resourceAdded)=\"onResourcesAdded($event.resources, $event.container)\"\n                (resourceDeleted)=\"onResourceStructureRemoved($event)\"\n            />\n        } @else {\n            <cui-resources-options\n                [utilityId]=\"utilityId()\"\n                [types]=\"availableTypes()\"\n                (resourceAdded)=\"onAddResourcesType($event)\"\n            />\n        }\n    </cui-content-wrapper>\n</cui-content-wrapper>\n\n<ng-template #buttonSlot>\n    <cui-resources-options\n        [utilityId]=\"utilityId()\"\n        [types]=\"availableTypes()\"\n        [disabled]=\"!availableTypes().length\"\n        appearance=\"ghost\"\n        (resourceAdded)=\"onAddResourcesType($event)\"\n    />\n</ng-template>\n", styles: [":host{display:flex;align-items:center;justify-content:space-evenly;flex:1;overflow:scroll hidden;scrollbar-width:none;margin-bottom:-2px}:host._flat{padding:7px;border-radius:8px;border:1px dashed var(--cui-base-200)}\n"] }]
+                    ], template: "@let structure = resourceComponent().structure;\n\n<cui-content-wrapper\n    class=\"custom-wrapper\"\n    *transloco=\"let t\"\n    backgroundColor=\"var(--cui-base-10)\"\n    [gap]=\"16\"\n>\n    <header\n        cuiContentHeader\n        [heading]=\"title()\"\n    >\n        <div class=\"content\">\n            @if (!structure.length) {\n                <cui-alert-hint\n                    status=\"warning\"\n                    [tooltipText]=\"t('NO_ENTITIES_ADDED')\"\n                />\n            }\n            <cui-options-button [options]=\"RESOURCES_COMPONENT_OPTIONS\" />\n        </div>\n    </header>\n\n    <cui-content-wrapper class=\"custom-wrapper\">\n        @if (structure.length) {\n            <cui-resources-block-tabs\n                [utilityId]=\"utilityId()\"\n                [buttonSlot]=\"buttonSlot\"\n                [resourceComponent]=\"resourceComponent()\"\n                [selectedIndex]=\"currentTabIndex()\"\n                (selectedIndexChange)=\"currentTabIndex.set($event)\"\n                (resourceAdded)=\"onResourcesAdded($event.resources, $event.container)\"\n                (resourceDeleted)=\"onResourceStructureRemoved($event)\"\n            />\n        } @else {\n            <cui-resources-options\n                [utilityId]=\"utilityId()\"\n                [types]=\"availableTypes()\"\n                (resourceAdded)=\"onAddResourcesType($event)\"\n            />\n        }\n    </cui-content-wrapper>\n</cui-content-wrapper>\n\n<ng-template #buttonSlot>\n    <cui-resources-options\n        [utilityId]=\"utilityId()\"\n        [types]=\"availableTypes()\"\n        [disabled]=\"!availableTypes().length\"\n        appearance=\"ghost\"\n        (resourceAdded)=\"onAddResourcesType($event)\"\n    />\n</ng-template>\n", styles: [":host{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:space-evenly;flex:1;overflow:scroll hidden;scrollbar-width:none;margin-bottom:-2px}:host._flat{padding:7px;border-radius:8px;border:1px dashed var(--cui-base-200)}\n"] }]
         }], ctorParameters: () => [] });
 const COMPONENTS_CONTENT = {
@@ -11791,11 +11782,11 @@ class ModalHeaderTabsComponent {
         this.selectedIndex = input(0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModalHeaderTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ModalHeaderTabsComponent, isStandalone: true, selector: "cui-modal-header-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <cui-tabs\n        class=\"tabs\"\n        [selectedIndex]=\"selectedIndex()\"\n        [headerSlot]=\"headerSlot\"\n    >\n        <ng-template\n            #headerSlot\n            let-buttons\n        >\n            <header class=\"header\">\n                <div\n                    #buttons\n                    class=\"buttons\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"buttons\" />\n                </div>\n            </header>\n        </ng-template>\n\n        @for (tab of tabs(); track tab) {\n            <cui-tab\n                [data]=\"tab\"\n                [buttonSlot]=\"cuiButtonSlot\"\n                [contentSlot]=\"cuiContentSlot\"\n                class=\"tab\"\n            >\n                <ng-template\n                    #cuiButtonSlot\n                    let-isActive=\"isActive\"\n                    let-element\n                >\n                    <div\n                        class=\"button\"\n                        [class.button_active]=\"isActive\"\n                    >\n                        {{ t(element.title) }}\n                    </div>\n                </ng-template>\n                <ng-template\n                    #cuiContentSlot\n                    let-element\n                >\n                    <div class=\"content\">\n                        <ng-container\n                            [ngComponentOutlet]=\"element.component\"\n                            [ngComponentOutletInputs]=\"element.inputs\"\n                        />\n                    </div>\n                </ng-template>\n            </cui-tab>\n        }\n    </cui-tabs>\n</ng-container>\n", styles: [":host{display:block;width:100%;height:calc(100% - 70px);padding-bottom:32px}.tabs{display:flex;flex-direction:column;height:100%}.tabs ::ng-deep cui-abstract-tabs{height:100%}.header{padding-bottom:8px;border-bottom:1px solid var(--cui-base-200)}.content{height:100%;overflow:auto}.buttons{padding-right:24px;padding-left:24px;display:flex;gap:8px;align-items:center;justify-content:space-evenly}.actions{padding-left:4px;border-left:1px solid var(--cui-base-200)}.button{padding:8px 12px;font-weight:500;font-size:14px;line-height:20px;color:var(--cui-base-500);border-radius:6px;flex:1}@media (hover: hover){.button:hover{color:var(--cui-base-900);background:var(--cui-base-50)}}.button:active{color:var(--cui-base-900);background:var(--cui-base-50)}.button_active{color:var(--cui-light-blue-600);background:var(--cui-base-50)}\n"], dependencies: [{ kind: "component", type: CuiTabsComponent, selector: "cui-tabs", inputs: ["headerSlot", "selectedIndex"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CuiTabDirective, selector: "cui-tab, [cuiTab]", inputs: ["buttonSlot", "contentSlot", "data"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ModalHeaderTabsComponent, isStandalone: true, selector: "cui-modal-header-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <cui-tabs\n        class=\"tabs\"\n        [selectedIndex]=\"selectedIndex()\"\n        [headerSlot]=\"headerSlot\"\n    >\n        <ng-template\n            #headerSlot\n            let-buttons\n        >\n            <header class=\"header\">\n                <div\n                    #buttons\n                    class=\"buttons\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"buttons\" />\n                </div>\n            </header>\n        </ng-template>\n\n        @for (tab of tabs(); track tab) {\n            <cui-tab\n                [data]=\"tab\"\n                [buttonSlot]=\"cuiButtonSlot\"\n                [contentSlot]=\"cuiContentSlot\"\n                class=\"tab\"\n            >\n                <ng-template\n                    #cuiButtonSlot\n                    let-isActive=\"isActive\"\n                    let-element\n                >\n                    <div\n                        class=\"button\"\n                        [class.button_active]=\"isActive\"\n                    >\n                        {{ t(element.title) }}\n                    </div>\n                </ng-template>\n                <ng-template\n                    #cuiContentSlot\n                    let-element\n                >\n                    <div class=\"content\">\n                        <ng-container\n                            [ngComponentOutlet]=\"element.component\"\n                            [ngComponentOutletInputs]=\"element.inputs\"\n                        />\n                    </div>\n                </ng-template>\n            </cui-tab>\n        }\n    </cui-tabs>\n</ng-container>\n", styles: [":host{display:block;width:100%;height:calc(100% - 70px);padding-bottom:32px}.tabs{display:flex;flex-direction:column;gap:0;height:100%}.tabs ::ng-deep cui-abstract-tabs{height:100%}.header{padding-bottom:8px;border-bottom:1px solid var(--cui-base-200)}.content{height:100%;overflow:auto}.buttons{padding-right:24px;padding-left:24px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:space-evenly}.actions{padding-left:4px;border-left:1px solid var(--cui-base-200)}.button{padding:8px 12px;font-weight:500;font-size:14px;line-height:20px;color:var(--cui-base-500);border-radius:6px;flex:1}@media (hover: hover){.button:hover{color:var(--cui-base-900);background:var(--cui-base-50)}}.button:active{color:var(--cui-base-900);background:var(--cui-base-50)}.button_active{color:var(--cui-light-blue-600);background:var(--cui-base-50)}\n"], dependencies: [{ kind: "component", type: CuiTabsComponent, selector: "cui-tabs", inputs: ["headerSlot", "selectedIndex"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CuiTabDirective, selector: "cui-tab, [cuiTab]", inputs: ["buttonSlot", "contentSlot", "data"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModalHeaderTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-modal-header-tabs', standalone: true, imports: [CuiTabsComponent, NgTemplateOutlet, CuiTabDirective, NgComponentOutlet, TranslocoDirective], template: "<ng-container *transloco=\"let t\">\n    <cui-tabs\n        class=\"tabs\"\n        [selectedIndex]=\"selectedIndex()\"\n        [headerSlot]=\"headerSlot\"\n    >\n        <ng-template\n            #headerSlot\n            let-buttons\n        >\n            <header class=\"header\">\n                <div\n                    #buttons\n                    class=\"buttons\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"buttons\" />\n                </div>\n            </header>\n        </ng-template>\n\n        @for (tab of tabs(); track tab) {\n            <cui-tab\n                [data]=\"tab\"\n                [buttonSlot]=\"cuiButtonSlot\"\n                [contentSlot]=\"cuiContentSlot\"\n                class=\"tab\"\n            >\n                <ng-template\n                    #cuiButtonSlot\n                    let-isActive=\"isActive\"\n                    let-element\n                >\n                    <div\n                        class=\"button\"\n                        [class.button_active]=\"isActive\"\n                    >\n                        {{ t(element.title) }}\n                    </div>\n                </ng-template>\n                <ng-template\n                    #cuiContentSlot\n                    let-element\n                >\n                    <div class=\"content\">\n                        <ng-container\n                            [ngComponentOutlet]=\"element.component\"\n                            [ngComponentOutletInputs]=\"element.inputs\"\n                        />\n                    </div>\n                </ng-template>\n            </cui-tab>\n        }\n    </cui-tabs>\n</ng-container>\n", styles: [":host{display:block;width:100%;height:calc(100% - 70px);padding-bottom:32px}.tabs{display:flex;flex-direction:column;height:100%}.tabs ::ng-deep cui-abstract-tabs{height:100%}.header{padding-bottom:8px;border-bottom:1px solid var(--cui-base-200)}.content{height:100%;overflow:auto}.buttons{padding-right:24px;padding-left:24px;display:flex;gap:8px;align-items:center;justify-content:space-evenly}.actions{padding-left:4px;border-left:1px solid var(--cui-base-200)}.button{padding:8px 12px;font-weight:500;font-size:14px;line-height:20px;color:var(--cui-base-500);border-radius:6px;flex:1}@media (hover: hover){.button:hover{color:var(--cui-base-900);background:var(--cui-base-50)}}.button:active{color:var(--cui-base-900);background:var(--cui-base-50)}.button_active{color:var(--cui-light-blue-600);background:var(--cui-base-50)}\n"] }]
+            args: [{ selector: 'cui-modal-header-tabs', standalone: true, imports: [CuiTabsComponent, NgTemplateOutlet, CuiTabDirective, NgComponentOutlet, TranslocoDirective], template: "<ng-container *transloco=\"let t\">\n    <cui-tabs\n        class=\"tabs\"\n        [selectedIndex]=\"selectedIndex()\"\n        [headerSlot]=\"headerSlot\"\n    >\n        <ng-template\n            #headerSlot\n            let-buttons\n        >\n            <header class=\"header\">\n                <div\n                    #buttons\n                    class=\"buttons\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"buttons\" />\n                </div>\n            </header>\n        </ng-template>\n\n        @for (tab of tabs(); track tab) {\n            <cui-tab\n                [data]=\"tab\"\n                [buttonSlot]=\"cuiButtonSlot\"\n                [contentSlot]=\"cuiContentSlot\"\n                class=\"tab\"\n            >\n                <ng-template\n                    #cuiButtonSlot\n                    let-isActive=\"isActive\"\n                    let-element\n                >\n                    <div\n                        class=\"button\"\n                        [class.button_active]=\"isActive\"\n                    >\n                        {{ t(element.title) }}\n                    </div>\n                </ng-template>\n                <ng-template\n                    #cuiContentSlot\n                    let-element\n                >\n                    <div class=\"content\">\n                        <ng-container\n                            [ngComponentOutlet]=\"element.component\"\n                            [ngComponentOutletInputs]=\"element.inputs\"\n                        />\n                    </div>\n                </ng-template>\n            </cui-tab>\n        }\n    </cui-tabs>\n</ng-container>\n", styles: [":host{display:block;width:100%;height:calc(100% - 70px);padding-bottom:32px}.tabs{display:flex;flex-direction:column;gap:0;height:100%}.tabs ::ng-deep cui-abstract-tabs{height:100%}.header{padding-bottom:8px;border-bottom:1px solid var(--cui-base-200)}.content{height:100%;overflow:auto}.buttons{padding-right:24px;padding-left:24px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:space-evenly}.actions{padding-left:4px;border-left:1px solid var(--cui-base-200)}.button{padding:8px 12px;font-weight:500;font-size:14px;line-height:20px;color:var(--cui-base-500);border-radius:6px;flex:1}@media (hover: hover){.button:hover{color:var(--cui-base-900);background:var(--cui-base-50)}}.button:active{color:var(--cui-base-900);background:var(--cui-base-50)}.button_active{color:var(--cui-light-blue-600);background:var(--cui-base-50)}\n"] }]
         }] });
 class ModalCriteriaTabComponent {