@cuby-ui/core 0.0.231 → 0.0.232

package/fesm2022/cuby-ui-core.mjs

@@ -3,7 +3,7 @@ import { Component, ChangeDetectionStrategy, inject, Renderer2, input, model, ef
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT, NgForOf, NgIf, NgComponentOutlet, NgTemplateOutlet, NgFor, UpperCasePipe, NgClass } from '@angular/common';
 import * as i1$1 from '@cuby-ui/cdk';
-import { CUI_WINDOW, cuiCreateToken, cuiCreateTokenFromFactory, CuiDestroyService, CuiFilterPipe, CuiLetDirective, CuiPopoverService, cuiProvide, CUI_ANIMATION_FRAME, cuiZonefree, EMPTY_CLIENT_RECT, cuiInjectElement, CUI_LOCAL_STORAGE, CUI_IS_WEBKIT, CuiItemDirective, CuiActiveZone, CuiFocusTrapDirective, cuiGetElementObscures, CUI_IS_MOBILE, CuiHoveredService, cuiPure, cuiPointToClientRect, cuiClamp, cuiPx, cuiIfMap, cuiIsPresent, cuiTypedFromEvent, cuiZonefreeScheduler, cuiZoneOptimized, cuiIsNativeFocused, CuiClickOutsideDirective, CuiTargetDirective, cuiGetClosestFocusable, CuiTime, CuiDimensionsObserverDirective, CuiAutoResizingDirective, CuiIdService, CuiElementDirective } from '@cuby-ui/cdk';
+import { CUI_WINDOW, cuiCreateToken, cuiCreateTokenFromFactory, CuiDestroyService, CuiFilterPipe, CuiLetDirective, CuiPopoverService, cuiProvide, CUI_ANIMATION_FRAME, cuiZonefree, EMPTY_CLIENT_RECT, cuiInjectElement, CUI_LOCAL_STORAGE, CUI_IS_WEBKIT, CuiItemDirective, CuiActiveZone, CuiFocusTrapDirective, cuiGetElementObscures, CUI_IS_MOBILE, CuiHoveredService, cuiPure, cuiPointToClientRect, cuiClamp, cuiPx, cuiIfMap, cuiIsPresent, cuiTypedFromEvent, cuiZonefreeScheduler, cuiZoneOptimized, cuiIsNativeFocused, CuiClickOutsideDirective, CuiTargetDirective, cuiGetClosestFocusable, CuiTime, CuiDimensionsObserverDirective, CuiAutoResizingDirective, CuiIdService, CuiElementDirective, CuiDragPointerDirective, CuiDragDropDirective, CuiDragListDirective, CuiHandleScrollDirective } from '@cuby-ui/cdk';
 import { DomSanitizer } from '@angular/platform-browser';
 import { cuiIsIcon, CUI_ICONS } from '@cuby-ui/icons';
 import { BehaviorSubject, takeUntil, Observable, merge, distinctUntilChanged, startWith, map, finalize, timer, Subject, switchMap, of, delay, repeat, filter, tap, takeWhile, fromEvent, debounce, skip, take, forkJoin, throttleTime, concatMap, toArray, catchError, throwError, pairwise, debounceTime } from 'rxjs';
@@ -20,10 +20,11 @@ import { MaskitoDirective } from '@maskito/angular';
 import EditorJS from '@editorjs/editorjs';
 import Header from '@editorjs/header';
 import List from '@editorjs/list';
