@cuby-ui/core 0.0.321 → 0.0.323

package/fesm2022/cuby-ui-core.mjs

@@ -1,15 +1,15 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, inject, Renderer2, input, model, effect, Directive, InjectionToken, Input, HostBinding, ChangeDetectorRef, ElementRef, ViewChild, EventEmitter, Output, NgModule, Injector, Injectable, SkipSelf, Optional, DestroyRef, NgZone, signal, TemplateRef, ContentChildren, HostListener, Self, INJECTOR, forwardRef, ViewContainerRef, booleanAttribute, computed, Pipe, APP_INITIALIZER, viewChild, afterRender, output, makeEnvironmentProviders } from '@angular/core';
+import { Component, ChangeDetectionStrategy, inject, Renderer2, input, model, effect, Directive, InjectionToken, Input, HostBinding, ChangeDetectorRef, ElementRef, ViewChild, EventEmitter, Output, NgModule, Injector, Injectable, SkipSelf, Optional, DestroyRef, NgZone, signal, TemplateRef, ContentChildren, HostListener, Self, INJECTOR, forwardRef, ViewContainerRef, booleanAttribute, computed, Pipe, APP_INITIALIZER, viewChild, afterRender, output, makeEnvironmentProviders, untracked } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT, NgForOf, NgIf, NgComponentOutlet, NgTemplateOutlet, NgFor, UpperCasePipe, NgClass, Location } 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, CuiDragPointerDirective, CuiDragDropDirective, CuiDragListDirective, CuiHandleScrollDirective } 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, FilesUploader, takeCaptureFromVideo } 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, switchMap, tap, catchError, throwError, of, from, filter, timer, Subject, delay, repeat, takeWhile, fromEvent, debounce, skip, take, forkJoin, throttleTime, concatMap, toArray, pairwise, debounceTime } from 'rxjs';
+import { BehaviorSubject, takeUntil, Observable, merge, distinctUntilChanged, startWith, map, finalize, switchMap, tap, catchError, throwError, of, from, filter, timer, Subject, delay, repeat, takeWhile, fromEvent, debounce, skip, take, forkJoin, throttleTime, concatMap, toArray, debounceTime, pairwise } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { OAuthService, OAuthErrorEvent, OAuthSuccessEvent, OAuthInfoEvent, provideOAuthClient } from 'angular-oauth2-oidc';
-import { CuiExchangeContextApiService, CuiTreeStructNavigatorApiService, CuiFrameApiService, CuiNodeChecklistApiService, CuiTreeStructApiService } from '@cuby-ui/api';
+import { CuiExchangeContextApiService, CuiTreeStructNavigatorApiService, CuiNodeChecklistApiService, CuiTreeStructApiService, CuiFrameApiService } from '@cuby-ui/api';
 import { trigger, transition, query, animateChild, style, animate, stagger } from '@angular/animations';
 import * as i2 from '@taiga-ui/polymorpheus';
 import { PolymorpheusOutlet, PolymorpheusTemplate, PolymorpheusComponent, injectContext } from '@taiga-ui/polymorpheus';
@@ -22,7 +22,7 @@ import { MaskitoDirective } from '@maskito/angular';
 import EditorJS from '@editorjs/editorjs';
 import Header from '@editorjs/header';
 import List from '@editorjs/list';
-import * as i2$2 from '@jsverse/transloco';
+import * as i4 from '@jsverse/transloco';
 import { TranslocoDirective, TranslocoService, TranslocoModule } from '@jsverse/transloco';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { createCustomElement } from '@angular/elements';
@@ -7792,7 +7792,7 @@ class CuiDeleteModalComponent {
         this.context.completeWith({ canceled: true });
     }
     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 }); }
+    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: i4.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: CuiTooltipDirective, selector: "[cuiTooltip]:not(ng-container):not(ng-template)", inputs: ["cuiTooltipContext", "cuiTooltipAppearance", "cuiTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiDeleteModalComponent, decorators: [{
             type: Component,
@@ -8129,234 +8129,6 @@ 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.description = 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.initFormSubscriptions();
-            this.initFrameFragments();
-            effectRef.destroy();
-        });
-    }
-    initFormSubscriptions() {
-        this.form.setValue({ title: this.title(), description: this.description() }, { emitEvent: false });
-        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) => {
-            if (!Object.keys(value).length) {
-                return;
-            }
-            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 || this.controls[key].invalid) {
-                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() {
-        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 }, description: { classPropertyName: "description", publicName: "description", 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_A_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          <div class=\"content__info\">\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\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      </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            class=\"editor\"\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{--editor-height: 650px;display:block}:host .editor{--max-editor-height: var(--editor-height)}.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__info{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.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_A_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          <div class=\"content__info\">\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\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      </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            class=\"editor\"\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{--editor-height: 650px;display:block}:host .editor{--max-editor-height: var(--editor-height)}.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__info{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.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);
@@ -9246,9 +9018,984 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiCheckListBlockService], template: "<cui-content-wrapper\n    *transloco=\"let t\"\n    backgroundColor=\"var(--cui-base-10)\"\n    [gap]=\"16\"\n>\n    <ng-container *cuiLet=\"checkListItems() as checkListItems\">\n        <header class=\"header\">\n            <h2 class=\"heading\">{{ t('CHECKLIST') }}</h2>\n\n            @if (checkListItems) {\n                <span class=\"item\">{{ checkListItems?.length }} {{ t('ITEM_VARIANT') }}</span>\n            }\n        </header>\n        <cui-content-wrapper>\n            <cui-checklist-block-list [config]=\"config()\" />\n        </cui-content-wrapper>\n        <div>\n            <button\n                #actionButton=\"elementRef\"\n                cuiElement\n                cuiButton\n                type=\"button\"\n                appearance=\"flat\"\n                size=\"xxs\"\n                icon=\"cuiIconPlus\"\n            >\n                {{ t('ADD_NEW_ITEM') }}\n            </button>\n            <cui-context-menu\n                [items]=\"CHECKLIST_BLOCK_SELECT_OPTIONS\"\n                [target]=\"actionButton.nativeElement\"\n            />\n        </div>\n    </ng-container>\n</cui-content-wrapper>\n", styles: [".header{display:flex;gap:12px;align-items:center;justify-content:space-between}.heading{font-weight:500;font-size:16px;line-height:24px}.item{font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-500)}\n"] }]
         }], ctorParameters: () => [] });
 
