@cuby-ui/core 0.0.596 → 0.0.598

package/fesm2022/cuby-ui-core.mjs

@@ -6,7 +6,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { cuiIsIcon, CUI_ICONS } from '@cuby-ui/icons';
 import * as i1$1 from '@cuby-ui/cdk';
 import { cuiCreateToken, cuiCreateTokenFromFactory, CuiDestroyService, CuiFilterPipe, CuiLetDirective, CuiPopoverService, cuiProvide, CUI_ANIMATION_FRAME, cuiZonefree, EMPTY_CLIENT_RECT, cuiInjectElement, CUI_LOCAL_STORAGE, CUI_IS_WEBKIT, CUI_WINDOW, cuiGetElementObscures, CUI_IS_MOBILE, CuiHoveredService, cuiPure, CuiActiveZone, cuiPointToClientRect, cuiClamp, cuiPx, cuiIfMap, cuiIsPresent, cuiTypedFromEvent, cuiZonefreeScheduler, cuiZoneOptimized, cuiIsNativeFocused, cuiWithStyles, CHAR_NO_BREAK_SPACE, CuiItemDirective, CuiFocusTrapDirective, CuiClickOutsideDirective, CuiTargetDirective, cuiGetClosestFocusable, CuiTime, CuiElementDirective, CuiDimensionsObserverDirective, CuiIdService, CuiAutoResizingDirective, CuiDragPointerDirective, CuiDragDropDirective, CuiDragListDirective, CuiHandleScrollDirective, FilesUploader, takeCaptureFromVideo, CuiConsumptionUnitsService, UnitsAmount, CuiTypedTemplateDirective } from '@cuby-ui/cdk';
-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, EMPTY } 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, EMPTY, concatMap, toArray, debounceTime, pairwise } from 'rxjs';
 import { __decorate, __metadata } from 'tslib';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { trigger, transition, query, animateChild, style, animate, stagger } from '@angular/animations';
@@ -8487,59 +8487,115 @@ class CuiEditorComponent {
         this.editorService = inject(CuiEditorService);
         this.jTextService = inject(CUI_JTEXT_API_SERVICE);
         this.POOLING_DELAY = 100;
-        this.ELEMENT_SPACE_TO_BOTTOM = 150;
-        this.SCROLL_THROTTLE_TIME = 200;
+        this.RETRY_DELAY = 3000;
         this.emptyQueue = new Subject();
         this.initChain = Promise.resolve();
+        this.lazyLoadObserver = null;
+        this.lazyLoadSubscription = null;
         this.isSkipCombinedBlockOnChange = [];
         this.isFirst = true;
         this.isChanging = false;
         this.isSkip = false;
         this.isRequested = false;
         this.isDestroyed = false;
+        this.isPreloadFinished = false;
+        this.hasEndLeftZone = false;
         // Нужен для соотношения локального ID и основного ID после создания элемента
         this.blockIdsMap = new Map();
         this.combinedBlocks = new Map();
         this.index = 0;
         this.page = 0;
+        this.lazyLoadVersion = 0;
         this.addedBlocks = [];
         this.updatedBlocks = [];
         this.removedBlocksIds = [];
         this.changesQueue = [];
         this.abortController = new AbortController();
-        this.editorId = this.cuiIdService.generate();
         this.isReadonly = computed(() => this.config()?.readOnly);
         this.requestOptions = computed(() => this.config()?.requestOptions);
+        this.editorEndRef = viewChild.required('editorEnd');
+        this.isEditorReady = signal(false);
+        this.editorId = this.cuiIdService.generate();
         this.editorRef = viewChild.required('editor');
         this.editorApiId = input.required();
         this.config = input(DEFAULT_CONFIG);
         this.requestSize = input(40);
         this.editorEmpty = output();
+        this.editorReady = output();
         this.initEditorEffect();
     }
     ngOnDestroy() {
         this.isDestroyed = true;
         this.enqueueInit(() => this.teardownEditor());
     }