-import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
+import * as i2$2 from '@jsverse/transloco';
+import { TranslocoDirective, TranslocoService, TranslocoModule } from '@jsverse/transloco';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { createCustomElement } from '@angular/elements';
-import { CuiFrameApiService, CuiTreeStructNavigatorApiService } from '@cuby-ui/api';
+import { CuiTreeStructNavigatorApiService, CuiFrameApiService, CuiNodeChecklistApiService, CuiTreeStructApiService } from '@cuby-ui/api';
 
 class CuiAccordionComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -892,11 +893,11 @@ class CuiBannerComponent {
         this.closed.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiBannerComponent, selector: "cui-banner", inputs: { status: "status", isCloseable: "isCloseable", label: "label", actionButtonText: "actionButtonText" }, outputs: { actionButtonClicked: "actionButtonClicked", closed: "closed" }, host: { properties: { "attr.data-status": "this.status" } }, ngImport: i0, template: "<cui-svg\r\n  *cuiLet=\"ICON_OPTIONS[status] as iconOption\"\r\n  [icon]=\"iconOption.icon\"\r\n  [color]=\"iconOption.color\"\r\n  class=\"c-icon\"\r\n></cui-svg>\r\n<div class=\"c-wrapper\">\r\n  <h2\r\n    *ngIf=\"label\"\r\n    class=\"c-heading\"\r\n  >\r\n    {{ label }}\r\n  </h2>\r\n  <ng-content></ng-content>\r\n  <button\r\n    cuiButton\r\n    *ngIf=\"actionButtonText\"\r\n    appearance=\"link\"\r\n    class=\"c-action\"\r\n    (click)=\"onAction()\"\r\n  >\r\n    {{ actionButtonText }}\r\n  </button>\r\n</div>\r\n<button\r\n  *ngIf=\"isCloseable\"\r\n  class=\"c-button\"\r\n  (click)=\"onClose()\"\r\n>\r\n  <cui-svg\r\n    *cuiLet=\"theme$ | async as theme\"\r\n    icon=\"cuiIconX\"\r\n    [color]=\"THEME_CLOSE_BUTTON_ICON_COLORS[theme!]\"\r\n  />\r\n</button>\r\n", styles: [":host{--c-info-icon-color: var(--cui-light-blue-800);--c-alert-icon-color: var(--cui-orange-800);padding:8px 16px;font-weight:400;font-size:14px;line-height:20px;display:flex;gap:16px;align-items:center;color:var(--cui-base-900);font-family:var(--cui-main-font)}:host[data-status=info]{color:var(--cui-light-blue-800);background:var(--cui-blue-50)}:host[data-status=success]{background:var(--cui-green-50)}:host[data-status=alert]{color:var(--cui-orange-800);background:var(--cui-yellow-100)}:host[data-status=error]{background:var(--cui-red-50)}:host-context([cuiTheme=dark]){--c-info-icon-color: var(--cui-light-blue-400);--c-alert-icon-color: var(--cui-yellow-300);color:var(--cui-gray-0)}:host-context([cuiTheme=dark])[data-status=info]{color:var(--cui-light-blue-400);background:var(--cui-blue-900)}:host-context([cuiTheme=dark])[data-status=info] .c-action:hover{color:var(--cui-blue-500)}:host-context([cuiTheme=dark])[data-status=success]{background:var(--cui-green-900)}:host-context([cuiTheme=dark])[data-status=success] .c-action{color:var(--cui-green-500)}:host-context([cuiTheme=dark])[data-status=alert]{background:var(--cui-yellow-900)}:host-context([cuiTheme=dark])[data-status=alert] .c-action{color:var(--cui-yellow-300)}:host-context([cuiTheme=dark])[data-status=error]{background:var(--cui-red-900)}:host-context([cuiTheme=dark])[data-status=error] .c-action{color:var(--cui-red-400)}.c-icon{height:28px}.c-wrapper{flex:1;display:flex;align-items:center;gap:16px;overflow-wrap:anywhere}.c-heading{font-weight:500;font-size:14px;line-height:20px;margin:0}.c-button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}.c-button:hover{background:#fff3}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiBannerComponent, selector: "cui-banner", inputs: { status: "status", isCloseable: "isCloseable", label: "label", actionButtonText: "actionButtonText" }, outputs: { actionButtonClicked: "actionButtonClicked", closed: "closed" }, host: { properties: { "attr.data-status": "this.status" } }, ngImport: i0, template: "<cui-svg\r\n  *cuiLet=\"ICON_OPTIONS[status] as iconOption\"\r\n  [icon]=\"iconOption.icon\"\r\n  [color]=\"iconOption.color\"\r\n  class=\"c-icon\"\r\n></cui-svg>\r\n<div class=\"c-wrapper\">\r\n  <h2\r\n    *ngIf=\"label\"\r\n    class=\"c-heading\"\r\n  >\r\n    {{ label }}\r\n  </h2>\r\n  <ng-content></ng-content>\r\n  <button\r\n    cuiButton\r\n    *ngIf=\"actionButtonText\"\r\n    appearance=\"link\"\r\n    class=\"c-action\"\r\n    (click)=\"onAction()\"\r\n  >\r\n    {{ actionButtonText }}\r\n  </button>\r\n</div>\r\n<button\r\n  *ngIf=\"isCloseable\"\r\n  class=\"c-button\"\r\n  (click)=\"onClose()\"\r\n>\r\n  <cui-svg\r\n    *cuiLet=\"theme$ | async as theme\"\r\n    icon=\"cuiIconX\"\r\n    [color]=\"THEME_CLOSE_BUTTON_ICON_COLORS[theme]\"\r\n  />\r\n</button>\r\n", styles: [":host{--c-info-icon-color: var(--cui-light-blue-800);--c-alert-icon-color: var(--cui-orange-800);padding:8px 16px;font-weight:400;font-size:14px;line-height:20px;display:flex;gap:16px;align-items:center;color:var(--cui-base-900);font-family:var(--cui-main-font)}:host[data-status=info]{color:var(--cui-light-blue-800);background:var(--cui-blue-50)}:host[data-status=success]{background:var(--cui-green-50)}:host[data-status=alert]{color:var(--cui-orange-800);background:var(--cui-yellow-100)}:host[data-status=error]{background:var(--cui-red-50)}:host-context([cuiTheme=dark]){--c-info-icon-color: var(--cui-light-blue-400);--c-alert-icon-color: var(--cui-yellow-300);color:var(--cui-gray-0)}:host-context([cuiTheme=dark])[data-status=info]{color:var(--cui-light-blue-400);background:var(--cui-blue-900)}:host-context([cuiTheme=dark])[data-status=info] .c-action:hover{color:var(--cui-blue-500)}:host-context([cuiTheme=dark])[data-status=success]{background:var(--cui-green-900)}:host-context([cuiTheme=dark])[data-status=success] .c-action{color:var(--cui-green-500)}:host-context([cuiTheme=dark])[data-status=alert]{background:var(--cui-yellow-900)}:host-context([cuiTheme=dark])[data-status=alert] .c-action{color:var(--cui-yellow-300)}:host-context([cuiTheme=dark])[data-status=error]{background:var(--cui-red-900)}:host-context([cuiTheme=dark])[data-status=error] .c-action{color:var(--cui-red-400)}.c-icon{height:28px}.c-wrapper{flex:1;display:flex;align-items:center;gap:16px;overflow-wrap:anywhere}.c-heading{font-weight:500;font-size:14px;line-height:20px;margin:0}.c-button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}.c-button:hover{background:#fff3}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiBannerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-banner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-svg\r\n  *cuiLet=\"ICON_OPTIONS[status] as iconOption\"\r\n  [icon]=\"iconOption.icon\"\r\n  [color]=\"iconOption.color\"\r\n  class=\"c-icon\"\r\n></cui-svg>\r\n<div class=\"c-wrapper\">\r\n  <h2\r\n    *ngIf=\"label\"\r\n    class=\"c-heading\"\r\n  >\r\n    {{ label }}\r\n  </h2>\r\n  <ng-content></ng-content>\r\n  <button\r\n    cuiButton\r\n    *ngIf=\"actionButtonText\"\r\n    appearance=\"link\"\r\n    class=\"c-action\"\r\n    (click)=\"onAction()\"\r\n  >\r\n    {{ actionButtonText }}\r\n  </button>\r\n</div>\r\n<button\r\n  *ngIf=\"isCloseable\"\r\n  class=\"c-button\"\r\n  (click)=\"onClose()\"\r\n>\r\n  <cui-svg\r\n    *cuiLet=\"theme$ | async as theme\"\r\n    icon=\"cuiIconX\"\r\n    [color]=\"THEME_CLOSE_BUTTON_ICON_COLORS[theme!]\"\r\n  />\r\n</button>\r\n", styles: [":host{--c-info-icon-color: var(--cui-light-blue-800);--c-alert-icon-color: var(--cui-orange-800);padding:8px 16px;font-weight:400;font-size:14px;line-height:20px;display:flex;gap:16px;align-items:center;color:var(--cui-base-900);font-family:var(--cui-main-font)}:host[data-status=info]{color:var(--cui-light-blue-800);background:var(--cui-blue-50)}:host[data-status=success]{background:var(--cui-green-50)}:host[data-status=alert]{color:var(--cui-orange-800);background:var(--cui-yellow-100)}:host[data-status=error]{background:var(--cui-red-50)}:host-context([cuiTheme=dark]){--c-info-icon-color: var(--cui-light-blue-400);--c-alert-icon-color: var(--cui-yellow-300);color:var(--cui-gray-0)}:host-context([cuiTheme=dark])[data-status=info]{color:var(--cui-light-blue-400);background:var(--cui-blue-900)}:host-context([cuiTheme=dark])[data-status=info] .c-action:hover{color:var(--cui-blue-500)}:host-context([cuiTheme=dark])[data-status=success]{background:var(--cui-green-900)}:host-context([cuiTheme=dark])[data-status=success] .c-action{color:var(--cui-green-500)}:host-context([cuiTheme=dark])[data-status=alert]{background:var(--cui-yellow-900)}:host-context([cuiTheme=dark])[data-status=alert] .c-action{color:var(--cui-yellow-300)}:host-context([cuiTheme=dark])[data-status=error]{background:var(--cui-red-900)}:host-context([cuiTheme=dark])[data-status=error] .c-action{color:var(--cui-red-400)}.c-icon{height:28px}.c-wrapper{flex:1;display:flex;align-items:center;gap:16px;overflow-wrap:anywhere}.c-heading{font-weight:500;font-size:14px;line-height:20px;margin:0}.c-button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}.c-button:hover{background:#fff3}\n"] }]
+            args: [{ selector: 'cui-banner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-svg\r\n  *cuiLet=\"ICON_OPTIONS[status] as iconOption\"\r\n  [icon]=\"iconOption.icon\"\r\n  [color]=\"iconOption.color\"\r\n  class=\"c-icon\"\r\n></cui-svg>\r\n<div class=\"c-wrapper\">\r\n  <h2\r\n    *ngIf=\"label\"\r\n    class=\"c-heading\"\r\n  >\r\n    {{ label }}\r\n  </h2>\r\n  <ng-content></ng-content>\r\n  <button\r\n    cuiButton\r\n    *ngIf=\"actionButtonText\"\r\n    appearance=\"link\"\r\n    class=\"c-action\"\r\n    (click)=\"onAction()\"\r\n  >\r\n    {{ actionButtonText }}\r\n  </button>\r\n</div>\r\n<button\r\n  *ngIf=\"isCloseable\"\r\n  class=\"c-button\"\r\n  (click)=\"onClose()\"\r\n>\r\n  <cui-svg\r\n    *cuiLet=\"theme$ | async as theme\"\r\n    icon=\"cuiIconX\"\r\n    [color]=\"THEME_CLOSE_BUTTON_ICON_COLORS[theme]\"\r\n  />\r\n</button>\r\n", styles: [":host{--c-info-icon-color: var(--cui-light-blue-800);--c-alert-icon-color: var(--cui-orange-800);padding:8px 16px;font-weight:400;font-size:14px;line-height:20px;display:flex;gap:16px;align-items:center;color:var(--cui-base-900);font-family:var(--cui-main-font)}:host[data-status=info]{color:var(--cui-light-blue-800);background:var(--cui-blue-50)}:host[data-status=success]{background:var(--cui-green-50)}:host[data-status=alert]{color:var(--cui-orange-800);background:var(--cui-yellow-100)}:host[data-status=error]{background:var(--cui-red-50)}:host-context([cuiTheme=dark]){--c-info-icon-color: var(--cui-light-blue-400);--c-alert-icon-color: var(--cui-yellow-300);color:var(--cui-gray-0)}:host-context([cuiTheme=dark])[data-status=info]{color:var(--cui-light-blue-400);background:var(--cui-blue-900)}:host-context([cuiTheme=dark])[data-status=info] .c-action:hover{color:var(--cui-blue-500)}:host-context([cuiTheme=dark])[data-status=success]{background:var(--cui-green-900)}:host-context([cuiTheme=dark])[data-status=success] .c-action{color:var(--cui-green-500)}:host-context([cuiTheme=dark])[data-status=alert]{background:var(--cui-yellow-900)}:host-context([cuiTheme=dark])[data-status=alert] .c-action{color:var(--cui-yellow-300)}:host-context([cuiTheme=dark])[data-status=error]{background:var(--cui-red-900)}:host-context([cuiTheme=dark])[data-status=error] .c-action{color:var(--cui-red-400)}.c-icon{height:28px}.c-wrapper{flex:1;display:flex;align-items:center;gap:16px;overflow-wrap:anywhere}.c-heading{font-weight:500;font-size:14px;line-height:20px;margin:0}.c-button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}.c-button:hover{background:#fff3}\n"] }]
         }], propDecorators: { status: [{
                 type: Input
             }, {
@@ -1678,7 +1679,7 @@ function syncExtraSpacesValidator() {
     };
 }
 
-function createDefaultValidators({ maxLength = 100, asyncDelay = 700 } = {}) {
+function cuiCreateDefaultValidators({ maxLength = 100, asyncDelay = 700 } = {}) {
     // Need to offset because this delay must be before changing value
     const OFFSET = 1;
     const adjustedAsyncDelay = asyncDelay - OFFSET;
@@ -7450,246 +7451,65 @@ const cuiLoaderInterceptor = (request, next) => {
     return next(request).pipe(catchError(throwError), finalize(loaderService.handleCompletedRequest.bind(loaderService)));
 };
 
-class CuiGeneralControlErrorHintComponent {
+class CuiLoaderComponent {
     constructor() {
-        this.control = input.required();
-        this.isVisible = input();
+        this.loaderService = inject(CuiLoaderService);
+        this.translocoService = inject(TranslocoService);
+        this.state = CuiLoadingState;
+        this.LoaderString = {
+            [CuiLoadingState.LOADING]: `${this.translocoService.translate('SAVING')}...`,
+            [CuiLoadingState.COMPLETED]: this.translocoService.translate('SAVED'),
+            [CuiLoadingState.INITIAL]: ''
+        };
+        this.LoaderIcon = {
+            [CuiLoadingState.LOADING]: 'cuiIconRefreshCcw',
+            [CuiLoadingState.COMPLETED]: 'cuiIconCheck',
+            [CuiLoadingState.INITIAL]: ''
+        };
+        this.loaderState = this.loaderService.loaderState;
+        this.loaderString = computed(() => this.LoaderString[this.loaderState()]);
+        this.loaderIcon = computed(() => this.LoaderIcon[this.loaderState()]);
     }
-    get isInvalid() {
-        return this.isVisible() ?? (this.control().invalid && this.control().dirty);
+    ngOnDestroy() {
+        this.loaderService.reset();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiGeneralControlErrorHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiGeneralControlErrorHintComponent, isStandalone: true, selector: "cui-general-control-error-hint", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    @if (isInvalid) {\r\n        @if (control().errors; as errors) {\r\n            <cui-hint hintType=\"error\">\r\n                @if (errors['required']) {\r\n                    {{ t('FIELD_IS_REQUIRED') }}\r\n                } @else if (errors['maxlength']) {\r\n                    {{ t('PLEASE_KEEP_FIELD_UNDER_CHARACTERS', { value: errors['maxlength'].requiredLength }) }}\r\n                } @else if (errors['extraSpaces']) {\r\n                    {{ t('MUST_BE_WITHOUT_EXTRA_SPACES') }}\r\n                } @else if (errors['min']) {\r\n                    {{ t('MIN_VALUE_MUST_BE_MORE_THAN', { value: errors['min'].min }) }}\r\n                } @else if (errors['max']) {\r\n                    {{ t('MAX_VALUE_MUST_BE_LESS_THAN', { value: errors['max'].max }) }}\r\n                }\r\n            </cui-hint>\r\n        }\r\n    }\r\n</ng-container>\r\n", styles: [":host{display:inline-block}:host:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CuiHintModule }, { kind: "component", type: CuiHintComponent, selector: "cui-hint", inputs: ["hintType"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiLoaderComponent, isStandalone: true, selector: "cui-loader", ngImport: i0, template: "@if (loaderState() !== state.INITIAL) {\r\n    <cui-svg\r\n        [icon]=\"loaderIcon()\"\r\n        color=\"var(--cui-base-500)\"\r\n        [class.icon_loading]=\"loaderState() === state.LOADING\"\r\n    />\r\n    <span>{{ loaderString() }}</span>\r\n}\r\n", styles: [":host{padding:6px 8px;font-weight:500;font-size:12px;line-height:14px;display:flex;align-items:center;gap:6px;color:var(--cui-base-500)}.icon_loading{animation:spin 1s ease-in-out infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiGeneralControlErrorHintComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiLoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-general-control-error-hint', imports: [CuiHintModule, TranslocoDirective], standalone: true, changeDetection: ChangeDetectionStrategy.Default, template: "<ng-container *transloco=\"let t\">\r\n    @if (isInvalid) {\r\n        @if (control().errors; as errors) {\r\n            <cui-hint hintType=\"error\">\r\n                @if (errors['required']) {\r\n                    {{ t('FIELD_IS_REQUIRED') }}\r\n                } @else if (errors['maxlength']) {\r\n                    {{ t('PLEASE_KEEP_FIELD_UNDER_CHARACTERS', { value: errors['maxlength'].requiredLength }) }}\r\n                } @else if (errors['extraSpaces']) {\r\n                    {{ t('MUST_BE_WITHOUT_EXTRA_SPACES') }}\r\n                } @else if (errors['min']) {\r\n                    {{ t('MIN_VALUE_MUST_BE_MORE_THAN', { value: errors['min'].min }) }}\r\n                } @else if (errors['max']) {\r\n                    {{ t('MAX_VALUE_MUST_BE_LESS_THAN', { value: errors['max'].max }) }}\r\n                }\r\n            </cui-hint>\r\n        }\r\n    }\r\n</ng-container>\r\n", styles: [":host{display:inline-block}:host:empty{display:none}\n"] }]
+            args: [{ selector: 'cui-loader', imports: [CuiSvgModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (loaderState() !== state.INITIAL) {\r\n    <cui-svg\r\n        [icon]=\"loaderIcon()\"\r\n        color=\"var(--cui-base-500)\"\r\n        [class.icon_loading]=\"loaderState() === state.LOADING\"\r\n    />\r\n    <span>{{ loaderString() }}</span>\r\n}\r\n", styles: [":host{padding:6px 8px;font-weight:500;font-size:12px;line-height:14px;display:flex;align-items:center;gap:6px;color:var(--cui-base-500)}.icon_loading{animation:spin 1s ease-in-out infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}\n"] }]
         }] });
 
-class CuiUtilityInfoComponent {
-    get controls() {
-        return this.form.controls;
-    }
-    get isTitleError() {
-        return this.controls.title.invalid && this.controls.title.dirty;
-    }
-    get isDescriptionError() {
-        return this.controls.description.invalid && this.controls.description.dirty;
-    }
+class CuiDeleteModalComponent {
     constructor() {
-        this.destroy = inject(DestroyRef);
-        this.formBuilder = inject(NonNullableFormBuilder);
-        this.translocoService = inject(TranslocoService);
-        this.frameApiService = inject(CuiFrameApiService);
-        this.cuiAlertService = inject(CuiAlertService);
-        this.cuiIdService = inject(CuiIdService);
-        this.CONTROL_DELAY = 500;
-        this.MAX_FILE_SIZE = 20971520;
-        this.titleId = this.cuiIdService.generate();
-        this.descriptionId = this.cuiIdService.generate();
-        this.form = this.formBuilder.group({
-            title: this.formBuilder.control('', createDefaultValidators({ asyncDelay: this.CONTROL_DELAY })),
-            description: this.formBuilder.control('', createDefaultValidators({ asyncDelay: this.CONTROL_DELAY }))
-        });
-        this.isDescriptionModalOpen = signal(false);
-        this.isDescriptionEmpty = signal(false);
-        this.editorId = signal(null);
-        this.thumbnail = signal(null);
-        this.thumbnailUrl = computed(() => {
-            const thumbnail = this.thumbnail();
-            if (thumbnail?.resource) {
-                return thumbnail.resource;
-            }
-            return this.baseResourceUrl() + thumbnail.fileId;
-        });
-        this.uploadButtonName = computed(() => {
-            const thumbnail = this.thumbnail();
-            if (thumbnail?.name) {
-                return this.translocoService.translate('REPLACE_FILE');
-            }
-            return this.translocoService.translate('UPLOAD_FILE');
-        });
-        this.heading = null;
-        this.title = input.required();
-        this.framerId = input.required();
-        this.baseResourceUrl = input.required();
-        this.config = input.required();
-        this.formChanged = output();
-        this.isFormValidChanged = output();
-        this.initUtilityEffect();
-    }
-    onSelectFile() {
-        const input = document.createElement('input');
-        input.type = 'file';
-        input.accept = 'image/jpg, image/jpeg, image/png, video/mp4';
-        input.onchange = () => {
-            const files = input.files;
-            if (!files?.length) {
-                return;
-            }
-            this.getFile(files);
-        };
-        input.click();
-    }
-    onEditorEmpty(isEmpty) {
-        this.isDescriptionEmpty.set(isEmpty);
-        this.isFormValidChanged.emit(this.checkFormValidation());
-    }
-    onRemoveThumbnail() {
-        const frameId = this.framerId();
-        const fragmentId = this.thumbnail()?.id;
-        if (!frameId || !fragmentId) {
-            return;
-        }
-        this.frameApiService.deleteResource(frameId, fragmentId).subscribe(() => {
-            this.thumbnail.update((prev) => ({ ...prev, fileId: null, name: null, resource: null }));
-        });
-    }
-    onToggleDescriptionModal() {
-        this.isDescriptionModalOpen.update((prev) => !prev);
-    }
-    initUtilityEffect() {
-        const effectRef = effect(() => {
-            const title = this.title();
-            if (!title) {
-                return;
-            }
-            this.initTitleSubscriptions();
-            this.initFrameFragments();
-            effectRef.destroy();
-        });
-    }
-    initTitleSubscriptions() {
-        this.form.patchValue({ title: this.title() });
-        this.form.statusChanges
-            .pipe(takeUntilDestroyed(this.destroy))
-            .subscribe(() => this.isFormValidChanged.emit(this.checkFormValidation()));
-        this.form.valueChanges
-            .pipe(takeUntilDestroyed(this.destroy), startWith(this.form.value), pairwise(), debounceTime(this.CONTROL_DELAY), map(([prev, current]) => this.compareFormValues([prev, current])))
-            .subscribe((value) => {
-            this.formChanged.emit(value);
-        });
-    }
-    initFrameFragments() {
-        const frameId = this.framerId();
-        if (!frameId) {
-            return;
-        }
-        this.frameApiService.getFrame(frameId).subscribe((frame) => {
-            frame.fragments.forEach((fragment) => {
-                if (fragment.type === "J_TEXT" /* FragmentType.jText */) {
-                    this.editorId.set(fragment?.id);
-                }
-                if (fragment.type === "RESOURCE_FILE" /* FragmentType.resourceFile */) {
-                    this.setResourceFile(fragment);
-                }
-            });
-        });
-    }
-    compareFormValues([prevGroup, currentGruop]) {
-        const keys = Object.keys(currentGruop);
-        const changedFields = {};
-        keys.forEach((key) => {
-            const prev = prevGroup[key];
-            const current = currentGruop[key];
-            if (prev === current) {
-                return;
-            }
-            changedFields[key] = current;
-        });
-        return changedFields;
-    }
-    setResourceFile(resource) {
-        const url = this.baseResourceUrl() + resource.fileId;
-        this.thumbnail.set(resource);
-        if (!url || resource?.name?.split('.').pop() !== 'mp4') {
-            return;
-        }
-        this.getCaptureFromVideo(url);
-    }
-    getFile(files) {
-        const file = files.item(0);
-        if (!file) {
-            return;
-        }
-        if (file.size > this.MAX_FILE_SIZE) {
-            this.cuiAlertService
-                .open(this.translocoService.translate('INVALID_FILE_SIZE'), {
-                status: 'error'
-            })
-                .subscribe();
-            return;
-        }
-        const isVideo = file.name.split('.').at(-1) === 'mp4';
-        const url = URL.createObjectURL(file);
-        if (isVideo) {
-            this.getCaptureFromVideo(url, file);
-        }
-        else {
-            this.thumbnail.update((prev) => ({ ...prev, name: file.name, resource: url }));
-        }
-        this.uploadFile(file);
-    }
-    uploadFile(file) {
-        const frameId = this.framerId();
-        const fragmentId = this.thumbnail()?.id;
-        if (!frameId || !fragmentId) {
+        this.context = inject(CUI_DIALOG_CONTEXT);
+        this.data = this.context.data;
+        this.title = this.data.title;
+        this.content = this.data.content;
+        this.isLoading = signal(false);
+        this.isDisabled = this.data.isDisabled ?? false;
+    }
+    onDelete() {
+        if (!this.data.delete) {
             return;
         }
-        const formData = new FormData();
-        formData.append('resource', file);
-        this.frameApiService.uploadResource(formData, frameId, fragmentId).subscribe();
-    }
-    getCaptureFromVideo(url, file) {
-        const canvas = document.createElement('canvas');
-        const video = document.createElement('video');
-        video.src = url;
-        video.currentTime = 1;
-        canvas.width = 184;
-        canvas.height = 120;
-        video.onloadeddata = () => {
-            const context = canvas.getContext('2d');
-            if (!context) {
-                return;
-            }
-            context.drawImage(video, 0, 0, canvas.width, canvas.height);
-            canvas.toBlob((blob) => {
-                if (!blob) {
-                    return;
-                }
-                const videoCaptureUrl = URL.createObjectURL(blob);
-                this.thumbnail.update((prev) => ({
-                    ...prev,
-                    name: (file?.name || prev?.name),
-                    resource: videoCaptureUrl
-                }));
-            });
-        };
-        video.load();
+        this.isLoading.set(true);
+        this.data
+            .delete()
+            .pipe(finalize(() => this.isLoading.set(false)))
+            .subscribe(() => this.context.completeWith());
     }
-    checkFormValidation() {
-        console.log(this.isDescriptionEmpty(), this.form.invalid);
-        return !this.isDescriptionEmpty() && !this.form.invalid;
+    onCancel() {
+        this.context.completeWith({ canceled: true });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiUtilityInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiUtilityInfoComponent, isStandalone: true, selector: "cui-utility-info", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, baseResourceUrl: { classPropertyName: "baseResourceUrl", publicName: "baseResourceUrl", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { formChanged: "formChanged", isFormValidChanged: "isFormValidChanged" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <section class=\"content\">\r\n    <cui-form-field>\r\n        <label cuiLabel [isRequired]=\"true\" [for]=\"titleId\">\r\n            {{ t('TITLE') }}\r\n        </label>\r\n        <cui-input-text\r\n            [cuiTextFieldId]=\"titleId\"\r\n            [cuiTextFieldPlaceholder]=\"t('ADD_TITLE')\"\r\n            [cuiTextFieldIsError]=\"isTitleError\"\r\n            [formControl]=\"form.controls.title\"\r\n        />\r\n        @if (isTitleError) {\r\n            <cui-general-control-error-hint [control]=\"form.controls.title\" [isVisible]=\"true\" />\r\n        }\r\n    </cui-form-field>\r\n    <cui-form-field>\r\n        <label cuiLabel [isRequired]=\"true\" [for]=\"descriptionId\">\r\n            {{ t('SHORT_DESCRIPTION') }}\r\n        </label>\r\n         <cui-input-text\r\n            [cuiTextFieldId]=\"descriptionId\"\r\n            cuiTextFieldPlaceholder=\"{{t('SHORT_DESCRIPTION')}}...\"\r\n            [cuiTextFieldIsError]=\"isDescriptionError\"\r\n            [formControl]=\"form.controls.description\"\r\n        />\r\n        @if (isDescriptionError) {\r\n            <cui-general-control-error-hint [control]=\"form.controls.description\" [isVisible]=\"true\" />\r\n        }\r\n    </cui-form-field>\r\n    <section class=\"file\">\r\n      <span class=\"title\">{{ t('THUMBNAIL') }}</span>\r\n      <div class=\"content__upload\">\r\n        <div class=\"content__upload-file\">\r\n          @if (thumbnail()?.name; as fileId) {\r\n          <div class=\"image\">\r\n            <span class=\"image__name\">{{ thumbnail()?.name }}</span>\r\n            <!-- TODO: ngSrc -->\r\n            <img class=\"image__view\" [src]=\"thumbnailUrl()\" height=\"120\" width=\"184\" alt=\"Thumbnail\" />\r\n          </div>\r\n          }\r\n          <button type=\"button\" cuiButton appearance=\"outlined-gray\" size=\"xxs\" icon=\"cuiIconUpload\"\r\n            (click)=\"onSelectFile()\">\r\n            {{ uploadButtonName() }}\r\n          </button>\r\n          @if (thumbnail()?.name) {\r\n          <button class=\"content__remove-button\" cuiButton appearance=\"link\" size=\"sm\" type=\"button\"\r\n            (click)=\"onRemoveThumbnail()\">\r\n            {{ t('REMOVE') }}\r\n          </button>\r\n          }\r\n          <span class=\"content__accepted\">\r\n            {{ t('ACCEPTED') }}: JPG, JPEG, PNG, MP4 {{ t('UP_TO') }} 20MB\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </section>\r\n    @if (editorId(); as editorId) {\r\n        <cui-editor-block\r\n            [title]=\"form.controls.title.value || title()\"\r\n            [config]=\"config()\"\r\n            [editorId]=\"editorId\"\r\n            [required]=\"true\"\r\n            (editorEmpty)=\"onEditorEmpty($event)\"\r\n        ></cui-editor-block>\r\n    }\r\n  </section>\r\n</ng-container>\r\n", styles: ["::ng-deep cui-dialog:has(.instruction-description-modal){inset:0;margin:auto;transform:none!important}:host{display:block}.title{font-weight:500;font-size:14px;line-height:20px;display:flex;gap:2px}.title_required{color:var(--cui-danger)}.content{display:flex;flex-direction:column;gap:16px;padding:16px 24px}.content__upload{padding:12px 16px;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-base-10)}.content__accepted{color:var(--cui-base-500)}.content__upload-file{display:flex;align-items:center;gap:8px}.content__upload-file input[type=file]{display:none}.content__remove-button ::ng-deep .c-content{color:var(--cui-danger)!important}.file{display:flex;flex-direction:column;gap:4px}.description_invalid{border:1px solid var(--cui-danger)}.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}.button-save{margin-left:auto}.instruction-description-modal{text-transform:none}.empty{padding:16px;color:var(--cui-base-500);text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CuiAccordionModule) }, { kind: "ngmodule", type: i0.forwardRef(() => CuiButtonModule) }, { kind: "component", type: i0.forwardRef(() => CuiButtonComponent), selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "ngmodule", type: i0.forwardRef(() => CuiFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => CuiFormFieldComponent), selector: "cui-form-field" }, { kind: "ngmodule", type: i0.forwardRef(() => CuiHintModule) }, { kind: "ngmodule", type: i0.forwardRef(() => CuiInputModule) }, { kind: "component", type: i0.forwardRef(() => CuiInputTextComponent), selector: "cui-input-text" }, { kind: "directive", type: i0.forwardRef(() => CuiTextFieldIdDirective), selector: "[cuiTextFieldId]", inputs: ["cuiTextFieldId"] }, { kind: "directive", type: i0.forwardRef(() => CuiTextFieldPlaceholderDirective), selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "directive", type: i0.forwardRef(() => CuiTextFieldIsErrorDirective), selector: "[cuiTextFieldIsError]", inputs: ["cuiTextFieldIsError"] }, { kind: "ngmodule", type: i0.forwardRef(() => CuiLabelModule) }, { kind: "component", type: i0.forwardRef(() => CuiLabelComponent), selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "component", type: i0.forwardRef(() => CuiEditorBlockComponent), selector: "cui-editor-block", inputs: ["title", "editorId", "config", "required"], outputs: ["editorEmpty"] }, { kind: "component", type: i0.forwardRef(() => CuiGeneralControlErrorHintComponent), selector: "cui-general-control-error-hint", inputs: ["control", "isVisible"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i2$1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i2$1.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => TranslocoDirective), selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiDeleteModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiDeleteModalComponent, isStandalone: true, selector: "cui-delete-modal", ngImport: i0, template: "<div\r\n    *transloco=\"let t\"\r\n    class=\"wrapper\"\r\n>\r\n    <div class=\"content\">\r\n        <div class=\"header\">\r\n            <h3 class=\"title\">{{ t(title) }}</h3>\r\n            <button\r\n                type=\"button\"\r\n                cuiButton\r\n                icon=\"cuiIconX\"\r\n                appearance=\"ghost\"\r\n                [disabled]=\"isLoading()\"\r\n                class=\"close-btn\"\r\n                (click)=\"onCancel()\"\r\n            ></button>\r\n        </div>\r\n        <div class=\"info\">\r\n            @for (text of content; track text) {\r\n                <p [innerHTML]=\"t(text)\"></p>\r\n            }\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"footer\">\r\n        <button\r\n            type=\"button\"\r\n            cuiButton\r\n            (click)=\"onCancel()\"\r\n            [disabled]=\"isLoading()\"\r\n            appearance=\"secondary\"\r\n        >\r\n            {{ t('CANCEL') }}\r\n        </button>\r\n        <button\r\n            type=\"button\"\r\n            cuiButton\r\n            [isLoaderShown]=\"isLoading()\"\r\n            [disabled]=\"isDisabled\"\r\n            [cuiTooltip]=\"isDisabled && t('IN_DEVELOPMENT')\"\r\n            appearance=\"destructive\"\r\n            (click)=\"onDelete()\"\r\n        >\r\n            {{ t('YES_DELETE') }}\r\n        </button>\r\n    </div>\r\n</div>\r\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", "size"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i2$2.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.13", ngImport: i0, type: CuiUtilityInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiDeleteModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-utility-info', imports: [
-                        CuiAccordionModule,
-                        CuiButtonModule,
-                        CuiFormFieldModule,
-                        CuiHintModule,
-                        CuiInputModule,
-                        CuiLabelModule,
-                        forwardRef(() => CuiEditorBlockComponent),
-                        CuiGeneralControlErrorHintComponent,
-                        ReactiveFormsModule,
-                        TranslocoDirective,
-                        CuiTooltip
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n  <section class=\"content\">\r\n    <cui-form-field>\r\n        <label cuiLabel [isRequired]=\"true\" [for]=\"titleId\">\r\n            {{ t('TITLE') }}\r\n        </label>\r\n        <cui-input-text\r\n            [cuiTextFieldId]=\"titleId\"\r\n            [cuiTextFieldPlaceholder]=\"t('ADD_TITLE')\"\r\n            [cuiTextFieldIsError]=\"isTitleError\"\r\n            [formControl]=\"form.controls.title\"\r\n        />\r\n        @if (isTitleError) {\r\n            <cui-general-control-error-hint [control]=\"form.controls.title\" [isVisible]=\"true\" />\r\n        }\r\n    </cui-form-field>\r\n    <cui-form-field>\r\n        <label cuiLabel [isRequired]=\"true\" [for]=\"descriptionId\">\r\n            {{ t('SHORT_DESCRIPTION') }}\r\n        </label>\r\n         <cui-input-text\r\n            [cuiTextFieldId]=\"descriptionId\"\r\n            cuiTextFieldPlaceholder=\"{{t('SHORT_DESCRIPTION')}}...\"\r\n            [cuiTextFieldIsError]=\"isDescriptionError\"\r\n            [formControl]=\"form.controls.description\"\r\n        />\r\n        @if (isDescriptionError) {\r\n            <cui-general-control-error-hint [control]=\"form.controls.description\" [isVisible]=\"true\" />\r\n        }\r\n    </cui-form-field>\r\n    <section class=\"file\">\r\n      <span class=\"title\">{{ t('THUMBNAIL') }}</span>\r\n      <div class=\"content__upload\">\r\n        <div class=\"content__upload-file\">\r\n          @if (thumbnail()?.name; as fileId) {\r\n          <div class=\"image\">\r\n            <span class=\"image__name\">{{ thumbnail()?.name }}</span>\r\n            <!-- TODO: ngSrc -->\r\n            <img class=\"image__view\" [src]=\"thumbnailUrl()\" height=\"120\" width=\"184\" alt=\"Thumbnail\" />\r\n          </div>\r\n          }\r\n          <button type=\"button\" cuiButton appearance=\"outlined-gray\" size=\"xxs\" icon=\"cuiIconUpload\"\r\n            (click)=\"onSelectFile()\">\r\n            {{ uploadButtonName() }}\r\n          </button>\r\n          @if (thumbnail()?.name) {\r\n          <button class=\"content__remove-button\" cuiButton appearance=\"link\" size=\"sm\" type=\"button\"\r\n            (click)=\"onRemoveThumbnail()\">\r\n            {{ t('REMOVE') }}\r\n          </button>\r\n          }\r\n          <span class=\"content__accepted\">\r\n            {{ t('ACCEPTED') }}: JPG, JPEG, PNG, MP4 {{ t('UP_TO') }} 20MB\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </section>\r\n    @if (editorId(); as editorId) {\r\n        <cui-editor-block\r\n            [title]=\"form.controls.title.value || title()\"\r\n            [config]=\"config()\"\r\n            [editorId]=\"editorId\"\r\n            [required]=\"true\"\r\n            (editorEmpty)=\"onEditorEmpty($event)\"\r\n        ></cui-editor-block>\r\n    }\r\n  </section>\r\n</ng-container>\r\n", styles: ["::ng-deep cui-dialog:has(.instruction-description-modal){inset:0;margin:auto;transform:none!important}:host{display:block}.title{font-weight:500;font-size:14px;line-height:20px;display:flex;gap:2px}.title_required{color:var(--cui-danger)}.content{display:flex;flex-direction:column;gap:16px;padding:16px 24px}.content__upload{padding:12px 16px;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-base-10)}.content__accepted{color:var(--cui-base-500)}.content__upload-file{display:flex;align-items:center;gap:8px}.content__upload-file input[type=file]{display:none}.content__remove-button ::ng-deep .c-content{color:var(--cui-danger)!important}.file{display:flex;flex-direction:column;gap:4px}.description_invalid{border:1px solid var(--cui-danger)}.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}.button-save{margin-left:auto}.instruction-description-modal{text-transform:none}.empty{padding:16px;color:var(--cui-base-500);text-align:center}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'cui-delete-modal', imports: [CuiButtonModule, TranslocoModule, CuiTooltip], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n    *transloco=\"let t\"\r\n    class=\"wrapper\"\r\n>\r\n    <div class=\"content\">\r\n        <div class=\"header\">\r\n            <h3 class=\"title\">{{ t(title) }}</h3>\r\n            <button\r\n                type=\"button\"\r\n                cuiButton\r\n                icon=\"cuiIconX\"\r\n                appearance=\"ghost\"\r\n                [disabled]=\"isLoading()\"\r\n                class=\"close-btn\"\r\n                (click)=\"onCancel()\"\r\n            ></button>\r\n        </div>\r\n        <div class=\"info\">\r\n            @for (text of content; track text) {\r\n                <p [innerHTML]=\"t(text)\"></p>\r\n            }\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"footer\">\r\n        <button\r\n            type=\"button\"\r\n            cuiButton\r\n            (click)=\"onCancel()\"\r\n            [disabled]=\"isLoading()\"\r\n            appearance=\"secondary\"\r\n        >\r\n            {{ t('CANCEL') }}\r\n        </button>\r\n        <button\r\n            type=\"button\"\r\n            cuiButton\r\n            [isLoaderShown]=\"isLoading()\"\r\n            [disabled]=\"isDisabled\"\r\n            [cuiTooltip]=\"isDisabled && t('IN_DEVELOPMENT')\"\r\n            appearance=\"destructive\"\r\n            (click)=\"onDelete()\"\r\n        >\r\n            {{ t('YES_DELETE') }}\r\n        </button>\r\n    </div>\r\n</div>\r\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"] }]
+        }] });
 
 class CuiSelectedCategoryService {
     constructor() {
@@ -7727,6 +7547,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
+class CuiGeneralControlErrorHintComponent {
+    constructor() {
+        this.control = input.required();
+        this.isVisible = input();
+    }
+    get isInvalid() {
+        return this.isVisible() ?? (this.control().invalid && this.control().dirty);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiGeneralControlErrorHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiGeneralControlErrorHintComponent, isStandalone: true, selector: "cui-general-control-error-hint", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    @if (isInvalid) {\r\n        @if (control().errors; as errors) {\r\n            <cui-hint hintType=\"error\">\r\n                @if (errors['required']) {\r\n                    {{ t('FIELD_IS_REQUIRED') }}\r\n                } @else if (errors['maxlength']) {\r\n                    {{ t('PLEASE_KEEP_FIELD_UNDER_CHARACTERS', { value: errors['maxlength'].requiredLength }) }}\r\n                } @else if (errors['extraSpaces']) {\r\n                    {{ t('MUST_BE_WITHOUT_EXTRA_SPACES') }}\r\n                } @else if (errors['min']) {\r\n                    {{ t('MIN_VALUE_MUST_BE_MORE_THAN', { value: errors['min'].min }) }}\r\n                } @else if (errors['max']) {\r\n                    {{ t('MAX_VALUE_MUST_BE_LESS_THAN', { value: errors['max'].max }) }}\r\n                }\r\n            </cui-hint>\r\n        }\r\n    }\r\n</ng-container>\r\n", styles: [":host{display:inline-block}:host:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CuiHintModule }, { kind: "component", type: CuiHintComponent, selector: "cui-hint", inputs: ["hintType"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiGeneralControlErrorHintComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-general-control-error-hint', imports: [CuiHintModule, TranslocoDirective], standalone: true, changeDetection: ChangeDetectionStrategy.Default, template: "<ng-container *transloco=\"let t\">\r\n    @if (isInvalid) {\r\n        @if (control().errors; as errors) {\r\n            <cui-hint hintType=\"error\">\r\n                @if (errors['required']) {\r\n                    {{ t('FIELD_IS_REQUIRED') }}\r\n                } @else if (errors['maxlength']) {\r\n                    {{ t('PLEASE_KEEP_FIELD_UNDER_CHARACTERS', { value: errors['maxlength'].requiredLength }) }}\r\n                } @else if (errors['extraSpaces']) {\r\n                    {{ t('MUST_BE_WITHOUT_EXTRA_SPACES') }}\r\n                } @else if (errors['min']) {\r\n                    {{ t('MIN_VALUE_MUST_BE_MORE_THAN', { value: errors['min'].min }) }}\r\n                } @else if (errors['max']) {\r\n                    {{ t('MAX_VALUE_MUST_BE_LESS_THAN', { value: errors['max'].max }) }}\r\n                }\r\n            </cui-hint>\r\n        }\r\n    }\r\n</ng-container>\r\n", styles: [":host{display:inline-block}:host:empty{display:none}\n"] }]
+        }] });
+
 class CuiCategoryFormComponent {
     get isTitleInvalid() {
         return this.titleControl.invalid && this.titleControl.dirty;
@@ -7737,7 +7573,7 @@ class CuiCategoryFormComponent {
     constructor() {
         this.nonNullableFormBuilder = inject(NonNullableFormBuilder);
         this.form = this.nonNullableFormBuilder.group({
-            title: ['', createDefaultValidators({ asyncDelay: 0 })]
+            title: ['', cuiCreateDefaultValidators({ asyncDelay: 0 })]
         });
         this.titleControl = this.form.controls.title;
         this.isDisabled = input(false);
@@ -8005,9 +7841,1121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n    [attr.id]=\"buttonId()\"\r\n    #dropdown=\"cuiDropdown\"\r\n    [cuiDropdown]=\"dropdownContent\"\r\n    orientation=\"stretch\"\r\n    type=\"button\"\r\n    class=\"target\"\r\n    [disabled]=\"disabled()\"\r\n    (click)=\"onOpenStageStorages()\"\r\n>\r\n    <ng-content />\r\n</button>\r\n\r\n<ng-template #dropdownContent>\r\n    <cui-dropdown-wrapper\r\n        *transloco=\"let t\"\r\n        [title]=\"t('SELECT_OR_CREATE_CATEGORY')\"\r\n        width=\"100%\"\r\n        class=\"dropdown-wrapper\"\r\n    >\r\n        <ng-container *cuiLet=\"stageStorages() as stageStorages\">\r\n            @if (stageStorages && stageStorages?.length) {\r\n                <cui-categories-list [stageStorages]=\"stageStorages\" />\r\n            }\r\n            @if (isCreateCategoryControlVisible()) {\r\n                <cui-create-category-item\r\n                    class=\"create-category\"\r\n                    [isDisabled]=\"isCategoryCreationLoading()\"\r\n                    (created)=\"onCreateNewCategory($event)\"\r\n                    (canceled)=\"onCreatingCategoryCanceled()\"\r\n                />\r\n            } @else if (!stageStorages?.length) {\r\n                <cui-empty-state\r\n                    class=\"empty\"\r\n                    [subtitle]=\"t('NO_CATEGORY_TO_VIEW_YET')\"\r\n                />\r\n            }\r\n        </ng-container>\r\n        <button\r\n            ccDropdownFooterContent\r\n            cuiButton\r\n            type=\"button\"\r\n            appearance=\"ghost\"\r\n            size=\"xxs\"\r\n            icon=\"cuiIconPlus\"\r\n            (click)=\"onStartCreatingNewCategory()\"\r\n        >\r\n            {{ t('NEW_CATEGORY') }}\r\n        </button>\r\n    </cui-dropdown-wrapper>\r\n</ng-template>\r\n", styles: ["::ng-deep .dropdown-wrapper .scrollable-content{flex:1;display:flex;flex-direction:column}.target{display:block;padding:0;width:100%;border-radius:8px;border:1px solid transparent}.target:focus{box-shadow:0 0 0 2px var(--cui-focus);border:1px solid var(--cui-info)}.target:disabled{cursor:default}.create-category{margin-left:24px}.empty{margin:auto}.dropdown-wrapper{display:block;height:350px}\n"] }]
         }], ctorParameters: () => [] });
 
+class CuiUtilityInfoComponent {
+    get controls() {
+        return this.form.controls;
+    }
+    get isTitleError() {
+        return this.controls.title.invalid && this.controls.title.dirty;
+    }
+    get isDescriptionError() {
+        return this.controls.description.invalid && this.controls.description.dirty;
+    }
+    constructor() {
+        this.destroy = inject(DestroyRef);
+        this.formBuilder = inject(NonNullableFormBuilder);
+        this.translocoService = inject(TranslocoService);
+        this.frameApiService = inject(CuiFrameApiService);
+        this.cuiAlertService = inject(CuiAlertService);
+        this.cuiIdService = inject(CuiIdService);
+        this.CONTROL_DELAY = 500;
+        this.MAX_FILE_SIZE = 20971520;
+        this.titleId = this.cuiIdService.generate();
+        this.descriptionId = this.cuiIdService.generate();
+        this.form = this.formBuilder.group({
+            title: this.formBuilder.control('', cuiCreateDefaultValidators({ asyncDelay: this.CONTROL_DELAY })),
+            description: this.formBuilder.control('', cuiCreateDefaultValidators({ asyncDelay: this.CONTROL_DELAY }))
+        });
+        this.isDescriptionModalOpen = signal(false);
+        this.isDescriptionEmpty = signal(false);
+        this.editorId = signal(null);
+        this.thumbnail = signal(null);
+        this.thumbnailUrl = computed(() => {
+            const thumbnail = this.thumbnail();
+            if (thumbnail?.resource) {
+                return thumbnail.resource;
+            }
+            return this.baseResourceUrl() + thumbnail.fileId;
+        });
+        this.uploadButtonName = computed(() => {
+            const thumbnail = this.thumbnail();
+            if (thumbnail?.name) {
+                return this.translocoService.translate('REPLACE_FILE');
+            }
+            return this.translocoService.translate('UPLOAD_FILE');
+        });
+        this.heading = null;
+        this.title = input.required();
+        this.framerId = input.required();
+        this.baseResourceUrl = input.required();
+        this.config = input.required();
+        this.formChanged = output();
+        this.isFormValidChanged = output();
+        this.initUtilityEffect();
+    }
+    onSelectFile() {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = 'image/jpg, image/jpeg, image/png, video/mp4';
+        input.onchange = () => {
+            const files = input.files;
+            if (!files?.length) {
+                return;
+            }
+            this.getFile(files);
+        };
+        input.click();
+    }
+    onEditorEmpty(isEmpty) {
+        this.isDescriptionEmpty.set(isEmpty);
+        this.isFormValidChanged.emit(this.checkFormValidation());
+    }
+    onRemoveThumbnail() {
+        const frameId = this.framerId();
+        const fragmentId = this.thumbnail()?.id;
+        if (!frameId || !fragmentId) {
+            return;
+        }
+        this.frameApiService.deleteResource(frameId, fragmentId).subscribe(() => {
+            this.thumbnail.update((prev) => ({ ...prev, fileId: null, name: null, resource: null }));
+        });
+    }
+    onToggleDescriptionModal() {
+        this.isDescriptionModalOpen.update((prev) => !prev);
+    }
+    initUtilityEffect() {
+        const effectRef = effect(() => {
+            const title = this.title();
+            if (!title) {
+                return;
+            }
+            this.initTitleSubscriptions();
+            this.initFrameFragments();
+            effectRef.destroy();
+        });
+    }
+    initTitleSubscriptions() {
+        this.form.patchValue({ title: this.title() });
+        this.form.statusChanges
+            .pipe(takeUntilDestroyed(this.destroy))
+            .subscribe(() => this.isFormValidChanged.emit(this.checkFormValidation()));
+        this.form.valueChanges
+            .pipe(takeUntilDestroyed(this.destroy), startWith(this.form.value), pairwise(), debounceTime(this.CONTROL_DELAY), map(([prev, current]) => this.compareFormValues([prev, current])))
+            .subscribe((value) => {
+            this.formChanged.emit(value);
+        });
+    }
+    initFrameFragments() {
+        const frameId = this.framerId();
+        if (!frameId) {
+            return;
+        }
+        this.frameApiService.getFrame(frameId).subscribe((frame) => {
+            frame.fragments.forEach((fragment) => {
+                if (fragment.type === "J_TEXT" /* FragmentType.jText */) {
+                    this.editorId.set(fragment?.id);
+                }
+                if (fragment.type === "RESOURCE_FILE" /* FragmentType.resourceFile */) {
+                    this.setResourceFile(fragment);
+                }
+            });
+        });
+    }
+    compareFormValues([prevGroup, currentGruop]) {
+        const keys = Object.keys(currentGruop);
+        const changedFields = {};
+        keys.forEach((key) => {
+            const prev = prevGroup[key];
+            const current = currentGruop[key];
+            if (prev === current) {
+                return;
+            }
+            changedFields[key] = current;
+        });
+        return changedFields;
+    }
+    setResourceFile(resource) {
+        const url = this.baseResourceUrl() + resource.fileId;
+        this.thumbnail.set(resource);
+        if (!url || resource?.name?.split('.').pop() !== 'mp4') {
+            return;
+        }
+        this.getCaptureFromVideo(url);
+    }
+    getFile(files) {
+        const file = files.item(0);
+        if (!file) {
+            return;
+        }
+        if (file.size > this.MAX_FILE_SIZE) {
+            this.cuiAlertService
+                .open(this.translocoService.translate('INVALID_FILE_SIZE'), {
+                status: 'error'
+            })
+                .subscribe();
+            return;
+        }
+        const isVideo = file.name.split('.').at(-1) === 'mp4';
+        const url = URL.createObjectURL(file);
+        if (isVideo) {
+            this.getCaptureFromVideo(url, file);
+        }
+        else {
+            this.thumbnail.update((prev) => ({ ...prev, name: file.name, resource: url }));
+        }
+        this.uploadFile(file);
+    }
+    uploadFile(file) {
+        const frameId = this.framerId();
+        const fragmentId = this.thumbnail()?.id;
+        if (!frameId || !fragmentId) {
+            return;
+        }
+        const formData = new FormData();
+        formData.append('resource', file);
+        this.frameApiService.uploadResource(formData, frameId, fragmentId).subscribe();
+    }
+    getCaptureFromVideo(url, file) {
+        const canvas = document.createElement('canvas');
+        const video = document.createElement('video');
+        video.src = url;
+        video.currentTime = 1;
+        canvas.width = 184;
+        canvas.height = 120;
+        video.onloadeddata = () => {
+            const context = canvas.getContext('2d');
+            if (!context) {
+                return;
+            }
+            context.drawImage(video, 0, 0, canvas.width, canvas.height);
+            canvas.toBlob((blob) => {
+                if (!blob) {
+                    return;
+                }
+                const videoCaptureUrl = URL.createObjectURL(blob);
+                this.thumbnail.update((prev) => ({
+                    ...prev,
+                    name: (file?.name || prev?.name),
+                    resource: videoCaptureUrl
+                }));
+            });
+        };
+        video.load();
+    }
+    checkFormValidation() {
+        console.log(this.isDescriptionEmpty(), this.form.invalid);
+        return !this.isDescriptionEmpty() && !this.form.invalid;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiUtilityInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiUtilityInfoComponent, isStandalone: true, selector: "cui-utility-info", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, baseResourceUrl: { classPropertyName: "baseResourceUrl", publicName: "baseResourceUrl", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { formChanged: "formChanged", isFormValidChanged: "isFormValidChanged" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <section class=\"content\">\r\n    <cui-form-field>\r\n        <label cuiLabel [isRequired]=\"true\" [for]=\"titleId\">\r\n            {{ t('TITLE') }}\r\n        </label>\r\n        <cui-input-text\r\n            [cuiTextFieldId]=\"titleId\"\r\n            [cuiTextFieldPlaceholder]=\"t('ADD_TITLE')\"\r\n            [cuiTextFieldIsError]=\"isTitleError\"\r\n            [formControl]=\"form.controls.title\"\r\n        />\r\n        @if (isTitleError) {\r\n            <cui-general-control-error-hint [control]=\"form.controls.title\" [isVisible]=\"true\" />\r\n        }\r\n    </cui-form-field>\r\n    <cui-form-field>\r\n        <label cuiLabel [isRequired]=\"true\" [for]=\"descriptionId\">\r\n            {{ t('SHORT_DESCRIPTION') }}\r\n        </label>\r\n         <cui-input-text\r\n            [cuiTextFieldId]=\"descriptionId\"\r\n            cuiTextFieldPlaceholder=\"{{t('SHORT_DESCRIPTION')}}...\"\r\n            [cuiTextFieldIsError]=\"isDescriptionError\"\r\n            [formControl]=\"form.controls.description\"\r\n        />\r\n        @if (isDescriptionError) {\r\n            <cui-general-control-error-hint [control]=\"form.controls.description\" [isVisible]=\"true\" />\r\n        }\r\n    </cui-form-field>\r\n    <section class=\"file\">\r\n      <span class=\"title\">{{ t('THUMBNAIL') }}</span>\r\n      <div class=\"content__upload\">\r\n        <div class=\"content__upload-file\">\r\n          @if (thumbnail()?.name; as fileId) {\r\n          <div class=\"image\">\r\n            <span class=\"image__name\">{{ thumbnail()?.name }}</span>\r\n            <!-- TODO: ngSrc -->\r\n            <img class=\"image__view\" [src]=\"thumbnailUrl()\" height=\"120\" width=\"184\" alt=\"Thumbnail\" />\r\n          </div>\r\n          }\r\n          <button type=\"button\" cuiButton appearance=\"outlined-gray\" size=\"xxs\" icon=\"cuiIconUpload\"\r\n            (click)=\"onSelectFile()\">\r\n            {{ uploadButtonName() }}\r\n          </button>\r\n          @if (thumbnail()?.name) {\r\n          <button class=\"content__remove-button\" cuiButton appearance=\"link\" size=\"sm\" type=\"button\"\r\n            (click)=\"onRemoveThumbnail()\">\r\n            {{ t('REMOVE') }}\r\n          </button>\r\n          }\r\n          <span class=\"content__accepted\">\r\n            {{ t('ACCEPTED') }}: JPG, JPEG, PNG, MP4 {{ t('UP_TO') }} 20MB\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </section>\r\n    @if (editorId(); as editorId) {\r\n        <cui-editor-block\r\n            [title]=\"form.controls.title.value || title()\"\r\n            [config]=\"config()\"\r\n            [editorId]=\"editorId\"\r\n            [required]=\"true\"\r\n            (editorEmpty)=\"onEditorEmpty($event)\"\r\n        ></cui-editor-block>\r\n    }\r\n  </section>\r\n</ng-container>\r\n", styles: ["::ng-deep cui-dialog:has(.instruction-description-modal){inset:0;margin:auto;transform:none!important}:host{display:block}.title{font-weight:500;font-size:14px;line-height:20px;display:flex;gap:2px}.title_required{color:var(--cui-danger)}.content{display:flex;flex-direction:column;gap:16px;padding:16px 24px}.content__upload{padding:12px 16px;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-base-10)}.content__accepted{color:var(--cui-base-500)}.content__upload-file{display:flex;align-items:center;gap:8px}.content__upload-file input[type=file]{display:none}.content__remove-button ::ng-deep .c-content{color:var(--cui-danger)!important}.file{display:flex;flex-direction:column;gap:4px}.description_invalid{border:1px solid var(--cui-danger)}.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}.button-save{margin-left:auto}.instruction-description-modal{text-transform:none}.empty{padding:16px;color:var(--cui-base-500);text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CuiAccordionModule) }, { kind: "ngmodule", type: i0.forwardRef(() => CuiButtonModule) }, { kind: "component", type: i0.forwardRef(() => CuiButtonComponent), selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "ngmodule", type: i0.forwardRef(() => CuiFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => CuiFormFieldComponent), selector: "cui-form-field" }, { kind: "ngmodule", type: i0.forwardRef(() => CuiHintModule) }, { kind: "ngmodule", type: i0.forwardRef(() => CuiInputModule) }, { kind: "component", type: i0.forwardRef(() => CuiInputTextComponent), selector: "cui-input-text" }, { kind: "directive", type: i0.forwardRef(() => CuiTextFieldIdDirective), selector: "[cuiTextFieldId]", inputs: ["cuiTextFieldId"] }, { kind: "directive", type: i0.forwardRef(() => CuiTextFieldPlaceholderDirective), selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "directive", type: i0.forwardRef(() => CuiTextFieldIsErrorDirective), selector: "[cuiTextFieldIsError]", inputs: ["cuiTextFieldIsError"] }, { kind: "ngmodule", type: i0.forwardRef(() => CuiLabelModule) }, { kind: "component", type: i0.forwardRef(() => CuiLabelComponent), selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "component", type: i0.forwardRef(() => CuiEditorBlockComponent), selector: "cui-editor-block", inputs: ["title", "editorId", "config", "required"], outputs: ["editorEmpty"] }, { kind: "component", type: i0.forwardRef(() => CuiGeneralControlErrorHintComponent), selector: "cui-general-control-error-hint", inputs: ["control", "isVisible"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i2$1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i2$1.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => TranslocoDirective), selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiUtilityInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-utility-info', imports: [
+                        CuiAccordionModule,
+                        CuiButtonModule,
+                        CuiFormFieldModule,
+                        CuiHintModule,
+                        CuiInputModule,
+                        CuiLabelModule,
+                        forwardRef(() => CuiEditorBlockComponent),
+                        CuiGeneralControlErrorHintComponent,
+                        ReactiveFormsModule,
+                        TranslocoDirective,
+                        CuiTooltip
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n  <section class=\"content\">\r\n    <cui-form-field>\r\n        <label cuiLabel [isRequired]=\"true\" [for]=\"titleId\">\r\n            {{ t('TITLE') }}\r\n        </label>\r\n        <cui-input-text\r\n            [cuiTextFieldId]=\"titleId\"\r\n            [cuiTextFieldPlaceholder]=\"t('ADD_TITLE')\"\r\n            [cuiTextFieldIsError]=\"isTitleError\"\r\n            [formControl]=\"form.controls.title\"\r\n        />\r\n        @if (isTitleError) {\r\n            <cui-general-control-error-hint [control]=\"form.controls.title\" [isVisible]=\"true\" />\r\n        }\r\n    </cui-form-field>\r\n    <cui-form-field>\r\n        <label cuiLabel [isRequired]=\"true\" [for]=\"descriptionId\">\r\n            {{ t('SHORT_DESCRIPTION') }}\r\n        </label>\r\n         <cui-input-text\r\n            [cuiTextFieldId]=\"descriptionId\"\r\n            cuiTextFieldPlaceholder=\"{{t('SHORT_DESCRIPTION')}}...\"\r\n            [cuiTextFieldIsError]=\"isDescriptionError\"\r\n            [formControl]=\"form.controls.description\"\r\n        />\r\n        @if (isDescriptionError) {\r\n            <cui-general-control-error-hint [control]=\"form.controls.description\" [isVisible]=\"true\" />\r\n        }\r\n    </cui-form-field>\r\n    <section class=\"file\">\r\n      <span class=\"title\">{{ t('THUMBNAIL') }}</span>\r\n      <div class=\"content__upload\">\r\n        <div class=\"content__upload-file\">\r\n          @if (thumbnail()?.name; as fileId) {\r\n          <div class=\"image\">\r\n            <span class=\"image__name\">{{ thumbnail()?.name }}</span>\r\n            <!-- TODO: ngSrc -->\r\n            <img class=\"image__view\" [src]=\"thumbnailUrl()\" height=\"120\" width=\"184\" alt=\"Thumbnail\" />\r\n          </div>\r\n          }\r\n          <button type=\"button\" cuiButton appearance=\"outlined-gray\" size=\"xxs\" icon=\"cuiIconUpload\"\r\n            (click)=\"onSelectFile()\">\r\n            {{ uploadButtonName() }}\r\n          </button>\r\n          @if (thumbnail()?.name) {\r\n          <button class=\"content__remove-button\" cuiButton appearance=\"link\" size=\"sm\" type=\"button\"\r\n            (click)=\"onRemoveThumbnail()\">\r\n            {{ t('REMOVE') }}\r\n          </button>\r\n          }\r\n          <span class=\"content__accepted\">\r\n            {{ t('ACCEPTED') }}: JPG, JPEG, PNG, MP4 {{ t('UP_TO') }} 20MB\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </section>\r\n    @if (editorId(); as editorId) {\r\n        <cui-editor-block\r\n            [title]=\"form.controls.title.value || title()\"\r\n            [config]=\"config()\"\r\n            [editorId]=\"editorId\"\r\n            [required]=\"true\"\r\n            (editorEmpty)=\"onEditorEmpty($event)\"\r\n        ></cui-editor-block>\r\n    }\r\n  </section>\r\n</ng-container>\r\n", styles: ["::ng-deep cui-dialog:has(.instruction-description-modal){inset:0;margin:auto;transform:none!important}:host{display:block}.title{font-weight:500;font-size:14px;line-height:20px;display:flex;gap:2px}.title_required{color:var(--cui-danger)}.content{display:flex;flex-direction:column;gap:16px;padding:16px 24px}.content__upload{padding:12px 16px;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-base-10)}.content__accepted{color:var(--cui-base-500)}.content__upload-file{display:flex;align-items:center;gap:8px}.content__upload-file input[type=file]{display:none}.content__remove-button ::ng-deep .c-content{color:var(--cui-danger)!important}.file{display:flex;flex-direction:column;gap:4px}.description_invalid{border:1px solid var(--cui-danger)}.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}.button-save{margin-left:auto}.instruction-description-modal{text-transform:none}.empty{padding:16px;color:var(--cui-base-500);text-align:center}\n"] }]
+        }], ctorParameters: () => [] });
+
+class CuiCheckListBlockService {
+    constructor() {
+        this.checkListItemsSignal = signal(null);
+        this.componentIdSignal = signal(null);
+        this.isDragAvailableSignal = signal(false);
+        this.checkListItems = this.checkListItemsSignal.asReadonly();
+        this.componentId = this.componentIdSignal.asReadonly();
+        this.isDragAvailable = this.isDragAvailableSignal.asReadonly();
+    }
+    setCheckListItems(checkListItems) {
+        this.checkListItemsSignal.set(checkListItems);
+    }
+    addCheckListItem(checkListItem) {
+        this.checkListItemsSignal.update((value) => (value ? [...value, checkListItem] : [checkListItem]));
+    }
+    updateCheckListItem(updatedCheckListItem) {
+        if (!this.checkListItemsSignal()) {
+            return;
+        }
+        this.checkListItemsSignal.update((value) => {
+            const updateCheckListItemIndex = value.findIndex((checkListItem) => checkListItem.id === updatedCheckListItem.id);
+            value[updateCheckListItemIndex] = updatedCheckListItem;
+            return [...value];
+        });
+    }
+    deleteCheckListItem(id) {
+        if (!this.checkListItemsSignal()) {
+            return;
+        }
+        this.checkListItemsSignal.update((value) => {
+            const deletedItemIndex = value.findIndex((checklistItem) => checklistItem.id === id);
+            value.splice(deletedItemIndex, 1);
+            return [...value];
+        });
+    }
+    setComponentId(id) {
+        this.componentIdSignal.set(id);
+    }
+    toggleDragPermission(isDragButtonVisible) {
+        this.isDragAvailableSignal.set(isDragButtonVisible);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCheckListBlockService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCheckListBlockService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCheckListBlockService, decorators: [{
+            type: Injectable
+        }] });
+
+class CuiCheckListBlockListItemActionCardComponent {
+    get photoGroup() {
+        return this.actionForm.get('photo');
+    }
+    get commentGroup() {
+        return this.actionForm.get('comment');
+    }
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.nonNullableFormBuilder = inject(NonNullableFormBuilder);
+        this.purposeType = input();
+        this.isConsiderationNeeded = input(false);
+        this.actionInfo = input.required();
+        this.consideredCorrectChanged = output();
+        this.checkListActionChanged = output();
+        this._actionInfo = signal(null);
+        this.attachmentPhotoAction = computed(() => this.actionInfo().actions.find((contentAction) => contentAction.contentActionType === 'ATTACHMENT_PHOTO'));
+        this.textAreaAction = computed(() => this.actionInfo().actions.find((contentAction) => contentAction.contentActionType === 'TEXT_AREA'));
+        this.isConsideredCorrectControl = this.nonNullableFormBuilder.control({
+            value: false,
+            disabled: false
+        });
+        effect(() => {
+            this._actionInfo.set(this.actionInfo());
+            if (!this.purposeType() || !this.isConsiderationNeeded()) {
+                return;
+            }
+            this.isConsideredCorrectControl.setValue(this.actionInfo().considerCorrect, { emitEvent: false });
+        }, { allowSignalWrites: true });
+    }
+    ngOnInit() {
+        this.initActionForm();
+    }
+    initActionForm() {
+        this.actionForm = this.nonNullableFormBuilder.group({
+            photo: this.nonNullableFormBuilder.group({
+                isEnable: this.attachmentPhotoAction().isEnable,
+                isRequired: {
+                    value: this.attachmentPhotoAction().isRequired,
+                    disabled: !this.attachmentPhotoAction().isEnable
+                }
+            }),
+            comment: this.nonNullableFormBuilder.group({
+                isEnable: this.textAreaAction().isEnable,
+                isRequired: {
+                    value: this.textAreaAction().isRequired,
+                    disabled: !this.textAreaAction().isEnable
+                }
+            })
+        });
+        this.initActionFormSegmentsSubscriptions();
+        if (!this.isConsiderationNeeded()) {
+            return;
+        }
+        this.isConsideredCorrectControl.setValue(this.actionInfo().considerCorrect, { emitEvent: false });
+    }
+    initActionFormSegmentsSubscriptions() {
+        this.isConsideredCorrectControlSubscription();
+        this.initPhotoGroupSubscription();
+        this.initCommentGroupSubscription();
+    }
+    isConsideredCorrectControlSubscription() {
+        this.isConsideredCorrectControl.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.consideredCorrectChanged.emit(this._actionInfo().id));
+    }
+    initPhotoGroupSubscription() {
+        this.photoGroup.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
+            if (!value.isEnable) {
+                this.photoGroup.get('isRequired')?.setValue(false, { emitEvent: false });
+                this.photoGroup.get('isRequired')?.disable({ emitEvent: false });
+                this.checkListActionChanged.emit({
+                    id: this.attachmentPhotoAction().id,
+                    ...this.photoGroup.getRawValue()
+                });
+                return;
+            }
+            this.photoGroup.get('isRequired')?.enable({ emitEvent: false });
+            this.checkListActionChanged.emit({
+                id: this.attachmentPhotoAction().id,
+                ...this.photoGroup.value
+            });
+        });
+    }
+    initCommentGroupSubscription() {
+        this.commentGroup.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
+            if (!value.isEnable) {
+                this.commentGroup.get('isRequired')?.setValue(false, { emitEvent: false });
+                this.commentGroup.get('isRequired')?.disable({ emitEvent: false });
+                this.checkListActionChanged.emit({
+                    id: this.textAreaAction().id,
+                    ...this.commentGroup.getRawValue()
+                });
+                return;
+            }
+            this.commentGroup.get('isRequired')?.enable({ emitEvent: false });
+            this.checkListActionChanged.emit({
+                id: this.textAreaAction().id,
+                ...this.commentGroup.value
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCheckListBlockListItemActionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiCheckListBlockListItemActionCardComponent, isStandalone: true, selector: "cui-checklist-block-list-item-action-card", inputs: { purposeType: { classPropertyName: "purposeType", publicName: "purposeType", isSignal: true, isRequired: false, transformFunction: null }, isConsiderationNeeded: { classPropertyName: "isConsiderationNeeded", publicName: "isConsiderationNeeded", isSignal: true, isRequired: false, transformFunction: null }, actionInfo: { classPropertyName: "actionInfo", publicName: "actionInfo", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { consideredCorrectChanged: "consideredCorrectChanged", checkListActionChanged: "checkListActionChanged" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <div\r\n        class=\"card\"\r\n        [formGroup]=\"actionForm\"\r\n    >\r\n        <div class=\"title-container\">\r\n            <span class=\"title\">{{ actionInfo().title }}</span>\r\n            @if (isConsiderationNeeded()) {\r\n                <label\r\n                    cuiLabel\r\n                    class=\"title__input\"\r\n                >\r\n                    <input\r\n                        cuiRadio\r\n                        type=\"radio\"\r\n                        [checked]=\"actionInfo().considerCorrect\"\r\n                        [formControl]=\"isConsideredCorrectControl\"\r\n                        [value]=\"true\"\r\n                    />\r\n                    {{ t('CONSIDER_CORRECT') }}\r\n                </label>\r\n            }\r\n        </div>\r\n        <div class=\"blocks\">\r\n            <div\r\n                class=\"block-card\"\r\n                [formGroup]=\"photoGroup\"\r\n            >\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiCheckbox\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isEnable\"\r\n                    />\r\n                    {{ t('PHOTO') }}\r\n                </label>\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiToggle\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isRequired\"\r\n                    />\r\n                    {{ t('REQUIRED') }}\r\n                </label>\r\n            </div>\r\n            <div\r\n                class=\"block-card\"\r\n                [formGroup]=\"commentGroup\"\r\n            >\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiCheckbox\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isEnable\"\r\n                    />\r\n                    {{ t('COMMENT') }}\r\n                </label>\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiToggle\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isRequired\"\r\n                    />\r\n                    {{ t('REQUIRED') }}\r\n                </label>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [":host{flex:1}.card{padding:11px;display:flex;flex-direction:column;gap:10px;border:1px solid var(--cui-base-200);border-radius:8px}.title-container{display:flex;flex-direction:row;gap:8px;justify-content:space-between;align-items:center}.title{font-weight:500;font-size:14px;line-height:20px}.title__input{font-weight:400;font-size:14px;line-height:20px}.blocks{display:flex;flex-direction:column;gap:8px}.block-card{padding:13px 11px;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--cui-base-200);border-radius:8px}.block-card_multiple-lines{flex-direction:column;align-items:unset}.block-card__checkboxes-container{padding:13px 8px;display:flex;gap:12px}\n"], dependencies: [{ kind: "ngmodule", type: CuiCheckboxModule }, { kind: "component", type: CuiCheckboxComponent, selector: "input[type=\"checkbox\"][cuiCheckbox]" }, { kind: "ngmodule", type: CuiFormFieldModule }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "component", type: CuiLabelComponent, selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "ngmodule", type: CuiRadioModule }, { kind: "component", type: CuiRadioComponent, selector: "input[type=\"radio\"][cuiRadio]" }, { kind: "ngmodule", type: CuiSelectModule }, { kind: "ngmodule", type: CuiTextareaModule }, { kind: "ngmodule", type: CuiTextFieldControllerModule }, { kind: "ngmodule", type: CuiToggleModule }, { kind: "component", type: CuiToggleComponent, selector: "input[type=\"checkbox\"][cuiToggle]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCheckListBlockListItemActionCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-checklist-block-list-item-action-card', imports: [
+                        CuiCheckboxModule,
+                        CuiFormFieldModule,
+                        CuiLabelModule,
+                        CuiRadioModule,
+                        CuiSelectModule,
+                        CuiTextareaModule,
+                        CuiTextFieldControllerModule,
+                        CuiToggleModule,
+                        ReactiveFormsModule,
+                        TranslocoDirective
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n    <div\r\n        class=\"card\"\r\n        [formGroup]=\"actionForm\"\r\n    >\r\n        <div class=\"title-container\">\r\n            <span class=\"title\">{{ actionInfo().title }}</span>\r\n            @if (isConsiderationNeeded()) {\r\n                <label\r\n                    cuiLabel\r\n                    class=\"title__input\"\r\n                >\r\n                    <input\r\n                        cuiRadio\r\n                        type=\"radio\"\r\n                        [checked]=\"actionInfo().considerCorrect\"\r\n                        [formControl]=\"isConsideredCorrectControl\"\r\n                        [value]=\"true\"\r\n                    />\r\n                    {{ t('CONSIDER_CORRECT') }}\r\n                </label>\r\n            }\r\n        </div>\r\n        <div class=\"blocks\">\r\n            <div\r\n                class=\"block-card\"\r\n                [formGroup]=\"photoGroup\"\r\n            >\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiCheckbox\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isEnable\"\r\n                    />\r\n                    {{ t('PHOTO') }}\r\n                </label>\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiToggle\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isRequired\"\r\n                    />\r\n                    {{ t('REQUIRED') }}\r\n                </label>\r\n            </div>\r\n            <div\r\n                class=\"block-card\"\r\n                [formGroup]=\"commentGroup\"\r\n            >\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiCheckbox\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isEnable\"\r\n                    />\r\n                    {{ t('COMMENT') }}\r\n                </label>\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiToggle\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isRequired\"\r\n                    />\r\n                    {{ t('REQUIRED') }}\r\n                </label>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [":host{flex:1}.card{padding:11px;display:flex;flex-direction:column;gap:10px;border:1px solid var(--cui-base-200);border-radius:8px}.title-container{display:flex;flex-direction:row;gap:8px;justify-content:space-between;align-items:center}.title{font-weight:500;font-size:14px;line-height:20px}.title__input{font-weight:400;font-size:14px;line-height:20px}.blocks{display:flex;flex-direction:column;gap:8px}.block-card{padding:13px 11px;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--cui-base-200);border-radius:8px}.block-card_multiple-lines{flex-direction:column;align-items:unset}.block-card__checkboxes-container{padding:13px 8px;display:flex;gap:12px}\n"] }]
+        }], ctorParameters: () => [] });
+
+class CuiCheckListBlockListItemActionWithVerificationComponent {
+    constructor() {
+        this.nodeCheckListApiService = inject(CuiNodeChecklistApiService);
+        this.checkListBlockService = inject(CuiCheckListBlockService);
+        this.checkListItem = input.required();
+    }
+    onConsiderCorrectChanged(actionId, purposeType) {
+        const requestData = {
+            nodeCheckListId: this.checkListItem().id,
+            assigneePurposeType: purposeType,
+            actionId
+        };
+        this.nodeCheckListApiService
+            .updateNodeCheckListItemIsConsideredCorrect(requestData)
+            .subscribe((checkListItem) => this.checkListBlockService.updateCheckListItem(checkListItem));
+    }
+    onCheckListActionChanged(actionContent, actionId, purposeType) {
+        const requestData = {
+            nodeCheckListId: this.checkListItem().id,
+            assigneePurposeType: purposeType,
+            actionId,
+            contentId: actionContent.id,
+            isEnable: actionContent.isEnable,
+            isRequired: actionContent.isRequired
+        };
+        this.nodeCheckListApiService
+            .updateNodeCheckListItemActionContent(requestData)
+            .subscribe((checkListItem) => this.checkListBlockService.updateCheckListItem(checkListItem));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCheckListBlockListItemActionWithVerificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiCheckListBlockListItemActionWithVerificationComponent, isStandalone: true, selector: "cui-checklist-block-list-item-action-with-verification", inputs: { checkListItem: { classPropertyName: "checkListItem", publicName: "checkListItem", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <ng-container *cuiLet=\"checkListItem().content as checkListItemContent\">\r\n        <div class=\"action\">\r\n            <div class=\"action__header action__assignee-header\">\r\n                {{ t('CONDITIONAL_LOGIC_FOR_ASSIGNEE') | uppercase }}\r\n            </div>\r\n            <div class=\"action__content\">\r\n                <div class=\"cards-container\">\r\n                    <cui-checklist-block-list-item-action-card\r\n                        [purposeType]=\"'ASSIGN'\"\r\n                        [actionInfo]=\"checkListItemContent.actionsAssignee![0]\"\r\n                        [isConsiderationNeeded]=\"true\"\r\n                        (consideredCorrectChanged)=\"onConsiderCorrectChanged($event, 'ASSIGN')\"\r\n                        (checkListActionChanged)=\"\r\n                            onCheckListActionChanged($event, checkListItemContent.actionsAssignee![0].id, 'ASSIGN')\r\n                        \"\r\n                    />\r\n                    <cui-checklist-block-list-item-action-card\r\n                        [purposeType]=\"'ASSIGN'\"\r\n                        [actionInfo]=\"checkListItemContent.actionsAssignee![1]\"\r\n                        [isConsiderationNeeded]=\"true\"\r\n                        (consideredCorrectChanged)=\"onConsiderCorrectChanged($event, 'ASSIGN')\"\r\n                        (checkListActionChanged)=\"\r\n                            onCheckListActionChanged($event, checkListItemContent.actionsAssignee![1].id, 'ASSIGN')\r\n                        \"\r\n                    />\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"action\">\r\n            <div class=\"action__header action__approver-header\">\r\n                {{ t('CONDITIONAL_LOGIC_FOR_APPROVER') | uppercase }}\r\n            </div>\r\n            <div class=\"action__content\">\r\n                <div class=\"cards-container\">\r\n                    <cui-checklist-block-list-item-action-card\r\n                        [purposeType]=\"'APPROVE'\"\r\n                        [actionInfo]=\"checkListItemContent.actionsApprove![0]\"\r\n                        (consideredCorrectChanged)=\"onConsiderCorrectChanged($event, 'APPROVE')\"\r\n                        (checkListActionChanged)=\"\r\n                            onCheckListActionChanged($event, checkListItemContent.actionsApprove![0].id, 'APPROVE')\r\n                        \"\r\n                    />\r\n                    <cui-checklist-block-list-item-action-card\r\n                        [purposeType]=\"'APPROVE'\"\r\n                        [actionInfo]=\"checkListItemContent.actionsApprove![1]\"\r\n                        (consideredCorrectChanged)=\"onConsiderCorrectChanged($event, 'APPROVE')\"\r\n                        (checkListActionChanged)=\"\r\n                            onCheckListActionChanged($event, checkListItemContent.actionsApprove![1].id, 'APPROVE')\r\n                        \"\r\n                    />\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</ng-container>\r\n", styles: [":host{padding-right:15px;padding-left:15px;padding-bottom:15px;display:flex;flex-direction:column;gap:16px;border-radius:inherit}.action{display:flex;flex-direction:column;border:1px solid var(--cui-base-200);border-radius:8px}.action__content{padding:15px;display:flex;flex-direction:column;border-radius:8px;background:var(--cui-base-0);gap:16px}.action__header{font-weight:400;font-size:12px;line-height:14px;padding:15px 19px 15.5px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--cui-base-900);border-bottom:.5px solid var(--cui-base-200);border-radius:8px 8px 0 0}.action__assignee-header{background:var(--cui-badge-warning-bg)}.action__approver-header{background:var(--cui-badge-violet-bg)}.action__estimated-time{display:flex;flex-direction:column;gap:4px}.action__input{padding:11px 13px;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-gray-10);outline:none}.action__input:focus-within{box-shadow:0 0 0 2px var(--cui-blue-100);border-color:var(--cui-blue-600)}.cards-container{display:flex;flex-direction:row;justify-items:center;gap:16px}\n"], dependencies: [{ kind: "component", type: CuiCheckListBlockListItemActionCardComponent, selector: "cui-checklist-block-list-item-action-card", inputs: ["purposeType", "isConsiderationNeeded", "actionInfo"], outputs: ["consideredCorrectChanged", "checkListActionChanged"] }, { kind: "directive", type: CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCheckListBlockListItemActionWithVerificationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-checklist-block-list-item-action-with-verification', imports: [CuiCheckListBlockListItemActionCardComponent, CuiLetDirective, TranslocoDirective, UpperCasePipe], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n    <ng-container *cuiLet=\"checkListItem().content as checkListItemContent\">\r\n        <div class=\"action\">\r\n            <div class=\"action__header action__assignee-header\">\r\n                {{ t('CONDITIONAL_LOGIC_FOR_ASSIGNEE') | uppercase }}\r\n            </div>\r\n            <div class=\"action__content\">\r\n                <div class=\"cards-container\">\r\n                    <cui-checklist-block-list-item-action-card\r\n                        [purposeType]=\"'ASSIGN'\"\r\n                        [actionInfo]=\"checkListItemContent.actionsAssignee![0]\"\r\n                        [isConsiderationNeeded]=\"true\"\r\n                        (consideredCorrectChanged)=\"onConsiderCorrectChanged($event, 'ASSIGN')\"\r\n                        (checkListActionChanged)=\"\r\n                            onCheckListActionChanged($event, checkListItemContent.actionsAssignee![0].id, 'ASSIGN')\r\n                        \"\r\n                    />\r\n                    <cui-checklist-block-list-item-action-card\r\n                        [purposeType]=\"'ASSIGN'\"\r\n                        [actionInfo]=\"checkListItemContent.actionsAssignee![1]\"\r\n                        [isConsiderationNeeded]=\"true\"\r\n                        (consideredCorrectChanged)=\"onConsiderCorrectChanged($event, 'ASSIGN')\"\r\n                        (checkListActionChanged)=\"\r\n                            onCheckListActionChanged($event, checkListItemContent.actionsAssignee![1].id, 'ASSIGN')\r\n                        \"\r\n                    />\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"action\">\r\n            <div class=\"action__header action__approver-header\">\r\n                {{ t('CONDITIONAL_LOGIC_FOR_APPROVER') | uppercase }}\r\n            </div>\r\n            <div class=\"action__content\">\r\n                <div class=\"cards-container\">\r\n                    <cui-checklist-block-list-item-action-card\r\n                        [purposeType]=\"'APPROVE'\"\r\n                        [actionInfo]=\"checkListItemContent.actionsApprove![0]\"\r\n                        (consideredCorrectChanged)=\"onConsiderCorrectChanged($event, 'APPROVE')\"\r\n                        (checkListActionChanged)=\"\r\n                            onCheckListActionChanged($event, checkListItemContent.actionsApprove![0].id, 'APPROVE')\r\n                        \"\r\n                    />\r\n                    <cui-checklist-block-list-item-action-card\r\n                        [purposeType]=\"'APPROVE'\"\r\n                        [actionInfo]=\"checkListItemContent.actionsApprove![1]\"\r\n                        (consideredCorrectChanged)=\"onConsiderCorrectChanged($event, 'APPROVE')\"\r\n                        (checkListActionChanged)=\"\r\n                            onCheckListActionChanged($event, checkListItemContent.actionsApprove![1].id, 'APPROVE')\r\n                        \"\r\n                    />\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</ng-container>\r\n", styles: [":host{padding-right:15px;padding-left:15px;padding-bottom:15px;display:flex;flex-direction:column;gap:16px;border-radius:inherit}.action{display:flex;flex-direction:column;border:1px solid var(--cui-base-200);border-radius:8px}.action__content{padding:15px;display:flex;flex-direction:column;border-radius:8px;background:var(--cui-base-0);gap:16px}.action__header{font-weight:400;font-size:12px;line-height:14px;padding:15px 19px 15.5px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--cui-base-900);border-bottom:.5px solid var(--cui-base-200);border-radius:8px 8px 0 0}.action__assignee-header{background:var(--cui-badge-warning-bg)}.action__approver-header{background:var(--cui-badge-violet-bg)}.action__estimated-time{display:flex;flex-direction:column;gap:4px}.action__input{padding:11px 13px;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-gray-10);outline:none}.action__input:focus-within{box-shadow:0 0 0 2px var(--cui-blue-100);border-color:var(--cui-blue-600)}.cards-container{display:flex;flex-direction:row;justify-items:center;gap:16px}\n"] }]
+        }] });
+
+class CuiCheckListBlockListItemActionWithoutVerificationComponent {
+    constructor() {
+        this.nodeCheckListApiService = inject(CuiNodeChecklistApiService);
+        this.checkListBlockService = inject(CuiCheckListBlockService);
+        this.checkListItem = input.required();
+    }
+    onCheckListActionChanged(actionContent, actionId) {
+        const requestData = {
+            nodeCheckListId: this.checkListItem().id,
+            assigneePurposeType: 'ASSIGN',
+            actionId,
+            contentId: actionContent.id,
+            isEnable: actionContent.isEnable,
+            isRequired: actionContent.isRequired
+        };
+        this.nodeCheckListApiService
+            .updateNodeCheckListItemActionContent(requestData)
+            .subscribe((checkListItem) => this.checkListBlockService.updateCheckListItem(checkListItem));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCheckListBlockListItemActionWithoutVerificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiCheckListBlockListItemActionWithoutVerificationComponent, isStandalone: true, selector: "cui-checklist-block-list-item-action-without-verification", inputs: { checkListItem: { classPropertyName: "checkListItem", publicName: "checkListItem", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <ng-container *cuiLet=\"checkListItem().content as checkListItemContent\">\r\n        <div class=\"action\">\r\n            <div class=\"action__header\">\r\n                {{ t('CONDITIONAL_LOGIC') | uppercase }}\r\n            </div>\r\n            <div class=\"action__content\">\r\n                <div class=\"cards-container\">\r\n                    <cui-checklist-block-list-item-action-card\r\n                        [actionInfo]=\"checkListItemContent.actionsAssignee![0]\"\r\n                        (checkListActionChanged)=\"\r\n                            onCheckListActionChanged($event, checkListItemContent.actionsAssignee![0].id)\r\n                        \"\r\n                    />\r\n                    <cui-checklist-block-list-item-action-card\r\n                        [actionInfo]=\"checkListItemContent.actionsAssignee![1]\"\r\n                        (checkListActionChanged)=\"\r\n                            onCheckListActionChanged($event, checkListItemContent.actionsAssignee![1].id)\r\n                        \"\r\n                    />\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</ng-container>\r\n", styles: [":host{padding-right:15px;padding-left:15px;padding-bottom:15px;border-radius:inherit}.action{display:flex;flex-direction:column;border:1px solid var(--cui-base-200);border-radius:8px}.action__content{padding:15px;display:flex;flex-direction:column;border-radius:8px;background:var(--cui-base-0);gap:16px}.action__header{font-weight:400;font-size:12px;line-height:14px;padding:15px 19px 15.5px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--cui-base-900);border-bottom:.5px solid var(--cui-base-200);border-radius:8px 8px 0 0}.cards-container{display:flex;flex-direction:row;justify-items:center;gap:16px}\n"], dependencies: [{ kind: "component", type: CuiCheckListBlockListItemActionCardComponent, selector: "cui-checklist-block-list-item-action-card", inputs: ["purposeType", "isConsiderationNeeded", "actionInfo"], outputs: ["consideredCorrectChanged", "checkListActionChanged"] }, { kind: "directive", type: CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCheckListBlockListItemActionWithoutVerificationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-checklist-block-list-item-action-without-verification', imports: [CuiCheckListBlockListItemActionCardComponent, CuiLetDirective, TranslocoDirective, UpperCasePipe], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n    <ng-container *cuiLet=\"checkListItem().content as checkListItemContent\">\r\n        <div class=\"action\">\r\n            <div class=\"action__header\">\r\n                {{ t('CONDITIONAL_LOGIC') | uppercase }}\r\n            </div>\r\n            <div class=\"action__content\">\r\n                <div class=\"cards-container\">\r\n                    <cui-checklist-block-list-item-action-card\r\n                        [actionInfo]=\"checkListItemContent.actionsAssignee![0]\"\r\n                        (checkListActionChanged)=\"\r\n                            onCheckListActionChanged($event, checkListItemContent.actionsAssignee![0].id)\r\n                        \"\r\n                    />\r\n                    <cui-checklist-block-list-item-action-card\r\n                        [actionInfo]=\"checkListItemContent.actionsAssignee![1]\"\r\n                        (checkListActionChanged)=\"\r\n                            onCheckListActionChanged($event, checkListItemContent.actionsAssignee![1].id)\r\n                        \"\r\n                    />\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</ng-container>\r\n", styles: [":host{padding-right:15px;padding-left:15px;padding-bottom:15px;border-radius:inherit}.action{display:flex;flex-direction:column;border:1px solid var(--cui-base-200);border-radius:8px}.action__content{padding:15px;display:flex;flex-direction:column;border-radius:8px;background:var(--cui-base-0);gap:16px}.action__header{font-weight:400;font-size:12px;line-height:14px;padding:15px 19px 15.5px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--cui-base-900);border-bottom:.5px solid var(--cui-base-200);border-radius:8px 8px 0 0}.cards-container{display:flex;flex-direction:row;justify-items:center;gap:16px}\n"] }]
+        }] });
+
+class CuiChecklistBlockTitleControlComponent {
+    constructor() {
+        this.control = input.required();
+    }
+    get isTitleError() {
+        return this.control().invalid && this.control().dirty;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiChecklistBlockTitleControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiChecklistBlockTitleControlComponent, isStandalone: true, selector: "cui-checklist-block-title-control", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <cui-form-field>\r\n        <label\r\n            cuiLabel\r\n            [isRequired]=\"true\"\r\n            for=\"title\"\r\n        >\r\n            {{ t('TITLE') }}\r\n        </label>\r\n        <cui-input-text\r\n            [formControl]=\"control()\"\r\n            cuiTextFieldId=\"title\"\r\n            [cuiTextFieldIsError]=\"isTitleError\"\r\n            cuiTextFieldPlaceholder=\"{{ t('ADD_A_TITLE') }}...\"\r\n        />\r\n        <cui-general-control-error-hint [control]=\"control()\" />\r\n    </cui-form-field>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CuiContextMenuModule }, { kind: "ngmodule", type: CuiFormFieldModule }, { kind: "component", type: CuiFormFieldComponent, selector: "cui-form-field" }, { kind: "ngmodule", type: CuiHintModule }, { kind: "ngmodule", type: CuiInputModule }, { kind: "component", type: CuiInputTextComponent, selector: "cui-input-text" }, { kind: "directive", type: CuiTextFieldIdDirective, selector: "[cuiTextFieldId]", inputs: ["cuiTextFieldId"] }, { kind: "directive", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "directive", type: CuiTextFieldIsErrorDirective, selector: "[cuiTextFieldIsError]", inputs: ["cuiTextFieldIsError"] }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "component", type: CuiLabelComponent, selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "ngmodule", type: CuiTextFieldControllerModule }, { kind: "component", type: CuiGeneralControlErrorHintComponent, selector: "cui-general-control-error-hint", inputs: ["control", "isVisible"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiChecklistBlockTitleControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-checklist-block-title-control', imports: [
+                        CuiContextMenuModule,
+                        CuiFormFieldModule,
+                        CuiHintModule,
+                        CuiInputModule,
+                        CuiLabelModule,
+                        CuiTextFieldControllerModule,
+                        CuiGeneralControlErrorHintComponent,
+                        ReactiveFormsModule,
+                        TranslocoDirective
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n    <cui-form-field>\r\n        <label\r\n            cuiLabel\r\n            [isRequired]=\"true\"\r\n            for=\"title\"\r\n        >\r\n            {{ t('TITLE') }}\r\n        </label>\r\n        <cui-input-text\r\n            [formControl]=\"control()\"\r\n            cuiTextFieldId=\"title\"\r\n            [cuiTextFieldIsError]=\"isTitleError\"\r\n            cuiTextFieldPlaceholder=\"{{ t('ADD_A_TITLE') }}...\"\r\n        />\r\n        <cui-general-control-error-hint [control]=\"control()\" />\r\n    </cui-form-field>\r\n</ng-container>\r\n" }]
+        }] });
+
+class CuiChecklistBlockListItemContainerComponent {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.nonNullableFormBuilder = inject(NonNullableFormBuilder);
+        this.translocoService = inject(TranslocoService);
+        this.cuiDialogService = inject(CuiDialogService);
+        this.treeStructApiService = inject(CuiTreeStructApiService);
+        this.checkListBlockService = inject(CuiCheckListBlockService);
+        this.nodeCheckListApiService = inject(CuiNodeChecklistApiService);
+        this.DEFAULT_CONTROL_DELAY = 700;
+        this.isOpen = signal(false);
+        this.checkListBlockItem = input.required();
+        this.config = input.required();
+        this.index = input(0);
+        this.componentId = this.checkListBlockService.componentId;
+        this.rotate = computed(() => `rotate(${this.isOpen() ? '0deg' : '-90deg'})`);
+        this.headerText = computed(() => this.checkListItem().title ? this.checkListItem().title : this.translocoService.translate('UNTITLED'));
+        this.checkListItem = computed(() => this.checkListBlockItem().content);
+        this.checkListItemComponent = computed(() => this.checkListBlockItem().component);
+        this.checkListItemWithOptions = computed(() => ({
+            ...this.checkListItem(),
+            options: [
+                {
+                    label: this.translocoService.translate('DUPLICATE'),
+                    icon: 'cuiIconCopy'
+                },
+                {
+                    label: this.translocoService.translate('DELETE'),
+                    icon: 'cuiIconTrash',
+                    color: 'var(--cui-danger)',
+                    command: this.openDeleteChecklistNodeModal.bind(this)
+                }
+            ]
+        }));
+        this.headerBorderColor = computed(() => {
+            const checkListItem = this.checkListItem();
+            if (checkListItem.content.actionsApprove !== null) {
+                return 'var(--cui-violet-bg)';
+            }
+            if ('acceptanceCriteriaEvaluations' in checkListItem.content.actionsAssignee[0]) {
+                return 'var(--cui-cyan-bg)';
+            }
+            return null;
+        });
+        this.iconChecklistType = computed(() => {
+            const checkListItem = this.checkListItem();
+            if (checkListItem.content.actionsApprove !== null) {
+                return 'cuiIconUsersSm';
+            }
+            if ('acceptanceCriteriaEvaluations' in checkListItem.content.actionsAssignee[0]) {
+                return 'cuiIconChecklist';
+            }
+            return 'cuiIconUserSm';
+        });
+        this.titleControl = this.nonNullableFormBuilder.control({ value: '', disabled: true }, cuiCreateDefaultValidators());
+    }
+    get isTitleEmpty() {
+        return !this.titleControl.value;
+    }
+    get isTitleError() {
+        return this.titleControl.invalid && this.titleControl.dirty;
+    }
+    ngOnInit() {
+        this.initControls();
+    }
+    onRowToggle() {
+        this.isOpen.update((prev) => !prev);
+    }
+    onAllowDrag() {
+        this.checkListBlockService.toggleDragPermission(true);
+    }
+    onProhibitDrag() {
+        this.checkListBlockService.toggleDragPermission(false);
+    }
+    initControls() {
+        this.initTitleControlValue();
+        this.initTitleControlSubscription();
+    }
+    initTitleControlValue() {
+        this.titleControl.enable();
+        this.titleControl.setValue(this.checkListItem().title ? this.checkListItem().title : '');
+    }
+    initTitleControlSubscription() {
+        this.titleControl.valueChanges
+            .pipe(debounceTime(this.DEFAULT_CONTROL_DELAY), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
+            .subscribe((titleValue) => {
+            if (this.titleControl.invalid) {
+                return;
+            }
+            this.nodeCheckListApiService
+                .updateNodeCheckListItemTitle(this.checkListItem().id, titleValue)
+                .subscribe(() => {
+                this.checkListBlockService.updateCheckListItem({
+                    ...this.checkListItem(),
+                    title: titleValue
+                });
+            });
+        });
+    }
+    openDeleteChecklistNodeModal() {
+        const content = ['THIS_ACTION_WILL_PERMANENTLY_DELETE_THE_ITEM_FROM_CHECKLIST'];
+        this.cuiDialogService
+            .open(CuiDeleteModalComponent, {
+            data: {
+                title: 'DELETE_EVALUATION_CHECKLIST_ITEM_QUESTION',
+                content,
+                delete: () => this.treeStructApiService.deleteTreeStructElement(this.componentId(), this.checkListItem().id)
+            }
+        })
+            .subscribe((data) => data?.canceled || this.checkListBlockService.deleteCheckListItem(this.checkListItem().id));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiChecklistBlockListItemContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiChecklistBlockListItemContainerComponent, isStandalone: true, selector: "cui-checklist-block-list-item-container", inputs: { checkListBlockItem: { classPropertyName: "checkListBlockItem", publicName: "checkListBlockItem", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <ng-container *cuiLet=\"checkListItemWithOptions() as checkListItem\">\r\n        <header\r\n            class=\"header\"\r\n            [style.border-left-color]=\"headerBorderColor()\"\r\n            [class.header__opened]=\"isOpen()\"\r\n        >\r\n            <button\r\n                class=\"icon-drag\"\r\n                cuiButton\r\n                cuiDragPointer\r\n                type=\"button\"\r\n                appearance=\"ghost\"\r\n                size=\"xxs\"\r\n                [icon]=\"'cuiIconDragHandleDots'\"\r\n                (mouseenter)=\"onAllowDrag()\"\r\n                (mouseleave)=\"onProhibitDrag()\"\r\n            ></button>\r\n            <button\r\n                cuiButton\r\n                type=\"button\"\r\n                appearance=\"ghost\"\r\n                size=\"xxs\"\r\n                [style.transform]=\"rotate()\"\r\n                icon=\"cuiIconCaretDownFillXxs\"\r\n                (click)=\"onRowToggle()\"\r\n            ></button>\r\n            <cui-svg\r\n                [icon]=\"iconChecklistType()\"\r\n                color=\"var(--cui-base-500)\"\r\n            />\r\n            <div class=\"header__content\">\r\n                <div class=\"header__numeration\">{{ index() }}.</div>\r\n                <div class=\"header__text\">{{ headerText() }}</div>\r\n            </div>\r\n            @if (isTitleEmpty) {\r\n                <cui-svg\r\n                    [cuiTooltip]=\"t('TITLE_IS_REQUIRED')\"\r\n                    icon=\"cuiIconAlertTriangle\"\r\n                    color=\"var(--cui-danger)\"\r\n                    class=\"icon\"\r\n                />\r\n            }\r\n            <button\r\n                #actionButton=\"elementRef\"\r\n                cuiButton\r\n                type=\"button\"\r\n                cuiElement\r\n                appearance=\"ghost\"\r\n                size=\"xxs\"\r\n                icon=\"cuiIconMoreVertical\"\r\n                class=\"list__context-menu-button\"\r\n            ></button>\r\n            <cui-context-menu\r\n                [items]=\"checkListItem.options\"\r\n                [target]=\"actionButton.nativeElement\"\r\n            />\r\n        </header>\r\n        @if (isOpen()) {\r\n            <div class=\"info\">\r\n                <cui-checklist-block-title-control [control]=\"titleControl\" />\r\n                <cui-editor-block\r\n                    [config]=\"config()\"\r\n                    [editorId]=\"checkListItem.textContainerId!\"\r\n                    [title]=\"titleControl.value\"\r\n                />\r\n            </div>\r\n            <ng-container\r\n                [ngComponentOutlet]=\"checkListItemComponent()\"\r\n                [ngComponentOutletInputs]=\"{\r\n                    checkListItem: checkListItem\r\n                }\"\r\n            />\r\n        }\r\n    </ng-container>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column;gap:16px;border-radius:inherit;background-color:var(--cui-base-0)}.header{padding-right:7px;padding-left:7px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:4px;background:var(--cui-base-0);border-radius:inherit;border-left:6px solid var(--cui-yellow-bg)}.header__content{display:flex;flex-direction:row;align-items:center;gap:8px;flex:1}.header__numeration{font-weight:600;font-size:13px;line-height:16px;padding-right:8px;padding-left:8px;display:flex;justify-content:center;align-items:center}.header__text{font-weight:500;font-size:14px;line-height:20px;padding-top:11px;padding-bottom:11px;flex:1;width:0;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}.header__opened{background:var(--cui-badge-info-bg);border-bottom:.5px solid var(--cui-base-200);border-bottom-left-radius:0;border-bottom-right-radius:0}.header:hover{background:var(--cui-base-10)}.info{padding-right:15px;padding-left:15px;display:flex;flex-direction:column;gap:16px}.icon{padding:6px;width:max-content}\n"], dependencies: [{ kind: "directive", type: CuiTooltipDirective, selector: "[cuiTooltip]:not(ng-container):not(ng-template)", inputs: ["cuiTooltipContext", "cuiTooltipAppearance", "cuiTooltip"] }, { kind: "component", type: CuiEditorBlockComponent, selector: "cui-editor-block", inputs: ["title", "editorId", "config", "required"], outputs: ["editorEmpty"] }, { kind: "component", type: CuiChecklistBlockTitleControlComponent, selector: "cui-checklist-block-title-control", inputs: ["control"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "ngmodule", type: CuiContextMenuModule }, { kind: "component", type: CuiContextMenuComponent, selector: "cui-context-menu[items][target]", inputs: ["items", "target"] }, { kind: "directive", type: CuiElementDirective, selector: "[cuiElement]", exportAs: ["elementRef"] }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "directive", type: CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: CuiDragPointerDirective, selector: "[cuiDragPointer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiChecklistBlockListItemContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-checklist-block-list-item-container', imports: [
+                        CuiTooltip,
+                        CuiEditorBlockComponent,
+                        CuiChecklistBlockTitleControlComponent,
+                        CuiButtonModule,
+                        CuiContextMenuModule,
+                        CuiElementDirective,
+                        CuiLabelModule,
+                        CuiLetDirective,
+                        CuiSvgModule,
+                        NgComponentOutlet,
+                        TranslocoDirective,
+                        CuiDragPointerDirective
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n    <ng-container *cuiLet=\"checkListItemWithOptions() as checkListItem\">\r\n        <header\r\n            class=\"header\"\r\n            [style.border-left-color]=\"headerBorderColor()\"\r\n            [class.header__opened]=\"isOpen()\"\r\n        >\r\n            <button\r\n                class=\"icon-drag\"\r\n                cuiButton\r\n                cuiDragPointer\r\n                type=\"button\"\r\n                appearance=\"ghost\"\r\n                size=\"xxs\"\r\n                [icon]=\"'cuiIconDragHandleDots'\"\r\n                (mouseenter)=\"onAllowDrag()\"\r\n                (mouseleave)=\"onProhibitDrag()\"\r\n            ></button>\r\n            <button\r\n                cuiButton\r\n                type=\"button\"\r\n                appearance=\"ghost\"\r\n                size=\"xxs\"\r\n                [style.transform]=\"rotate()\"\r\n                icon=\"cuiIconCaretDownFillXxs\"\r\n                (click)=\"onRowToggle()\"\r\n            ></button>\r\n            <cui-svg\r\n                [icon]=\"iconChecklistType()\"\r\n                color=\"var(--cui-base-500)\"\r\n            />\r\n            <div class=\"header__content\">\r\n                <div class=\"header__numeration\">{{ index() }}.</div>\r\n                <div class=\"header__text\">{{ headerText() }}</div>\r\n            </div>\r\n            @if (isTitleEmpty) {\r\n                <cui-svg\r\n                    [cuiTooltip]=\"t('TITLE_IS_REQUIRED')\"\r\n                    icon=\"cuiIconAlertTriangle\"\r\n                    color=\"var(--cui-danger)\"\r\n                    class=\"icon\"\r\n                />\r\n            }\r\n            <button\r\n                #actionButton=\"elementRef\"\r\n                cuiButton\r\n                type=\"button\"\r\n                cuiElement\r\n                appearance=\"ghost\"\r\n                size=\"xxs\"\r\n                icon=\"cuiIconMoreVertical\"\r\n                class=\"list__context-menu-button\"\r\n            ></button>\r\n            <cui-context-menu\r\n                [items]=\"checkListItem.options\"\r\n                [target]=\"actionButton.nativeElement\"\r\n            />\r\n        </header>\r\n        @if (isOpen()) {\r\n            <div class=\"info\">\r\n                <cui-checklist-block-title-control [control]=\"titleControl\" />\r\n                <cui-editor-block\r\n                    [config]=\"config()\"\r\n                    [editorId]=\"checkListItem.textContainerId!\"\r\n                    [title]=\"titleControl.value\"\r\n                />\r\n            </div>\r\n            <ng-container\r\n                [ngComponentOutlet]=\"checkListItemComponent()\"\r\n                [ngComponentOutletInputs]=\"{\r\n                    checkListItem: checkListItem\r\n                }\"\r\n            />\r\n        }\r\n    </ng-container>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column;gap:16px;border-radius:inherit;background-color:var(--cui-base-0)}.header{padding-right:7px;padding-left:7px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:4px;background:var(--cui-base-0);border-radius:inherit;border-left:6px solid var(--cui-yellow-bg)}.header__content{display:flex;flex-direction:row;align-items:center;gap:8px;flex:1}.header__numeration{font-weight:600;font-size:13px;line-height:16px;padding-right:8px;padding-left:8px;display:flex;justify-content:center;align-items:center}.header__text{font-weight:500;font-size:14px;line-height:20px;padding-top:11px;padding-bottom:11px;flex:1;width:0;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}.header__opened{background:var(--cui-badge-info-bg);border-bottom:.5px solid var(--cui-base-200);border-bottom-left-radius:0;border-bottom-right-radius:0}.header:hover{background:var(--cui-base-10)}.info{padding-right:15px;padding-left:15px;display:flex;flex-direction:column;gap:16px}.icon{padding:6px;width:max-content}\n"] }]
+        }] });
+
+class CuiCheckListBlockListItemEvaluationCriteriaComponent {
+    get isEvaluationInvalid() {
+        return this.criteriaGroup().controls.evaluation.invalid && this.isEditMode();
+    }
+    get isCriteriaInvalid() {
+        return this.criteriaGroup().controls.criteria.invalid && this.isEditMode();
+    }
+    constructor() {
+        this.cuiAlertService = inject(CuiAlertService);
+        this.translocoService = inject(TranslocoService);
+        this.EVALUATION_ALREADY_EXIST = `EVALUATION_ALREADY_EXIST`;
+        this.previousData = null;
+        this.isEditMode = signal(false);
+        this.isNew = computed(() => this.criteriaGroup().controls.isNew.value);
+        this.gap = computed(() => (this.isEditMode() ? 8 : 0));
+        this.isLoading = computed(() => this.loadingIds()[this.criteriaGroup().controls.id.value]);
+        this.isDragEnabled = computed(() => !this.isEditMode() && !this.isLoading());
+        this.loadingIds = input.required();
+        this.index = input.required();
+        this.criteriaGroup = input.required();
+        this.evaluationCriteriaFormArray = input.required();
+        this.saveClicked = output();
+        this.deleteClicked = output();
+        this.cancelClicked = output();
+        this.initNewEvaluationCriteriaEffect();
+        this.initEditModeEffect();
+    }
+    onSave() {
+        if (this.criteriaGroup().invalid) {
+            return;
+        }
+        const evaluation = `${this.criteriaGroup().controls.evaluation.value}`;
+        if (this.checkIsEvaluationCriteriaExist(evaluation)) {
+            this.cuiAlertService
+                .open(this.translocoService.translate(this.EVALUATION_ALREADY_EXIST, { evaluation }), {
+                status: 'error'
+            })
+                .subscribe();
+            return;
+        }
+        this.isEditMode.update((prev) => !prev);
+        this.saveClicked.emit(this.criteriaGroup().controls);
+    }
+    onDelete() {
+        const id = this.criteriaGroup().controls.id.value;
+        this.deleteClicked.emit(id);
+    }
+    onCancel() {
+        if (this.isNew()) {
+            this.cancelClicked.emit();
+        }
+        this.isEditMode.update((prev) => !prev);
+        if (!this.previousData) {
+            return;
+        }
+        this.criteriaGroup().setValue({
+            ...this.criteriaGroup().getRawValue(),
+            ...this.previousData
+        });
+    }
+    onToggleEditMode() {
+        const { criteria, evaluation } = this.criteriaGroup().getRawValue();
+        this.previousData = { criteria, evaluation };
+        this.isEditMode.update((prev) => !prev);
+    }
+    // TODO: Компонент должен был быть построен исключительно на реактивных формах
+    initEditModeEffect() {
+        effect(() => this.criteriaGroup()[this.isEditMode() ? 'enable' : 'disable']());
+    }
+    initNewEvaluationCriteriaEffect() {
+        effect(() => this.isEditMode.set(this.isNew()), { allowSignalWrites: true });
+    }
+    checkIsEvaluationCriteriaExist(evaluation) {
+        const controls = this.evaluationCriteriaFormArray().controls;
+        return controls.some((control) => {
+            if (control.controls.id.value === this.criteriaGroup().controls.id.value) {
+                return false;
+            }
+            return `${control.get('evaluation')?.value}` === evaluation;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCheckListBlockListItemEvaluationCriteriaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiCheckListBlockListItemEvaluationCriteriaComponent, isStandalone: true, selector: "li[cuiChecklistBlockListItemEvaluationCriteria]", inputs: { loadingIds: { classPropertyName: "loadingIds", publicName: "loadingIds", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, criteriaGroup: { classPropertyName: "criteriaGroup", publicName: "criteriaGroup", isSignal: true, isRequired: true, transformFunction: null }, evaluationCriteriaFormArray: { classPropertyName: "evaluationCriteriaFormArray", publicName: "evaluationCriteriaFormArray", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { saveClicked: "saveClicked", deleteClicked: "deleteClicked", cancelClicked: "cancelClicked" }, ngImport: i0, template: "<div *transloco=\"let t\">\r\n    <form\r\n        *cuiLet=\"criteriaGroup() as form\"\r\n        [formGroup]=\"form\"\r\n        [class.form_edit]=\"isEditMode()\"\r\n        clas=\"form\"\r\n    >\r\n        <div class=\"content\">\r\n            <span class=\"index\">{{ index() }}.</span>\r\n            @if (!isEditMode()) {\r\n                <cui-svg\r\n                    cuiDragPointer\r\n                    icon=\"cuiIconDragHandleDots\"\r\n                    color=\"var(--cui-base-500)\"\r\n                    class=\"icon\"\r\n                />\r\n            }\r\n            <div\r\n                style.gap=\"{{gap()}}px\"\r\n                class=\"wrapper\"\r\n            >\r\n                <cui-input-number\r\n                    formControlName=\"evaluation\"\r\n                    cuiTextFieldPlaceholder=\"0\"\r\n                    [cuiTextFieldIsError]=\"isEvaluationInvalid\"\r\n                    [min]=\"1\"\r\n                    [max]=\"99\"\r\n                    class=\"input-number\"\r\n                />\r\n                <textarea\r\n                    cuiTextarea\r\n                    formControlName=\"criteria\"\r\n                    [rows]=\"1\"\r\n                    [cuiTextFieldIsError]=\"isCriteriaInvalid\"\r\n                    placeholder=\"{{ t('ADD_A_DESCRIPTION') }}...\"\r\n                    class=\"textarea\"\r\n                ></textarea>\r\n            </div>\r\n            @if (isEditMode()) {\r\n                <button\r\n                    type=\"submit\"\r\n                    cuiIconButton\r\n                    icon=\"cuiIconCheck\"\r\n                    color=\"var(--cui-success)\"\r\n                    [disabled]=\"form.invalid\"\r\n                    class=\"button\"\r\n                    (click)=\"onSave()\"\r\n                ></button>\r\n                <button\r\n                    type=\"button\"\r\n                    cuiIconButton\r\n                    icon=\"cuiIconXCircle\"\r\n                    color=\"var(--cui-danger)\"\r\n                    class=\"button\"\r\n                    (click)=\"onCancel()\"\r\n                ></button>\r\n            } @else {\r\n                <button\r\n                    cuiButton\r\n                    type=\"button\"\r\n                    appearance=\"ghost\"\r\n                    size=\"xxs\"\r\n                    icon=\"cuiIconEdit\"\r\n                    [disabled]=\"isLoading()\"\r\n                    (click)=\"onToggleEditMode()\"\r\n                ></button>\r\n                <button\r\n                    cuiButton\r\n                    type=\"button\"\r\n                    appearance=\"ghost\"\r\n                    size=\"xxs\"\r\n                    icon=\"cuiIconTrash\"\r\n                    [isLoaderShown]=\"isLoading()\"\r\n                    (click)=\"onDelete()\"\r\n                ></button>\r\n            }\r\n        </div>\r\n        <cui-general-control-error-hint\r\n            [control]=\"form.controls.criteria\"\r\n            class=\"error-hint\"\r\n        />\r\n    </form>\r\n</div>\r\n", styles: [".form{display:flex;flex-direction:column;gap:8px}.form_edit{padding:12px;border-radius:8px;border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}.content{display:flex;gap:8px;align-items:center}.index{font-weight:500;font-size:14px;line-height:20px;width:22px}.icon{cursor:grab}.icon:active{cursor:grabbing}.wrapper{display:flex;flex-grow:1}.input-number{padding-right:9px;padding-left:9px;flex-shrink:0;width:44px;background:inherit}.input-number._disabled{cursor:initial;opacity:1;border-right-width:0;border-radius:8px 0 0 8px}.input-number ::ng-deep .c-input{text-align:center}.input-number ::ng-deep .c-input:disabled{cursor:text}.textarea{background:var(--cui-base-0)}.textarea:disabled{cursor:initial;opacity:1;background:var(--cui-base-0);border-left-width:0;border-radius:0 8px 8px 0}.button:disabled{cursor:not-allowed;opacity:.5}.error-hint{margin-left:82px}.cc-drag-drop-placeholder{height:44px;border:1px dashed var(--cui-base-200);border-radius:8px;background:var(--cui-base-0)}\n"], dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "ngmodule", type: CuiIconButtonModule }, { kind: "component", type: CuiIconButtonComponent, selector: "button[cuiIconButton][icon], a[cuiIconButton][icon]", inputs: ["icon", "color", "hoverColor"] }, { kind: "ngmodule", type: CuiInputModule }, { kind: "directive", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "directive", type: CuiTextFieldIsErrorDirective, selector: "[cuiTextFieldIsError]", inputs: ["cuiTextFieldIsError"] }, { kind: "directive", type: CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "ngmodule", type: CuiTextareaModule }, { kind: "component", type: CuiTextareaComponent, selector: "textarea[cuiTextarea]", inputs: ["rows", "noBordersAndPaddings"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: CuiInputNumberModule }, { kind: "component", type: CuiInputNumberComponent, selector: "cui-input-number", inputs: ["precision", "min", "max"] }, { kind: "directive", type: CuiDragPointerDirective, selector: "[cuiDragPointer]" }, { kind: "component", type: CuiGeneralControlErrorHintComponent, selector: "cui-general-control-error-hint", inputs: ["control", "isVisible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCheckListBlockListItemEvaluationCriteriaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'li[cuiChecklistBlockListItemEvaluationCriteria]', imports: [
+                        CuiButtonModule,
+                        CuiIconButtonModule,
+                        CuiInputModule,
+                        CuiLetDirective,
+                        CuiSvgModule,
+                        CuiTextareaModule,
+                        ReactiveFormsModule,
+                        TranslocoDirective,
+                        CuiInputNumberModule,
+                        CuiDragPointerDirective,
+                        CuiGeneralControlErrorHintComponent
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *transloco=\"let t\">\r\n    <form\r\n        *cuiLet=\"criteriaGroup() as form\"\r\n        [formGroup]=\"form\"\r\n        [class.form_edit]=\"isEditMode()\"\r\n        clas=\"form\"\r\n    >\r\n        <div class=\"content\">\r\n            <span class=\"index\">{{ index() }}.</span>\r\n            @if (!isEditMode()) {\r\n                <cui-svg\r\n                    cuiDragPointer\r\n                    icon=\"cuiIconDragHandleDots\"\r\n                    color=\"var(--cui-base-500)\"\r\n                    class=\"icon\"\r\n                />\r\n            }\r\n            <div\r\n                style.gap=\"{{gap()}}px\"\r\n                class=\"wrapper\"\r\n            >\r\n                <cui-input-number\r\n                    formControlName=\"evaluation\"\r\n                    cuiTextFieldPlaceholder=\"0\"\r\n                    [cuiTextFieldIsError]=\"isEvaluationInvalid\"\r\n                    [min]=\"1\"\r\n                    [max]=\"99\"\r\n                    class=\"input-number\"\r\n                />\r\n                <textarea\r\n                    cuiTextarea\r\n                    formControlName=\"criteria\"\r\n                    [rows]=\"1\"\r\n                    [cuiTextFieldIsError]=\"isCriteriaInvalid\"\r\n                    placeholder=\"{{ t('ADD_A_DESCRIPTION') }}...\"\r\n                    class=\"textarea\"\r\n                ></textarea>\r\n            </div>\r\n            @if (isEditMode()) {\r\n                <button\r\n                    type=\"submit\"\r\n                    cuiIconButton\r\n                    icon=\"cuiIconCheck\"\r\n                    color=\"var(--cui-success)\"\r\n                    [disabled]=\"form.invalid\"\r\n                    class=\"button\"\r\n                    (click)=\"onSave()\"\r\n                ></button>\r\n                <button\r\n                    type=\"button\"\r\n                    cuiIconButton\r\n                    icon=\"cuiIconXCircle\"\r\n                    color=\"var(--cui-danger)\"\r\n                    class=\"button\"\r\n                    (click)=\"onCancel()\"\r\n                ></button>\r\n            } @else {\r\n                <button\r\n                    cuiButton\r\n                    type=\"button\"\r\n                    appearance=\"ghost\"\r\n                    size=\"xxs\"\r\n                    icon=\"cuiIconEdit\"\r\n                    [disabled]=\"isLoading()\"\r\n                    (click)=\"onToggleEditMode()\"\r\n                ></button>\r\n                <button\r\n                    cuiButton\r\n                    type=\"button\"\r\n                    appearance=\"ghost\"\r\n                    size=\"xxs\"\r\n                    icon=\"cuiIconTrash\"\r\n                    [isLoaderShown]=\"isLoading()\"\r\n                    (click)=\"onDelete()\"\r\n                ></button>\r\n            }\r\n        </div>\r\n        <cui-general-control-error-hint\r\n            [control]=\"form.controls.criteria\"\r\n            class=\"error-hint\"\r\n        />\r\n    </form>\r\n</div>\r\n", styles: [".form{display:flex;flex-direction:column;gap:8px}.form_edit{padding:12px;border-radius:8px;border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}.content{display:flex;gap:8px;align-items:center}.index{font-weight:500;font-size:14px;line-height:20px;width:22px}.icon{cursor:grab}.icon:active{cursor:grabbing}.wrapper{display:flex;flex-grow:1}.input-number{padding-right:9px;padding-left:9px;flex-shrink:0;width:44px;background:inherit}.input-number._disabled{cursor:initial;opacity:1;border-right-width:0;border-radius:8px 0 0 8px}.input-number ::ng-deep .c-input{text-align:center}.input-number ::ng-deep .c-input:disabled{cursor:text}.textarea{background:var(--cui-base-0)}.textarea:disabled{cursor:initial;opacity:1;background:var(--cui-base-0);border-left-width:0;border-radius:0 8px 8px 0}.button:disabled{cursor:not-allowed;opacity:.5}.error-hint{margin-left:82px}.cc-drag-drop-placeholder{height:44px;border:1px dashed var(--cui-base-200);border-radius:8px;background:var(--cui-base-0)}\n"] }]
+        }], ctorParameters: () => [] });
+
+class CuiCheckListBlockListItemEvaluationComponent {
+    constructor() {
+        this.nonNullableFormBuilder = inject(NonNullableFormBuilder);
+        this.nodeCheckListApiService = inject(CuiNodeChecklistApiService);
+        this.checkListBlockService = inject(CuiCheckListBlockService);
+        this.cdRef = inject(ChangeDetectorRef);
+        this.cuiDialogService = inject(CuiDialogService);
+        this.isAvailableObserver = new Subject();
+        this.photoFormGroup = this.nonNullableFormBuilder.group({
+            isEnable: false,
+            isRequired: {
+                value: false,
+                disabled: true
+            }
+        });
+        this.commentFormGroup = this.nonNullableFormBuilder.group({
+            isEnable: false,
+            isRequired: {
+                value: false,
+                disabled: true
+            }
+        });
+        this.evaluationCriteriaFormArray = this.nonNullableFormBuilder.array([]);
+        this.loadingIds = signal({});
+        this.isAddButtonDisabled = signal(false);
+        this.assignee = computed(() => this.checkListItem().content.actionsAssignee[0]);
+        this.attachmentPhotoAction = computed(() => this.assignee().actions.find((contentAction) => contentAction.contentActionType === 'ATTACHMENT_PHOTO'));
+        this.textAreaAction = computed(() => this.assignee().actions.find((contentAction) => contentAction.contentActionType === 'TEXT_AREA'));
+        this.checkListItem = input.required();
+    }
+    getPointer(currentIndex) {
+        return currentIndex === 0
+            ? "BEFORE" /* NodeCheckListItemSwitchContentPointer.BEFORE */
+            : "AFTER" /* NodeCheckListItemSwitchContentPointer.AFTER */;
+    }
+    getTargetIndex(currentIndex) {
+        return currentIndex === 0 ? 1 : currentIndex - 1;
+    }
+    onDrop(event) {
+        const { prevIndex, index } = event;
+        if (prevIndex === index) {
+            return;
+        }
+        this.moveItemInArray(this.evaluationCriteriaFormArray.controls, prevIndex, index);
+        const movingElementId = this.evaluationCriteriaFormArray.at(index).value.id;
+        const targetItemId = this.evaluationCriteriaFormArray.at(this.getTargetIndex(index)).value.id;
+        const pointer = this.getPointer(index);
+        const requestBody = {
+            nodeCheckListId: this.checkListItem().id,
+            listEvaluationId: this.assignee().id,
+            movingElementId,
+            targetItemId,
+            pointer
+        };
+        this.nodeCheckListApiService.updateNodeCheckListItemSwitchContent(requestBody).subscribe({
+            error: () => {
+                this.moveItemInArray(this.evaluationCriteriaFormArray.controls, index, prevIndex);
+                this.cdRef.markForCheck();
+            }
+        });
+    }
+    onAddEvaluationCriteriaItem() {
+        const evaluationItemControl = this.createEvaluationFormGroup();
+        this.isAddButtonDisabled.set(true);
+        this.evaluationCriteriaFormArray.push(evaluationItemControl);
+    }
+    onSaveEvaluationCriteria(group) {
+        const isNew = group.isNew.value;
+        if (isNew) {
+            this.addEvaluationCriteria(group);
+            return;
+        }
+        this.updateEvaluationCriteria(group);
+    }
+    onCancelNewEvaluationCriteria() {
+        const lastIndex = this.evaluationCriteriaFormArray.length - 1;
+        this.isAddButtonDisabled.set(false);
+        this.evaluationCriteriaFormArray.removeAt(lastIndex);
+    }
+    openModalDeleteEvaluationCriteria(id) {
+        const content = ['DELETE_EVALUATION_CHECKLIST_ITEM_CONFIRMATION_TEXT'];
+        const criteria = this.findExistingEvaluationCriteria(id);
+        if (!criteria?.id) {
+            return;
+        }
+        this.loadingIds.update((ids) => ({ ...ids, [criteria.id]: true }));
+        this.cuiDialogService
+            .open(CuiDeleteModalComponent, {
+            data: {
+                title: 'DELETE_EVALUATION_CHECKLIST_ITEM',
+                content,
+                delete: () => this.nodeCheckListApiService
+                    .deleteEvaluationCriteriaItem(this.checkListItem().id, this.assignee().id, criteria.id)
+                    .pipe(switchMap((checkListItem) => {
+                    const index = this.evaluationCriteriaFormArray.controls.findIndex((control) => control.value.id === id);
+                    this.checkListBlockService.updateCheckListItem(checkListItem);
+                    this.evaluationCriteriaFormArray.removeAt(index);
+                    return of(null);
+                }))
+            }
+        })
+            .subscribe(() => this.completeEvaluationCriteriaDeletion(criteria));
+    }
+    completeEvaluationCriteriaDeletion(criteria) {
+        this.loadingIds.update((ids) => {
+            delete ids[criteria.id];
+            return { ...ids };
+        });
+    }
+    onCheckListActionChanged(actionId, actionContent) {
+        const requestData = {
+            nodeCheckListId: this.checkListItem().id,
+            assigneePurposeType: 'ASSIGN',
+            actionId,
+            contentId: actionContent.id,
+            isEnable: actionContent.isEnable,
+            isRequired: actionContent.isRequired
+        };
+        this.nodeCheckListApiService.updateNodeCheckListItemActionContent(requestData).subscribe((checkListItem) => {
+            this.checkListBlockService.updateCheckListItem(checkListItem);
+        });
+    }
+    ngOnInit() {
+        this.initEvaluationFormValues();
+    }
+    initEvaluationFormValues() {
+        this.evaluationCriteriaFormArray.clear();
+        this.photoFormGroup.patchValue({
+            isEnable: this.attachmentPhotoAction().isEnable,
+            isRequired: this.attachmentPhotoAction().isRequired
+        });
+        this.commentFormGroup.patchValue({
+            isEnable: this.textAreaAction().isEnable,
+            isRequired: this.textAreaAction().isRequired
+        });
+        if (this.attachmentPhotoAction().isEnable) {
+            this.photoFormGroup.controls.isRequired.enable();
+        }
+        if (this.textAreaAction().isEnable) {
+            this.commentFormGroup.controls.isRequired.enable();
+        }
+        this.initActionFormSegmentsSubscriptions();
+        this.assignee().acceptanceCriteriaEvaluations.forEach((evaluationCriteria) => {
+            const evaluationItemControl = this.createEvaluationFormGroup({
+                isNew: false,
+                criteria: evaluationCriteria.criteria,
+                evaluation: evaluationCriteria.evaluation,
+                id: evaluationCriteria.id
+            });
+            this.evaluationCriteriaFormArray.push(evaluationItemControl);
+        });
+    }
+    initActionFormSegmentsSubscriptions() {
+        this.initPhotoGroupSubscription();
+        this.initCommentGroupSubscription();
+    }
+    initPhotoGroupSubscription() {
+        this.photoFormGroup.valueChanges.pipe(takeUntil(this.isAvailableObserver)).subscribe((value) => {
+            if (!value.isEnable) {
+                this.photoFormGroup.get('isRequired')?.setValue(false, { emitEvent: false });
+                this.photoFormGroup.get('isRequired')?.disable({ emitEvent: false });
+                this.onCheckListActionChanged(this.assignee().id, {
+                    id: this.attachmentPhotoAction().id,
+                    contentActionType: this.attachmentPhotoAction().contentActionType,
+                    ...this.photoFormGroup.getRawValue()
+                });
+                return;
+            }
+            this.photoFormGroup.get('isRequired')?.enable({ emitEvent: false });
+            this.onCheckListActionChanged(this.assignee().id, {
+                id: this.attachmentPhotoAction().id,
+                contentActionType: this.attachmentPhotoAction().contentActionType,
+                ...this.photoFormGroup.getRawValue()
+            });
+        });
+    }
+    initCommentGroupSubscription() {
+        this.commentFormGroup.valueChanges.pipe(takeUntil(this.isAvailableObserver)).subscribe((value) => {
+            if (!value.isEnable) {
+                this.commentFormGroup.get('isRequired')?.setValue(false, { emitEvent: false });
+                this.commentFormGroup.get('isRequired')?.disable({ emitEvent: false });
+                this.onCheckListActionChanged(this.assignee().id, {
+                    id: this.textAreaAction().id,
+                    contentActionType: this.textAreaAction().contentActionType,
+                    ...this.commentFormGroup.getRawValue()
+                });
+                return;
+            }
+            this.commentFormGroup.get('isRequired')?.enable({ emitEvent: false });
+            this.onCheckListActionChanged(this.assignee().id, {
+                id: this.textAreaAction().id,
+                contentActionType: this.textAreaAction().contentActionType,
+                ...this.commentFormGroup.getRawValue()
+            });
+        });
+    }
+    updateEvaluationCriteria(group) {
+        const evaluation = group.evaluation.value;
+        const criteria = group.criteria.value;
+        const id = group.id.value;
+        this.nodeCheckListApiService
+            .updateEvaluationCriteriaItem(this.checkListItem().id, this.assignee().id, id, criteria, evaluation)
+            .subscribe((checkListItem) => this.checkListBlockService.updateCheckListItem(checkListItem));
+    }
+    addEvaluationCriteria(group) {
+        const evaluation = group.evaluation.value;
+        const criteria = group.criteria.value;
+        this.nodeCheckListApiService
+            .addEvaluationCriteriaItem(this.checkListItem().id, this.assignee().id, criteria, evaluation)
+            .pipe(finalize(() => this.isAddButtonDisabled.set(false)))
+            .subscribe((checkListItem) => this.updateCreatedEvaluationCriteria(checkListItem));
+    }
+    updateCreatedEvaluationCriteria(checkListItem) {
+        const acceptanceCriteriaEvaluations = checkListItem.content.actionsAssignee[0].acceptanceCriteriaEvaluations;
+        const id = acceptanceCriteriaEvaluations.at(-1)?.id;
+        const control = this.evaluationCriteriaFormArray.controls.at(-1)?.getRawValue();
+        const createdControl = this.createEvaluationFormGroup({ ...control, id, isNew: false });
+        this.evaluationCriteriaFormArray.removeAt(-1);
+        this.evaluationCriteriaFormArray.push(createdControl);
+        this.checkListBlockService.updateCheckListItem(checkListItem);
+    }
+    createEvaluationFormGroup({ id, criteria = '', evaluation = null, isNew = true } = {}) {
+        return this.nonNullableFormBuilder.group({
+            id: [id],
+            criteria: [criteria, cuiCreateDefaultValidators({ maxLength: 500 })],
+            evaluation: [evaluation, [Validators.required]],
+            isNew: [isNew]
+        });
+    }
+    findExistingEvaluationCriteria(id) {
+        return (this.assignee().acceptanceCriteriaEvaluations.find((evaluationCriteria) => evaluationCriteria.id === id) || null);
+    }
+    moveItemInArray(array, fromIndex, toIndex) {
+        if (fromIndex === toIndex) {
+            return;
+        }
+        const item = array[fromIndex];
+        array.splice(fromIndex, 1);
+        array.splice(toIndex, 0, item);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCheckListBlockListItemEvaluationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiCheckListBlockListItemEvaluationComponent, isStandalone: true, selector: "cui-checklist-block-list-item-evaluation", inputs: { checkListItem: { classPropertyName: "checkListItem", publicName: "checkListItem", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <div class=\"action\">\r\n        <div class=\"action__inputs-container\">\r\n            <div\r\n                class=\"action__input\"\r\n                [formGroup]=\"photoFormGroup\"\r\n            >\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiCheckbox\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isEnable\"\r\n                    />\r\n                    {{ t('PHOTO') }}\r\n                </label>\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiToggle\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isRequired\"\r\n                    />\r\n                    {{ t('REQUIRED') }}\r\n                </label>\r\n            </div>\r\n            <div\r\n                class=\"action__input\"\r\n                [formGroup]=\"commentFormGroup\"\r\n            >\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiCheckbox\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isEnable\"\r\n                    />\r\n                    {{ t('COMMENT') }}\r\n                </label>\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiToggle\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isRequired\"\r\n                    />\r\n                    {{ t('REQUIRED') }}\r\n                </label>\r\n            </div>\r\n        </div>\r\n        <div class=\"action__criteria-title-container\">\r\n            <label\r\n                cuiLabel\r\n                [isRequired]=\"true\"\r\n                for=\"evaluationCriteria\"\r\n            >\r\n                {{ t('EVALUATION_CRITERIA') }}\r\n            </label>\r\n            <p class=\"action__criteria-subtitle\">{{ t('EACH_EVALUATION_CRITERION_SHOULD_BE') }}</p>\r\n        </div>\r\n        <ul\r\n            cuiDragList\r\n            class=\"list\"\r\n        >\r\n            @for (control of evaluationCriteriaFormArray.controls; track control.controls['id']; let index = $index) {\r\n                <li\r\n                    cuiChecklistBlockListItemEvaluationCriteria\r\n                    [index]=\"index + 1\"\r\n                    cuiDragDrop\r\n                    [disabled]=\"isAddButtonDisabled()\"\r\n                    (elementDragged)=\"onDrop($event)\"\r\n                    [criteriaGroup]=\"control\"\r\n                    [evaluationCriteriaFormArray]=\"evaluationCriteriaFormArray\"\r\n                    [loadingIds]=\"loadingIds()\"\r\n                    (saveClicked)=\"onSaveEvaluationCriteria($event)\"\r\n                    (cancelClicked)=\"onCancelNewEvaluationCriteria()\"\r\n                    (deleteClicked)=\"openModalDeleteEvaluationCriteria($event)\"\r\n                ></li>\r\n            } @empty {\r\n                <li\r\n                    cuiEmptyState\r\n                    [subtitle]=\"t('NO_EVALUATION_CRITERIA_TO_VIEW')\"\r\n                ></li>\r\n            }\r\n        </ul>\r\n        <div class=\"action__footer\">\r\n            <button\r\n                cuiButton\r\n                size=\"xxs\"\r\n                appearance=\"flat\"\r\n                icon=\"cuiIconPlus\"\r\n                type=\"button\"\r\n                [disabled]=\"isAddButtonDisabled()\"\r\n                (click)=\"onAddEvaluationCriteriaItem()\"\r\n            >\r\n                {{ t('NEW_OPTION') }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column;border-radius:inherit}.action{padding:15px;display:flex;flex-direction:column;border-radius:0 0 8px 8px;gap:16px;background:var(--cui-base-10)}.action__criteria-title-container{display:flex;flex-direction:column;gap:4px}.action__criteria-subtitle{font-weight:400;font-size:14px;line-height:20px;color:var(--cui-base-500)}.action__inputs-container{display:flex;flex-direction:column;gap:8px;background:var(--cui-base-0)}.action__input{padding-right:11px;padding-left:11px;display:flex;height:48px;flex-direction:row;justify-content:space-between;border:1px solid var(--cui-base-200);border-radius:8px}.action__criteria{display:flex;flex-direction:row;align-items:center;gap:12px}.action__criteria-index{padding:8px;font-weight:500;font-size:14px;line-height:20px;display:flex;width:44px;flex-direction:row;justify-content:center;align-items:center;border-radius:8px;background-color:var(--cui-base-0)}.action__criteria-input{flex:1;background:var(--cui-base-0)}.list{display:flex;flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "component", type: CuiCheckListBlockListItemEvaluationCriteriaComponent, selector: "li[cuiChecklistBlockListItemEvaluationCriteria]", inputs: ["loadingIds", "index", "criteriaGroup", "evaluationCriteriaFormArray"], outputs: ["saveClicked", "deleteClicked", "cancelClicked"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "ngmodule", type: CuiCheckboxModule }, { kind: "component", type: CuiCheckboxComponent, selector: "input[type=\"checkbox\"][cuiCheckbox]" }, { kind: "ngmodule", type: CuiContextMenuModule }, { kind: "ngmodule", type: CuiHintModule }, { kind: "ngmodule", type: CuiInputModule }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "component", type: CuiLabelComponent, selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "ngmodule", type: CuiTextareaModule }, { kind: "ngmodule", type: CuiTextFieldControllerModule }, { kind: "ngmodule", type: CuiToggleModule }, { kind: "component", type: CuiToggleComponent, selector: "input[type=\"checkbox\"][cuiToggle]" }, { kind: "component", type: CuiEmptyStateComponent, selector: "cui-empty-state, [cuiEmptyState]", inputs: ["title", "subtitle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: CuiDragDropDirective, selector: "[cuiDragDrop]", inputs: ["disabled"], outputs: ["elementDragged"] }, { kind: "directive", type: CuiDragListDirective, selector: "[cuiDragList]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCheckListBlockListItemEvaluationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-checklist-block-list-item-evaluation', imports: [
+                        CuiCheckListBlockListItemEvaluationCriteriaComponent,
+                        CuiButtonModule,
+                        CuiCheckboxModule,
+                        CuiContextMenuModule,
+                        CuiHintModule,
+                        CuiInputModule,
+                        CuiLabelModule,
+                        CuiTextareaModule,
+                        CuiTextFieldControllerModule,
+                        CuiToggleModule,
+                        CuiEmptyStateComponent,
+                        ReactiveFormsModule,
+                        TranslocoDirective,
+                        CuiDragDropDirective,
+                        CuiDragListDirective
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n    <div class=\"action\">\r\n        <div class=\"action__inputs-container\">\r\n            <div\r\n                class=\"action__input\"\r\n                [formGroup]=\"photoFormGroup\"\r\n            >\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiCheckbox\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isEnable\"\r\n                    />\r\n                    {{ t('PHOTO') }}\r\n                </label>\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiToggle\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isRequired\"\r\n                    />\r\n                    {{ t('REQUIRED') }}\r\n                </label>\r\n            </div>\r\n            <div\r\n                class=\"action__input\"\r\n                [formGroup]=\"commentFormGroup\"\r\n            >\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiCheckbox\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isEnable\"\r\n                    />\r\n                    {{ t('COMMENT') }}\r\n                </label>\r\n                <label cuiLabel>\r\n                    <input\r\n                        cuiToggle\r\n                        type=\"checkbox\"\r\n                        formControlName=\"isRequired\"\r\n                    />\r\n                    {{ t('REQUIRED') }}\r\n                </label>\r\n            </div>\r\n        </div>\r\n        <div class=\"action__criteria-title-container\">\r\n            <label\r\n                cuiLabel\r\n                [isRequired]=\"true\"\r\n                for=\"evaluationCriteria\"\r\n            >\r\n                {{ t('EVALUATION_CRITERIA') }}\r\n            </label>\r\n            <p class=\"action__criteria-subtitle\">{{ t('EACH_EVALUATION_CRITERION_SHOULD_BE') }}</p>\r\n        </div>\r\n        <ul\r\n            cuiDragList\r\n            class=\"list\"\r\n        >\r\n            @for (control of evaluationCriteriaFormArray.controls; track control.controls['id']; let index = $index) {\r\n                <li\r\n                    cuiChecklistBlockListItemEvaluationCriteria\r\n                    [index]=\"index + 1\"\r\n                    cuiDragDrop\r\n                    [disabled]=\"isAddButtonDisabled()\"\r\n                    (elementDragged)=\"onDrop($event)\"\r\n                    [criteriaGroup]=\"control\"\r\n                    [evaluationCriteriaFormArray]=\"evaluationCriteriaFormArray\"\r\n                    [loadingIds]=\"loadingIds()\"\r\n                    (saveClicked)=\"onSaveEvaluationCriteria($event)\"\r\n                    (cancelClicked)=\"onCancelNewEvaluationCriteria()\"\r\n                    (deleteClicked)=\"openModalDeleteEvaluationCriteria($event)\"\r\n                ></li>\r\n            } @empty {\r\n                <li\r\n                    cuiEmptyState\r\n                    [subtitle]=\"t('NO_EVALUATION_CRITERIA_TO_VIEW')\"\r\n                ></li>\r\n            }\r\n        </ul>\r\n        <div class=\"action__footer\">\r\n            <button\r\n                cuiButton\r\n                size=\"xxs\"\r\n                appearance=\"flat\"\r\n                icon=\"cuiIconPlus\"\r\n                type=\"button\"\r\n                [disabled]=\"isAddButtonDisabled()\"\r\n                (click)=\"onAddEvaluationCriteriaItem()\"\r\n            >\r\n                {{ t('NEW_OPTION') }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column;border-radius:inherit}.action{padding:15px;display:flex;flex-direction:column;border-radius:0 0 8px 8px;gap:16px;background:var(--cui-base-10)}.action__criteria-title-container{display:flex;flex-direction:column;gap:4px}.action__criteria-subtitle{font-weight:400;font-size:14px;line-height:20px;color:var(--cui-base-500)}.action__inputs-container{display:flex;flex-direction:column;gap:8px;background:var(--cui-base-0)}.action__input{padding-right:11px;padding-left:11px;display:flex;height:48px;flex-direction:row;justify-content:space-between;border:1px solid var(--cui-base-200);border-radius:8px}.action__criteria{display:flex;flex-direction:row;align-items:center;gap:12px}.action__criteria-index{padding:8px;font-weight:500;font-size:14px;line-height:20px;display:flex;width:44px;flex-direction:row;justify-content:center;align-items:center;border-radius:8px;background-color:var(--cui-base-0)}.action__criteria-input{flex:1;background:var(--cui-base-0)}.list{display:flex;flex-direction:column;gap:8px}\n"] }]
+        }] });
+
+class CuiChecklistBlockListComponent {
+    constructor() {
+        this.treeStructApiService = inject(CuiTreeStructApiService);
+        this.treeStructNavigatorApiService = inject(CuiTreeStructNavigatorApiService);
+        this.checkListBlockService = inject(CuiCheckListBlockService);
+        this.checkListItems = this.checkListBlockService.checkListItems;
+        this.isDragAvailable = this.checkListBlockService.isDragAvailable;
+        this.checkListItemActionWithVerification = CuiCheckListBlockListItemActionWithVerificationComponent;
+        this.checkListItemActionWithoutVerification = CuiCheckListBlockListItemActionWithoutVerificationComponent;
+        this.checkListItemEvaluation = CuiCheckListBlockListItemEvaluationComponent;
+        this.componentId = this.checkListBlockService.componentId;
+        this.isLoading = signal(false);
+        this.isDragEnabled = computed(() => !this.isLoading() && this.isDragAvailable());
+        this.checkListItemsWithComponents = computed(() => {
+            if (!this.checkListItems()) {
+                return [];
+            }
+            return this.checkListItems().map((element) => ({
+                id: element.id,
+                content: element,
+                component: this.getNodeCheckListItemComponent(element)
+            }));
+        });
+        this.config = input.required();
+    }
+    moveTreeStruct(data, element) {
+        const { targetElement, pointer, index, prevIndex } = data;
+        if (prevIndex === index) {
+            return;
+        }
+        this.isLoading.set(true);
+        this.treeStructNavigatorApiService
+            .moveElement({
+            type: "MOVING_TARGET_ITEM" /* MovingType.TARGET_NODE */,
+            targetItemId: targetElement.dataset['id'],
+            treeStructTargetItemId: targetElement.dataset['parentId'],
+            pointer,
+            movableItemId: element.id,
+            treeStructMovableItemId: this.componentId()
+        })
+            .pipe(switchMap(() => this.treeStructApiService.getById(this.componentId())), finalize(() => this.isLoading.set(false)))
+            .subscribe((treeStruct) => this.checkListBlockService.setCheckListItems(treeStruct.elements));
+    }
+    getNodeCheckListItemComponent(item) {
+        if (item.content.actionsApprove !== null) {
+            return this.checkListItemActionWithVerification;
+        }
+        if ('acceptanceCriteriaEvaluations' in item.content.actionsAssignee[0]) {
+            return this.checkListItemEvaluation;
+        }
+        return this.checkListItemActionWithoutVerification;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiChecklistBlockListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiChecklistBlockListComponent, isStandalone: true, selector: "cui-checklist-block-list", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <ng-container *cuiLet=\"checkListItemsWithComponents() as checkListItemsWithComponents\">\r\n        @if (checkListItemsWithComponents?.length) {\r\n            <ul\r\n                class=\"list__items\"\r\n                #list\r\n                cuiDragList\r\n            >\r\n                <ng-container *ngTemplateOutlet=\"items; context: { $implicit: checkListItemsWithComponents }\" />\r\n                <ng-template\r\n                    #items\r\n                    let-items\r\n                    let-isHidden=\"isHidden\"\r\n                >\r\n                    @for (item of items; track item.id; let index = $index) {\r\n                        <li\r\n                            [attr.data-id]=\"item.content.id\"\r\n                            [attr.data-parent-id]=\"componentId()\"\r\n                            [hidden]=\"isHidden\"\r\n                            cuiHandleScroll\r\n                            cuiDragDrop\r\n                            class=\"list__item\"\r\n                            [class.list__item_disabled]=\"isLoading()\"\r\n                            (elementDragged)=\"moveTreeStruct($event, item)\"\r\n                        >\r\n                            <cui-checklist-block-list-item-container\r\n                                [checkListBlockItem]=\"item\"\r\n                                [index]=\"index + 1\"\r\n                                [config]=\"config()\"\r\n                            />\r\n                        </li>\r\n                    }\r\n                </ng-template>\r\n            </ul>\r\n        } @else {\r\n            <cui-empty-state [subtitle]=\"t('NO_CHECKLIST_ITEMS')\" />\r\n        }\r\n    </ng-container>\r\n</ng-container>\r\n", styles: [":host ::ng-deep .codex-editor-overlay{position:unset}.list__items{display:flex;flex-direction:column;border:1px solid var(--cui-base-200);border-radius:8px}.list__item{border-bottom:.5px solid var(--cui-base-200)}.list__item_disabled{pointer-events:none;opacity:.5}.list__item:only-child{border-radius:8px!important}.list__item:first-child{border-radius:8px 8px 0 0}.list__item:last-child{border-radius:0 0 8px 8px;border:none}.cc-drag-drop-placeholder{position:relative;z-index:1;height:40px;border:1px dashed var(--cui-base-200);border-radius:8px;background:var(--cui-base-0)}\n"], dependencies: [{ kind: "component", type: CuiChecklistBlockListItemContainerComponent, selector: "cui-checklist-block-list-item-container", inputs: ["checkListBlockItem", "config", "index"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "ngmodule", type: CuiContextMenuModule }, { kind: "directive", type: CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "component", type: CuiEmptyStateComponent, selector: "cui-empty-state, [cuiEmptyState]", inputs: ["title", "subtitle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: CuiDragDropDirective, selector: "[cuiDragDrop]", inputs: ["disabled"], outputs: ["elementDragged"] }, { kind: "directive", type: CuiHandleScrollDirective, selector: "[cuiHandleScroll]", inputs: ["scrollSpeed"] }, { kind: "directive", type: CuiDragListDirective, selector: "[cuiDragList]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiChecklistBlockListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-checklist-block-list', imports: [
+                        CuiChecklistBlockListItemContainerComponent,
+                        CuiButtonModule,
+                        CuiContextMenuModule,
+                        CuiLetDirective,
+                        CuiEmptyStateComponent,
+                        NgTemplateOutlet,
+                        TranslocoDirective,
+                        CuiDragDropDirective,
+                        CuiHandleScrollDirective,
+                        CuiDragListDirective
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n    <ng-container *cuiLet=\"checkListItemsWithComponents() as checkListItemsWithComponents\">\r\n        @if (checkListItemsWithComponents?.length) {\r\n            <ul\r\n                class=\"list__items\"\r\n                #list\r\n                cuiDragList\r\n            >\r\n                <ng-container *ngTemplateOutlet=\"items; context: { $implicit: checkListItemsWithComponents }\" />\r\n                <ng-template\r\n                    #items\r\n                    let-items\r\n                    let-isHidden=\"isHidden\"\r\n                >\r\n                    @for (item of items; track item.id; let index = $index) {\r\n                        <li\r\n                            [attr.data-id]=\"item.content.id\"\r\n                            [attr.data-parent-id]=\"componentId()\"\r\n                            [hidden]=\"isHidden\"\r\n                            cuiHandleScroll\r\n                            cuiDragDrop\r\n                            class=\"list__item\"\r\n                            [class.list__item_disabled]=\"isLoading()\"\r\n                            (elementDragged)=\"moveTreeStruct($event, item)\"\r\n                        >\r\n                            <cui-checklist-block-list-item-container\r\n                                [checkListBlockItem]=\"item\"\r\n                                [index]=\"index + 1\"\r\n                                [config]=\"config()\"\r\n                            />\r\n                        </li>\r\n                    }\r\n                </ng-template>\r\n            </ul>\r\n        } @else {\r\n            <cui-empty-state [subtitle]=\"t('NO_CHECKLIST_ITEMS')\" />\r\n        }\r\n    </ng-container>\r\n</ng-container>\r\n", styles: [":host ::ng-deep .codex-editor-overlay{position:unset}.list__items{display:flex;flex-direction:column;border:1px solid var(--cui-base-200);border-radius:8px}.list__item{border-bottom:.5px solid var(--cui-base-200)}.list__item_disabled{pointer-events:none;opacity:.5}.list__item:only-child{border-radius:8px!important}.list__item:first-child{border-radius:8px 8px 0 0}.list__item:last-child{border-radius:0 0 8px 8px;border:none}.cc-drag-drop-placeholder{position:relative;z-index:1;height:40px;border:1px dashed var(--cui-base-200);border-radius:8px;background:var(--cui-base-0)}\n"] }]
+        }] });
+
+class CuiChecklistBlockComponent {
+    constructor() {
+        this.treeStructApiService = inject(CuiTreeStructApiService);
+        this.translocoService = inject(TranslocoService);
+        this.nodeCheckListApiService = inject(CuiNodeChecklistApiService);
+        this.checkListBlockService = inject(CuiCheckListBlockService);
+        this.CHECKLIST_BLOCK_SELECT_OPTIONS = [
+            {
+                label: this.translocoService.translate('ASSIGNEE_APPROVAL'),
+                command: () => this.addCheckListItem("NODE_CHECKLIST_ACTION_WITHOUT_VERIFICATION" /* CuiCheckListBlockItemType.WITHOUT_VERIFICATION */)
+            },
+            {
+                label: this.translocoService.translate('DOUBLE_CHECK_APPROVAL'),
+                command: () => this.addCheckListItem("NODE_CHECKLIST_ACTION_WITH_VERIFICATION" /* CuiCheckListBlockItemType.WITH_VERIFICATION */)
+            },
+            {
+                label: this.translocoService.translate('EVALUATION_OPTIONS'),
+                command: () => this.addCheckListItem("NODE_CHECKLIST_EVALUATION" /* CuiCheckListBlockItemType.EVALUATION */)
+            }
+        ];
+        this.checkListItems = this.checkListBlockService.checkListItems;
+        this.isLoading = signal(false);
+        this.componentId = input.required();
+        this.config = input.required();
+        this.initNodeCheckListBlock();
+    }
+    initNodeCheckListBlock() {
+        effect(() => {
+            this.checkListBlockService.setComponentId(this.componentId());
+            this.treeStructApiService
+                .getById(this.componentId())
+                .subscribe((treeStruct) => this.checkListBlockService.setCheckListItems(treeStruct.elements));
+        }, { allowSignalWrites: true });
+    }
+    addCheckListItem(type) {
+        this.isLoading.set(true);
+        this.nodeCheckListApiService
+            .addNodeCheckListItem({
+            treeStructContainerCheckListId: this.componentId(),
+            title: 'New checklist item',
+            type_operations: type
+        })
+            .pipe(finalize(() => this.isLoading.set(false)))
+            .subscribe((checkListItem) => this.checkListBlockService.addCheckListItem(checkListItem));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiChecklistBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiChecklistBlockComponent, isStandalone: true, selector: "cui-checklist-block, [cuiCheckListBlock]", inputs: { componentId: { classPropertyName: "componentId", publicName: "componentId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, providers: [CuiCheckListBlockService], ngImport: i0, template: "<cui-content-wrapper\r\n    *transloco=\"let t\"\r\n    backgroundColor=\"var(--cui-base-10)\"\r\n    [gap]=\"16\"\r\n>\r\n    <ng-container *cuiLet=\"checkListItems() as checkListItems\">\r\n        <header class=\"header\">\r\n            <h2 class=\"heading\">{{ t('CHECKLIST') }}</h2>\r\n\r\n            @if (checkListItems) {\r\n                <span class=\"item\">{{ checkListItems?.length }} {{ t('ITEM_VARIANT') }}</span>\r\n            }\r\n        </header>\r\n        <cui-content-wrapper>\r\n            <cui-checklist-block-list [config]=\"config()\" />\r\n        </cui-content-wrapper>\r\n        <div>\r\n            <button\r\n                #actionButton=\"elementRef\"\r\n                cuiElement\r\n                cuiButton\r\n                type=\"button\"\r\n                appearance=\"flat\"\r\n                size=\"xxs\"\r\n                icon=\"cuiIconPlus\"\r\n            >\r\n                {{ t('ADD_NEW_ITEM') }}\r\n            </button>\r\n            <cui-context-menu\r\n                [items]=\"CHECKLIST_BLOCK_SELECT_OPTIONS\"\r\n                [target]=\"actionButton.nativeElement\"\r\n            />\r\n        </div>\r\n    </ng-container>\r\n</cui-content-wrapper>\r\n", styles: [".header{display:flex;gap:12px;align-items:center;justify-content:space-between}.heading{font-weight:500;font-size:16px;line-height:24px}.item{font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-500)}\n"], dependencies: [{ kind: "component", type: CuiChecklistBlockListComponent, selector: "cui-checklist-block-list", inputs: ["config"] }, { kind: "component", type: CuiContentWrapperComponent, selector: "cui-content-wrapper, [cuiContentWrapper]", inputs: ["backgroundColor", "gap"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "ngmodule", type: CuiContextMenuModule }, { kind: "component", type: CuiContextMenuComponent, selector: "cui-context-menu[items][target]", inputs: ["items", "target"] }, { kind: "directive", type: CuiElementDirective, selector: "[cuiElement]", exportAs: ["elementRef"] }, { kind: "directive", type: CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiChecklistBlockComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-checklist-block, [cuiCheckListBlock]', imports: [
+                        CuiChecklistBlockListComponent,
+                        CuiContentWrapperComponent,
+                        CuiButtonModule,
+                        CuiContextMenuModule,
+                        CuiElementDirective,
+                        CuiLetDirective,
+                        TranslocoDirective
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiCheckListBlockService], template: "<cui-content-wrapper\r\n    *transloco=\"let t\"\r\n    backgroundColor=\"var(--cui-base-10)\"\r\n    [gap]=\"16\"\r\n>\r\n    <ng-container *cuiLet=\"checkListItems() as checkListItems\">\r\n        <header class=\"header\">\r\n            <h2 class=\"heading\">{{ t('CHECKLIST') }}</h2>\r\n\r\n            @if (checkListItems) {\r\n                <span class=\"item\">{{ checkListItems?.length }} {{ t('ITEM_VARIANT') }}</span>\r\n            }\r\n        </header>\r\n        <cui-content-wrapper>\r\n            <cui-checklist-block-list [config]=\"config()\" />\r\n        </cui-content-wrapper>\r\n        <div>\r\n            <button\r\n                #actionButton=\"elementRef\"\r\n                cuiElement\r\n                cuiButton\r\n                type=\"button\"\r\n                appearance=\"flat\"\r\n                size=\"xxs\"\r\n                icon=\"cuiIconPlus\"\r\n            >\r\n                {{ t('ADD_NEW_ITEM') }}\r\n            </button>\r\n            <cui-context-menu\r\n                [items]=\"CHECKLIST_BLOCK_SELECT_OPTIONS\"\r\n                [target]=\"actionButton.nativeElement\"\r\n            />\r\n        </div>\r\n    </ng-container>\r\n</cui-content-wrapper>\r\n", styles: [".header{display:flex;gap:12px;align-items:center;justify-content:space-between}.heading{font-weight:500;font-size:16px;line-height:24px}.item{font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-500)}\n"] }]
+        }], ctorParameters: () => [] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AngularOutsideLoaderService, CUI_ALERTS, CUI_ALERT_CONTEXT, CUI_ALERT_DEFAULT_OPTIONS, CUI_ALERT_OPTIONS, CUI_ANIMATIONS_DEFAULT_DURATION, CUI_BANNER_DEFAULT_OPTIONS, CUI_BANNER_OPTIONS, CUI_BUTTON_DEFAULT_OPTIONS, CUI_BUTTON_OPTIONS, CUI_DEFAULT_THEME, CUI_DIALOGS, CUI_DIALOG_CONTEXT, CUI_DIALOG_DEFAULT_OPTIONS, CUI_DIALOG_OPTIONS, CUI_INPUT_TIME_DEFAULT_OPTIONS, CUI_INPUT_TIME_OPTIONS, CUI_NOTIFICATION_DEFAULT_OPTIONS, CUI_NOTIFICATION_ICONS, CUI_NOTIFICATION_ICON_OPTIONS, CUI_NOTIFICATION_ICON_OPTIONS_DEFAULT_MODE, CUI_NOTIFICATION_ICON_OPTIONS_LIGHT_MODE, CUI_NOTIFICATION_OPTIONS, CUI_ROOT_SELECTOR, CUI_TAB_ACTIVATE, CUI_TEXT_FIELD_CONTROLLER, CUI_TEXT_FIELD_ICON_LEFT, CUI_TEXT_FIELD_ID, CUI_TEXT_FIELD_IS_ERROR, CUI_TEXT_FIELD_PLACEHOLDER, CUI_TEXT_FIELD_SIZE, CUI_TEXT_FILED_CONTROLLER_PROVIDER, CUI_THEME, CUI_THEME_STORAGE_DEFAULT_KEY, CUI_THEME_STORAGE_KEY, CUI_TOOLTIP_COMPONENT, CUI_TOOLTIP_DEFAULT_OPTIONS, CUI_TOOLTIP_DIRECTIONS, CUI_TOOLTIP_OPTIONS, CUI_TOOLTIP_PROVIDERS, CuiAccordionComponent, CuiAccordionDirective, CuiAccordionItemComponent, CuiAccordionModule, CuiAlertComponent, CuiAlertModule, CuiAlertService, CuiAlertsComponent, CuiAttachesTool, CuiBadgeComponent, CuiBadgeModule, CuiBannerComponent, CuiBannerModule, CuiBreadcrumbComponent, CuiBreadcrumbsComponent, CuiBreadcrumbsModule, CuiButtonComponent, CuiButtonGroupComponent, CuiButtonGroupModule, CuiButtonModule, CuiCardWrapperComponent, CuiCategoriesComponent, CuiCheckboxComponent, CuiCheckboxModule, CuiContentWrapperComponent, CuiContextMenuComponent, CuiContextMenuModule, CuiDialogActionsComponent, CuiDialogComponent, CuiDialogHeaderComponent, CuiDialogModule, CuiDialogService, CuiDialogsComponent, CuiDropdownDirective, CuiDropdownWrapperComponent, CuiEditorBlockComponent, CuiEditorComponent, CuiEditorModalComponent, CuiEditorReadonlyComponent, CuiEditorTranslations, CuiEmptyStateComponent, CuiFileUploaderStatus, CuiFormFieldComponent, CuiFormFieldModule, CuiGhostInputComponent, CuiHeaderTool, CuiHintComponent, CuiHintModule, CuiIconButtonComponent, CuiIconButtonModule, CuiImageTool, CuiInputModule, CuiInputNumberComponent, CuiInputNumberModule, CuiInputPasswordComponent, CuiInputPasswordModule, CuiInputTextComponent, CuiInputTimeComponent, CuiInputTimeModule, CuiLabelComponent, CuiLabelModule, CuiLayoutComponent, CuiLetterBoxComponent, CuiLinkMarker, CuiListTool, CuiLoaderService, CuiLoadingState, CuiNotificationComponent, CuiNotificationModule, CuiPositionService, CuiRadioComponent, CuiRadioModule, CuiRenderDynamicComponentsComponent, CuiRenderDynamicComponentsService, CuiRoleMarker, CuiRootComponent, CuiRootModule, CuiSelectComponent, CuiSelectModule, CuiSelectedCategoryService, CuiSidebarContainerComponent, CuiSidebarHeaderComponent, CuiSidebarNavigationComponent, CuiSidebarNavigationContainerComponent, CuiSidebarNavigationItemComponent, CuiSidebarService, CuiSvgComponent, CuiSvgModule, CuiTabComponent, CuiTabsComponent, CuiTabsModule, CuiTextFieldController, CuiTextFieldControllerModule, CuiTextFieldIconLeftDirective, CuiTextFieldIdDirective, CuiTextFieldIsErrorDirective, CuiTextFieldPlaceholderDirective, CuiTextFieldSizeDirective, CuiTextareaComponent, CuiTextareaModule, CuiThemeService, CuiToggleComponent, CuiToggleModule, CuiToolMarker, CuiTooltip, CuiTooltipComponent, CuiTooltipDescribe, CuiTooltipDirective, CuiTooltipDriver, CuiTooltipHost, CuiTooltipHover, CuiTooltipManual, CuiTooltipOptionsDirective, CuiTooltipOverflow, CuiTooltipPointer, CuiTooltipPosition, CuiTooltipService, CuiTooltipUnstyled, CuiTooltipUnstyledComponent, CuiTooltips, CuiUtilityInfoComponent, CuiVideoTool, CuiVisualViewportService, createDefaultValidators, cuiGetDuration, cuiIsObscured, cuiLoaderInterceptor, cuiOverrideOptions, cuiProvideEditor, cuiRemoveSpaces, cuiReplace, cuiToAnimationOptions, cuiTooltipOptionsProvider, cuiXNdjsonInterceptor };
+export { AngularOutsideLoaderService, CUI_ALERTS, CUI_ALERT_CONTEXT, CUI_ALERT_DEFAULT_OPTIONS, CUI_ALERT_OPTIONS, CUI_ANIMATIONS_DEFAULT_DURATION, CUI_BANNER_DEFAULT_OPTIONS, CUI_BANNER_OPTIONS, CUI_BUTTON_DEFAULT_OPTIONS, CUI_BUTTON_OPTIONS, CUI_DEFAULT_THEME, CUI_DIALOGS, CUI_DIALOG_CONTEXT, CUI_DIALOG_DEFAULT_OPTIONS, CUI_DIALOG_OPTIONS, CUI_INPUT_TIME_DEFAULT_OPTIONS, CUI_INPUT_TIME_OPTIONS, CUI_NOTIFICATION_DEFAULT_OPTIONS, CUI_NOTIFICATION_ICONS, CUI_NOTIFICATION_ICON_OPTIONS, CUI_NOTIFICATION_ICON_OPTIONS_DEFAULT_MODE, CUI_NOTIFICATION_ICON_OPTIONS_LIGHT_MODE, CUI_NOTIFICATION_OPTIONS, CUI_ROOT_SELECTOR, CUI_TAB_ACTIVATE, CUI_TEXT_FIELD_CONTROLLER, CUI_TEXT_FIELD_ICON_LEFT, CUI_TEXT_FIELD_ID, CUI_TEXT_FIELD_IS_ERROR, CUI_TEXT_FIELD_PLACEHOLDER, CUI_TEXT_FIELD_SIZE, CUI_TEXT_FILED_CONTROLLER_PROVIDER, CUI_THEME, CUI_THEME_STORAGE_DEFAULT_KEY, CUI_THEME_STORAGE_KEY, CUI_TOOLTIP_COMPONENT, CUI_TOOLTIP_DEFAULT_OPTIONS, CUI_TOOLTIP_DIRECTIONS, CUI_TOOLTIP_OPTIONS, CUI_TOOLTIP_PROVIDERS, CuiAccordionComponent, CuiAccordionDirective, CuiAccordionItemComponent, CuiAccordionModule, CuiAlertComponent, CuiAlertModule, CuiAlertService, CuiAlertsComponent, CuiAttachesTool, CuiBadgeComponent, CuiBadgeModule, CuiBannerComponent, CuiBannerModule, CuiBreadcrumbComponent, CuiBreadcrumbsComponent, CuiBreadcrumbsModule, CuiButtonComponent, CuiButtonGroupComponent, CuiButtonGroupModule, CuiButtonModule, CuiCardWrapperComponent, CuiCategoriesComponent, CuiCheckboxComponent, CuiCheckboxModule, CuiChecklistBlockComponent, CuiContentWrapperComponent, CuiContextMenuComponent, CuiContextMenuModule, CuiDeleteModalComponent, CuiDialogActionsComponent, CuiDialogComponent, CuiDialogHeaderComponent, CuiDialogModule, CuiDialogService, CuiDialogsComponent, CuiDropdownDirective, CuiDropdownWrapperComponent, CuiEditorBlockComponent, CuiEditorComponent, CuiEditorModalComponent, CuiEditorReadonlyComponent, CuiEditorTranslations, CuiEmptyStateComponent, CuiFileUploaderStatus, CuiFormFieldComponent, CuiFormFieldModule, CuiGeneralControlErrorHintComponent, CuiGhostInputComponent, CuiHeaderTool, CuiHintComponent, CuiHintModule, CuiIconButtonComponent, CuiIconButtonModule, CuiImageTool, CuiInputModule, CuiInputNumberComponent, CuiInputNumberModule, CuiInputPasswordComponent, CuiInputPasswordModule, CuiInputTextComponent, CuiInputTimeComponent, CuiInputTimeModule, CuiLabelComponent, CuiLabelModule, CuiLayoutComponent, CuiLetterBoxComponent, CuiLinkMarker, CuiListTool, CuiLoaderComponent, CuiLoaderService, CuiLoadingState, CuiNotificationComponent, CuiNotificationModule, CuiPositionService, CuiRadioComponent, CuiRadioModule, CuiRenderDynamicComponentsComponent, CuiRenderDynamicComponentsService, CuiRoleMarker, CuiRootComponent, CuiRootModule, CuiSelectComponent, CuiSelectModule, CuiSidebarContainerComponent, CuiSidebarHeaderComponent, CuiSidebarNavigationComponent, CuiSidebarNavigationContainerComponent, CuiSidebarNavigationItemComponent, CuiSidebarService, CuiSvgComponent, CuiSvgModule, CuiTabComponent, CuiTabsComponent, CuiTabsModule, CuiTextFieldController, CuiTextFieldControllerModule, CuiTextFieldIconLeftDirective, CuiTextFieldIdDirective, CuiTextFieldIsErrorDirective, CuiTextFieldPlaceholderDirective, CuiTextFieldSizeDirective, CuiTextareaComponent, CuiTextareaModule, CuiThemeService, CuiToggleComponent, CuiToggleModule, CuiToolMarker, CuiTooltip, CuiTooltipComponent, CuiTooltipDescribe, CuiTooltipDirective, CuiTooltipDriver, CuiTooltipHost, CuiTooltipHover, CuiTooltipManual, CuiTooltipOptionsDirective, CuiTooltipOverflow, CuiTooltipPointer, CuiTooltipPosition, CuiTooltipService, CuiTooltipUnstyled, CuiTooltipUnstyledComponent, CuiTooltips, CuiUtilityInfoComponent, CuiVideoTool, CuiVisualViewportService, cuiCreateDefaultValidators, cuiGetDuration, cuiIsObscured, cuiLoaderInterceptor, cuiOverrideOptions, cuiProvideEditor, cuiRemoveSpaces, cuiReplace, cuiToAnimationOptions, cuiTooltipOptionsProvider, cuiXNdjsonInterceptor };
 //# sourceMappingURL=cuby-ui-core.mjs.map