+class CuiUtilityReadonlyThumbnailComponent {
+    constructor() {
+        this.thumbnailUrl = input.required();
+        this.isVideo = input(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiUtilityReadonlyThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiUtilityReadonlyThumbnailComponent, isStandalone: true, selector: "cui-utility-readonly-thumbnail", inputs: { thumbnailUrl: { classPropertyName: "thumbnailUrl", publicName: "thumbnailUrl", isSignal: true, isRequired: true, transformFunction: null }, isVideo: { classPropertyName: "isVideo", publicName: "isVideo", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let url = thumbnailUrl();\n\n@if (url?.src; as src) {\n    @if (isVideo()) {\n        <video\n            class=\"thumbnail\"\n            [src]=\"src\"\n            controls\n        ></video>\n    } @else {\n        <img\n            class=\"thumbnail\"\n            [src]=\"src\"\n            [alt]=\"url?.name\"\n        />\n    }\n}\n", styles: [".thumbnail{width:100%;max-height:271px;object-fit:contain}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiUtilityReadonlyThumbnailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-utility-readonly-thumbnail', imports: [], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let url = thumbnailUrl();\n\n@if (url?.src; as src) {\n    @if (isVideo()) {\n        <video\n            class=\"thumbnail\"\n            [src]=\"src\"\n            controls\n        ></video>\n    } @else {\n        <img\n            class=\"thumbnail\"\n            [src]=\"src\"\n            [alt]=\"url?.name\"\n        />\n    }\n}\n", styles: [".thumbnail{width:100%;max-height:271px;object-fit:contain}\n"] }]
+        }] });
+
+class CuiInstructionReadonlyInfoComponent {
+    constructor() {
+        this.hostElement = inject(ElementRef).nativeElement;
+        this.frameApiService = inject(CuiFrameApiService);
+        this.isVideo = false;
+        this.jText = signal(null);
+        this.thumbnailUrl = signal(null);
+        this.isDescriptionEmpty = computed(() => !this.jText()?.notEmpty);
+        this.framerId = input.required();
+        this.element = input(this.hostElement);
+        this.tools = input.required();
+        this.editorResourceUrl = input.required();
+        this.initConfigEffect();
+        this.initFramerIdEffect();
+    }
+    initConfigEffect() {
+        effect(() => {
+            this.editorConfig = { readOnly: true, tools: this.tools(), element: this.element() };
+        });
+    }
+    initFramerIdEffect() {
+        effect(() => {
+            const framerId = this.framerId();
+            if (!framerId) {
+                return;
+            }
+            this.subscription?.unsubscribe();
+            this.initFrameFragments();
+        });
+    }
+    initFrameFragments() {
+        const frameId = this.framerId();
+        this.jText.set(null);
+        this.thumbnailUrl.set(null);
+        if (!frameId) {
+            return;
+        }
+        const fragmentActions = {
+            ["J_TEXT" /* FragmentType.jText */]: (fragment) => {
+                this.jText.set(fragment);
+            },
+            ["RESOURCE_FILE" /* FragmentType.resourceFile */]: (fragment) => {
+                this.setResourceFile(fragment);
+            }
+        };
+        this.subscription = this.frameApiService.getFrame(frameId).subscribe((frame) => {
+            frame.fragments.forEach((fragment) => fragmentActions[fragment.type](fragment));
+        });
+    }
+    setResourceFile(resource) {
+        const url = `${this.editorResourceUrl()}${resource.fileId}`;
+        this.isVideo = resource?.name?.split('.').pop() === 'mp4';
+        if (!url) {
+            return;
+        }
+        this.thumbnailUrl.set({ src: resource.fileId && url, name: resource.name || resource.type });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiInstructionReadonlyInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiInstructionReadonlyInfoComponent, isStandalone: true, selector: "cui-instruction-readonly-info", inputs: { framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: false, transformFunction: null }, tools: { classPropertyName: "tools", publicName: "tools", isSignal: true, isRequired: true, transformFunction: null }, editorResourceUrl: { classPropertyName: "editorResourceUrl", publicName: "editorResourceUrl", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    @if (jText()) {\n        @if (!isDescriptionEmpty()) {\n            @if (thumbnailUrl(); as thumbnailUrl) {\n                <cui-utility-readonly-thumbnail [thumbnailUrl]=\"thumbnailUrl\" [isVideo]=\"isVideo\" />\n            }\n\n            @if (jText()?.id; as id) {\n                <div class=\"wrapper\">\n                    <cui-editor\n                        class=\"editor\"\n                        [editorApiId]=\"id\"\n                        [config]=\"editorConfig\"\n                    />\n                </div>\n            }\n        } @else {\n            <cui-empty-state [subtitle]=\"t('NO_DESCRIPTION_WAS_PROVIDED')\" />\n        }\n    }\n</ng-container>\n", styles: [":host{padding-top:16px;padding-right:16px;padding-left:16px;display:flex;flex-direction:column;gap:12px;height:100%;overflow:auto}.wrapper{padding:12px}.editor{display:block;height:100%;overflow:auto}\n"], dependencies: [{ kind: "component", type: CuiEditorComponent, selector: "cui-editor", inputs: ["editorApiId", "config", "requestSize"], outputs: ["editorEmpty"] }, { kind: "component", type: CuiEmptyStateComponent, selector: "cui-empty-state, [cuiEmptyState]", inputs: ["title", "subtitle"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiUtilityReadonlyThumbnailComponent, selector: "cui-utility-readonly-thumbnail", inputs: ["thumbnailUrl", "isVideo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiInstructionReadonlyInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-instruction-readonly-info', imports: [CuiEditorComponent, CuiEmptyStateComponent, TranslocoDirective, CuiUtilityReadonlyThumbnailComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    @if (jText()) {\n        @if (!isDescriptionEmpty()) {\n            @if (thumbnailUrl(); as thumbnailUrl) {\n                <cui-utility-readonly-thumbnail [thumbnailUrl]=\"thumbnailUrl\" [isVideo]=\"isVideo\" />\n            }\n\n            @if (jText()?.id; as id) {\n                <div class=\"wrapper\">\n                    <cui-editor\n                        class=\"editor\"\n                        [editorApiId]=\"id\"\n                        [config]=\"editorConfig\"\n                    />\n                </div>\n            }\n        } @else {\n            <cui-empty-state [subtitle]=\"t('NO_DESCRIPTION_WAS_PROVIDED')\" />\n        }\n    }\n</ng-container>\n", styles: [":host{padding-top:16px;padding-right:16px;padding-left:16px;display:flex;flex-direction:column;gap:12px;height:100%;overflow:auto}.wrapper{padding:12px}.editor{display:block;height:100%;overflow:auto}\n"] }]
+        }], ctorParameters: () => [] });
+
+class CuiCriterionReadonlyInfoComponent {
+    constructor() {
+        this.hostElement = inject(ElementRef).nativeElement;
+        this.frameApiService = inject(CuiFrameApiService);
+        this.isVideo = false;
+        this.jText = signal(null);
+        this.thumbnailUrl = signal(null);
+        this.isDescriptionEmpty = computed(() => !this.jText()?.notEmpty);
+        this.framerId = input.required();
+        this.element = input(this.hostElement);
+        this.tools = input.required();
+        this.editorResourceUrl = input.required();
+        this.initConfigEffect();
+        this.initFramerIdEffect();
+    }
+    initConfigEffect() {
+        effect(() => {
+            this.editorConfig = { readOnly: true, tools: this.tools(), element: this.element() };
+        });
+    }
+    initFramerIdEffect() {
+        effect(() => {
+            const framerId = this.framerId();
+            if (!framerId) {
+                return;
+            }
+            this.subscription?.unsubscribe();
+            this.initFrameFragments();
+        });
+    }
+    initFrameFragments() {
+        const frameId = this.framerId();
+        this.jText.set(null);
+        this.thumbnailUrl.set(null);
+        if (!frameId) {
+            return;
+        }
+        const fragmentActions = {
+            ["J_TEXT" /* FragmentType.jText */]: (fragment) => {
+                this.jText.set(fragment);
+            },
+            ["RESOURCE_FILE" /* FragmentType.resourceFile */]: (fragment) => {
+                this.setResourceFile(fragment);
+            }
+        };
+        this.subscription = this.frameApiService.getFrame(frameId).subscribe((frame) => {
+            frame.fragments.forEach((fragment) => fragmentActions[fragment.type](fragment));
+        });
+    }
+    setResourceFile(resource) {
+        const url = `${this.editorResourceUrl()}${resource.fileId}`;
+        this.isVideo = resource?.name?.split('.').pop() === 'mp4';
+        if (!url) {
+            return;
+        }
+        this.thumbnailUrl.set({ src: resource.fileId && url, name: resource.name || resource.type });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCriterionReadonlyInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiCriterionReadonlyInfoComponent, isStandalone: true, selector: "cui-criterion-readonly-info", inputs: { framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: false, transformFunction: null }, tools: { classPropertyName: "tools", publicName: "tools", isSignal: true, isRequired: true, transformFunction: null }, editorResourceUrl: { classPropertyName: "editorResourceUrl", publicName: "editorResourceUrl", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    @if (jText()) {\n        @if (!isDescriptionEmpty()) {\n            @if (thumbnailUrl(); as thumbnailUrl) {\n                <cui-utility-readonly-thumbnail [thumbnailUrl]=\"thumbnailUrl\" [isVideo]=\"isVideo\" />\n            }\n\n            @if (jText()?.id; as id) {\n                <div class=\"wrapper\">\n                    <cui-editor\n                        class=\"editor\"\n                        [editorApiId]=\"id\"\n                        [config]=\"editorConfig\"\n                    />\n                </div>\n            }\n        } @else {\n            <cui-empty-state [subtitle]=\"t('NO_DESCRIPTION_WAS_PROVIDED')\" />\n        }\n    }\n</ng-container>\n", styles: [":host{padding-top:16px;padding-right:16px;padding-left:16px;display:flex;flex-direction:column;gap:12px;height:100%;overflow:auto}.wrapper{padding:12px}.editor{display:block;height:100%;overflow:auto}\n"], dependencies: [{ kind: "component", type: CuiEditorComponent, selector: "cui-editor", inputs: ["editorApiId", "config", "requestSize"], outputs: ["editorEmpty"] }, { kind: "component", type: CuiEmptyStateComponent, selector: "cui-empty-state, [cuiEmptyState]", inputs: ["title", "subtitle"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiUtilityReadonlyThumbnailComponent, selector: "cui-utility-readonly-thumbnail", inputs: ["thumbnailUrl", "isVideo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCriterionReadonlyInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-criterion-readonly-info', imports: [CuiEditorComponent, CuiEmptyStateComponent, TranslocoDirective, CuiUtilityReadonlyThumbnailComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    @if (jText()) {\n        @if (!isDescriptionEmpty()) {\n            @if (thumbnailUrl(); as thumbnailUrl) {\n                <cui-utility-readonly-thumbnail [thumbnailUrl]=\"thumbnailUrl\" [isVideo]=\"isVideo\" />\n            }\n\n            @if (jText()?.id; as id) {\n                <div class=\"wrapper\">\n                    <cui-editor\n                        class=\"editor\"\n                        [editorApiId]=\"id\"\n                        [config]=\"editorConfig\"\n                    />\n                </div>\n            }\n        } @else {\n            <cui-empty-state [subtitle]=\"t('NO_DESCRIPTION_WAS_PROVIDED')\" />\n        }\n    }\n</ng-container>\n", styles: [":host{padding-top:16px;padding-right:16px;padding-left:16px;display:flex;flex-direction:column;gap:12px;height:100%;overflow:auto}.wrapper{padding:12px}.editor{display:block;height:100%;overflow:auto}\n"] }]
+        }], ctorParameters: () => [] });
+
+class CuiUtilityThumbnailComponent {
+    constructor() {
+        this.cuiAlertService = inject(CuiAlertService);
+        this.translocoService = inject(TranslocoService);
+        this.frameApiService = inject(CuiFrameApiService);
+        this.MAX_FILE_SIZE = 20971520;
+        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.thumbnail = model.required();
+        this.framerId = input.required();
+        this.baseResourceUrl = input.required();
+    }
+    onSelectFile() {
+        const types = 'image/jpg, image/jpeg, image/png, video/mp4';
+        FilesUploader.uploadFile(types).then((files) => this.getFile(files));
+    }
+    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 }));
+        });
+    }
+    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) {
+        takeCaptureFromVideo(url).then((capture) => {
+            this.thumbnail.update((prev) => ({
+                ...prev,
+                name: (file?.name || prev?.name),
+                resource: capture
+            }));
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiUtilityThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiUtilityThumbnailComponent, isStandalone: true, selector: "cui-utility-thumbnail", inputs: { thumbnail: { classPropertyName: "thumbnail", publicName: "thumbnail", isSignal: true, isRequired: true, transformFunction: null }, framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, baseResourceUrl: { classPropertyName: "baseResourceUrl", publicName: "baseResourceUrl", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { thumbnail: "thumbnailChange" }, ngImport: i0, template: "<section\n    *transloco=\"let t\"\n    class=\"file\"\n>\n    <span class=\"title\">{{ t('THUMBNAIL') }}</span>\n    <div class=\"upload\">\n        <div class=\"upload-file\">\n            @if (thumbnail()?.name; as fileId) {\n                <div class=\"image\">\n                    <span class=\"image__name\">{{ thumbnail()?.name }}</span>\n                    <!-- TODO: ngSrc -->\n                    <img\n                        class=\"image__view\"\n                        [src]=\"thumbnailUrl()\"\n                        height=\"120\"\n                        width=\"184\"\n                        alt=\"Thumbnail\"\n                    />\n                </div>\n            }\n            <div class=\"info\">\n                <button\n                    type=\"button\"\n                    cuiButton\n                    appearance=\"outlined-gray\"\n                    size=\"xxs\"\n                    icon=\"cuiIconUpload\"\n                    (click)=\"onSelectFile()\"\n                >\n                    {{ uploadButtonName() }}\n                </button>\n                @if (thumbnail()?.name) {\n                    <button\n                        class=\"remove-button\"\n                        cuiButton\n                        appearance=\"link\"\n                        size=\"sm\"\n                        type=\"button\"\n                        (click)=\"onRemoveThumbnail()\"\n                    >\n                        {{ t('REMOVE') }}\n                    </button>\n                }\n\n                <span class=\"accepted\">{{ t('ACCEPTED') }}: JPG, JPEG, PNG, MP4 {{ t('UP_TO') }} 20MB</span>\n            </div>\n        </div>\n    </div>\n</section>\n", styles: [".file{display:flex;flex-direction:column;gap:4px}.title{font-weight:500;font-size:14px;line-height:20px;display:flex;gap:2px}.title_required{color:var(--cui-danger)}.upload{padding:12px 16px;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-base-10)}.upload-file{display:flex;align-items:center;gap:8px}.upload-file input[type=file]{display:none}.info{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.accepted{color:var(--cui-base-500)}.remove-button ::ng-deep .c-content{color:var(--cui-danger)!important}.image{position:relative;display:inline-block}.image__view{border-radius:8px;object-fit:cover}.image__name{position:absolute;top:6px;left:14px;color:var(--cui-base-0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px;z-index:1}.image:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0003;z-index:0;pointer-events:none;border-radius:8px}\n"], dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiUtilityThumbnailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-utility-thumbnail', imports: [TranslocoDirective], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n    *transloco=\"let t\"\n    class=\"file\"\n>\n    <span class=\"title\">{{ t('THUMBNAIL') }}</span>\n    <div class=\"upload\">\n        <div class=\"upload-file\">\n            @if (thumbnail()?.name; as fileId) {\n                <div class=\"image\">\n                    <span class=\"image__name\">{{ thumbnail()?.name }}</span>\n                    <!-- TODO: ngSrc -->\n                    <img\n                        class=\"image__view\"\n                        [src]=\"thumbnailUrl()\"\n                        height=\"120\"\n                        width=\"184\"\n                        alt=\"Thumbnail\"\n                    />\n                </div>\n            }\n            <div class=\"info\">\n                <button\n                    type=\"button\"\n                    cuiButton\n                    appearance=\"outlined-gray\"\n                    size=\"xxs\"\n                    icon=\"cuiIconUpload\"\n                    (click)=\"onSelectFile()\"\n                >\n                    {{ uploadButtonName() }}\n                </button>\n                @if (thumbnail()?.name) {\n                    <button\n                        class=\"remove-button\"\n                        cuiButton\n                        appearance=\"link\"\n                        size=\"sm\"\n                        type=\"button\"\n                        (click)=\"onRemoveThumbnail()\"\n                    >\n                        {{ t('REMOVE') }}\n                    </button>\n                }\n\n                <span class=\"accepted\">{{ t('ACCEPTED') }}: JPG, JPEG, PNG, MP4 {{ t('UP_TO') }} 20MB</span>\n            </div>\n        </div>\n    </div>\n</section>\n", styles: [".file{display:flex;flex-direction:column;gap:4px}.title{font-weight:500;font-size:14px;line-height:20px;display:flex;gap:2px}.title_required{color:var(--cui-danger)}.upload{padding:12px 16px;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-base-10)}.upload-file{display:flex;align-items:center;gap:8px}.upload-file input[type=file]{display:none}.info{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.accepted{color:var(--cui-base-500)}.remove-button ::ng-deep .c-content{color:var(--cui-danger)!important}.image{position:relative;display:inline-block}.image__view{border-radius:8px;object-fit:cover}.image__name{position:absolute;top:6px;left:14px;color:var(--cui-base-0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px;z-index:1}.image:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0003;z-index:0;pointer-events:none;border-radius:8px}\n"] }]
+        }] });
+
+class CuiCriterionInfoFormComponent {
+    get controls() {
+        return this.form.controls;
+    }
+    get isTitleError() {
+        return this.controls.title.invalid && this.controls.title.dirty;
+    }
+    constructor() {
+        this.destroy = inject(DestroyRef);
+        this.formBuilder = inject(NonNullableFormBuilder);
+        this.frameApiService = inject(CuiFrameApiService);
+        this.cuiIdService = inject(CuiIdService);
+        this.CONTROL_DELAY = 500;
+        this.titleId = this.cuiIdService.generate();
+        this.form = this.formBuilder.group({
+            title: this.formBuilder.control('', cuiCreateDefaultValidators({ asyncDelay: this.CONTROL_DELAY })),
+        });
+        this.heading = null;
+        this.isDescriptionEmpty = signal(false);
+        this.editorId = signal(null);
+        this.thumbnail = signal(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();
+    }
+    onEditorEmpty(isEmpty) {
+        this.isDescriptionEmpty.set(isEmpty);
+        this.isFormValidChanged.emit(this.checkFormValidation());
+    }
+    initUtilityEffect() {
+        const effectRef = effect(() => {
+            const title = this.title();
+            if (!title) {
+                return;
+            }
+            this.initFormSubscriptions();
+            this.initFrameFragments();
+            effectRef.destroy();
+        });
+    }
+    initFormSubscriptions() {
+        this.form.setValue({ title: this.title() }, { emitEvent: false });
+        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) => {
+            if (!Object.keys(value).length) {
+                return;
+            }
+            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, currentGroup]) {
+        const keys = Object.keys(currentGroup);
+        const changedFields = {};
+        keys.forEach((key) => {
+            const prev = prevGroup[key];
+            const current = currentGroup[key];
+            if (prev === current || this.controls[key].invalid) {
+                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);
+    }
+    getCaptureFromVideo(url, file) {
+        takeCaptureFromVideo(url).then((capture) => {
+            this.thumbnail.update((prev) => ({
+                ...prev,
+                name: (file?.name ?? prev?.name),
+                resource: capture
+            }));
+        });
+    }
+    checkFormValidation() {
+        return !this.isDescriptionEmpty() && !this.form.invalid;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCriterionInfoFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiCriterionInfoFormComponent, isStandalone: true, selector: "cui-criterion-info-form", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, baseResourceUrl: { classPropertyName: "baseResourceUrl", publicName: "baseResourceUrl", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { formChanged: "formChanged", isFormValidChanged: "isFormValidChanged" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <section class=\"content\">\n        <cui-form-field>\n            <label\n                cuiLabel\n                [isRequired]=\"true\"\n                [for]=\"titleId\"\n            >\n                {{ t('TITLE') }}\n            </label>\n\n            <cui-input-text\n                [cuiTextFieldId]=\"titleId\"\n                [cuiTextFieldPlaceholder]=\"t('ADD_A_TITLE')\"\n                [cuiTextFieldIsError]=\"isTitleError\"\n                [formControl]=\"form.controls.title\"\n            />\n\n            @if (isTitleError) {\n                <cui-general-control-error-hint\n                    [control]=\"form.controls.title\"\n                    [isVisible]=\"true\"\n                />\n            }\n        </cui-form-field>\n\n        <cui-utility-thumbnail\n            [baseResourceUrl]=\"baseResourceUrl()\"\n            [framerId]=\"framerId()\"\n            [(thumbnail)]=\"thumbnail\"\n        />\n\n        @if (editorId(); as editorId) {\n            <cui-editor-block\n                [title]=\"form.controls.title.value || title()\"\n                [config]=\"config()\"\n                [editorId]=\"editorId\"\n                [required]=\"true\"\n                class=\"editor\"\n                (editorEmpty)=\"onEditorEmpty($event)\"\n            />\n        }\n    </section>\n</ng-container>\n", styles: ["::ng-deep cui-dialog:has(.instruction-description-modal){inset:0;margin:auto;transform:none!important}:host{--editor-height: 650px;display:block}:host .editor{--max-editor-height: var(--editor-height)}.content{display:flex;flex-direction:column;gap:16px;padding:16px 24px}\n"], dependencies: [{ kind: "ngmodule", type: CuiAccordionModule }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiEditorBlockComponent, selector: "cui-editor-block", inputs: ["title", "editorId", "config", "required"], outputs: ["editorEmpty"] }, { kind: "ngmodule", type: CuiFormFieldModule }, { kind: "component", type: CuiFormFieldComponent, selector: "cui-form-field" }, { kind: "component", type: CuiGeneralControlErrorHintComponent, selector: "cui-general-control-error-hint", inputs: ["control", "isVisible"] }, { kind: "ngmodule", type: CuiHintModule }, { kind: "ngmodule", type: CuiInputModule }, { kind: "component", type: CuiInputTextComponent, selector: "cui-input-text" }, { kind: "directive", type: CuiTextFieldIdDirective, selector: "[cuiTextFieldId]", inputs: ["cuiTextFieldId"] }, { kind: "directive", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "directive", type: CuiTextFieldIsErrorDirective, selector: "[cuiTextFieldIsError]", inputs: ["cuiTextFieldIsError"] }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "component", type: CuiLabelComponent, selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "component", type: CuiUtilityThumbnailComponent, selector: "cui-utility-thumbnail", inputs: ["thumbnail", "framerId", "baseResourceUrl"], outputs: ["thumbnailChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCriterionInfoFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-criterion-info-form', imports: [
+                        CuiAccordionModule,
+                        CuiButtonModule,
+                        CuiEditorBlockComponent,
+                        CuiFormFieldModule,
+                        CuiGeneralControlErrorHintComponent,
+                        CuiHintModule,
+                        CuiInputModule,
+                        CuiLabelModule,
+                        CuiUtilityThumbnailComponent,
+                        ReactiveFormsModule,
+                        TranslocoDirective
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    <section class=\"content\">\n        <cui-form-field>\n            <label\n                cuiLabel\n                [isRequired]=\"true\"\n                [for]=\"titleId\"\n            >\n                {{ t('TITLE') }}\n            </label>\n\n            <cui-input-text\n                [cuiTextFieldId]=\"titleId\"\n                [cuiTextFieldPlaceholder]=\"t('ADD_A_TITLE')\"\n                [cuiTextFieldIsError]=\"isTitleError\"\n                [formControl]=\"form.controls.title\"\n            />\n\n            @if (isTitleError) {\n                <cui-general-control-error-hint\n                    [control]=\"form.controls.title\"\n                    [isVisible]=\"true\"\n                />\n            }\n        </cui-form-field>\n\n        <cui-utility-thumbnail\n            [baseResourceUrl]=\"baseResourceUrl()\"\n            [framerId]=\"framerId()\"\n            [(thumbnail)]=\"thumbnail\"\n        />\n\n        @if (editorId(); as editorId) {\n            <cui-editor-block\n                [title]=\"form.controls.title.value || title()\"\n                [config]=\"config()\"\n                [editorId]=\"editorId\"\n                [required]=\"true\"\n                class=\"editor\"\n                (editorEmpty)=\"onEditorEmpty($event)\"\n            />\n        }\n    </section>\n</ng-container>\n", styles: ["::ng-deep cui-dialog:has(.instruction-description-modal){inset:0;margin:auto;transform:none!important}:host{--editor-height: 650px;display:block}:host .editor{--max-editor-height: var(--editor-height)}.content{display:flex;flex-direction:column;gap:16px;padding:16px 24px}\n"] }]
+        }], ctorParameters: () => [] });
+
+const UTILITY_MODAL_SERVICE_TOKEN = new InjectionToken('UTILITY_MODAL_SERVICE_TOKEN');
+
+class CuiUtilityModalCreateComponent {
+    constructor() {
+        this.window = inject(CUI_WINDOW);
+        this.cuiDialogContext = inject(CUI_DIALOG_CONTEXT);
+        this.utilityModalService = inject(UTILITY_MODAL_SERVICE_TOKEN);
+        this.prevUtility = this.cuiDialogContext.data.utility;
+        this.editorResourceUrl = this.cuiDialogContext.data.editorResourceUrl;
+        this.tools = this.cuiDialogContext.data.tools;
+        this.header = this.cuiDialogContext.data.header;
+        this._utility = computed(() => signal(this.initialUtility()));
+        this.isFormValid = signal(false);
+        this.utility = computed(() => this._utility()());
+        this.initialUtility = input.required();
+    }
+    ngOnInit() {
+        this.initWindowUnloadEvent();
+    }
+    ngOnDestroy() {
+        this.window.onbeforeunload = null;
+    }
+    onSave() {
+        this.cuiDialogContext.completeWith(this.initialUtility() ? { prevId: this.prevUtility.id, ...this.utility() } : this.utility());
+    }
+    onCancel() {
+        this.destroyUtility();
+        const returnedValue = this.initialUtility() ? this.utility() : null;
+        this.cuiDialogContext.completeWith(returnedValue);
+    }
+    initWindowUnloadEvent() {
+        this.window.onbeforeunload = () => this.destroyUtility();
+    }
+    destroyUtility() {
+        const utility = this.utility();
+        if (!utility || this.initialUtility()) {
+            return;
+        }
+        this.utilityModalService.deleteUtility(utility).subscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiUtilityModalCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiUtilityModalCreateComponent, isStandalone: true, selector: "cui-utility-modal-create", inputs: { initialUtility: { classPropertyName: "initialUtility", publicName: "initialUtility", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div\n    class=\"wrapper\"\n    *transloco=\"let t\"\n>\n    <header class=\"header\">\n        <ng-container [ngTemplateOutlet]=\"header\" />\n\n        <div class=\"header__content\">\n            <cui-loader />\n\n            <div class=\"actions\">\n                @if (!initialUtility()) {\n                    <button\n                        type=\"button\"\n                        cuiButton\n                        appearance=\"secondary\"\n                        (click)=\"onCancel()\"\n                    >\n                        {{ t('CANCEL') }}\n                    </button>\n                }\n\n                <button\n                    type=\"button\"\n                    cuiButton\n                    [disabled]=\"!isFormValid()\"\n                    appearance=\"action-violet\"\n                    (click)=\"onSave()\"\n                >\n                    {{ t('DONE') }}\n                </button>\n            </div>\n        </div>\n    </header>\n\n    <ng-content />\n</div>\n", styles: [".header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px}.header__content{display:flex;gap:8px}.actions{display:flex;gap:16px}\n"], dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "component", type: CuiLoaderComponent, selector: "cui-loader" }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiUtilityModalCreateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-utility-modal-create', imports: [CuiButtonModule, CuiLoaderComponent, CuiSvgModule, NgTemplateOutlet, TranslocoDirective], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"wrapper\"\n    *transloco=\"let t\"\n>\n    <header class=\"header\">\n        <ng-container [ngTemplateOutlet]=\"header\" />\n\n        <div class=\"header__content\">\n            <cui-loader />\n\n            <div class=\"actions\">\n                @if (!initialUtility()) {\n                    <button\n                        type=\"button\"\n                        cuiButton\n                        appearance=\"secondary\"\n                        (click)=\"onCancel()\"\n                    >\n                        {{ t('CANCEL') }}\n                    </button>\n                }\n\n                <button\n                    type=\"button\"\n                    cuiButton\n                    [disabled]=\"!isFormValid()\"\n                    appearance=\"action-violet\"\n                    (click)=\"onSave()\"\n                >\n                    {{ t('DONE') }}\n                </button>\n            </div>\n        </div>\n    </header>\n\n    <ng-content />\n</div>\n", styles: [".header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px}.header__content{display:flex;gap:8px}.actions{display:flex;gap:16px}\n"] }]
+        }] });
+
+class CuiCriterionModalCreateComponent {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.cuiDialogContext = inject(CUI_DIALOG_CONTEXT);
+        this.criterionApiService = inject(UTILITY_MODAL_SERVICE_TOKEN);
+        this.isCreated = false;
+        this.editorResourceUrl = this.cuiDialogContext.data.editorResourceUrl;
+        this.tools = this.cuiDialogContext.data.tools;
+        this.header = this.cuiDialogContext.data.header;
+        this._criterion = computed(() => signal(this.initialUtility()));
+        this.isFormValid = signal(false);
+        this.criterion = computed(() => this._criterion()());
+        this.initialUtility = input.required();
+    }
+    onCriterionCreated(storageNodeId) {
+        if (this.isCreated || this.initialUtility()) {
+            return;
+        }
+        this.criterionApiService.createUtility(storageNodeId)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((criterion) => {
+            this.isCreated = true;
+            this._criterion().set(criterion);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCriterionModalCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiCriterionModalCreateComponent, isStandalone: true, selector: "ng-component", inputs: { initialUtility: { classPropertyName: "initialUtility", publicName: "initialUtility", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<cui-utility-modal-create [initialUtility]=\"criterion()\">\n    <cui-criterion-info\n        [criterion]=\"criterion()\"\n        [tools]=\"tools\"\n        [editorResourceUrl]=\"editorResourceUrl\"\n        (validationChanged)=\"isFormValid.set($event)\"\n        (criterionCreated)=\"onCriterionCreated($event)\"\n    />\n</cui-utility-modal-create>\n", dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiCriterionInfoComponent, selector: "cui-criterion-info", inputs: ["criterion", "tools", "editorResourceUrl"], outputs: ["criterionChange", "validationChanged", "criterionCreated"] }, { kind: "component", type: CuiUtilityModalCreateComponent, selector: "cui-utility-modal-create", inputs: ["initialUtility"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCriterionModalCreateComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [CuiButtonModule, CuiSvgModule, CuiCriterionInfoComponent, CuiUtilityModalCreateComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-utility-modal-create [initialUtility]=\"criterion()\">\n    <cui-criterion-info\n        [criterion]=\"criterion()\"\n        [tools]=\"tools\"\n        [editorResourceUrl]=\"editorResourceUrl\"\n        (validationChanged)=\"isFormValid.set($event)\"\n        (criterionCreated)=\"onCriterionCreated($event)\"\n    />\n</cui-utility-modal-create>\n" }]
+        }] });
+
+class CuiInstructionInfoFormComponent {
+    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.frameApiService = inject(CuiFrameApiService);
+        this.cuiIdService = inject(CuiIdService);
+        this.CONTROL_DELAY = 500;
+        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.heading = null;
+        this.isDescriptionEmpty = signal(false);
+        this.editorId = signal(null);
+        this.thumbnail = signal(null);
+        this.title = input.required();
+        this.description = input.required();
+        this.framerId = input.required();
+        this.baseResourceUrl = input.required();
+        this.config = input.required();
+        this.formChanged = output();
+        this.isFormValidChanged = output();
+        this.initUtilityEffect();
+    }
+    onEditorEmpty(isEmpty) {
+        this.isDescriptionEmpty.set(isEmpty);
+        this.isFormValidChanged.emit(this.checkFormValidation());
+    }
+    initUtilityEffect() {
+        const effectRef = effect(() => {
+            const title = this.title();
+            if (!title) {
+                return;
+            }
+            this.initFormSubscriptions();
+            this.initFrameFragments();
+            effectRef.destroy();
+        });
+    }
+    initFormSubscriptions() {
+        this.form.setValue({ title: this.title(), description: this.description() }, { emitEvent: false });
+        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) => {
+            if (!Object.keys(value).length) {
+                return;
+            }
+            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 || this.controls[key].invalid) {
+                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);
+    }
+    getCaptureFromVideo(url, file) {
+        takeCaptureFromVideo(url).then((capture) => {
+            this.thumbnail.update((prev) => ({
+                ...prev,
+                name: (file?.name ?? prev?.name),
+                resource: capture
+            }));
+        });
+    }
+    checkFormValidation() {
+        return !this.isDescriptionEmpty() && !this.form.invalid;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiInstructionInfoFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiInstructionInfoFormComponent, isStandalone: true, selector: "cui-instruction-info-form", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: true, transformFunction: null }, framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, baseResourceUrl: { classPropertyName: "baseResourceUrl", publicName: "baseResourceUrl", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { formChanged: "formChanged", isFormValidChanged: "isFormValidChanged" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <section class=\"content\">\r\n        <cui-form-field>\r\n            <label\r\n                cuiLabel\r\n                [isRequired]=\"true\"\r\n                [for]=\"titleId\"\r\n            >\r\n                {{ t('TITLE') }}\r\n            </label>\r\n\r\n            <cui-input-text\r\n                [cuiTextFieldId]=\"titleId\"\r\n                [cuiTextFieldPlaceholder]=\"t('ADD_A_TITLE')\"\r\n                [cuiTextFieldIsError]=\"isTitleError\"\r\n                [formControl]=\"form.controls.title\"\r\n            />\r\n\r\n            @if (isTitleError) {\r\n                <cui-general-control-error-hint\r\n                    [control]=\"form.controls.title\"\r\n                    [isVisible]=\"true\"\r\n                />\r\n            }\r\n        </cui-form-field>\r\n\r\n        <cui-form-field>\r\n            <label\r\n                cuiLabel\r\n                [isRequired]=\"true\"\r\n                [for]=\"descriptionId\"\r\n            >\r\n                {{ t('SHORT_DESCRIPTION') }}\r\n            </label>\r\n\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\r\n            @if (isDescriptionError) {\r\n                <cui-general-control-error-hint\r\n                    [control]=\"form.controls.description\"\r\n                    [isVisible]=\"true\"\r\n                />\r\n            }\r\n        </cui-form-field>\r\n\r\n        <cui-utility-thumbnail\r\n            [baseResourceUrl]=\"baseResourceUrl()\"\r\n            [framerId]=\"framerId()\"\r\n            [(thumbnail)]=\"thumbnail\"\r\n        />\r\n\r\n        @if (editorId(); as editorId) {\r\n            <cui-editor-block\r\n                [title]=\"form.controls.title.value || title()\"\r\n                [config]=\"config()\"\r\n                [editorId]=\"editorId\"\r\n                [required]=\"true\"\r\n                class=\"editor\"\r\n                (editorEmpty)=\"onEditorEmpty($event)\"\r\n            />\r\n        }\r\n    </section>\r\n</ng-container>\r\n", styles: ["::ng-deep cui-dialog:has(.instruction-description-modal){inset:0;margin:auto;transform:none!important}:host{--editor-height: 650px;display:block}:host .editor{--max-editor-height: var(--editor-height)}.content{display:flex;flex-direction:column;gap:16px;padding:16px 24px}\n"], dependencies: [{ kind: "ngmodule", type: CuiAccordionModule }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiEditorBlockComponent, selector: "cui-editor-block", inputs: ["title", "editorId", "config", "required"], outputs: ["editorEmpty"] }, { kind: "ngmodule", type: CuiFormFieldModule }, { kind: "component", type: CuiFormFieldComponent, selector: "cui-form-field" }, { kind: "component", type: CuiGeneralControlErrorHintComponent, selector: "cui-general-control-error-hint", inputs: ["control", "isVisible"] }, { kind: "ngmodule", type: CuiHintModule }, { kind: "ngmodule", type: CuiInputModule }, { kind: "component", type: CuiInputTextComponent, selector: "cui-input-text" }, { kind: "directive", type: CuiTextFieldIdDirective, selector: "[cuiTextFieldId]", inputs: ["cuiTextFieldId"] }, { kind: "directive", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "directive", type: CuiTextFieldIsErrorDirective, selector: "[cuiTextFieldIsError]", inputs: ["cuiTextFieldIsError"] }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "component", type: CuiLabelComponent, selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "component", type: CuiUtilityThumbnailComponent, selector: "cui-utility-thumbnail", inputs: ["thumbnail", "framerId", "baseResourceUrl"], outputs: ["thumbnailChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiInstructionInfoFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-instruction-info-form', imports: [
+                        CuiAccordionModule,
+                        CuiButtonModule,
+                        CuiEditorBlockComponent,
+                        CuiFormFieldModule,
+                        CuiGeneralControlErrorHintComponent,
+                        CuiHintModule,
+                        CuiInputModule,
+                        CuiLabelModule,
+                        CuiUtilityThumbnailComponent,
+                        ReactiveFormsModule,
+                        TranslocoDirective
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n    <section class=\"content\">\r\n        <cui-form-field>\r\n            <label\r\n                cuiLabel\r\n                [isRequired]=\"true\"\r\n                [for]=\"titleId\"\r\n            >\r\n                {{ t('TITLE') }}\r\n            </label>\r\n\r\n            <cui-input-text\r\n                [cuiTextFieldId]=\"titleId\"\r\n                [cuiTextFieldPlaceholder]=\"t('ADD_A_TITLE')\"\r\n                [cuiTextFieldIsError]=\"isTitleError\"\r\n                [formControl]=\"form.controls.title\"\r\n            />\r\n\r\n            @if (isTitleError) {\r\n                <cui-general-control-error-hint\r\n                    [control]=\"form.controls.title\"\r\n                    [isVisible]=\"true\"\r\n                />\r\n            }\r\n        </cui-form-field>\r\n\r\n        <cui-form-field>\r\n            <label\r\n                cuiLabel\r\n                [isRequired]=\"true\"\r\n                [for]=\"descriptionId\"\r\n            >\r\n                {{ t('SHORT_DESCRIPTION') }}\r\n            </label>\r\n\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\r\n            @if (isDescriptionError) {\r\n                <cui-general-control-error-hint\r\n                    [control]=\"form.controls.description\"\r\n                    [isVisible]=\"true\"\r\n                />\r\n            }\r\n        </cui-form-field>\r\n\r\n        <cui-utility-thumbnail\r\n            [baseResourceUrl]=\"baseResourceUrl()\"\r\n            [framerId]=\"framerId()\"\r\n            [(thumbnail)]=\"thumbnail\"\r\n        />\r\n\r\n        @if (editorId(); as editorId) {\r\n            <cui-editor-block\r\n                [title]=\"form.controls.title.value || title()\"\r\n                [config]=\"config()\"\r\n                [editorId]=\"editorId\"\r\n                [required]=\"true\"\r\n                class=\"editor\"\r\n                (editorEmpty)=\"onEditorEmpty($event)\"\r\n            />\r\n        }\r\n    </section>\r\n</ng-container>\r\n", styles: ["::ng-deep cui-dialog:has(.instruction-description-modal){inset:0;margin:auto;transform:none!important}:host{--editor-height: 650px;display:block}:host .editor{--max-editor-height: var(--editor-height)}.content{display:flex;flex-direction:column;gap:16px;padding:16px 24px}\n"] }]
+        }], ctorParameters: () => [] });
+
+class CuiInstructionInfoComponent {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.translocoService = inject(TranslocoService);
+        this.cuiIdService = inject(CuiIdService);
+        this.cuiCategoriesModalService = inject(CuiSelectedCategoryService);
+        this.treeStructNavigatorApiService = inject(CuiTreeStructNavigatorApiService);
+        this.instructionApiService = inject(UTILITY_MODAL_SERVICE_TOKEN);
+        this.TYPE = "INSTRUCTION_STORAGE" /* TreeStructType.Instruction */;
+        this.skipCategoryChange = false;
+        this.categoryId = this.cuiIdService.generate();
+        this.category = this.cuiCategoriesModalService.category;
+        this.isFormValid = signal(false);
+        this.prevCategoryId = signal(null);
+        this.editorConfig = signal(null);
+        this.labelColor = computed(() => this.category()?.title ? 'var(--cui-base-900)' : 'var(--cui-base-400)');
+        this.selectTitle = computed(() => this.category()?.title || this.translocoService.translate('SELECT') + '...');
+        this.element = viewChild('scrollContent');
+        this.instruction = model();
+        this.tools = input.required();
+        this.editorResourceUrl = input.required();
+        this.validationChanged = output();
+        this.instructionCreated = output();
+        this.initConfigEffect();
+        this.initCategoryEffect();
+    }
+    ngOnInit() {
+        this.initCategory();
+    }
+    onFormChanged(values, instructionId) {
+        const actions = {
+            title: (title) => this.changeTitle(title, instructionId),
+            description: (description) => this.changeDescription(description, instructionId)
+        };
+        forkJoin(Object.keys(values).map((key) => actions[key](values[key] || '')))
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe();
+    }
+    onFormValidationChanged(isValid) {
+        this.isFormValid.set(isValid);
+        this.validationChanged.emit(isValid);
+    }
+    initCategoryEffect() {
+        effect(() => {
+            const category = this.category();
+            const storageObjectInstruction = untracked(this.instruction);
+            if (!category || this.skipCategoryChange) {
+                this.skipCategoryChange = false;
+                return;
+            }
+            if (storageObjectInstruction) {
+                this.changeCategory(category.id, storageObjectInstruction.id);
+                return;
+            }
+            this.createInstruction(category.id);
+        });
+    }
+    initConfigEffect() {
+        effect(() => {
+            const element = this.element()?.nativeElement;
+            if (!element) {
+                return;
+            }
+            this.editorConfig.set({ tools: this.tools(), element });
+        });
+    }
+    initCategory() {
+        const storageObjectId = this.instruction()?.id;
+        if (!storageObjectId) {
+            return;
+        }
+        this.treeStructNavigatorApiService
+            .getCategory(storageObjectId, "INSTRUCTION_STORAGE" /* TreeStructType.Instruction */)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((category) => {
+            this.skipCategoryChange = true;
+            this.prevCategoryId.set(category.id);
+            this.cuiCategoriesModalService.setCurrentCategory(category);
+        });
+    }
+    changeCategory(categoryId, targetId) {
+        const prevCategoryId = untracked(this.prevCategoryId);
+        if (!prevCategoryId) {
+            return;
+        }
+        this.subscription?.unsubscribe();
+        this.subscription = this.treeStructNavigatorApiService
+            .moveElement({
+            type: "MOVING_TARGET_TREE_STRUCT" /* MovingType.TARGET_TREE_STRUCT */,
+            movableItemId: targetId,
+            treeStructTargetItemId: categoryId,
+            treeStructMovableItemId: prevCategoryId
+        })
+            .subscribe(() => this.prevCategoryId.set(categoryId));
+    }
+    createInstruction(categoryId) {
+        this.instructionCreated.emit(categoryId);
+        this.prevCategoryId.set(categoryId);
+    }
+    changeTitle(value, instructionId) {
+        return this.instructionApiService.changeTitle(instructionId, value).pipe(finalize(() => this.instruction.update((prev) => ({
+            ...prev,
+            storageElement: { ...prev.storageElement, title: value }
+        }))));
+    }
+    changeDescription(value, instructionId) {
+        if (!this.instructionApiService.changeDescription) {
+            throw new Error('Change description not implemented');
+        }
+        return this.instructionApiService.changeDescription(instructionId, value).pipe(finalize(() => this.instruction.update((prev) => ({
+            ...prev,
+            storageElement: { ...prev.storageElement, shortDescription: value }
+        }))));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiInstructionInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiInstructionInfoComponent, isStandalone: true, selector: "cui-instruction-info", inputs: { instruction: { classPropertyName: "instruction", publicName: "instruction", isSignal: true, isRequired: false, transformFunction: null }, tools: { classPropertyName: "tools", publicName: "tools", isSignal: true, isRequired: true, transformFunction: null }, editorResourceUrl: { classPropertyName: "editorResourceUrl", publicName: "editorResourceUrl", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { instruction: "instructionChange", validationChanged: "validationChanged", instructionCreated: "instructionCreated" }, providers: [CuiSelectedCategoryService], viewQueries: [{ propertyName: "element", first: true, predicate: ["scrollContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n    class=\"wrapper\"\r\n    *transloco=\"let t\"\r\n>\r\n    <div\r\n        #scrollContent\r\n        class=\"content content_scrollable\"\r\n    >\r\n        <div class=\"category\">\r\n            <cui-form-field>\r\n                <label\r\n                    cuiLabel\r\n                    [for]=\"categoryId\"\r\n                    [isRequired]=\"true\"\r\n                >\r\n                    {{ t('SELECT_CATEGORY') }}\r\n                </label>\r\n                <cui-categories\r\n                    [buttonId]=\"categoryId\"\r\n                    [treeStructType]=\"TYPE\"\r\n                >\r\n                    <div class=\"select\">\r\n                        <span [style.color]=\"labelColor()\">\r\n                            {{ selectTitle() }}\r\n                        </span>\r\n\r\n                        <cui-svg icon=\"cuiIconChevronDown\" />\r\n                    </div>\r\n                </cui-categories>\r\n            </cui-form-field>\r\n        </div>\r\n\r\n        @let instructionData = instruction();\r\n        @let editorConfigData = editorConfig();\r\n\r\n        @if (editorConfigData && instructionData) {\r\n            <cui-instruction-info-form\r\n                [config]=\"editorConfigData\"\r\n                [baseResourceUrl]=\"editorResourceUrl()\"\r\n                [title]=\"instructionData.storageElement.title\"\r\n                [description]=\"instructionData.storageElement.shortDescription\"\r\n                [framerId]=\"instructionData.storageElement.framerInstructionId\"\r\n                class=\"utility\"\r\n                (isFormValidChanged)=\"onFormValidationChanged($event)\"\r\n                (formChanged)=\"onFormChanged($event, instructionData.id)\"\r\n            />\r\n        }\r\n    </div>\r\n</div>\r\n", styles: [".wrapper{display:flex;flex-direction:column;height:100%}.content{height:calc(100vh - 109px)}.content_scrollable{overflow:auto}.category{padding-top:16px;padding-right:23px;padding-left:23px}.select{padding:7px 13px;font-weight:400;font-size:14px;line-height:20px;display:flex;justify-content:space-between;height:36px;border-radius:8px;border:1px solid var(--cui-base-200);color:var(--cui-base-900);background:var(--cui-input)}.utility{--editor-height: none}\n"], dependencies: [{ kind: "ngmodule", type: CuiBadgeModule }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiCategoriesComponent, selector: "cui-categories", inputs: ["treeStructType", "buttonId", "disabled"] }, { kind: "ngmodule", type: CuiDialogModule }, { kind: "ngmodule", type: CuiFormFieldModule }, { kind: "component", type: CuiFormFieldComponent, selector: "cui-form-field" }, { kind: "component", type: CuiInstructionInfoFormComponent, selector: "cui-instruction-info-form", inputs: ["title", "description", "framerId", "baseResourceUrl", "config"], outputs: ["formChanged", "isFormValidChanged"] }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "component", type: CuiLabelComponent, selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i4.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiInstructionInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-instruction-info', imports: [
+                        CuiBadgeModule,
+                        CuiButtonModule,
+                        CuiCategoriesComponent,
+                        CuiDialogModule,
+                        CuiFormFieldModule,
+                        CuiInstructionInfoFormComponent,
+                        CuiLabelModule,
+                        CuiSvgModule,
+                        TranslocoModule
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiSelectedCategoryService], template: "<div\r\n    class=\"wrapper\"\r\n    *transloco=\"let t\"\r\n>\r\n    <div\r\n        #scrollContent\r\n        class=\"content content_scrollable\"\r\n    >\r\n        <div class=\"category\">\r\n            <cui-form-field>\r\n                <label\r\n                    cuiLabel\r\n                    [for]=\"categoryId\"\r\n                    [isRequired]=\"true\"\r\n                >\r\n                    {{ t('SELECT_CATEGORY') }}\r\n                </label>\r\n                <cui-categories\r\n                    [buttonId]=\"categoryId\"\r\n                    [treeStructType]=\"TYPE\"\r\n                >\r\n                    <div class=\"select\">\r\n                        <span [style.color]=\"labelColor()\">\r\n                            {{ selectTitle() }}\r\n                        </span>\r\n\r\n                        <cui-svg icon=\"cuiIconChevronDown\" />\r\n                    </div>\r\n                </cui-categories>\r\n            </cui-form-field>\r\n        </div>\r\n\r\n        @let instructionData = instruction();\r\n        @let editorConfigData = editorConfig();\r\n\r\n        @if (editorConfigData && instructionData) {\r\n            <cui-instruction-info-form\r\n                [config]=\"editorConfigData\"\r\n                [baseResourceUrl]=\"editorResourceUrl()\"\r\n                [title]=\"instructionData.storageElement.title\"\r\n                [description]=\"instructionData.storageElement.shortDescription\"\r\n                [framerId]=\"instructionData.storageElement.framerInstructionId\"\r\n                class=\"utility\"\r\n                (isFormValidChanged)=\"onFormValidationChanged($event)\"\r\n                (formChanged)=\"onFormChanged($event, instructionData.id)\"\r\n            />\r\n        }\r\n    </div>\r\n</div>\r\n", styles: [".wrapper{display:flex;flex-direction:column;height:100%}.content{height:calc(100vh - 109px)}.content_scrollable{overflow:auto}.category{padding-top:16px;padding-right:23px;padding-left:23px}.select{padding:7px 13px;font-weight:400;font-size:14px;line-height:20px;display:flex;justify-content:space-between;height:36px;border-radius:8px;border:1px solid var(--cui-base-200);color:var(--cui-base-900);background:var(--cui-input)}.utility{--editor-height: none}\n"] }]
+        }], ctorParameters: () => [] });
+
+class CuiInstructionModalCreateComponent {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.cuiDialogContext = inject(CUI_DIALOG_CONTEXT);
+        this.instructionApiService = inject(UTILITY_MODAL_SERVICE_TOKEN);
+        this.isCreated = false;
+        this.editorResourceUrl = this.cuiDialogContext.data.editorResourceUrl;
+        this.tools = this.cuiDialogContext.data.tools;
+        this.header = this.cuiDialogContext.data.header;
+        this._instruction = computed(() => signal(this.initialUtility()));
+        this.isFormValid = signal(false);
+        this.instruction = computed(() => this._instruction()());
+        this.initialUtility = input.required();
+    }
+    onInstructionCreated(storageNodeId) {
+        if (this.isCreated || this.initialUtility()) {
+            return;
+        }
+        this.instructionApiService.createUtility(storageNodeId)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((instruction) => {
+            this.isCreated = true;
+            this._instruction().set(instruction);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiInstructionModalCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiInstructionModalCreateComponent, isStandalone: true, selector: "ng-component", inputs: { initialUtility: { classPropertyName: "initialUtility", publicName: "initialUtility", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<cui-utility-modal-create [initialUtility]=\"instruction()\">\n    <cui-instruction-info\n        [instruction]=\"instruction()\"\n        [tools]=\"tools\"\n        [editorResourceUrl]=\"editorResourceUrl\"\n        (validationChanged)=\"isFormValid.set($event)\"\n        (instructionCreated)=\"onInstructionCreated($event)\"\n    />\n</cui-utility-modal-create>\n", dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiUtilityModalCreateComponent, selector: "cui-utility-modal-create", inputs: ["initialUtility"] }, { kind: "component", type: CuiInstructionInfoComponent, selector: "cui-instruction-info", inputs: ["instruction", "tools", "editorResourceUrl"], outputs: ["instructionChange", "validationChanged", "instructionCreated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiInstructionModalCreateComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [CuiButtonModule, CuiSvgModule, CuiUtilityModalCreateComponent, CuiInstructionInfoComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-utility-modal-create [initialUtility]=\"instruction()\">\n    <cui-instruction-info\n        [instruction]=\"instruction()\"\n        [tools]=\"tools\"\n        [editorResourceUrl]=\"editorResourceUrl\"\n        (validationChanged)=\"isFormValid.set($event)\"\n        (instructionCreated)=\"onInstructionCreated($event)\"\n    />\n</cui-utility-modal-create>\n" }]
+        }] });
+
+class CuiReadonlyUtilityModalComponent {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.cuiDialogContext = inject(CUI_DIALOG_CONTEXT);
+        this.utilityModalService = inject(UTILITY_MODAL_SERVICE_TOKEN);
+        this.editorResourceUrl = this.cuiDialogContext.data.editorResourceUrl;
+        this.tools = this.cuiDialogContext.data.tools;
+        this.header = this.cuiDialogContext.data.header;
+        this.isLoading = signal(false);
+        this.utility = input.required();
+        this.utilityUnbinded = output();
+    }
+    onClose() {
+        this.cuiDialogContext.completeWith();
+    }
+    onUnbind() {
+        this.isLoading.set(true);
+        this.utilityModalService.unbindUtility(this.utility().id)
+            .pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.isLoading.set(false)))
+            .subscribe((utility) => {
+            this.utilityUnbinded.emit(utility);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiReadonlyUtilityModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiReadonlyUtilityModalComponent, isStandalone: true, selector: "cui-readonly-utility-modal", inputs: { utility: { classPropertyName: "utility", publicName: "utility", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { utilityUnbinded: "utilityUnbinded" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <header class=\"header\">\n        <ng-container [ngTemplateOutlet]=\"header\" />\n\n        <cui-badge\n            color=\"violet\"\n            class=\"badge\"\n        >\n            <cui-svg\n                class=\"icon\"\n                icon=\"cuiIconVariant\"\n                color=\"var(--cui-violet-400)\"\n            />\n            {{ t('INSERTED') }}\n        </cui-badge>\n\n        <button\n            type=\"button\"\n            cuiButton\n            appearance=\"ghost\"\n            icon=\"cuiIconX\"\n            class=\"button\"\n            (click)=\"onClose()\"\n        ></button>\n    </header>\n\n    <ng-content />\n\n    <div class=\"actions\">\n        <button\n            type=\"button\"\n            #button\n            cuiButton\n            size=\"sm\"\n            icon=\"cuiIconLinkBroken\"\n            appearance=\"action-violet\"\n            [isLoaderShown]=\"isLoading()\"\n            (click)=\"onUnbind()\"\n        >\n            {{ t('UNBIND') }}\n        </button>\n    </div>\n</ng-container>\n", styles: [".header{display:flex;gap:8px;align-items:center;padding:16px 24px}.header__title{font-weight:500;font-size:16px;line-height:24px}.button{margin-left:auto}.actions{padding:16px;border-top:1px solid var(--cui-base-200)}.badge{display:flex;gap:4px;align-items:center;font-weight:500;font-size:14px;line-height:20px}\n"], dependencies: [{ kind: "ngmodule", type: CuiBadgeModule }, { kind: "component", type: CuiBadgeComponent, selector: "cui-badge", inputs: ["color", "size", "isWithDot"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiReadonlyUtilityModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-readonly-utility-modal', imports: [CuiBadgeModule, CuiButtonModule, CuiSvgModule, NgTemplateOutlet, TranslocoDirective], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    <header class=\"header\">\n        <ng-container [ngTemplateOutlet]=\"header\" />\n\n        <cui-badge\n            color=\"violet\"\n            class=\"badge\"\n        >\n            <cui-svg\n                class=\"icon\"\n                icon=\"cuiIconVariant\"\n                color=\"var(--cui-violet-400)\"\n            />\n            {{ t('INSERTED') }}\n        </cui-badge>\n\n        <button\n            type=\"button\"\n            cuiButton\n            appearance=\"ghost\"\n            icon=\"cuiIconX\"\n            class=\"button\"\n            (click)=\"onClose()\"\n        ></button>\n    </header>\n\n    <ng-content />\n\n    <div class=\"actions\">\n        <button\n            type=\"button\"\n            #button\n            cuiButton\n            size=\"sm\"\n            icon=\"cuiIconLinkBroken\"\n            appearance=\"action-violet\"\n            [isLoaderShown]=\"isLoading()\"\n            (click)=\"onUnbind()\"\n        >\n            {{ t('UNBIND') }}\n        </button>\n    </div>\n</ng-container>\n", styles: [".header{display:flex;gap:8px;align-items:center;padding:16px 24px}.header__title{font-weight:500;font-size:16px;line-height:24px}.button{margin-left:auto}.actions{padding:16px;border-top:1px solid var(--cui-base-200)}.badge{display:flex;gap:4px;align-items:center;font-weight:500;font-size:14px;line-height:20px}\n"] }]
+        }] });
+
+class CuiReadonlyCriterionModalComponent {
+    constructor() {
+        this.cuiDialogContext = inject(CUI_DIALOG_CONTEXT);
+        this.cuiRenderDynamicComponentsService = inject(CuiRenderDynamicComponentsService);
+        this.editorResourceUrl = this.cuiDialogContext.data.editorResourceUrl;
+        this.tools = this.cuiDialogContext.data.tools;
+        this.header = this.cuiDialogContext.data.header;
+        this.isLoading = signal(false);
+        this.framerId = computed(() => this.criterion().storageElement.framerCriterionId);
+        this.criterion = input.required();
+    }
+    onUnbind(criterion) {
+        this.cuiRenderDynamicComponentsService.closeAll();
+        this.cuiRenderDynamicComponentsService.open({
+            component: CuiCriterionModalCreateComponent,
+            inputs: { criterion }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiReadonlyCriterionModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiReadonlyCriterionModalComponent, isStandalone: true, selector: "cui-readonly-criterion-modal", inputs: { criterion: { classPropertyName: "criterion", publicName: "criterion", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<cui-readonly-utility-modal\n    [utility]=\"criterion()\"\n    (utilityUnbinded)=\"onUnbind($event)\"\n>\n    <ng-container *transloco=\"let t\">\n        <div\n            #scrollContainer\n            class=\"info\"\n        >\n            <h3 class=\"title\">{{ criterion().storageElement.title }}</h3>\n\n            <cui-criterion-readonly-info\n                [framerId]=\"framerId()\"\n                [editorResourceUrl]=\"editorResourceUrl\"\n                [tools]=\"tools\"\n                [element]=\"scrollContainer\"\n                class=\"info__block\"\n            />\n        </div>\n    </ng-container>\n</cui-readonly-utility-modal>\n", styles: [".info{padding:16px 8px;display:flex;flex-direction:column;height:calc(100vh - 177px);overflow:auto}.info__block{overflow:visible}.title{padding-right:16px;padding-left:16px;font-weight:500;font-size:16px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: CuiBadgeModule }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiCriterionReadonlyInfoComponent, selector: "cui-criterion-readonly-info", inputs: ["framerId", "element", "tools", "editorResourceUrl"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiReadonlyUtilityModalComponent, selector: "cui-readonly-utility-modal", inputs: ["utility"], outputs: ["utilityUnbinded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiReadonlyCriterionModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-readonly-criterion-modal', imports: [
+                        CuiBadgeModule,
+                        CuiButtonModule,
+                        CuiSvgModule,
+                        CuiCriterionReadonlyInfoComponent,
+                        TranslocoDirective,
+                        CuiReadonlyUtilityModalComponent
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-readonly-utility-modal\n    [utility]=\"criterion()\"\n    (utilityUnbinded)=\"onUnbind($event)\"\n>\n    <ng-container *transloco=\"let t\">\n        <div\n            #scrollContainer\n            class=\"info\"\n        >\n            <h3 class=\"title\">{{ criterion().storageElement.title }}</h3>\n\n            <cui-criterion-readonly-info\n                [framerId]=\"framerId()\"\n                [editorResourceUrl]=\"editorResourceUrl\"\n                [tools]=\"tools\"\n                [element]=\"scrollContainer\"\n                class=\"info__block\"\n            />\n        </div>\n    </ng-container>\n</cui-readonly-utility-modal>\n", styles: [".info{padding:16px 8px;display:flex;flex-direction:column;height:calc(100vh - 177px);overflow:auto}.info__block{overflow:visible}.title{padding-right:16px;padding-left:16px;font-weight:500;font-size:16px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow:visible}\n"] }]
+        }] });
+
+class CuiReadonlyInstructionModalComponent {
+    constructor() {
+        this.cuiDialogContext = inject(CUI_DIALOG_CONTEXT);
+        this.cuiRenderDynamicComponentsService = inject(CuiRenderDynamicComponentsService);
+        this.editorResourceUrl = this.cuiDialogContext.data.editorResourceUrl;
+        this.tools = this.cuiDialogContext.data.tools;
+        this.header = this.cuiDialogContext.data.header;
+        this.isLoading = signal(false);
+        this.framerId = computed(() => this.instruction().storageElement.framerInstructionId);
+        this.instruction = input.required();
+    }
+    onUnbind(instruction) {
+        this.cuiRenderDynamicComponentsService.closeAll();
+        this.cuiRenderDynamicComponentsService.open({
+            component: CuiInstructionModalCreateComponent,
+            inputs: { initialUtility: instruction }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiReadonlyInstructionModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiReadonlyInstructionModalComponent, isStandalone: true, selector: "cui-readonly-instruction-modal", inputs: { instruction: { classPropertyName: "instruction", publicName: "instruction", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <cui-readonly-utility-modal [utility]=\"instruction()\" (utilityUnbinded)=\"onUnbind($event)\">\n            <div\n                #scrollContainer\n                class=\"info\"\n            >\n                <h3 class=\"title\">{{ instruction().storageElement.title }}</h3>\n\n                <cui-instruction-readonly-info\n                    [framerId]=\"framerId()\"\n                    [editorResourceUrl]=\"editorResourceUrl\"\n                    [tools]=\"tools\"\n                    [element]=\"scrollContainer\"\n                    class=\"info__block\"\n                />\n            </div>\n    </cui-readonly-utility-modal>\n</ng-container>\n", styles: [".info{padding:16px 8px;display:flex;flex-direction:column;height:calc(100vh - 177px);overflow:auto}.info__block{overflow:visible}.title{padding-right:16px;padding-left:16px;font-weight:500;font-size:16px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: CuiBadgeModule }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiInstructionReadonlyInfoComponent, selector: "cui-instruction-readonly-info", inputs: ["framerId", "element", "tools", "editorResourceUrl"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiReadonlyUtilityModalComponent, selector: "cui-readonly-utility-modal", inputs: ["utility"], outputs: ["utilityUnbinded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiReadonlyInstructionModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-readonly-instruction-modal', imports: [
+                        CuiBadgeModule,
+                        CuiButtonModule,
+                        CuiSvgModule,
+                        CuiInstructionReadonlyInfoComponent,
+                        TranslocoDirective,
+                        CuiReadonlyUtilityModalComponent
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    <cui-readonly-utility-modal [utility]=\"instruction()\" (utilityUnbinded)=\"onUnbind($event)\">\n            <div\n                #scrollContainer\n                class=\"info\"\n            >\n                <h3 class=\"title\">{{ instruction().storageElement.title }}</h3>\n\n                <cui-instruction-readonly-info\n                    [framerId]=\"framerId()\"\n                    [editorResourceUrl]=\"editorResourceUrl\"\n                    [tools]=\"tools\"\n                    [element]=\"scrollContainer\"\n                    class=\"info__block\"\n                />\n            </div>\n    </cui-readonly-utility-modal>\n</ng-container>\n", styles: [".info{padding:16px 8px;display:flex;flex-direction:column;height:calc(100vh - 177px);overflow:auto}.info__block{overflow:visible}.title{padding-right:16px;padding-left:16px;font-weight:500;font-size:16px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow:visible}\n"] }]
+        }] });
+
+class CuiUtilityModalComponent {
+    constructor() {
+        this.cuiDialogContext = inject(CUI_DIALOG_CONTEXT);
+        this.cuiRenderDynamicComponentsService = inject(CuiRenderDynamicComponentsService);
+        this.utility = this.cuiDialogContext.data.utility;
+        this.initialComponent = this.cuiDialogContext.data.initialComponent;
+        this.cuiRenderDynamicComponentsService.open({
+            component: this.initialComponent,
+            inputs: { initialUtility: this.utility }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiUtilityModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiUtilityModalComponent, isStandalone: true, selector: "cui-utility-modal", providers: [CuiRenderDynamicComponentsService], ngImport: i0, template: "<cui-render-dynamic-components />\n", styles: [".host{display:block;height:calc(100vh - 40px)}\n"], dependencies: [{ kind: "component", type: CuiRenderDynamicComponentsComponent, selector: "cui-render-dynamic-components" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiUtilityModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-utility-modal', imports: [CuiRenderDynamicComponentsComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiRenderDynamicComponentsService], template: "<cui-render-dynamic-components />\n", styles: [".host{display:block;height:calc(100vh - 40px)}\n"] }]
+        }], ctorParameters: () => [] });
+
+class CuiCriterionInfoComponent {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.translocoService = inject(TranslocoService);
+        this.cuiIdService = inject(CuiIdService);
+        this.cuiCategoriesModalService = inject(CuiSelectedCategoryService);
+        this.treeStructNavigatorApiService = inject(CuiTreeStructNavigatorApiService);
+        this.criterionApiService = inject(UTILITY_MODAL_SERVICE_TOKEN);
+        this.skipCategoryChange = false;
+        this.TYPE = "CRITERION_STORAGE" /* TreeStructType.Criteria */;
+        this.categoryId = this.cuiIdService.generate();
+        this.category = this.cuiCategoriesModalService.category;
+        this.isFormValid = signal(false);
+        this.prevCategoryId = signal(null);
+        this.editorConfig = signal(null);
+        this.labelColor = computed(() => this.category()?.title ? 'var(--cui-base-900)' : 'var(--cui-base-400)');
+        this.selectTitle = computed(() => this.category()?.title ?? this.translocoService.translate('SELECT') + '...');
+        this.element = viewChild('scrollContent');
+        this.criterion = model();
+        this.tools = input.required();
+        this.editorResourceUrl = input.required();
+        this.validationChanged = output();
+        this.criterionCreated = output();
+        this.initConfigEffect();
+        this.initCategoryEffect();
+    }
+    ngOnInit() {
+        this.initCategory();
+    }
+    onFormChanged(values, criterionId) {
+        const actions = {
+            title: (title) => this.changeTitle(title, criterionId)
+        };
+        forkJoin(Object.keys(values).map((key) => actions[key](values[key] || '')))
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe();
+    }
+    onFormValidationChanged(isValid) {
+        this.isFormValid.set(isValid);
+        this.validationChanged.emit(isValid);
+    }
+    initCategoryEffect() {
+        effect(() => {
+            const category = this.category();
+            const storageObjectCriterion = untracked(this.criterion);
+            if (!category || this.skipCategoryChange) {
+                this.skipCategoryChange = false;
+                return;
+            }
+            if (storageObjectCriterion) {
+                this.changeCategory(category.id, storageObjectCriterion.id);
+                return;
+            }
+            this.createCriterion(category.id);
+        });
+    }
+    initConfigEffect() {
+        effect(() => {
+            const element = this.element()?.nativeElement;
+            if (!element) {
+                return;
+            }
+            this.editorConfig.set({ tools: this.tools(), element });
+        });
+    }
+    initCategory() {
+        const storageObjectId = this.criterion()?.id;
+        if (!storageObjectId) {
+            return;
+        }
+        this.treeStructNavigatorApiService
+            .getCategory(storageObjectId, "CRITERION_STORAGE" /* TreeStructType.Criteria */)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((category) => {
+            this.skipCategoryChange = true;
+            this.prevCategoryId.set(category.id);
+            this.cuiCategoriesModalService.setCurrentCategory(category);
+        });
+    }
+    changeCategory(categoryId, targetId) {
+        const prevCategoryId = untracked(this.prevCategoryId);
+        if (!prevCategoryId) {
+            return;
+        }
+        this.subscription?.unsubscribe();
+        this.subscription = this.treeStructNavigatorApiService
+            .moveElement({
+            type: "MOVING_TARGET_TREE_STRUCT" /* MovingType.TARGET_TREE_STRUCT */,
+            movableItemId: targetId,
+            treeStructTargetItemId: categoryId,
+            treeStructMovableItemId: prevCategoryId
+        })
+            .subscribe(() => this.prevCategoryId.set(categoryId));
+    }
+    createCriterion(categoryId) {
+        this.criterionCreated.emit(categoryId);
+        this.prevCategoryId.set(categoryId);
+    }
+    changeTitle(value, criterionId) {
+        return this.criterionApiService.changeTitle(criterionId, value).pipe(finalize(() => this.criterion.update((prev) => ({
+            ...prev,
+            storageElement: { ...prev.storageElement, title: value }
+        }))));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCriterionInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiCriterionInfoComponent, isStandalone: true, selector: "cui-criterion-info", inputs: { criterion: { classPropertyName: "criterion", publicName: "criterion", isSignal: true, isRequired: false, transformFunction: null }, tools: { classPropertyName: "tools", publicName: "tools", isSignal: true, isRequired: true, transformFunction: null }, editorResourceUrl: { classPropertyName: "editorResourceUrl", publicName: "editorResourceUrl", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { criterion: "criterionChange", validationChanged: "validationChanged", criterionCreated: "criterionCreated" }, providers: [CuiSelectedCategoryService], viewQueries: [{ propertyName: "element", first: true, predicate: ["scrollContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    class=\"wrapper\"\n    *transloco=\"let t\"\n>\n    <div\n        #scrollContent\n        class=\"content content_scrollable\"\n    >\n        <div class=\"category\">\n            <cui-form-field>\n                <label\n                    cuiLabel\n                    [for]=\"categoryId\"\n                    [isRequired]=\"true\"\n                >\n                    {{ t('SELECT_CATEGORY') }}\n                </label>\n                <cui-categories\n                    [buttonId]=\"categoryId\"\n                    [treeStructType]=\"TYPE\"\n                >\n                    <div class=\"select\">\n                        <span [style.color]=\"labelColor()\">\n                            {{ selectTitle() }}\n                        </span>\n\n                        <cui-svg icon=\"cuiIconChevronDown\" />\n                    </div>\n                </cui-categories>\n            </cui-form-field>\n        </div>\n\n        @let criterionData = criterion();\n        @let editorConfigData = editorConfig();\n\n        @if (editorConfigData && criterionData) {\n            <cui-criterion-info-form\n                [config]=\"editorConfigData\"\n                [baseResourceUrl]=\"editorResourceUrl()\"\n                [title]=\"criterionData.storageElement.title\"\n                [framerId]=\"criterionData.storageElement.framerCriterionId\"\n                class=\"utility\"\n                (isFormValidChanged)=\"onFormValidationChanged($event)\"\n                (formChanged)=\"onFormChanged($event, criterionData.id)\"\n            />\n        }\n    </div>\n</div>\n", styles: [".wrapper{display:flex;flex-direction:column;height:100%}.content{height:calc(100vh - 109px)}.content_scrollable{overflow:auto}.category{padding-top:16px;padding-right:23px;padding-left:23px}.select{padding:7px 13px;font-weight:400;font-size:14px;line-height:20px;display:flex;justify-content:space-between;height:36px;border-radius:8px;border:1px solid var(--cui-base-200);color:var(--cui-base-900);background:var(--cui-input)}.utility{--editor-height: none}\n"], dependencies: [{ kind: "ngmodule", type: CuiBadgeModule }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiCategoriesComponent, selector: "cui-categories", inputs: ["treeStructType", "buttonId", "disabled"] }, { kind: "ngmodule", type: CuiDialogModule }, { kind: "ngmodule", type: CuiFormFieldModule }, { kind: "component", type: CuiFormFieldComponent, selector: "cui-form-field" }, { kind: "component", type: CuiCriterionInfoFormComponent, selector: "cui-criterion-info-form", inputs: ["title", "framerId", "baseResourceUrl", "config"], outputs: ["formChanged", "isFormValidChanged"] }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "component", type: CuiLabelComponent, selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i4.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCriterionInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-criterion-info', imports: [
+                        CuiBadgeModule,
+                        CuiButtonModule,
+                        CuiCategoriesComponent,
+                        CuiDialogModule,
+                        CuiFormFieldModule,
+                        CuiCriterionInfoFormComponent,
+                        CuiLabelModule,
+                        CuiSvgModule,
+                        TranslocoModule
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiSelectedCategoryService], template: "<div\n    class=\"wrapper\"\n    *transloco=\"let t\"\n>\n    <div\n        #scrollContent\n        class=\"content content_scrollable\"\n    >\n        <div class=\"category\">\n            <cui-form-field>\n                <label\n                    cuiLabel\n                    [for]=\"categoryId\"\n                    [isRequired]=\"true\"\n                >\n                    {{ t('SELECT_CATEGORY') }}\n                </label>\n                <cui-categories\n                    [buttonId]=\"categoryId\"\n                    [treeStructType]=\"TYPE\"\n                >\n                    <div class=\"select\">\n                        <span [style.color]=\"labelColor()\">\n                            {{ selectTitle() }}\n                        </span>\n\n                        <cui-svg icon=\"cuiIconChevronDown\" />\n                    </div>\n                </cui-categories>\n            </cui-form-field>\n        </div>\n\n        @let criterionData = criterion();\n        @let editorConfigData = editorConfig();\n\n        @if (editorConfigData && criterionData) {\n            <cui-criterion-info-form\n                [config]=\"editorConfigData\"\n                [baseResourceUrl]=\"editorResourceUrl()\"\n                [title]=\"criterionData.storageElement.title\"\n                [framerId]=\"criterionData.storageElement.framerCriterionId\"\n                class=\"utility\"\n                (isFormValidChanged)=\"onFormValidationChanged($event)\"\n                (formChanged)=\"onFormChanged($event, criterionData.id)\"\n            />\n        }\n    </div>\n</div>\n", styles: [".wrapper{display:flex;flex-direction:column;height:100%}.content{height:calc(100vh - 109px)}.content_scrollable{overflow:auto}.category{padding-top:16px;padding-right:23px;padding-left:23px}.select{padding:7px 13px;font-weight:400;font-size:14px;line-height:20px;display:flex;justify-content:space-between;height:36px;border-radius:8px;border:1px solid var(--cui-base-200);color:var(--cui-base-900);background:var(--cui-input)}.utility{--editor-height: none}\n"] }]
+        }], ctorParameters: () => [] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AngularOutsideLoaderService, CUI_ALERTS, CUI_ALERT_CONTEXT, CUI_ALERT_DEFAULT_OPTIONS, CUI_ALERT_OPTIONS, CUI_ANIMATIONS_DEFAULT_DURATION, CUI_BANNER_DEFAULT_OPTIONS, CUI_BANNER_OPTIONS, CUI_BUTTON_DEFAULT_OPTIONS, CUI_BUTTON_OPTIONS, CUI_DEFAULT_THEME, CUI_DIALOGS, CUI_DIALOG_CONTEXT, CUI_DIALOG_DEFAULT_OPTIONS, CUI_DIALOG_OPTIONS, CUI_INPUT_TIME_DEFAULT_OPTIONS, CUI_INPUT_TIME_OPTIONS, CUI_NOTIFICATION_DEFAULT_OPTIONS, CUI_NOTIFICATION_ICONS, CUI_NOTIFICATION_ICON_OPTIONS, CUI_NOTIFICATION_ICON_OPTIONS_DEFAULT_MODE, CUI_NOTIFICATION_ICON_OPTIONS_LIGHT_MODE, CUI_NOTIFICATION_OPTIONS, CUI_ROOT_SELECTOR, CUI_TAB_ACTIVATE, CUI_TEXT_FIELD_CONTROLLER, CUI_TEXT_FIELD_ICON_LEFT, CUI_TEXT_FIELD_ID, CUI_TEXT_FIELD_IS_ERROR, CUI_TEXT_FIELD_PLACEHOLDER, CUI_TEXT_FIELD_SIZE, CUI_TEXT_FILED_CONTROLLER_PROVIDER, CUI_THEME, CUI_THEME_STORAGE_DEFAULT_KEY, CUI_THEME_STORAGE_KEY, CUI_TOOLTIP_COMPONENT, CUI_TOOLTIP_DEFAULT_OPTIONS, CUI_TOOLTIP_DIRECTIONS, CUI_TOOLTIP_OPTIONS, CUI_TOOLTIP_PROVIDERS, CuiAccordionComponent, CuiAccordionDirective, CuiAccordionItemComponent, CuiAccordionModule, CuiAlertComponent, CuiAlertModule, CuiAlertService, CuiAlertsComponent, CuiAttachesTool, CuiAuthBase, CuiAuthService, CuiBadgeComponent, CuiBadgeModule, CuiBannerComponent, CuiBannerModule, CuiBreadcrumbComponent, CuiBreadcrumbsComponent, CuiBreadcrumbsModule, CuiButtonComponent, CuiButtonGroupComponent, CuiButtonGroupModule, CuiButtonModule, CuiCardWrapperComponent, CuiCategoriesComponent, CuiCheckboxComponent, CuiCheckboxModule, CuiChecklistBlockComponent, CuiContentWrapperComponent, CuiContextMenuComponent, CuiContextMenuModule, 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, 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, cuiAuthInterceptor, cuiCreateDefaultValidators, cuiErrorHandlerInterceptor, cuiGetDuration, cuiIsObscured, cuiLoaderInterceptor, cuiOverrideOptions, cuiProvideEditor, cuiRemoveSpaces, cuiReplace, cuiToAnimationOptions, cuiTooltipOptionsProvider, cuiXNdjsonInterceptor, provideCuiAuth };
+export { AngularOutsideLoaderService, CUI_ALERTS, CUI_ALERT_CONTEXT, CUI_ALERT_DEFAULT_OPTIONS, CUI_ALERT_OPTIONS, CUI_ANIMATIONS_DEFAULT_DURATION, CUI_BANNER_DEFAULT_OPTIONS, CUI_BANNER_OPTIONS, CUI_BUTTON_DEFAULT_OPTIONS, CUI_BUTTON_OPTIONS, CUI_DEFAULT_THEME, CUI_DIALOGS, CUI_DIALOG_CONTEXT, CUI_DIALOG_DEFAULT_OPTIONS, CUI_DIALOG_OPTIONS, CUI_INPUT_TIME_DEFAULT_OPTIONS, CUI_INPUT_TIME_OPTIONS, CUI_NOTIFICATION_DEFAULT_OPTIONS, CUI_NOTIFICATION_ICONS, CUI_NOTIFICATION_ICON_OPTIONS, CUI_NOTIFICATION_ICON_OPTIONS_DEFAULT_MODE, CUI_NOTIFICATION_ICON_OPTIONS_LIGHT_MODE, CUI_NOTIFICATION_OPTIONS, CUI_ROOT_SELECTOR, CUI_TAB_ACTIVATE, CUI_TEXT_FIELD_CONTROLLER, CUI_TEXT_FIELD_ICON_LEFT, CUI_TEXT_FIELD_ID, CUI_TEXT_FIELD_IS_ERROR, CUI_TEXT_FIELD_PLACEHOLDER, CUI_TEXT_FIELD_SIZE, CUI_TEXT_FILED_CONTROLLER_PROVIDER, CUI_THEME, CUI_THEME_STORAGE_DEFAULT_KEY, CUI_THEME_STORAGE_KEY, CUI_TOOLTIP_COMPONENT, CUI_TOOLTIP_DEFAULT_OPTIONS, CUI_TOOLTIP_DIRECTIONS, CUI_TOOLTIP_OPTIONS, CUI_TOOLTIP_PROVIDERS, CuiAccordionComponent, CuiAccordionDirective, CuiAccordionItemComponent, CuiAccordionModule, CuiAlertComponent, CuiAlertModule, CuiAlertService, CuiAlertsComponent, CuiAttachesTool, CuiAuthBase, CuiAuthService, CuiBadgeComponent, CuiBadgeModule, CuiBannerComponent, CuiBannerModule, CuiBreadcrumbComponent, CuiBreadcrumbsComponent, CuiBreadcrumbsModule, CuiButtonComponent, CuiButtonGroupComponent, CuiButtonGroupModule, CuiButtonModule, CuiCardWrapperComponent, CuiCategoriesComponent, CuiCheckboxComponent, CuiCheckboxModule, CuiChecklistBlockComponent, CuiContentWrapperComponent, CuiContextMenuComponent, CuiContextMenuModule, CuiCriterionInfoComponent, CuiCriterionModalCreateComponent, CuiCriterionReadonlyInfoComponent, CuiDeleteModalComponent, CuiDialogActionsComponent, CuiDialogComponent, CuiDialogHeaderComponent, CuiDialogModule, CuiDialogService, CuiDialogsComponent, CuiDropdownDirective, CuiDropdownWrapperComponent, CuiEditorBlockComponent, CuiEditorComponent, CuiEditorModalComponent, CuiEditorReadonlyComponent, CuiEditorTranslations, CuiEmptyStateComponent, CuiFileUploaderStatus, CuiFormFieldComponent, CuiFormFieldModule, CuiGeneralControlErrorHintComponent, CuiGhostInputComponent, CuiHeaderTool, CuiHintComponent, CuiHintModule, CuiIconButtonComponent, CuiIconButtonModule, CuiImageTool, CuiInputModule, CuiInputNumberComponent, CuiInputNumberModule, CuiInputPasswordComponent, CuiInputPasswordModule, CuiInputTextComponent, CuiInputTimeComponent, CuiInputTimeModule, CuiInstructionInfoComponent, CuiInstructionModalCreateComponent, CuiInstructionReadonlyInfoComponent, CuiLabelComponent, CuiLabelModule, CuiLayoutComponent, CuiLetterBoxComponent, CuiLinkMarker, CuiListTool, CuiLoaderComponent, CuiLoaderService, CuiLoadingState, CuiNotificationComponent, CuiNotificationModule, CuiPositionService, CuiRadioComponent, CuiRadioModule, CuiReadonlyCriterionModalComponent, CuiReadonlyInstructionModalComponent, CuiRenderDynamicComponentsComponent, CuiRenderDynamicComponentsService, CuiRoleMarker, CuiRootComponent, CuiRootModule, CuiSelectComponent, CuiSelectModule, CuiSelectedCategoryService, CuiSidebarContainerComponent, CuiSidebarHeaderComponent, CuiSidebarNavigationComponent, CuiSidebarNavigationContainerComponent, CuiSidebarNavigationItemComponent, CuiSidebarService, CuiSvgComponent, CuiSvgModule, CuiTabComponent, CuiTabsComponent, CuiTabsModule, CuiTextFieldController, CuiTextFieldControllerModule, CuiTextFieldIconLeftDirective, CuiTextFieldIdDirective, CuiTextFieldIsErrorDirective, CuiTextFieldPlaceholderDirective, CuiTextFieldSizeDirective, CuiTextareaComponent, CuiTextareaModule, CuiThemeService, CuiToggleComponent, CuiToggleModule, CuiToolMarker, CuiTooltip, CuiTooltipComponent, CuiTooltipDescribe, CuiTooltipDirective, CuiTooltipDriver, CuiTooltipHost, CuiTooltipHover, CuiTooltipManual, CuiTooltipOptionsDirective, CuiTooltipOverflow, CuiTooltipPointer, CuiTooltipPosition, CuiTooltipService, CuiTooltipUnstyled, CuiTooltipUnstyledComponent, CuiTooltips, CuiUtilityModalComponent, CuiVideoTool, CuiVisualViewportService, UTILITY_MODAL_SERVICE_TOKEN, cuiAuthInterceptor, cuiCreateDefaultValidators, cuiErrorHandlerInterceptor, cuiGetDuration, cuiIsObscured, cuiLoaderInterceptor, cuiOverrideOptions, cuiProvideEditor, cuiRemoveSpaces, cuiReplace, cuiToAnimationOptions, cuiTooltipOptionsProvider, cuiXNdjsonInterceptor, provideCuiAuth };
 //# sourceMappingURL=cuby-ui-core.mjs.map