-    onScrollEvent(element) {
-        const overallHeight = element.scrollHeight - this.ELEMENT_SPACE_TO_BOTTOM;
-        const currentHeight = element.scrollTop + element.clientHeight;
-        if (currentHeight < overallHeight || this.isRequested) {
-            return;
-        }
+    loadPage() {
         this.isRequested = true;
+        const version = this.lazyLoadVersion;
         const size = this.requestSize();
         let blocksCount = 0;
-        this.getBlocks(this.page, size)
-            .pipe(tap((blocks) => (blocksCount = blocks.length)), finalize(() => {
-            this.isRequested = false;
-            if (blocksCount >= size) {
-                return;
-            }
-            this.scrollSubscription.unsubscribe();
-        }))
+        let isFailed = false;
+        this.lazyLoadSubscription = this.getBlocks(this.page, size)
+            .pipe(tap((blocks) => (blocksCount = blocks.length)), catchError(() => {
+            isFailed = true;
+            return EMPTY;
+        }), finalize(() => this.finishPageLoad(blocksCount, size, version, isFailed)))
             .subscribe();
+    }
+    finishPageLoad(blocksCount, size, version, isFailed) {
+        this.isRequested = false;
+        if (this.isDestroyed || version !== this.lazyLoadVersion) {
+            return;
+        }
+        if (isFailed) {
+            this.retryPageLoad(version);
+            return;
+        }
         this.page++;
+        this.scheduleNextPage(blocksCount, size, version);
+    }
+    retryPageLoad(version) {
+        this.isRequested = true;
+        timer(this.RETRY_DELAY)
+            .pipe(takeUntilDestroyed(this.destroy))
+            .subscribe(() => {
+            if (this.isDestroyed || version !== this.lazyLoadVersion) {
+                return;
+            }
+            this.loadPage();
+        });
+    }
+    scheduleNextPage(blocksCount, size, version) {
+        if (blocksCount < size) {
+            this.lazyLoadObserver?.disconnect();
+            this.finishPreload();
+            return;
+        }
+        timer(this.POOLING_DELAY)
+            .pipe(takeUntilDestroyed(this.destroy))
+            .subscribe(() => this.continueLazyLoad(version));
+    }
+    continueLazyLoad(version) {
+        if (this.isDestroyed || version !== this.lazyLoadVersion) {
+            return;
+        }
+        if (this.config()?.withoutPreload) {
+            this.finishPreload();
+        }
+        this.observeEditorEnd();
+    }
+    finishPreload() {
+        if (this.isPreloadFinished) {
+            return;
+        }
+        this.isPreloadFinished = true;
+        this.setStartBlock();
+    }
+    finishFirstRender(version) {
+        if (this.isDestroyed || version !== this.lazyLoadVersion || this.isEditorReady()) {
+            return;
+        }
+        this.isEditorReady.set(true);
+        this.editorReady.emit();
     }
     onEditorChange(_, event) {
         if (this.isReadonly() || this.isDestroyed) {
@@ -8577,6 +8633,30 @@ class CuiEditorComponent {
         }
         this.recalculateAllBlocksAfterRemoval(blockIds);
     }
+    onEditorEndMove(entry) {
+        if (this.isRequested) {
+            return;
+        }
+        if (!entry.isIntersecting) {
+            this.hasEndLeftZone = true;
+            this.finishPreload();
+            return;
+        }
+        if (this.config()?.withoutPreload && !this.hasEndLeftZone) {
+            return;
+        }
+        this.loadPage();
+    }
+    initEditorEffect() {
+        effect(() => {
+            if (this.editorApiId() || this.config()) {
+                this.initEditorChanges();
+            }
+        }, { allowSignalWrites: true });
+    }
+    initEditorChanges() {
+        this.enqueueInit(() => this.runEditorInit());
+    }
     recalculateAllBlocksAfterRemoval(blockIds) {
         const remainingRemovedBlockIds = new Set(blockIds);
         this.updatedBlocks = this.updatedBlocks.filter((updatedBlock) => !remainingRemovedBlockIds.has(updatedBlock.id ?? ''));
@@ -8589,25 +8669,19 @@ class CuiEditorComponent {
         });
         this.removedBlocksIds.push(...remainingRemovedBlockIds.values());
     }
-    initEditorEffect() {
-        effect(() => {
-            if (this.editorApiId() || this.config()) {
-                this.initEditorChanges();
-            }
-        }, { allowSignalWrites: true });
+    observeEditorEnd() {
+        const editorEndElement = this.editorEndRef().nativeElement;
+        this.lazyLoadObserver ??= this.createLazyLoadObserver();
+        this.lazyLoadObserver.unobserve(editorEndElement);
+        this.lazyLoadObserver.observe(editorEndElement);
     }
-    initEditorChanges() {
-        this.enqueueInit(() => this.runEditorInit());
+    createLazyLoadObserver() {
+        return new IntersectionObserver((entries) => this.onEditorEndMove(entries[entries.length - 1]), {
+            root: this.getViewportElement()
+        });
     }
-    initScrollObserver() {
-        const element = this.config()?.element ?? this.editorElement;
-        const scrollObserver = fromEvent(element, 'scroll');
-        this.scrollSubscription = scrollObserver
-            .pipe(takeUntilDestroyed(this.destroy), throttleTime(this.SCROLL_THROTTLE_TIME, undefined, {
-            leading: true,
-            trailing: true
-        }), map(() => this.onScrollEvent(element)))
-            .subscribe();
+    getViewportElement() {
+        return this.config()?.element ?? this.editorElement;
     }
     initEditorEvents(element) {
         const readOnly = this.isReadonly();
@@ -8616,20 +8690,6 @@ class CuiEditorComponent {
         }
         setEditorEvents(element, this.abortController.signal);
     }
-    startPooling(size) {
-        const scrollElement = this.config()?.element ?? this.editorElement;
-        const withoutPreload = this.config()?.withoutPreload;
-        this.poolingSubscription = timer(0, this.POOLING_DELAY)
-            .pipe(concatMap(() => this.getBlocks(this.page, size).pipe(delay(this.POOLING_DELAY))), tap(() => this.page++), takeWhile((blocks) => !withoutPreload &&
-            scrollElement.scrollHeight <= scrollElement.clientHeight &&
-            blocks.length >= size), finalize(() => {
-            if (this.isDestroyed) {
-                return;
-            }
-            this.setStartBlock();
-        }))
-            .subscribe();
-    }
     teardownEditor() {
         this.abortController.abort();
         this.resetData();
@@ -8659,8 +8719,7 @@ class CuiEditorComponent {
     wireEditor() {
         this.editorElement = this.editorRef().nativeElement;
         this.initEditorEvents(this.editorElement);
-        this.initScrollObserver();
-        this.startPooling(this.requestSize());
+        this.loadPage();
         this.setListenersOnCustomBlockChanges();
     }
     setListenersOnCustomBlockChanges() {
@@ -8764,6 +8823,9 @@ class CuiEditorComponent {
         if (typeof block.type !== 'string') {
             return;
         }
+        if (this.blockIdsMap.has(block.id)) {
+            return;
+        }
         this.blockIdsMap.set(block.id, block.id);
         this.insert(block);
     }
@@ -8786,13 +8848,20 @@ class CuiEditorComponent {
             this.editor.blocks.insert(block.type, block.data, {}, this.index, false, false, block.id);
             return;
         }
+        const version = this.lazyLoadVersion;
         // TODO: есть варик что что то пойдет не так
-        this.editor.blocks.render({ blocks: [block] }).then(() => (this.isSkip = false));
+        this.editor.blocks.render({ blocks: [block] }).then(() => {
+            this.isSkip = false;
+            this.finishFirstRender(version);
+        });
         this.isFirst = false;
     }
     setCombinedBlock(block) {
         const combinedBlockData = block.data;
         const parent = this.combinedBlocks.get(combinedBlockData.parentId);
+        if (parent && this.blockIdsMap.has(block.id)) {
+            return parent;
+        }
         this.blockIdsMap.set(block.id, block.id);
         if (parent) {
             const parentData = parent.data;
@@ -8834,14 +8903,21 @@ class CuiEditorComponent {
             this.editorEmpty.emit(this.checkIsEmpty());
             return;
         }
+        const version = this.lazyLoadVersion;
         if (this.isReadonly()) {
-            this.editor.render({ blocks: [] });
+            this.editor.render({ blocks: [] }).then(() => this.finishFirstRender(version));
             return;
         }
-        this.editorService.setStartBlock(this.editorApiId(), this.requestOptions(), async (block, id) => {
-            this.blockIdsMap.set(id, id);
-            this.isSkipCombinedBlockOnChange.push(true);
-            await this.editor.render({ blocks: [block] });
+        this.editorService.setStartBlock(this.editorApiId(), this.requestOptions(), (block, id) => this.renderStartBlock(block, id, version));
+    }
+    async renderStartBlock(block, id, version) {
+        if (this.isDestroyed || version !== this.lazyLoadVersion) {
+            return;
+        }
+        this.blockIdsMap.set(id, id);
+        this.isSkipCombinedBlockOnChange.push(true);
+        this.editor.render({ blocks: [block] }).then(() => {
+            this.finishFirstRender(version);
             this.setFocus();
             recalculateIndexes(this.editor.blocks);
         });
@@ -8862,31 +8938,40 @@ class CuiEditorComponent {
         return !redactorTextContent;
     }
     resetData() {
-        this.scrollSubscription?.unsubscribe();
-        this.poolingSubscription?.unsubscribe();
+        this.resetLazyLoad();
+        this.isEditorReady.set(false);
         this.isSkipCombinedBlockOnChange = [];
         this.isFirst = true;
         this.isChanging = false;
         this.isSkip = false;
-        this.isRequested = false;
         this.blockIdsMap = new Map();
         this.combinedBlocks = new Map();
         this.index = 0;
-        this.page = 0;
         this.addedBlocks = [];
         this.updatedBlocks = [];
         this.removedBlocksIds = [];
         this.changesQueue = [];
         this.abortController = new AbortController();
     }
+    resetLazyLoad() {
+        this.lazyLoadVersion++;
+        this.lazyLoadObserver?.disconnect();
+        this.lazyLoadObserver = null;
+        this.lazyLoadSubscription?.unsubscribe();
+        this.lazyLoadSubscription = null;
+        this.isRequested = false;
+        this.isPreloadFinished = false;
+        this.hasEndLeftZone = false;
+        this.page = 0;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: CuiEditorComponent, isStandalone: true, selector: "cui-editor", inputs: { editorApiId: { classPropertyName: "editorApiId", publicName: "editorApiId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, requestSize: { classPropertyName: "requestSize", publicName: "requestSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editorEmpty: "editorEmpty" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: CuiEditorComponent, isStandalone: true, selector: "cui-editor", inputs: { editorApiId: { classPropertyName: "editorApiId", publicName: "editorApiId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, requestSize: { classPropertyName: "requestSize", publicName: "requestSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editorEmpty: "editorEmpty", editorReady: "editorReady" }, providers: [
             CuiEditorService,
             {
                 provide: CUI_JTEXT_API_SERVICE,
                 useFactory: () => inject(CUI_JTEXT_API_SERVICE, { optional: true, skipSelf: true }) ?? new CuiJTextApiService()
             }
-        ], viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    #editor\n    [id]=\"editorId\"\n    data-editor\n    [class._readonly]=\"config().readOnly\"\n></div>\n", styles: [":host{--textColor: var(--cui-base-900);--menuBackground: var(--cui-base-0);--menuBorder: var(--cui-base-200);--menuItemHover: var(--cui-base-10);--menuItemBackground: var(cui-base-900);--menuIconBackground: var(--cui-base-50);--menuIconHover: var(--cui-base-10);font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font)}:host ::ng-deep .ce-popover{--color-background: var(--menuBackground);--color-text-primary: var(--textColor);--color-border: var(--menuBorder);--color-border-icon: var(--menuBorder);--color-background-item: var(--menuItemBackground);--color-background-item-hover: var(--menuItemHover)}:host ::ng-deep .ce-popover__search{background:var(--menuIconBackground)}:host ::ng-deep .ce-popover .ce-popover-item__icon{background:var(--menuIconBackground)}:host ::ng-deep .ce-conversion-toolbar{background-color:var(--menuBackground);border-color:var(--menuBorder)}:host ::ng-deep .ce-conversion-toolbar__tools{padding:0 6px 6px}:host ::ng-deep .ce-conversion-tool{padding:3px;border-radius:6px}:host ::ng-deep .ce-conversion-tool__icon{border:1px solid var(--menuBorder);background-color:var(--menuIconBackground);box-shadow:none}:host ::ng-deep .ce-conversion-tool:hover{background-color:var(--menuItemHover)}:host ::ng-deep .ce-conversion-tool:hover .ce-conversion-tool__icon{border-color:var(--menuIconHover)}:host ::ng-deep .combined-text-block{padding:.4em 0;line-height:1.6em;outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part{outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child,:host ::ng-deep .combined-text-block .combined-text-block-part._selected{display:list-item}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child::marker,:host ::ng-deep .combined-text-block .combined-text-block-part._selected::marker{content:\"\"}:host ::ng-deep .image-tool__image{border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}:host ::ng-deep .image-tool__image-preloader{background-color:var(--cui-base-200)}:host ::ng-deep .image-tool__image-preloader:after{border:1px solid var(--cui-base-200);border-top:1px solid var(--cui-blue-600)}:host ::ng-deep .cdx-button{border-radius:8px;border:1px solid var(--cui-base-200);color:var(--textColor);background-color:var(--cui-base-10);box-shadow:none}:host ::ng-deep .ce-inline-toolbar{border-color:var(--cui-base-100);color:var(--textColor);background-color:var(--cui-base-0)}:host ::ng-deep .ce-inline-toolbar__dropdown:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-inline-tool:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{color:var(--cui-base-500)}:host ::ng-deep .ce-toolbar__plus:hover,:host ::ng-deep .ce-toolbar__settings-btn:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__actions{right:100%}:host ::ng-deep .ce-toolbar__content{max-width:none}@media (max-width: 650px){:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{border-color:var(--menuBorder);background-color:var(--menuBackground)}:host ::ng-deep .ce-toolbar__actions{inset:0 auto auto 0}}:host ::ng-deep .ce-block--selected .ce-block__content{background-color:var(--cui-base-200)}:host ::ng-deep .ce-block__content{max-width:100%}:host ::ng-deep .ce-block:only-of-type .combined-text-block[data-placeholder-active][data-empty=true]:before{content:attr(data-placeholder-active);position:absolute;color:var(--cui-base-400)}:host ::ng-deep [data-editor]{padding-right:4px;width:100%;height:100%;min-height:200px;overflow:hidden auto;scrollbar-gutter:stable}:host ::ng-deep [data-editor] .codex-editor{margin-left:60px}:host ::ng-deep [data-editor] .codex-editor--narrow .ce-popover{right:auto}:host ::ng-deep [data-editor] .codex-editor__redactor{margin-right:auto;padding-bottom:260px!important}@media (max-width: 650px){:host ::ng-deep [data-editor] .codex-editor{margin-left:0}}:host ::ng-deep [data-editor]._readonly{min-height:auto}:host ::ng-deep [data-editor]._readonly .codex-editor{margin:auto}:host ::ng-deep [data-editor]._readonly .codex-editor__redactor{padding-bottom:0!important}:host ::ng-deep [data-editor]._readonly .combined-text-block{padding:0}:host ::ng-deep [data-editor] [data-item-name=move-up],:host ::ng-deep [data-editor] [data-item-name=move-down],:host ::ng-deep [data-editor] [data-tool=paragraph]{display:none}:host ::ng-deep [data-editor] *::selection{background:var(--cui-base-200)}:host ::ng-deep [data-editor] a{color:var(--cui-light-blue-600)}:host ::ng-deep .marker{cursor:pointer;text-decoration:underline;color:var(--cui-light-blue-600);background-color:transparent}:host ::ng-deep .tool-marker,:host ::ng-deep .role-marker{margin:0 5px}:host ::ng-deep .tool-marker{color:#e97c00}:host ::ng-deep .role-marker{color:#8803f1}.form{height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "editorEndRef", first: true, predicate: ["editorEnd"], descendants: true, isSignal: true }, { propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    #editor\n    data-editor\n    [class._readonly]=\"config().readOnly\"\n    [class._loading]=\"!isEditorReady()\"\n>\n    <div [id]=\"editorId\"></div>\n    <div\n        #editorEnd\n        class=\"editor-end\"\n    ></div>\n</div>\n", styles: [":host{--textColor: var(--cui-base-900);--menuBackground: var(--cui-base-0);--menuBorder: var(--cui-base-200);--menuItemHover: var(--cui-base-10);--menuItemBackground: var(cui-base-900);--menuIconBackground: var(--cui-base-50);--menuIconHover: var(--cui-base-10);font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font)}:host ::ng-deep .ce-popover{--color-background: var(--menuBackground);--color-text-primary: var(--textColor);--color-border: var(--menuBorder);--color-border-icon: var(--menuBorder);--color-background-item: var(--menuItemBackground);--color-background-item-hover: var(--menuItemHover)}:host ::ng-deep .ce-popover__search{background:var(--menuIconBackground)}:host ::ng-deep .ce-popover .ce-popover-item__icon{background:var(--menuIconBackground)}:host ::ng-deep .ce-conversion-toolbar{background-color:var(--menuBackground);border-color:var(--menuBorder)}:host ::ng-deep .ce-conversion-toolbar__tools{padding:0 6px 6px}:host ::ng-deep .ce-conversion-tool{padding:3px;border-radius:6px}:host ::ng-deep .ce-conversion-tool__icon{border:1px solid var(--menuBorder);background-color:var(--menuIconBackground);box-shadow:none}:host ::ng-deep .ce-conversion-tool:hover{background-color:var(--menuItemHover)}:host ::ng-deep .ce-conversion-tool:hover .ce-conversion-tool__icon{border-color:var(--menuIconHover)}:host ::ng-deep .combined-text-block{padding:.4em 0;line-height:1.6em;outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part{outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child,:host ::ng-deep .combined-text-block .combined-text-block-part._selected{display:list-item}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child::marker,:host ::ng-deep .combined-text-block .combined-text-block-part._selected::marker{content:\"\"}:host ::ng-deep .image-tool__image{border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}:host ::ng-deep .image-tool__image-preloader{background-color:var(--cui-base-200)}:host ::ng-deep .image-tool__image-preloader:after{border:1px solid var(--cui-base-200);border-top:1px solid var(--cui-blue-600)}:host ::ng-deep .cdx-button{border-radius:8px;border:1px solid var(--cui-base-200);color:var(--textColor);background-color:var(--cui-base-10);box-shadow:none}:host ::ng-deep .ce-inline-toolbar{border-color:var(--cui-base-100);color:var(--textColor);background-color:var(--cui-base-0)}:host ::ng-deep .ce-inline-toolbar__dropdown:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-inline-tool:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{color:var(--cui-base-500)}:host ::ng-deep .ce-toolbar__plus:hover,:host ::ng-deep .ce-toolbar__settings-btn:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__actions{right:100%}:host ::ng-deep .ce-toolbar__content{max-width:none}@media (max-width: 650px){:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{border-color:var(--menuBorder);background-color:var(--menuBackground)}:host ::ng-deep .ce-toolbar__actions{inset:0 auto auto 0}}:host ::ng-deep .ce-block--selected .ce-block__content{background-color:var(--cui-base-200)}:host ::ng-deep .ce-block__content{max-width:100%}:host ::ng-deep .ce-block:only-of-type .combined-text-block[data-placeholder-active][data-empty=true]:before{content:attr(data-placeholder-active);position:absolute;color:var(--cui-base-400)}:host ::ng-deep [data-editor]{padding-right:4px;width:100%;height:100%;min-height:200px;overflow:hidden auto;scrollbar-gutter:stable}:host ::ng-deep [data-editor] .codex-editor{margin-left:60px}:host ::ng-deep [data-editor] .codex-editor--narrow .ce-popover{right:auto}:host ::ng-deep [data-editor] .codex-editor__redactor{margin-right:auto;padding-bottom:260px!important}@media (max-width: 650px){:host ::ng-deep [data-editor] .codex-editor{margin-left:0}}:host ::ng-deep [data-editor]._readonly{min-height:auto}:host ::ng-deep [data-editor]._readonly .codex-editor{margin:auto}:host ::ng-deep [data-editor]._readonly .codex-editor__redactor{padding-bottom:0!important}:host ::ng-deep [data-editor]._readonly .combined-text-block{padding:0}:host ::ng-deep [data-editor]._loading{pointer-events:none;-webkit-user-select:none;user-select:none}:host ::ng-deep [data-editor]._loading .combined-text-block[data-placeholder-active][data-empty=true]:before{content:none}:host ::ng-deep [data-editor] [data-item-name=move-up],:host ::ng-deep [data-editor] [data-item-name=move-down],:host ::ng-deep [data-editor] [data-tool=paragraph]{display:none}:host ::ng-deep [data-editor] *::selection{background:var(--cui-base-200)}:host ::ng-deep [data-editor] a{color:var(--cui-light-blue-600)}:host ::ng-deep .marker{cursor:pointer;text-decoration:underline;color:var(--cui-light-blue-600);background-color:transparent}:host ::ng-deep .tool-marker,:host ::ng-deep .role-marker{margin:0 5px}:host ::ng-deep .tool-marker{color:var(--cui-warning)}:host ::ng-deep .role-marker{color:var(--cui-info)}.editor-end{margin-top:-150px;height:150px;pointer-events:none}.form{height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiEditorComponent, decorators: [{
             type: Component,
@@ -8896,7 +8981,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             provide: CUI_JTEXT_API_SERVICE,
                             useFactory: () => inject(CUI_JTEXT_API_SERVICE, { optional: true, skipSelf: true }) ?? new CuiJTextApiService()
                         }
-                    ], template: "<div\n    #editor\n    [id]=\"editorId\"\n    data-editor\n    [class._readonly]=\"config().readOnly\"\n></div>\n", styles: [":host{--textColor: var(--cui-base-900);--menuBackground: var(--cui-base-0);--menuBorder: var(--cui-base-200);--menuItemHover: var(--cui-base-10);--menuItemBackground: var(cui-base-900);--menuIconBackground: var(--cui-base-50);--menuIconHover: var(--cui-base-10);font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font)}:host ::ng-deep .ce-popover{--color-background: var(--menuBackground);--color-text-primary: var(--textColor);--color-border: var(--menuBorder);--color-border-icon: var(--menuBorder);--color-background-item: var(--menuItemBackground);--color-background-item-hover: var(--menuItemHover)}:host ::ng-deep .ce-popover__search{background:var(--menuIconBackground)}:host ::ng-deep .ce-popover .ce-popover-item__icon{background:var(--menuIconBackground)}:host ::ng-deep .ce-conversion-toolbar{background-color:var(--menuBackground);border-color:var(--menuBorder)}:host ::ng-deep .ce-conversion-toolbar__tools{padding:0 6px 6px}:host ::ng-deep .ce-conversion-tool{padding:3px;border-radius:6px}:host ::ng-deep .ce-conversion-tool__icon{border:1px solid var(--menuBorder);background-color:var(--menuIconBackground);box-shadow:none}:host ::ng-deep .ce-conversion-tool:hover{background-color:var(--menuItemHover)}:host ::ng-deep .ce-conversion-tool:hover .ce-conversion-tool__icon{border-color:var(--menuIconHover)}:host ::ng-deep .combined-text-block{padding:.4em 0;line-height:1.6em;outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part{outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child,:host ::ng-deep .combined-text-block .combined-text-block-part._selected{display:list-item}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child::marker,:host ::ng-deep .combined-text-block .combined-text-block-part._selected::marker{content:\"\"}:host ::ng-deep .image-tool__image{border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}:host ::ng-deep .image-tool__image-preloader{background-color:var(--cui-base-200)}:host ::ng-deep .image-tool__image-preloader:after{border:1px solid var(--cui-base-200);border-top:1px solid var(--cui-blue-600)}:host ::ng-deep .cdx-button{border-radius:8px;border:1px solid var(--cui-base-200);color:var(--textColor);background-color:var(--cui-base-10);box-shadow:none}:host ::ng-deep .ce-inline-toolbar{border-color:var(--cui-base-100);color:var(--textColor);background-color:var(--cui-base-0)}:host ::ng-deep .ce-inline-toolbar__dropdown:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-inline-tool:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{color:var(--cui-base-500)}:host ::ng-deep .ce-toolbar__plus:hover,:host ::ng-deep .ce-toolbar__settings-btn:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__actions{right:100%}:host ::ng-deep .ce-toolbar__content{max-width:none}@media (max-width: 650px){:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{border-color:var(--menuBorder);background-color:var(--menuBackground)}:host ::ng-deep .ce-toolbar__actions{inset:0 auto auto 0}}:host ::ng-deep .ce-block--selected .ce-block__content{background-color:var(--cui-base-200)}:host ::ng-deep .ce-block__content{max-width:100%}:host ::ng-deep .ce-block:only-of-type .combined-text-block[data-placeholder-active][data-empty=true]:before{content:attr(data-placeholder-active);position:absolute;color:var(--cui-base-400)}:host ::ng-deep [data-editor]{padding-right:4px;width:100%;height:100%;min-height:200px;overflow:hidden auto;scrollbar-gutter:stable}:host ::ng-deep [data-editor] .codex-editor{margin-left:60px}:host ::ng-deep [data-editor] .codex-editor--narrow .ce-popover{right:auto}:host ::ng-deep [data-editor] .codex-editor__redactor{margin-right:auto;padding-bottom:260px!important}@media (max-width: 650px){:host ::ng-deep [data-editor] .codex-editor{margin-left:0}}:host ::ng-deep [data-editor]._readonly{min-height:auto}:host ::ng-deep [data-editor]._readonly .codex-editor{margin:auto}:host ::ng-deep [data-editor]._readonly .codex-editor__redactor{padding-bottom:0!important}:host ::ng-deep [data-editor]._readonly .combined-text-block{padding:0}:host ::ng-deep [data-editor] [data-item-name=move-up],:host ::ng-deep [data-editor] [data-item-name=move-down],:host ::ng-deep [data-editor] [data-tool=paragraph]{display:none}:host ::ng-deep [data-editor] *::selection{background:var(--cui-base-200)}:host ::ng-deep [data-editor] a{color:var(--cui-light-blue-600)}:host ::ng-deep .marker{cursor:pointer;text-decoration:underline;color:var(--cui-light-blue-600);background-color:transparent}:host ::ng-deep .tool-marker,:host ::ng-deep .role-marker{margin:0 5px}:host ::ng-deep .tool-marker{color:#e97c00}:host ::ng-deep .role-marker{color:#8803f1}.form{height:100%}\n"] }]
+                    ], template: "<div\n    #editor\n    data-editor\n    [class._readonly]=\"config().readOnly\"\n    [class._loading]=\"!isEditorReady()\"\n>\n    <div [id]=\"editorId\"></div>\n    <div\n        #editorEnd\n        class=\"editor-end\"\n    ></div>\n</div>\n", styles: [":host{--textColor: var(--cui-base-900);--menuBackground: var(--cui-base-0);--menuBorder: var(--cui-base-200);--menuItemHover: var(--cui-base-10);--menuItemBackground: var(cui-base-900);--menuIconBackground: var(--cui-base-50);--menuIconHover: var(--cui-base-10);font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font)}:host ::ng-deep .ce-popover{--color-background: var(--menuBackground);--color-text-primary: var(--textColor);--color-border: var(--menuBorder);--color-border-icon: var(--menuBorder);--color-background-item: var(--menuItemBackground);--color-background-item-hover: var(--menuItemHover)}:host ::ng-deep .ce-popover__search{background:var(--menuIconBackground)}:host ::ng-deep .ce-popover .ce-popover-item__icon{background:var(--menuIconBackground)}:host ::ng-deep .ce-conversion-toolbar{background-color:var(--menuBackground);border-color:var(--menuBorder)}:host ::ng-deep .ce-conversion-toolbar__tools{padding:0 6px 6px}:host ::ng-deep .ce-conversion-tool{padding:3px;border-radius:6px}:host ::ng-deep .ce-conversion-tool__icon{border:1px solid var(--menuBorder);background-color:var(--menuIconBackground);box-shadow:none}:host ::ng-deep .ce-conversion-tool:hover{background-color:var(--menuItemHover)}:host ::ng-deep .ce-conversion-tool:hover .ce-conversion-tool__icon{border-color:var(--menuIconHover)}:host ::ng-deep .combined-text-block{padding:.4em 0;line-height:1.6em;outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part{outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child,:host ::ng-deep .combined-text-block .combined-text-block-part._selected{display:list-item}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child::marker,:host ::ng-deep .combined-text-block .combined-text-block-part._selected::marker{content:\"\"}:host ::ng-deep .image-tool__image{border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}:host ::ng-deep .image-tool__image-preloader{background-color:var(--cui-base-200)}:host ::ng-deep .image-tool__image-preloader:after{border:1px solid var(--cui-base-200);border-top:1px solid var(--cui-blue-600)}:host ::ng-deep .cdx-button{border-radius:8px;border:1px solid var(--cui-base-200);color:var(--textColor);background-color:var(--cui-base-10);box-shadow:none}:host ::ng-deep .ce-inline-toolbar{border-color:var(--cui-base-100);color:var(--textColor);background-color:var(--cui-base-0)}:host ::ng-deep .ce-inline-toolbar__dropdown:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-inline-tool:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{color:var(--cui-base-500)}:host ::ng-deep .ce-toolbar__plus:hover,:host ::ng-deep .ce-toolbar__settings-btn:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__actions{right:100%}:host ::ng-deep .ce-toolbar__content{max-width:none}@media (max-width: 650px){:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{border-color:var(--menuBorder);background-color:var(--menuBackground)}:host ::ng-deep .ce-toolbar__actions{inset:0 auto auto 0}}:host ::ng-deep .ce-block--selected .ce-block__content{background-color:var(--cui-base-200)}:host ::ng-deep .ce-block__content{max-width:100%}:host ::ng-deep .ce-block:only-of-type .combined-text-block[data-placeholder-active][data-empty=true]:before{content:attr(data-placeholder-active);position:absolute;color:var(--cui-base-400)}:host ::ng-deep [data-editor]{padding-right:4px;width:100%;height:100%;min-height:200px;overflow:hidden auto;scrollbar-gutter:stable}:host ::ng-deep [data-editor] .codex-editor{margin-left:60px}:host ::ng-deep [data-editor] .codex-editor--narrow .ce-popover{right:auto}:host ::ng-deep [data-editor] .codex-editor__redactor{margin-right:auto;padding-bottom:260px!important}@media (max-width: 650px){:host ::ng-deep [data-editor] .codex-editor{margin-left:0}}:host ::ng-deep [data-editor]._readonly{min-height:auto}:host ::ng-deep [data-editor]._readonly .codex-editor{margin:auto}:host ::ng-deep [data-editor]._readonly .codex-editor__redactor{padding-bottom:0!important}:host ::ng-deep [data-editor]._readonly .combined-text-block{padding:0}:host ::ng-deep [data-editor]._loading{pointer-events:none;-webkit-user-select:none;user-select:none}:host ::ng-deep [data-editor]._loading .combined-text-block[data-placeholder-active][data-empty=true]:before{content:none}:host ::ng-deep [data-editor] [data-item-name=move-up],:host ::ng-deep [data-editor] [data-item-name=move-down],:host ::ng-deep [data-editor] [data-tool=paragraph]{display:none}:host ::ng-deep [data-editor] *::selection{background:var(--cui-base-200)}:host ::ng-deep [data-editor] a{color:var(--cui-light-blue-600)}:host ::ng-deep .marker{cursor:pointer;text-decoration:underline;color:var(--cui-light-blue-600);background-color:transparent}:host ::ng-deep .tool-marker,:host ::ng-deep .role-marker{margin:0 5px}:host ::ng-deep .tool-marker{color:var(--cui-warning)}:host ::ng-deep .role-marker{color:var(--cui-info)}.editor-end{margin-top:-150px;height:150px;pointer-events:none}.form{height:100%}\n"] }]
         }], ctorParameters: () => [] });
 
 class EditorResizeObserverDirective {
@@ -8971,7 +9056,7 @@ class CuiEditorReadonlyComponent {
         }, { allowSignalWrites: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiEditorReadonlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: CuiEditorReadonlyComponent, isStandalone: true, selector: "cui-editor-readonly", inputs: { editorId: { classPropertyName: "editorId", publicName: "editorId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, buttonTemplate: { classPropertyName: "buttonTemplate", publicName: "buttonTemplate", isSignal: true, isRequired: true, transformFunction: null }, shortHeight: { classPropertyName: "shortHeight", publicName: "shortHeight", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, isSignal: true }], ngImport: i0, template: "<cui-editor\r\n    cuiElement\r\n    #editorElement=\"elementRef\"\r\n    #editorComponent\r\n    class=\"editor\"\r\n    [class.editor_opened]=\"isShowMore()\"\r\n    [editorApiId]=\"editorId()\"\r\n    [config]=\"editorConfig()\"\r\n/>\r\n\r\n<ng-template\r\n    [editorResizeObserver]\r\n    [target]=\"editorElement.nativeElement\"\r\n    [shortHeight]=\"shortHeight()\"\r\n>\r\n    <button\r\n        class=\"c-button\"\r\n        (click)=\"onShow(editorComponent)\"\r\n    >\r\n        <ng-container\r\n            [ngTemplateOutlet]=\"buttonTemplate()\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: isShowMore }\"\r\n        ></ng-container>\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{--height: 69px;--fullHeight: 500px;display:flex;flex-direction:column;gap:8px}:host .editor{display:block;max-height:var(--height);overflow:hidden}:host .editor ::ng-deep [data-editor]{overflow:hidden}:host .editor_opened{max-height:var(--fullHeight)}:host .editor_opened ::ng-deep [data-editor]{max-height:var(--fullHeight);overflow:hidden auto}.c-button{padding:0}\n"], dependencies: [{ kind: "component", type: CuiEditorComponent, selector: "cui-editor", inputs: ["editorApiId", "config", "requestSize"], outputs: ["editorEmpty"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EditorResizeObserverDirective, selector: "[editorResizeObserver]", inputs: ["target", "shortHeight"] }, { kind: "directive", type: CuiElementDirective, selector: "[cuiElement]", exportAs: ["elementRef"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: CuiEditorReadonlyComponent, isStandalone: true, selector: "cui-editor-readonly", inputs: { editorId: { classPropertyName: "editorId", publicName: "editorId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, buttonTemplate: { classPropertyName: "buttonTemplate", publicName: "buttonTemplate", isSignal: true, isRequired: true, transformFunction: null }, shortHeight: { classPropertyName: "shortHeight", publicName: "shortHeight", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, isSignal: true }], ngImport: i0, template: "<cui-editor\r\n    cuiElement\r\n    #editorElement=\"elementRef\"\r\n    #editorComponent\r\n    class=\"editor\"\r\n    [class.editor_opened]=\"isShowMore()\"\r\n    [editorApiId]=\"editorId()\"\r\n    [config]=\"editorConfig()\"\r\n/>\r\n\r\n<ng-template\r\n    [editorResizeObserver]\r\n    [target]=\"editorElement.nativeElement\"\r\n    [shortHeight]=\"shortHeight()\"\r\n>\r\n    <button\r\n        class=\"c-button\"\r\n        (click)=\"onShow(editorComponent)\"\r\n    >\r\n        <ng-container\r\n            [ngTemplateOutlet]=\"buttonTemplate()\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: isShowMore }\"\r\n        ></ng-container>\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{--height: 69px;--fullHeight: 500px;display:flex;flex-direction:column;gap:8px}:host .editor{display:block;max-height:var(--height);overflow:hidden}:host .editor ::ng-deep [data-editor]{overflow:hidden}:host .editor_opened{max-height:var(--fullHeight)}:host .editor_opened ::ng-deep [data-editor]{max-height:var(--fullHeight);overflow:hidden auto}.c-button{padding:0}\n"], dependencies: [{ kind: "component", type: CuiEditorComponent, selector: "cui-editor", inputs: ["editorApiId", "config", "requestSize"], outputs: ["editorEmpty", "editorReady"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EditorResizeObserverDirective, selector: "[editorResizeObserver]", inputs: ["target", "shortHeight"] }, { kind: "directive", type: CuiElementDirective, selector: "[cuiElement]", exportAs: ["elementRef"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiEditorReadonlyComponent, decorators: [{
             type: Component,
@@ -9006,7 +9091,7 @@ class CuiEditorModalComponent {
         this.modalClosed.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiEditorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiEditorModalComponent, isStandalone: true, selector: "cui-editor-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, buttonTemplate: { classPropertyName: "buttonTemplate", publicName: "buttonTemplate", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, editorId: { classPropertyName: "editorId", publicName: "editorId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editorCreated: "editorCreated", modalClosed: "modalClosed" }, ngImport: i0, template: "@if (buttonTemplate(); as template) {\n    <button\n        type=\"button\"\n        class=\"button\"\n        (click)=\"onModalOpen()\"\n    >\n        <ng-container [ngTemplateOutlet]=\"template\" />\n    </button>\n} @else {\n    <button\n        class=\"description\"\n        cuiButton\n        type=\"button\"\n        appearance=\"outlined-gray\"\n        icon=\"cuiIconRichText\"\n        size=\"sm\"\n        (click)=\"onModalOpen()\"\n        [disabled]=\"isButtonDisabled()\"\n    >\n        @if (editorId()) {\n            <span class=\"description__text _created\">{{ 'Description' }}</span>\n            <cui-svg\n                class=\"description__icon\"\n                icon=\"cuiIconEdit\"\n                color=\"var(--cui-base-500)\"\n            />\n        } @else {\n            <cui-svg\n                class=\"description__icon\"\n                icon=\"cuiIconPlus\"\n                color=\"var(--cui-light-blue-600)\"\n            />\n            <span class=\"description__text\">{{ 'Add description' }}</span>\n        }\n    </button>\n}\n@if (isOpen()) {\n    <div class=\"wrapper\">\n        @if (editorId(); as id) {\n            <header class=\"header\">\n                <div class=\"info\">\n                    <button\n                        cuiButton\n                        type=\"button\"\n                        icon=\"cuiIconChevronLeft\"\n                        size=\"xxs\"\n                        appearance=\"secondary\"\n                        shape=\"rounded\"\n                        (click)=\"close()\"\n                    ></button>\n                    <h1 class=\"title\">{{ title() }}</h1>\n                </div>\n                <div class=\"actions\">\n                    <!-- <cui-loader /> -->\n                    <button\n                        type=\"button\"\n                        cuiButton\n                        size=\"xs\"\n                        (click)=\"close()\"\n                    >\n                        {{ 'Done' }}\n                    </button>\n                </div>\n            </header>\n\n            <section class=\"section\">\n                <cui-editor\n                    #editorComponent\n                    class=\"editor\"\n                    [editorApiId]=\"id\"\n                    [config]=\"config()\"\n                />\n            </section>\n        }\n    </div>\n}\n", styles: [":host ::ng-deep .delete{width:max-content}:host ::ng-deep .delete .c-content{display:flex;align-items:center;gap:4px;color:var(--cui-danger)}:host ::ng-deep .description .c-content{display:flex;align-items:center;gap:4px}.button{padding:0}.description{width:max-content}.description__text{color:var(--cui-light-blue-600)}.description__text._created{color:var(--cui-base-900)}.description__icon{padding:4px}.wrapper{position:fixed;z-index:10;inset:0;background-color:var(--cui-base-0)}.header{display:flex;flex-direction:row;gap:0;align-items:stretch;justify-content:space-between;padding:8px 16px;border-bottom:.5px solid var(--cui-base-200);background:var(--cui-base-0)}.info,.actions{display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:flex-start}.section{padding-right:24px;padding-left:24px;padding-top:24px;height:calc(100% - 50px);overflow:hidden}.title{font-weight:500;font-size:14px;line-height:20px;margin:0}.editor{padding-right:32px;padding-left:32px;padding-top:32px;display:block;margin:0 auto;max-width:750px;height:100%}\n"], dependencies: [{ kind: "component", type: CuiEditorComponent, selector: "cui-editor", inputs: ["editorApiId", "config", "requestSize"], outputs: ["editorEmpty"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "theme", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiEditorModalComponent, isStandalone: true, selector: "cui-editor-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, buttonTemplate: { classPropertyName: "buttonTemplate", publicName: "buttonTemplate", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, editorId: { classPropertyName: "editorId", publicName: "editorId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editorCreated: "editorCreated", modalClosed: "modalClosed" }, ngImport: i0, template: "@if (buttonTemplate(); as template) {\n    <button\n        type=\"button\"\n        class=\"button\"\n        (click)=\"onModalOpen()\"\n    >\n        <ng-container [ngTemplateOutlet]=\"template\" />\n    </button>\n} @else {\n    <button\n        class=\"description\"\n        cuiButton\n        type=\"button\"\n        appearance=\"outlined-gray\"\n        icon=\"cuiIconRichText\"\n        size=\"sm\"\n        (click)=\"onModalOpen()\"\n        [disabled]=\"isButtonDisabled()\"\n    >\n        @if (editorId()) {\n            <span class=\"description__text _created\">{{ 'Description' }}</span>\n            <cui-svg\n                class=\"description__icon\"\n                icon=\"cuiIconEdit\"\n                color=\"var(--cui-base-500)\"\n            />\n        } @else {\n            <cui-svg\n                class=\"description__icon\"\n                icon=\"cuiIconPlus\"\n                color=\"var(--cui-light-blue-600)\"\n            />\n            <span class=\"description__text\">{{ 'Add description' }}</span>\n        }\n    </button>\n}\n@if (isOpen()) {\n    <div class=\"wrapper\">\n        @if (editorId(); as id) {\n            <header class=\"header\">\n                <div class=\"info\">\n                    <button\n                        cuiButton\n                        type=\"button\"\n                        icon=\"cuiIconChevronLeft\"\n                        size=\"xxs\"\n                        appearance=\"secondary\"\n                        shape=\"rounded\"\n                        (click)=\"close()\"\n                    ></button>\n                    <h1 class=\"title\">{{ title() }}</h1>\n                </div>\n                <div class=\"actions\">\n                    <!-- <cui-loader /> -->\n                    <button\n                        type=\"button\"\n                        cuiButton\n                        size=\"xs\"\n                        (click)=\"close()\"\n                    >\n                        {{ 'Done' }}\n                    </button>\n                </div>\n            </header>\n\n            <section class=\"section\">\n                <cui-editor\n                    #editorComponent\n                    class=\"editor\"\n                    [editorApiId]=\"id\"\n                    [config]=\"config()\"\n                />\n            </section>\n        }\n    </div>\n}\n", styles: [":host ::ng-deep .delete{width:max-content}:host ::ng-deep .delete .c-content{display:flex;align-items:center;gap:4px;color:var(--cui-danger)}:host ::ng-deep .description .c-content{display:flex;align-items:center;gap:4px}.button{padding:0}.description{width:max-content}.description__text{color:var(--cui-light-blue-600)}.description__text._created{color:var(--cui-base-900)}.description__icon{padding:4px}.wrapper{position:fixed;z-index:10;inset:0;background-color:var(--cui-base-0)}.header{display:flex;flex-direction:row;gap:0;align-items:stretch;justify-content:space-between;padding:8px 16px;border-bottom:.5px solid var(--cui-base-200);background:var(--cui-base-0)}.info,.actions{display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:flex-start}.section{padding-right:24px;padding-left:24px;padding-top:24px;height:calc(100% - 50px);overflow:hidden}.title{font-weight:500;font-size:14px;line-height:20px;margin:0}.editor{padding-right:32px;padding-left:32px;padding-top:32px;display:block;margin:0 auto;max-width:750px;height:100%}\n"], dependencies: [{ kind: "component", type: CuiEditorComponent, selector: "cui-editor", inputs: ["editorApiId", "config", "requestSize"], outputs: ["editorEmpty", "editorReady"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "theme", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiEditorModalComponent, decorators: [{
             type: Component,
@@ -9051,7 +9136,7 @@ class CuiEditorBlockComponent {
         }, { allowSignalWrites: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiEditorBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiEditorBlockComponent, isStandalone: true, selector: "cui-editor-block", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, editorId: { classPropertyName: "editorId", publicName: "editorId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editorEmpty: "editorEmpty" }, viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <div class=\"wrapper\">\n        <span class=\"title\">\n            {{ t('DESCRIPTION') }}\n            @if (required()) {\n                <span class=\"title__required\">*</span>\n            }\n        </span>\n        <ng-template #button>\n            <button\n                [cuiTooltip]=\"t('EXPAND_EDITOR_TO_FULLSCREEN')\"\n                cuiButton\n                size=\"xxs\"\n                type=\"button\"\n                appearance=\"ghost\"\n                icon=\"cuiIconMaximizeSm\"\n                (click)=\"onToggleDescriptionModal()\"\n            ></button>\n        </ng-template>\n        <cui-editor-modal\n            [title]=\"title()\"\n            [editorId]=\"editorId()\"\n            [buttonTemplate]=\"button\"\n            [config]=\"config()\"\n            (modalClosed)=\"onToggleDescriptionModal()\"\n        />\n    </div>\n    <div\n        #editorContainer\n        cuiContentWrapper\n        class=\"editor\"\n        [class.editor_invalid]=\"required() && isDescriptionEmpty()\"\n    >\n        @if (!isDescriptionModalOpen() && editorConfig()) {\n            <cui-editor\n                #editorComponent\n                [editorApiId]=\"editorId()\"\n                [config]=\"editorConfig()!\"\n                (editorEmpty)=\"onDescriptionChange($event)\"\n            />\n        }\n    </div>\n    @if (required() && isDescriptionEmpty()) {\n        <cui-hint hintType=\"error\">{{ t('DESCRIPTION_IS_REQUIRED') }}</cui-hint>\n    }\n</ng-container>\n", styles: [":host{--max-editor-height: 650px;padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--cui-base-10);border-radius:8px}:host .editor{max-height:var(--max-editor-height)}.wrapper{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:space-between}.editor{padding-top:16px;padding-bottom:16px;display:block;overflow:auto}.editor_invalid{border:1px solid var(--cui-danger)}.title{font-weight:500;font-size:14px;line-height:20px}.title__required{color:var(--cui-danger)}\n"], dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "theme", "size"] }, { kind: "component", type: CuiEditorModalComponent, selector: "cui-editor-modal", inputs: ["title", "buttonTemplate", "config", "editorId"], outputs: ["editorCreated", "modalClosed"] }, { kind: "component", type: CuiEditorComponent, selector: "cui-editor", inputs: ["editorApiId", "config", "requestSize"], outputs: ["editorEmpty"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiContentWrapperComponent, selector: "cui-content-wrapper, [cuiContentWrapper]", inputs: ["backgroundColor", "gap"] }, { kind: "directive", type: CuiTooltipDirective, selector: "[cuiTooltip]:not(ng-container):not(ng-template)", inputs: ["cuiTooltipContext", "cuiTooltipAppearance", "cuiTooltip"] }, { kind: "ngmodule", type: CuiHintModule }, { kind: "component", type: CuiHintComponent, selector: "cui-hint", inputs: ["hintType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiEditorBlockComponent, isStandalone: true, selector: "cui-editor-block", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, editorId: { classPropertyName: "editorId", publicName: "editorId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editorEmpty: "editorEmpty" }, viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <div class=\"wrapper\">\n        <span class=\"title\">\n            {{ t('DESCRIPTION') }}\n            @if (required()) {\n                <span class=\"title__required\">*</span>\n            }\n        </span>\n        <ng-template #button>\n            <button\n                [cuiTooltip]=\"t('EXPAND_EDITOR_TO_FULLSCREEN')\"\n                cuiButton\n                size=\"xxs\"\n                type=\"button\"\n                appearance=\"ghost\"\n                icon=\"cuiIconMaximizeSm\"\n                (click)=\"onToggleDescriptionModal()\"\n            ></button>\n        </ng-template>\n        <cui-editor-modal\n            [title]=\"title()\"\n            [editorId]=\"editorId()\"\n            [buttonTemplate]=\"button\"\n            [config]=\"config()\"\n            (modalClosed)=\"onToggleDescriptionModal()\"\n        />\n    </div>\n    <div\n        #editorContainer\n        cuiContentWrapper\n        class=\"editor\"\n        [class.editor_invalid]=\"required() && isDescriptionEmpty()\"\n    >\n        @if (!isDescriptionModalOpen() && editorConfig()) {\n            <cui-editor\n                #editorComponent\n                [editorApiId]=\"editorId()\"\n                [config]=\"editorConfig()!\"\n                (editorEmpty)=\"onDescriptionChange($event)\"\n            />\n        }\n    </div>\n    @if (required() && isDescriptionEmpty()) {\n        <cui-hint hintType=\"error\">{{ t('DESCRIPTION_IS_REQUIRED') }}</cui-hint>\n    }\n</ng-container>\n", styles: [":host{--max-editor-height: 650px;padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--cui-base-10);border-radius:8px}:host .editor{max-height:var(--max-editor-height)}.wrapper{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:space-between}.editor{padding-top:16px;padding-bottom:16px;display:block;overflow:auto}.editor_invalid{border:1px solid var(--cui-danger)}.title{font-weight:500;font-size:14px;line-height:20px}.title__required{color:var(--cui-danger)}\n"], dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "theme", "size"] }, { kind: "component", type: CuiEditorModalComponent, selector: "cui-editor-modal", inputs: ["title", "buttonTemplate", "config", "editorId"], outputs: ["editorCreated", "modalClosed"] }, { kind: "component", type: CuiEditorComponent, selector: "cui-editor", inputs: ["editorApiId", "config", "requestSize"], outputs: ["editorEmpty", "editorReady"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiContentWrapperComponent, selector: "cui-content-wrapper, [cuiContentWrapper]", inputs: ["backgroundColor", "gap"] }, { kind: "directive", type: CuiTooltipDirective, selector: "[cuiTooltip]:not(ng-container):not(ng-template)", inputs: ["cuiTooltipContext", "cuiTooltipAppearance", "cuiTooltip"] }, { kind: "ngmodule", type: CuiHintModule }, { kind: "component", type: CuiHintComponent, selector: "cui-hint", inputs: ["hintType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiEditorBlockComponent, decorators: [{
             type: Component,
@@ -11083,7 +11168,7 @@ class CuiFramerPreviewComponent {
         this.thumbnailUrl.set({ src: resource.fileId && url, name: resource.name || resource.type });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiFramerPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiFramerPreviewComponent, isStandalone: true, selector: "cui-framer-preview", inputs: { framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, editorResourceUrl: { classPropertyName: "editorResourceUrl", publicName: "editorResourceUrl", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    @if (jText()) {\n        @if (!isDescriptionEmpty()) {\n            @let url = thumbnailUrl();\n\n            @if (url?.src; as src) {\n                @if (isVideo) {\n                    <video\n                        class=\"thumbnail\"\n                        [src]=\"src\"\n                        controls\n                    ></video>\n                } @else {\n                    <img\n                        class=\"thumbnail\"\n                        [src]=\"src\"\n                        [alt]=\"url?.name\"\n                    />\n                }\n            }\n\n            <div class=\"content\">\n                @if (title(); as title) {\n                    <div class=\"title\">{{ title }}</div>\n                }\n\n                @if (jText()?.id; as id) {\n                    <div class=\"wrapper\">\n                        <cui-editor\n                            class=\"editor\"\n                            [editorApiId]=\"id\"\n                            [config]=\"editorConfig\"\n                        />\n                    </div>\n                }\n            </div>\n        } @else {\n            <cui-empty-state [subtitle]=\"t('NO_DESCRIPTION_WAS_PROVIDED')\" />\n        }\n    }\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;gap:0;height:100%;overflow:auto}.thumbnail{width:100%;max-height:271px;object-fit:contain}.content{display:flex;flex-direction:column;gap:14px;padding:16px 12px}.title{font-weight:500;font-size:18px;line-height:28px}.editor{display:block;height:100%;overflow:auto}\n"], dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiEditorComponent, selector: "cui-editor", inputs: ["editorApiId", "config", "requestSize"], outputs: ["editorEmpty"] }, { kind: "component", type: CuiEmptyStateComponent, selector: "cui-empty-state, [cuiEmptyState]", inputs: ["title", "subtitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiFramerPreviewComponent, isStandalone: true, selector: "cui-framer-preview", inputs: { framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, editorResourceUrl: { classPropertyName: "editorResourceUrl", publicName: "editorResourceUrl", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    @if (jText()) {\n        @if (!isDescriptionEmpty()) {\n            @let url = thumbnailUrl();\n\n            @if (url?.src; as src) {\n                @if (isVideo) {\n                    <video\n                        class=\"thumbnail\"\n                        [src]=\"src\"\n                        controls\n                    ></video>\n                } @else {\n                    <img\n                        class=\"thumbnail\"\n                        [src]=\"src\"\n                        [alt]=\"url?.name\"\n                    />\n                }\n            }\n\n            <div class=\"content\">\n                @if (title(); as title) {\n                    <div class=\"title\">{{ title }}</div>\n                }\n\n                @if (jText()?.id; as id) {\n                    <div class=\"wrapper\">\n                        <cui-editor\n                            class=\"editor\"\n                            [editorApiId]=\"id\"\n                            [config]=\"editorConfig\"\n                        />\n                    </div>\n                }\n            </div>\n        } @else {\n            <cui-empty-state [subtitle]=\"t('NO_DESCRIPTION_WAS_PROVIDED')\" />\n        }\n    }\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;gap:0;height:100%;overflow:auto}.thumbnail{width:100%;max-height:271px;object-fit:contain}.content{display:flex;flex-direction:column;gap:14px;padding:16px 12px}.title{font-weight:500;font-size:18px;line-height:28px}.editor{display:block;height:100%;overflow:auto}\n"], dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiEditorComponent, selector: "cui-editor", inputs: ["editorApiId", "config", "requestSize"], outputs: ["editorEmpty", "editorReady"] }, { kind: "component", type: CuiEmptyStateComponent, selector: "cui-empty-state, [cuiEmptyState]", inputs: ["title", "subtitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiFramerPreviewComponent, decorators: [{
             type: Component,
@@ -11780,7 +11865,7 @@ class CuiCriterionReadonlyInfoComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiCriterionReadonlyInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiCriterionReadonlyInfoComponent, isStandalone: true, selector: "cui-criterion-readonly-info", inputs: { framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    @if (jText()) {\n        @if (!isDescriptionEmpty()) {\n            @if (thumbnailUrl() | async; as thumbnailUrl) {\n                <cui-utility-readonly-thumbnail\n                    [thumbnailUrl]=\"thumbnailUrl\"\n                    [isVideo]=\"isVideo\"\n                />\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: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiUtilityReadonlyThumbnailComponent, selector: "cui-utility-readonly-thumbnail", inputs: ["thumbnailUrl", "isVideo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiCriterionReadonlyInfoComponent, isStandalone: true, selector: "cui-criterion-readonly-info", inputs: { framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    @if (jText()) {\n        @if (!isDescriptionEmpty()) {\n            @if (thumbnailUrl() | async; as thumbnailUrl) {\n                <cui-utility-readonly-thumbnail\n                    [thumbnailUrl]=\"thumbnailUrl\"\n                    [isVideo]=\"isVideo\"\n                />\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", "editorReady"] }, { kind: "component", type: CuiEmptyStateComponent, selector: "cui-empty-state, [cuiEmptyState]", inputs: ["title", "subtitle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { 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.14", ngImport: i0, type: CuiCriterionReadonlyInfoComponent, decorators: [{
             type: Component,
@@ -11919,7 +12004,7 @@ class CuiInstructionReadonlyInfoComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiInstructionReadonlyInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiInstructionReadonlyInfoComponent, isStandalone: true, selector: "cui-instruction-readonly-info", inputs: { framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    @if (jText()) {\n        @if (!isDescriptionEmpty()) {\n            @if (thumbnailUrl() | async; as thumbnailUrl) {\n                <cui-utility-readonly-thumbnail\n                    [thumbnailUrl]=\"thumbnailUrl\"\n                    [isVideo]=\"isVideo\"\n                />\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: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiUtilityReadonlyThumbnailComponent, selector: "cui-utility-readonly-thumbnail", inputs: ["thumbnailUrl", "isVideo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiInstructionReadonlyInfoComponent, isStandalone: true, selector: "cui-instruction-readonly-info", inputs: { framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    @if (jText()) {\n        @if (!isDescriptionEmpty()) {\n            @if (thumbnailUrl() | async; as thumbnailUrl) {\n                <cui-utility-readonly-thumbnail\n                    [thumbnailUrl]=\"thumbnailUrl\"\n                    [isVideo]=\"isVideo\"\n                />\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", "editorReady"] }, { kind: "component", type: CuiEmptyStateComponent, selector: "cui-empty-state, [cuiEmptyState]", inputs: ["title", "subtitle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { 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.14", ngImport: i0, type: CuiInstructionReadonlyInfoComponent, decorators: [{
             type: Component,
@@ -12693,7 +12778,7 @@ class UtilityInfoReadonlyComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UtilityInfoReadonlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: UtilityInfoReadonlyComponent, isStandalone: true, selector: "cui-utility-info-readonly", inputs: { environmentUrlForResources: { classPropertyName: "environmentUrlForResources", publicName: "environmentUrlForResources", isSignal: true, isRequired: false, transformFunction: null }, environmentUrlForInstruction: { classPropertyName: "environmentUrlForInstruction", publicName: "environmentUrlForInstruction", isSignal: true, isRequired: false, transformFunction: null }, framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    @if (jText()) {\n        @if (!isDescriptionEmpty()) {\n            @if (thumbnailUrl(); as url) {\n                @if (url?.src; as src) {\n                    @if (isVideo) {\n                        <video\n                            class=\"thumbnail\"\n                            [src]=\"src\"\n                            controls\n                        ></video>\n                    } @else {\n                        <img\n                            class=\"thumbnail\"\n                            [src]=\"src\"\n                            [alt]=\"url?.name\"\n                        />\n                    }\n                }\n            }\n            @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}.thumbnail{width:100%;max-height:271px;object-fit:contain}.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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: UtilityInfoReadonlyComponent, isStandalone: true, selector: "cui-utility-info-readonly", inputs: { environmentUrlForResources: { classPropertyName: "environmentUrlForResources", publicName: "environmentUrlForResources", isSignal: true, isRequired: false, transformFunction: null }, environmentUrlForInstruction: { classPropertyName: "environmentUrlForInstruction", publicName: "environmentUrlForInstruction", isSignal: true, isRequired: false, transformFunction: null }, framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    @if (jText()) {\n        @if (!isDescriptionEmpty()) {\n            @if (thumbnailUrl(); as url) {\n                @if (url?.src; as src) {\n                    @if (isVideo) {\n                        <video\n                            class=\"thumbnail\"\n                            [src]=\"src\"\n                            controls\n                        ></video>\n                    } @else {\n                        <img\n                            class=\"thumbnail\"\n                            [src]=\"src\"\n                            [alt]=\"url?.name\"\n                        />\n                    }\n                }\n            }\n            @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}.thumbnail{width:100%;max-height:271px;object-fit:contain}.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", "editorReady"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UtilityInfoReadonlyComponent, decorators: [{
             type: Component,
@@ -13762,7 +13847,7 @@ class ModalOperationPartComponent {
         ]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModalOperationPartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ModalOperationPartComponent, isStandalone: true, selector: "cui-modal-operation-part", inputs: { isInserted: { classPropertyName: "isInserted", publicName: "isInserted", isSignal: true, isRequired: false, transformFunction: null }, containerId: { classPropertyName: "containerId", publicName: "containerId", isSignal: true, isRequired: false, transformFunction: null }, quantumId: { classPropertyName: "quantumId", publicName: "quantumId", isSignal: true, isRequired: false, transformFunction: null }, jobId: { classPropertyName: "jobId", publicName: "jobId", isSignal: true, isRequired: false, transformFunction: null }, storageObjectOperation: { classPropertyName: "storageObjectOperation", publicName: "storageObjectOperation", isSignal: true, isRequired: true, transformFunction: null }, environmentUrlForResources: { classPropertyName: "environmentUrlForResources", publicName: "environmentUrlForResources", isSignal: true, isRequired: true, transformFunction: null }, environmentUrlForInstruction: { classPropertyName: "environmentUrlForInstruction", publicName: "environmentUrlForInstruction", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "estimatedTime", first: true, predicate: ["estimatedTime"], descendants: true, isSignal: true }, { propertyName: "editor", first: true, predicate: ["editor"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (storageObjectOperation().storageElement; as operation) {\n    <ng-container *transloco=\"let t\">\n        <cui-modal-header\n            [heading]=\"operation.title\"\n            [isInserted]=\"isInserted()\"\n        >\n            <cui-letter-box\n                cuiModalHeaderIcon\n                letter=\"o\"\n                backgroundColor=\"var(--cui-success)\"\n            />\n\n            @if (isInserted()) {\n                <cui-modal-header-inserted-buttons\n                    cuiModalHeaderButtons\n                    (unbindClicked)=\"onUnbindOperation()\"\n                />\n            }\n        </cui-modal-header>\n\n        @if (tabs().length) {\n            <cui-modal-header-tabs [tabs]=\"tabs()\" />\n        }\n    </ng-container>\n\n    <ng-template #estimatedTime>\n        {{ ptFormat() }}\n    </ng-template>\n\n    <ng-template #editor>\n        <cui-editor\n            [editorApiId]=\"operation.textContainerId\"\n            [config]=\"editorConfig()\"\n        />\n    </ng-template>\n}\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: CuiLetterBoxComponent, selector: "cui-letter-box", inputs: ["letter", "backgroundColor", "size", "shape"] }, { kind: "component", type: CuiEditorComponent, selector: "cui-editor", inputs: ["editorApiId", "config", "requestSize"], outputs: ["editorEmpty"] }, { kind: "component", type: ModalHeaderTabsComponent, selector: "cui-modal-header-tabs", inputs: ["tabs", "selectedIndex"] }, { kind: "component", type: ModalHeaderInsertedButtonsComponent, selector: "cui-modal-header-inserted-buttons", outputs: ["unbindClicked"] }, { kind: "component", type: ModalHeaderComponent, selector: "cui-modal-header", inputs: ["heading", "isInserted"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ModalOperationPartComponent, isStandalone: true, selector: "cui-modal-operation-part", inputs: { isInserted: { classPropertyName: "isInserted", publicName: "isInserted", isSignal: true, isRequired: false, transformFunction: null }, containerId: { classPropertyName: "containerId", publicName: "containerId", isSignal: true, isRequired: false, transformFunction: null }, quantumId: { classPropertyName: "quantumId", publicName: "quantumId", isSignal: true, isRequired: false, transformFunction: null }, jobId: { classPropertyName: "jobId", publicName: "jobId", isSignal: true, isRequired: false, transformFunction: null }, storageObjectOperation: { classPropertyName: "storageObjectOperation", publicName: "storageObjectOperation", isSignal: true, isRequired: true, transformFunction: null }, environmentUrlForResources: { classPropertyName: "environmentUrlForResources", publicName: "environmentUrlForResources", isSignal: true, isRequired: true, transformFunction: null }, environmentUrlForInstruction: { classPropertyName: "environmentUrlForInstruction", publicName: "environmentUrlForInstruction", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "estimatedTime", first: true, predicate: ["estimatedTime"], descendants: true, isSignal: true }, { propertyName: "editor", first: true, predicate: ["editor"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (storageObjectOperation().storageElement; as operation) {\n    <ng-container *transloco=\"let t\">\n        <cui-modal-header\n            [heading]=\"operation.title\"\n            [isInserted]=\"isInserted()\"\n        >\n            <cui-letter-box\n                cuiModalHeaderIcon\n                letter=\"o\"\n                backgroundColor=\"var(--cui-success)\"\n            />\n\n            @if (isInserted()) {\n                <cui-modal-header-inserted-buttons\n                    cuiModalHeaderButtons\n                    (unbindClicked)=\"onUnbindOperation()\"\n                />\n            }\n        </cui-modal-header>\n\n        @if (tabs().length) {\n            <cui-modal-header-tabs [tabs]=\"tabs()\" />\n        }\n    </ng-container>\n\n    <ng-template #estimatedTime>\n        {{ ptFormat() }}\n    </ng-template>\n\n    <ng-template #editor>\n        <cui-editor\n            [editorApiId]=\"operation.textContainerId\"\n            [config]=\"editorConfig()\"\n        />\n    </ng-template>\n}\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: CuiLetterBoxComponent, selector: "cui-letter-box", inputs: ["letter", "backgroundColor", "size", "shape"] }, { kind: "component", type: CuiEditorComponent, selector: "cui-editor", inputs: ["editorApiId", "config", "requestSize"], outputs: ["editorEmpty", "editorReady"] }, { kind: "component", type: ModalHeaderTabsComponent, selector: "cui-modal-header-tabs", inputs: ["tabs", "selectedIndex"] }, { kind: "component", type: ModalHeaderInsertedButtonsComponent, selector: "cui-modal-header-inserted-buttons", outputs: ["unbindClicked"] }, { kind: "component", type: ModalHeaderComponent, selector: "cui-modal-header", inputs: ["heading", "isInserted"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModalOperationPartComponent, decorators: [{
             type: Component,