@cuby-ui/core 0.0.394 → 0.0.395

package/fesm2022/cuby-ui-core.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, inject, Renderer2, input, model, effect, Directive, InjectionToken, Input, HostBinding, ChangeDetectorRef, ViewChild, EventEmitter, Output, NgModule, Injector, Injectable, SkipSelf, Optional, DestroyRef, NgZone, signal, TemplateRef, ContentChildren, ElementRef, HostListener, Self, INJECTOR, forwardRef, ViewContainerRef, booleanAttribute, computed, untracked, Pipe, APP_INITIALIZER, viewChild, output, makeEnvironmentProviders } from '@angular/core';
+import { Component, ChangeDetectionStrategy, inject, Renderer2, input, model, effect, Directive, InjectionToken, Input, HostBinding, ChangeDetectorRef, ViewChild, EventEmitter, Output, NgModule, Injector, Injectable, SkipSelf, Optional, DestroyRef, NgZone, signal, TemplateRef, ContentChildren, ElementRef, HostListener, Self, INJECTOR, forwardRef, ViewContainerRef, booleanAttribute, computed, untracked, Pipe, viewChild, output, APP_INITIALIZER, makeEnvironmentProviders } from '@angular/core';
 import * as i1 from '@angular/common';
-import { CommonModule, DOCUMENT, NgForOf, NgIf, NgComponentOutlet, NgTemplateOutlet, NgFor, UpperCasePipe, NgClass, Location, AsyncPipe } from '@angular/common';
+import { CommonModule, DOCUMENT, NgForOf, NgIf, NgComponentOutlet, NgTemplateOutlet, NgFor, NgClass, Location, UpperCasePipe, AsyncPipe } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
 import { cuiIsIcon, CUI_ICONS } from '@cuby-ui/icons';
 import * as i1$1 from '@cuby-ui/cdk';
@@ -9,7 +9,7 @@ import { cuiCreateToken, cuiCreateTokenFromFactory, CuiDestroyService, CuiFilter
 import { BehaviorSubject, takeUntil, Observable, merge, distinctUntilChanged, startWith, map, finalize, switchMap, tap, catchError, throwError, of, from, filter, timer, Subject, delay, repeat, takeWhile, fromEvent, debounce, skip, take, forkJoin, throttleTime, concatMap, toArray, debounceTime, pairwise } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { OAuthService, OAuthErrorEvent, OAuthSuccessEvent, OAuthInfoEvent, provideOAuthClient } from 'angular-oauth2-oidc';
-import { CuiExchangeContextApiService, CuiTreeStructNavigatorApiService, CuiNodeChecklistApiService, CuiTreeStructApiService, CuiFrameApiService, UserCompanyApiService } from '@cuby-ui/api';
+import { CuiExchangeContextApiService, CuiJTextApiService, CuiTreeStructNavigatorApiService, CuiNodeChecklistApiService, CuiTreeStructApiService, CuiFrameApiService, UserCompanyApiService } from '@cuby-ui/api';
 import { trigger, transition, query, animateChild, style, animate, stagger } from '@angular/animations';
 import * as i2 from '@taiga-ui/polymorpheus';
 import { PolymorpheusOutlet, PolymorpheusTemplate, PolymorpheusComponent, injectContext } from '@taiga-ui/polymorpheus';
@@ -24,8 +24,8 @@ import Header from '@editorjs/header';
 import List from '@editorjs/list';
 import * as i4 from '@jsverse/transloco';
 import { TranslocoDirective, TranslocoService, TranslocoModule } from '@jsverse/transloco';
-import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { createCustomElement } from '@angular/elements';
+import { HttpErrorResponse } from '@angular/common/http';
 import { Router } from '@angular/router';
 
 class CuiAccordionComponent {
@@ -3968,6 +3968,141 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
 
+const EXTENSION_GROUP_COLOR = {
+    model: 'var(--cui-light-green-500)',
+    doc: 'var(--cui-light-blue-500)',
+    image: 'var(--cui-yellow-400)',
+    sheet: 'var(--cui-green-600)',
+    presentations: 'var(--cui-green-600)',
+    video: 'var(--cui-light-green-500)',
+    audio: 'var(--cui-lavender-400)',
+    archive: 'var(--cui-orange-600)',
+    geo: 'var(--cui-magenta-400)'
+};
+const EXTENSION_TO_GROUP = {
+    // 3D Model formats - var(--cui-light-green-500)
+    dae: 'model',
+    fbx: 'model',
+    glb: 'model',
+    gltf: 'model',
+    mtl: 'model',
+    obj: 'model',
+    ply: 'model',
+    step: 'model',
+    stl: 'model',
+    usd: 'model',
+    usda: 'model',
+    usdc: 'model',
+    usdz: 'model',
+    // Document formats - var(--cui-light-blue-500)
+    azw: 'doc',
+    doc: 'doc',
+    docx: 'doc',
+    epub: 'doc',
+    mobi: 'doc',
+    odt: 'doc',
+    pdf: 'doc',
+    ps: 'doc',
+    rtf: 'doc',
+    txt: 'doc',
+    w: 'doc',
+    // Spreadsheet formats - var(--cui-green-600)
+    ods: 'sheet',
+    x: 'sheet',
+    xls: 'sheet',
+    xlsx: 'sheet',
+    // Presentation formats - var(--cui-green-600)
+    odp: 'presentations',
+    p: 'presentations',
+    pt: 'presentations',
+    ppt: 'presentations',
+    pptx: 'presentations',
+    sldx: 'presentations',
+    // Video formats - var(--cui-light-green-500)
+    '3g2': 'video',
+    '3gp': 'video',
+    avi: 'video',
+    flv: 'video',
+    m4v: 'video',
+    mkv: 'video',
+    mov: 'video',
+    mp4: 'video',
+    mpg: 'video',
+    pr: 'video',
+    rm: 'video',
+    rmvb: 'video',
+    vob: 'video',
+    webm: 'video',
+    wmv: 'video',
+    // Audio formats - var(--cui-lavender-400)
+    aac: 'audio',
+    aif: 'audio',
+    aiff: 'audio',
+    alac: 'audio',
+    amr: 'audio',
+    au: 'audio',
+    dsd: 'audio',
+    flac: 'audio',
+    m4a: 'audio',
+    mp3: 'audio',
+    ogg: 'audio',
+    opus: 'audio',
+    pcm: 'audio',
+    wav: 'audio',
+    wma: 'audio',
+    // Archive formats - var(--cui-orange-600)
+    '7z': 'archive',
+    arj: 'archive',
+    gz: 'archive',
+    rar: 'archive',
+    sfx: 'archive',
+    tar: 'archive',
+    zip: 'archive',
+    // Geographic Data formats - var(--cui-magenta-400)
+    geojson: 'geo',
+    gpx: 'geo',
+    kml: 'geo',
+    kmz: 'geo',
+    shp: 'geo',
+    // Image formats - var(--cui-yellow-400)
+    arw: 'image',
+    bmp: 'image',
+    cr2: 'image',
+    dng: 'image',
+    gif: 'image',
+    ico: 'image',
+    jpeg: 'image',
+    jpg: 'image',
+    nef: 'image',
+    orf: 'image',
+    pef: 'image',
+    png: 'image',
+    raf: 'image',
+    raw: 'image',
+    svg: 'image',
+    tga: 'image',
+    tif: 'image',
+    tiff: 'image',
+    webp: 'image',
+    xcf: 'image'
+};
+
+class CuiFileIconComponent {
+    constructor() {
+        this.color = computed(() => this.getColorByExtension(this.extension()));
+        this.extension = input.required();
+    }
+    getColorByExtension(extension) {
+        return EXTENSION_GROUP_COLOR[EXTENSION_TO_GROUP[extension]];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiFileIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiFileIconComponent, isStandalone: true, selector: "cui-file-icon", inputs: { extension: { classPropertyName: "extension", publicName: "extension", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (color(); as color) {\n    <cui-svg\n        icon=\"cuiIconBoldFileDefaultSm\"\n        [color]=\"color\"\n        class=\"icon\"\n    ></cui-svg>\n\n    <div class=\"extension\">{{ extension() }}</div>\n}\n", styles: [":host{position:relative;display:inline-block}.extension{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:absolute;bottom:4px;left:5px;font-family:var(--cui-nunito-italic-font);font-weight:800;font-style:italic;font-size:5px;line-height:1;max-width:15px;text-transform:uppercase}\n"], dependencies: [{ kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiFileIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-file-icon', imports: [CuiSvgModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (color(); as color) {\n    <cui-svg\n        icon=\"cuiIconBoldFileDefaultSm\"\n        [color]=\"color\"\n        class=\"icon\"\n    ></cui-svg>\n\n    <div class=\"extension\">{{ extension() }}</div>\n}\n", styles: [":host{position:relative;display:inline-block}.extension{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:absolute;bottom:4px;left:5px;font-family:var(--cui-nunito-italic-font);font-weight:800;font-style:italic;font-size:5px;line-height:1;max-width:15px;text-transform:uppercase}\n"] }]
+        }] });
+
 const COMBINED_TEXT_BLOCK_PART = 'combined-text-block-part';
 const COMBINED_TEXT_BLOCK = 'combined-text-block';
 const COMBINED_TEXT_BLOCK_NAME = 'paragraph';
@@ -4189,53 +4324,6 @@ 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.14", ngImport: i0, type: CuiJTextApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiJTextApiService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiJTextApiService, decorators: [{
-            type: Injectable
-        }] });
-
 class CuiEditorService {
     constructor() {
         this.destroyRef = inject(DestroyRef);
@@ -5048,6 +5136,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 const EDITOR_TOOLTIP_SELECTOR = 'cc-editor-tooltip';
 
+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.14", ngImport: i0, type: FileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: FileSizePipe, isStandalone: true, name: "fileSize" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileSizePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'fileSize',
+                    standalone: true
+                }]
+        }] });
+
 class EditorToolComponent {
     constructor() {
         this.window = inject(CUI_WINDOW);
@@ -5118,67 +5229,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 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.14", ngImport: i0, type: FileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: FileSizePipe, isStandalone: true, name: "fileSize" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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'
-        };
         this.fileClicked = new EventEmitter();
     }
