@cuby-ui/core 0.0.227 → 0.0.231

package/fesm2022/cuby-ui-core.mjs

@@ -1,23 +1,29 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, inject, Renderer2, input, model, effect, Directive, InjectionToken, Input, HostBinding, ChangeDetectorRef, ElementRef, ViewChild, EventEmitter, Output, NgModule, Injector, Injectable, SkipSelf, Optional, DestroyRef, NgZone, signal, TemplateRef, ContentChildren, HostListener, Self, INJECTOR, forwardRef, ViewContainerRef, computed } from '@angular/core';
+import { Component, ChangeDetectionStrategy, inject, Renderer2, input, model, effect, Directive, InjectionToken, Input, HostBinding, ChangeDetectorRef, ElementRef, ViewChild, EventEmitter, Output, NgModule, Injector, Injectable, SkipSelf, Optional, DestroyRef, NgZone, signal, TemplateRef, ContentChildren, HostListener, Self, INJECTOR, forwardRef, ViewContainerRef, booleanAttribute, computed, Pipe, APP_INITIALIZER, viewChild, afterRender, output } from '@angular/core';
 import * as i1 from '@angular/common';
-import { CommonModule, DOCUMENT, NgForOf, NgIf, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
+import { CommonModule, DOCUMENT, NgForOf, NgIf, NgComponentOutlet, NgTemplateOutlet, NgFor, UpperCasePipe, NgClass } from '@angular/common';
 import * as i1$1 from '@cuby-ui/cdk';
-import { CUI_WINDOW, cuiCreateToken, cuiCreateTokenFromFactory, CuiDestroyService, CuiFilterPipe, CuiLetDirective, CuiPopoverService, cuiProvide, CUI_ANIMATION_FRAME, cuiZonefree, EMPTY_CLIENT_RECT, cuiInjectElement, CUI_LOCAL_STORAGE, CUI_IS_WEBKIT, CuiItemDirective, CuiActiveZone, CuiFocusTrapDirective, cuiGetElementObscures, CUI_IS_MOBILE, CuiHoveredService, cuiPure, cuiPointToClientRect, cuiClamp, cuiPx, cuiIfMap, cuiIsPresent, cuiTypedFromEvent, cuiZonefreeScheduler, cuiZoneOptimized, cuiIsNativeFocused, CuiClickOutsideDirective, CuiTargetDirective, cuiGetClosestFocusable, CuiTime, CuiDimensionsObserverDirective, CuiAutoResizingDirective } from '@cuby-ui/cdk';
+import { CUI_WINDOW, cuiCreateToken, cuiCreateTokenFromFactory, CuiDestroyService, CuiFilterPipe, CuiLetDirective, CuiPopoverService, cuiProvide, CUI_ANIMATION_FRAME, cuiZonefree, EMPTY_CLIENT_RECT, cuiInjectElement, CUI_LOCAL_STORAGE, CUI_IS_WEBKIT, CuiItemDirective, CuiActiveZone, CuiFocusTrapDirective, cuiGetElementObscures, CUI_IS_MOBILE, CuiHoveredService, cuiPure, cuiPointToClientRect, cuiClamp, cuiPx, cuiIfMap, cuiIsPresent, cuiTypedFromEvent, cuiZonefreeScheduler, cuiZoneOptimized, cuiIsNativeFocused, CuiClickOutsideDirective, CuiTargetDirective, cuiGetClosestFocusable, CuiTime, CuiDimensionsObserverDirective, CuiAutoResizingDirective, CuiIdService, CuiElementDirective } from '@cuby-ui/cdk';
 import { DomSanitizer } from '@angular/platform-browser';
 import { cuiIsIcon, CUI_ICONS } from '@cuby-ui/icons';
-import { BehaviorSubject, takeUntil, Observable, merge, distinctUntilChanged, startWith, map, finalize, Subject, switchMap, of, delay, repeat, filter, tap, takeWhile, fromEvent, debounce, timer, skip, take, catchError, throwError } from 'rxjs';
+import { BehaviorSubject, takeUntil, Observable, merge, distinctUntilChanged, startWith, map, finalize, timer, Subject, switchMap, of, delay, repeat, filter, tap, takeWhile, fromEvent, debounce, skip, take, forkJoin, throttleTime, concatMap, toArray, catchError, throwError, pairwise, debounceTime } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { trigger, transition, query, animateChild, style, animate, stagger } from '@angular/animations';
 import * as i2 from '@taiga-ui/polymorpheus';
 import { PolymorpheusOutlet, PolymorpheusTemplate, PolymorpheusComponent, injectContext } from '@taiga-ui/polymorpheus';
-import { __decorate } from 'tslib';
+import { __decorate, __metadata } from 'tslib';
 import * as i2$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { Validators, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, FormControl, NonNullableFormBuilder } from '@angular/forms';
 import { maskitoParseNumber, maskitoNumberOptionsGenerator, maskitoTimeOptionsGenerator } from '@maskito/kit';
 import * as i3 from '@maskito/angular';
 import { MaskitoDirective } from '@maskito/angular';
-import { HttpErrorResponse } from '@angular/common/http';
+import EditorJS from '@editorjs/editorjs';
+import Header from '@editorjs/header';
+import List from '@editorjs/list';
+import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { createCustomElement } from '@angular/elements';
+import { CuiFrameApiService, CuiTreeStructNavigatorApiService } from '@cuby-ui/api';
 
 class CuiAccordionComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -761,16 +767,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
-const LoadingState = {
+const CuiLoadingState = {
     LOADING: 'loading',
     COMPLETED: 'completed',
     INITIAL: 'initial'
 };
 
-class LoaderService {
+class CuiLoaderService {
     constructor() {
         this.RESET_TO_INITIAL_TIME = 1000;
-        this.loaderStateSignal = signal(LoadingState.INITIAL);
+        this.loaderStateSignal = signal(CuiLoadingState.INITIAL);
         this.requestCount = 0;
         this.loaderState = this.loaderStateSignal.asReadonly();
         AngularOutsideLoaderService.setInstance(this);
@@ -778,14 +784,14 @@ class LoaderService {
     setLoading() {
         this.requestCount++;
         // need to use without queueMicrotask (error)
-        queueMicrotask(() => this.loaderStateSignal.set(LoadingState.LOADING));
+        queueMicrotask(() => this.loaderStateSignal.set(CuiLoadingState.LOADING));
     }
     setCompleted() {
         this.requestCount = this.requestCount && this.requestCount - 1;
         if (this.requestCount) {
             return;
         }
-        return this.loaderStateSignal.set(LoadingState.COMPLETED);
+        return this.loaderStateSignal.set(CuiLoadingState.COMPLETED);
     }
     handleCompletedRequest() {
         this.setCompleted();
@@ -794,18 +800,18 @@ class LoaderService {
             if (this.requestCount) {
                 return;
             }
-            this.loaderStateSignal.set(LoadingState.INITIAL);
+            this.loaderStateSignal.set(CuiLoadingState.INITIAL);
         }, this.RESET_TO_INITIAL_TIME);
     }
     reset() {
         this.requestCount = 0;
         this.resetLoadingStateTimerId = undefined;
-        this.loaderStateSignal.set(LoadingState.INITIAL);
+        this.loaderStateSignal.set(CuiLoadingState.INITIAL);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoaderService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiLoaderService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoaderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiLoaderService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1647,6 +1653,41 @@ function cuiGetDuration(speed) {
     return speed && CUI_ANIMATIONS_DEFAULT_DURATION / speed;
 }
 
+const LEADING_TRAILING_SPACES_REGEX = /^\s|\s$/;
+const MULTIPLE_SPACES_REGEX = /\s{2,}/;
+function hasExtraSpaces(value) {
+    const hasLeadingOrTrailingSpaces = LEADING_TRAILING_SPACES_REGEX.test(value);
+    const hasMultipleSpaces = MULTIPLE_SPACES_REGEX.test(value);
+    if (hasLeadingOrTrailingSpaces || hasMultipleSpaces) {
+        return { extraSpaces: true };
+    }
+    return null;
+}
+
+function asyncExtraSpacesValidators(delay) {
+    return ({ value }) => {
+        return timer(delay).pipe(map(() => hasExtraSpaces(value)));
+    };
+}
+function syncExtraSpacesValidator() {
+    return ({ errors, value }) => {
+        if (!errors?.['extraSpaces']) {
+            return null;
+        }
+        return hasExtraSpaces(value);
+    };
+}
+
+function createDefaultValidators({ maxLength = 100, asyncDelay = 700 } = {}) {
+    // Need to offset because this delay must be before changing value
+    const OFFSET = 1;
+    const adjustedAsyncDelay = asyncDelay - OFFSET;
+    return {
+        validators: [Validators.required, Validators.maxLength(maxLength), syncExtraSpacesValidator()],
+        asyncValidators: [asyncExtraSpacesValidators(adjustedAsyncDelay)]
+    };
+}
+
 /**
  * A component to display a tooltip
  */
@@ -1864,7 +1905,10 @@ class CuiTooltipPosition extends CuiPositionAccessor {
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: CuiTooltipPosition, isStandalone: true, inputs: { direction: ["cuiTooltipDirection", "direction"] }, outputs: { directionChange: "cuiTooltipDirectionChange" }, usesInheritance: true, ngImport: i0 }); }
 }
 __decorate([
-    cuiPure
+    cuiPure,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String]),
+    __metadata("design:returntype", void 0)
 ], CuiTooltipPosition.prototype, "emitDirection", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiTooltipPosition, decorators: [{
             type: Directive,
@@ -2089,7 +2133,10 @@ class CuiTooltipComponent {
   `, isInline: true, styles: [":host{padding:4px 8px;font-weight:400;font-size:14px;line-height:20px;overflow-y:auto;position:absolute;max-inline-size:375px;max-block-size:375px;background:var(--cui-gray-900);border-radius:6px;color:var(--cui-gray-0);box-sizing:border-box;font-family:var(--cui-main-font);white-space:pre-line;overflow-wrap:break-word;transform-origin:var(--left) var(--top)}:host:not([style*=top]){visibility:hidden}:host._untouchable{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], animations: [cuiFadeIn, cuiScaleIn], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
-    cuiPure
+    cuiPure,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String, String, Number, Number]),
+    __metadata("design:returntype", void 0)
 ], CuiTooltipComponent.prototype, "apply", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiTooltipComponent, decorators: [{
             type: Component,
@@ -2135,7 +2182,9 @@ class CuiTooltipDescribe extends CuiDriver {
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: CuiTooltipDescribe, isStandalone: true, selector: "[cuiTooltipDescribe]", inputs: { cuiTooltipDescribe: "cuiTooltipDescribe" }, providers: [cuiAsDriver(CuiTooltipDescribe)], usesInheritance: true, ngImport: i0 }); }
 }
 __decorate([
-    cuiPure
+    cuiPure,
+    __metadata("design:type", HTMLElement),
+    __metadata("design:paramtypes", [])
 ], CuiTooltipDescribe.prototype, "element", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiTooltipDescribe, decorators: [{
             type: Directive,
@@ -3008,6 +3057,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
+class CuiContentWrapperComponent {
+    constructor() {
+        this.DEFAULT_BACKGROUND_COLOR = 'var(--cui-base-0)';
+        this.DEFAULT_GAP = 8;
+        this.backgroundColor = input(this.DEFAULT_BACKGROUND_COLOR);
+        this.gap = input(this.DEFAULT_GAP);
+    }
+    get _backgroundColor() {
+        return this.backgroundColor();
+    }
+    get _gap() {
+        return this.gap();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiContentWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiContentWrapperComponent, isStandalone: true, selector: "cui-content-wrapper, [cuiContentWrapper]", inputs: { backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.background": "this._backgroundColor", "style.gap.px": "this._gap" } }, ngImport: i0, template: "<ng-content />\r\n", styles: [":host{padding:16px;display:flex;flex-direction:column;gap:16px;border-radius:8px}:host:empty{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiContentWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-content-wrapper, [cuiContentWrapper]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\r\n", styles: [":host{padding:16px;display:flex;flex-direction:column;gap:16px;border-radius:8px}:host:empty{display:contents}\n"] }]
+        }], propDecorators: { _backgroundColor: [{
+                type: HostBinding,
+                args: ['style.background']
+            }], _gap: [{
+                type: HostBinding,
+                args: ['style.gap.px']
+            }] } });
+
+class CuiGhostInputComponent {
+    constructor() {
+        this.isError = input(false, { transform: booleanAttribute });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiGhostInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiGhostInputComponent, isStandalone: true, selector: "input [cuiGhostInput]", inputs: { isError: { classPropertyName: "isError", publicName: "isError", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class._with-error": "isError()" } }, ngImport: i0, template: '', isInline: true, styles: [":host{padding-right:3px;padding-left:3px;width:100%;border:1px solid transparent;border-radius:8px;outline:none;background:none}:host:focus-visible{box-shadow:0 0 0 2px var(--cui-focus);border-color:var(--cui-info)}:host:disabled{opacity:.5}:host::placeholder{color:var(--cui-base-400)}:host._with-error{border-color:var(--cui-danger)}:host._with-error:focus-visible{box-shadow:0 0 0 2px #d92d2040}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiGhostInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'input [cuiGhostInput]', standalone: true, template: '', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class._with-error]': 'isError()'
+                    }, styles: [":host{padding-right:3px;padding-left:3px;width:100%;border:1px solid transparent;border-radius:8px;outline:none;background:none}:host:focus-visible{box-shadow:0 0 0 2px var(--cui-focus);border-color:var(--cui-info)}:host:disabled{opacity:.5}:host::placeholder{color:var(--cui-base-400)}:host._with-error{border-color:var(--cui-danger)}:host._with-error:focus-visible{box-shadow:0 0 0 2px #d92d2040}\n"] }]
+        }] });
+
 class CuiInputPasswordComponent {
     constructor() {
         this.changeDetectorRef = inject(ChangeDetectorRef);
@@ -3620,6 +3710,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
+class CuiEmptyStateComponent {
+    constructor() {
+        this.title = input();
+        this.subtitle = input();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiEmptyStateComponent, isStandalone: true, selector: "cui-empty-state, [cuiEmptyState]", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class._with-title": "!!this.title()" } }, ngImport: i0, template: "@if (title(); as title) {\r\n    <p class=\"title\">{{ title }}</p>\r\n}\r\n@if (subtitle(); as subtitle) {\r\n    <p class=\"subtitle\">{{ subtitle }}</p>\r\n}\r\n<ng-content />\r\n", styles: [":host{--padding-vertical: 24px;--padding-horizontal: 0;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;padding:16px;margin:auto;height:100%;text-align:center}:host._with-title{padding:var(--padding-vertical) var(--padding-horizontal)}.title,.subtitle{margin:0}.title{font-weight:500;font-size:16px;line-height:24px}.subtitle{font-weight:400;font-size:14px;line-height:20px;color:var(--cui-base-500)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEmptyStateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-empty-state, [cuiEmptyState]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class._with-title]': '!!this.title()'
+                    }, template: "@if (title(); as title) {\r\n    <p class=\"title\">{{ title }}</p>\r\n}\r\n@if (subtitle(); as subtitle) {\r\n    <p class=\"subtitle\">{{ subtitle }}</p>\r\n}\r\n<ng-content />\r\n", styles: [":host{--padding-vertical: 24px;--padding-horizontal: 0;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;padding:16px;margin:auto;height:100%;text-align:center}:host._with-title{padding:var(--padding-vertical) var(--padding-horizontal)}.title,.subtitle{margin:0}.title{font-weight:500;font-size:16px;line-height:24px}.subtitle{font-weight:400;font-size:14px;line-height:20px;color:var(--cui-base-500)}\n"] }]
+        }] });
+
 const IS_SIDEBAR_OPENED_STORAGE_KEY = 'is-sidebar-opened';
 
 class CuiRenderDynamicComponentsService {
@@ -3948,64 +4053,3961 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-const cuiXNdjsonInterceptor = (request, next) => {
-    if (request.headers.get('Content-Type') !== 'application/x-ndjson') {
-        return next(request);
+const COMBINED_TEXT_BLOCK_PART = 'combined-text-block-part';
+const COMBINED_TEXT_BLOCK = 'combined-text-block';
+const COMBINED_TEXT_BLOCK_NAME = 'paragraph';
+const COMBINED_TEXT_BLOCK_ADDED = 'combinedTextBlockAdded';
+const COMBINED_TEXT_BLOCK_UPDATED = 'combinedTextBlockUpdated';
+const COMBINED_TEXT_BLOCK_REMOVED = 'combinedTextBlockRemoved';
+const SPLIT_MAX_LENGTH = 1000;
+const SPLIT_LENGTH = 500;
+const EDITOR_SELECTOR = '[data-editor]';
+const DEFAULT_PLACEHOLDER = "Type text or '/' for commands...";
+const DEFAULT_READONLY_PLACEHOLDER = "No 'Description' was provided";
+const DEFAULT_CONFIG = {
+    tools: {},
+    readOnly: false,
+    autofocus: false
+};
+const CuiEditorTranslations = {
+    en: import('./cuby-ui-core-en-D3DnyYmu.mjs'),
+};
+
+class CuiHeaderTool extends Header {
+    constructor(data) {
+        super(data);
     }
-    return new Observable((observer) => {
-        const controller = new AbortController();
-        const signal = controller.signal;
-        (async () => {
-            try {
-                const response = await fetch(request.urlWithParams, {
-                    method: request.method,
-                    headers: request.headers.keys().reduce((headers, key) => {
-                        headers[key] = request.headers.get(key);
-                        return headers;
-                    }, {}),
-                    body: request.body ? JSON.stringify(request.body) : null,
-                    signal
-                });
-                if (!response.ok) {
-                    const error = await response.json();
-                    observer.error(new HttpErrorResponse({ error }));
+    validate() {
+        return true;
+    }
+    render() {
+        return super.render();
+    }
+    save(block) {
+        return super.save(block);
+    }
+}
+
+class CuiListTool extends List {
+    constructor(data) {
+        super(data);
+    }
+    render() {
+        return super.render();
+    }
+}
+
+class CuiSelectionBase {
+    static get isInline() {
+        return true;
+    }
+    get state() {
+        return this._state;
+    }
+    set state(state) {
+        this._state = state;
+        this.button?.classList.toggle(this.api.styles.inlineToolButtonActive, state);
+    }
+    constructor(data) {
+        this.LIST_CLASS = 'cdx-list__item';
+        this.SELECTED_TEXT_CLASS = '_selected';
+        this.TAG = 'B';
+        this.COMMAND = 'bold';
+        this._state = false;
+        this.api = data.api;
+    }
+    wrap(range) {
+        const { startContainer, endContainer } = range;
+        this.addSelectionToDOM(range, startContainer, endContainer);
+    }
+    unwrap() {
+        document.execCommand(this.COMMAND);
+    }
+    checkState() {
+        this.state = document.queryCommandState(this.COMMAND);
+        return this.state;
+    }
+    surround(range) {
+        if (this.state) {
+            this.unwrap();
+            return;
+        }
+        this.wrap(range);
+    }
+    createElement(text = '') {
+        const element = document.createElement(this.TAG);
+        element.textContent = text;
+        return element;
+    }
+    addSelectionToDOM(range, startBlock, endBlock) {
+        const classes = [this.LIST_CLASS, COMBINED_TEXT_BLOCK_PART];
+        const { className, parent: startParent } = this.getClosestParentWithClass(startBlock, classes);
+        const { parent: endParent } = this.getClosestParentWithClass(endBlock, classes);
+        if (!className || startParent === endParent) {
+            this.addSelectionForOnlyChild(range);
+            return;
+        }
+        this.addSelectionForChildren(startParent, endParent);
+    }
+    addSelectionForOnlyChild(range) {
+        const selectedText = range.extractContents();
+        const selection = this.createElement();
+        selection.appendChild(selectedText);
+        range.insertNode(selection);
+    }
+    addSelectionForChildren(startParent, endParent) {
+        const nodes = this.getSelectedNodesFromDOM(startParent, endParent);
+        nodes.forEach((node) => node.classList.add(this.SELECTED_TEXT_CLASS));
+        document.execCommand(this.COMMAND);
+        nodes.forEach((node) => node.classList.remove(this.SELECTED_TEXT_CLASS));
+    }
+    getSelectedNodesFromDOM(startParent, endParent) {
+        const nodes = [startParent];
+        let next = startParent.nextSibling;
+        while (next && next !== endParent) {
+            nodes.push(next);
+            next = next?.nextSibling || null;
+        }
+        nodes.push(endParent);
+        return nodes;
+    }
+    getClosestParentWithClass(node, classes) {
+        const nodeParent = node.parentElement;
+        let parent = nodeParent;
+        let resultClassName = '';
+        for (const className of classes) {
+            const parentWithClass = parent.closest('.' + className);
+            if (!parentWithClass) {
+                continue;
+            }
+            parent = parentWithClass;
+            resultClassName = className;
+            break;
+        }
+        return { className: resultClassName, parent };
+    }
+}
+
+class CuiBoldInlineTool extends CuiSelectionBase {
+    static { this.title = 'Bold'; }
+    static get sanitize() {
+        return {
+            b: {}
+        };
+    }
+    constructor(data) {
+        super(data);
+        this.COMMAND = 'bold';
+        this.CSS = {
+            button: 'ce-inline-tool',
+            buttonActive: 'ce-inline-tool--active',
+            buttonModifier: 'ce-inline-tool--bold'
+        };
+    }
+    render() {
+        this.button = document.createElement('button');
+        this.button.type = 'button';
+        this.button.classList.add(this.CSS.button, this.CSS.buttonModifier);
+        /* eslint-disable */
+        this.button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path d="M7.5 10.0002V5.91683C7.5 5.8708 7.53731 5.8335 7.58333 5.8335H8.66667C9.58333 5.8335 11.6667 5.91683 11.6667 7.91683C11.6667 7.91683 11.6667 10.0002 9.16667 10.0002M7.5 10.0002V14.0002C7.5 14.0922 7.57462 14.1668 7.66667 14.1668H10.4167C11.6667 14.1668 12.5 13.3335 12.5 12.0835C12.5 9.754 9.16667 10.0002 9.16667 10.0002M7.5 10.0002H9.16667" stroke="#121315" stroke-width="1.66667" stroke-linecap="round"/>
+        </svg>`;
+        /* eslint-enable */
+        return this.button;
+    }
+    get shortcut() {
+        return 'CMD+B';
+    }
+}
+
+class CuiItalicInlineTool extends CuiSelectionBase {
+    static { this.title = 'Italic'; }
+    static get sanitize() {
+        return {
+            i: {}
+        };
+    }
+    constructor(data) {
+        super(data);
+        this.COMMAND = 'italic';
+        this.TAG = 'I';
+        this.CSS = {
+            button: 'ce-inline-tool',
+            buttonActive: 'ce-inline-tool--active',
+            buttonModifier: 'ce-inline-tool--italic'
+        };
+    }
+    render() {
+        this.button = document.createElement('button');
+        this.button.type = 'button';
+        this.button.classList.add(this.CSS.button, this.CSS.buttonModifier);
+        /* eslint-disable */
+        this.button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path d="M11.118 8.3335C10.3532 10.6116 9.16797 14.1668 9.16797 14.1668" stroke="#121315" stroke-width="1.66667" stroke-linecap="round"/>
+            <path d="M11.8404 5.8335H11.832" stroke="#121315" stroke-width="1.66667" stroke-linecap="round"/>
+        </svg>`;
+        /* eslint-enable */
+        return this.button;
+    }
+    get shortcut() {
+        return 'CMD+I';
+    }
+}
+
+function urlValidator() {
+    return ({ value }) => {
+        try {
+            new URL(value);
+            return null;
+        }
+        catch {
+            return { url: true };
+        }
+    };
+}
+
+const BlockConversionToCombined = {
+    paragraph: 'combinedTextBlock'
+};
+
+function generateId() {
+    return '_' + Math.random().toString(36).substring(2, 9);
+}
+
+class CuiJTextApiService {
+    constructor() {
+        this.httpClient = inject(HttpClient);
+        this.GET_BLOCK_DEFAULT_SIZE = 40;
+        this.JTEXT_URL = 'framer/jtext';
+        this.BLOCK_URL = 'block';
+        this.BLOCKS_URL = 'blocks';
+        this.JTEXT_BLOCK_URL = this.JTEXT_URL + '/' + this.BLOCK_URL;
+        this.JTEXT_BLOCKS_URL = this.JTEXT_URL + '/' + this.BLOCKS_URL;
+        this.options = {};
+    }
+    addOptions(options) {
+        this.options = options ?? {};
+    }
+    createBlock(body) {
+        return this.httpClient.post(this.JTEXT_BLOCK_URL, body, this.options);
+    }
+    updateBlock(body) {
+        return this.httpClient.patch(this.JTEXT_BLOCK_URL, body, this.options);
+    }
+    getBlocks(fragmentId, page = 0, sizeBlock = this.GET_BLOCK_DEFAULT_SIZE) {
+        return this.httpClient.get(`${this.JTEXT_URL}/${fragmentId}`, {
+            params: { page, sizeBlock },
+            headers: { 'Content-Type': 'application/x-ndjson' },
+            observe: 'events',
+            ...this.options
+        });
+    }
+    createBlocks(body) {
+        return this.httpClient.post(this.JTEXT_BLOCKS_URL, body, this.options);
+    }
+    deleteBlock(containerId, blockId) {
+        return this.httpClient.delete(`${this.JTEXT_URL}/${containerId}/${this.BLOCK_URL}/${blockId}`, this.options);
+    }
+    deleteBlocks(containerId, blocksIds) {
+        return this.httpClient.delete(`${this.JTEXT_URL}/${containerId}/${this.BLOCKS_URL}`, {
+            params: { blocksIds },
+            ...this.options
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiJTextApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiJTextApiService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiJTextApiService, decorators: [{
+            type: Injectable
+        }] });
+
+class CuiEditorService {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.jtextService = inject(CuiJTextApiService);
+    }
+    sortEventsByTypes(events) {
+        const blocks = {
+            'block-removed': [],
+            'block-added': [],
+            'block-changed': []
+        };
+        events.forEach((editorEvent) => {
+            if (editorEvent.detail.target.name === COMBINED_TEXT_BLOCK_NAME) {
+                return;
+            }
+            const eventType = editorEvent.type;
+            if (eventType === "block-changed" /* EventActions.update */) {
+                const changedBlock = blocks["block-added" /* EventActions.add */].find((block) => block.detail.target.id === editorEvent.detail.target.id);
+                if (changedBlock) {
                     return;
                 }
-                const reader = response.body.getReader();
-                const decoder = new TextDecoder();
-                let buffer = '';
-                for (;;) {
-                    const { done, value } = await reader.read();
-                    if (done) {
-                        observer.complete();
-                        return;
-                    }
-                    buffer += decoder.decode(value);
-                    const lines = buffer.split('\n');
-                    buffer = lines.pop() ?? '';
-                    lines.forEach((line) => observer.next(JSON.parse(line)));
+            }
+            if (eventType === "block-removed" /* EventActions.remove */) {
+                const len = blocks["block-added" /* EventActions.add */].length;
+                blocks["block-added" /* EventActions.add */] = blocks["block-added" /* EventActions.add */].filter((block) => block.detail.target.id !== editorEvent.detail.target.id);
+                if (len > blocks["block-added" /* EventActions.add */].length) {
+                    return;
                 }
             }
-            catch (error) {
-                observer.error(new HttpErrorResponse({ error }));
+            blocks[eventType].push(editorEvent);
+        });
+        return blocks;
+    }
+    collectAddedBlocksRequest(editorId, addedBlocks) {
+        const addBlocksBody = {
+            jtextContainerId: editorId,
+            position: addedBlocks[0]?.index,
+            block: addedBlocks.map((e) => e.block)
+        };
+        const addBlocks$ = addedBlocks.length ? this.jtextService.createBlocks(addBlocksBody) : of([]);
+        return addBlocks$;
+    }
+    collectUpdatedBlocksRequest(updatedBlocks, blockIdsMap) {
+        const updatedBlocksWithId = updatedBlocks.reduce((acc, block) => {
+            const blockWithId = {
+                ...block,
+                id: blockIdsMap.get(block.id)
+            };
+            if (blockWithId.id) {
+                acc.push(blockWithId);
             }
-        })();
-        return () => controller.abort();
-    });
-};
+            return acc;
+        }, []);
+        const updateBlocksArray = updatedBlocksWithId.map((block) => this.jtextService.updateBlock(block));
+        const updateBlocks$ = updatedBlocksWithId.length ? forkJoin(updateBlocksArray) : of([]);
+        return updateBlocks$;
+    }
+    collectRemovedBlocksRequest(editorId, removedBlocksIds, blockIdsMap) {
+        const removedBlocks = removedBlocksIds.reduce((blockIds, blockId) => {
+            const backendID = blockIdsMap.get(blockId);
+            if (backendID) {
+                blockIds.push(backendID);
+            }
+            return blockIds;
+        }, []);
+        const removeBlocks$ = removedBlocks.length ? this.jtextService.deleteBlocks(editorId, removedBlocks) : of();
+        removedBlocks.forEach((removedBlock) => {
+            blockIdsMap.delete(removedBlock);
+        });
+        return removeBlocks$;
+    }
+    getFullBlockData(event, editorData) {
+        const target = event.detail.target;
+        const index = Number(target.holder.dataset['index']);
+        const blockIndex = event.detail.index;
+        const blockType = target.name;
+        const blockId = target.id;
+        const currentBlockByIndex = editorData.blocks[blockIndex];
+        const blockData = currentBlockByIndex?.id === blockId ? editorData.blocks[blockIndex].data : { text: '' };
+        return {
+            index,
+            id: blockId,
+            block: {
+                type: blockType,
+                data: blockData
+            }
+        };
+    }
+    setListenersOnCustomBlockChanges(editor, data) {
+        editor.on(COMBINED_TEXT_BLOCK_ADDED, data.addedCallback);
+        editor.on(COMBINED_TEXT_BLOCK_UPDATED, data.updatedCallback);
+        editor.on(COMBINED_TEXT_BLOCK_REMOVED, data.removedCallback);
+    }
+    setStartBlock(editorId, callback) {
+        const blockId = generateId();
+        const emptyBlock = {
+            type: COMBINED_TEXT_BLOCK_PART,
+            data: {
+                text: '',
+                parentId: blockId,
+                parentType: COMBINED_TEXT_BLOCK_NAME
+            }
+        };
+        const body = {
+            position: 0,
+            block: emptyBlock,
+            jtextContainerId: editorId
+        };
+        this.jtextService
+            .createBlock(body)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((id) => {
+            emptyBlock.id = id;
+            const block = {
+                id: blockId,
+                type: COMBINED_TEXT_BLOCK_NAME,
+                data: {
+                    id: blockId,
+                    textBlocks: [emptyBlock]
+                }
+            };
+            callback(block, id);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorService, decorators: [{
+            type: Injectable
+        }] });
 
-const cuiLoaderInterceptor = (request, next) => {
-    const loaderService = inject(LoaderService);
-    if (request.method === 'GET') {
-        return next(request);
+class CuiMarkersService {
+    constructor() {
+        this.roles = [];
+        this.tools = [
+            {
+                id: '0',
+                image: 'blob:https://www.figma.com/f985f4fc-abc6-4727-857e-80633836e2b2',
+                title: 'Шуруповерт',
+                type: "tool" /* MarkerType.tool */
+            },
+            {
+                id: '1',
+                image: 'blob:https://www.figma.com/92ad9b38-566c-4ff6-84ba-0b20b24fef39',
+                title: 'Молоток',
+                type: "tool" /* MarkerType.tool */
+            },
+            {
+                id: '2',
+                image: '/assets/image 545.png',
+                title: 'Лопата',
+                type: "tool" /* MarkerType.tool */
+            },
+            {
+                id: '3',
+                image: '/assets/image 545.png',
+                title: 'Лопата',
+                type: "tool" /* MarkerType.tool */
+            },
+            {
+                id: '4',
+                image: '/assets/image 545.png',
+                title: 'Лопата',
+                type: "tool" /* MarkerType.tool */
+            },
+            {
+                id: '5',
+                image: '/assets/image 545.png',
+                title: 'Лопата',
+                type: "tool" /* MarkerType.tool */
+            },
+            {
+                id: '6',
+                image: '/assets/image 545.png',
+                title: 'Лопата',
+                type: "tool" /* MarkerType.tool */
+            },
+            {
+                id: '7',
+                image: '/assets/image 545.png',
+                title: 'Лопата',
+                type: "tool" /* MarkerType.tool */
+            },
+            {
+                id: '8',
+                image: '/assets/image 545.png',
+                title: 'Лопата',
+                type: "tool" /* MarkerType.tool */
+            }
+        ];
     }
-    loaderService.setLoading();
-    return next(request).pipe(catchError(throwError), finalize(loaderService.handleCompletedRequest.bind(loaderService)));
-};
+    getMarkersByType(type) {
+        return type === "role" /* MarkerType.role */ ? this.roles : this.tools;
+    }
+    getMarkerObjectByType(type, id) {
+        const markersArray = this.getMarkersByType(type);
+        return markersArray.find((marker) => marker.id === id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiMarkersService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiMarkersService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiMarkersService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class SelectOptionComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SelectOptionComponent, isStandalone: true, selector: "cc-select-option", inputs: { tool: "tool" }, ngImport: i0, template: "<ng-container *ngIf=\"tool\">\r\n  <img\r\n      *ngIf=\"tool.image\"\r\n      class=\"image\"\r\n      [src]=\"tool.image\"\r\n      alt=\"\"\r\n  />\r\n  <h3 class=\"title\">{{ tool.title }}</h3>\r\n</ng-container>\r\n", styles: [":host{padding:4px 8px;cursor:pointer;display:flex;align-items:center;gap:8px;border-radius:8px}@media (hover: hover){:host:hover{background-color:var(--cui-base-50)}}:host:active{background-color:var(--cui-base-50)}.title{font-weight:400;font-size:14px;line-height:20px;padding-top:2px;padding-bottom:2px;color:var(--cui-base-900)}.image{width:23px;height:23px;object-fit:cover;object-position:center}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cc-select-option', standalone: true, imports: [NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"tool\">\r\n  <img\r\n      *ngIf=\"tool.image\"\r\n      class=\"image\"\r\n      [src]=\"tool.image\"\r\n      alt=\"\"\r\n  />\r\n  <h3 class=\"title\">{{ tool.title }}</h3>\r\n</ng-container>\r\n", styles: [":host{padding:4px 8px;cursor:pointer;display:flex;align-items:center;gap:8px;border-radius:8px}@media (hover: hover){:host:hover{background-color:var(--cui-base-50)}}:host:active{background-color:var(--cui-base-50)}.title{font-weight:400;font-size:14px;line-height:20px;padding-top:2px;padding-bottom:2px;color:var(--cui-base-900)}.image{width:23px;height:23px;object-fit:cover;object-position:center}\n"] }]
+        }], propDecorators: { tool: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class MarkerSelectComponent {
+    constructor() {
+        this.document = inject(DOCUMENT);
+        this.destroyRef = inject(DestroyRef);
+        this.cuiClickOutsideDirective = inject(CuiClickOutsideDirective, { self: true });
+        this.element = inject(ElementRef).nativeElement;
+        this.markersService = inject(CuiMarkersService);
+        this.SPACE_BETWEEN_TARGET_AND_LIST = 5;
+        this.isVisible = signal(false);
+        this.isHidden = signal(true);
+        // TODO: set current type
+        this.elements = this.markersService.getMarkersByType("tool" /* MarkerType.tool */);
+        this.targetToggleEventListener = () => {
+            this.isVisible.update((prev) => !prev);
+            if (!this.isVisible()) {
+                return;
+            }
+            this.calculateDropdownPosition();
+        };
+    }
+    set space(value) {
+        this.SPACE_BETWEEN_TARGET_AND_LIST = value;
+    }
+    get hide() {
+        return this.isHidden();
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    onScroll() {
+        this.isVisible.set(false);
+    }
+    ngOnInit() {
+        this.initTargetElementListener();
+        this.initClickOutsideSubscription();
+        this.initOnCloseWhenEditorScroll();
+    }
+    ngOnDestroy() {
+        this.destroyEventListeners();
+    }
+    onToolClick(tool) {
+        this.value = tool;
+        this.onChange(this.value);
+        this.onTouched();
+        // this.isVisible.set(false);
+    }
+    initTargetElementListener() {
+        this.target.addEventListener('click', this.targetToggleEventListener);
+    }
+    initClickOutsideSubscription() {
+        this.cuiClickOutsideDirective.cuiClickOutside.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((target) => {
+            if (this.target.contains(target) || !this.isVisible()) {
+                return;
+            }
+            this.isVisible.set(false);
+        });
+    }
+    initOnCloseWhenEditorScroll() {
+        this.editor = this.element.closest(EDITOR_SELECTOR);
+        this.editor?.addEventListener('scroll', this.onScroll.bind(this));
+    }
+    destroyEventListeners() {
+        this.editor?.removeEventListener('scroll', this.onScroll.bind(this));
+        this.target?.addEventListener('click', this.targetToggleEventListener);
+    }
+    calculateDropdownPosition() {
+        this.isHidden.set(true);
+        setTimeout(() => {
+            const target = this.target;
+            const { bottom: targetRectBottom, left: targetRectLeft } = target.getBoundingClientRect();
+            const { clientHeight: documentClientHeight, clientWidth: documentClientWidth } = this.document.documentElement;
+            const distanceToBottom = documentClientHeight - (targetRectBottom + this.SPACE_BETWEEN_TARGET_AND_LIST);
+            const distanceToRight = documentClientWidth - targetRectLeft;
+            const isListRight = distanceToRight < this.element.offsetWidth;
+            const isListAbove = distanceToBottom < this.element.offsetHeight;
+            this.changePositionY(isListAbove, target.offsetHeight, targetRectBottom);
+            this.changePositionX(isListRight, target.offsetWidth, targetRectLeft);
+            this.isHidden.set(false);
+        });
+    }
+    changePositionX(isListRight, width, left) {
+        if (isListRight) {
+            this.element.style.right = 'auto';
+            this.element.style.left = left;
+            return;
+        }
+        this.element.style.right = left - this.element.offsetWidth + width;
+        this.element.style.left = 'auto';
+    }
+    changePositionY(isListAbove, height, bottom) {
+        if (isListAbove) {
+            this.element.style.top =
+                bottom - this.element.offsetHeight - height - this.SPACE_BETWEEN_TARGET_AND_LIST + 'px';
+            return;
+        }
+        this.element.style.top = bottom + this.SPACE_BETWEEN_TARGET_AND_LIST + 'px';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkerSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MarkerSelectComponent, isStandalone: true, selector: "cc-marker-select", inputs: { target: "target", space: "space" }, host: { properties: { "class._hidden": "this.hide" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MarkerSelectComponent),
+                multi: true
+            }
+        ], hostDirectives: [{ directive: i1$1.CuiClickOutsideDirective }], ngImport: i0, template: "<ng-container *ngIf=\"isVisible()\">\r\n  <div\r\n      #dropdown\r\n      class=\"dropdown\"\r\n  >\r\n      <header class=\"header\">\r\n          <cui-input-text\r\n              class=\"header__input\"\r\n              cuiTextFieldId=\"estimated\"\r\n              cuiTextFieldPlaceholder=\"Search...\"\r\n          />\r\n          <button\r\n              cuiButton\r\n              type=\"button\"\r\n              appearance=\"ghost\"\r\n              size=\"xxs\"\r\n              icon=\"cuiIconFiltersLines\"\r\n          ></button>\r\n      </header>\r\n      <div class=\"scrollable-content\">\r\n        <cc-select-option\r\n            *ngFor=\"let element of elements\"\r\n            [class._selected]=\"element.id === value?.id\"\r\n            (click)=\"onToolClick(element)\"\r\n            [tool]=\"element\"\r\n        />\r\n      </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{position:fixed;z-index:10;left:0}:host._hidden{visibility:hidden}._selected{background-color:var(--cui-base-50)}.dropdown{box-shadow:0 1px 4px #0000000a,0 1px 4px #0000000a;padding-top:3px;padding-bottom:3px;display:flex;flex-direction:column;gap:4px;border-radius:8px;border:1px solid var(--cui-base-200);max-height:350px;width:345px;background:var(--cui-base-0)}.header{padding:4px 5px;display:flex;align-items:center;gap:4px}.header__input{width:100%}.footer{padding:2px 5px}.title{font-weight:400;font-size:14px;line-height:20px;padding:2px 8px;color:var(--cui-base-500);text-transform:uppercase}.scrollable-content{padding-left:5px;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "ngmodule", type: CuiContextMenuModule }, { kind: "ngmodule", type: CuiInputModule }, { kind: "component", type: CuiInputTextComponent, selector: "cui-input-text" }, { kind: "directive", type: CuiTextFieldIdDirective, selector: "[cuiTextFieldId]", inputs: ["cuiTextFieldId"] }, { kind: "directive", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: SelectOptionComponent, selector: "cc-select-option", inputs: ["tool"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkerSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cc-marker-select', imports: [
+                        CuiButtonModule,
+                        CuiContextMenuModule,
+                        CuiInputModule,
+                        CuiLabelModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        SelectOptionComponent,
+                        NgIf,
+                        NgFor
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [CuiClickOutsideDirective], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MarkerSelectComponent),
+                            multi: true
+                        }
+                    ], template: "<ng-container *ngIf=\"isVisible()\">\r\n  <div\r\n      #dropdown\r\n      class=\"dropdown\"\r\n  >\r\n      <header class=\"header\">\r\n          <cui-input-text\r\n              class=\"header__input\"\r\n              cuiTextFieldId=\"estimated\"\r\n              cuiTextFieldPlaceholder=\"Search...\"\r\n          />\r\n          <button\r\n              cuiButton\r\n              type=\"button\"\r\n              appearance=\"ghost\"\r\n              size=\"xxs\"\r\n              icon=\"cuiIconFiltersLines\"\r\n          ></button>\r\n      </header>\r\n      <div class=\"scrollable-content\">\r\n        <cc-select-option\r\n            *ngFor=\"let element of elements\"\r\n            [class._selected]=\"element.id === value?.id\"\r\n            (click)=\"onToolClick(element)\"\r\n            [tool]=\"element\"\r\n        />\r\n      </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{position:fixed;z-index:10;left:0}:host._hidden{visibility:hidden}._selected{background-color:var(--cui-base-50)}.dropdown{box-shadow:0 1px 4px #0000000a,0 1px 4px #0000000a;padding-top:3px;padding-bottom:3px;display:flex;flex-direction:column;gap:4px;border-radius:8px;border:1px solid var(--cui-base-200);max-height:350px;width:345px;background:var(--cui-base-0)}.header{padding:4px 5px;display:flex;align-items:center;gap:4px}.header__input{width:100%}.footer{padding:2px 5px}.title{font-weight:400;font-size:14px;line-height:20px;padding:2px 8px;color:var(--cui-base-500);text-transform:uppercase}.scrollable-content{padding-left:5px;overflow:auto}\n"] }]
+        }], propDecorators: { target: [{
+                type: Input
+            }], space: [{
+                type: Input
+            }], hide: [{
+                type: HostBinding,
+                args: ['class._hidden']
+            }] } });
+
+const MARKER_SELECT_SELECTOR = 'marker-select';
+
+class MarkerModalComponent {
+    constructor() {
+        this.element = inject(ElementRef).nativeElement;
+        this.document = inject(DOCUMENT);
+        this.destroyRef = inject(DestroyRef);
+        this.cuiClickOutsideDirective = inject(CuiClickOutsideDirective, { self: true });
+        this.cuiIdService = inject(CuiIdService);
+        this.markersService = inject(CuiMarkersService);
+        this.TITLE_MAX_LENGTH = 100;
+        this.formTitle = signal('');
+        this.isTitleEmpty = computed(() => !this.formTitle().length);
+        this.isTitleMoreThanMaxLength = computed(() => this.formTitle().length > this.TITLE_MAX_LENGTH);
+        this.isTitleInvalid = computed(() => this.isTitleEmpty() || this.isTitleMoreThanMaxLength());
+        this.titleId = this.cuiIdService.generate();
+        this.dataId = this.cuiIdService.generate();
+        this.spaceBetweenTargetAndList = 5;
+        this.startTitle = '';
+        this.isGlobal = false;
+        this.isTool = false;
+        this.saveClicked = new EventEmitter();
+        this.cancelClicked = new EventEmitter();
+        this.isVisible = signal(false);
+        this.isHidden = signal(true);
+        this.targetToggleEventListener = () => {
+            this.isVisible.update((prev) => !prev);
+            if (!this.isVisible()) {
+                return;
+            }
+            this.calculateDropdownPosition();
+        };
+    }
+    set title(value) {
+        this.startTitle = value;
+        this.formTitle.set(value);
+    }
+    set url(value) {
+        this.dynamicDataControl = new FormControl(value, {
+            nonNullable: true,
+            validators: [Validators.required, urlValidator()]
+        });
+    }
+    set tool(value) {
+        const tool = this.markersService.getMarkerObjectByType(value.type, value.id);
+        this.dynamicDataControl = new FormControl(tool, {
+            nonNullable: true,
+            validators: [Validators.required]
+        });
+    }
+    set space(value) {
+        this.spaceBetweenTargetAndList = value;
+    }
+    get isFormInvalid() {
+        return this.dynamicDataControl.invalid || this.isTitleInvalid();
+    }
+    get isDynamicDataErrorShown() {
+        return this.dynamicDataControl.invalid && this.dynamicDataControl.dirty;
+    }
+    get hide() {
+        return this.isHidden();
+    }
+    get fixed() {
+        return this.isGlobal;
+    }
+    ngOnInit() {
+        this.initTargetElementListener();
+        this.initClickOutsideSubscription();
+        this.initOnCloseWhenEditorScroll();
+    }
+    ngOnDestroy() {
+        this.destroyEventListeners();
+    }
+    onTitleLabelClick(element) {
+        const range = document.createRange();
+        const selection = window.getSelection();
+        range.selectNodeContents(element);
+        range.collapse(false);
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+    }
+    onSave() {
+        if (this.isFormInvalid) {
+            return;
+        }
+        this.isVisible.set(false);
+        this.saveClicked.emit({ title: this.formTitle(), data: this.dynamicDataControl.value });
+    }
+    onScroll() {
+        this.isVisible.set(false);
+    }
+    onCancel() {
+        this.isVisible.set(false);
+        this.cancelClicked.emit();
+    }
+    onClearTitle(titleElement) {
+        this.formTitle.set('');
+        titleElement.textContent = '';
+        titleElement.focus();
+    }
+    onTitleChange(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            return;
+        }
+        const target = event.target;
+        const value = target.textContent;
+        this.formTitle.set(value);
+    }
+    async onTitlePaste(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (!this.document) {
+            return;
+        }
+        const value = await window.navigator.clipboard.readText();
+        const target = event.target;
+        this.document.execCommand('insertText', false, value);
+        setTimeout(() => this.formTitle.set(target.textContent));
+    }
+    initTargetElementListener() {
+        this.target.addEventListener('click', this.targetToggleEventListener);
+    }
+    initClickOutsideSubscription() {
+        this.cuiClickOutsideDirective.cuiClickOutside.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((target) => {
+            if (this.element.contains(target) || this.target.contains(target) || !this.isVisible()) {
+                return;
+            }
+            this.isVisible.set(false);
+        });
+    }
+    initOnCloseWhenEditorScroll() {
+        this.editor = this.document.querySelector(EDITOR_SELECTOR);
+        this.editor.addEventListener('scroll', this.onScroll.bind(this));
+    }
+    destroyEventListeners() {
+        this.editor.removeEventListener('scroll', this.onScroll.bind(this));
+        this.target.addEventListener('click', this.targetToggleEventListener);
+    }
+    calculateDropdownPosition() {
+        this.isHidden.set(true);
+        setTimeout(() => {
+            const target = this.target;
+            const { bottom: targetRectBottom, left: targetRectLeft } = target.getBoundingClientRect();
+            const { clientHeight: documentClientHeight, clientWidth: documentClientWidth } = this.document.documentElement;
+            const distanceToBottom = documentClientHeight - (targetRectBottom + this.spaceBetweenTargetAndList);
+            const distanceToRight = documentClientWidth - targetRectLeft;
+            const isListRight = distanceToRight < this.element.offsetWidth;
+            const isListAbove = distanceToBottom < this.element.offsetHeight;
+            this.changePositionY(isListAbove, target.offsetHeight, targetRectBottom);
+            this.changePositionX(isListRight, target.offsetWidth, targetRectLeft);
+            this.isHidden.set(false);
+        });
+    }
+    changePositionX(isListRight, width, left) {
+        if (this.isGlobal) {
+            this.changeGlobalPositionX(isListRight, width, left);
+            return;
+        }
+        if (isListRight) {
+            this.element.style.right = '0';
+            this.element.style.left = 'auto';
+            return;
+        }
+        this.element.style.right = 'auto';
+        this.element.style.left = '0';
+    }
+    changePositionY(isListAbove, height, bottom) {
+        if (this.isGlobal) {
+            this.changeGlobalPositionY(isListAbove, height, bottom);
+            return;
+        }
+        if (isListAbove) {
+            this.element.style.bottom = height + this.spaceBetweenTargetAndList + 'px';
+            this.element.style.top = 'auto';
+            return;
+        }
+        this.element.style.top = height + this.spaceBetweenTargetAndList + 'px';
+        this.element.style.bottom = 'auto';
+    }
+    changeGlobalPositionX(isListRight, width, left) {
+        if (isListRight) {
+            this.element.style.left = left - this.element.offsetWidth + width + 'px';
+            return;
+        }
+        this.element.style.left = left + 'px';
+    }
+    changeGlobalPositionY(isListAbove, height, bottom) {
+        if (isListAbove) {
+            this.element.style.top =
+                bottom - this.element.offsetHeight - height - this.spaceBetweenTargetAndList + 'px';
+            return;
+        }
+        this.element.style.top = bottom + this.spaceBetweenTargetAndList + 'px';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkerModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MarkerModalComponent, isStandalone: true, selector: "ng-component", inputs: { title: "title", url: "url", tool: "tool", isGlobal: "isGlobal", isTool: "isTool", target: "target", space: "space" }, outputs: { saveClicked: "saveClicked", cancelClicked: "cancelClicked" }, host: { properties: { "class._hidden": "this.hide", "class._fixed": "this.fixed" } }, hostDirectives: [{ directive: i1$1.CuiClickOutsideDirective }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <ng-container *ngIf=\"isVisible()\">\r\n    <form\r\n        autocomplete=\"off\"\r\n        class=\"wrapper\"\r\n    >\r\n        <cui-form-field>\r\n            <!-- eslint-disable-next-line -->\r\n            <label\r\n                [for]=\"titleId\"\r\n                cuiLabel\r\n                [isRequired]=\"true\"\r\n                (click)=\"onTitleLabelClick(titleElement)\"\r\n            >\r\n                {{ t('TITLE') }}\r\n            </label>\r\n            <!-- TODO: \u0435\u0441\u043B\u0438 \u043D\u0430\u0439\u0434\u0435\u0442\u0441\u044F \u0432\u0430\u0440\u0438\u043A \u0441\u0434\u0435\u043B\u0430\u0442\u044C \u0447\u0435\u0440\u0435\u0437 \u0444\u043E\u0440\u043C\u0443 -->\r\n            <div\r\n                class=\"title\"\r\n                [class.title_invalid]=\"isTitleInvalid()\"\r\n            >\r\n                <div\r\n                    #titleElement\r\n                    class=\"title__text\"\r\n                    contenteditable\r\n                    attr.data-placeholder=\"{{ t('TITLE') }}...\"\r\n                    (paste)=\"onTitlePaste($event)\"\r\n                    (keyup)=\"onTitleChange($event)\"\r\n                    [innerHTML]=\"startTitle\"\r\n                ></div>\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"title__clear\"\r\n                    (click)=\"onClearTitle(titleElement)\"\r\n                >\r\n                    <cui-svg\r\n                        icon=\"cuiIconClear\"\r\n                        color=\"var(--cui-base-300)\"\r\n                        class=\"title__icon\"\r\n                    />\r\n                </button>\r\n            </div>\r\n\r\n            <cui-hint *ngIf=\"isTitleInvalid()\" hintType=\"error\">\r\n                <ng-container *ngIf=\"isTitleEmpty()\">\r\n                  {{ t('FIELD_IS_REQUIRED') }}\r\n                </ng-container>\r\n                <ng-container *ngIf=\"isTitleMoreThanMaxLength()\">\r\n                  {{ t('PLEASE_KEEP_FIELD_UNDER_CHARACTERS') }}\r\n                </ng-container>\r\n            </cui-hint>\r\n        </cui-form-field>\r\n        <cui-form-field>\r\n            <label\r\n                [for]=\"dataId\"\r\n                cuiLabel\r\n                [isRequired]=\"true\"\r\n            >\r\n                {{ isTool ? t('TOOL') : t('URL') }}\r\n            </label>\r\n            <ng-container *ngIf=\"dynamicDataControl\">\r\n              <ng-container *ngIf=\"isTool; else input\">\r\n                <div>\r\n                    <button\r\n                        #target=\"elementRef\"\r\n                        class=\"button tool-button\"\r\n                        cuiButton\r\n                        type=\"button\"\r\n                        cuiElement\r\n                        appearance=\"outlined-gray\"\r\n                        size=\"sm\"\r\n                    >\r\n                        {{ $any(dynamicDataControl.value)?.title || t('SELECT_TOOL') }}\r\n                    </button>\r\n                </div>\r\n                <cc-marker-select\r\n                    [formControl]=\"dynamicDataControl\"\r\n                    [target]=\"target.nativeElement\"\r\n                />\r\n              </ng-container>\r\n              <ng-template #input>\r\n                <cui-input-text\r\n                    [cuiTextFieldId]=\"dataId\"\r\n                    [formControl]=\"dynamicDataControl\"\r\n                    autocomplete=\"off\"\r\n                    [cuiTextFieldIsError]=\"isDynamicDataErrorShown\"\r\n                    cuiTextFieldPlaceholder=\"{{ t('LINK') }}...\"\r\n                />\r\n                <cui-hint *ngIf=\"isDynamicDataErrorShown\" hintType=\"error\">\r\n                  <ng-container *ngIf=\"dynamicDataControl.errors?.['required']\">\r\n                    {{ t('FIELD_IS_REQUIRED') }}\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"dynamicDataControl.errors?.['url']\">\r\n                    {{ t('INVALID_URL') }}\r\n                  </ng-container>\r\n                </cui-hint>\r\n              </ng-template>\r\n            </ng-container>\r\n        </cui-form-field>\r\n        <div class=\"buttons\">\r\n            <button\r\n                cuiButton\r\n                type=\"button\"\r\n                appearance=\"outlined-gray\"\r\n                size=\"sm\"\r\n                (click)=\"onCancel()\"\r\n            >\r\n                {{ t('CANCEL') }}\r\n            </button>\r\n            <button\r\n                cuiButton\r\n                type=\"submit\"\r\n                appearance=\"action\"\r\n                size=\"sm\"\r\n                [disabled]=\"isFormInvalid\"\r\n                (click)=\"onSave()\"\r\n            >\r\n                {{ t('SAVE') }}\r\n            </button>\r\n        </div>\r\n    </form>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n", styles: [":host{position:absolute;z-index:1;left:0}:host._fixed{position:fixed}:host._hidden{position:fixed;visibility:hidden}:host ::ng-deep .tool-button{width:100%}:host ::ng-deep .tool-button>span{justify-content:flex-start!important}.wrapper{padding:11px;box-shadow:0 2px 4px -1px #0000000f,0 4px 6px -1px #0000001a;display:flex;flex-direction:column;gap:16px;border-radius:8px;border:1px solid var(--cui-base-200);max-width:450px;background-color:var(--cui-base-0)}.buttons{padding-top:12px;display:flex;justify-content:flex-end;gap:12px}.title{padding:7px 13px;cursor:text;display:flex;align-items:center;gap:8px;border:1px solid var(--cui-base-200);border-radius:8px;width:426px;background:var(--cui-input);color:var(--cui-base-900)}.title:hover{border-color:var(--cui-base-300)}.title:focus-within{outline:none;box-shadow:0 0 0 2px var(--cui-focus);border-color:var(--cui-info)}.title_invalid,.title_invalid:focus-within{box-shadow:none;border-color:var(--cui-danger)}.title__text{flex-grow:1;text-wrap:nowrap;overflow:hidden}.title__text[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.title__text:focus{outline:none}.title__clear{padding:0;visibility:hidden}.title__icon{width:16px}.title__icon ::ng-deep [stroke]{stroke:var(--cui-base-0)}.title__text:not(:empty)+.title__clear{visibility:visible}\n"], dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "directive", type: CuiElementDirective, selector: "[cuiElement]", exportAs: ["elementRef"] }, { kind: "ngmodule", type: CuiFormFieldModule }, { kind: "component", type: CuiFormFieldComponent, selector: "cui-form-field" }, { kind: "ngmodule", type: CuiHintModule }, { kind: "component", type: CuiHintComponent, selector: "cui-hint", inputs: ["hintType"] }, { kind: "ngmodule", type: CuiInputModule }, { kind: "component", type: CuiInputTextComponent, selector: "cui-input-text" }, { kind: "directive", type: CuiTextFieldIdDirective, selector: "[cuiTextFieldId]", inputs: ["cuiTextFieldId"] }, { kind: "directive", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "directive", type: CuiTextFieldIsErrorDirective, selector: "[cuiTextFieldIsError]", inputs: ["cuiTextFieldIsError"] }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "component", type: CuiLabelComponent, selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MarkerSelectComponent, selector: "cc-marker-select", inputs: ["target", "space"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkerModalComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [
+                        CuiButtonModule,
+                        CuiElementDirective,
+                        CuiFormFieldModule,
+                        CuiHintModule,
+                        CuiInputModule,
+                        CuiLabelModule,
+                        CuiSvgModule,
+                        FormsModule,
+                        MarkerSelectComponent,
+                        ReactiveFormsModule,
+                        TranslocoDirective,
+                        NgIf
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [CuiClickOutsideDirective], template: "<ng-container *transloco=\"let t\">\r\n  <ng-container *ngIf=\"isVisible()\">\r\n    <form\r\n        autocomplete=\"off\"\r\n        class=\"wrapper\"\r\n    >\r\n        <cui-form-field>\r\n            <!-- eslint-disable-next-line -->\r\n            <label\r\n                [for]=\"titleId\"\r\n                cuiLabel\r\n                [isRequired]=\"true\"\r\n                (click)=\"onTitleLabelClick(titleElement)\"\r\n            >\r\n                {{ t('TITLE') }}\r\n            </label>\r\n            <!-- TODO: \u0435\u0441\u043B\u0438 \u043D\u0430\u0439\u0434\u0435\u0442\u0441\u044F \u0432\u0430\u0440\u0438\u043A \u0441\u0434\u0435\u043B\u0430\u0442\u044C \u0447\u0435\u0440\u0435\u0437 \u0444\u043E\u0440\u043C\u0443 -->\r\n            <div\r\n                class=\"title\"\r\n                [class.title_invalid]=\"isTitleInvalid()\"\r\n            >\r\n                <div\r\n                    #titleElement\r\n                    class=\"title__text\"\r\n                    contenteditable\r\n                    attr.data-placeholder=\"{{ t('TITLE') }}...\"\r\n                    (paste)=\"onTitlePaste($event)\"\r\n                    (keyup)=\"onTitleChange($event)\"\r\n                    [innerHTML]=\"startTitle\"\r\n                ></div>\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"title__clear\"\r\n                    (click)=\"onClearTitle(titleElement)\"\r\n                >\r\n                    <cui-svg\r\n                        icon=\"cuiIconClear\"\r\n                        color=\"var(--cui-base-300)\"\r\n                        class=\"title__icon\"\r\n                    />\r\n                </button>\r\n            </div>\r\n\r\n            <cui-hint *ngIf=\"isTitleInvalid()\" hintType=\"error\">\r\n                <ng-container *ngIf=\"isTitleEmpty()\">\r\n                  {{ t('FIELD_IS_REQUIRED') }}\r\n                </ng-container>\r\n                <ng-container *ngIf=\"isTitleMoreThanMaxLength()\">\r\n                  {{ t('PLEASE_KEEP_FIELD_UNDER_CHARACTERS') }}\r\n                </ng-container>\r\n            </cui-hint>\r\n        </cui-form-field>\r\n        <cui-form-field>\r\n            <label\r\n                [for]=\"dataId\"\r\n                cuiLabel\r\n                [isRequired]=\"true\"\r\n            >\r\n                {{ isTool ? t('TOOL') : t('URL') }}\r\n            </label>\r\n            <ng-container *ngIf=\"dynamicDataControl\">\r\n              <ng-container *ngIf=\"isTool; else input\">\r\n                <div>\r\n                    <button\r\n                        #target=\"elementRef\"\r\n                        class=\"button tool-button\"\r\n                        cuiButton\r\n                        type=\"button\"\r\n                        cuiElement\r\n                        appearance=\"outlined-gray\"\r\n                        size=\"sm\"\r\n                    >\r\n                        {{ $any(dynamicDataControl.value)?.title || t('SELECT_TOOL') }}\r\n                    </button>\r\n                </div>\r\n                <cc-marker-select\r\n                    [formControl]=\"dynamicDataControl\"\r\n                    [target]=\"target.nativeElement\"\r\n                />\r\n              </ng-container>\r\n              <ng-template #input>\r\n                <cui-input-text\r\n                    [cuiTextFieldId]=\"dataId\"\r\n                    [formControl]=\"dynamicDataControl\"\r\n                    autocomplete=\"off\"\r\n                    [cuiTextFieldIsError]=\"isDynamicDataErrorShown\"\r\n                    cuiTextFieldPlaceholder=\"{{ t('LINK') }}...\"\r\n                />\r\n                <cui-hint *ngIf=\"isDynamicDataErrorShown\" hintType=\"error\">\r\n                  <ng-container *ngIf=\"dynamicDataControl.errors?.['required']\">\r\n                    {{ t('FIELD_IS_REQUIRED') }}\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"dynamicDataControl.errors?.['url']\">\r\n                    {{ t('INVALID_URL') }}\r\n                  </ng-container>\r\n                </cui-hint>\r\n              </ng-template>\r\n            </ng-container>\r\n        </cui-form-field>\r\n        <div class=\"buttons\">\r\n            <button\r\n                cuiButton\r\n                type=\"button\"\r\n                appearance=\"outlined-gray\"\r\n                size=\"sm\"\r\n                (click)=\"onCancel()\"\r\n            >\r\n                {{ t('CANCEL') }}\r\n            </button>\r\n            <button\r\n                cuiButton\r\n                type=\"submit\"\r\n                appearance=\"action\"\r\n                size=\"sm\"\r\n                [disabled]=\"isFormInvalid\"\r\n                (click)=\"onSave()\"\r\n            >\r\n                {{ t('SAVE') }}\r\n            </button>\r\n        </div>\r\n    </form>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n", styles: [":host{position:absolute;z-index:1;left:0}:host._fixed{position:fixed}:host._hidden{position:fixed;visibility:hidden}:host ::ng-deep .tool-button{width:100%}:host ::ng-deep .tool-button>span{justify-content:flex-start!important}.wrapper{padding:11px;box-shadow:0 2px 4px -1px #0000000f,0 4px 6px -1px #0000001a;display:flex;flex-direction:column;gap:16px;border-radius:8px;border:1px solid var(--cui-base-200);max-width:450px;background-color:var(--cui-base-0)}.buttons{padding-top:12px;display:flex;justify-content:flex-end;gap:12px}.title{padding:7px 13px;cursor:text;display:flex;align-items:center;gap:8px;border:1px solid var(--cui-base-200);border-radius:8px;width:426px;background:var(--cui-input);color:var(--cui-base-900)}.title:hover{border-color:var(--cui-base-300)}.title:focus-within{outline:none;box-shadow:0 0 0 2px var(--cui-focus);border-color:var(--cui-info)}.title_invalid,.title_invalid:focus-within{box-shadow:none;border-color:var(--cui-danger)}.title__text{flex-grow:1;text-wrap:nowrap;overflow:hidden}.title__text[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.title__text:focus{outline:none}.title__clear{padding:0;visibility:hidden}.title__icon{width:16px}.title__icon ::ng-deep [stroke]{stroke:var(--cui-base-0)}.title__text:not(:empty)+.title__clear{visibility:visible}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], url: [{
+                type: Input
+            }], tool: [{
+                type: Input
+            }], isGlobal: [{
+                type: Input
+            }], isTool: [{
+                type: Input
+            }], target: [{
+                type: Input
+            }], space: [{
+                type: Input
+            }], saveClicked: [{
+                type: Output
+            }], cancelClicked: [{
+                type: Output
+            }], hide: [{
+                type: HostBinding,
+                args: ['class._hidden']
+            }], fixed: [{
+                type: HostBinding,
+                args: ['class._fixed']
+            }] } });
+
+const MARKER_MODAL_SELECTOR = 'cc-marker-modal';
+
+function createLinkModal(tooltip, link) {
+    const linkModal = document.createElement(MARKER_MODAL_SELECTOR);
+    const button = tooltip.querySelector('.edit');
+    linkModal.url = link.href;
+    linkModal.title = link.innerText;
+    linkModal.target = button;
+    linkModal.space = 15;
+    linkModal.addEventListener('saveClicked', (event) => {
+        const customEvent = event;
+        if (typeof customEvent.detail.data === 'string') {
+            link.setAttribute('href', customEvent.detail.data);
+        }
+        link.innerHTML = customEvent.detail.title;
+        tooltip.remove();
+    });
+    linkModal.addEventListener('cancelClicked', () => {
+        tooltip.remove();
+    });
+    return linkModal;
+}
+
+class EditorToolModalComponent {
+    set marker(value) {
+        this.calculateModalPosition(value);
+    }
+    get _isHidden() {
+        return this.isHidden();
+    }
+    get _isFullscreen() {
+        return this.isFullscreen();
+    }
+    constructor() {
+        this.element = inject(ElementRef).nativeElement;
+        this.window = inject(CUI_WINDOW);
+        this.cuiClickOutsideDirective = inject(CuiClickOutsideDirective, { self: true });
+        this.SPACE_BETWEEN_TARGET_AND_LIST = 10;
+        this.isFullscreen = signal(false);
+        this.isHidden = signal(true);
+        this.closed = new EventEmitter();
+        this.initClickOutsideSubscription();
+    }
+    onCloseModal() {
+        this.closed.emit();
+    }
+    onMaximizeModal() {
+        this.isFullscreen.update((prev) => !prev);
+    }
+    initClickOutsideSubscription() {
+        this.cuiClickOutsideDirective.cuiClickOutside
+            .pipe(skip(1), takeUntilDestroyed())
+            .subscribe(() => this.onCloseModal());
+    }
+    calculateModalPosition(marker) {
+        const { bottom, left } = marker.getBoundingClientRect();
+        setTimeout(() => {
+            const modalWidth = this.element.offsetWidth;
+            this.element.style.top = bottom + this.window.scrollY + this.SPACE_BETWEEN_TARGET_AND_LIST + 'px';
+            this.element.style.left = left + this.window.scrollX + marker.offsetWidth / 2 - modalWidth / 2 + 'px';
+            this.isHidden.set(false);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditorToolModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EditorToolModalComponent, isStandalone: true, selector: "ng-component", inputs: { tool: "tool", marker: "marker" }, outputs: { closed: "closed" }, host: { properties: { "class._hidden": "this._isHidden", "class._fullscreen": "this._isFullscreen" } }, hostDirectives: [{ directive: i1$1.CuiClickOutsideDirective }], ngImport: i0, template: "<div class=\"triangle\"></div>\r\n<div class=\"wrapper\">\r\n    <header class=\"header\">\r\n        <h3 class=\"title\">{{ tool.title }}</h3>\r\n        <div class=\"header__buttons\">\r\n            <!-- TODO: replace icon with 'maximize' -->\r\n            <button\r\n                cuiButton\r\n                type=\"button\"\r\n                appearance=\"ghost\"\r\n                size=\"xxs\"\r\n                icon=\"cuiIconArrowSortSm\"\r\n                (click)=\"onMaximizeModal()\"\r\n            ></button>\r\n            <button\r\n                cuiButton\r\n                type=\"button\"\r\n                appearance=\"ghost\"\r\n                size=\"xxs\"\r\n                icon=\"cuiIconX\"\r\n                (click)=\"onCloseModal()\"\r\n            ></button>\r\n        </div>\r\n    </header>\r\n    <div class=\"content\">\r\n        <div class=\"info\">\r\n            <!-- TODO: \u0431\u0443\u0434\u0435\u0442 \u043A\u0430\u0440\u0442\u0438\u043D\u043A\u0430-->\r\n            <p class=\"info__item\">\r\n                <span class=\"info__field\">\u0422\u0438\u043F:</span>\r\n                <span class=\"info__title\">{{ tool.title }}</span>\r\n            </p>\r\n            <p class=\"info__item\">\r\n                <span class=\"info__field\">\u0421\u0442\u0440\u0430\u043D\u0430 \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0438\u0442\u0435\u043B\u044C:</span>\r\n                <span class=\"info__title\">{{ tool.title }}</span>\r\n            </p>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".content{padding-right:23px;padding-left:23px;padding-bottom:7px;font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font);max-height:415px;overflow-y:auto}:host{position:absolute;z-index:10;left:50%;top:30px;min-height:100px;max-width:450px}:host._fullscreen{position:fixed;top:0!important;left:0!important;max-width:none;height:100vh;width:100%;transform:none}:host._fullscreen .content{max-height:calc(100% - 56px)}:host._hidden{visibility:hidden}.triangle{position:absolute;top:-7px;left:50%;width:14px;height:14px;border-radius:2px;border:1px solid var(--cui-base-200);background:var(--cui-base-0);transform:translate(-50%) rotate(45deg)}.wrapper{position:relative;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-base-0);height:100%}.header{padding:8.2px 15px 8px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px}.title{font-weight:500;font-size:14px;line-height:20px;padding-top:2px;padding-bottom:2px;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--cui-base-900)}.info{display:flex;flex-direction:column;gap:8px}.info__item{display:flex;gap:8px}.info__field{font-weight:400;font-size:16px;line-height:24px;text-wrap:nowrap;color:var(--cui-gray-600)}.info__title{font-weight:500;font-size:16px;line-height:24px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:var(--cui-base-900)}\n"], dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditorToolModalComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CuiButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [CuiClickOutsideDirective], template: "<div class=\"triangle\"></div>\r\n<div class=\"wrapper\">\r\n    <header class=\"header\">\r\n        <h3 class=\"title\">{{ tool.title }}</h3>\r\n        <div class=\"header__buttons\">\r\n            <!-- TODO: replace icon with 'maximize' -->\r\n            <button\r\n                cuiButton\r\n                type=\"button\"\r\n                appearance=\"ghost\"\r\n                size=\"xxs\"\r\n                icon=\"cuiIconArrowSortSm\"\r\n                (click)=\"onMaximizeModal()\"\r\n            ></button>\r\n            <button\r\n                cuiButton\r\n                type=\"button\"\r\n                appearance=\"ghost\"\r\n                size=\"xxs\"\r\n                icon=\"cuiIconX\"\r\n                (click)=\"onCloseModal()\"\r\n            ></button>\r\n        </div>\r\n    </header>\r\n    <div class=\"content\">\r\n        <div class=\"info\">\r\n            <!-- TODO: \u0431\u0443\u0434\u0435\u0442 \u043A\u0430\u0440\u0442\u0438\u043D\u043A\u0430-->\r\n            <p class=\"info__item\">\r\n                <span class=\"info__field\">\u0422\u0438\u043F:</span>\r\n                <span class=\"info__title\">{{ tool.title }}</span>\r\n            </p>\r\n            <p class=\"info__item\">\r\n                <span class=\"info__field\">\u0421\u0442\u0440\u0430\u043D\u0430 \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0438\u0442\u0435\u043B\u044C:</span>\r\n                <span class=\"info__title\">{{ tool.title }}</span>\r\n            </p>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".content{padding-right:23px;padding-left:23px;padding-bottom:7px;font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font);max-height:415px;overflow-y:auto}:host{position:absolute;z-index:10;left:50%;top:30px;min-height:100px;max-width:450px}:host._fullscreen{position:fixed;top:0!important;left:0!important;max-width:none;height:100vh;width:100%;transform:none}:host._fullscreen .content{max-height:calc(100% - 56px)}:host._hidden{visibility:hidden}.triangle{position:absolute;top:-7px;left:50%;width:14px;height:14px;border-radius:2px;border:1px solid var(--cui-base-200);background:var(--cui-base-0);transform:translate(-50%) rotate(45deg)}.wrapper{position:relative;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-base-0);height:100%}.header{padding:8.2px 15px 8px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px}.title{font-weight:500;font-size:14px;line-height:20px;padding-top:2px;padding-bottom:2px;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--cui-base-900)}.info{display:flex;flex-direction:column;gap:8px}.info__item{display:flex;gap:8px}.info__field{font-weight:400;font-size:16px;line-height:24px;text-wrap:nowrap;color:var(--cui-gray-600)}.info__title{font-weight:500;font-size:16px;line-height:24px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:var(--cui-base-900)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tool: [{
+                type: Input,
+                args: [{ required: true }]
+            }], marker: [{
+                type: Input
+            }], closed: [{
+                type: Output
+            }], _isHidden: [{
+                type: HostBinding,
+                args: ['class._hidden']
+            }], _isFullscreen: [{
+                type: HostBinding,
+                args: ['class._fullscreen']
+            }] } });
+
+const EDITOR_TOOL_MODAL_SELECTOR = 'cc-editor-tool-modal';
+
+class EditorTooltipComponent {
+    constructor() {
+        // TODO: Удалить класс
+        this.BUTTONS_OPTIONS = new Map([
+            ['copy', { icon: 'cuiIconCopy', handler: (event) => this.copyClicked.emit(event) }],
+            ['edit', { icon: 'cuiIconEdit', handler: (event) => this.editClicked.emit(event), class: 'edit' }],
+            ['delete', { icon: 'cuiIconTrash', handler: (event) => this.deleteClicked.emit(event) }]
+        ]);
+        this._options = ['edit', 'delete'];
+        this.buttons = this.getButtonsFromOptions(this._options);
+        this.copyClicked = new EventEmitter();
+        this.editClicked = new EventEmitter();
+        this.deleteClicked = new EventEmitter();
+    }
+    set options(value) {
+        this._options = value;
+        this.buttons = this.getButtonsFromOptions(value);
+    }
+    getButtonsFromOptions(options) {
+        return options.map((option) => this.BUTTONS_OPTIONS.get(option));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditorTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EditorTooltipComponent, isStandalone: true, selector: "ng-component", inputs: { title: "title", options: "options" }, outputs: { copyClicked: "copyClicked", editClicked: "editClicked", deleteClicked: "deleteClicked" }, ngImport: i0, template: "<h3 class=\"title\">{{ title }}</h3>\r\n<div class=\"buttons-container\">\r\n    <ng-container *ngFor=\"let button of buttons\">\r\n      <div class=\"divider\"></div>\r\n      <!--        TODO: class \u0434\u043E\u043B\u0436\u0435\u043D \u0431\u044B\u0442\u044C \u0443\u0434\u0430\u043B\u0451\u043D \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043C-->\r\n      <button\r\n          class=\"button\"\r\n          cuiButton\r\n          type=\"button\"\r\n          appearance=\"ghost\"\r\n          size=\"xxs\"\r\n          [icon]=\"button.icon\"\r\n          [class]=\"button.class\"\r\n          (click)=\"button.handler($event)\"\r\n      ></button>\r\n    </ng-container>\r\n</div>\r\n", styles: [":host{padding:4px 6px;box-shadow:0 4px 6px -2px #0000000d,0 10px 15px -3px #0000001a;font-weight:400;font-size:14px;line-height:20px;position:fixed;z-index:12;left:0;top:0;display:flex;align-items:center;gap:12px;border-radius:4px;font-family:var(--cui-main-font);background:var(--cui-gray-800)}.title{font-weight:400;font-size:14px;line-height:20px;max-width:300px;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--cui-gray-0)}.divider{width:1px;height:24px;background:var(--cui-gray-500)}.buttons-container{display:flex;align-items:center;gap:4px}.button{--cui-base-50: rgba(255 255 255 / 10%);--cui-base-500: var(--cui-gray-0)}\n"], dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditorTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CuiButtonModule, NgFor], changeDetection: ChangeDetectionStrategy.OnPush, template: "<h3 class=\"title\">{{ title }}</h3>\r\n<div class=\"buttons-container\">\r\n    <ng-container *ngFor=\"let button of buttons\">\r\n      <div class=\"divider\"></div>\r\n      <!--        TODO: class \u0434\u043E\u043B\u0436\u0435\u043D \u0431\u044B\u0442\u044C \u0443\u0434\u0430\u043B\u0451\u043D \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043C-->\r\n      <button\r\n          class=\"button\"\r\n          cuiButton\r\n          type=\"button\"\r\n          appearance=\"ghost\"\r\n          size=\"xxs\"\r\n          [icon]=\"button.icon\"\r\n          [class]=\"button.class\"\r\n          (click)=\"button.handler($event)\"\r\n      ></button>\r\n    </ng-container>\r\n</div>\r\n", styles: [":host{padding:4px 6px;box-shadow:0 4px 6px -2px #0000000d,0 10px 15px -3px #0000001a;font-weight:400;font-size:14px;line-height:20px;position:fixed;z-index:12;left:0;top:0;display:flex;align-items:center;gap:12px;border-radius:4px;font-family:var(--cui-main-font);background:var(--cui-gray-800)}.title{font-weight:400;font-size:14px;line-height:20px;max-width:300px;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--cui-gray-0)}.divider{width:1px;height:24px;background:var(--cui-gray-500)}.buttons-container{display:flex;align-items:center;gap:4px}.button{--cui-base-50: rgba(255 255 255 / 10%);--cui-base-500: var(--cui-gray-0)}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input,
+                args: [{ required: true }]
+            }], options: [{
+                type: Input
+            }], copyClicked: [{
+                type: Output
+            }], editClicked: [{
+                type: Output
+            }], deleteClicked: [{
+                type: Output
+            }] } });
+
+const EDITOR_TOOLTIP_SELECTOR = 'cc-editor-tooltip';
+
+class EditorToolComponent {
+    constructor() {
+        this.window = inject(CUI_WINDOW);
+        this.document = inject(DOCUMENT);
+        this.readOnly = false;
+        this.isLoading = false;
+        this.fileSelected = new EventEmitter();
+        this.captionChanged = new EventEmitter();
+        this.previousValue = this.caption;
+    }
+    get isCaptionShown() {
+        return !this.readOnly || !!this.caption;
+    }
+    onSelectFile() {
+        this.fileSelected.emit();
+    }
+    onTitleChange(event) {
+        const target = event.currentTarget;
+        if (target.innerHTML === '<br>') {
+            target.innerHTML = '';
+        }
+        const value = target.innerHTML;
+        if (this.previousValue === value) {
+            return;
+        }
+        this.previousValue = value;
+        this.captionChanged.emit(value);
+    }
+    async onTitlePaste(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (!this.document) {
+            return;
+        }
+        const value = await this.window.navigator.clipboard.readText();
+        const target = event.target;
+        this.document.execCommand('insertText', false, value);
+        setTimeout(() => this.captionChanged.emit(target.textContent));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditorToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EditorToolComponent, selector: "ng-component", inputs: { api: "api", preview: "preview", caption: "caption", buttonContent: "buttonContent", readOnly: "readOnly", isLoading: "isLoading" }, outputs: { fileSelected: "fileSelected", captionChanged: "captionChanged" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditorToolComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { api: [{
+                type: Input,
+                args: [{ required: true }]
+            }], preview: [{
+                type: Input,
+                args: [{ required: true }]
+            }], caption: [{
+                type: Input,
+                args: [{ required: true }]
+            }], buttonContent: [{
+                type: Input,
+                args: [{ required: true }]
+            }], readOnly: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], fileSelected: [{
+                type: Output
+            }], captionChanged: [{
+                type: Output
+            }] } });
+
+class FileSizePipe {
+    constructor() {
+        this.SIZES = ['Bytes', 'KB', 'MB', 'GB'];
+        this.BYTES_IN_KILOBYTE = 1024;
+    }
+    transform(bytes) {
+        if (isNaN(bytes) || bytes === 0) {
+            return '0 Bytes';
+        }
+        const index = Math.floor(Math.log(bytes) / Math.log(this.BYTES_IN_KILOBYTE));
+        return `${parseFloat((bytes / Math.pow(this.BYTES_IN_KILOBYTE, index)).toFixed(1))} ${this.SIZES[index]}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: FileSizePipe, isStandalone: true, name: "fileSize" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileSizePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'fileSize',
+                    standalone: true
+                }]
+        }] });
+
+class EditorAttachesToolComponent extends EditorToolComponent {
+    constructor() {
+        super(...arguments);
+        this.Extensions = {
+            doc: '#1483E9',
+            docx: '#1483E9',
+            odt: '#1483E9',
+            pdf: '#DB2F2F',
+            rtf: '#744FDC',
+            tex: '#5a5a5b',
+            txt: '#5a5a5b',
+            pptx: '#E35200',
+            ppt: '#E35200',
+            mp3: '#eab456',
+            mp4: '#f676a6',
+            xls: '#11AE3D',
+            html: '#2988f0',
+            htm: '#2988f0',
+            png: '#AA2284',
+            jpg: '#D13359',
+            jpeg: '#D13359',
+            gif: '#f6af76',
+            zip: '#4f566f',
+            rar: '#4f566f',
+            exe: '#e26f6f',
+            svg: '#bf5252',
+            key: '#00B2FF',
+            sketch: '#FFC700',
+            ai: '#FB601D',
+            psd: '#388ae5',
+            dmg: '#e26f6f',
+            json: '#2988f0',
+            csv: '#11AE3D'
+        };
+    }
+    get color() {
+        return this.Extensions[this.file?.extension];
+    }
+    get isShowLoadButton() {
+        return !this.file && !this.isCaptionShown && !this.isLoading;
+    }
+    onPreventEnter(event) {
+        if (this.checkKey(event)) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    checkKey(event) {
+        return event.key !== 'Enter';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditorAttachesToolComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EditorAttachesToolComponent, isStandalone: true, selector: "ng-component", inputs: { file: "file", title: "title" }, host: { properties: { "class._hidden": "isShowLoadButton" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading; else preloader\">\r\n  <ng-container *transloco=\"let t\">\r\n      <div *ngIf=\"file; else buttonTemplate\" class=\"file\">\r\n          <div\r\n              class=\"icon\"\r\n              [style.backgroundColor]=\"color\"\r\n          >\r\n              {{ file.extension | uppercase }}\r\n          </div>\r\n          <div class=\"info\">\r\n              <div\r\n                  class=\"title\"\r\n                  attr.data-placeholder=\"{{ t('FILE_TITLE') }}...\"\r\n                  [innerHTML]=\"title\"\r\n                  [attr.contenteditable]=\"!readOnly\"\r\n                  (paste)=\"onTitlePaste($event)\"\r\n                  (keydown)=\"onPreventEnter($event)\"\r\n                  (keyup)=\"onTitleChange($event)\"\r\n              ></div>\r\n              <div *ngIf=\"file.size; let size\" class=\"size\">{{ size | fileSize }}</div>\r\n          </div>\r\n          <a\r\n              class=\"download\"\r\n              [href]=\"file.url\"\r\n              target=\"_blank\"\r\n              download\r\n          >\r\n              <cui-svg icon=\"cuiIconChevronDownSm\" />\r\n          </a>\r\n      </div>\r\n      <ng-template #buttonTemplate>\r\n        <button\r\n            [class]=\"['select-btn', this.api.styles.button]\"\r\n            (click)=\"onSelectFile()\"\r\n            type=\"button\"\r\n        >\r\n            <cui-svg icon=\"cuiIconPaperclipSm\" />\r\n            &nbsp;{{ buttonContent }}\r\n        </button>\r\n      </ng-template>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #preloader>\r\n    <div class=\"wrapper\">\r\n        <div class=\"preloader\"></div>\r\n    </div>\r\n</ng-template>\r\n\r\n", styles: [":host{padding-top:6px;padding-bottom:6px;font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font);display:block}:host._hidden{display:none}.file{padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px;border-radius:10px;border:1px solid var(--cui-base-200);background-color:var(--cui-base-10)}.info{display:flex;flex-direction:column;gap:2px;width:85%}.icon{padding:6px 2px;font-weight:500;font-size:12px;line-height:14px;display:flex;align-items:flex-end;border-radius:8px;width:35px;height:35px;color:var(--cui-gray-0)}.title{font-weight:400;font-size:14px;line-height:20px;outline:none}.size{font-weight:400;font-size:13px;line-height:16px;color:var(--cui-base-500)}.download{padding:6px;margin-left:auto;border-radius:8px;color:var(--cui-base-0);background:var(--cui-base-50)}.wrapper{display:flex;flex-direction:column;margin-bottom:10px;border:1px solid var(--cui-base-200);border-radius:10px;min-height:50px;background-color:var(--cui-base-0)}.wrapper._loaded{min-height:auto}.preloader{width:30px;height:30px;border-radius:50%;background-size:cover;margin:auto;position:relative;background-position:center center}@keyframes preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preloader:after{content:\"\";position:absolute;z-index:3;width:30px;height:30px;border-radius:50%;border:2px solid var(--cui-base-200);border-top-color:var(--cui-blue-600);left:50%;top:50%;margin-top:-15px;margin-left:-15px;animation:preloader-spin 2s infinite linear;box-sizing:border-box}.title[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.select-btn{display:flex;align-items:center;justify-content:center;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "pipe", type: FileSizePipe, name: "fileSize" }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditorAttachesToolComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CuiSvgModule, FileSizePipe, FormsModule, UpperCasePipe, NgIf, TranslocoDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class._hidden]': 'isShowLoadButton'
+                    }, template: "<ng-container *ngIf=\"!isLoading; else preloader\">\r\n  <ng-container *transloco=\"let t\">\r\n      <div *ngIf=\"file; else buttonTemplate\" class=\"file\">\r\n          <div\r\n              class=\"icon\"\r\n              [style.backgroundColor]=\"color\"\r\n          >\r\n              {{ file.extension | uppercase }}\r\n          </div>\r\n          <div class=\"info\">\r\n              <div\r\n                  class=\"title\"\r\n                  attr.data-placeholder=\"{{ t('FILE_TITLE') }}...\"\r\n                  [innerHTML]=\"title\"\r\n                  [attr.contenteditable]=\"!readOnly\"\r\n                  (paste)=\"onTitlePaste($event)\"\r\n                  (keydown)=\"onPreventEnter($event)\"\r\n                  (keyup)=\"onTitleChange($event)\"\r\n              ></div>\r\n              <div *ngIf=\"file.size; let size\" class=\"size\">{{ size | fileSize }}</div>\r\n          </div>\r\n          <a\r\n              class=\"download\"\r\n              [href]=\"file.url\"\r\n              target=\"_blank\"\r\n              download\r\n          >\r\n              <cui-svg icon=\"cuiIconChevronDownSm\" />\r\n          </a>\r\n      </div>\r\n      <ng-template #buttonTemplate>\r\n        <button\r\n            [class]=\"['select-btn', this.api.styles.button]\"\r\n            (click)=\"onSelectFile()\"\r\n            type=\"button\"\r\n        >\r\n            <cui-svg icon=\"cuiIconPaperclipSm\" />\r\n            &nbsp;{{ buttonContent }}\r\n        </button>\r\n      </ng-template>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #preloader>\r\n    <div class=\"wrapper\">\r\n        <div class=\"preloader\"></div>\r\n    </div>\r\n</ng-template>\r\n\r\n", styles: [":host{padding-top:6px;padding-bottom:6px;font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font);display:block}:host._hidden{display:none}.file{padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px;border-radius:10px;border:1px solid var(--cui-base-200);background-color:var(--cui-base-10)}.info{display:flex;flex-direction:column;gap:2px;width:85%}.icon{padding:6px 2px;font-weight:500;font-size:12px;line-height:14px;display:flex;align-items:flex-end;border-radius:8px;width:35px;height:35px;color:var(--cui-gray-0)}.title{font-weight:400;font-size:14px;line-height:20px;outline:none}.size{font-weight:400;font-size:13px;line-height:16px;color:var(--cui-base-500)}.download{padding:6px;margin-left:auto;border-radius:8px;color:var(--cui-base-0);background:var(--cui-base-50)}.wrapper{display:flex;flex-direction:column;margin-bottom:10px;border:1px solid var(--cui-base-200);border-radius:10px;min-height:50px;background-color:var(--cui-base-0)}.wrapper._loaded{min-height:auto}.preloader{width:30px;height:30px;border-radius:50%;background-size:cover;margin:auto;position:relative;background-position:center center}@keyframes preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preloader:after{content:\"\";position:absolute;z-index:3;width:30px;height:30px;border-radius:50%;border:2px solid var(--cui-base-200);border-top-color:var(--cui-blue-600);left:50%;top:50%;margin-top:-15px;margin-left:-15px;animation:preloader-spin 2s infinite linear;box-sizing:border-box}.title[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.select-btn{display:flex;align-items:center;justify-content:center;width:100%}\n"] }]
+        }], propDecorators: { file: [{
+                type: Input,
+                args: [{ required: true }]
+            }], title: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+const EDITOR_ATTACHES_TOOL_SELECTOR = 'cc-editor-attaches-tool';
+
+class EditorImageToolComponent extends EditorToolComponent {
+    constructor() {
+        super(...arguments);
+        this.isLoaded = signal(false);
+        this.tunesSignal = signal({});
+    }
+    set tunes(tunes) {
+        this.tunesSignal.set(tunes);
+    }
+    get isShowLoadButton() {
+        return !this.image && !this.isCaptionShown && !this.isLoading;
+    }
+    onPreventEnter(event) {
+        if (this.checkKey(event)) {
+            return;
+        }
+        event.stopPropagation();
+    }
+    checkKey(event) {
+        return (event.key !== 'Backspace' && event.key !== 'Enter') || event.shiftKey;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditorImageToolComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EditorImageToolComponent, isStandalone: true, selector: "ng-component", inputs: { image: "image", tunes: "tunes" }, host: { properties: { "class._hidden": "isShowLoadButton" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading; else preloader\">\r\n  <ng-container *transloco=\"let t\">\r\n        <ng-container *ngIf=\"image; else buttonTemplate\">\r\n          <div\r\n              class=\"wrapper\"\r\n              [ngClass]=\"tunesSignal()\"\r\n              [class._loaded]=\"isLoaded()\"\r\n          >\r\n              <img\r\n                  class=\"image\"\r\n                  [src]=\"image\"\r\n                  alt=\"Image\"\r\n              />\r\n          </div>\r\n          <div\r\n              *ngIf=\"isCaptionShown\"\r\n              class=\"caption cdx-input\"\r\n              [attr.contenteditable]=\"!readOnly\"\r\n              attr.data-placeholder=\"{{ t('CAPTION') }}...\"\r\n              (paste)=\"onTitlePaste($event)\"\r\n              (keydown)=\"onPreventEnter($event)\"\r\n              (keyup)=\"onTitleChange($event)\"\r\n              [innerHTML]=\"caption\"\r\n          ></div>\r\n        </ng-container>\r\n        <ng-template #buttonTemplate>\r\n          <button\r\n              #button\r\n              type=\"button\"\r\n              [class]=\"['select-btn', this.api.styles.button]\"\r\n              (click)=\"onSelectFile()\"\r\n          >\r\n              <svg\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                  width=\"20\"\r\n                  height=\"20\"\r\n                  viewBox=\"0 0 20 20\"\r\n                  fill=\"none\"\r\n              >\r\n                  <path\r\n                      d=\"M12.5013 4.1665H7.5013C5.66035 4.1665 4.16797 5.65889 4.16797 7.49984V12.4998C4.16797 14.3408 5.66035 15.8332 7.5013 15.8332H12.5013C14.3423 15.8332 15.8346 14.3408 15.8346 12.4998V7.49984C15.8346 5.65889 14.3423 4.1665 12.5013 4.1665Z\"\r\n                      stroke=\"#121315\"\r\n                      stroke-width=\"1.66667\"\r\n                  />\r\n                  <path\r\n                      d=\"M4.28125 12.7665L7.24033 9.63825C7.52263 9.33617 7.90546 9.1665 8.30463 9.1665C8.70377 9.1665 9.0866 9.33617 9.36893 9.63825L12.8208 13.3332M11.3154 11.7218L12.5092 10.444C12.7914 10.1419 13.1743 9.97217 13.5734 9.97217C13.9726 9.97217 14.3554 10.1419 14.6378 10.444L15.699 11.636\"\r\n                      stroke=\"#121315\"\r\n                      stroke-width=\"1.66667\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                  />\r\n                  <path\r\n                      d=\"M11.4805 7.77783H11.4879\"\r\n                      stroke=\"#121315\"\r\n                      stroke-width=\"1.66667\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                  />\r\n              </svg>\r\n              &nbsp;{{ buttonContent }}\r\n          </button>\r\n        </ng-template>\r\n  </ng-container>\r\n</ng-container>\r\n<ng-template #preloader>\r\n  <div class=\"wrapper\">\r\n      <div class=\"preloader\">\r\n          <img\r\n              *ngIf=\"preview\"\r\n              class=\"preloader__image\"\r\n              [src]=\"preview\"\r\n              alt=\"Preloader\"\r\n          />\r\n      </div>\r\n  </div>\r\n</ng-template>\r\n\r\n", styles: [":host{padding-top:6px;padding-bottom:6px;font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font);display:block}:host ::ng-deep .cdx-input{border:1px solid var(--cui-base-200);background:transparent;box-shadow:none}:host ::ng-deep .play{margin:auto}:host ::ng-deep .play path{fill:var(--cui-base-0);stroke:var(--cui-base-300)}:host._hidden{display:none}.image{display:block;max-width:100%;width:fit-content;height:250px}.wrapper{display:flex;flex-direction:column;margin-bottom:10px;border:1px solid var(--cui-base-200);border-radius:3px;min-height:200px;background-color:var(--cui-base-0)}.wrapper._loaded{min-height:auto}.wrapper.stretched .image{width:100%;height:auto}.wrapper.center .image{margin:auto}.preloader{width:50px;height:50px;border-radius:50%;background-size:cover;margin:auto;position:relative;background-color:var(--cui-base-200);background-position:center center}@keyframes preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preloader__image{width:50px;height:50px;border-radius:50%}.preloader:after{content:\"\";position:absolute;z-index:3;width:60px;height:60px;border-radius:50%;border:2px solid var(--cui-base-200);border-top-color:var(--cui-blue-600);left:50%;top:50%;margin-top:-30px;margin-left:-30px;animation:preloader-spin 2s infinite linear;box-sizing:border-box}.caption[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.select-btn{display:flex;align-items:center;justify-content:center;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CuiSvgModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditorImageToolComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CuiSvgModule, FormsModule, NgClass, NgIf, TranslocoDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class._hidden]': 'isShowLoadButton'
+                    }, template: "<ng-container *ngIf=\"!isLoading; else preloader\">\r\n  <ng-container *transloco=\"let t\">\r\n        <ng-container *ngIf=\"image; else buttonTemplate\">\r\n          <div\r\n              class=\"wrapper\"\r\n              [ngClass]=\"tunesSignal()\"\r\n              [class._loaded]=\"isLoaded()\"\r\n          >\r\n              <img\r\n                  class=\"image\"\r\n                  [src]=\"image\"\r\n                  alt=\"Image\"\r\n              />\r\n          </div>\r\n          <div\r\n              *ngIf=\"isCaptionShown\"\r\n              class=\"caption cdx-input\"\r\n              [attr.contenteditable]=\"!readOnly\"\r\n              attr.data-placeholder=\"{{ t('CAPTION') }}...\"\r\n              (paste)=\"onTitlePaste($event)\"\r\n              (keydown)=\"onPreventEnter($event)\"\r\n              (keyup)=\"onTitleChange($event)\"\r\n              [innerHTML]=\"caption\"\r\n          ></div>\r\n        </ng-container>\r\n        <ng-template #buttonTemplate>\r\n          <button\r\n              #button\r\n              type=\"button\"\r\n              [class]=\"['select-btn', this.api.styles.button]\"\r\n              (click)=\"onSelectFile()\"\r\n          >\r\n              <svg\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                  width=\"20\"\r\n                  height=\"20\"\r\n                  viewBox=\"0 0 20 20\"\r\n                  fill=\"none\"\r\n              >\r\n                  <path\r\n                      d=\"M12.5013 4.1665H7.5013C5.66035 4.1665 4.16797 5.65889 4.16797 7.49984V12.4998C4.16797 14.3408 5.66035 15.8332 7.5013 15.8332H12.5013C14.3423 15.8332 15.8346 14.3408 15.8346 12.4998V7.49984C15.8346 5.65889 14.3423 4.1665 12.5013 4.1665Z\"\r\n                      stroke=\"#121315\"\r\n                      stroke-width=\"1.66667\"\r\n                  />\r\n                  <path\r\n                      d=\"M4.28125 12.7665L7.24033 9.63825C7.52263 9.33617 7.90546 9.1665 8.30463 9.1665C8.70377 9.1665 9.0866 9.33617 9.36893 9.63825L12.8208 13.3332M11.3154 11.7218L12.5092 10.444C12.7914 10.1419 13.1743 9.97217 13.5734 9.97217C13.9726 9.97217 14.3554 10.1419 14.6378 10.444L15.699 11.636\"\r\n                      stroke=\"#121315\"\r\n                      stroke-width=\"1.66667\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                  />\r\n                  <path\r\n                      d=\"M11.4805 7.77783H11.4879\"\r\n                      stroke=\"#121315\"\r\n                      stroke-width=\"1.66667\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                  />\r\n              </svg>\r\n              &nbsp;{{ buttonContent }}\r\n          </button>\r\n        </ng-template>\r\n  </ng-container>\r\n</ng-container>\r\n<ng-template #preloader>\r\n  <div class=\"wrapper\">\r\n      <div class=\"preloader\">\r\n          <img\r\n              *ngIf=\"preview\"\r\n              class=\"preloader__image\"\r\n              [src]=\"preview\"\r\n              alt=\"Preloader\"\r\n          />\r\n      </div>\r\n  </div>\r\n</ng-template>\r\n\r\n", styles: [":host{padding-top:6px;padding-bottom:6px;font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font);display:block}:host ::ng-deep .cdx-input{border:1px solid var(--cui-base-200);background:transparent;box-shadow:none}:host ::ng-deep .play{margin:auto}:host ::ng-deep .play path{fill:var(--cui-base-0);stroke:var(--cui-base-300)}:host._hidden{display:none}.image{display:block;max-width:100%;width:fit-content;height:250px}.wrapper{display:flex;flex-direction:column;margin-bottom:10px;border:1px solid var(--cui-base-200);border-radius:3px;min-height:200px;background-color:var(--cui-base-0)}.wrapper._loaded{min-height:auto}.wrapper.stretched .image{width:100%;height:auto}.wrapper.center .image{margin:auto}.preloader{width:50px;height:50px;border-radius:50%;background-size:cover;margin:auto;position:relative;background-color:var(--cui-base-200);background-position:center center}@keyframes preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preloader__image{width:50px;height:50px;border-radius:50%}.preloader:after{content:\"\";position:absolute;z-index:3;width:60px;height:60px;border-radius:50%;border:2px solid var(--cui-base-200);border-top-color:var(--cui-blue-600);left:50%;top:50%;margin-top:-30px;margin-left:-30px;animation:preloader-spin 2s infinite linear;box-sizing:border-box}.caption[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.select-btn{display:flex;align-items:center;justify-content:center;width:100%}\n"] }]
+        }], propDecorators: { image: [{
+                type: Input,
+                args: [{ required: true }]
+            }], tunes: [{
+                type: Input
+            }] } });
+
+const EDITOR_IMAGE_TOOL_SELECTOR = 'cc-editor-image-tool';
+
+class EditorVideoToolComponent extends EditorToolComponent {
+    constructor() {
+        super(...arguments);
+        this.isLoaded = signal(false);
+    }
+    get isShowLoadButton() {
+        return !this.video && !this.isCaptionShown && !this.isLoading;
+    }
+    onPlay() {
+        this.isLoaded.set(true);
+    }
+    onPreventEnter(event) {
+        if (this.checkKey(event)) {
+            return;
+        }
+        event.stopPropagation();
+    }
+    checkKey(event) {
+        return (event.key !== 'Backspace' && event.key !== 'Enter') || event.shiftKey;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditorVideoToolComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EditorVideoToolComponent, isStandalone: true, selector: "ng-component", inputs: { video: "video" }, host: { properties: { "class._hidden": "isShowLoadButton" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <ng-container *ngIf=\"!isLoading; else preloader\">\r\n    <ng-container *ngIf=\"video; else buttonTemplate\">\r\n      <div\r\n          class=\"wrapper\"\r\n          [class._loaded]=\"isLoaded()\"\r\n      >\r\n        <video\r\n            *ngIf=\"isLoaded(); else playButtonTemplate\"\r\n            class=\"video\"\r\n            [src]=\"video\"\r\n            controls\r\n            autoplay\r\n        ></video>\r\n\r\n        <ng-template #playButtonTemplate>\r\n          <button\r\n              type=\"button\"\r\n              class=\"play\"\r\n              (click)=\"onPlay()\"\r\n          >\r\n            <cui-svg\r\n                class=\"play\"\r\n                icon=\"cuiIconPlayCircleSm\"\r\n                [height]=\"72\"\r\n                [width]=\"72\"\r\n                [strokeWidth]=\"0.5\"\r\n            />\r\n          </button>\r\n        </ng-template>\r\n      </div>\r\n\r\n      <div\r\n          *ngIf=\"isCaptionShown\"\r\n          class=\"caption cdx-input\"\r\n          [attr.contenteditable]=\"!readOnly\"\r\n          attr.data-placeholder=\"{{ t('CAPTION') }}...\"\r\n          (paste)=\"onTitlePaste($event)\"\r\n          (keydown)=\"onPreventEnter($event)\"\r\n          (keyup)=\"onTitleChange($event)\"\r\n          [innerHTML]=\"caption\"\r\n      ></div>\r\n    </ng-container>\r\n\r\n    <ng-template #buttonTemplate>\r\n      <button\r\n          type=\"button\"\r\n          [class]=\"['select-btn', this.api.styles.button]\"\r\n          (click)=\"onSelectFile()\"\r\n      >\r\n          <cui-svg icon=\"cuiIconPlayCircle\" />\r\n          &nbsp;{{ buttonContent }}\r\n      </button>\r\n    </ng-template>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n\r\n<ng-template #preloader>\r\n  <div class=\"wrapper\">\r\n    <div class=\"preloader\">\r\n      <img\r\n          *ngIf=\"preview\"\r\n          class=\"preloader__image\"\r\n          [src]=\"preview\"\r\n          alt=\"Preloader\"\r\n      />\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [":host{font-weight:400;font-size:14px;line-height:20px;padding-top:6px;padding-bottom:6px;font-family:var(--cui-main-font);display:block}:host ::ng-deep .cdx-input{border:1px solid var(--cui-base-200);background:transparent;box-shadow:none}:host ::ng-deep .play{margin:auto}:host ::ng-deep .play path{fill:var(--cui-base-0);stroke:var(--cui-base-300)}:host._hidden{display:none}.wrapper{display:flex;flex-direction:column;margin-bottom:10px;border:1px solid var(--cui-base-200);border-radius:3px;min-height:200px;background-color:var(--cui-base-0)}.wrapper._loaded{min-height:auto}.video{display:block;max-width:100%}.preloader{width:50px;height:50px;border-radius:50%;background-size:cover;margin:auto;position:relative;background-color:var(--cui-base-200);background-position:center center}@keyframes preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preloader__image{width:50px;height:50px;border-radius:50%}.preloader:after{content:\"\";position:absolute;z-index:3;width:60px;height:60px;border-radius:50%;border:2px solid var(--cui-base-200);border-top-color:var(--cui-blue-600);left:50%;top:50%;margin-top:-30px;margin-left:-30px;animation:preloader-spin 2s infinite linear;box-sizing:border-box}.caption[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.select-btn{display:flex;align-items:center;justify-content:center;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditorVideoToolComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CuiSvgModule, FormsModule, NgIf, TranslocoDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class._hidden]': 'isShowLoadButton'
+                    }, template: "<ng-container *transloco=\"let t\">\r\n  <ng-container *ngIf=\"!isLoading; else preloader\">\r\n    <ng-container *ngIf=\"video; else buttonTemplate\">\r\n      <div\r\n          class=\"wrapper\"\r\n          [class._loaded]=\"isLoaded()\"\r\n      >\r\n        <video\r\n            *ngIf=\"isLoaded(); else playButtonTemplate\"\r\n            class=\"video\"\r\n            [src]=\"video\"\r\n            controls\r\n            autoplay\r\n        ></video>\r\n\r\n        <ng-template #playButtonTemplate>\r\n          <button\r\n              type=\"button\"\r\n              class=\"play\"\r\n              (click)=\"onPlay()\"\r\n          >\r\n            <cui-svg\r\n                class=\"play\"\r\n                icon=\"cuiIconPlayCircleSm\"\r\n                [height]=\"72\"\r\n                [width]=\"72\"\r\n                [strokeWidth]=\"0.5\"\r\n            />\r\n          </button>\r\n        </ng-template>\r\n      </div>\r\n\r\n      <div\r\n          *ngIf=\"isCaptionShown\"\r\n          class=\"caption cdx-input\"\r\n          [attr.contenteditable]=\"!readOnly\"\r\n          attr.data-placeholder=\"{{ t('CAPTION') }}...\"\r\n          (paste)=\"onTitlePaste($event)\"\r\n          (keydown)=\"onPreventEnter($event)\"\r\n          (keyup)=\"onTitleChange($event)\"\r\n          [innerHTML]=\"caption\"\r\n      ></div>\r\n    </ng-container>\r\n\r\n    <ng-template #buttonTemplate>\r\n      <button\r\n          type=\"button\"\r\n          [class]=\"['select-btn', this.api.styles.button]\"\r\n          (click)=\"onSelectFile()\"\r\n      >\r\n          <cui-svg icon=\"cuiIconPlayCircle\" />\r\n          &nbsp;{{ buttonContent }}\r\n      </button>\r\n    </ng-template>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n\r\n<ng-template #preloader>\r\n  <div class=\"wrapper\">\r\n    <div class=\"preloader\">\r\n      <img\r\n          *ngIf=\"preview\"\r\n          class=\"preloader__image\"\r\n          [src]=\"preview\"\r\n          alt=\"Preloader\"\r\n      />\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [":host{font-weight:400;font-size:14px;line-height:20px;padding-top:6px;padding-bottom:6px;font-family:var(--cui-main-font);display:block}:host ::ng-deep .cdx-input{border:1px solid var(--cui-base-200);background:transparent;box-shadow:none}:host ::ng-deep .play{margin:auto}:host ::ng-deep .play path{fill:var(--cui-base-0);stroke:var(--cui-base-300)}:host._hidden{display:none}.wrapper{display:flex;flex-direction:column;margin-bottom:10px;border:1px solid var(--cui-base-200);border-radius:3px;min-height:200px;background-color:var(--cui-base-0)}.wrapper._loaded{min-height:auto}.video{display:block;max-width:100%}.preloader{width:50px;height:50px;border-radius:50%;background-size:cover;margin:auto;position:relative;background-color:var(--cui-base-200);background-position:center center}@keyframes preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preloader__image{width:50px;height:50px;border-radius:50%}.preloader:after{content:\"\";position:absolute;z-index:3;width:60px;height:60px;border-radius:50%;border:2px solid var(--cui-base-200);border-top-color:var(--cui-blue-600);left:50%;top:50%;margin-top:-30px;margin-left:-30px;animation:preloader-spin 2s infinite linear;box-sizing:border-box}.caption[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.select-btn{display:flex;align-items:center;justify-content:center;width:100%}\n"] }]
+        }], propDecorators: { video: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+const EDITOR_VIDEO_TOOL_SELECTOR = 'cc-editor-video-tool';
+
+function createSelect(marker, tooltip) {
+    const select = document.createElement(MARKER_SELECT_SELECTOR);
+    const button = tooltip.querySelector('.edit');
+    select.space = 8;
+    select.target = button;
+    select.addEventListener('toolClick', (event) => onToolClick(marker, tooltip, event));
+    return select;
+}
+function createToolModal(marker, tooltip) {
+    const toolModal = document.createElement(MARKER_MODAL_SELECTOR);
+    const button = tooltip.querySelector('.edit');
+    const toolId = marker.dataset['id'];
+    const toolType = marker.dataset['type'];
+    toolModal.title = marker.innerText;
+    toolModal.target = button;
+    toolModal.isTool = true;
+    toolModal.tool = {
+        id: toolId,
+        type: toolType
+    };
+    toolModal.space = 8;
+    toolModal.addEventListener('saveClicked', (event) => {
+        const customEvent = event;
+        const data = customEvent.detail.data;
+        if (data && typeof data !== 'string') {
+            marker.setAttribute('data-id', data.id);
+            marker.setAttribute('data-type', data.type);
+        }
+        marker.innerHTML = customEvent.detail.title;
+        tooltip.remove();
+    });
+    toolModal.addEventListener('cancelClicked', () => {
+        tooltip.remove();
+    });
+    return toolModal;
+}
+function onToolClick(marker, tooltip, event) {
+    event.stopPropagation();
+    const customEvent = event;
+    const tool = customEvent.detail;
+    marker.dataset['id'] = tool.id;
+    tooltip.remove();
+}
+
+function removeElementTagWrapper(element) {
+    const parent = element.parentElement;
+    const innerElementNodes = element.childNodes;
+    let node;
+    while (innerElementNodes.length) {
+        node = innerElementNodes.item(0);
+        parent?.insertBefore(node, element);
+    }
+    element.remove();
+}
+
+const tooltipMap = {
+    MARK: createMarkerTooltip,
+    A: createLinkTooltip
+};
+function createMarkerTooltip(marker) {
+    const tooltip = createTooltip(marker, marker.innerText);
+    setTimeout(() => {
+        const select = createToolModal(marker, tooltip);
+        tooltip.append(select);
+    });
+    return tooltip;
+}
+function createLinkTooltip(link) {
+    const linkElement = link;
+    const options = ['copy', 'edit', 'delete'];
+    const linkUrl = linkElement.href;
+    const tooltip = createTooltip(linkElement, linkUrl, options);
+    tooltip.addEventListener('copyClicked', () => {
+        window?.navigator.clipboard.writeText(linkUrl);
+    });
+    setTimeout(() => {
+        const linkModal = createLinkModal(tooltip, linkElement);
+        tooltip.append(linkModal);
+    });
+    return tooltip;
+}
+function createTooltip(element, title, options) {
+    const tooltip = document.createElement(EDITOR_TOOLTIP_SELECTOR);
+    tooltip.title = title;
+    if (options) {
+        tooltip.options = options;
+    }
+    tooltip.addEventListener('deleteClicked', (event) => {
+        event.stopPropagation();
+        removeElementTagWrapper(element);
+        tooltip.remove();
+    });
+    return tooltip;
+}
+
+var CuiFileUploaderStatus;
+(function (CuiFileUploaderStatus) {
+    CuiFileUploaderStatus["Loading"] = "loading";
+    CuiFileUploaderStatus["Completed"] = "completed";
+})(CuiFileUploaderStatus || (CuiFileUploaderStatus = {}));
+class CuiFileUploader {
+    constructor(config, onUpload, onError) {
+        this.REQUEST_METHOD = 'POST';
+        this.selectFile = ({ fileSelected }) => {
+            const input = document.createElement('input');
+            const types = this.config?.types || '*';
+            input.type = 'file';
+            input.accept = types;
+            input.onchange = () => {
+                const files = input.files;
+                if (!files?.length) {
+                    return;
+                }
+                this.getFile(files, fileSelected);
+            };
+            input.click();
+        };
+        this.config = config;
+        this.onUpload = onUpload;
+        this.onError = onError;
+    }
+    getFile(files, fileSelected) {
+        const file = files.item(0);
+        if (!file) {
+            return;
+        }
+        fileSelected(file);
+    }
+    uploadFile(file) {
+        const formData = new FormData();
+        const formField = this.config.field || 'file';
+        formData.append(formField, file);
+        if (!this.config.endpoint) {
+            return;
+        }
+        this.config.load(CuiFileUploaderStatus.Loading);
+        const upload = fetch(this.config.endpoint, {
+            headers: this.config.additionalRequestHeaders,
+            method: this.REQUEST_METHOD,
+            body: formData
+        });
+        upload
+            .then((response) => response.json())
+            .then((response) => this.onUpload(response, file))
+            .catch(() => this.onError())
+            .finally(() => this.config.load(CuiFileUploaderStatus.Completed));
+    }
+    uploadByUrl(url) {
+        this.onUpload({ success: 1, file: { url } });
+    }
+}
+
+function recalculateIndexes(blocksApi) {
+    if (!blocksApi) {
+        return;
+    }
+    const blocks = blocksApi.getBlocksCount();
+    let index = 0;
+    for (let i = 0; i < blocks; i++) {
+        const block = blocksApi.getBlockByIndex(i);
+        if (!block) {
+            continue;
+        }
+        const blockElement = block?.holder;
+        const subblocks = blockElement.querySelectorAll('.' + COMBINED_TEXT_BLOCK_PART);
+        blockElement.setAttribute('data-index', String(index));
+        if (!subblocks.length) {
+            index++;
+            continue;
+        }
+        subblocks.forEach((subblock) => {
+            const subBlockIndex = subblock.getAttribute('data-index');
+            const indexAsNumber = subBlockIndex ? Number(subBlockIndex) : null;
+            if (indexAsNumber !== null && indexAsNumber === index) {
+                index++;
+                return;
+            }
+            subblock.setAttribute('data-index', String(index));
+            index++;
+        });
+    }
+}
+
+const unsplittableTags = { mark: true, a: true };
+const PART_LENGTH_MEASUREMENT_ERROR = 20;
+const BR_TAG = '<br>';
+function splitHTML(input, maxLength = SPLIT_LENGTH) {
+    const parts = [];
+    const tagNames = [];
+    const tags = [];
+    let currentPart = '';
+    let index = 0;
+    // remove specsymbols
+    input = input.replaceAll('&nbsp;', ' ');
+    while (input.length > index) {
+        while (currentPart.length < maxLength && input.length > index) {
+            if (checkIsBrTag(input, index)) {
+                // when br tag
+                if (currentPart.length + BR_TAG.length > maxLength) {
+                    parts.push(currentPart);
+                    currentPart = BR_TAG;
+                }
+                else {
+                    currentPart += BR_TAG;
+                }
+                index += BR_TAG.length - 1;
+            }
+            else if (checkIsEndOfTag(input, index)) {
+                // when tag ends
+                const tagName = getEndTag(tagNames.pop());
+                tags.pop();
+                if ((currentPart + tagName).length > maxLength) {
+                    parts.push(currentPart);
+                    currentPart = '';
+                }
+                else {
+                    currentPart += tagName;
+                }
+                index += tagName.length - 1;
+            }
+            else if (input[index] === '<') {
+                // when tag starts
+                const { tag, tagName, newIndex } = getTagAndTagName(input, index);
+                index = newIndex;
+                if (checkIsLengthEnough(currentPart, tag)) {
+                    currentPart = switchPartWhenUnclosedTagsExist(tagNames, tags, parts, currentPart);
+                }
+                currentPart += tag;
+                if (!unsplittableTags[tagName]) {
+                    tagNames.push(tagName);
+                    tags.push(tag);
+                }
+            }
+            else {
+                // other symbols
+                currentPart += input[index];
+            }
+            index += 1;
+        }
+        currentPart = switchPartWhenUnclosedTagsExist(tagNames, tags, parts, currentPart);
+    }
+    return parts;
+}
+function switchPartWhenUnclosedTagsExist(tagNames, tags, parts, currentPart) {
+    if (!tagNames.length) {
+        parts.push(currentPart);
+        return '';
+    }
+    let closeAllTags = '';
+    for (let i = tagNames.length - 1; i >= 0; i -= 1) {
+        closeAllTags += getEndTag(tagNames[i]);
+    }
+    currentPart += closeAllTags;
+    parts.push(currentPart);
+    currentPart = tags.reduce((openTags, tag) => (openTags += tag), '');
+    return currentPart;
+}
+function getTagAndTagName(input, index) {
+    let tag = '';
+    let tagName = '';
+    tag += input[index];
+    index += 1;
+    while (input[index] !== ' ' && input[index] !== '>') {
+        tag += input[index];
+        tagName += input[index];
+        index += 1;
+    }
+    while (input[index] !== '>') {
+        tag += input[index];
+        index += 1;
+    }
+    tag += input[index];
+    [tag, index] = getFullTag(input, index, tag, tagName);
+    return { tag, tagName, newIndex: index };
+}
+function getFullTag(input, index, tag, tagName) {
+    if (!unsplittableTags[tagName]) {
+        return [tag, index];
+    }
+    let fullTag = tag;
+    index += 1;
+    while (!checkIsEndOfTag(input, index)) {
+        fullTag += input[index];
+        index += 1;
+    }
+    const endTag = getEndTag(tagName);
+    index += endTag.length - 1;
+    return [fullTag + endTag, index];
+}
+function checkIsLengthEnough(currentPart, tag) {
+    return currentPart.length + tag.length + PART_LENGTH_MEASUREMENT_ERROR > SPLIT_LENGTH;
+}
+function getEndTag(tagName) {
+    return '</' + tagName + '>';
+}
+function checkIsEndOfTag(input, index) {
+    return input[index] === '<' && input[index + 1] === '/';
+}
+function checkIsBrTag(input, index) {
+    let tag = '';
+    if (input[index] !== '<') {
+        return false;
+    }
+    while (input[index] && input[index] !== '>') {
+        tag += input[index];
+        index += 1;
+    }
+    return tag + '>' === BR_TAG;
+}
+
+class CuiImageTool {
+    get Tunes() {
+        return [
+            {
+                name: 'stretched',
+                title: 'Stretch image',
+                toggle: true
+            },
+            {
+                name: 'center',
+                title: 'Center image',
+                toggle: true
+            }
+        ];
+    }
+    static get isReadOnlySupported() {
+        return true;
+    }
+    static get toolbox() {
+        return {
+            /* eslint-disable */
+            icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                <path d="M12.5013 4.1665H7.5013C5.66035 4.1665 4.16797 5.65889 4.16797 7.49984V12.4998C4.16797 14.3408 5.66035 15.8332 7.5013 15.8332H12.5013C14.3423 15.8332 15.8346 14.3408 15.8346 12.4998V7.49984C15.8346 5.65889 14.3423 4.1665 12.5013 4.1665Z" stroke="#121315" stroke-width="1.66667"/>
+                <path d="M4.28125 12.7665L7.24033 9.63825C7.52263 9.33617 7.90546 9.1665 8.30463 9.1665C8.70377 9.1665 9.0866 9.33617 9.36893 9.63825L12.8208 13.3332M11.3154 11.7218L12.5092 10.444C12.7914 10.1419 13.1743 9.97217 13.5734 9.97217C13.9726 9.97217 14.3554 10.1419 14.6378 10.444L15.699 11.636" stroke="#121315" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M11.4805 7.77783H11.4879" stroke="#121315" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>`,
+            /* eslint-enable */
+            title: 'Image'
+        };
+    }
+    static get pasteConfig() {
+        return {
+            tags: [
+                {
+                    img: { src: true }
+                }
+            ],
+            files: {
+                mimeTypes: ['image/*']
+            }
+        };
+    }
+    constructor(options) {
+        this.selectedFile = null;
+        this.onSelectFile = () => {
+            return this.uploader.selectFile({
+                fileSelected: (file) => {
+                    const url = URL.createObjectURL(file);
+                    this.imageTool.preview = url;
+                    this.imageTool.isLoading = true;
+                    this.selectedFile = file;
+                    this.uploader.uploadFile(file);
+                }
+            });
+        };
+        const { api, readOnly, config, data, block } = options;
+        this.blockApi = block;
+        this.api = api;
+        this.readOnly = readOnly;
+        this.config = {
+            load: config?.load ?? (() => { }),
+            field: config?.field ?? 'image',
+            types: config?.types ?? 'image/*',
+            endpoint: config?.endpoint ?? '',
+            buttonContent: config?.buttonContent ?? this.api.i18n.t('Select an Image'),
+            additionalRequestHeaders: config?.additionalRequestHeaders || {},
+        };
+        this.uploader = new CuiFileUploader(this.config, this.onUpload.bind(this), this.uploadingFailed.bind(this));
+        this.data = data;
+        this.data.tunes = this.data.tunes || {};
+    }
+    async onPaste(event) {
+        const actions = {
+            tag: this.pasteByTag.bind(this),
+            file: this.pasteByFile.bind(this)
+        };
+        const key = event.type;
+        this.imageTool.isLoading = true;
+        actions[key](event);
+    }
+    pasteByFile(event) {
+        const file = event.detail.file;
+        this.selectedFile = file;
+        this.uploader.uploadFile(file);
+    }
+    pasteByTag(event) {
+        const file = event.detail.data.src;
+        this.selectedFile = file;
+        this.uploader.uploadByUrl(file);
+    }
+    appendCallback() {
+        this.onSelectFile();
+    }
+    render() {
+        this.imageTool = document.createElement(EDITOR_IMAGE_TOOL_SELECTOR);
+        this.imageTool.api = this.api;
+        this.imageTool.image = this.data.file?.url || '';
+        this.imageTool.caption = this.data.caption || '';
+        this.imageTool.tunes = this.data.tunes;
+        this.imageTool.readOnly = this.readOnly;
+        this.imageTool.buttonContent = this.config.buttonContent;
+        this.imageTool.addEventListener('fileSelected', this.onSelectFile);
+        this.imageTool.addEventListener('captionChanged', this.changeCaption.bind(this));
+        return this.imageTool;
+    }
+    renderSettings() {
+        return this.Tunes.map((tune) => ({
+            icon: tune.icon,
+            label: this.api.i18n.t(tune.title),
+            name: tune.name,
+            toggle: tune.toggle,
+            isActive: this.data.tunes[tune.name],
+            onActivate: () => this.tuneToggled(tune.name)
+        }));
+    }
+    save() {
+        return this.data;
+    }
+    removed() {
+        this.imageTool.removeEventListener('fileSelected', this.onSelectFile);
+        this.imageTool.removeEventListener('captionChanged', this.changeCaption);
+    }
+    changeCaption(event) {
+        const customEvent = event;
+        const value = customEvent.detail;
+        this.data.caption = value;
+        this.blockApi?.dispatchChange();
+    }
+    set image(file) {
+        this.data.file = file || {};
+        if (file && file.url) {
+            this.imageTool.image = file.url;
+        }
+    }
+    onUpload(response) {
+        if (!response.success || !response.file || !this.selectedFile) {
+            this.uploadingFailed();
+            return;
+        }
+        const url = this.selectedFile instanceof File ? window.URL.createObjectURL(this.selectedFile) : this.selectedFile;
+        this.data.file = response.file;
+        this.imageTool.image = url;
+        this.imageTool.isLoading = false;
+    }
+    uploadingFailed() {
+        this.imageTool.image = '';
+        this.imageTool.isLoading = false;
+    }
+    tuneToggled(tuneName) {
+        const value = !(this.data.tunes[tuneName] || false);
+        this.data.tunes[tuneName] = value;
+        this.imageTool.tunes = { ...this.data.tunes };
+    }
+}
+
+class CuiVideoTool {
+    static get isReadOnlySupported() {
+        return true;
+    }
+    static get toolbox() {
+        return {
+            icon: CUI_ICONS.cuiIconPlayCircle,
+            title: 'Video'
+        };
+    }
+    static get pasteConfig() {
+        return {
+            tags: ['video'],
+            patterns: {
+                video: /https?:\/\/\S+\.(mp4)$/i
+            },
+            files: {
+                mimeTypes: ['video/*']
+            }
+        };
+    }
+    constructor(options) {
+        this.selectedFile = null;
+        this.onSelectFile = () => {
+            return this.uploader.selectFile({
+                fileSelected: (file) => {
+                    const url = URL.createObjectURL(file);
+                    this.getCaptureFromVideo(url);
+                    this.videoTool.isLoading = true;
+                    this.selectedFile = file;
+                    this.uploader.uploadFile(file);
+                }
+            });
+        };
+        const { api, readOnly, config, data, block } = options;
+        this.blockApi = block;
+        this.api = api;
+        this.readOnly = readOnly;
+        this.config = {
+            load: config?.load ?? (() => { }),
+            field: config?.field ?? 'video',
+            types: config?.types ?? 'video/*',
+            endpoint: config?.endpoint ?? '',
+            buttonContent: config?.buttonContent ?? this.api.i18n.t('Select a Video'),
+            additionalRequestHeaders: config?.additionalRequestHeaders ?? {},
+        };
+        this.uploader = new CuiFileUploader(this.config, this.onUpload.bind(this), this.uploadingFailed.bind(this));
+        this.data = data;
+    }
+    async onPaste(event) {
+        if (event.type !== 'file') {
+            return;
+        }
+        const file = event.detail.file;
+        this.videoTool.isLoading = true;
+        this.selectedFile = file;
+        this.uploader.uploadFile(file);
+    }
+    appendCallback() {
+        this.onSelectFile();
+    }
+    render() {
+        this.videoTool = document.createElement(EDITOR_VIDEO_TOOL_SELECTOR);
+        this.videoTool.api = this.api;
+        this.videoTool.video = this.data.file?.url || '';
+        this.videoTool.caption = this.data.caption || '';
+        this.videoTool.readOnly = this.readOnly;
+        this.videoTool.buttonContent = this.config.buttonContent;
+        this.videoTool.addEventListener('fileSelected', this.onSelectFile);
+        this.videoTool.addEventListener('captionChanged', this.changeCaption.bind(this));
+        return this.videoTool;
+    }
+    save() {
+        return this.data;
+    }
+    removed() {
+        this.videoTool.removeEventListener('fileSelected', this.onSelectFile);
+        this.videoTool.removeEventListener('captionChanged', this.changeCaption);
+    }
+    changeCaption(event) {
+        const customEvent = event;
+        const value = customEvent.detail;
+        this.data.caption = value;
+        this.blockApi?.dispatchChange();
+    }
+    set video(file) {
+        this.data.file = file || {};
+        if (file && file.url) {
+            this.videoTool.video = file.url;
+        }
+    }
+    onUpload(response) {
+        if (!response.success || !response.file || !this.selectedFile) {
+            this.uploadingFailed();
+            return;
+        }
+        const url = this.selectedFile instanceof File ? window.URL.createObjectURL(this.selectedFile) : this.selectedFile;
+        this.data.file = response.file;
+        this.videoTool.video = url;
+        this.videoTool.isLoading = false;
+    }
+    uploadingFailed() {
+        this.videoTool.video = '';
+        this.videoTool.isLoading = false;
+    }
+    getCaptureFromVideo(url) {
+        const canvas = document.createElement('canvas');
+        const video = document.createElement('video');
+        video.src = url;
+        video.currentTime = 1;
+        canvas.width = 120;
+        canvas.height = 120;
+        video.onloadeddata = () => {
+            const context = canvas.getContext('2d');
+            if (!context) {
+                return;
+            }
+            context.drawImage(video, 0, 0, canvas.width, canvas.height);
+            canvas.toBlob((blob) => {
+                if (!blob) {
+                    return;
+                }
+                this.videoTool.preview = URL.createObjectURL(blob);
+            });
+        };
+        video.load();
+    }
+}
+
+class CuiAttachesTool {
+    static get isReadOnlySupported() {
+        return true;
+    }
+    static get toolbox() {
+        return {
+            icon: CUI_ICONS.cuiIconPaperclipSm,
+            title: 'File'
+        };
+    }
+    constructor(options) {
+        this.selectedFile = null;
+        this.onSelectFile = () => {
+            return this.uploader.selectFile({
+                fileSelected: (file) => {
+                    this.attachesTool.isLoading = true;
+                    this.selectedFile = file;
+                    this.uploader.uploadFile(file);
+                }
+            });
+        };
+        const { api, readOnly, config, data, block } = options;
+        this.blockApi = block;
+        this.api = api;
+        this.readOnly = readOnly;
+        this.config = {
+            load: config?.load ?? (() => { }),
+            field: config?.field ?? 'file',
+            types: config?.types ?? '*',
+            endpoint: config?.endpoint ?? '',
+            buttonContent: config?.buttonContent ?? this.api.i18n.t('Select a File'),
+            additionalRequestHeaders: config?.additionalRequestHeaders ?? {},
+        };
+        this.uploader = new CuiFileUploader(this.config, this.onUpload.bind(this), this.uploadingFailed.bind(this));
+        this.data = data;
+    }
+    appendCallback() {
+        this.onSelectFile();
+    }
+    render() {
+        this.attachesTool = document.createElement(EDITOR_ATTACHES_TOOL_SELECTOR);
+        this.attachesTool.api = this.api;
+        this.attachesTool.file = this.data.file ?? '';
+        this.attachesTool.title = this.data.title ?? '';
+        this.attachesTool.readOnly = this.readOnly;
+        this.attachesTool.buttonContent = this.config.buttonContent;
+        this.attachesTool.addEventListener('fileSelected', this.onSelectFile);
+        this.attachesTool.addEventListener('captionChanged', this.changeCaption.bind(this));
+        return this.attachesTool;
+    }
+    save() {
+        return this.data;
+    }
+    removed() {
+        this.attachesTool.removeEventListener('fileSelected', this.onSelectFile);
+        this.attachesTool.removeEventListener('captionChanged', this.changeCaption);
+    }
+    changeCaption(event) {
+        const customEvent = event;
+        const value = customEvent.detail;
+        this.data.title = value;
+        this.blockApi?.dispatchChange();
+    }
+    set file(file) {
+        this.data.title = file.name;
+        this.data.file = {
+            name: file.name,
+            extension: file.name?.split('.').pop(),
+            size: file.size,
+            url: file.url
+        };
+        this.attachesTool.file = { ...this.data.file };
+        this.attachesTool.title = file.name;
+    }
+    onUpload(response) {
+        if (!response.success || !response.file || !this.selectedFile) {
+            this.uploadingFailed();
+            return;
+        }
+        this.file = {
+            name: this.selectedFile.name,
+            extension: this.selectedFile.name.split('.').pop(),
+            size: this.selectedFile.size,
+            url: response.file.url
+        };
+        this.attachesTool.isLoading = false;
+    }
+    uploadingFailed() {
+        this.attachesTool.file = undefined;
+        this.attachesTool.isLoading = false;
+    }
+}
+
+var RangeContainer;
+(function (RangeContainer) {
+    RangeContainer["start"] = "startContainer";
+    RangeContainer["end"] = "endContainer";
+})(RangeContainer || (RangeContainer = {}));
+class CuiMarkerTool {
+    static get isInline() {
+        return true;
+    }
+    get state() {
+        return this._state;
+    }
+    set state(state) {
+        this._state = state;
+        this.button?.classList.toggle(this.api.styles.inlineToolButtonActive, state);
+    }
+    constructor(data) {
+        this.LIST_CLASS = 'cdx-list__item';
+        this.DEFAULT_CLASS = 'marker';
+        this.DIV = 'div';
+        this.TAG = 'MARK';
+        this.CLASS = 'tool-marker';
+        this._state = false;
+        this.api = data.api;
+    }
+    render() {
+        this.button = document.createElement('button');
+        this.button.type = 'button';
+        this.button.classList.add(this.api.styles.inlineToolButton);
+        this.range = window.getSelection()?.getRangeAt(0).cloneRange();
+        return this.button;
+    }
+    surround() {
+        if (this.state) {
+            this.api.inlineToolbar.close();
+            this.unwrap();
+            return;
+        }
+        this.markerModal.title = this.range.toString();
+    }
+    wrap(range) {
+        const { startContainer, endContainer } = range;
+        const selectedText = range.extractContents();
+        const mark = this.createElement();
+        mark.appendChild(selectedText);
+        this.removeNestedMarkers(mark, this.DEFAULT_CLASS);
+        this.addMarkerToDOM(range, mark, startContainer, endContainer);
+        this.removeExternalMarkers(range, this.DEFAULT_CLASS);
+        this.removeEmptyMarkers(range);
+        this.api.selection.expandToTag(mark);
+    }
+    unwrap() {
+        const mark = this.api.selection.findParentTag(this.TAG, this.CLASS);
+        if (!mark) {
+            return;
+        }
+        removeElementTagWrapper(mark);
+    }
+    createElement(text = '') {
+        const element = document.createElement(this.TAG);
+        element.classList.add(this.DEFAULT_CLASS);
+        element.textContent = text;
+        return element;
+    }
+    addMarkerToDOM(range, mark, startBlock, endBlock) {
+        const classes = [this.LIST_CLASS, COMBINED_TEXT_BLOCK_PART];
+        const { className, parent: startParent } = this.getClosestParentWithClass(startBlock, classes);
+        const { parent: endParent } = this.getClosestParentWithClass(endBlock, classes);
+        if (!className || startParent === endParent) {
+            range.insertNode(mark);
+            return;
+        }
+        this.removeAllParentsFromMarker(mark, className);
+        startParent?.append(mark);
+    }
+    removeEmptyMarkers(range) {
+        range.commonAncestorContainer.childNodes.forEach((node) => {
+            if (node.nodeName !== this.TAG) {
+                return;
+            }
+            if (node.textContent?.length) {
+                return;
+            }
+            node.remove();
+        });
+    }
+    removeExternalMarkers(range, className) {
+        const startContainer = this.getElementFromContainerNode(range, RangeContainer.start, className);
+        const endContainer = this.getElementFromContainerNode(range, RangeContainer.end, className);
+        const startElement = startContainer?.closest('.' + className);
+        const endElement = endContainer?.closest('.' + className);
+        if (startElement !== endElement || !startElement?.classList.contains(className)) {
+            return;
+        }
+        const marker = startElement;
+        removeElementTagWrapper(marker);
+    }
+    removeNestedMarkers(element, selector) {
+        const markers = element.querySelectorAll('.' + selector);
+        markers.forEach((node) => {
+            const marker = node;
+            removeElementTagWrapper(marker);
+        });
+    }
+    getElementFromContainerNode(range, key, className) {
+        const container = range[key];
+        if (container?.classList?.contains(className)) {
+            return container;
+        }
+        return container.parentElement;
+    }
+    removeAllParentsFromMarker(mark, className) {
+        const innerMarkerNodes = [];
+        mark.childNodes.forEach((node) => {
+            innerMarkerNodes.push(node);
+        });
+        innerMarkerNodes.forEach((node) => {
+            const element = node;
+            const isBlock = element.classList?.contains(className);
+            if (!isBlock) {
+                return;
+            }
+            removeElementTagWrapper(element);
+        });
+    }
+    getClosestParentWithClass(node, classes) {
+        const nodeParent = node.parentElement;
+        let parent = nodeParent;
+        let resultClassName = '';
+        for (const className of classes) {
+            const parentWithClass = parent.closest('.' + className);
+            if (!parentWithClass) {
+                continue;
+            }
+            parent = parentWithClass;
+            resultClassName = className;
+            break;
+        }
+        return { className: resultClassName, parent };
+    }
+}
+
+class CuiLinkMarker extends CuiMarkerTool {
+    static get sanitize() {
+        return {
+            a: {
+                href: true,
+                class: true,
+                target: true,
+                contenteditable: true
+            }
+        };
+    }
+    constructor(data) {
+        super(data);
+        this.TAG = 'A';
+    }
+    render() {
+        super.render();
+        /* eslint-disable */
+        this.button.innerHTML = `<svg width="20" height="15" viewBox="-3 -3 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M18.2813 1.22405C17.9329 0.874451 17.5189 0.597062 17.0631 0.407792C16.6073 0.218522 16.1186 0.121094 15.625 0.121094C15.1315 0.121094 14.6428 0.218522 14.187 0.407792C13.7312 0.597062 13.3172 0.874451 12.9688 1.22405L13.8563 2.11155C14.089 1.87886 14.3652 1.69429 14.6692 1.56836C14.9733 1.44243 15.2991 1.37762 15.6282 1.37762C15.9572 1.37762 16.2831 1.44243 16.5871 1.56836C16.8911 1.69429 17.1674 1.87886 17.4 2.11155C17.6327 2.34424 17.8173 2.62047 17.9432 2.92449C18.0692 3.22851 18.134 3.55436 18.134 3.88343C18.134 4.21249 18.0692 4.53834 17.9432 4.84236C17.8173 5.14638 17.6327 5.42261 17.4 5.6553L12.4 10.6553C11.9309 11.1252 11.2944 11.3896 10.6304 11.3901C9.96638 11.3907 9.32935 11.1275 8.85942 10.6584C8.38949 10.1893 8.12515 9.55275 8.12457 8.88876C8.12398 8.22476 8.38719 7.58773 8.85629 7.1178L9.73754 6.2303L8.85629 5.3428L7.96879 6.2303C7.61919 6.57869 7.3418 6.99266 7.15253 7.44848C6.96326 7.9043 6.86583 8.393 6.86583 8.88655C6.86583 9.3801 6.96326 9.8688 7.15253 10.3246C7.3418 10.7804 7.61919 11.1944 7.96879 11.5428C8.67597 12.2409 9.63134 12.6298 10.625 12.624C11.1205 12.6261 11.6114 12.5299 12.0695 12.3411C12.5276 12.1523 12.9437 11.8746 13.2938 11.524L18.2938 6.52405C18.9944 5.81927 19.3866 4.86522 19.3842 3.87146C19.3819 2.87771 18.9852 1.92552 18.2813 1.22405Z" fill="#595E6A"/>
+            <path d="M2.61879 12.5115C2.38541 12.2793 2.20022 12.0031 2.07386 11.6991C1.94749 11.395 1.88244 11.069 1.88244 10.7397C1.88244 10.4104 1.94749 10.0844 2.07386 9.78028C2.20022 9.47621 2.38541 9.2001 2.61879 8.9678L7.61879 3.9678C7.85109 3.73442 8.1272 3.54923 8.43127 3.42287C8.73534 3.2965 9.06138 3.23145 9.39067 3.23145C9.71995 3.23145 10.046 3.2965 10.3501 3.42287C10.6541 3.54923 10.9302 3.73442 11.1625 3.9678C11.3944 4.20193 11.577 4.48022 11.6994 4.78619C11.8218 5.09215 11.8815 5.41958 11.875 5.74905C11.8769 6.07955 11.8133 6.40715 11.6878 6.7129C11.5623 7.01865 11.3774 7.29647 11.1438 7.5303L9.81879 8.87405L10.7063 9.76155L12.0313 8.43655C12.7366 7.73124 13.1328 6.77463 13.1328 5.77718C13.1328 4.77972 12.7366 3.82311 12.0313 3.1178C11.326 2.41249 10.3694 2.01625 9.37192 2.01625C8.37446 2.01625 7.41785 2.41249 6.71254 3.1178L1.71254 8.1178C1.362 8.4663 1.08382 8.88066 0.893994 9.33706C0.704168 9.79346 0.606445 10.2829 0.606445 10.7772C0.606445 11.2715 0.704168 11.7609 0.893994 12.2173C1.08382 12.6737 1.362 13.088 1.71254 13.4365C2.42431 14.1293 3.38185 14.5115 4.37504 14.499C5.37698 14.5 6.33862 14.1046 7.05004 13.399L6.16254 12.5115C5.93025 12.7449 5.65413 12.9301 5.35006 13.0565C5.04599 13.1829 4.71995 13.2479 4.39067 13.2479C4.06138 13.2479 3.73534 13.1829 3.43127 13.0565C3.1272 12.9301 2.85109 12.7449 2.61879 12.5115Z" fill="#595E6A"/>
+        </svg>
+        `;
+        /* eslint-enable */
+        return this.button;
+    }
+    renderActions() {
+        this.dropdown = document.createElement(this.DIV);
+        if (this.state) {
+            return this.dropdown;
+        }
+        const linkModal = this.createLinkModal();
+        this.dropdown.append(linkModal);
+        return this.dropdown;
+    }
+    wrapLink(range, markerData) {
+        const { startContainer, endContainer } = range;
+        const url = markerData.data?.toString();
+        const link = this.createElement(url, markerData.title);
+        range.extractContents();
+        this.addMarkerToDOM(range, link, startContainer, endContainer);
+        this.removeExternalMarkers(range, this.DEFAULT_CLASS);
+        this.removeEmptyMarkers(range);
+        this.api.selection.expandToTag(link);
+    }
+    unwrap() {
+        const mark = this.api.selection.findParentTag(this.TAG);
+        if (!mark) {
+            return;
+        }
+        removeElementTagWrapper(mark);
+    }
+    createElement(url = '', text = '') {
+        const link = super.createElement(text);
+        link.href = url;
+        link.contentEditable = 'false';
+        link.target = '_blank';
+        return link;
+    }
+    checkState() {
+        const link = this.api.selection.findParentTag(this.TAG);
+        this.state = !!link;
+    }
+    createLinkModal() {
+        this.markerModal = document.createElement(MARKER_MODAL_SELECTOR);
+        this.markerModal.url = '';
+        this.markerModal.target = this.button;
+        this.markerModal.isGlobal = true;
+        this.markerModal.addEventListener('saveClicked', (event) => {
+            const customEvent = event;
+            const data = customEvent.detail;
+            this.wrapLink(this.range, data);
+        });
+        return this.markerModal;
+    }
+}
+
+class CuiCustomMarkerTool extends CuiMarkerTool {
+    static get sanitize() {
+        return {
+            mark: {
+                class: true,
+                'data-id': true,
+                'data-type': true,
+                contenteditable: true
+            }
+        };
+    }
+    constructor(data) {
+        super(data);
+    }
+    wrapTool(range, markerData) {
+        const { startContainer, endContainer } = range;
+        if (markerData.data && typeof markerData.data !== 'string') {
+            this.id = markerData.data.id;
+            this.type = markerData.data.type;
+        }
+        const mark = this.createElement(markerData.title);
+        range.extractContents();
+        this.removeNestedMarkers(mark, this.DEFAULT_CLASS);
+        this.addMarkerToDOM(range, mark, startContainer, endContainer);
+        this.removeExternalMarkers(range, this.DEFAULT_CLASS);
+        this.removeEmptyMarkers(range);
+        this.api.selection.expandToTag(mark);
+    }
+    onToolButtonClick(event) {
+        const range = window.getSelection()?.getRangeAt(0);
+        if (range) {
+            return;
+        }
+        event.stopImmediatePropagation();
+    }
+    render() {
+        super.render();
+        this.button.onclick = this.onToolButtonClick.bind(this);
+        return this.button;
+    }
+    renderActions() {
+        this.dropdown = document.createElement(this.DIV);
+        if (this.state) {
+            return this.dropdown;
+        }
+        const markerSelect = this.createLinkModal();
+        this.dropdown.append(markerSelect);
+        return this.dropdown;
+    }
+    createElement(text = '') {
+        const element = super.createElement(text);
+        element.contentEditable = 'false';
+        element.classList.add(this.CLASS);
+        element.setAttribute('data-id', this.id);
+        element.setAttribute('data-type', this.type);
+        return element;
+    }
+    checkState(select) {
+        const range = select.getRangeAt(0);
+        const mark = this.api.selection.findParentTag(this.TAG);
+        const isCorrectTool = mark?.classList.contains(this.CLASS);
+        if (!mark || !isCorrectTool) {
+            this.state = false;
+            return;
+        }
+        const startContainer = range.startContainer;
+        const endContainer = range.endContainer;
+        const isStartMarker = mark.contains(startContainer);
+        const isEndMarker = mark.contains(endContainer);
+        this.state = isStartMarker && isEndMarker && isStartMarker === isEndMarker;
+    }
+    createLinkModal() {
+        this.markerModal = document.createElement(MARKER_MODAL_SELECTOR);
+        this.markerModal.tool = { id: '', title: '', type: undefined };
+        this.markerModal.target = this.button;
+        this.markerModal.isTool = true;
+        this.markerModal.isGlobal = true;
+        this.markerModal.addEventListener('saveClicked', (event) => {
+            const customEvent = event;
+            const data = customEvent.detail;
+            this.wrapTool(this.range, data);
+        });
+        return this.markerModal;
+    }
+}
+
+class CuiRoleMarker extends CuiCustomMarkerTool {
+    constructor(data) {
+        super(data);
+        this.CLASS = 'role-marker';
+    }
+    render() {
+        super.render();
+        /* eslint-disable */
+        this.button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="-3 -3 24 24" fill="none">
+            <path d="M13.3335 17.5V15.8333C13.3335 14.9493 12.9823 14.1014 12.3572 13.4763C11.7321 12.8512 10.8842 12.5 10.0002 12.5H4.16683C3.28277 12.5 2.43493 12.8512 1.80981 13.4763C1.18469 14.1014 0.833496 14.9493 0.833496 15.8333V17.5M16.6668 6.66667V11.6667M19.1668 9.16667H14.1668M10.4168 5.83333C10.4168 7.67428 8.92445 9.16667 7.0835 9.16667C5.24255 9.16667 3.75016 7.67428 3.75016 5.83333C3.75016 3.99238 5.24255 2.5 7.0835 2.5C8.92445 2.5 10.4168 3.99238 10.4168 5.83333Z" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>`;
+        /* eslint-enable */
+        return this.button;
+    }
+}
+
+class CuiToolMarker extends CuiCustomMarkerTool {
+    constructor(data) {
+        super(data);
+        this.CLASS = 'tool-marker';
+    }
+    render() {
+        super.render();
+        this.button.innerHTML =
+            '<svg width="20" height="20" viewBox="-2 -3 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="technologies-tools"><path id="Vector" d="M16.3581 15.3966L16.3581 11.4729C16.3581 11.4158 16.3469 11.3592 16.325 11.3064C16.3031 11.2536 16.2711 11.2056 16.2307 11.1652C16.1903 11.1248 16.1423 11.0928 16.0895 11.0709C16.0368 11.0491 15.9802 11.0378 15.923 11.0378H13.2574L13.2593 11.0372C13.2007 11.0348 13.1422 11.0443 13.0874 11.0651C13.0326 11.0859 12.9825 11.1176 12.9402 11.1582C12.898 11.1989 12.8643 11.2476 12.8414 11.3016C12.8184 11.3556 12.8066 11.4136 12.8067 11.4723L12.8067 15.3972M14.584 11.0334V5.8334M16.3582 15.1022L16.3582 17.0647C16.3583 17.1234 16.3465 17.1814 16.3235 17.2354C16.3006 17.2893 16.2669 17.3381 16.2247 17.3787C16.1824 17.4194 16.1323 17.4511 16.0775 17.4719C16.0227 17.4927 15.9642 17.5022 15.9056 17.4998L15.9075 17.4992H13.2419C13.1847 17.4992 13.1282 17.4879 13.0754 17.466C13.0226 17.4442 12.9746 17.4121 12.9342 17.3717C12.8938 17.3313 12.8618 17.2834 12.8399 17.2306C12.818 17.1778 12.8068 17.1212 12.8068 17.0641L12.8068 15.1022M5.59636 9.88719L5.59636 15.9284C5.59627 16.0872 5.62748 16.2445 5.68821 16.3912C5.74895 16.5379 5.838 16.6713 5.9503 16.7836C6.06259 16.8959 6.19591 16.9849 6.34265 17.0456C6.48938 17.1064 6.64665 17.1376 6.80545 17.1375C7.12589 17.1375 7.43318 17.0101 7.65976 16.7836C7.88634 16.557 8.01365 16.2497 8.0137 15.9293L8.01284 9.88719C9.29329 9.32793 10.4298 8.05047 10.4298 6.56367C10.4302 5.07729 9.22194 3.54264 8.01284 3.241L8.01327 5.83907L6.8046 7.2887L5.59636 5.83864L5.59636 3.241C4.38769 3.54306 3.17902 5.07729 3.17902 6.5641C3.17944 8.05048 4.31591 9.32793 5.59636 9.88719ZM14.9916 5.56545L14.1253 5.56545L13.2589 4.69909L13.6921 2.5332L15.4248 2.5332L15.858 4.69909L14.9916 5.56545Z" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>';
+        return this.button;
+    }
+}
+
+class CuiCombinedTextBlockTool {
+    constructor(options) {
+        this.TAG = 'span';
+        this.DEBOUNCE_TIME = 350;
+        this.MAX_CHILD_COUNT_FOR_EMPTY = 1;
+        this.PLACEHOLDER_ATTRIBUTE_NAME = 'placeholderActive';
+        this.mutationConfig = {
+            subtree: true,
+            childList: true,
+            characterData: true
+        };
+        this.changes = new Map();
+        this.getMutationCallback = (wait) => {
+            let timeoutId = null;
+            return () => {
+                if (timeoutId) {
+                    clearTimeout(timeoutId);
+                }
+                timeoutId = setTimeout(() => this.handleMutations(), wait);
+            };
+        };
+        const body = options;
+        const data = body.data;
+        this.readOnly = body.readOnly;
+        this.placeholder = this.getPlaceholder(body.config);
+        this.api = body.api;
+        this.data = {
+            id: data.id || generateId(),
+            textBlocks: data.textBlocks || []
+        };
+        this.convertDefaultDataToCustom(data);
+    }
+    static get isInline() {
+        return false;
+    }
+    static get isReadOnlySupported() {
+        return true;
+    }
+    static get enableLineBreaks() {
+        return false;
+    }
+    static get toolbox() {
+        return {
+            icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M8 9V7.2C8 7.08954 8.08954 7 8.2 7L12 7M16 9V7.2C16 7.08954 15.9105 7 15.8 7L12 7M12 7L12 17M12 17H10M12 17H14"></path></svg>',
+            title: 'Text'
+        };
+    }
+    static get pasteConfig() {
+        return {
+            tags: ['P']
+        };
+    }
+    onPaste(event) {
+        if (event.type !== 'tag') {
+            return;
+        }
+        const text = event.detail.data.textContent;
+        this.data.textBlocks.splice(this.data.textBlocks.length - 1, 1, this.getBlockPartObject(generateId(), text));
+        this.update(this.data.textBlocks);
+    }
+    render() {
+        this.wrapper = document.createElement('div');
+        this.wrapper.classList.add(COMBINED_TEXT_BLOCK);
+        this.wrapper.dataset[this.PLACEHOLDER_ATTRIBUTE_NAME] = this.api.i18n.t(this.placeholder);
+        if (!this.readOnly) {
+            this.wrapper.contentEditable = 'true';
+        }
+        if (!this.data.textBlocks.length) {
+            this.data.textBlocks.push(this.getBlockPartObject(generateId(), ''));
+        }
+        this.update(this.data.textBlocks);
+        this.checkIsEditorEmpty();
+        if (!this.readOnly) {
+            const callback = this.getMutationCallback(this.DEBOUNCE_TIME);
+            this.observer = new MutationObserver(this.onMutationEvent.bind(this, callback));
+            this.observer.observe(this.wrapper, this.mutationConfig);
+        }
+        return this.wrapper;
+    }
+    merge(blocksData) {
+        if (!this.wrapper) {
+            return;
+        }
+        let blocksTextContent = '';
+        this.data.textBlocks = [];
+        blocksData.forEach((block) => {
+            blocksTextContent += block.data.text;
+        });
+        for (let i = 0; i < this.wrapper.childNodes.length; i++) {
+            const node = this.wrapper.childNodes.item(i);
+            if (!(node instanceof HTMLSpanElement)) {
+                return;
+            }
+            i--;
+            blocksTextContent = node.innerHTML + blocksTextContent;
+            node.remove();
+        }
+        const parts = blocksTextContent.length < SPLIT_MAX_LENGTH ? [blocksTextContent] : splitHTML(blocksTextContent);
+        parts.forEach((part) => {
+            const blockObject = this.getBlockPartObject(generateId(), part);
+            this.data.textBlocks.push(blockObject);
+        });
+        this.update(this.data.textBlocks);
+    }
+    save(blockContent) {
+        const textBlocks = [];
+        blockContent.querySelectorAll(this.TAG).forEach((span) => {
+            textBlocks.push(this.getBlockPartObject(span.dataset['id'], span.innerHTML));
+        });
+        return textBlocks;
+    }
+    removed() {
+        this.observer?.disconnect();
+        const blockIds = new Set();
+        this.data.textBlocks.forEach((block) => {
+            blockIds.add(block.id || '');
+        });
+        this.removeBlocks(blockIds);
+    }
+    onMutationEvent(callback, mutationList) {
+        if (mutationList.length === 0) {
+            return;
+        }
+        mutationList.forEach((mutation) => {
+            if (mutation.removedNodes.length) {
+                this.changes.set(generateId(), mutation);
+                return;
+            }
+            this.changes.set(mutation.target, mutation);
+        });
+        callback(mutationList);
+        this.checkIsEditorEmpty();
+    }
+    handleMutations() {
+        const mutationsList = [...this.changes.values()];
+        const { updatedElements, removedElementsIds } = this.getMutationActions(mutationsList);
+        const splitedParts = [];
+        updatedElements.forEach((element) => {
+            const elementContent = element.innerHTML;
+            if (elementContent.length < SPLIT_MAX_LENGTH) {
+                return;
+            }
+            const parts = splitHTML(elementContent);
+            parts.forEach((part, index) => {
+                if (index === 0) {
+                    return;
+                }
+                const blockId = generateId();
+                const textElement = this.createBlock(blockId, part);
+                splitedParts.push(textElement);
+            });
+            element.innerHTML = parts[0];
+            element.after(...splitedParts);
+        });
+        this.addBlocks(splitedParts, updatedElements);
+        this.updateBlocks(updatedElements);
+        this.removeBlocks(removedElementsIds);
+        this.changes.clear();
+    }
+    getNextIndex() {
+        recalculateIndexes(this.api.blocks);
+        const index = this.api.blocks.getCurrentBlockIndex();
+        const block = this.api.blocks.getBlockByIndex(index);
+        const dataIndex = Number(block?.holder.dataset['index']);
+        const selection = window.getSelection();
+        const range = selection?.rangeCount ? selection.getRangeAt(0) : null;
+        const caretPosition = range?.startOffset ?? 1;
+        let nextBlockIndex = dataIndex;
+        if (caretPosition !== 0) {
+            const blockContainer = block?.holder.querySelector('.' + COMBINED_TEXT_BLOCK);
+            const childrenCount = blockContainer?.children?.length ? blockContainer?.children?.length - 1 : 0;
+            nextBlockIndex = dataIndex + childrenCount + 1;
+        }
+        if (!nextBlockIndex) {
+            nextBlockIndex ||= 0;
+        }
+        return nextBlockIndex;
+    }
+    getBlockPartObject(blockId, text) {
+        return {
+            id: blockId,
+            type: COMBINED_TEXT_BLOCK_PART,
+            data: {
+                text,
+                parentId: this.data.id,
+                parentType: COMBINED_TEXT_BLOCK_NAME
+            }
+        };
+    }
+    getMutationActions(mutationList) {
+        const updatedElements = new Set();
+        const removedElementsIds = new Set();
+        const changedOutsideElements = [];
+        this.lastBlockElement = undefined;
+        mutationList.forEach((mutation) => {
+            this.handleUpdatedBlocks(mutation, updatedElements, changedOutsideElements);
+            this.handleRemovedBlocks(mutation, removedElementsIds);
+        });
+        if (this.lastBlockElement) {
+            const lastBlockElement = this.lastBlockElement;
+            lastBlockElement.append(...changedOutsideElements);
+            this.setCaretToBlocksEnd(lastBlockElement);
+        }
+        return {
+            updatedElements,
+            removedElementsIds
+        };
+    }
+    setCaretToBlocksEnd(block) {
+        const selection = window.getSelection();
+        const range = document.createRange();
+        range.setStart(block, block.childNodes.length);
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+    }
+    handleUpdatedBlocks(mutation, updatedElements, outsideChanges) {
+        let element = mutation.target;
+        if (mutation.target.nodeType === Node.TEXT_NODE) {
+            element = mutation.target.parentElement;
+        }
+        const span = element?.closest('.' + COMBINED_TEXT_BLOCK_PART);
+        if (span) {
+            updatedElements.add(span);
+            return;
+        }
+        this.handleChangesOutsideBlock(element, outsideChanges);
+    }
+    handleChangesOutsideBlock(element, outsideChanges) {
+        if (!element || this.lastBlockElement) {
+            return;
+        }
+        element.childNodes.forEach((block) => {
+            const blockElement = block;
+            if (blockElement.classList?.contains(COMBINED_TEXT_BLOCK_PART)) {
+                this.lastBlockElement = blockElement;
+                return;
+            }
+            outsideChanges.push(block);
+        });
+    }
+    addBlocks(splicedParts, updatedElements) {
+        if (!splicedParts.length) {
+            return;
+        }
+        const addedBlocks = splicedParts.map((block) => {
+            const blockId = block.dataset['id'];
+            return {
+                id: blockId,
+                type: COMBINED_TEXT_BLOCK_PART,
+                data: {
+                    text: block.innerHTML,
+                    parentId: this.data.id,
+                    parentType: COMBINED_TEXT_BLOCK_NAME
+                }
+            };
+        });
+        const previousElement = updatedElements.values().next().value;
+        const id = previousElement?.dataset['id'];
+        const index = Number(previousElement?.dataset['index']) + 1;
+        const blockIndex = this.data.textBlocks.findIndex((block) => block.id === id);
+        this.data.textBlocks.splice(blockIndex, 0, ...addedBlocks);
+        this.api.events.emit(COMBINED_TEXT_BLOCK_ADDED, {
+            index,
+            blockIndex,
+            blocks: addedBlocks,
+            data: this.data.textBlocks
+        });
+    }
+    updateBlocks(updatedElements) {
+        if (!updatedElements.size) {
+            return;
+        }
+        const updatedBlocks = [...updatedElements.values()].map((block) => {
+            return {
+                id: block.dataset['id'],
+                type: COMBINED_TEXT_BLOCK_PART,
+                data: {
+                    text: block.innerHTML,
+                    parentId: this.data.id,
+                    parentType: COMBINED_TEXT_BLOCK_NAME
+                }
+            };
+        });
+        this.api.events.emit(COMBINED_TEXT_BLOCK_UPDATED, updatedBlocks);
+    }
+    handleRemovedBlocks(mutation, removedElementsIds) {
+        if (mutation.removedNodes.length === 0) {
+            return;
+        }
+        mutation.removedNodes.forEach((node) => {
+            if (!(node instanceof HTMLElement)) {
+                return;
+            }
+            const blockId = node.dataset['id'];
+            if (!blockId) {
+                return;
+            }
+            removedElementsIds.add(blockId);
+        });
+    }
+    removeBlocks(ids) {
+        if (!ids.size) {
+            return;
+        }
+        const removedElementIds = [...ids.values()];
+        this.data.textBlocks = this.data.textBlocks.filter((block) => !ids.has(block.id || ''));
+        this.api.events.emit(COMBINED_TEXT_BLOCK_REMOVED, removedElementIds);
+    }
+    update(blocks) {
+        if (!blocks.length) {
+            return;
+        }
+        blocks.forEach((block) => {
+            const textElement = this.createBlock(block.id || generateId(), block.data.text);
+            if (!this.wrapper) {
+                return;
+            }
+            if (this.wrapper.querySelector('.' + COMBINED_TEXT_BLOCK_PART)) {
+                this.wrapper.append(textElement);
+                return;
+            }
+            this.wrapper.replaceChildren(textElement);
+        });
+        setTimeout(() => {
+            this.api.events.emit(COMBINED_TEXT_BLOCK_ADDED, {
+                blocks
+            });
+        });
+    }
+    createBlock(id, text) {
+        const textElement = document.createElement(this.TAG);
+        textElement.classList.add(COMBINED_TEXT_BLOCK_PART);
+        textElement.innerHTML = text;
+        textElement.dataset['id'] = id;
+        return textElement;
+    }
+    convertDefaultDataToCustom(data) {
+        if (Array.isArray(data)) {
+            this.data.textBlocks = data.map((block) => {
+                block.id = generateId();
+                block.data.parentId = this.data.id;
+                return block;
+            });
+        }
+        if (!data.text) {
+            return;
+        }
+        const fragment = document.createRange().createContextualFragment(data.text);
+        let elementContent = '';
+        fragment.childNodes.forEach((node) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                elementContent += node.textContent;
+                return;
+            }
+            elementContent += node.innerHTML;
+        });
+        const parts = elementContent.length < SPLIT_MAX_LENGTH ? [elementContent] : splitHTML(elementContent);
+        parts.forEach((part) => {
+            const blockObject = this.getBlockPartObject(generateId(), part);
+            this.data.textBlocks.push(blockObject);
+        });
+    }
+    checkIsEditorEmpty() {
+        if (!this.wrapper || this.wrapper.children.length > this.MAX_CHILD_COUNT_FOR_EMPTY) {
+            return;
+        }
+        const item = this.wrapper.children.item(0);
+        const isItemEmpty = !item.textContent?.length;
+        this.wrapper.dataset['empty'] = `${isItemEmpty}`;
+    }
+    getPlaceholder(config) {
+        if (this.readOnly) {
+            return config.readonlyPlaceholder ?? DEFAULT_READONLY_PLACEHOLDER;
+        }
+        return config.placeholder ?? DEFAULT_PLACEHOLDER;
+    }
+}
+
+const getEditorConfig = (id, config = DEFAULT_CONFIG) => ({
+    holder: id,
+    logLevel: 'ERROR',
+    readOnly: config.readOnly,
+    autofocus: config.autofocus,
+    tools: {
+        paragraph: {
+            class: CuiCombinedTextBlockTool,
+            inlineToolbar: true,
+            config: {
+                placeholder: config.placeholder,
+                readonlyPlaceholder: config.readonlyPlaceholder
+            }
+        },
+        link: {
+            class: CuiLinkMarker
+        },
+        bold: {
+            class: CuiBoldInlineTool
+        },
+        italic: {
+            class: CuiItalicInlineTool
+        },
+        ...config.tools
+    },
+    defaultBlock: COMBINED_TEXT_BLOCK_NAME
+});
+
+const EDITOR_CUSTOM_ELEMENTS = [
+    {
+        selector: EDITOR_TOOLTIP_SELECTOR,
+        component: EditorTooltipComponent
+    },
+    {
+        selector: MARKER_SELECT_SELECTOR,
+        component: MarkerSelectComponent
+    },
+    {
+        selector: EDITOR_TOOL_MODAL_SELECTOR,
+        component: EditorToolModalComponent
+    },
+    {
+        selector: MARKER_MODAL_SELECTOR,
+        component: MarkerModalComponent
+    },
+    {
+        selector: EDITOR_VIDEO_TOOL_SELECTOR,
+        component: EditorVideoToolComponent
+    },
+    {
+        selector: EDITOR_IMAGE_TOOL_SELECTOR,
+        component: EditorImageToolComponent
+    },
+    {
+        selector: EDITOR_ATTACHES_TOOL_SELECTOR,
+        component: EditorAttachesToolComponent
+    }
+];
+
+function cuiProvideEditor() {
+    return [
+        {
+            provide: APP_INITIALIZER,
+            useFactory: (injector) => () => {
+                EDITOR_CUSTOM_ELEMENTS.forEach(({ component, selector }) => {
+                    const element = createCustomElement(component, { injector });
+                    window.customElements.define(selector, element);
+                });
+            },
+            deps: [Injector],
+            multi: true,
+        },
+    ];
+}
+
+function setEditorDragEvents(editorElement, signal) {
+    editorElement.addEventListener('dragstart', dragstartListener, { signal });
+}
+function dragstartListener(event) {
+    event.preventDefault();
+}
+
+const FIRST_CHILD_SELECTOR = '_selected';
+function setEditorKeyboardEvents(editorElement, signal) {
+    editorElement.addEventListener('keydown', keydownListener, { signal });
+}
+function keydownListener(event) {
+    const target = event.target;
+    const block = target.closest(`.${COMBINED_TEXT_BLOCK}`);
+    if (!block) {
+        return;
+    }
+    const selection = window.getSelection();
+    const ranges = selection?.rangeCount;
+    if (!ranges || !checkIsBlockFullySelected(block)) {
+        return;
+    }
+    const firstChild = block?.firstElementChild;
+    firstChild?.classList.add(FIRST_CHILD_SELECTOR);
+    setTimeout(() => firstChild?.classList.remove(FIRST_CHILD_SELECTOR));
+}
+function checkIsBlockFullySelected(blockElement) {
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) {
+        return false;
+    }
+    const range = selection.getRangeAt(0);
+    const startBlock = range.startContainer.parentElement?.closest('.' + COMBINED_TEXT_BLOCK_PART);
+    const endBlock = range.endContainer.parentElement?.closest('.' + COMBINED_TEXT_BLOCK_PART);
+    const isStartAtBlockStart = startBlock === blockElement.firstChild && range.startOffset === 0;
+    const isEndAtBlockEnd = endBlock === blockElement.lastChild;
+    return isStartAtBlockStart && isEndAtBlockEnd;
+}
+
+function setEditorInfoModalEvents(editorElement, signal) {
+    editorElement?.addEventListener('pointerup', pointerUpListener, { signal });
+}
+function pointerUpListener(event) {
+    const selection = window.getSelection();
+    if (selection && selection.toString().length > 0) {
+        return;
+    }
+    const target = event.target;
+    const marker = target.closest('.marker');
+    if (!marker) {
+        return;
+    }
+    onMarkerClick(marker);
+}
+function onMarkerClick(marker) {
+    const id = marker.dataset['id'];
+    const type = marker.dataset['type'];
+    if (!(id && type)) {
+        return;
+    }
+    const toolModal = document.createElement(EDITOR_TOOL_MODAL_SELECTOR);
+    toolModal.tool = { id, type, title: 'Молоток КУБИПРО Ультра MAX 3000' };
+    toolModal.marker = marker;
+    toolModal.addEventListener('closed', function onCloseModal() {
+        toolModal.remove();
+    });
+    document.body.append(toolModal);
+}
+
+const TOOLTIP_POSITION_X = 5;
+const TOOLTIP_POSITION_Y = 40;
+const TOOLTIP_SAFE_RIGHT_SHIFT = 10;
+const TOOLTIP_DEBOUNCE_TIME = 500;
+const CLOSE_TOOLTIP_DEBOUNCE_TIME = 50;
+let tooltip;
+let timeoutId;
+let closeTimeoutId;
+const closeTooltipHandler = () => closeTooltip();
+function closeTooltip(callback) {
+    clearTimeout(closeTimeoutId);
+    closeTimeoutId = setTimeout(() => {
+        clearTimeout(timeoutId);
+        tooltip?.remove();
+        callback?.();
+    }, CLOSE_TOOLTIP_DEBOUNCE_TIME);
+}
+const debouncedEvent = (event, marker, target) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+        if (tooltip && tooltip?.contains(target)) {
+            return;
+        }
+        closeTooltip(() => openTooltip(event, marker));
+    }, TOOLTIP_DEBOUNCE_TIME);
+};
+function openTooltip(event, marker) {
+    const type = marker.tagName;
+    tooltip = tooltipMap[type](marker);
+    tooltip.style.visibility = 'hidden';
+    document.body.append(tooltip);
+    setTimeout(() => {
+        const positionX = event.clientX;
+        const positionY = event.clientY;
+        const rightX = document.documentElement.clientWidth - positionX;
+        const rightShiftDiffX = tooltip.offsetWidth - rightX;
+        const rightShiftX = rightShiftDiffX > 0 ? rightShiftDiffX + TOOLTIP_SAFE_RIGHT_SHIFT : 0;
+        tooltip.style.top = positionY - TOOLTIP_POSITION_Y + 'px';
+        tooltip.style.left = positionX + TOOLTIP_POSITION_X - rightShiftX + 'px';
+        tooltip.style.visibility = 'visible';
+    });
+}
+function setEditorTooltipEvents(signal) {
+    document.body.addEventListener('mousemove', mouseMoveListener, { signal });
+    document.body.addEventListener('mouseleave', closeTooltipHandler, { signal });
+}
+function mouseMoveListener(event) {
+    const target = event.target;
+    const marker = target.closest('.marker');
+    if (tooltip?.contains(target)) {
+        clearTimeout(timeoutId);
+        clearTimeout(closeTimeoutId);
+        return;
+    }
+    if (!marker) {
+        closeTooltip();
+        return;
+    }
+    clearTimeout(closeTimeoutId);
+    debouncedEvent(event, marker, target);
+}
+
+function setEditorEvents(editorElement, signal) {
+    setEditorTooltipEvents(signal);
+    setEditorInfoModalEvents(editorElement, signal);
+    setEditorDragEvents(editorElement, signal);
+    setEditorKeyboardEvents(editorElement, signal);
+}
+
+class CuiEditorComponent {
+    constructor() {
+        this.destroy = inject(DestroyRef);
+        this.editorService = inject(CuiEditorService);
+        this.jTextService = inject(CuiJTextApiService);
+        this.POOLING_DELAY = 100;
+        this.ELEMENT_SPACE_TO_BOTTOM = 150;
+        this.SCROLL_THROTTLE_TIME = 200;
+        this.isReadonly = computed(() => this.config?.readOnly);
+        this.emptyQueue = new Subject();
+        this.editorEmpty = new EventEmitter();
+        this.config = DEFAULT_CONFIG;
+        this.requestSize = 40;
+        this.isSkipCombinedBlockOnChange = [];
+        this.isFirst = true;
+        this.isChanging = false;
+        this.isSkip = false;
+        this.isRequested = false;
+        this.isDestroyed = 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();
+    }
+    ngOnChanges(changes) {
+        if (changes['editorID'] || changes['config']) {
+            this.initEditorChanges();
+        }
+    }
+    ngOnDestroy() {
+        this.isDestroyed = true;
+        this.destroyEditor();
+    }
+    onScrollEvent(element) {
+        const overallHeight = element.scrollHeight - this.ELEMENT_SPACE_TO_BOTTOM;
+        const currentHeight = element.scrollTop + element.clientHeight;
+        if (currentHeight < overallHeight || this.isRequested) {
+            return;
+        }
+        this.isRequested = true;
+        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();
+        }))
+            .subscribe();
+        this.page++;
+    }
+    async onEditorChange(_, event) {
+        if (this.isReadonly()) {
+            return;
+        }
+        if (!Array.isArray(event)) {
+            event = [event];
+        }
+        recalculateIndexes(this.editor.blocks);
+        if (this.isChanging) {
+            this.changesQueue.unshift(event);
+        }
+        this.startChanges(event);
+        this.editorEmpty.emit(this.checkIsEmpty());
+    }
+    onAddedCombinedBlock(data) {
+        if (this.isSkipCombinedBlockOnChange.length) {
+            this.isSkipCombinedBlockOnChange.pop();
+            return;
+        }
+        const blocksWithoutId = data.blocks.map((block) => ({
+            block: { ...block, id: undefined },
+            id: block.id
+        }));
+        this.addedBlocks.push(...blocksWithoutId);
+    }
+    onUpdatedCombinedBlock(updatedBlocks) {
+        if (!updatedBlocks.length) {
+            return;
+        }
+        this.updatedBlocks.push(...updatedBlocks);
+    }
+    onRemovedCombinedBlock(blockIds) {
+        if (!blockIds.length) {
+            return;
+        }
+        this.removedBlocksIds.push(...blockIds);
+    }
+    initEditorChanges() {
+        this.jTextService.addOptions(this.config.requestOptions);
+        this.editor = this.initEditor(this.editorID);
+        this.editor.isReady.then(() => {
+            this.editorElement = this.editorRef.nativeElement;
+            this.initEditorEvents(this.editorElement);
+            this.initScrollObserver();
+            this.startPooling(this.requestSize);
+            this.setListenersOnCustomBlockChanges();
+        });
+    }
+    initEditor(id) {
+        const config = this.config;
+        this.destroyEditor();
+        this.editor = new EditorJS({
+            ...getEditorConfig(id, config),
+            onChange: this.onEditorChange.bind(this)
+        });
+        return this.editor;
+    }
+    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();
+    }
+    initEditorEvents(element) {
+        const readOnly = this.isReadonly();
+        if (readOnly) {
+            return;
+        }
+        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();
+    }
+    destroyEditor() {
+        this.abortController.abort();
+        this.resetData();
+        // TODO: в рандом кейсах падает ошибка если убрать проверку на вызов destroy
+        this.editor?.destroy?.();
+    }
+    setListenersOnCustomBlockChanges() {
+        this.editorService.setListenersOnCustomBlockChanges(this.editor, {
+            removedCallback: this.onRemovedCombinedBlock.bind(this),
+            updatedCallback: this.onUpdatedCombinedBlock.bind(this),
+            addedCallback: this.onAddedCombinedBlock.bind(this)
+        });
+    }
+    async startChanges(event) {
+        if (this.isSkip || this.isChanging || !this.editor) {
+            this.isSkip = false;
+            return;
+        }
+        this.isChanging = true;
+        const editorOutput = await this.editor.save();
+        const events = event.filter((data) => data.detail.target.name !== COMBINED_TEXT_BLOCK_NAME);
+        const blocks = this.editorService.sortEventsByTypes(events);
+        const { addBlocks$, addedBlocks } = this.collectAddedBlocksRequest(blocks, editorOutput);
+        this.addedBlocks = [];
+        addBlocks$
+            .pipe(tap((blockIds) => this.setBlockIdsToMap(blockIds, addedBlocks)), concatMap(() => this.collectUpdatedBlocksRequest(blocks, editorOutput)), concatMap(() => this.collectRemovedBlocksRequest(blocks)))
+            .subscribe({
+            complete: () => this.startNextChange(),
+            error: () => this.startNextChange()
+        });
+    }
+    startNextChange() {
+        this.isChanging = false;
+        const nextEvents = this.changesQueue.pop();
+        if (nextEvents) {
+            this.startChanges(nextEvents);
+        }
+        this.emptyQueue.next(null);
+    }
+    collectAddedBlocksRequest(blocks, editorOutput) {
+        const defaultBlocksWithIndex = blocks["block-added" /* EventActions.add */].map((addedBlock) => this.editorService.getFullBlockData(addedBlock, editorOutput));
+        const combinedBlocksWithIndex = this.addedBlocks.map((block) => {
+            const element = this.editorElement.querySelector(`[data-id="${block.id}"]`);
+            const index = Number(element?.dataset['index']);
+            return { ...block, index };
+        });
+        const addedBlocks = [...defaultBlocksWithIndex, ...combinedBlocksWithIndex].sort((first, second) => first.index - second.index);
+        const addBlocks$ = this.editorService.collectAddedBlocksRequest(this.editorID, addedBlocks);
+        return {
+            addedBlocks,
+            addBlocks$
+        };
+    }
+    collectUpdatedBlocksRequest(blocks, editorOutput) {
+        blocks["block-changed" /* EventActions.update */].forEach((updateBlock) => {
+            const { id, block } = this.editorService.getFullBlockData(updateBlock, editorOutput);
+            block.id = id;
+            this.updatedBlocks.push(block);
+        });
+        const updateBlocks$ = this.editorService.collectUpdatedBlocksRequest(this.updatedBlocks, this.blockIdsMap);
+        this.updatedBlocks = [];
+        return updateBlocks$;
+    }
+    collectRemovedBlocksRequest(blocks) {
+        blocks["block-removed" /* EventActions.remove */].forEach((block) => {
+            const id = block.detail.target.id;
+            this.removedBlocksIds.push(id);
+        });
+        const removeBlocks$ = this.editorService.collectRemovedBlocksRequest(this.editorID, this.removedBlocksIds, this.blockIdsMap);
+        this.removedBlocksIds = [];
+        return removeBlocks$;
+    }
+    getBlocks(page = 0, size = 40) {
+        let combinedBlock;
+        return this.jTextService.getBlocks(this.editorID, page, size).pipe(takeUntilDestroyed(this.destroy), finalize(() => {
+            if (combinedBlock) {
+                this.addCombinedBlock(combinedBlock);
+                combinedBlock = null;
+            }
+            recalculateIndexes(this.editor.blocks);
+        }), map((block) => {
+            if (block.type === COMBINED_TEXT_BLOCK_PART) {
+                const blockData = block.data;
+                if (combinedBlock && blockData.parentId !== combinedBlock?.id) {
+                    this.addCombinedBlock(combinedBlock);
+                    combinedBlock = null;
+                }
+                combinedBlock = this.setCombinedBlock(block);
+                return;
+            }
+            if (combinedBlock) {
+                this.addCombinedBlock(combinedBlock);
+                combinedBlock = null;
+            }
+            this.addBlock(block);
+        }), toArray());
+    }
+    addBlock(block) {
+        if (typeof block.type !== 'string') {
+            return;
+        }
+        this.blockIdsMap.set(block.id, block.id);
+        this.insert(block);
+    }
+    addCombinedBlock(combinedBlock) {
+        this.isSkipCombinedBlockOnChange.push(true);
+        const block = this.editor.blocks.getById(combinedBlock.id || '');
+        if (block) {
+            this.editor.blocks.update(block.id, combinedBlock.data);
+            return;
+        }
+        this.insert(combinedBlock);
+    }
+    insert(block) {
+        this.checkFirst(block);
+        this.index++;
+    }
+    checkFirst(block) {
+        if (!this.isFirst) {
+            this.isSkip = true;
+            this.editor.blocks.insert(block.type, block.data, {}, this.index, false, false, block.id);
+            return;
+        }
+        // TODO: есть варик что что то пойдет не так
+        this.editor.blocks.render({ blocks: [block] }).then(() => this.isSkip = false);
+        this.isFirst = false;
+    }
+    setCombinedBlock(block) {
+        const combinedBlockData = block.data;
+        const parent = this.combinedBlocks.get(combinedBlockData.parentId);
+        this.blockIdsMap.set(block.id, block.id);
+        if (parent) {
+            const parentData = parent.data;
+            parentData.textBlocks.push(block);
+            return parent;
+        }
+        const parentObject = {
+            id: combinedBlockData.parentId,
+            type: COMBINED_TEXT_BLOCK_NAME,
+            data: {
+                id: combinedBlockData.parentId,
+                textBlocks: [block]
+            }
+        };
+        this.combinedBlocks.set(combinedBlockData.parentId, parentObject);
+        return parentObject;
+    }
+    setBlockIdsToMap(blockIds, addedBlocks) {
+        if (!blockIds.length) {
+            return;
+        }
+        addedBlocks.forEach((blockData, index) => {
+            this.blockIdsMap.set(blockData.id, blockIds[index]);
+        });
+    }
+    setStartBlock() {
+        if (this.blockIdsMap.size) {
+            this.setFocus();
+            this.editorEmpty.emit(this.checkIsEmpty());
+            return;
+        }
+        if (this.isReadonly()) {
+            this.editor.render({ blocks: [] });
+            return;
+        }
+        this.editorService.setStartBlock(this.editorID, async (block, id) => {
+            this.blockIdsMap.set(id, id);
+            this.isSkipCombinedBlockOnChange.push(true);
+            await this.editor.render({ blocks: [block] });
+            this.setFocus();
+            recalculateIndexes(this.editor.blocks);
+        });
+    }
+    setFocus() {
+        if (!this.config?.autofocus) {
+            return;
+        }
+        this.editor.caret.focus();
+    }
+    checkIsEmpty() {
+        const MIN_BLOCKS_COUNT = 1;
+        const REDACTOR_SELECTOR = '.codex-editor__redactor';
+        const redactor = this.editorElement.querySelector(REDACTOR_SELECTOR);
+        const blocksCount = redactor?.childElementCount ?? 0;
+        return blocksCount <= MIN_BLOCKS_COUNT && !redactor?.textContent;
+    }
+    resetData() {
+        this.scrollSubscription?.unsubscribe();
+        this.poolingSubscription?.unsubscribe();
+        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();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiEditorComponent, isStandalone: true, selector: "cui-editor", inputs: { editorID: "editorID", config: "config", requestSize: "requestSize" }, outputs: { editorEmpty: "editorEmpty" }, providers: [CuiEditorService, CuiJTextApiService], viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n    #editor\r\n    [id]=\"editorID\"\r\n    [class._readonly]=\"config.readOnly\"\r\n    data-editor\r\n></div>\r\n", styles: [":host{--textColor: var(--cui-base-900);--menuBackground: var(--cui-base-0);--menuBorder: var(--cui-base-200);--menuItemHover: var(--cui-base-10);--menuItemBackground: var(cui-base-900);--menuIconBackground: var(--cui-base-50);--menuIconHover: var(--cui-base-10);font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font)}:host ::ng-deep .ce-popover{--color-background: var(--menuBackground);--color-text-primary: var(--textColor);--color-border: var(--menuBorder);--color-border-icon: var(--menuBorder);--color-background-item: var(--menuItemBackground);--color-background-item-hover: var(--menuItemHover)}:host ::ng-deep .ce-popover__search{background:var(--menuIconBackground)}:host ::ng-deep .ce-popover .ce-popover-item__icon{background:var(--menuIconBackground)}:host ::ng-deep .ce-conversion-toolbar{background-color:var(--menuBackground);border-color:var(--menuBorder)}:host ::ng-deep .ce-conversion-toolbar__tools{padding:0 6px 6px}:host ::ng-deep .ce-conversion-tool{padding:3px;border-radius:6px}:host ::ng-deep .ce-conversion-tool__icon{border:1px solid var(--menuBorder);background-color:var(--menuIconBackground);box-shadow:none}:host ::ng-deep .ce-conversion-tool:hover{background-color:var(--menuItemHover)}:host ::ng-deep .ce-conversion-tool:hover .ce-conversion-tool__icon{border-color:var(--menuIconHover)}:host ::ng-deep .combined-text-block{padding:.4em 0;line-height:1.6em;outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part{outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child,:host ::ng-deep .combined-text-block .combined-text-block-part._selected{display:list-item}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child::marker,:host ::ng-deep .combined-text-block .combined-text-block-part._selected::marker{content:\"\"}:host ::ng-deep .image-tool__image{border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}:host ::ng-deep .image-tool__image-preloader{background-color:var(--cui-base-200)}:host ::ng-deep .image-tool__image-preloader:after{border:1px solid var(--cui-base-200);border-top:1px solid var(--cui-blue-600)}:host ::ng-deep .cdx-button{border:1px solid var(--cui-base-200);color:var(--textColor);background-color:var(--cui-base-0);box-shadow:none}:host ::ng-deep .ce-inline-toolbar{border-color:var(--cui-base-100);color:var(--textColor);background-color:var(--cui-base-0)}:host ::ng-deep .ce-inline-toolbar__dropdown:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-inline-tool:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{color:var(--cui-base-500)}:host ::ng-deep .ce-toolbar__plus:hover,:host ::ng-deep .ce-toolbar__settings-btn:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__actions{right:100%}:host ::ng-deep .ce-toolbar__content{max-width:none}: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}:host ::ng-deep [data-editor]._readonly{min-height:auto}:host ::ng-deep [data-editor]._readonly .codex-editor{margin:auto}:host ::ng-deep [data-editor]._readonly .codex-editor__redactor{padding-bottom:0!important}:host ::ng-deep [data-editor]._readonly .combined-text-block{padding:0}:host ::ng-deep [data-editor] [data-item-name=move-up],:host ::ng-deep [data-editor] [data-item-name=move-down],:host ::ng-deep [data-editor] [data-tool=paragraph]{display:none}:host ::ng-deep [data-editor] *::selection{background:var(--cui-base-200)}:host ::ng-deep [data-editor] a{color:var(--cui-light-blue-600)}:host ::ng-deep .marker{cursor:pointer;text-decoration:underline;color:var(--cui-light-blue-600);background-color:transparent}:host ::ng-deep .tool-marker,:host ::ng-deep .role-marker{margin:0 5px}:host ::ng-deep .tool-marker{color:#e97c00}:host ::ng-deep .role-marker{color:#8803f1}.form{height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-editor', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiEditorService, CuiJTextApiService], template: "<div\r\n    #editor\r\n    [id]=\"editorID\"\r\n    [class._readonly]=\"config.readOnly\"\r\n    data-editor\r\n></div>\r\n", styles: [":host{--textColor: var(--cui-base-900);--menuBackground: var(--cui-base-0);--menuBorder: var(--cui-base-200);--menuItemHover: var(--cui-base-10);--menuItemBackground: var(cui-base-900);--menuIconBackground: var(--cui-base-50);--menuIconHover: var(--cui-base-10);font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font)}:host ::ng-deep .ce-popover{--color-background: var(--menuBackground);--color-text-primary: var(--textColor);--color-border: var(--menuBorder);--color-border-icon: var(--menuBorder);--color-background-item: var(--menuItemBackground);--color-background-item-hover: var(--menuItemHover)}:host ::ng-deep .ce-popover__search{background:var(--menuIconBackground)}:host ::ng-deep .ce-popover .ce-popover-item__icon{background:var(--menuIconBackground)}:host ::ng-deep .ce-conversion-toolbar{background-color:var(--menuBackground);border-color:var(--menuBorder)}:host ::ng-deep .ce-conversion-toolbar__tools{padding:0 6px 6px}:host ::ng-deep .ce-conversion-tool{padding:3px;border-radius:6px}:host ::ng-deep .ce-conversion-tool__icon{border:1px solid var(--menuBorder);background-color:var(--menuIconBackground);box-shadow:none}:host ::ng-deep .ce-conversion-tool:hover{background-color:var(--menuItemHover)}:host ::ng-deep .ce-conversion-tool:hover .ce-conversion-tool__icon{border-color:var(--menuIconHover)}:host ::ng-deep .combined-text-block{padding:.4em 0;line-height:1.6em;outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part{outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child,:host ::ng-deep .combined-text-block .combined-text-block-part._selected{display:list-item}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child::marker,:host ::ng-deep .combined-text-block .combined-text-block-part._selected::marker{content:\"\"}:host ::ng-deep .image-tool__image{border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}:host ::ng-deep .image-tool__image-preloader{background-color:var(--cui-base-200)}:host ::ng-deep .image-tool__image-preloader:after{border:1px solid var(--cui-base-200);border-top:1px solid var(--cui-blue-600)}:host ::ng-deep .cdx-button{border:1px solid var(--cui-base-200);color:var(--textColor);background-color:var(--cui-base-0);box-shadow:none}:host ::ng-deep .ce-inline-toolbar{border-color:var(--cui-base-100);color:var(--textColor);background-color:var(--cui-base-0)}:host ::ng-deep .ce-inline-toolbar__dropdown:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-inline-tool:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{color:var(--cui-base-500)}:host ::ng-deep .ce-toolbar__plus:hover,:host ::ng-deep .ce-toolbar__settings-btn:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__actions{right:100%}:host ::ng-deep .ce-toolbar__content{max-width:none}: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}:host ::ng-deep [data-editor]._readonly{min-height:auto}:host ::ng-deep [data-editor]._readonly .codex-editor{margin:auto}:host ::ng-deep [data-editor]._readonly .codex-editor__redactor{padding-bottom:0!important}:host ::ng-deep [data-editor]._readonly .combined-text-block{padding:0}:host ::ng-deep [data-editor] [data-item-name=move-up],:host ::ng-deep [data-editor] [data-item-name=move-down],:host ::ng-deep [data-editor] [data-tool=paragraph]{display:none}:host ::ng-deep [data-editor] *::selection{background:var(--cui-base-200)}:host ::ng-deep [data-editor] a{color:var(--cui-light-blue-600)}:host ::ng-deep .marker{cursor:pointer;text-decoration:underline;color:var(--cui-light-blue-600);background-color:transparent}:host ::ng-deep .tool-marker,:host ::ng-deep .role-marker{margin:0 5px}:host ::ng-deep .tool-marker{color:#e97c00}:host ::ng-deep .role-marker{color:#8803f1}.form{height:100%}\n"] }]
+        }], propDecorators: { editorRef: [{
+                type: ViewChild,
+                args: ['editor']
+            }], editorEmpty: [{
+                type: Output
+            }], editorID: [{
+                type: Input,
+                args: [{ required: true }]
+            }], config: [{
+                type: Input
+            }], requestSize: [{
+                type: Input
+            }] } });
+
+class CuiEditorReadonlyComponent {
+    constructor() {
+        this.isShowMore = signal(false);
+        this.isMoreButtonShown = signal(false);
+        this.editorConfig = computed(() => ({ readOnly: true, withoutPreload: true, ...this.config() }));
+        this.editor = viewChild.required('editor');
+        this.editorId = input.required();
+        this.config = input.required();
+        this.buttonTemplate = input.required();
+        this.shortHeight = input(68);
+        this.initEditorIdEffect();
+        this.initReadEditorProperty();
+    }
+    onShow(editor) {
+        editor.editorElement.scrollTo(0, 0);
+        this.isShowMore.update((prev) => !prev);
+    }
+    initReadEditorProperty() {
+        afterRender({
+            read: () => this.isMoreButtonShown.set(this.editor().editorElement?.scrollHeight > this.shortHeight())
+        });
+    }
+    initEditorIdEffect() {
+        effect(() => {
+            this.editorId();
+            this.isShowMore.set(false);
+        }, { allowSignalWrites: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorReadonlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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    #editor\r\n    class=\"editor\"\r\n    [class.editor_opened]=\"isShowMore()\"\r\n    [editorID]=\"editorId()\"\r\n    [config]=\"editorConfig()\"\r\n/>\r\n@if (isMoreButtonShown()) {\r\n  <button class=\"c-button\" (click)=\"onShow(editor)\">\r\n      <ng-container [ngTemplateOutlet]=\"buttonTemplate()\" [ngTemplateOutletContext]=\"{ $implicit: isShowMore }\"></ng-container>\r\n  </button>\r\n}\r\n", styles: [":host{--height: 68px;--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: ["editorID", "config", "requestSize"], outputs: ["editorEmpty"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorReadonlyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-editor-readonly', standalone: true, imports: [CuiEditorComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-editor\r\n    #editor\r\n    class=\"editor\"\r\n    [class.editor_opened]=\"isShowMore()\"\r\n    [editorID]=\"editorId()\"\r\n    [config]=\"editorConfig()\"\r\n/>\r\n@if (isMoreButtonShown()) {\r\n  <button class=\"c-button\" (click)=\"onShow(editor)\">\r\n      <ng-container [ngTemplateOutlet]=\"buttonTemplate()\" [ngTemplateOutletContext]=\"{ $implicit: isShowMore }\"></ng-container>\r\n  </button>\r\n}\r\n", styles: [":host{--height: 68px;--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"] }]
+        }], ctorParameters: () => [] });
+
+class CuiEditorModalComponent {
+    constructor() {
+        this.isOpen = signal(false);
+        this.isButtonDisabled = signal(false);
+        this.title = input.required();
+        this.buttonTemplate = input();
+        this.config = input.required();
+        this.editorId = input();
+        this.editorCreated = output();
+        this.modalClosed = output();
+    }
+    onModalOpen() {
+        this.isButtonDisabled.set(true);
+        if (this.editorId()) {
+            this.open();
+            return;
+        }
+        this.editorCreated.emit();
+    }
+    open() {
+        this.isOpen.set(true);
+    }
+    close() {
+        this.isButtonDisabled.set(false);
+        this.isOpen.set(false);
+        this.modalClosed.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiEditorModalComponent, isStandalone: true, selector: "cui-editor-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, buttonTemplate: { classPropertyName: "buttonTemplate", publicName: "buttonTemplate", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, editorId: { classPropertyName: "editorId", publicName: "editorId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editorCreated: "editorCreated", modalClosed: "modalClosed" }, ngImport: i0, template: "@if (buttonTemplate(); as template) {\r\n    <button\r\n        type=\"button\"\r\n        class=\"button\"\r\n        (click)=\"onModalOpen()\"\r\n    >\r\n        <ng-container [ngTemplateOutlet]=\"template\" />\r\n    </button>\r\n} @else {\r\n    <button\r\n        class=\"description\"\r\n        cuiButton\r\n        type=\"button\"\r\n        appearance=\"outlined-gray\"\r\n        icon=\"cuiIconRichText\"\r\n        size=\"sm\"\r\n        (click)=\"onModalOpen()\"\r\n        [disabled]=\"isButtonDisabled()\"\r\n    >\r\n        @if (editorId()) {\r\n            <span class=\"description__text _created\">{{ 'Description' }}</span>\r\n            <cui-svg\r\n                class=\"description__icon\"\r\n                icon=\"cuiIconEdit\"\r\n                color=\"var(--cui-base-500)\"\r\n            />\r\n        } @else {\r\n            <cui-svg\r\n                class=\"description__icon\"\r\n                icon=\"cuiIconPlus\"\r\n                color=\"var(--cui-light-blue-600)\"\r\n            />\r\n            <span class=\"description__text\">{{ 'Add description' }}</span>\r\n        }\r\n    </button>\r\n}\r\n@if (isOpen()) {\r\n    <div class=\"wrapper\">\r\n        @if (editorId(); as id) {\r\n            <header class=\"header\">\r\n                <div class=\"info\">\r\n                    <button\r\n                        cuiButton\r\n                        type=\"button\"\r\n                        icon=\"cuiIconChevronLeft\"\r\n                        size=\"xxs\"\r\n                        appearance=\"secondary\"\r\n                        shape=\"rounded\"\r\n                        (click)=\"close()\"\r\n                    ></button>\r\n                    <h1 class=\"title\">{{ title() }}</h1>\r\n                </div>\r\n                <div class=\"actions\">\r\n                    <!-- <cui-loader /> -->\r\n                    <button\r\n                        type=\"button\"\r\n                        cuiButton\r\n                        size=\"xs\"\r\n                        (click)=\"close()\"\r\n                    >\r\n                        {{ 'Done' }}\r\n                    </button>\r\n                </div>\r\n            </header>\r\n\r\n            <section class=\"section\">\r\n                <cui-editor\r\n                    #editorComponent\r\n                    class=\"editor\"\r\n                    [editorID]=\"id\"\r\n                    [config]=\"config()\"\r\n                />\r\n            </section>\r\n        }\r\n    </div>\r\n}\r\n", styles: [":host ::ng-deep .delete{width:max-content}:host ::ng-deep .delete .c-content{display:flex;align-items:center;gap:4px;color:var(--cui-danger)}:host ::ng-deep .description .c-content{display:flex;align-items:center;gap:4px}.button{padding:0}.description{width:max-content}.description__text{color:var(--cui-light-blue-600)}.description__text._created{color:var(--cui-base-900)}.description__icon{padding:4px}.wrapper{position:fixed;z-index:10;inset:0;background-color:var(--cui-base-0)}.header{display:flex;justify-content:space-between;padding:8px 16px;border-bottom:.5px solid var(--cui-base-200);background:var(--cui-base-0)}.info,.actions{display:flex;gap:12px;align-items:center}.section{padding-right:24px;padding-left:24px;padding-top:24px;height:calc(100% - 50px);overflow:hidden}.title{font-weight:500;font-size:14px;line-height:20px;margin:0}.editor{padding-right:32px;padding-left:32px;padding-top:32px;display:block;margin:0 auto;max-width:750px;height:100%}\n"], dependencies: [{ kind: "component", type: CuiEditorComponent, selector: "cui-editor", inputs: ["editorID", "config", "requestSize"], outputs: ["editorEmpty"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-editor-modal', imports: [
+                        CuiEditorComponent,
+                        CuiButtonModule,
+                        NgTemplateOutlet,
+                        CuiSvgModule
+                    ], standalone: true, template: "@if (buttonTemplate(); as template) {\r\n    <button\r\n        type=\"button\"\r\n        class=\"button\"\r\n        (click)=\"onModalOpen()\"\r\n    >\r\n        <ng-container [ngTemplateOutlet]=\"template\" />\r\n    </button>\r\n} @else {\r\n    <button\r\n        class=\"description\"\r\n        cuiButton\r\n        type=\"button\"\r\n        appearance=\"outlined-gray\"\r\n        icon=\"cuiIconRichText\"\r\n        size=\"sm\"\r\n        (click)=\"onModalOpen()\"\r\n        [disabled]=\"isButtonDisabled()\"\r\n    >\r\n        @if (editorId()) {\r\n            <span class=\"description__text _created\">{{ 'Description' }}</span>\r\n            <cui-svg\r\n                class=\"description__icon\"\r\n                icon=\"cuiIconEdit\"\r\n                color=\"var(--cui-base-500)\"\r\n            />\r\n        } @else {\r\n            <cui-svg\r\n                class=\"description__icon\"\r\n                icon=\"cuiIconPlus\"\r\n                color=\"var(--cui-light-blue-600)\"\r\n            />\r\n            <span class=\"description__text\">{{ 'Add description' }}</span>\r\n        }\r\n    </button>\r\n}\r\n@if (isOpen()) {\r\n    <div class=\"wrapper\">\r\n        @if (editorId(); as id) {\r\n            <header class=\"header\">\r\n                <div class=\"info\">\r\n                    <button\r\n                        cuiButton\r\n                        type=\"button\"\r\n                        icon=\"cuiIconChevronLeft\"\r\n                        size=\"xxs\"\r\n                        appearance=\"secondary\"\r\n                        shape=\"rounded\"\r\n                        (click)=\"close()\"\r\n                    ></button>\r\n                    <h1 class=\"title\">{{ title() }}</h1>\r\n                </div>\r\n                <div class=\"actions\">\r\n                    <!-- <cui-loader /> -->\r\n                    <button\r\n                        type=\"button\"\r\n                        cuiButton\r\n                        size=\"xs\"\r\n                        (click)=\"close()\"\r\n                    >\r\n                        {{ 'Done' }}\r\n                    </button>\r\n                </div>\r\n            </header>\r\n\r\n            <section class=\"section\">\r\n                <cui-editor\r\n                    #editorComponent\r\n                    class=\"editor\"\r\n                    [editorID]=\"id\"\r\n                    [config]=\"config()\"\r\n                />\r\n            </section>\r\n        }\r\n    </div>\r\n}\r\n", styles: [":host ::ng-deep .delete{width:max-content}:host ::ng-deep .delete .c-content{display:flex;align-items:center;gap:4px;color:var(--cui-danger)}:host ::ng-deep .description .c-content{display:flex;align-items:center;gap:4px}.button{padding:0}.description{width:max-content}.description__text{color:var(--cui-light-blue-600)}.description__text._created{color:var(--cui-base-900)}.description__icon{padding:4px}.wrapper{position:fixed;z-index:10;inset:0;background-color:var(--cui-base-0)}.header{display:flex;justify-content:space-between;padding:8px 16px;border-bottom:.5px solid var(--cui-base-200);background:var(--cui-base-0)}.info,.actions{display:flex;gap:12px;align-items:center}.section{padding-right:24px;padding-left:24px;padding-top:24px;height:calc(100% - 50px);overflow:hidden}.title{font-weight:500;font-size:14px;line-height:20px;margin:0}.editor{padding-right:32px;padding-left:32px;padding-top:32px;display:block;margin:0 auto;max-width:750px;height:100%}\n"] }]
+        }] });
+
+class CuiEditorBlockComponent {
+    constructor() {
+        this.skipFirstValidation = true;
+        this.editorConfig = signal(null);
+        this.isDescriptionModalOpen = signal(false);
+        this.isDescriptionEmpty = signal(false);
+        this.editorContainer = viewChild('editorContainer', {
+            read: ElementRef
+        });
+        this.title = input.required();
+        this.editorId = input.required();
+        this.config = input.required();
+        this.required = input(false);
+        this.editorEmpty = output();
+        this.initEditorConfig();
+    }
+    onToggleDescriptionModal() {
+        this.isDescriptionModalOpen.update((prev) => !prev);
+    }
+    onDescriptionChange(value) {
+        this.editorEmpty.emit(value);
+        if (this.skipFirstValidation) {
+            this.skipFirstValidation = false;
+            return;
+        }
+        this.isDescriptionEmpty.set(value);
+    }
+    initEditorConfig() {
+        const effectRef = effect(() => {
+            const element = this.editorContainer()?.nativeElement;
+            if (!element) {
+                return;
+            }
+            this.editorConfig.set({ ...this.config(), element });
+            effectRef.destroy();
+        }, { allowSignalWrites: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiEditorBlockComponent, isStandalone: true, selector: "cui-editor-block", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, editorId: { classPropertyName: "editorId", publicName: "editorId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editorEmpty: "editorEmpty" }, viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <div class=\"wrapper\">\r\n        <span class=\"title\">\r\n            {{ t('DESCRIPTION') }}\r\n            @if (required()) {\r\n                <span class=\"title__required\">*</span>\r\n            }\r\n        </span>\r\n        <ng-template #button>\r\n            <button\r\n                [cuiTooltip]=\"t('EXPAND_EDITOR_TO_FULLSCREEN')\"\r\n                cuiButton\r\n                size=\"xxs\"\r\n                type=\"button\"\r\n                appearance=\"ghost\"\r\n                icon=\"cuiIconMaximizeSm\"\r\n                (click)=\"onToggleDescriptionModal()\"\r\n            ></button>\r\n        </ng-template>\r\n        <cui-editor-modal\r\n            [title]=\"title()\"\r\n            [editorId]=\"editorId()\"\r\n            [buttonTemplate]=\"button\"\r\n            [config]=\"config()\"\r\n            (modalClosed)=\"onToggleDescriptionModal()\"\r\n        />\r\n    </div>\r\n    <div\r\n        #editorContainer\r\n        cuiContentWrapper\r\n        class=\"editor\"\r\n        [class.editor_invalid]=\"required() && isDescriptionEmpty()\"\r\n    >\r\n        @if (!isDescriptionModalOpen() && editorConfig()) {\r\n            <cui-editor\r\n                #editorComponent\r\n                [editorID]=\"editorId()\"\r\n                [config]=\"editorConfig()!\"\r\n                (editorEmpty)=\"onDescriptionChange($event)\"\r\n            />\r\n        }\r\n    </div>\r\n    @if (required() && isDescriptionEmpty()) {\r\n        <cui-hint hintType=\"error\">{{ t('DESCRIPTION_IS_REQUIRED') }}</cui-hint>\r\n    }\r\n</ng-container>\r\n", styles: [":host{padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--cui-base-10);border-radius:8px}.wrapper{display:flex;gap:8px;align-items:center;justify-content:space-between}.editor{padding-top:16px;padding-bottom:16px;display:block;max-height:650px;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", "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: ["editorID", "config", "requestSize"], outputs: ["editorEmpty"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiContentWrapperComponent, selector: "cui-content-wrapper, [cuiContentWrapper]", inputs: ["backgroundColor", "gap"] }, { kind: "directive", type: CuiTooltipDirective, selector: "[cuiTooltip]:not(ng-container):not(ng-template)", inputs: ["cuiTooltipContext", "cuiTooltipAppearance", "cuiTooltip"] }, { kind: "ngmodule", type: CuiHintModule }, { kind: "component", type: CuiHintComponent, selector: "cui-hint", inputs: ["hintType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorBlockComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-editor-block', imports: [
+                        CuiButtonModule,
+                        CuiEditorModalComponent,
+                        CuiEditorComponent,
+                        TranslocoDirective,
+                        CuiContentWrapperComponent,
+                        CuiTooltip,
+                        CuiHintModule
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n    <div class=\"wrapper\">\r\n        <span class=\"title\">\r\n            {{ t('DESCRIPTION') }}\r\n            @if (required()) {\r\n                <span class=\"title__required\">*</span>\r\n            }\r\n        </span>\r\n        <ng-template #button>\r\n            <button\r\n                [cuiTooltip]=\"t('EXPAND_EDITOR_TO_FULLSCREEN')\"\r\n                cuiButton\r\n                size=\"xxs\"\r\n                type=\"button\"\r\n                appearance=\"ghost\"\r\n                icon=\"cuiIconMaximizeSm\"\r\n                (click)=\"onToggleDescriptionModal()\"\r\n            ></button>\r\n        </ng-template>\r\n        <cui-editor-modal\r\n            [title]=\"title()\"\r\n            [editorId]=\"editorId()\"\r\n            [buttonTemplate]=\"button\"\r\n            [config]=\"config()\"\r\n            (modalClosed)=\"onToggleDescriptionModal()\"\r\n        />\r\n    </div>\r\n    <div\r\n        #editorContainer\r\n        cuiContentWrapper\r\n        class=\"editor\"\r\n        [class.editor_invalid]=\"required() && isDescriptionEmpty()\"\r\n    >\r\n        @if (!isDescriptionModalOpen() && editorConfig()) {\r\n            <cui-editor\r\n                #editorComponent\r\n                [editorID]=\"editorId()\"\r\n                [config]=\"editorConfig()!\"\r\n                (editorEmpty)=\"onDescriptionChange($event)\"\r\n            />\r\n        }\r\n    </div>\r\n    @if (required() && isDescriptionEmpty()) {\r\n        <cui-hint hintType=\"error\">{{ t('DESCRIPTION_IS_REQUIRED') }}</cui-hint>\r\n    }\r\n</ng-container>\r\n", styles: [":host{padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--cui-base-10);border-radius:8px}.wrapper{display:flex;gap:8px;align-items:center;justify-content:space-between}.editor{padding-top:16px;padding-bottom:16px;display:block;max-height:650px;overflow:auto}.editor_invalid{border:1px solid var(--cui-danger)}.title{font-weight:500;font-size:14px;line-height:20px}.title__required{color:var(--cui-danger)}\n"] }]
+        }], ctorParameters: () => [] });
+
+const cuiXNdjsonInterceptor = (request, next) => {
+    if (request.headers.get('Content-Type') !== 'application/x-ndjson') {
+        return next(request);
+    }
+    return new Observable((observer) => {
+        const controller = new AbortController();
+        const signal = controller.signal;
+        (async () => {
+            try {
+                const response = await fetch(request.urlWithParams, {
+                    method: request.method,
+                    headers: request.headers.keys().reduce((headers, key) => {
+                        headers[key] = request.headers.get(key);
+                        return headers;
+                    }, {}),
+                    body: request.body ? JSON.stringify(request.body) : null,
+                    signal
+                });
+                if (!response.ok) {
+                    const error = await response.json();
+                    observer.error(new HttpErrorResponse({ error }));
+                    return;
+                }
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder();
+                let buffer = '';
+                for (;;) {
+                    const { done, value } = await reader.read();
+                    if (done) {
+                        observer.complete();
+                        return;
+                    }
+                    buffer += decoder.decode(value);
+                    const lines = buffer.split('\n');
+                    buffer = lines.pop() ?? '';
+                    lines.forEach((line) => observer.next(JSON.parse(line)));
+                }
+            }
+            catch (error) {
+                observer.error(new HttpErrorResponse({ error }));
+            }
+        })();
+        return () => controller.abort();
+    });
+};
+
+const cuiLoaderInterceptor = (request, next) => {
+    const loaderService = inject(CuiLoaderService);
+    if (request.method === 'GET') {
+        return next(request);
+    }
+    loaderService.setLoading();
+    return next(request).pipe(catchError(throwError), finalize(loaderService.handleCompletedRequest.bind(loaderService)));
+};
+
+class CuiGeneralControlErrorHintComponent {
+    constructor() {
+        this.control = input.required();
+        this.isVisible = input();
+    }
+    get isInvalid() {
+        return this.isVisible() ?? (this.control().invalid && this.control().dirty);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiGeneralControlErrorHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiGeneralControlErrorHintComponent, isStandalone: true, selector: "cui-general-control-error-hint", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    @if (isInvalid) {\r\n        @if (control().errors; as errors) {\r\n            <cui-hint hintType=\"error\">\r\n                @if (errors['required']) {\r\n                    {{ t('FIELD_IS_REQUIRED') }}\r\n                } @else if (errors['maxlength']) {\r\n                    {{ t('PLEASE_KEEP_FIELD_UNDER_CHARACTERS', { value: errors['maxlength'].requiredLength }) }}\r\n                } @else if (errors['extraSpaces']) {\r\n                    {{ t('MUST_BE_WITHOUT_EXTRA_SPACES') }}\r\n                } @else if (errors['min']) {\r\n                    {{ t('MIN_VALUE_MUST_BE_MORE_THAN', { value: errors['min'].min }) }}\r\n                } @else if (errors['max']) {\r\n                    {{ t('MAX_VALUE_MUST_BE_LESS_THAN', { value: errors['max'].max }) }}\r\n                }\r\n            </cui-hint>\r\n        }\r\n    }\r\n</ng-container>\r\n", styles: [":host{display:inline-block}:host:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CuiHintModule }, { kind: "component", type: CuiHintComponent, selector: "cui-hint", inputs: ["hintType"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiGeneralControlErrorHintComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-general-control-error-hint', imports: [CuiHintModule, TranslocoDirective], standalone: true, changeDetection: ChangeDetectionStrategy.Default, template: "<ng-container *transloco=\"let t\">\r\n    @if (isInvalid) {\r\n        @if (control().errors; as errors) {\r\n            <cui-hint hintType=\"error\">\r\n                @if (errors['required']) {\r\n                    {{ t('FIELD_IS_REQUIRED') }}\r\n                } @else if (errors['maxlength']) {\r\n                    {{ t('PLEASE_KEEP_FIELD_UNDER_CHARACTERS', { value: errors['maxlength'].requiredLength }) }}\r\n                } @else if (errors['extraSpaces']) {\r\n                    {{ t('MUST_BE_WITHOUT_EXTRA_SPACES') }}\r\n                } @else if (errors['min']) {\r\n                    {{ t('MIN_VALUE_MUST_BE_MORE_THAN', { value: errors['min'].min }) }}\r\n                } @else if (errors['max']) {\r\n                    {{ t('MAX_VALUE_MUST_BE_LESS_THAN', { value: errors['max'].max }) }}\r\n                }\r\n            </cui-hint>\r\n        }\r\n    }\r\n</ng-container>\r\n", styles: [":host{display:inline-block}:host:empty{display:none}\n"] }]
+        }] });
+
+class CuiUtilityInfoComponent {
+    get controls() {
+        return this.form.controls;
+    }
+    get isTitleError() {
+        return this.controls.title.invalid && this.controls.title.dirty;
+    }
+    get isDescriptionError() {
+        return this.controls.description.invalid && this.controls.description.dirty;
+    }
+    constructor() {
+        this.destroy = inject(DestroyRef);
+        this.formBuilder = inject(NonNullableFormBuilder);
+        this.translocoService = inject(TranslocoService);
+        this.frameApiService = inject(CuiFrameApiService);
+        this.cuiAlertService = inject(CuiAlertService);
+        this.cuiIdService = inject(CuiIdService);
+        this.CONTROL_DELAY = 500;
+        this.MAX_FILE_SIZE = 20971520;
+        this.titleId = this.cuiIdService.generate();
+        this.descriptionId = this.cuiIdService.generate();
+        this.form = this.formBuilder.group({
+            title: this.formBuilder.control('', createDefaultValidators({ asyncDelay: this.CONTROL_DELAY })),
+            description: this.formBuilder.control('', createDefaultValidators({ asyncDelay: this.CONTROL_DELAY }))
+        });
+        this.isDescriptionModalOpen = signal(false);
+        this.isDescriptionEmpty = signal(false);
+        this.editorId = signal(null);
+        this.thumbnail = signal(null);
+        this.thumbnailUrl = computed(() => {
+            const thumbnail = this.thumbnail();
+            if (thumbnail?.resource) {
+                return thumbnail.resource;
+            }
+            return this.baseResourceUrl() + thumbnail.fileId;
+        });
+        this.uploadButtonName = computed(() => {
+            const thumbnail = this.thumbnail();
+            if (thumbnail?.name) {
+                return this.translocoService.translate('REPLACE_FILE');
+            }
+            return this.translocoService.translate('UPLOAD_FILE');
+        });
+        this.heading = null;
+        this.title = input.required();
+        this.framerId = input.required();
+        this.baseResourceUrl = input.required();
+        this.config = input.required();
+        this.formChanged = output();
+        this.isFormValidChanged = output();
+        this.initUtilityEffect();
+    }
+    onSelectFile() {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = 'image/jpg, image/jpeg, image/png, video/mp4';
+        input.onchange = () => {
+            const files = input.files;
+            if (!files?.length) {
+                return;
+            }
+            this.getFile(files);
+        };
+        input.click();
+    }
+    onEditorEmpty(isEmpty) {
+        this.isDescriptionEmpty.set(isEmpty);
+        this.isFormValidChanged.emit(this.checkFormValidation());
+    }
+    onRemoveThumbnail() {
+        const frameId = this.framerId();
+        const fragmentId = this.thumbnail()?.id;
+        if (!frameId || !fragmentId) {
+            return;
+        }
+        this.frameApiService.deleteResource(frameId, fragmentId).subscribe(() => {
+            this.thumbnail.update((prev) => ({ ...prev, fileId: null, name: null, resource: null }));
+        });
+    }
+    onToggleDescriptionModal() {
+        this.isDescriptionModalOpen.update((prev) => !prev);
+    }
+    initUtilityEffect() {
+        const effectRef = effect(() => {
+            const title = this.title();
+            if (!title) {
+                return;
+            }
+            this.initTitleSubscriptions();
+            this.initFrameFragments();
+            effectRef.destroy();
+        });
+    }
+    initTitleSubscriptions() {
+        this.form.patchValue({ title: this.title() });
+        this.form.statusChanges
+            .pipe(takeUntilDestroyed(this.destroy))
+            .subscribe(() => this.isFormValidChanged.emit(this.checkFormValidation()));
+        this.form.valueChanges
+            .pipe(takeUntilDestroyed(this.destroy), startWith(this.form.value), pairwise(), debounceTime(this.CONTROL_DELAY), map(([prev, current]) => this.compareFormValues([prev, current])))
+            .subscribe((value) => {
+            this.formChanged.emit(value);
+        });
+    }
+    initFrameFragments() {
+        const frameId = this.framerId();
+        if (!frameId) {
+            return;
+        }
+        this.frameApiService.getFrame(frameId).subscribe((frame) => {
+            frame.fragments.forEach((fragment) => {
+                if (fragment.type === "J_TEXT" /* FragmentType.jText */) {
+                    this.editorId.set(fragment?.id);
+                }
+                if (fragment.type === "RESOURCE_FILE" /* FragmentType.resourceFile */) {
+                    this.setResourceFile(fragment);
+                }
+            });
+        });
+    }
+    compareFormValues([prevGroup, currentGruop]) {
+        const keys = Object.keys(currentGruop);
+        const changedFields = {};
+        keys.forEach((key) => {
+            const prev = prevGroup[key];
+            const current = currentGruop[key];
+            if (prev === current) {
+                return;
+            }
+            changedFields[key] = current;
+        });
+        return changedFields;
+    }
+    setResourceFile(resource) {
+        const url = this.baseResourceUrl() + resource.fileId;
+        this.thumbnail.set(resource);
+        if (!url || resource?.name?.split('.').pop() !== 'mp4') {
+            return;
+        }
+        this.getCaptureFromVideo(url);
+    }
+    getFile(files) {
+        const file = files.item(0);
+        if (!file) {
+            return;
+        }
+        if (file.size > this.MAX_FILE_SIZE) {
+            this.cuiAlertService
+                .open(this.translocoService.translate('INVALID_FILE_SIZE'), {
+                status: 'error'
+            })
+                .subscribe();
+            return;
+        }
+        const isVideo = file.name.split('.').at(-1) === 'mp4';
+        const url = URL.createObjectURL(file);
+        if (isVideo) {
+            this.getCaptureFromVideo(url, file);
+        }
+        else {
+            this.thumbnail.update((prev) => ({ ...prev, name: file.name, resource: url }));
+        }
+        this.uploadFile(file);
+    }
+    uploadFile(file) {
+        const frameId = this.framerId();
+        const fragmentId = this.thumbnail()?.id;
+        if (!frameId || !fragmentId) {
+            return;
+        }
+        const formData = new FormData();
+        formData.append('resource', file);
+        this.frameApiService.uploadResource(formData, frameId, fragmentId).subscribe();
+    }
+    getCaptureFromVideo(url, file) {
+        const canvas = document.createElement('canvas');
+        const video = document.createElement('video');
+        video.src = url;
+        video.currentTime = 1;
+        canvas.width = 184;
+        canvas.height = 120;
+        video.onloadeddata = () => {
+            const context = canvas.getContext('2d');
+            if (!context) {
+                return;
+            }
+            context.drawImage(video, 0, 0, canvas.width, canvas.height);
+            canvas.toBlob((blob) => {
+                if (!blob) {
+                    return;
+                }
+                const videoCaptureUrl = URL.createObjectURL(blob);
+                this.thumbnail.update((prev) => ({
+                    ...prev,
+                    name: (file?.name || prev?.name),
+                    resource: videoCaptureUrl
+                }));
+            });
+        };
+        video.load();
+    }
+    checkFormValidation() {
+        console.log(this.isDescriptionEmpty(), this.form.invalid);
+        return !this.isDescriptionEmpty() && !this.form.invalid;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiUtilityInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiUtilityInfoComponent, isStandalone: true, selector: "cui-utility-info", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, baseResourceUrl: { classPropertyName: "baseResourceUrl", publicName: "baseResourceUrl", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { formChanged: "formChanged", isFormValidChanged: "isFormValidChanged" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <section class=\"content\">\r\n    <cui-form-field>\r\n        <label cuiLabel [isRequired]=\"true\" [for]=\"titleId\">\r\n            {{ t('TITLE') }}\r\n        </label>\r\n        <cui-input-text\r\n            [cuiTextFieldId]=\"titleId\"\r\n            [cuiTextFieldPlaceholder]=\"t('ADD_TITLE')\"\r\n            [cuiTextFieldIsError]=\"isTitleError\"\r\n            [formControl]=\"form.controls.title\"\r\n        />\r\n        @if (isTitleError) {\r\n            <cui-general-control-error-hint [control]=\"form.controls.title\" [isVisible]=\"true\" />\r\n        }\r\n    </cui-form-field>\r\n    <cui-form-field>\r\n        <label cuiLabel [isRequired]=\"true\" [for]=\"descriptionId\">\r\n            {{ t('SHORT_DESCRIPTION') }}\r\n        </label>\r\n         <cui-input-text\r\n            [cuiTextFieldId]=\"descriptionId\"\r\n            cuiTextFieldPlaceholder=\"{{t('SHORT_DESCRIPTION')}}...\"\r\n            [cuiTextFieldIsError]=\"isDescriptionError\"\r\n            [formControl]=\"form.controls.description\"\r\n        />\r\n        @if (isDescriptionError) {\r\n            <cui-general-control-error-hint [control]=\"form.controls.description\" [isVisible]=\"true\" />\r\n        }\r\n    </cui-form-field>\r\n    <section class=\"file\">\r\n      <span class=\"title\">{{ t('THUMBNAIL') }}</span>\r\n      <div class=\"content__upload\">\r\n        <div class=\"content__upload-file\">\r\n          @if (thumbnail()?.name; as fileId) {\r\n          <div class=\"image\">\r\n            <span class=\"image__name\">{{ thumbnail()?.name }}</span>\r\n            <!-- TODO: ngSrc -->\r\n            <img class=\"image__view\" [src]=\"thumbnailUrl()\" height=\"120\" width=\"184\" alt=\"Thumbnail\" />\r\n          </div>\r\n          }\r\n          <button type=\"button\" cuiButton appearance=\"outlined-gray\" size=\"xxs\" icon=\"cuiIconUpload\"\r\n            (click)=\"onSelectFile()\">\r\n            {{ uploadButtonName() }}\r\n          </button>\r\n          @if (thumbnail()?.name) {\r\n          <button class=\"content__remove-button\" cuiButton appearance=\"link\" size=\"sm\" type=\"button\"\r\n            (click)=\"onRemoveThumbnail()\">\r\n            {{ t('REMOVE') }}\r\n          </button>\r\n          }\r\n          <span class=\"content__accepted\">\r\n            {{ t('ACCEPTED') }}: JPG, JPEG, PNG, MP4 {{ t('UP_TO') }} 20MB\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </section>\r\n    @if (editorId(); as editorId) {\r\n        <cui-editor-block\r\n            [title]=\"form.controls.title.value || title()\"\r\n            [config]=\"config()\"\r\n            [editorId]=\"editorId\"\r\n            [required]=\"true\"\r\n            (editorEmpty)=\"onEditorEmpty($event)\"\r\n        ></cui-editor-block>\r\n    }\r\n  </section>\r\n</ng-container>\r\n", styles: ["::ng-deep cui-dialog:has(.instruction-description-modal){inset:0;margin:auto;transform:none!important}:host{display:block}.title{font-weight:500;font-size:14px;line-height:20px;display:flex;gap:2px}.title_required{color:var(--cui-danger)}.content{display:flex;flex-direction:column;gap:16px;padding:16px 24px}.content__upload{padding:12px 16px;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-base-10)}.content__accepted{color:var(--cui-base-500)}.content__upload-file{display:flex;align-items:center;gap:8px}.content__upload-file input[type=file]{display:none}.content__remove-button ::ng-deep .c-content{color:var(--cui-danger)!important}.file{display:flex;flex-direction:column;gap:4px}.description_invalid{border:1px solid var(--cui-danger)}.image{position:relative;display:inline-block}.image__view{border-radius:8px;object-fit:cover}.image__name{position:absolute;top:6px;left:14px;color:var(--cui-base-0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px;z-index:1}.image:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0003;z-index:0;pointer-events:none;border-radius:8px}.button-save{margin-left:auto}.instruction-description-modal{text-transform:none}.empty{padding:16px;color:var(--cui-base-500);text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CuiAccordionModule) }, { kind: "ngmodule", type: i0.forwardRef(() => CuiButtonModule) }, { kind: "component", type: i0.forwardRef(() => CuiButtonComponent), selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "ngmodule", type: i0.forwardRef(() => CuiFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => CuiFormFieldComponent), selector: "cui-form-field" }, { kind: "ngmodule", type: i0.forwardRef(() => CuiHintModule) }, { kind: "ngmodule", type: i0.forwardRef(() => CuiInputModule) }, { kind: "component", type: i0.forwardRef(() => CuiInputTextComponent), selector: "cui-input-text" }, { kind: "directive", type: i0.forwardRef(() => CuiTextFieldIdDirective), selector: "[cuiTextFieldId]", inputs: ["cuiTextFieldId"] }, { kind: "directive", type: i0.forwardRef(() => CuiTextFieldPlaceholderDirective), selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "directive", type: i0.forwardRef(() => CuiTextFieldIsErrorDirective), selector: "[cuiTextFieldIsError]", inputs: ["cuiTextFieldIsError"] }, { kind: "ngmodule", type: i0.forwardRef(() => CuiLabelModule) }, { kind: "component", type: i0.forwardRef(() => CuiLabelComponent), selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "component", type: i0.forwardRef(() => CuiEditorBlockComponent), selector: "cui-editor-block", inputs: ["title", "editorId", "config", "required"], outputs: ["editorEmpty"] }, { kind: "component", type: i0.forwardRef(() => CuiGeneralControlErrorHintComponent), selector: "cui-general-control-error-hint", inputs: ["control", "isVisible"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i2$1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i2$1.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => TranslocoDirective), selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiUtilityInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-utility-info', imports: [
+                        CuiAccordionModule,
+                        CuiButtonModule,
+                        CuiFormFieldModule,
+                        CuiHintModule,
+                        CuiInputModule,
+                        CuiLabelModule,
+                        forwardRef(() => CuiEditorBlockComponent),
+                        CuiGeneralControlErrorHintComponent,
+                        ReactiveFormsModule,
+                        TranslocoDirective,
+                        CuiTooltip
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n  <section class=\"content\">\r\n    <cui-form-field>\r\n        <label cuiLabel [isRequired]=\"true\" [for]=\"titleId\">\r\n            {{ t('TITLE') }}\r\n        </label>\r\n        <cui-input-text\r\n            [cuiTextFieldId]=\"titleId\"\r\n            [cuiTextFieldPlaceholder]=\"t('ADD_TITLE')\"\r\n            [cuiTextFieldIsError]=\"isTitleError\"\r\n            [formControl]=\"form.controls.title\"\r\n        />\r\n        @if (isTitleError) {\r\n            <cui-general-control-error-hint [control]=\"form.controls.title\" [isVisible]=\"true\" />\r\n        }\r\n    </cui-form-field>\r\n    <cui-form-field>\r\n        <label cuiLabel [isRequired]=\"true\" [for]=\"descriptionId\">\r\n            {{ t('SHORT_DESCRIPTION') }}\r\n        </label>\r\n         <cui-input-text\r\n            [cuiTextFieldId]=\"descriptionId\"\r\n            cuiTextFieldPlaceholder=\"{{t('SHORT_DESCRIPTION')}}...\"\r\n            [cuiTextFieldIsError]=\"isDescriptionError\"\r\n            [formControl]=\"form.controls.description\"\r\n        />\r\n        @if (isDescriptionError) {\r\n            <cui-general-control-error-hint [control]=\"form.controls.description\" [isVisible]=\"true\" />\r\n        }\r\n    </cui-form-field>\r\n    <section class=\"file\">\r\n      <span class=\"title\">{{ t('THUMBNAIL') }}</span>\r\n      <div class=\"content__upload\">\r\n        <div class=\"content__upload-file\">\r\n          @if (thumbnail()?.name; as fileId) {\r\n          <div class=\"image\">\r\n            <span class=\"image__name\">{{ thumbnail()?.name }}</span>\r\n            <!-- TODO: ngSrc -->\r\n            <img class=\"image__view\" [src]=\"thumbnailUrl()\" height=\"120\" width=\"184\" alt=\"Thumbnail\" />\r\n          </div>\r\n          }\r\n          <button type=\"button\" cuiButton appearance=\"outlined-gray\" size=\"xxs\" icon=\"cuiIconUpload\"\r\n            (click)=\"onSelectFile()\">\r\n            {{ uploadButtonName() }}\r\n          </button>\r\n          @if (thumbnail()?.name) {\r\n          <button class=\"content__remove-button\" cuiButton appearance=\"link\" size=\"sm\" type=\"button\"\r\n            (click)=\"onRemoveThumbnail()\">\r\n            {{ t('REMOVE') }}\r\n          </button>\r\n          }\r\n          <span class=\"content__accepted\">\r\n            {{ t('ACCEPTED') }}: JPG, JPEG, PNG, MP4 {{ t('UP_TO') }} 20MB\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </section>\r\n    @if (editorId(); as editorId) {\r\n        <cui-editor-block\r\n            [title]=\"form.controls.title.value || title()\"\r\n            [config]=\"config()\"\r\n            [editorId]=\"editorId\"\r\n            [required]=\"true\"\r\n            (editorEmpty)=\"onEditorEmpty($event)\"\r\n        ></cui-editor-block>\r\n    }\r\n  </section>\r\n</ng-container>\r\n", styles: ["::ng-deep cui-dialog:has(.instruction-description-modal){inset:0;margin:auto;transform:none!important}:host{display:block}.title{font-weight:500;font-size:14px;line-height:20px;display:flex;gap:2px}.title_required{color:var(--cui-danger)}.content{display:flex;flex-direction:column;gap:16px;padding:16px 24px}.content__upload{padding:12px 16px;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-base-10)}.content__accepted{color:var(--cui-base-500)}.content__upload-file{display:flex;align-items:center;gap:8px}.content__upload-file input[type=file]{display:none}.content__remove-button ::ng-deep .c-content{color:var(--cui-danger)!important}.file{display:flex;flex-direction:column;gap:4px}.description_invalid{border:1px solid var(--cui-danger)}.image{position:relative;display:inline-block}.image__view{border-radius:8px;object-fit:cover}.image__name{position:absolute;top:6px;left:14px;color:var(--cui-base-0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px;z-index:1}.image:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0003;z-index:0;pointer-events:none;border-radius:8px}.button-save{margin-left:auto}.instruction-description-modal{text-transform:none}.empty{padding:16px;color:var(--cui-base-500);text-align:center}\n"] }]
+        }], ctorParameters: () => [] });
+
+class CuiSelectedCategoryService {
+    constructor() {
+        this.editingIdSignal = signal(null);
+        this.creatingIdSignal = signal(null);
+        this.categorySignal = signal(null);
+        this.editingId = this.editingIdSignal.asReadonly();
+        this.creatingId = this.creatingIdSignal.asReadonly();
+        this.category = this.categorySignal.asReadonly();
+    }
+    setCurrentCategory(category) {
+        this.categorySignal.set(category);
+    }
+    setEditingId(id) {
+        this.editingIdSignal.set(id);
+        this.clearCreatingId();
+    }
+    setCreatingId(id) {
+        this.creatingIdSignal.set(id);
+        this.clearEditingId();
+    }
+    clearEditingId() {
+        this.editingIdSignal.set('');
+    }
+    clearCreatingId() {
+        this.creatingIdSignal.set('');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSelectedCategoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSelectedCategoryService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSelectedCategoryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class CuiCategoryFormComponent {
+    get isTitleInvalid() {
+        return this.titleControl.invalid && this.titleControl.dirty;
+    }
+    get isSubmitButtonDisabled() {
+        return this.isDisabled() || this.form.invalid;
+    }
+    constructor() {
+        this.nonNullableFormBuilder = inject(NonNullableFormBuilder);
+        this.form = this.nonNullableFormBuilder.group({
+            title: ['', createDefaultValidators({ asyncDelay: 0 })]
+        });
+        this.titleControl = this.form.controls.title;
+        this.isDisabled = input(false);
+        this.defaultTitle = input('');
+        this.created = output();
+        this.canceled = output();
+        this.input = viewChild.required('input', { read: (ElementRef) });
+        this.initInputDisableStateSubscription();
+    }
+    ngOnInit() {
+        this.initDefaultTitle();
+        this.initInputFocus();
+    }
+    onHostClick(event) {
+        event.stopPropagation();
+    }
+    onSubmit() {
+        if (this.form.invalid) {
+            return;
+        }
+        this.created.emit(this.form.value.title);
+    }
+    onCancel(event) {
+        event.stopPropagation();
+        this.canceled.emit();
+    }
+    initInputDisableStateSubscription() {
+        effect(() => {
+            if (this.isDisabled()) {
+                this.titleControl.disable();
+                return;
+            }
+            this.titleControl.enable();
+        });
+    }
+    initDefaultTitle() {
+        this.form.patchValue({ title: this.defaultTitle() });
+    }
+    initInputFocus() {
+        Promise.resolve().then(() => this.input().nativeElement.focus());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCategoryFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: CuiCategoryFormComponent, isStandalone: true, selector: "cui-category-form", inputs: { isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, defaultTitle: { classPropertyName: "defaultTitle", publicName: "defaultTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { created: "created", canceled: "canceled" }, host: { listeners: { "click": "onHostClick($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n    <form\r\n        [formGroup]=\"form\"\r\n        class=\"form\"\r\n        (ngSubmit)=\"onSubmit()\"\r\n    >\r\n        <div class=\"input\">\r\n            <input\r\n                #input\r\n                cuiGhostInput\r\n                formControlName=\"title\"\r\n                type=\"text\"\r\n                placeholder=\"{{ t('ADD_CATEGORY_NAME') }}...\"\r\n                [isError]=\"isTitleInvalid\"\r\n                (keyup)=\"$event.preventDefault()\"\r\n            />\r\n            <cui-general-control-error-hint [control]=\"titleControl\" />\r\n        </div>\r\n        <button\r\n            cuiIconButton\r\n            type=\"submit\"\r\n            icon=\"cuiIconCheck\"\r\n            color=\"var(--cui-success)\"\r\n            [disabled]=\"isSubmitButtonDisabled\"\r\n            class=\"button\"\r\n        ></button>\r\n    </form>\r\n    <button\r\n        cuiIconButton\r\n        type=\"button\"\r\n        icon=\"cuiIconXCircle\"\r\n        color=\"var(--cui-danger)\"\r\n        (click)=\"onCancel($event)\"\r\n        [disabled]=\"isDisabled()\"\r\n        class=\"button\"\r\n    ></button>\r\n</ng-container>\r\n", styles: [":host{padding-top:2px;padding-bottom:2px;display:flex;gap:4px;flex-grow:1}.form,.input{flex-grow:1}.form{display:flex;gap:4px}.input{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.button{width:28px}.button:disabled{opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: CuiFormFieldModule }, { kind: "ngmodule", type: CuiHintModule }, { kind: "ngmodule", type: CuiIconButtonModule }, { kind: "component", type: CuiIconButtonComponent, selector: "button[cuiIconButton][icon], a[cuiIconButton][icon]", inputs: ["icon", "color", "hoverColor"] }, { kind: "component", type: CuiGeneralControlErrorHintComponent, selector: "cui-general-control-error-hint", inputs: ["control", "isVisible"] }, { kind: "component", type: CuiGhostInputComponent, selector: "input [cuiGhostInput]", inputs: ["isError"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCategoryFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-category-form', imports: [
+                        CuiFormFieldModule,
+                        CuiHintModule,
+                        CuiIconButtonModule,
+                        CuiGeneralControlErrorHintComponent,
+                        CuiGhostInputComponent,
+                        ReactiveFormsModule,
+                        TranslocoDirective
+                    ], standalone: true, host: {
+                        '(click)': 'onHostClick($event)'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n    <form\r\n        [formGroup]=\"form\"\r\n        class=\"form\"\r\n        (ngSubmit)=\"onSubmit()\"\r\n    >\r\n        <div class=\"input\">\r\n            <input\r\n                #input\r\n                cuiGhostInput\r\n                formControlName=\"title\"\r\n                type=\"text\"\r\n                placeholder=\"{{ t('ADD_CATEGORY_NAME') }}...\"\r\n                [isError]=\"isTitleInvalid\"\r\n                (keyup)=\"$event.preventDefault()\"\r\n            />\r\n            <cui-general-control-error-hint [control]=\"titleControl\" />\r\n        </div>\r\n        <button\r\n            cuiIconButton\r\n            type=\"submit\"\r\n            icon=\"cuiIconCheck\"\r\n            color=\"var(--cui-success)\"\r\n            [disabled]=\"isSubmitButtonDisabled\"\r\n            class=\"button\"\r\n        ></button>\r\n    </form>\r\n    <button\r\n        cuiIconButton\r\n        type=\"button\"\r\n        icon=\"cuiIconXCircle\"\r\n        color=\"var(--cui-danger)\"\r\n        (click)=\"onCancel($event)\"\r\n        [disabled]=\"isDisabled()\"\r\n        class=\"button\"\r\n    ></button>\r\n</ng-container>\r\n", styles: [":host{padding-top:2px;padding-bottom:2px;display:flex;gap:4px;flex-grow:1}.form,.input{flex-grow:1}.form{display:flex;gap:4px}.input{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.button{width:28px}.button:disabled{opacity:.5}\n"] }]
+        }], ctorParameters: () => [] });
+
+class CuiCreateCategoryItemComponent {
+    constructor() {
+        this.created = output();
+        this.canceled = output();
+        this.isDisabled = input(false);
+    }
+    onSubmit(title) {
+        this.created.emit(title);
+    }
+    onCancel() {
+        this.canceled.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCreateCategoryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiCreateCategoryItemComponent, isStandalone: true, selector: "cui-create-category-item", inputs: { isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { created: "created", canceled: "canceled" }, ngImport: i0, template: "<cui-svg\r\n    icon=\"cuiIconFolder\"\r\n    color=\"var(--cui-base-500)\"\r\n    class=\"icon\"\r\n/>\r\n<cui-category-form\r\n    [isDisabled]=\"isDisabled()\"\r\n    (created)=\"onSubmit($event)\"\r\n    (canceled)=\"onCancel()\"\r\n/>\r\n", styles: [":host{padding-right:4px;padding-left:4px;display:flex;gap:4px;align-items:flex-start;min-height:32px}.icon{padding:6px 2px}\n"], dependencies: [{ kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "component", type: CuiCategoryFormComponent, selector: "cui-category-form", inputs: ["isDisabled", "defaultTitle"], outputs: ["created", "canceled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCreateCategoryItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-create-category-item', imports: [CuiSvgModule, CuiCategoryFormComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-svg\r\n    icon=\"cuiIconFolder\"\r\n    color=\"var(--cui-base-500)\"\r\n    class=\"icon\"\r\n/>\r\n<cui-category-form\r\n    [isDisabled]=\"isDisabled()\"\r\n    (created)=\"onSubmit($event)\"\r\n    (canceled)=\"onCancel()\"\r\n/>\r\n", styles: [":host{padding-right:4px;padding-left:4px;display:flex;gap:4px;align-items:flex-start;min-height:32px}.icon{padding:6px 2px}\n"] }]
+        }] });
+
+class CuiCategoryItemComponent {
+    constructor() {
+        this.treeStructNavigatorApiService = inject(CuiTreeStructNavigatorApiService);
+        this.selectedCategoryService = inject(CuiSelectedCategoryService);
+        this.isStageCreationLoading = signal(false);
+        this.stageStorageChildren = signal([]);
+        this.areChildrenOpened = signal(false);
+        this.openCloseButtonIcon = computed(() => this.areChildrenOpened() ? 'cuiIconChevronDown' : 'cuiIconChevronRight');
+        this.doChildrenExist = computed(() => this.stageStorage().children.length || this.stageStorageChildren().length);
+        this.isOpenCloseButtonHidden = computed(() => !this.doChildrenExist());
+        this.stageStorageIcon = computed(() => this.areChildrenOpened() && this.doChildrenExist() ? 'cuiIconFolderOpen' : 'cuiIconFolder');
+        this.isSubcategoryCreating = signal(false);
+        this.isSubcategoryCreationLoading = signal(false);
+        this.alignItems = computed(() => (this.isTitleEdit() ? 'flex-start' : 'center'));
+        this.isTitleEdit = computed(() => this.selectedCategoryService.editingId() === this.stageStorage().id);
+        this.isCreateCategoryControlVisible = computed(() => (this.selectedCategoryService.creatingId() === this.stageStorage().id && this.isSubcategoryCreating()) ||
+            this.isSubcategoryCreationLoading());
+        this.stageStorage = input.required();
+        this.categoryTitle = signal('');
+        this.category = computed(() => ({
+            ...this.stageStorage(),
+            title: this.categoryTitle() || this.stageStorage().title
+        }));
+        this.initStageStorageChildren();
+    }
+    onSelectCategory() {
+        this.selectedCategoryService.setCurrentCategory(this.category());
+    }
+    onToggleChildren(event) {
+        event.stopPropagation();
+        this.areChildrenOpened.update((value) => !value);
+        if (this.areChildrenOpened()) {
+            return;
+        }
+        this.isSubcategoryCreating.set(false);
+    }
+    onTitleChanged(title) {
+        this.onCancelTitleEdit();
+        if (title === this.category().title) {
+            return;
+        }
+        this.treeStructNavigatorApiService.updateTitle(this.stageStorage().id, title).subscribe(() => {
+            this.categoryTitle.set(title);
+            if (this.category().id === this.selectedCategoryService.category()?.id) {
+                this.selectedCategoryService.setCurrentCategory(this.category());
+            }
+        });
+    }
+    onStartTitleEdit(event) {
+        event?.stopPropagation();
+        this.selectedCategoryService.setEditingId(this.stageStorage().id);
+        this.onCreatingSubcategoryCanceled();
+    }
+    onCancelTitleEdit() {
+        this.selectedCategoryService.clearEditingId();
+    }
+    onStartCreatingSubcategory(event) {
+        event.stopPropagation();
+        this.isSubcategoryCreating.set(true);
+        this.areChildrenOpened.set(true);
+        this.selectedCategoryService.setCreatingId(this.stageStorage().id);
+    }
+    onCreateNewSubcategoryCategory(title) {
+        this.isSubcategoryCreating.set(false);
+        this.isSubcategoryCreationLoading.set(true);
+        this.treeStructNavigatorApiService
+            .createStageStorageToParent(this.stageStorage().id, title)
+            .pipe(finalize(this.isSubcategoryCreationLoading.set.bind(this.isSubcategoryCreationLoading, false)))
+            .subscribe((stateStorage) => {
+            this.stageStorageChildren.update((value) => [...value, stateStorage]);
+        });
+    }
+    onCreatingSubcategoryCanceled() {
+        this.isSubcategoryCreating.set(false);
+        this.selectedCategoryService.clearCreatingId();
+    }
+    initStageStorageChildren() {
+        effect(() => {
+            if (!this.areChildrenOpened() || this.stageStorageChildren().length) {
+                return;
+            }
+            const stageStorage = this.stageStorage();
+            const stageStorageChildren = stageStorage.children;
+            if (!stageStorageChildren.length) {
+                return;
+            }
+            if (typeof stageStorageChildren[0] !== 'string') {
+                this.stageStorageChildren.set(stageStorageChildren);
+                return;
+            }
+            this.treeStructNavigatorApiService.getStageStoragesByParent(stageStorage.id).subscribe((storage) => {
+                this.stageStorageChildren.update((prevStageStorages) => prevStageStorages ? [...prevStageStorages, storage] : [storage]);
+            });
+        }, { allowSignalWrites: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCategoryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiCategoryItemComponent, isStandalone: true, selector: "cui-category-item", inputs: { stageStorage: { classPropertyName: "stageStorage", publicName: "stageStorage", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *cuiLet=\"category() as stage\">\r\n    <button\r\n        type=\"button\"\r\n        [style.align-items]=\"alignItems()\"\r\n        [disabled]=\"isStageCreationLoading()\"\r\n        class=\"category\"\r\n        (click)=\"onSelectCategory()\"\r\n    >\r\n        <button\r\n            type=\"button\"\r\n            ccFlexContainerDirective\r\n            class=\"category__open-close-button\"\r\n            [class.category__open-close-button_hidden]=\"isOpenCloseButtonHidden()\"\r\n            (click)=\"onToggleChildren($event)\"\r\n        >\r\n            <cui-svg\r\n                [icon]=\"openCloseButtonIcon()\"\r\n                color=\"var(--cui-base-500)\"\r\n            />\r\n        </button>\r\n        <cui-svg\r\n            [icon]=\"stageStorageIcon()\"\r\n            color=\"var(--cui-base-500)\"\r\n            class=\"icon\"\r\n        />\r\n        @if (isTitleEdit()) {\r\n            <cui-category-form\r\n                [defaultTitle]=\"stage.title\"\r\n                (created)=\"onTitleChanged($event)\"\r\n                (canceled)=\"onCancelTitleEdit()\"\r\n            />\r\n        } @else {\r\n            <span class=\"category__title\">{{ stage.title }}</span>\r\n\r\n            <button\r\n                cuiButton\r\n                type=\"button\"\r\n                appearance=\"ghost\"\r\n                size=\"xxs\"\r\n                icon=\"cuiIconEdit\"\r\n                class=\"category__add-subcategory-button\"\r\n                (click)=\"onStartTitleEdit($event)\"\r\n            ></button>\r\n            <button\r\n                cuiButton\r\n                type=\"button\"\r\n                appearance=\"ghost\"\r\n                size=\"xxs\"\r\n                icon=\"cuiIconPlus\"\r\n                class=\"category__add-subcategory-button\"\r\n                (click)=\"onStartCreatingSubcategory($event)\"\r\n            ></button>\r\n        }\r\n    </button>\r\n    <div\r\n        [hidden]=\"!areChildrenOpened()\"\r\n        class=\"list-wrapper\"\r\n    >\r\n        <cui-categories-list [stageStorages]=\"stageStorageChildren()\" />\r\n        @if (isCreateCategoryControlVisible()) {\r\n            <cui-create-category-item\r\n                class=\"create-category\"\r\n                [isDisabled]=\"isSubcategoryCreationLoading()\"\r\n                (created)=\"onCreateNewSubcategoryCategory($event)\"\r\n                (canceled)=\"onCreatingSubcategoryCanceled()\"\r\n            />\r\n        }\r\n    </div>\r\n</ng-container>\r\n", styles: [".category{display:flex;gap:4px;padding:2px 4px;width:100%;min-height:32px;border-radius:8px}@media (hover: hover){.category:hover{background:var(--cui-base-10)}}.category:active{background:var(--cui-base-10)}.category__open-close-button{padding:2px;border-radius:4px;margin:4px 0}@media (hover: hover){.category__open-close-button:hover{background:var(--cui-base-100)}}.category__open-close-button:active{background:var(--cui-base-100)}.category__open-close-button_hidden{visibility:hidden}.category__title{flex:1;text-align:start;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.category__add-subcategory-button{--cui-base-50: var(--cui-base-200)}.list-wrapper{padding-left:8px}.create-category{margin-left:24px}.icon{padding-right:2px;padding-left:2px;height:28px}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CuiButtonModule) }, { kind: "component", type: i0.forwardRef(() => CuiButtonComponent), selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "ngmodule", type: i0.forwardRef(() => CuiIconButtonModule) }, { kind: "directive", type: i0.forwardRef(() => CuiLetDirective), selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "ngmodule", type: i0.forwardRef(() => CuiSvgModule) }, { kind: "component", type: i0.forwardRef(() => CuiSvgComponent), selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "component", type: i0.forwardRef(() => CuiCategoryFormComponent), selector: "cui-category-form", inputs: ["isDisabled", "defaultTitle"], outputs: ["created", "canceled"] }, { kind: "component", type: i0.forwardRef(() => CuiCreateCategoryItemComponent), selector: "cui-create-category-item", inputs: ["isDisabled"], outputs: ["created", "canceled"] }, { kind: "component", type: i0.forwardRef(() => CuiCategoriesListComponent), selector: "cui-categories-list", inputs: ["stageStorages"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCategoryItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-category-item', imports: [
+                        CuiButtonModule,
+                        CuiIconButtonModule,
+                        CuiLetDirective,
+                        CuiSvgModule,
+                        CuiCategoryFormComponent,
+                        CuiCreateCategoryItemComponent,
+                        forwardRef(() => CuiCategoriesListComponent)
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *cuiLet=\"category() as stage\">\r\n    <button\r\n        type=\"button\"\r\n        [style.align-items]=\"alignItems()\"\r\n        [disabled]=\"isStageCreationLoading()\"\r\n        class=\"category\"\r\n        (click)=\"onSelectCategory()\"\r\n    >\r\n        <button\r\n            type=\"button\"\r\n            ccFlexContainerDirective\r\n            class=\"category__open-close-button\"\r\n            [class.category__open-close-button_hidden]=\"isOpenCloseButtonHidden()\"\r\n            (click)=\"onToggleChildren($event)\"\r\n        >\r\n            <cui-svg\r\n                [icon]=\"openCloseButtonIcon()\"\r\n                color=\"var(--cui-base-500)\"\r\n            />\r\n        </button>\r\n        <cui-svg\r\n            [icon]=\"stageStorageIcon()\"\r\n            color=\"var(--cui-base-500)\"\r\n            class=\"icon\"\r\n        />\r\n        @if (isTitleEdit()) {\r\n            <cui-category-form\r\n                [defaultTitle]=\"stage.title\"\r\n                (created)=\"onTitleChanged($event)\"\r\n                (canceled)=\"onCancelTitleEdit()\"\r\n            />\r\n        } @else {\r\n            <span class=\"category__title\">{{ stage.title }}</span>\r\n\r\n            <button\r\n                cuiButton\r\n                type=\"button\"\r\n                appearance=\"ghost\"\r\n                size=\"xxs\"\r\n                icon=\"cuiIconEdit\"\r\n                class=\"category__add-subcategory-button\"\r\n                (click)=\"onStartTitleEdit($event)\"\r\n            ></button>\r\n            <button\r\n                cuiButton\r\n                type=\"button\"\r\n                appearance=\"ghost\"\r\n                size=\"xxs\"\r\n                icon=\"cuiIconPlus\"\r\n                class=\"category__add-subcategory-button\"\r\n                (click)=\"onStartCreatingSubcategory($event)\"\r\n            ></button>\r\n        }\r\n    </button>\r\n    <div\r\n        [hidden]=\"!areChildrenOpened()\"\r\n        class=\"list-wrapper\"\r\n    >\r\n        <cui-categories-list [stageStorages]=\"stageStorageChildren()\" />\r\n        @if (isCreateCategoryControlVisible()) {\r\n            <cui-create-category-item\r\n                class=\"create-category\"\r\n                [isDisabled]=\"isSubcategoryCreationLoading()\"\r\n                (created)=\"onCreateNewSubcategoryCategory($event)\"\r\n                (canceled)=\"onCreatingSubcategoryCanceled()\"\r\n            />\r\n        }\r\n    </div>\r\n</ng-container>\r\n", styles: [".category{display:flex;gap:4px;padding:2px 4px;width:100%;min-height:32px;border-radius:8px}@media (hover: hover){.category:hover{background:var(--cui-base-10)}}.category:active{background:var(--cui-base-10)}.category__open-close-button{padding:2px;border-radius:4px;margin:4px 0}@media (hover: hover){.category__open-close-button:hover{background:var(--cui-base-100)}}.category__open-close-button:active{background:var(--cui-base-100)}.category__open-close-button_hidden{visibility:hidden}.category__title{flex:1;text-align:start;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.category__add-subcategory-button{--cui-base-50: var(--cui-base-200)}.list-wrapper{padding-left:8px}.create-category{margin-left:24px}.icon{padding-right:2px;padding-left:2px;height:28px}\n"] }]
+        }], ctorParameters: () => [] });
+
+class CuiCategoriesListComponent {
+    constructor() {
+        this.stageStorages = input.required();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCategoriesListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiCategoriesListComponent, isStandalone: true, selector: "cui-categories-list", inputs: { stageStorages: { classPropertyName: "stageStorages", publicName: "stageStorages", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (stageStorage of stageStorages(); track stageStorage.id) {\r\n    <cui-category-item [stageStorage]=\"stageStorage\" />\r\n}\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CuiIconButtonModule) }, { kind: "ngmodule", type: i0.forwardRef(() => CuiSvgModule) }, { kind: "component", type: i0.forwardRef(() => CuiCategoryItemComponent), selector: "cui-category-item", inputs: ["stageStorage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCategoriesListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-categories-list', imports: [CuiIconButtonModule, CuiSvgModule, forwardRef(() => CuiCategoryItemComponent)], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (stageStorage of stageStorages(); track stageStorage.id) {\r\n    <cui-category-item [stageStorage]=\"stageStorage\" />\r\n}\r\n", styles: [":host{display:block}\n"] }]
+        }] });
+
+class CuiCategoriesComponent {
+    constructor() {
+        this.treeStructNavigatorApiService = inject(CuiTreeStructNavigatorApiService);
+        this.selectedCategoryService = inject(CuiSelectedCategoryService);
+        this.stageStorages = signal(null);
+        this.isCategoryCreating = signal(false);
+        this.isCategoryCreationLoading = signal(false);
+        this.isCreateCategoryControlVisible = computed(() => (this.selectedCategoryService.creatingId() === this.treeStructType() && this.isCategoryCreating()) ||
+            this.isCategoryCreationLoading());
+        this.dropdown = viewChild.required('dropdown');
+        this.treeStructType = input.required();
+        this.buttonId = input();
+        this.disabled = input(false, { transform: booleanAttribute });
+        this.initSelectCategoryEffect();
+    }
+    onOpenStageStorages() {
+        this.selectedCategoryService.clearCreatingId();
+        this.selectedCategoryService.clearEditingId();
+        if (this.stageStorages()?.length) {
+            return;
+        }
+        this.treeStructNavigatorApiService.getStageStorages(this.treeStructType()).subscribe((stageStorage) => {
+            this.stageStorages.update((prevStageStorages) => prevStageStorages ? [...prevStageStorages, stageStorage] : [stageStorage]);
+        });
+    }
+    onStartCreatingNewCategory() {
+        this.isCategoryCreating.set(true);
+        this.selectedCategoryService.setCreatingId(this.treeStructType());
+    }
+    onCreateNewCategory(title) {
+        this.isCategoryCreating.set(false);
+        this.selectedCategoryService.clearCreatingId();
+        this.isCategoryCreationLoading.set(true);
+        this.treeStructNavigatorApiService
+            .createStageStorage(title, this.treeStructType())
+            .pipe(finalize(this.isCategoryCreationLoading.set.bind(this, false)))
+            .subscribe((stateStorage) => this.stageStorages.update((value) => [...(value || []), stateStorage]));
+    }
+    onCreatingCategoryCanceled() {
+        this.isCategoryCreating.set(false);
+        this.selectedCategoryService.clearCreatingId();
+    }
+    initSelectCategoryEffect() {
+        effect(() => {
+            this.selectedCategoryService.category();
+            this.dropdown().close();
+        }, { allowSignalWrites: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCategoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiCategoriesComponent, isStandalone: true, selector: "cui-categories", inputs: { treeStructType: { classPropertyName: "treeStructType", publicName: "treeStructType", isSignal: true, isRequired: true, transformFunction: null }, buttonId: { classPropertyName: "buttonId", publicName: "buttonId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\r\n    [attr.id]=\"buttonId()\"\r\n    #dropdown=\"cuiDropdown\"\r\n    [cuiDropdown]=\"dropdownContent\"\r\n    orientation=\"stretch\"\r\n    type=\"button\"\r\n    class=\"target\"\r\n    [disabled]=\"disabled()\"\r\n    (click)=\"onOpenStageStorages()\"\r\n>\r\n    <ng-content />\r\n</button>\r\n\r\n<ng-template #dropdownContent>\r\n    <cui-dropdown-wrapper\r\n        *transloco=\"let t\"\r\n        [title]=\"t('SELECT_OR_CREATE_CATEGORY')\"\r\n        width=\"100%\"\r\n        class=\"dropdown-wrapper\"\r\n    >\r\n        <ng-container *cuiLet=\"stageStorages() as stageStorages\">\r\n            @if (stageStorages && stageStorages?.length) {\r\n                <cui-categories-list [stageStorages]=\"stageStorages\" />\r\n            }\r\n            @if (isCreateCategoryControlVisible()) {\r\n                <cui-create-category-item\r\n                    class=\"create-category\"\r\n                    [isDisabled]=\"isCategoryCreationLoading()\"\r\n                    (created)=\"onCreateNewCategory($event)\"\r\n                    (canceled)=\"onCreatingCategoryCanceled()\"\r\n                />\r\n            } @else if (!stageStorages?.length) {\r\n                <cui-empty-state\r\n                    class=\"empty\"\r\n                    [subtitle]=\"t('NO_CATEGORY_TO_VIEW_YET')\"\r\n                />\r\n            }\r\n        </ng-container>\r\n        <button\r\n            ccDropdownFooterContent\r\n            cuiButton\r\n            type=\"button\"\r\n            appearance=\"ghost\"\r\n            size=\"xxs\"\r\n            icon=\"cuiIconPlus\"\r\n            (click)=\"onStartCreatingNewCategory()\"\r\n        >\r\n            {{ t('NEW_CATEGORY') }}\r\n        </button>\r\n    </cui-dropdown-wrapper>\r\n</ng-template>\r\n", styles: ["::ng-deep .dropdown-wrapper .scrollable-content{flex:1;display:flex;flex-direction:column}.target{display:block;padding:0;width:100%;border-radius:8px;border:1px solid transparent}.target:focus{box-shadow:0 0 0 2px var(--cui-focus);border:1px solid var(--cui-info)}.target:disabled{cursor:default}.create-category{margin-left:24px}.empty{margin:auto}.dropdown-wrapper{display:block;height:350px}\n"], dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "directive", type: CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "directive", type: CuiDropdownDirective, selector: "[cuiDropdown]", inputs: ["cuiDropdown", "orientation"], outputs: ["isOpened"], exportAs: ["cuiDropdown"] }, { kind: "component", type: CuiDropdownWrapperComponent, selector: "cui-dropdown-wrapper", inputs: ["title", "width"] }, { kind: "component", type: CuiEmptyStateComponent, selector: "cui-empty-state, [cuiEmptyState]", inputs: ["title", "subtitle"] }, { kind: "component", type: CuiCreateCategoryItemComponent, selector: "cui-create-category-item", inputs: ["isDisabled"], outputs: ["created", "canceled"] }, { kind: "component", type: CuiCategoriesListComponent, selector: "cui-categories-list", inputs: ["stageStorages"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiCategoriesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-categories', imports: [
+                        CuiButtonModule,
+                        CuiLetDirective,
+                        CuiDropdownDirective,
+                        CuiDropdownWrapperComponent,
+                        CuiEmptyStateComponent,
+                        CuiCreateCategoryItemComponent,
+                        CuiCategoriesListComponent,
+                        TranslocoDirective
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n    [attr.id]=\"buttonId()\"\r\n    #dropdown=\"cuiDropdown\"\r\n    [cuiDropdown]=\"dropdownContent\"\r\n    orientation=\"stretch\"\r\n    type=\"button\"\r\n    class=\"target\"\r\n    [disabled]=\"disabled()\"\r\n    (click)=\"onOpenStageStorages()\"\r\n>\r\n    <ng-content />\r\n</button>\r\n\r\n<ng-template #dropdownContent>\r\n    <cui-dropdown-wrapper\r\n        *transloco=\"let t\"\r\n        [title]=\"t('SELECT_OR_CREATE_CATEGORY')\"\r\n        width=\"100%\"\r\n        class=\"dropdown-wrapper\"\r\n    >\r\n        <ng-container *cuiLet=\"stageStorages() as stageStorages\">\r\n            @if (stageStorages && stageStorages?.length) {\r\n                <cui-categories-list [stageStorages]=\"stageStorages\" />\r\n            }\r\n            @if (isCreateCategoryControlVisible()) {\r\n                <cui-create-category-item\r\n                    class=\"create-category\"\r\n                    [isDisabled]=\"isCategoryCreationLoading()\"\r\n                    (created)=\"onCreateNewCategory($event)\"\r\n                    (canceled)=\"onCreatingCategoryCanceled()\"\r\n                />\r\n            } @else if (!stageStorages?.length) {\r\n                <cui-empty-state\r\n                    class=\"empty\"\r\n                    [subtitle]=\"t('NO_CATEGORY_TO_VIEW_YET')\"\r\n                />\r\n            }\r\n        </ng-container>\r\n        <button\r\n            ccDropdownFooterContent\r\n            cuiButton\r\n            type=\"button\"\r\n            appearance=\"ghost\"\r\n            size=\"xxs\"\r\n            icon=\"cuiIconPlus\"\r\n            (click)=\"onStartCreatingNewCategory()\"\r\n        >\r\n            {{ t('NEW_CATEGORY') }}\r\n        </button>\r\n    </cui-dropdown-wrapper>\r\n</ng-template>\r\n", styles: ["::ng-deep .dropdown-wrapper .scrollable-content{flex:1;display:flex;flex-direction:column}.target{display:block;padding:0;width:100%;border-radius:8px;border:1px solid transparent}.target:focus{box-shadow:0 0 0 2px var(--cui-focus);border:1px solid var(--cui-info)}.target:disabled{cursor:default}.create-category{margin-left:24px}.empty{margin:auto}.dropdown-wrapper{display:block;height:350px}\n"] }]
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AngularOutsideLoaderService, CUI_ALERTS, CUI_ALERT_CONTEXT, CUI_ALERT_DEFAULT_OPTIONS, CUI_ALERT_OPTIONS, CUI_ANIMATIONS_DEFAULT_DURATION, CUI_BANNER_DEFAULT_OPTIONS, CUI_BANNER_OPTIONS, CUI_BUTTON_DEFAULT_OPTIONS, CUI_BUTTON_OPTIONS, CUI_DEFAULT_THEME, CUI_DIALOGS, CUI_DIALOG_CONTEXT, CUI_DIALOG_DEFAULT_OPTIONS, CUI_DIALOG_OPTIONS, CUI_INPUT_TIME_DEFAULT_OPTIONS, CUI_INPUT_TIME_OPTIONS, CUI_NOTIFICATION_DEFAULT_OPTIONS, CUI_NOTIFICATION_ICONS, CUI_NOTIFICATION_ICON_OPTIONS, CUI_NOTIFICATION_ICON_OPTIONS_DEFAULT_MODE, CUI_NOTIFICATION_ICON_OPTIONS_LIGHT_MODE, CUI_NOTIFICATION_OPTIONS, CUI_ROOT_SELECTOR, CUI_TAB_ACTIVATE, CUI_TEXT_FIELD_CONTROLLER, CUI_TEXT_FIELD_ICON_LEFT, CUI_TEXT_FIELD_ID, CUI_TEXT_FIELD_IS_ERROR, CUI_TEXT_FIELD_PLACEHOLDER, CUI_TEXT_FIELD_SIZE, CUI_TEXT_FILED_CONTROLLER_PROVIDER, CUI_THEME, CUI_THEME_STORAGE_DEFAULT_KEY, CUI_THEME_STORAGE_KEY, CUI_TOOLTIP_COMPONENT, CUI_TOOLTIP_DEFAULT_OPTIONS, CUI_TOOLTIP_DIRECTIONS, CUI_TOOLTIP_OPTIONS, CUI_TOOLTIP_PROVIDERS, CuiAccordionComponent, CuiAccordionDirective, CuiAccordionItemComponent, CuiAccordionModule, CuiAlertComponent, CuiAlertModule, CuiAlertService, CuiAlertsComponent, CuiBadgeComponent, CuiBadgeModule, CuiBannerComponent, CuiBannerModule, CuiBreadcrumbComponent, CuiBreadcrumbsComponent, CuiBreadcrumbsModule, CuiButtonComponent, CuiButtonGroupComponent, CuiButtonGroupModule, CuiButtonModule, CuiCardWrapperComponent, CuiCheckboxComponent, CuiCheckboxModule, CuiContextMenuComponent, CuiContextMenuModule, CuiDialogActionsComponent, CuiDialogComponent, CuiDialogHeaderComponent, CuiDialogModule, CuiDialogService, CuiDialogsComponent, CuiDropdownDirective, CuiDropdownWrapperComponent, CuiFormFieldComponent, CuiFormFieldModule, CuiHintComponent, CuiHintModule, CuiIconButtonComponent, CuiIconButtonModule, CuiInputModule, CuiInputNumberComponent, CuiInputNumberModule, CuiInputPasswordComponent, CuiInputPasswordModule, CuiInputTextComponent, CuiInputTimeComponent, CuiInputTimeModule, CuiLabelComponent, CuiLabelModule, CuiLayoutComponent, CuiLetterBoxComponent, CuiNotificationComponent, CuiNotificationModule, CuiPositionService, CuiRadioComponent, CuiRadioModule, CuiRenderDynamicComponentsComponent, CuiRenderDynamicComponentsService, CuiRootComponent, CuiRootModule, CuiSelectComponent, CuiSelectModule, CuiSidebarContainerComponent, CuiSidebarHeaderComponent, CuiSidebarNavigationComponent, CuiSidebarNavigationContainerComponent, CuiSidebarNavigationItemComponent, CuiSidebarService, CuiSvgComponent, CuiSvgModule, CuiTabComponent, CuiTabsComponent, CuiTabsModule, CuiTextFieldController, CuiTextFieldControllerModule, CuiTextFieldIconLeftDirective, CuiTextFieldIdDirective, CuiTextFieldIsErrorDirective, CuiTextFieldPlaceholderDirective, CuiTextFieldSizeDirective, CuiTextareaComponent, CuiTextareaModule, CuiThemeService, CuiToggleComponent, CuiToggleModule, CuiTooltip, CuiTooltipComponent, CuiTooltipDescribe, CuiTooltipDirective, CuiTooltipDriver, CuiTooltipHost, CuiTooltipHover, CuiTooltipManual, CuiTooltipOptionsDirective, CuiTooltipOverflow, CuiTooltipPointer, CuiTooltipPosition, CuiTooltipService, CuiTooltipUnstyled, CuiTooltipUnstyledComponent, CuiTooltips, CuiVisualViewportService, LoaderService, LoadingState, cuiGetDuration, cuiIsObscured, cuiLoaderInterceptor, cuiOverrideOptions, cuiRemoveSpaces, cuiReplace, cuiToAnimationOptions, cuiTooltipOptionsProvider, cuiXNdjsonInterceptor };
+export { AngularOutsideLoaderService, CUI_ALERTS, CUI_ALERT_CONTEXT, CUI_ALERT_DEFAULT_OPTIONS, CUI_ALERT_OPTIONS, CUI_ANIMATIONS_DEFAULT_DURATION, CUI_BANNER_DEFAULT_OPTIONS, CUI_BANNER_OPTIONS, CUI_BUTTON_DEFAULT_OPTIONS, CUI_BUTTON_OPTIONS, CUI_DEFAULT_THEME, CUI_DIALOGS, CUI_DIALOG_CONTEXT, CUI_DIALOG_DEFAULT_OPTIONS, CUI_DIALOG_OPTIONS, CUI_INPUT_TIME_DEFAULT_OPTIONS, CUI_INPUT_TIME_OPTIONS, CUI_NOTIFICATION_DEFAULT_OPTIONS, CUI_NOTIFICATION_ICONS, CUI_NOTIFICATION_ICON_OPTIONS, CUI_NOTIFICATION_ICON_OPTIONS_DEFAULT_MODE, CUI_NOTIFICATION_ICON_OPTIONS_LIGHT_MODE, CUI_NOTIFICATION_OPTIONS, CUI_ROOT_SELECTOR, CUI_TAB_ACTIVATE, CUI_TEXT_FIELD_CONTROLLER, CUI_TEXT_FIELD_ICON_LEFT, CUI_TEXT_FIELD_ID, CUI_TEXT_FIELD_IS_ERROR, CUI_TEXT_FIELD_PLACEHOLDER, CUI_TEXT_FIELD_SIZE, CUI_TEXT_FILED_CONTROLLER_PROVIDER, CUI_THEME, CUI_THEME_STORAGE_DEFAULT_KEY, CUI_THEME_STORAGE_KEY, CUI_TOOLTIP_COMPONENT, CUI_TOOLTIP_DEFAULT_OPTIONS, CUI_TOOLTIP_DIRECTIONS, CUI_TOOLTIP_OPTIONS, CUI_TOOLTIP_PROVIDERS, CuiAccordionComponent, CuiAccordionDirective, CuiAccordionItemComponent, CuiAccordionModule, CuiAlertComponent, CuiAlertModule, CuiAlertService, CuiAlertsComponent, CuiAttachesTool, CuiBadgeComponent, CuiBadgeModule, CuiBannerComponent, CuiBannerModule, CuiBreadcrumbComponent, CuiBreadcrumbsComponent, CuiBreadcrumbsModule, CuiButtonComponent, CuiButtonGroupComponent, CuiButtonGroupModule, CuiButtonModule, CuiCardWrapperComponent, CuiCategoriesComponent, CuiCheckboxComponent, CuiCheckboxModule, CuiContentWrapperComponent, CuiContextMenuComponent, CuiContextMenuModule, CuiDialogActionsComponent, CuiDialogComponent, CuiDialogHeaderComponent, CuiDialogModule, CuiDialogService, CuiDialogsComponent, CuiDropdownDirective, CuiDropdownWrapperComponent, CuiEditorBlockComponent, CuiEditorComponent, CuiEditorModalComponent, CuiEditorReadonlyComponent, CuiEditorTranslations, CuiEmptyStateComponent, CuiFileUploaderStatus, CuiFormFieldComponent, CuiFormFieldModule, CuiGhostInputComponent, CuiHeaderTool, CuiHintComponent, CuiHintModule, CuiIconButtonComponent, CuiIconButtonModule, CuiImageTool, CuiInputModule, CuiInputNumberComponent, CuiInputNumberModule, CuiInputPasswordComponent, CuiInputPasswordModule, CuiInputTextComponent, CuiInputTimeComponent, CuiInputTimeModule, CuiLabelComponent, CuiLabelModule, CuiLayoutComponent, CuiLetterBoxComponent, CuiLinkMarker, CuiListTool, CuiLoaderService, CuiLoadingState, CuiNotificationComponent, CuiNotificationModule, CuiPositionService, CuiRadioComponent, CuiRadioModule, CuiRenderDynamicComponentsComponent, CuiRenderDynamicComponentsService, CuiRoleMarker, CuiRootComponent, CuiRootModule, CuiSelectComponent, CuiSelectModule, CuiSelectedCategoryService, CuiSidebarContainerComponent, CuiSidebarHeaderComponent, CuiSidebarNavigationComponent, CuiSidebarNavigationContainerComponent, CuiSidebarNavigationItemComponent, CuiSidebarService, CuiSvgComponent, CuiSvgModule, CuiTabComponent, CuiTabsComponent, CuiTabsModule, CuiTextFieldController, CuiTextFieldControllerModule, CuiTextFieldIconLeftDirective, CuiTextFieldIdDirective, CuiTextFieldIsErrorDirective, CuiTextFieldPlaceholderDirective, CuiTextFieldSizeDirective, CuiTextareaComponent, CuiTextareaModule, CuiThemeService, CuiToggleComponent, CuiToggleModule, CuiToolMarker, CuiTooltip, CuiTooltipComponent, CuiTooltipDescribe, CuiTooltipDirective, CuiTooltipDriver, CuiTooltipHost, CuiTooltipHover, CuiTooltipManual, CuiTooltipOptionsDirective, CuiTooltipOverflow, CuiTooltipPointer, CuiTooltipPosition, CuiTooltipService, CuiTooltipUnstyled, CuiTooltipUnstyledComponent, CuiTooltips, CuiUtilityInfoComponent, CuiVideoTool, CuiVisualViewportService, createDefaultValidators, cuiGetDuration, cuiIsObscured, cuiLoaderInterceptor, cuiOverrideOptions, cuiProvideEditor, cuiRemoveSpaces, cuiReplace, cuiToAnimationOptions, cuiTooltipOptionsProvider, cuiXNdjsonInterceptor };
 //# sourceMappingURL=cuby-ui-core.mjs.map