-    get color() {
-        return this.Extensions[this.file?.extension];
+    get file() {
+        return this._file;
+    }
+    set file(value) {
+        this._file = value;
+    }
+    get title() {
+        return this._title;
+    }
+    set title(value) {
+        this._title = value;
     }
     get isShowLoadButton() {
         return !this.file && !this.isCaptionShown && !this.isLoading;
@@ -5197,13 +5263,13 @@ class EditorAttachesToolComponent extends EditorToolComponent {
         return event.key !== 'Enter';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditorAttachesToolComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EditorAttachesToolComponent, isStandalone: true, selector: "ng-component", inputs: { file: "file", title: "title" }, outputs: { fileClicked: "fileClicked" }, host: { properties: { "class._hidden": "isShowLoadButton" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading; else preloader\">\r\n    <ng-container *transloco=\"let t\">\r\n        <div\r\n            *ngIf=\"file; else buttonTemplate\"\r\n            class=\"file\"\r\n        >\r\n            <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\r\n                    *ngIf=\"file.size; let size\"\r\n                    class=\"size\"\r\n                >\r\n                    {{ size | fileSize }}\r\n                </div>\r\n            </div>\r\n            <a\r\n                class=\"download\"\r\n                (click)=\"onFileClick()\"\r\n            >\r\n                <cui-svg 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", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EditorAttachesToolComponent, isStandalone: true, selector: "ng-component", inputs: { file: "file", title: "title" }, outputs: { fileClicked: "fileClicked" }, host: { properties: { "class._hidden": "isShowLoadButton" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading; else preloader\">\r\n    <ng-container *transloco=\"let t\">\r\n        <div\r\n            *ngIf=\"file; else buttonTemplate\"\r\n            class=\"file\"\r\n        >\r\n            <cui-file-icon\r\n                *ngIf=\"file.extension\"\r\n                [extension]=\"file.extension\"\r\n            ></cui-file-icon>\r\n\r\n            <div class=\"info\">\r\n                <div\r\n                    class=\"title\"\r\n                    attr.data-placeholder=\"{{ t('FILE_TITLE') }}...\"\r\n                    [innerHTML]=\"title\"\r\n                    [attr.contenteditable]=\"!readOnly\"\r\n                    (paste)=\"onTitlePaste($event)\"\r\n                    (keydown)=\"onPreventEnter($event)\"\r\n                    (keyup)=\"onTitleChange($event)\"\r\n                ></div>\r\n                <div\r\n                    *ngIf=\"file.size; let size\"\r\n                    class=\"size\"\r\n                >\r\n                    {{ size | fileSize }}\r\n                </div>\r\n            </div>\r\n            <a\r\n                class=\"download\"\r\n                (click)=\"onFileClick()\"\r\n            >\r\n                <cui-svg\r\n                    icon=\"cuiIconChevronRightSm\"\r\n                    color=\"var(--cui-base-500)\"\r\n                />\r\n            </a>\r\n        </div>\r\n        <ng-template #buttonTemplate>\r\n            <button\r\n                [class]=\"['select-btn', this.api.styles.button]\"\r\n                (click)=\"onSelectFile()\"\r\n                type=\"button\"\r\n            >\r\n                <cui-svg icon=\"cuiIconPaperclipSm\" />\r\n                &nbsp;{{ buttonContent }}\r\n            </button>\r\n        </ng-template>\r\n    </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #preloader>\r\n    <div class=\"wrapper\">\r\n        <div class=\"preloader\"></div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{padding-top:4px;padding-bottom:4px;font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font);display:block}:host._hidden{display:none}:host ::ng-deep .icon path{stroke:none}.file{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:4px 12px;border-radius:8px;border:1px solid var(--cui-base-200);background-color:var(--cui-base-10)}.info{display:flex;flex-direction:column;gap:2px;flex-grow:1;width:0;word-wrap:break-word}.extension{display:flex;align-items:flex-end;padding:6px 2px;font-weight:500;font-size:12px;line-height:14px;border-radius:8px;width:35px;height:35px;color:var(--cui-gray-0)}.size{font-weight:400;font-size:13px;line-height:16px;color:var(--cui-base-500)}.download{padding:6px;flex-shrink:0;margin-left:auto;border-radius:8px;color:var(--cui-base-0)}.wrapper{display:flex;flex-direction:column;margin-bottom:10px;border-radius:8px;border:1px solid var(--cui-base-200);min-height:50px;background-color:var(--cui-base-0);overflow:hidden}.wrapper._loaded{min-height:auto}.preloader{width:30px;height:30px;border-radius:50%;background-size:cover;margin:auto;position:relative;background-position:center center}@keyframes preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preloader:after{content:\"\";position:absolute;z-index:3;width:30px;height:30px;border-radius:50%;border:2px solid var(--cui-base-200);border-top-color:var(--cui-blue-600);left:50%;top:50%;margin-top:-15px;margin-left:-15px;animation:preloader-spin 2s infinite linear;box-sizing:border-box}.title{font-weight:400;font-size:14px;line-height:20px;outline:none}.title[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.select-btn{display:flex;align-items:center;justify-content:center;width:100%}\n"], dependencies: [{ kind: "pipe", type: FileSizePipe, name: "fileSize" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiFileIconComponent, selector: "cui-file-icon", inputs: ["extension"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditorAttachesToolComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CuiSvgModule, FileSizePipe, FormsModule, UpperCasePipe, NgIf, TranslocoDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ standalone: true, imports: [FileSizePipe, FormsModule, NgIf, TranslocoDirective, CuiFileIconComponent, CuiSvgModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class._hidden]': 'isShowLoadButton'
-                    }, template: "<ng-container *ngIf=\"!isLoading; else preloader\">\r\n    <ng-container *transloco=\"let t\">\r\n        <div\r\n            *ngIf=\"file; else buttonTemplate\"\r\n            class=\"file\"\r\n        >\r\n            <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\r\n                    *ngIf=\"file.size; let size\"\r\n                    class=\"size\"\r\n                >\r\n                    {{ size | fileSize }}\r\n                </div>\r\n            </div>\r\n            <a\r\n                class=\"download\"\r\n                (click)=\"onFileClick()\"\r\n            >\r\n                <cui-svg 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", 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"] }]
+                    }, template: "<ng-container *ngIf=\"!isLoading; else preloader\">\r\n    <ng-container *transloco=\"let t\">\r\n        <div\r\n            *ngIf=\"file; else buttonTemplate\"\r\n            class=\"file\"\r\n        >\r\n            <cui-file-icon\r\n                *ngIf=\"file.extension\"\r\n                [extension]=\"file.extension\"\r\n            ></cui-file-icon>\r\n\r\n            <div class=\"info\">\r\n                <div\r\n                    class=\"title\"\r\n                    attr.data-placeholder=\"{{ t('FILE_TITLE') }}...\"\r\n                    [innerHTML]=\"title\"\r\n                    [attr.contenteditable]=\"!readOnly\"\r\n                    (paste)=\"onTitlePaste($event)\"\r\n                    (keydown)=\"onPreventEnter($event)\"\r\n                    (keyup)=\"onTitleChange($event)\"\r\n                ></div>\r\n                <div\r\n                    *ngIf=\"file.size; let size\"\r\n                    class=\"size\"\r\n                >\r\n                    {{ size | fileSize }}\r\n                </div>\r\n            </div>\r\n            <a\r\n                class=\"download\"\r\n                (click)=\"onFileClick()\"\r\n            >\r\n                <cui-svg\r\n                    icon=\"cuiIconChevronRightSm\"\r\n                    color=\"var(--cui-base-500)\"\r\n                />\r\n            </a>\r\n        </div>\r\n        <ng-template #buttonTemplate>\r\n            <button\r\n                [class]=\"['select-btn', this.api.styles.button]\"\r\n                (click)=\"onSelectFile()\"\r\n                type=\"button\"\r\n            >\r\n                <cui-svg icon=\"cuiIconPaperclipSm\" />\r\n                &nbsp;{{ buttonContent }}\r\n            </button>\r\n        </ng-template>\r\n    </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #preloader>\r\n    <div class=\"wrapper\">\r\n        <div class=\"preloader\"></div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{padding-top:4px;padding-bottom:4px;font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font);display:block}:host._hidden{display:none}:host ::ng-deep .icon path{stroke:none}.file{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:4px 12px;border-radius:8px;border:1px solid var(--cui-base-200);background-color:var(--cui-base-10)}.info{display:flex;flex-direction:column;gap:2px;flex-grow:1;width:0;word-wrap:break-word}.extension{display:flex;align-items:flex-end;padding:6px 2px;font-weight:500;font-size:12px;line-height:14px;border-radius:8px;width:35px;height:35px;color:var(--cui-gray-0)}.size{font-weight:400;font-size:13px;line-height:16px;color:var(--cui-base-500)}.download{padding:6px;flex-shrink:0;margin-left:auto;border-radius:8px;color:var(--cui-base-0)}.wrapper{display:flex;flex-direction:column;margin-bottom:10px;border-radius:8px;border:1px solid var(--cui-base-200);min-height:50px;background-color:var(--cui-base-0);overflow:hidden}.wrapper._loaded{min-height:auto}.preloader{width:30px;height:30px;border-radius:50%;background-size:cover;margin:auto;position:relative;background-position:center center}@keyframes preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preloader:after{content:\"\";position:absolute;z-index:3;width:30px;height:30px;border-radius:50%;border:2px solid var(--cui-base-200);border-top-color:var(--cui-blue-600);left:50%;top:50%;margin-top:-15px;margin-left:-15px;animation:preloader-spin 2s infinite linear;box-sizing:border-box}.title{font-weight:400;font-size:14px;line-height:20px;outline:none}.title[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.select-btn{display:flex;align-items:center;justify-content:center;width:100%}\n"] }]
         }], propDecorators: { file: [{
                 type: Input,
                 args: [{ required: true }]
@@ -5238,13 +5304,13 @@ class EditorImageToolComponent extends EditorToolComponent {
         return (event.key !== 'Backspace' && event.key !== 'Enter') || event.shiftKey;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditorImageToolComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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", 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-radius:8px;border:1px solid var(--cui-base-200);min-height:200px;background-color:var(--cui-base-0);overflow:hidden}.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{border-radius:8px}.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.14", 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", 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"] }]
+                    }, 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", 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-radius:8px;border:1px solid var(--cui-base-200);min-height:200px;background-color:var(--cui-base-0);overflow:hidden}.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{border-radius:8px}.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 }]
@@ -5275,13 +5341,13 @@ class EditorVideoToolComponent extends EditorToolComponent {
         return (event.key !== 'Backspace' && event.key !== 'Enter') || event.shiftKey;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditorVideoToolComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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                    muted\r\n                    playsinline\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<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", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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                    muted\r\n                    playsinline\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<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", 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-radius:8px;border:1px solid var(--cui-base-200);min-height:200px;background-color:var(--cui-base-0);overflow:hidden}.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{border-radius:8px}.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.14", 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                    muted\r\n                    playsinline\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<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", 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"] }]
+                    }, 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                    muted\r\n                    playsinline\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<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", 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-radius:8px;border:1px solid var(--cui-base-200);min-height:200px;background-color:var(--cui-base-0);overflow:hidden}.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{border-radius:8px}.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 }]
@@ -5946,6 +6012,9 @@ class CuiAttachesTool {
         this.uploader = new CuiFileUploader(this.config, this.onUpload.bind(this), this.uploadingFailed.bind(this));
         this.data = data;
     }
+    appendCallback() {
+        this.selectFile();
+    }
     render() {
         this.attachesTool = document.createElement(EDITOR_ATTACHES_TOOL_SELECTOR);
         this.attachesTool.api = this.api;
@@ -6734,53 +6803,6 @@ const getEditorConfig = (id, config = DEFAULT_CONFIG) => ({
     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 });
 }
@@ -7280,11 +7302,11 @@ class CuiEditorComponent {
         this.abortController = new AbortController();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CuiEditorComponent, isStandalone: true, selector: "cui-editor", inputs: { editorApiId: "editorApiId", 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\n    #editor\n    [id]=\"editorId\"\n    data-editor\n    [class._readonly]=\"config.readOnly\"\n></div>\n", styles: [":host{--textColor: var(--cui-base-900);--menuBackground: var(--cui-base-0);--menuBorder: var(--cui-base-200);--menuItemHover: var(--cui-base-10);--menuItemBackground: var(cui-base-900);--menuIconBackground: var(--cui-base-50);--menuIconHover: var(--cui-base-10);font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font)}:host ::ng-deep .ce-popover{--color-background: var(--menuBackground);--color-text-primary: var(--textColor);--color-border: var(--menuBorder);--color-border-icon: var(--menuBorder);--color-background-item: var(--menuItemBackground);--color-background-item-hover: var(--menuItemHover)}:host ::ng-deep .ce-popover__search{background:var(--menuIconBackground)}:host ::ng-deep .ce-popover .ce-popover-item__icon{background:var(--menuIconBackground)}:host ::ng-deep .ce-conversion-toolbar{background-color:var(--menuBackground);border-color:var(--menuBorder)}:host ::ng-deep .ce-conversion-toolbar__tools{padding:0 6px 6px}:host ::ng-deep .ce-conversion-tool{padding:3px;border-radius:6px}:host ::ng-deep .ce-conversion-tool__icon{border:1px solid var(--menuBorder);background-color:var(--menuIconBackground);box-shadow:none}:host ::ng-deep .ce-conversion-tool:hover{background-color:var(--menuItemHover)}:host ::ng-deep .ce-conversion-tool:hover .ce-conversion-tool__icon{border-color:var(--menuIconHover)}:host ::ng-deep .combined-text-block{padding:.4em 0;line-height:1.6em;outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part{outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child,:host ::ng-deep .combined-text-block .combined-text-block-part._selected{display:list-item}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child::marker,:host ::ng-deep .combined-text-block .combined-text-block-part._selected::marker{content:\"\"}:host ::ng-deep .image-tool__image{border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}:host ::ng-deep .image-tool__image-preloader{background-color:var(--cui-base-200)}:host ::ng-deep .image-tool__image-preloader:after{border:1px solid var(--cui-base-200);border-top:1px solid var(--cui-blue-600)}:host ::ng-deep .cdx-button{border: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}@media (max-width: 650px){:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{border-color:var(--menuBorder);background-color:var(--menuBackground)}:host ::ng-deep .ce-toolbar__actions{inset:0 auto auto 0}}:host ::ng-deep .ce-block--selected .ce-block__content{background-color:var(--cui-base-200)}:host ::ng-deep .ce-block__content{max-width:100%}:host ::ng-deep .ce-block:only-of-type .combined-text-block[data-placeholder-active][data-empty=true]:before{content:attr(data-placeholder-active);position:absolute;color:var(--cui-base-400)}:host ::ng-deep [data-editor]{padding-right:4px;width:100%;height:100%;min-height:200px;overflow:hidden auto;scrollbar-gutter:stable}:host ::ng-deep [data-editor] .codex-editor{margin-left:60px}:host ::ng-deep [data-editor] .codex-editor--narrow .ce-popover{right:auto}:host ::ng-deep [data-editor] .codex-editor__redactor{margin-right:auto;padding-bottom:260px!important}@media (max-width: 650px){:host ::ng-deep [data-editor] .codex-editor{margin-left:0}}:host ::ng-deep [data-editor]._readonly{min-height:auto}:host ::ng-deep [data-editor]._readonly .codex-editor{margin:auto}:host ::ng-deep [data-editor]._readonly .codex-editor__redactor{padding-bottom:0!important}:host ::ng-deep [data-editor]._readonly .combined-text-block{padding:0}:host ::ng-deep [data-editor] [data-item-name=move-up],:host ::ng-deep [data-editor] [data-item-name=move-down],:host ::ng-deep [data-editor] [data-tool=paragraph]{display:none}:host ::ng-deep [data-editor] *::selection{background:var(--cui-base-200)}:host ::ng-deep [data-editor] a{color:var(--cui-light-blue-600)}:host ::ng-deep .marker{cursor:pointer;text-decoration:underline;color:var(--cui-light-blue-600);background-color:transparent}:host ::ng-deep .tool-marker,:host ::ng-deep .role-marker{margin:0 5px}:host ::ng-deep .tool-marker{color:#e97c00}:host ::ng-deep .role-marker{color:#8803f1}.form{height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CuiEditorComponent, isStandalone: true, selector: "cui-editor", inputs: { editorApiId: "editorApiId", 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\n    #editor\n    [id]=\"editorId\"\n    data-editor\n    [class._readonly]=\"config.readOnly\"\n></div>\n", styles: [":host{--textColor: var(--cui-base-900);--menuBackground: var(--cui-base-0);--menuBorder: var(--cui-base-200);--menuItemHover: var(--cui-base-10);--menuItemBackground: var(cui-base-900);--menuIconBackground: var(--cui-base-50);--menuIconHover: var(--cui-base-10);font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font)}:host ::ng-deep .ce-popover{--color-background: var(--menuBackground);--color-text-primary: var(--textColor);--color-border: var(--menuBorder);--color-border-icon: var(--menuBorder);--color-background-item: var(--menuItemBackground);--color-background-item-hover: var(--menuItemHover)}:host ::ng-deep .ce-popover__search{background:var(--menuIconBackground)}:host ::ng-deep .ce-popover .ce-popover-item__icon{background:var(--menuIconBackground)}:host ::ng-deep .ce-conversion-toolbar{background-color:var(--menuBackground);border-color:var(--menuBorder)}:host ::ng-deep .ce-conversion-toolbar__tools{padding:0 6px 6px}:host ::ng-deep .ce-conversion-tool{padding:3px;border-radius:6px}:host ::ng-deep .ce-conversion-tool__icon{border:1px solid var(--menuBorder);background-color:var(--menuIconBackground);box-shadow:none}:host ::ng-deep .ce-conversion-tool:hover{background-color:var(--menuItemHover)}:host ::ng-deep .ce-conversion-tool:hover .ce-conversion-tool__icon{border-color:var(--menuIconHover)}:host ::ng-deep .combined-text-block{padding:.4em 0;line-height:1.6em;outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part{outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child,:host ::ng-deep .combined-text-block .combined-text-block-part._selected{display:list-item}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child::marker,:host ::ng-deep .combined-text-block .combined-text-block-part._selected::marker{content:\"\"}:host ::ng-deep .image-tool__image{border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}:host ::ng-deep .image-tool__image-preloader{background-color:var(--cui-base-200)}:host ::ng-deep .image-tool__image-preloader:after{border:1px solid var(--cui-base-200);border-top:1px solid var(--cui-blue-600)}:host ::ng-deep .cdx-button{border-radius:8px;border:1px solid var(--cui-base-200);color:var(--textColor);background-color:var(--cui-base-10);box-shadow:none}:host ::ng-deep .ce-inline-toolbar{border-color:var(--cui-base-100);color:var(--textColor);background-color:var(--cui-base-0)}:host ::ng-deep .ce-inline-toolbar__dropdown:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-inline-tool:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{color:var(--cui-base-500)}:host ::ng-deep .ce-toolbar__plus:hover,:host ::ng-deep .ce-toolbar__settings-btn:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__actions{right:100%}:host ::ng-deep .ce-toolbar__content{max-width:none}@media (max-width: 650px){:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{border-color:var(--menuBorder);background-color:var(--menuBackground)}:host ::ng-deep .ce-toolbar__actions{inset:0 auto auto 0}}:host ::ng-deep .ce-block--selected .ce-block__content{background-color:var(--cui-base-200)}:host ::ng-deep .ce-block__content{max-width:100%}:host ::ng-deep .ce-block:only-of-type .combined-text-block[data-placeholder-active][data-empty=true]:before{content:attr(data-placeholder-active);position:absolute;color:var(--cui-base-400)}:host ::ng-deep [data-editor]{padding-right:4px;width:100%;height:100%;min-height:200px;overflow:hidden auto;scrollbar-gutter:stable}:host ::ng-deep [data-editor] .codex-editor{margin-left:60px}:host ::ng-deep [data-editor] .codex-editor--narrow .ce-popover{right:auto}:host ::ng-deep [data-editor] .codex-editor__redactor{margin-right:auto;padding-bottom:260px!important}@media (max-width: 650px){:host ::ng-deep [data-editor] .codex-editor{margin-left:0}}:host ::ng-deep [data-editor]._readonly{min-height:auto}:host ::ng-deep [data-editor]._readonly .codex-editor{margin:auto}:host ::ng-deep [data-editor]._readonly .codex-editor__redactor{padding-bottom:0!important}:host ::ng-deep [data-editor]._readonly .combined-text-block{padding:0}:host ::ng-deep [data-editor] [data-item-name=move-up],:host ::ng-deep [data-editor] [data-item-name=move-down],:host ::ng-deep [data-editor] [data-tool=paragraph]{display:none}:host ::ng-deep [data-editor] *::selection{background:var(--cui-base-200)}:host ::ng-deep [data-editor] a{color:var(--cui-light-blue-600)}:host ::ng-deep .marker{cursor:pointer;text-decoration:underline;color:var(--cui-light-blue-600);background-color:transparent}:host ::ng-deep .tool-marker,:host ::ng-deep .role-marker{margin:0 5px}:host ::ng-deep .tool-marker{color:#e97c00}:host ::ng-deep .role-marker{color:#8803f1}.form{height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-editor', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiEditorService, CuiJTextApiService], template: "<div\n    #editor\n    [id]=\"editorId\"\n    data-editor\n    [class._readonly]=\"config.readOnly\"\n></div>\n", styles: [":host{--textColor: var(--cui-base-900);--menuBackground: var(--cui-base-0);--menuBorder: var(--cui-base-200);--menuItemHover: var(--cui-base-10);--menuItemBackground: var(cui-base-900);--menuIconBackground: var(--cui-base-50);--menuIconHover: var(--cui-base-10);font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font)}:host ::ng-deep .ce-popover{--color-background: var(--menuBackground);--color-text-primary: var(--textColor);--color-border: var(--menuBorder);--color-border-icon: var(--menuBorder);--color-background-item: var(--menuItemBackground);--color-background-item-hover: var(--menuItemHover)}:host ::ng-deep .ce-popover__search{background:var(--menuIconBackground)}:host ::ng-deep .ce-popover .ce-popover-item__icon{background:var(--menuIconBackground)}:host ::ng-deep .ce-conversion-toolbar{background-color:var(--menuBackground);border-color:var(--menuBorder)}:host ::ng-deep .ce-conversion-toolbar__tools{padding:0 6px 6px}:host ::ng-deep .ce-conversion-tool{padding:3px;border-radius:6px}:host ::ng-deep .ce-conversion-tool__icon{border:1px solid var(--menuBorder);background-color:var(--menuIconBackground);box-shadow:none}:host ::ng-deep .ce-conversion-tool:hover{background-color:var(--menuItemHover)}:host ::ng-deep .ce-conversion-tool:hover .ce-conversion-tool__icon{border-color:var(--menuIconHover)}:host ::ng-deep .combined-text-block{padding:.4em 0;line-height:1.6em;outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part{outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child,:host ::ng-deep .combined-text-block .combined-text-block-part._selected{display:list-item}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child::marker,:host ::ng-deep .combined-text-block .combined-text-block-part._selected::marker{content:\"\"}:host ::ng-deep .image-tool__image{border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}:host ::ng-deep .image-tool__image-preloader{background-color:var(--cui-base-200)}:host ::ng-deep .image-tool__image-preloader:after{border:1px solid var(--cui-base-200);border-top:1px solid var(--cui-blue-600)}:host ::ng-deep .cdx-button{border: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}@media (max-width: 650px){:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{border-color:var(--menuBorder);background-color:var(--menuBackground)}:host ::ng-deep .ce-toolbar__actions{inset:0 auto auto 0}}:host ::ng-deep .ce-block--selected .ce-block__content{background-color:var(--cui-base-200)}:host ::ng-deep .ce-block__content{max-width:100%}:host ::ng-deep .ce-block:only-of-type .combined-text-block[data-placeholder-active][data-empty=true]:before{content:attr(data-placeholder-active);position:absolute;color:var(--cui-base-400)}:host ::ng-deep [data-editor]{padding-right:4px;width:100%;height:100%;min-height:200px;overflow:hidden auto;scrollbar-gutter:stable}:host ::ng-deep [data-editor] .codex-editor{margin-left:60px}:host ::ng-deep [data-editor] .codex-editor--narrow .ce-popover{right:auto}:host ::ng-deep [data-editor] .codex-editor__redactor{margin-right:auto;padding-bottom:260px!important}@media (max-width: 650px){:host ::ng-deep [data-editor] .codex-editor{margin-left:0}}:host ::ng-deep [data-editor]._readonly{min-height:auto}:host ::ng-deep [data-editor]._readonly .codex-editor{margin:auto}:host ::ng-deep [data-editor]._readonly .codex-editor__redactor{padding-bottom:0!important}:host ::ng-deep [data-editor]._readonly .combined-text-block{padding:0}:host ::ng-deep [data-editor] [data-item-name=move-up],:host ::ng-deep [data-editor] [data-item-name=move-down],:host ::ng-deep [data-editor] [data-tool=paragraph]{display:none}:host ::ng-deep [data-editor] *::selection{background:var(--cui-base-200)}:host ::ng-deep [data-editor] a{color:var(--cui-light-blue-600)}:host ::ng-deep .marker{cursor:pointer;text-decoration:underline;color:var(--cui-light-blue-600);background-color:transparent}:host ::ng-deep .tool-marker,:host ::ng-deep .role-marker{margin:0 5px}:host ::ng-deep .tool-marker{color:#e97c00}:host ::ng-deep .role-marker{color:#8803f1}.form{height:100%}\n"] }]
+            args: [{ selector: 'cui-editor', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiEditorService, CuiJTextApiService], template: "<div\n    #editor\n    [id]=\"editorId\"\n    data-editor\n    [class._readonly]=\"config.readOnly\"\n></div>\n", styles: [":host{--textColor: var(--cui-base-900);--menuBackground: var(--cui-base-0);--menuBorder: var(--cui-base-200);--menuItemHover: var(--cui-base-10);--menuItemBackground: var(cui-base-900);--menuIconBackground: var(--cui-base-50);--menuIconHover: var(--cui-base-10);font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font)}:host ::ng-deep .ce-popover{--color-background: var(--menuBackground);--color-text-primary: var(--textColor);--color-border: var(--menuBorder);--color-border-icon: var(--menuBorder);--color-background-item: var(--menuItemBackground);--color-background-item-hover: var(--menuItemHover)}:host ::ng-deep .ce-popover__search{background:var(--menuIconBackground)}:host ::ng-deep .ce-popover .ce-popover-item__icon{background:var(--menuIconBackground)}:host ::ng-deep .ce-conversion-toolbar{background-color:var(--menuBackground);border-color:var(--menuBorder)}:host ::ng-deep .ce-conversion-toolbar__tools{padding:0 6px 6px}:host ::ng-deep .ce-conversion-tool{padding:3px;border-radius:6px}:host ::ng-deep .ce-conversion-tool__icon{border:1px solid var(--menuBorder);background-color:var(--menuIconBackground);box-shadow:none}:host ::ng-deep .ce-conversion-tool:hover{background-color:var(--menuItemHover)}:host ::ng-deep .ce-conversion-tool:hover .ce-conversion-tool__icon{border-color:var(--menuIconHover)}:host ::ng-deep .combined-text-block{padding:.4em 0;line-height:1.6em;outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part{outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child,:host ::ng-deep .combined-text-block .combined-text-block-part._selected{display:list-item}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child::marker,:host ::ng-deep .combined-text-block .combined-text-block-part._selected::marker{content:\"\"}:host ::ng-deep .image-tool__image{border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}:host ::ng-deep .image-tool__image-preloader{background-color:var(--cui-base-200)}:host ::ng-deep .image-tool__image-preloader:after{border:1px solid var(--cui-base-200);border-top:1px solid var(--cui-blue-600)}:host ::ng-deep .cdx-button{border-radius:8px;border:1px solid var(--cui-base-200);color:var(--textColor);background-color:var(--cui-base-10);box-shadow:none}:host ::ng-deep .ce-inline-toolbar{border-color:var(--cui-base-100);color:var(--textColor);background-color:var(--cui-base-0)}:host ::ng-deep .ce-inline-toolbar__dropdown:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-inline-tool:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{color:var(--cui-base-500)}:host ::ng-deep .ce-toolbar__plus:hover,:host ::ng-deep .ce-toolbar__settings-btn:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__actions{right:100%}:host ::ng-deep .ce-toolbar__content{max-width:none}@media (max-width: 650px){:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{border-color:var(--menuBorder);background-color:var(--menuBackground)}:host ::ng-deep .ce-toolbar__actions{inset:0 auto auto 0}}:host ::ng-deep .ce-block--selected .ce-block__content{background-color:var(--cui-base-200)}:host ::ng-deep .ce-block__content{max-width:100%}:host ::ng-deep .ce-block:only-of-type .combined-text-block[data-placeholder-active][data-empty=true]:before{content:attr(data-placeholder-active);position:absolute;color:var(--cui-base-400)}:host ::ng-deep [data-editor]{padding-right:4px;width:100%;height:100%;min-height:200px;overflow:hidden auto;scrollbar-gutter:stable}:host ::ng-deep [data-editor] .codex-editor{margin-left:60px}:host ::ng-deep [data-editor] .codex-editor--narrow .ce-popover{right:auto}:host ::ng-deep [data-editor] .codex-editor__redactor{margin-right:auto;padding-bottom:260px!important}@media (max-width: 650px){:host ::ng-deep [data-editor] .codex-editor{margin-left:0}}:host ::ng-deep [data-editor]._readonly{min-height:auto}:host ::ng-deep [data-editor]._readonly .codex-editor{margin:auto}:host ::ng-deep [data-editor]._readonly .codex-editor__redactor{padding-bottom:0!important}:host ::ng-deep [data-editor]._readonly .combined-text-block{padding:0}:host ::ng-deep [data-editor] [data-item-name=move-up],:host ::ng-deep [data-editor] [data-item-name=move-down],:host ::ng-deep [data-editor] [data-tool=paragraph]{display:none}:host ::ng-deep [data-editor] *::selection{background:var(--cui-base-200)}:host ::ng-deep [data-editor] a{color:var(--cui-light-blue-600)}:host ::ng-deep .marker{cursor:pointer;text-decoration:underline;color:var(--cui-light-blue-600);background-color:transparent}:host ::ng-deep .tool-marker,:host ::ng-deep .role-marker{margin:0 5px}:host ::ng-deep .tool-marker{color:#e97c00}:host ::ng-deep .role-marker{color:#8803f1}.form{height:100%}\n"] }]
         }], propDecorators: { editorRef: [{
                 type: ViewChild,
                 args: ['editor']
@@ -7470,6 +7492,53 @@ function provideCuiEditorResourceUrl(resourceUrl) {
     return { provide: CUI_RESOURCE_URL, useValue: resourceUrl };
 }
 
+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
+        }
+    ];
+}
+
 const cuiXNdjsonInterceptor = (request, next) => {
     if (request.headers.get('Content-Type') !== 'application/x-ndjson') {
         return next(request);
@@ -10215,5 +10284,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AngularOutsideLoaderService, CUI_ACTIVITY_SERVICE_TOKEN, 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_RESOURCE_URL, CUI_ROOT_SELECTOR, CUI_STORAGE_LIST_SERVICE_TOKEN, CUI_TABS_SERVICE_TOKEN, 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, CuiActivityBaseService, CuiActivityContextMenuTranslations, CuiActivityImplService, CuiAlertComponent, CuiAlertModule, CuiAlertService, CuiAlertsComponent, CuiAttachesTool, CuiAuthBase, CuiAuthService, CuiBadgeComponent, CuiBadgeModule, CuiBannerComponent, CuiBannerModule, CuiBreadcrumbComponent, CuiBreadcrumbsComponent, CuiBreadcrumbsModule, CuiButtonComponent, CuiButtonGroupComponent, CuiButtonGroupModule, CuiButtonModule, CuiCardWrapperComponent, CuiCategoriesComponent, CuiCheckboxComponent, CuiCheckboxModule, CuiChecklistBlockComponent, CuiContentWrapperComponent, CuiContextMenuComponent, CuiContextMenuModule, CuiCriterionInfoComponent, CuiCriterionModalCreateComponent, CuiCriterionReadonlyInfoComponent, CuiDeleteModalComponent, CuiDialogActionsComponent, CuiDialogComponent, CuiDialogHeaderComponent, CuiDialogModule, CuiDialogService, CuiDialogsComponent, CuiDropdownDirective, CuiDropdownWrapperComponent, CuiEditorBlockComponent, CuiEditorComponent, CuiEditorModalComponent, CuiEditorReadonlyComponent, CuiEditorToolsService, CuiEditorTranslations, CuiEmptyStateComponent, CuiFileUploaderStatus, CuiFormFieldComponent, CuiFormFieldModule, CuiGeneralControlErrorHintComponent, CuiGhostInputComponent, CuiHeaderTool, CuiHintComponent, CuiHintModule, CuiIconButtonComponent, CuiIconButtonModule, CuiImageTool, CuiInputModule, CuiInputNumberComponent, CuiInputNumberModule, CuiInputPasswordComponent, CuiInputPasswordModule, CuiInputTextComponent, CuiInputTimeComponent, CuiInputTimeModule, CuiInstructionInfoComponent, CuiInstructionModalCreateComponent, CuiInstructionReadonlyInfoComponent, CuiLabelComponent, CuiLabelModule, CuiLayoutComponent, CuiLetterBoxComponent, CuiLinkMarker, CuiListTool, CuiLoaderComponent, CuiLoaderService, CuiLoadingState, CuiNotificationComponent, CuiNotificationModule, CuiPositionService, CuiRadioComponent, CuiRadioModule, CuiReadonlyCriterionModalComponent, CuiReadonlyInstructionModalComponent, CuiRenderDynamicComponentsComponent, CuiRenderDynamicComponentsService, CuiRoleMarker, CuiRootComponent, CuiRootModule, CuiSelectComponent, CuiSelectModalComponent, CuiSelectModalFolderComponent, CuiSelectModalSearchComponent, CuiSelectModalService, CuiSelectModule, CuiSelectedCategoryService, CuiSidebarContainerComponent, CuiSidebarHeaderComponent, CuiSidebarNavigationComponent, CuiSidebarNavigationContainerComponent, CuiSidebarNavigationItemComponent, CuiSidebarService, CuiStorageListComponent, CuiSvgComponent, CuiSvgModule, CuiTabDirective, CuiTabsComponent, 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, CuiUserActionContextMenuComponent, CuiUtilityModalComponent, CuiVideoTool, CuiVisualViewportService, UTILITY_MODAL_SERVICE_TOKEN, cuiAuthInterceptor, cuiCreateDefaultValidators, cuiErrorHandlerInterceptor, cuiGetDuration, cuiIsObscured, cuiLoaderInterceptor, cuiOverrideOptions, cuiProvideEditor, cuiRemoveSpaces, cuiReplace, cuiToAnimationOptions, cuiTooltipOptionsProvider, cuiXNdjsonInterceptor, provideCuiAuth, provideCuiEditorResourceUrl, provideCuiTabs };
+export { AngularOutsideLoaderService, CUI_ACTIVITY_SERVICE_TOKEN, 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_RESOURCE_URL, CUI_ROOT_SELECTOR, CUI_STORAGE_LIST_SERVICE_TOKEN, CUI_TABS_SERVICE_TOKEN, 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, CuiActivityBaseService, CuiActivityContextMenuTranslations, CuiActivityImplService, CuiAlertComponent, CuiAlertModule, CuiAlertService, CuiAlertsComponent, CuiAttachesTool, CuiAuthBase, CuiAuthService, CuiBadgeComponent, CuiBadgeModule, CuiBannerComponent, CuiBannerModule, CuiBreadcrumbComponent, CuiBreadcrumbsComponent, CuiBreadcrumbsModule, CuiButtonComponent, CuiButtonGroupComponent, CuiButtonGroupModule, CuiButtonModule, CuiCardWrapperComponent, CuiCategoriesComponent, CuiCheckboxComponent, CuiCheckboxModule, CuiChecklistBlockComponent, CuiContentWrapperComponent, CuiContextMenuComponent, CuiContextMenuModule, CuiCriterionInfoComponent, CuiCriterionModalCreateComponent, CuiCriterionReadonlyInfoComponent, CuiDeleteModalComponent, CuiDialogActionsComponent, CuiDialogComponent, CuiDialogHeaderComponent, CuiDialogModule, CuiDialogService, CuiDialogsComponent, CuiDropdownDirective, CuiDropdownWrapperComponent, CuiEditorBlockComponent, CuiEditorComponent, CuiEditorModalComponent, CuiEditorReadonlyComponent, CuiEditorToolsService, CuiEditorTranslations, CuiEmptyStateComponent, CuiFileIconComponent, CuiFileUploaderStatus, CuiFormFieldComponent, CuiFormFieldModule, CuiGeneralControlErrorHintComponent, CuiGhostInputComponent, CuiHeaderTool, CuiHintComponent, CuiHintModule, CuiIconButtonComponent, CuiIconButtonModule, CuiImageTool, CuiInputModule, CuiInputNumberComponent, CuiInputNumberModule, CuiInputPasswordComponent, CuiInputPasswordModule, CuiInputTextComponent, CuiInputTimeComponent, CuiInputTimeModule, CuiInstructionInfoComponent, CuiInstructionModalCreateComponent, CuiInstructionReadonlyInfoComponent, CuiLabelComponent, CuiLabelModule, CuiLayoutComponent, CuiLetterBoxComponent, CuiLinkMarker, CuiListTool, CuiLoaderComponent, CuiLoaderService, CuiLoadingState, CuiNotificationComponent, CuiNotificationModule, CuiPositionService, CuiRadioComponent, CuiRadioModule, CuiReadonlyCriterionModalComponent, CuiReadonlyInstructionModalComponent, CuiRenderDynamicComponentsComponent, CuiRenderDynamicComponentsService, CuiRoleMarker, CuiRootComponent, CuiRootModule, CuiSelectComponent, CuiSelectModalComponent, CuiSelectModalFolderComponent, CuiSelectModalSearchComponent, CuiSelectModalService, CuiSelectModule, CuiSelectedCategoryService, CuiSidebarContainerComponent, CuiSidebarHeaderComponent, CuiSidebarNavigationComponent, CuiSidebarNavigationContainerComponent, CuiSidebarNavigationItemComponent, CuiSidebarService, CuiStorageListComponent, CuiSvgComponent, CuiSvgModule, CuiTabDirective, CuiTabsComponent, 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, CuiUserActionContextMenuComponent, CuiUtilityModalComponent, CuiVideoTool, CuiVisualViewportService, UTILITY_MODAL_SERVICE_TOKEN, cuiAuthInterceptor, cuiCreateDefaultValidators, cuiErrorHandlerInterceptor, cuiGetDuration, cuiIsObscured, cuiLoaderInterceptor, cuiOverrideOptions, cuiProvideEditor, cuiRemoveSpaces, cuiReplace, cuiToAnimationOptions, cuiTooltipOptionsProvider, cuiXNdjsonInterceptor, provideCuiAuth, provideCuiEditorResourceUrl, provideCuiTabs };
 //# sourceMappingURL=cuby-ui-core.mjs.map