croco-html 3.1.0 → 3.2.0

package/fesm2022/croco-html.mjs

@@ -19,12 +19,12 @@ import { NgStyle, NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i12 from '@angular/material/tooltip';
 import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
 import * as i2$1 from '@angular/material/input';
-import { MatInputModule, MatInput } from '@angular/material/input';
+import { MatInputModule, MatInput, MatFormField as MatFormField$1, MatLabel as MatLabel$1 } from '@angular/material/input';
 import * as i13 from '@angular/material/checkbox';
 import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
 import * as i3 from '@angular/cdk/text-field';
 import { CdkTextareaAutosize } from '@angular/cdk/text-field';
-import * as i2$2 from '@ng-select/ng-select';
+import * as i4 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
 import * as i29 from '@angular/material/button-toggle';
 import { MatButtonToggleGroup, MatButtonToggle, MatButtonToggleModule } from '@angular/material/button-toggle';
@@ -38,8 +38,10 @@ import * as i11 from '@angular/material/select';
 import { MatSelect, MatSelectModule } from '@angular/material/select';
 import * as i7 from '@angular/material/progress-spinner';
 import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i3$1 from '@angular/material/tabs';
+import * as i5 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
+import * as i2$2 from '@angular/material/dialog';
+import { MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogModule } from '@angular/material/dialog';
 import * as i1$5 from 'ngx-clipboard';
 import * as i2$3 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
@@ -49,9 +51,7 @@ import * as i14 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i20 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i18 from '@angular/material/dialog';
-import { MatDialogModule } from '@angular/material/dialog';
-import * as i3$2 from '@angular/material/expansion';
+import * as i3$1 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import * as i21 from '@angular/material/grid-list';
 import { MatGridListModule } from '@angular/material/grid-list';
@@ -149,9 +149,12 @@ class ImageMethods {
         if (fileId === null || fileId === undefined) {
             return null;
         }
-        return options.publicImageResizedUrlFormat
+        const format = ImageMethods.isPrivateFileId(fileId)
+            ? options.publicImageResizedUrlFormat
+            : options.privateImageResizedUrlFormat;
+        return format
             .replace("{sizeType}", sizeType)
-            .replace("{fileId}", fileId.toString());
+            .replace("{fileId}", fileId);
     }
     static buildSmallUrl(fileId, options) {
         return ImageMethods.buildUrl(fileId, "Small", options);
@@ -159,8 +162,11 @@ class ImageMethods {
     static buildMediumUrl(fileId, options) {
         return ImageMethods.buildUrl(fileId, "Medium", options);
     }
+    static isPrivateFileId(fileId) {
+        return !isNaN(Number(fileId));
+    }
     static ExtractImage(elem, options) {
-        let fileId = +elem.getAttribute(FileImageTagDataConsts.FileIdAttrName);
+        let fileId = elem.getAttribute(FileImageTagDataConsts.FileIdAttrName);
         let src = ImageMethods.buildMediumUrl(fileId, options);
         return {
             type: FileImageTagDataConsts.TagName,
@@ -542,6 +548,10 @@ class ExternalVideoSupportedTypes {
     static { this.Code = "code"; }
 }
 const ExternalVideoPlayers = [
+    {
+        type: ExternalVideoSupportedTypes.Code,
+        displayValue: 'Встраиваемое Видео',
+    },
     {
         type: ExternalVideoSupportedTypes.Youtube,
         displayValue: 'Youtube',
@@ -549,10 +559,6 @@ const ExternalVideoPlayers = [
     {
         type: ExternalVideoSupportedTypes.VkVideo,
         displayValue: 'Vk Video',
-    },
-    {
-        type: ExternalVideoSupportedTypes.Code,
-        displayValue: 'Встраиваемое Видео',
     }
 ];
 class VideoMethods {
@@ -998,36 +1004,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                     args: ['BASE_URL']
                 }] }] });
 
+class PrivateFileUploadService {
+    constructor(_httpClient, baseUrl) {
+        this._httpClient = _httpClient;
+        this.baseUrl = baseUrl;
+    }
+    postFiles(files, applicationId) {
+        const formData = new FormData();
+        for (let i = 0; i < files.length; i++) {
+            var fileToUpload = files.item(i);
+            formData.append(`fileKey${i}`, fileToUpload, fileToUpload?.name);
+        }
+        return this.postFilesInner(formData, applicationId);
+    }
+    postFilesInner(formData, applicationId, withProgress = false) {
+        let endpoint = this.baseUrl + `api/private-files/upload?createCopiesNow=true`;
+        if (applicationId) {
+            endpoint += `&applicationId=${applicationId}`;
+        }
+        return this._httpClient.post(endpoint, formData, withProgress ? { reportProgress: true, observe: 'events' } : undefined);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: PrivateFileUploadService, deps: [{ token: i1.HttpClient }, { token: 'BASE_URL' }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: PrivateFileUploadService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: PrivateFileUploadService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['BASE_URL']
+                }] }] });
+
+class CrocoHtmlFileOptionsService {
+    constructor() {
+        this.localStorageToken = 'crocoHtmlEditorFileOptions';
+        this.defaultOptions = {
+            applicationId: null,
+            usePrivateFiles: false,
+        };
+    }
+    set(data) {
+        localStorage.setItem(this.localStorageToken, JSON.stringify(data));
+    }
+    get() {
+        try {
+            const data = localStorage.getItem(this.localStorageToken);
+            return data ? JSON.parse(data) : this.defaultOptions;
+        }
+        catch (e) {
+            return this.defaultOptions;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: CrocoHtmlFileOptionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: CrocoHtmlFileOptionsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: CrocoHtmlFileOptionsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
 class UploadFilesBtnComponent {
-    constructor(_fileUploadService) {
-        this._fileUploadService = _fileUploadService;
+    constructor(_publicFileUploadService, _privateFileUploadService, _htmlSettingsService) {
+        this._publicFileUploadService = _publicFileUploadService;
+        this._privateFileUploadService = _privateFileUploadService;
+        this._htmlSettingsService = _htmlSettingsService;
         this.extAccepts = "*/*";
         this.isMultiple = true;
         this.btnText = "Загрузить файлы";
         this.hidden = false;
         this.postFilesStarted = new EventEmitter();
         this.onPublicFilesUploaded = new EventEmitter();
+        this.onPrivateFilesUploaded = new EventEmitter();
     }
     handleFileInput(files) {
         this.postFilesStarted.emit({
             filesCount: files.length
         });
-        this._fileUploadService
-            .postFiles(files, null)
-            .subscribe(data => {
-            this.onPublicFilesUploaded.emit(data);
-        });
+        if (this._htmlSettingsService.get().usePrivateFiles) {
+            this._privateFileUploadService
+                .postFiles(files, this._htmlSettingsService.get().applicationId)
+                .subscribe(data => {
+                this.onPrivateFilesUploaded.emit(data);
+            });
+        }
+        else {
+            this._publicFileUploadService
+                .postFiles(files, null)
+                .subscribe(data => {
+                this.onPublicFilesUploaded.emit(data);
+            });
+        }
     }
     clickFileInput() {
         this.fileInput.nativeElement.click();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: UploadFilesBtnComponent, deps: [{ token: PublicFileUploadService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: UploadFilesBtnComponent, isStandalone: true, selector: "croco-app-upload-files-btn", inputs: { extAccepts: "extAccepts", isMultiple: "isMultiple", btnText: "btnText", hidden: "hidden" }, outputs: { postFilesStarted: "postFilesStarted", onPublicFilesUploaded: "onPublicFilesUploaded" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["filesInput"], descendants: true }], ngImport: i0, template: "<button [hidden]=\"hidden\" mat-raised-button color=\"primary\" (click)=\"filesInput.click()\">{{btnText}}</button>\n<input [hidden]=\"true\" [accept]=\"extAccepts\" [multiple]=\"isMultiple\" type=\"file\" #filesInput (change)=\"handleFileInput($event.target.files)\" />", styles: [""], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: UploadFilesBtnComponent, deps: [{ token: PublicFileUploadService }, { token: PrivateFileUploadService }, { token: CrocoHtmlFileOptionsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: UploadFilesBtnComponent, isStandalone: true, selector: "croco-app-upload-files-btn", inputs: { extAccepts: "extAccepts", isMultiple: "isMultiple", btnText: "btnText", hidden: "hidden" }, outputs: { postFilesStarted: "postFilesStarted", onPublicFilesUploaded: "onPublicFilesUploaded", onPrivateFilesUploaded: "onPrivateFilesUploaded" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["filesInput"], descendants: true }], ngImport: i0, template: "<button [hidden]=\"hidden\" mat-raised-button color=\"primary\" (click)=\"filesInput.click()\">{{btnText}}</button>\n<input [hidden]=\"true\" [accept]=\"extAccepts\" [multiple]=\"isMultiple\" type=\"file\" #filesInput (change)=\"handleFileInput($event.target.files)\" />", styles: [""], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: UploadFilesBtnComponent, decorators: [{
             type: Component,
             args: [{ selector: 'croco-app-upload-files-btn', standalone: true, imports: [MatButton], template: "<button [hidden]=\"hidden\" mat-raised-button color=\"primary\" (click)=\"filesInput.click()\">{{btnText}}</button>\n<input [hidden]=\"true\" [accept]=\"extAccepts\" [multiple]=\"isMultiple\" type=\"file\" #filesInput (change)=\"handleFileInput($event.target.files)\" />" }]
-        }], ctorParameters: () => [{ type: PublicFileUploadService }], propDecorators: { fileInput: [{
+        }], ctorParameters: () => [{ type: PublicFileUploadService }, { type: PrivateFileUploadService }, { type: CrocoHtmlFileOptionsService }], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['filesInput']
             }], extAccepts: [{
@@ -1042,6 +1121,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 type: Output
             }], onPublicFilesUploaded: [{
                 type: Output
+            }], onPrivateFilesUploaded: [{
+                type: Output
             }] } });
 
 class AddFilesBtnComponent {
@@ -1053,38 +1134,40 @@ class AddFilesBtnComponent {
     postFilesStartedEventHandler(data) {
         this.postFilesStarted.emit(data);
     }
-    publicFilesUploadedHandler(data) {
-        this.fileIds = data.fileIds;
-        let fileTags = [];
-        for (let i = 0; i < this.fileIds.length; i++) {
-            let fileTag = {
-                presentOrEdit: true,
-                tagDescription: {
-                    tag: FileImageTagDataConsts.TagName,
-                    displayValue: "Изображение",
-                    isCustom: false
-                },
-                attributes: {
-                    [FileImageTagDataConsts.FileIdAttrName]: this.fileIds[i],
-                    [FileImageTagDataConsts.ScreenMediaRequest]: FileImageTagDataConsts.DefaultValueForFileImage
-                },
-                innerHtml: ""
-            };
-            fileTags.push(fileTag);
-        }
+    filesUploadedPublicHandler(data) {
+        const fileTags = this.buildFileTags(data.fileIds.map(el => el.toString()));
         this.filesTagsReady.emit(fileTags);
     }
+    filesUploadedPrivateHandler(data) {
+        const fileTags = this.buildFileTags(data.fileIds);
+        this.filesTagsReady.emit(fileTags);
+    }
+    buildFileTags(fileIds) {
+        return fileIds.map(fileId => ({
+            presentOrEdit: true,
+            tagDescription: {
+                tag: FileImageTagDataConsts.TagName,
+                displayValue: "Изображение",
+                isCustom: false
+            },
+            attributes: {
+                [FileImageTagDataConsts.FileIdAttrName]: fileId,
+                [FileImageTagDataConsts.ScreenMediaRequest]: FileImageTagDataConsts.DefaultValueForFileImage
+            },
+            innerHtml: ""
+        }));
+    }
     handleClick() {
         this.fakeBtn.clickFileInput();
     }
     ngOnInit() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: AddFilesBtnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: AddFilesBtnComponent, isStandalone: true, selector: "croco-html-add-files-btn", outputs: { postFilesStarted: "postFilesStarted", filesTagsReady: "filesTagsReady" }, viewQueries: [{ propertyName: "fakeBtn", first: true, predicate: ["fakeBtn"], descendants: true }], ngImport: i0, template: "<div [hidden]=\"true\">\n    <croco-app-upload-files-btn #fakeBtn (onPublicFilesUploaded)=\"publicFilesUploadedHandler($event)\"\n        [btnText]=\"'\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F'\"\n        (postFilesStarted)=\"postFilesStartedEventHandler($event)\" [extAccepts]=\"'image/*'\"></croco-app-upload-files-btn>\n</div>\n\n<div>\n    <button class=\"w-100\" (click)=\"handleClick()\" mat-stroked-button>\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F</button>\n</div>", dependencies: [{ kind: "component", type: UploadFilesBtnComponent, selector: "croco-app-upload-files-btn", inputs: ["extAccepts", "isMultiple", "btnText", "hidden"], outputs: ["postFilesStarted", "onPublicFilesUploaded"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: AddFilesBtnComponent, isStandalone: true, selector: "croco-html-add-files-btn", outputs: { postFilesStarted: "postFilesStarted", filesTagsReady: "filesTagsReady" }, viewQueries: [{ propertyName: "fakeBtn", first: true, predicate: ["fakeBtn"], descendants: true }], ngImport: i0, template: "<div [hidden]=\"true\">\n    <croco-app-upload-files-btn #fakeBtn\n                                (onPrivateFilesUploaded)=\"filesUploadedPrivateHandler($event)\"\n                                (onPublicFilesUploaded)=\"filesUploadedPublicHandler($event)\"\n        [btnText]=\"'\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F'\"\n        (postFilesStarted)=\"postFilesStartedEventHandler($event)\" [extAccepts]=\"'image/*'\"></croco-app-upload-files-btn>\n</div>\n\n<div>\n    <button class=\"w-100\" (click)=\"handleClick()\" mat-stroked-button>\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F</button>\n</div>\n", dependencies: [{ kind: "component", type: UploadFilesBtnComponent, selector: "croco-app-upload-files-btn", inputs: ["extAccepts", "isMultiple", "btnText", "hidden"], outputs: ["postFilesStarted", "onPublicFilesUploaded", "onPrivateFilesUploaded"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: AddFilesBtnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-add-files-btn', standalone: true, imports: [UploadFilesBtnComponent, MatButton], template: "<div [hidden]=\"true\">\n    <croco-app-upload-files-btn #fakeBtn (onPublicFilesUploaded)=\"publicFilesUploadedHandler($event)\"\n        [btnText]=\"'\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F'\"\n        (postFilesStarted)=\"postFilesStartedEventHandler($event)\" [extAccepts]=\"'image/*'\"></croco-app-upload-files-btn>\n</div>\n\n<div>\n    <button class=\"w-100\" (click)=\"handleClick()\" mat-stroked-button>\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F</button>\n</div>" }]
+            args: [{ selector: 'croco-html-add-files-btn', standalone: true, imports: [UploadFilesBtnComponent, MatButton], template: "<div [hidden]=\"true\">\n    <croco-app-upload-files-btn #fakeBtn\n                                (onPrivateFilesUploaded)=\"filesUploadedPrivateHandler($event)\"\n                                (onPublicFilesUploaded)=\"filesUploadedPublicHandler($event)\"\n        [btnText]=\"'\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F'\"\n        (postFilesStarted)=\"postFilesStartedEventHandler($event)\" [extAccepts]=\"'image/*'\"></croco-app-upload-files-btn>\n</div>\n\n<div>\n    <button class=\"w-100\" (click)=\"handleClick()\" mat-stroked-button>\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F</button>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { postFilesStarted: [{
                 type: Output
             }], fakeBtn: [{
@@ -1738,9 +1821,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                     args: ['BASE_URL']
                 }] }] });
 
+class PrivateFilesQueryService {
+    constructor(_httpClient, baseUrl) {
+        this._httpClient = _httpClient;
+        this._baseControllerUrl = `${baseUrl}api/private-files/query`;
+    }
+    search(model) {
+        return this._httpClient.post(`${this._baseControllerUrl}/search`, model);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: PrivateFilesQueryService, deps: [{ token: i1.HttpClient }, { token: 'BASE_URL' }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: PrivateFilesQueryService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: PrivateFilesQueryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['BASE_URL']
+                }] }] });
+
 class FileIdSelectComponent {
-    constructor(_publicFileService, _options) {
+    get crocoHtmlEditorFileOptions() {
+        return this._htmlSettingsService.get();
+    }
+    constructor(_publicFileService, _privateFileService, _htmlSettingsService, _options) {
         this._publicFileService = _publicFileService;
+        this._privateFileService = _privateFileService;
+        this._htmlSettingsService = _htmlSettingsService;
         this._options = _options;
         this.labelText = "Поиск файлов";
         this.loading = false;
@@ -1758,19 +1867,29 @@ class FileIdSelectComponent {
     }
     loadFiles() {
         this.loading = true;
-        this._publicFileService
-            .search({
+        const isPrivate = this.crocoHtmlEditorFileOptions.usePrivateFiles;
+        const searchParams = {
             count: 10,
             offSet: 0,
             fileName: null,
             fileTypes: [FileType.Image],
-            applicationId: null,
+            applicationId: isPrivate ? this.crocoHtmlEditorFileOptions.applicationId : null,
             q: this.q
-        })
-            .subscribe(data => {
-            this.files = [...data.list];
-            this.loading = false;
-        });
+        };
+        if (isPrivate) {
+            this._privateFileService.search(searchParams)
+                .subscribe(data => {
+                this.files = data.list.map(el => ({ fileId: el.id, fileName: el.fileName }));
+                this.loading = false;
+            });
+        }
+        else {
+            this._publicFileService.search(searchParams)
+                .subscribe(data => {
+                this.files = data.list.map(el => ({ fileId: el.fileId.toString(), fileName: el.fileName }));
+                this.loading = false;
+            });
+        }
     }
     onSearchChanged(q) {
         this.q = q.term;
@@ -1779,13 +1898,13 @@ class FileIdSelectComponent {
     ngOnChanges(changes) {
         this.loadFiles();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FileIdSelectComponent, deps: [{ token: PublicFilesQueryService }, { token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: FileIdSelectComponent, isStandalone: true, selector: "croco-html-file-id-select", inputs: { labelText: "labelText", fileId: "fileId" }, outputs: { fileId: "fileId", onFileIdChanged: "onFileIdChanged" }, usesOnChanges: true, ngImport: i0, template: "<div>\n    <div class=\"form-group\">\n        <label for=\"fileName\">{{labelText}}</label>\n        <ng-select [(ngModel)]=\"fileId\" (ngModelChange)=\"onModelChanged($event)\" [items]=\"files\" #select\n            bindLabel=\"fileName\" (search)=\"onSearchChanged($event)\" [loading]=\"loading\" [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\n            dropdownPosition=\"auto\" bindValue=\"fileId\" labelForId=\"fileName\" placeholder=\"\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B\"\n            [virtualScroll]=\"true\">\n            <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n                <div>\n                    <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc(item.fileId)\" />\n                </div>\n                <div>\n                    <span class=\"h5\">\u0424\u0430\u0439\u043B: </span>\n                    <span class=\"h5\" [ngOptionHighlight]=\"search\"><b>{{item.fileName}}</b></span>\n                </div>\n                <div>\n                    <small>\n                        <span>\n                            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: <b>{{item.fileId}}</b>\n                        </span>\n                    </small>\n                </div>\n            </ng-template>\n        </ng-select>\n    </div>\n</div>\n\n<div>\n    \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: {{fileId}}\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i2$2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i2$2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FileIdSelectComponent, deps: [{ token: PublicFilesQueryService }, { token: PrivateFilesQueryService }, { token: CrocoHtmlFileOptionsService }, { token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: FileIdSelectComponent, isStandalone: true, selector: "croco-html-file-id-select", inputs: { labelText: "labelText", fileId: "fileId" }, outputs: { fileId: "fileId", onFileIdChanged: "onFileIdChanged" }, usesOnChanges: true, ngImport: i0, template: "<div>\n    <div class=\"form-group\">\n        <label for=\"fileName\">{{labelText}}</label>\n        <ng-select [(ngModel)]=\"fileId\" (ngModelChange)=\"onModelChanged($event)\" [items]=\"files\" #select\n            bindLabel=\"fileName\" (search)=\"onSearchChanged($event)\" [loading]=\"loading\" [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\n            dropdownPosition=\"auto\" [bindValue]=\"'fileId'\" labelForId=\"fileName\" placeholder=\"\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B\"\n            [virtualScroll]=\"true\">\n            <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n                <div>\n                    <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc(item.fileId)\" />\n                </div>\n                <div>\n                    <span class=\"h5\">\u0424\u0430\u0439\u043B: </span>\n                    <span class=\"h5\" [ngOptionHighlight]=\"search\"><b>{{item.fileName}}</b></span>\n                </div>\n                <div>\n                    <small>\n                        <span>\n                            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: <b>{{item.fileId }}</b>\n                        </span>\n                    </small>\n                </div>\n            </ng-template>\n        </ng-select>\n    </div>\n</div>\n\n<div>\n    \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: {{fileId}}\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i4.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FileIdSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-file-id-select', standalone: true, imports: [NgSelectModule, FormsModule], template: "<div>\n    <div class=\"form-group\">\n        <label for=\"fileName\">{{labelText}}</label>\n        <ng-select [(ngModel)]=\"fileId\" (ngModelChange)=\"onModelChanged($event)\" [items]=\"files\" #select\n            bindLabel=\"fileName\" (search)=\"onSearchChanged($event)\" [loading]=\"loading\" [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\n            dropdownPosition=\"auto\" bindValue=\"fileId\" labelForId=\"fileName\" placeholder=\"\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B\"\n            [virtualScroll]=\"true\">\n            <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n                <div>\n                    <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc(item.fileId)\" />\n                </div>\n                <div>\n                    <span class=\"h5\">\u0424\u0430\u0439\u043B: </span>\n                    <span class=\"h5\" [ngOptionHighlight]=\"search\"><b>{{item.fileName}}</b></span>\n                </div>\n                <div>\n                    <small>\n                        <span>\n                            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: <b>{{item.fileId}}</b>\n                        </span>\n                    </small>\n                </div>\n            </ng-template>\n        </ng-select>\n    </div>\n</div>\n\n<div>\n    \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: {{fileId}}\n</div>" }]
-        }], ctorParameters: () => [{ type: PublicFilesQueryService }, { type: undefined, decorators: [{
+            args: [{ selector: 'croco-html-file-id-select', standalone: true, imports: [NgSelectModule, FormsModule], template: "<div>\n    <div class=\"form-group\">\n        <label for=\"fileName\">{{labelText}}</label>\n        <ng-select [(ngModel)]=\"fileId\" (ngModelChange)=\"onModelChanged($event)\" [items]=\"files\" #select\n            bindLabel=\"fileName\" (search)=\"onSearchChanged($event)\" [loading]=\"loading\" [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\n            dropdownPosition=\"auto\" [bindValue]=\"'fileId'\" labelForId=\"fileName\" placeholder=\"\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B\"\n            [virtualScroll]=\"true\">\n            <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n                <div>\n                    <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc(item.fileId)\" />\n                </div>\n                <div>\n                    <span class=\"h5\">\u0424\u0430\u0439\u043B: </span>\n                    <span class=\"h5\" [ngOptionHighlight]=\"search\"><b>{{item.fileName}}</b></span>\n                </div>\n                <div>\n                    <small>\n                        <span>\n                            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: <b>{{item.fileId }}</b>\n                        </span>\n                    </small>\n                </div>\n            </ng-template>\n        </ng-select>\n    </div>\n</div>\n\n<div>\n    \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: {{fileId}}\n</div>\n" }]
+        }], ctorParameters: () => [{ type: PublicFilesQueryService }, { type: PrivateFilesQueryService }, { type: CrocoHtmlFileOptionsService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [CrocoHtmlOptionsToken]
                 }] }], propDecorators: { labelText: [{
@@ -1803,10 +1922,10 @@ class ImageEditorComponent {
         this.hasImageError = true;
     }
     get fileId() {
-        return this.tag.attributes['file-id'];
+        return this.tag.attributes[FileImageTagDataConsts.FileIdAttrName];
     }
     set fileId(value) {
-        this.tag.attributes['file-id'] = value;
+        this.tag.attributes[FileImageTagDataConsts.FileIdAttrName] = value;
     }
     constructor(_options, screenWidthService) {
         this._options = _options;
@@ -1824,7 +1943,7 @@ class ImageEditorComponent {
         return ImageMethods.buildUrl(this.tag.attributes[FileImageTagDataConsts.FileIdAttrName], "Medium", this._options);
     }
     hasFileId() {
-        return this.tag.attributes.hasOwnProperty(FileImageTagDataConsts.FileIdAttrName) && !isNaN(this.tag.attributes[FileImageTagDataConsts.FileIdAttrName]);
+        return this.tag.attributes.hasOwnProperty(FileImageTagDataConsts.FileIdAttrName);
     }
     onFileIdChanged(fileId) {
         this.tag.attributes[FileImageTagDataConsts.FileIdAttrName] = fileId;
@@ -1864,7 +1983,7 @@ class ImageEditorComponent {
         this.unsubscribe.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ImageEditorComponent, deps: [{ token: CrocoHtmlOptionsToken }, { token: ScreenWidthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: ImageEditorComponent, isStandalone: true, selector: "croco-html-image-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "<div>\n  <div style=\"height: 10px;\">\n  </div>\n\n  @if (hasImageError) {\n    <div class=\"error-block\">\n      \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E \u043F\u043E \u0443\u043A\u0430\u0437\u0430\u043D\u043D\u043E\u043C\u0443 \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E \u0444\u0430\u0439\u043B \u043D\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u043B\u0438 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043D\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.\n    </div>\n  }\n\n  @if (hasFileId() && !hasImageError) {\n    <div>\n      <img\n        [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%', 'max-width': imageMaxWidth ? imageMaxWidth + 'px' : '100%', }\"\n        class=\"mx-auto d-block img-fluid\" [src]=\"getSrc()\" (error)=\"onErrorHandler()\" alt=\"photo\"/>\n    </div>\n  }\n\n  @if (!hasFileId()) {\n    <div>\n      <h5>[\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E]</h5>\n    </div>\n  }\n\n  @if(!tag.presentOrEdit) {\n    <mat-slide-toggle style=\"padding: 10px 0\" [(ngModel)]=\"isShowMediaRequest\">\u041F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C \u043C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B</mat-slide-toggle>\n  }\n\n  @if(isShowMediaRequest) {\n    <div style=\"display: flex; flex-direction: column; gap: 20px\">\n      <div class=\"media-request__header\">\n        <span>\u041C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B:</span>\n        @if (!tag.presentOrEdit) {\n          <button (click)=\"addNewMediaRequest()\" class=\"w-30\" mat-icon-button color=\"primary\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n      </div>\n      @for (request of requests; track $index) {\n        <div class=\"media-request__container\">\n          @if (tag.presentOrEdit) {\n            <div style=\"display: flex; flex-direction: column; gap: 5px\">\n              <span class=\"w-100\">\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.minScreenWidth}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.maxScreenWidth}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageHeight}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageWidth}}</span>\n            </div>\n          }\n\n          @if (!tag.presentOrEdit) {\n            <div style=\"width: 100%\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.minScreenWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxScreenWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxImageHeight\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxImageWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n            </div>\n\n            <button (click)=\"deleteMediaRequest($index)\" class=\"w-30\" mat-icon-button color=\"warn\">\n              <mat-icon>delete</mat-icon>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n\n@if (!tag.presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\"></div>\n    <div style=\"overflow-x:auto;\">\n      <mat-button-toggle-group [(ngModel)]=\"searchOrEdit\">\n        <mat-button-toggle value=\"search\">\n          \u0418\u0441\u043A\u0430\u0442\u044C \u0444\u0430\u0439\u043B <mat-icon>search</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"edit\">\n          \u0423\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u043E \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443 <mat-icon>settings</mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <div [hidden]=\"searchOrEdit !== 'search'\">\n      <croco-html-file-id-select\n        [labelText]=\"'\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B'\"\n        [(fileId)]=\"fileId\"\n        (onFileIdChanged)=\"onFileIdChanged($event)\">\n      </croco-html-file-id-select>\n    </div>\n    <div [hidden]=\"searchOrEdit !== 'edit'\">\n      <div>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\n            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\n          </mat-label>\n          <input matInput placeholder=\"\u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\" new-autocomplete=\"off\" autocomplete=\"off\"\n            type=\"number\"\n            [(ngModel)]=\"fileId\"\n            (ngModelChange)=\"removeImageError()\">\n        </mat-form-field>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".error-block{background-color:#f32323;color:#fff;text-align:center;border-radius:10px;padding:10px}.media-request__header{align-items:center;display:flex;width:100%;justify-content:space-between}.media-request__container{display:flex;align-items:center;border-bottom:1px solid rgba(128,128,128,.7);padding-bottom:10px}@media screen and (max-width: 700px){mat-button-toggle-group{display:flex;flex-direction:column}}\n"], dependencies: [{ kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FileIdSelectComponent, selector: "croco-html-file-id-select", inputs: ["labelText", "fileId"], outputs: ["fileId", "onFileIdChanged"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: ImageEditorComponent, isStandalone: true, selector: "croco-html-image-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "<div>\n  <div style=\"height: 10px;\">\n  </div>\n\n  @if (hasImageError) {\n    <div class=\"error-block\">\n      \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E \u043F\u043E \u0443\u043A\u0430\u0437\u0430\u043D\u043D\u043E\u043C\u0443 \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E \u0444\u0430\u0439\u043B \u043D\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u043B\u0438 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043D\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.\n    </div>\n  }\n\n  @if (hasFileId() && !hasImageError) {\n    <div>\n      <img\n        [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%', 'max-width': imageMaxWidth ? imageMaxWidth + 'px' : '100%', }\"\n        class=\"mx-auto d-block img-fluid\" [src]=\"getSrc()\" (error)=\"onErrorHandler()\" alt=\"photo\"/>\n    </div>\n  }\n\n  @if (!hasFileId()) {\n    <div>\n      <h5>[\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E]</h5>\n    </div>\n  }\n\n  @if(!tag.presentOrEdit) {\n    <mat-slide-toggle style=\"padding: 10px 0\" [(ngModel)]=\"isShowMediaRequest\">\u041F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C \u043C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B</mat-slide-toggle>\n  }\n\n  @if(isShowMediaRequest) {\n    <div style=\"display: flex; flex-direction: column; gap: 20px\">\n      <div class=\"media-request__header\">\n        <span>\u041C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B:</span>\n        @if (!tag.presentOrEdit) {\n          <button (click)=\"addNewMediaRequest()\" class=\"w-30\" mat-icon-button color=\"primary\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n      </div>\n      @for (request of requests; track $index) {\n        <div class=\"media-request__container\">\n          @if (tag.presentOrEdit) {\n            <div style=\"display: flex; flex-direction: column; gap: 5px\">\n              <span class=\"w-100\">\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.minScreenWidth}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.maxScreenWidth}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageHeight}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageWidth}}</span>\n            </div>\n          }\n\n          @if (!tag.presentOrEdit) {\n            <div style=\"width: 100%\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.minScreenWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxScreenWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxImageHeight\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxImageWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n            </div>\n\n            <button (click)=\"deleteMediaRequest($index)\" class=\"w-30\" mat-icon-button color=\"warn\">\n              <mat-icon>delete</mat-icon>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n\n@if (!tag.presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\"></div>\n    <div style=\"overflow-x:auto;\">\n      <mat-button-toggle-group [(ngModel)]=\"searchOrEdit\">\n        <mat-button-toggle value=\"search\">\n          \u0418\u0441\u043A\u0430\u0442\u044C \u0444\u0430\u0439\u043B <mat-icon>search</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"edit\">\n          \u0423\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u043E \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443 <mat-icon>settings</mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <div [hidden]=\"searchOrEdit !== 'search'\">\n      <croco-html-file-id-select\n        [labelText]=\"'\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B'\"\n        [(fileId)]=\"fileId\"\n        (onFileIdChanged)=\"onFileIdChanged($event)\">\n      </croco-html-file-id-select>\n    </div>\n    <div [hidden]=\"searchOrEdit !== 'edit'\">\n      <div>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\n            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\n          </mat-label>\n          <input matInput placeholder=\"\u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\" new-autocomplete=\"off\" autocomplete=\"off\"\n            [(ngModel)]=\"fileId\"\n            (ngModelChange)=\"onFileIdChanged($event)\">\n        </mat-form-field>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".error-block{background-color:#f32323;color:#fff;text-align:center;border-radius:10px;padding:10px}.media-request__header{align-items:center;display:flex;width:100%;justify-content:space-between}.media-request__container{display:flex;align-items:center;border-bottom:1px solid rgba(128,128,128,.7);padding-bottom:10px}@media screen and (max-width: 700px){mat-button-toggle-group{display:flex;flex-direction:column}}\n"], dependencies: [{ kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FileIdSelectComponent, selector: "croco-html-file-id-select", inputs: ["labelText", "fileId"], outputs: ["fileId", "onFileIdChanged"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ImageEditorComponent, decorators: [{
             type: Component,
@@ -1880,7 +1999,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                         NgStyle,
                         MatIconButton,
                         MatSlideToggle
-                    ], template: "<div>\n  <div style=\"height: 10px;\">\n  </div>\n\n  @if (hasImageError) {\n    <div class=\"error-block\">\n      \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E \u043F\u043E \u0443\u043A\u0430\u0437\u0430\u043D\u043D\u043E\u043C\u0443 \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E \u0444\u0430\u0439\u043B \u043D\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u043B\u0438 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043D\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.\n    </div>\n  }\n\n  @if (hasFileId() && !hasImageError) {\n    <div>\n      <img\n        [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%', 'max-width': imageMaxWidth ? imageMaxWidth + 'px' : '100%', }\"\n        class=\"mx-auto d-block img-fluid\" [src]=\"getSrc()\" (error)=\"onErrorHandler()\" alt=\"photo\"/>\n    </div>\n  }\n\n  @if (!hasFileId()) {\n    <div>\n      <h5>[\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E]</h5>\n    </div>\n  }\n\n  @if(!tag.presentOrEdit) {\n    <mat-slide-toggle style=\"padding: 10px 0\" [(ngModel)]=\"isShowMediaRequest\">\u041F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C \u043C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B</mat-slide-toggle>\n  }\n\n  @if(isShowMediaRequest) {\n    <div style=\"display: flex; flex-direction: column; gap: 20px\">\n      <div class=\"media-request__header\">\n        <span>\u041C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B:</span>\n        @if (!tag.presentOrEdit) {\n          <button (click)=\"addNewMediaRequest()\" class=\"w-30\" mat-icon-button color=\"primary\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n      </div>\n      @for (request of requests; track $index) {\n        <div class=\"media-request__container\">\n          @if (tag.presentOrEdit) {\n            <div style=\"display: flex; flex-direction: column; gap: 5px\">\n              <span class=\"w-100\">\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.minScreenWidth}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.maxScreenWidth}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageHeight}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageWidth}}</span>\n            </div>\n          }\n\n          @if (!tag.presentOrEdit) {\n            <div style=\"width: 100%\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.minScreenWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxScreenWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxImageHeight\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxImageWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n            </div>\n\n            <button (click)=\"deleteMediaRequest($index)\" class=\"w-30\" mat-icon-button color=\"warn\">\n              <mat-icon>delete</mat-icon>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n\n@if (!tag.presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\"></div>\n    <div style=\"overflow-x:auto;\">\n      <mat-button-toggle-group [(ngModel)]=\"searchOrEdit\">\n        <mat-button-toggle value=\"search\">\n          \u0418\u0441\u043A\u0430\u0442\u044C \u0444\u0430\u0439\u043B <mat-icon>search</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"edit\">\n          \u0423\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u043E \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443 <mat-icon>settings</mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <div [hidden]=\"searchOrEdit !== 'search'\">\n      <croco-html-file-id-select\n        [labelText]=\"'\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B'\"\n        [(fileId)]=\"fileId\"\n        (onFileIdChanged)=\"onFileIdChanged($event)\">\n      </croco-html-file-id-select>\n    </div>\n    <div [hidden]=\"searchOrEdit !== 'edit'\">\n      <div>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\n            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\n          </mat-label>\n          <input matInput placeholder=\"\u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\" new-autocomplete=\"off\" autocomplete=\"off\"\n            type=\"number\"\n            [(ngModel)]=\"fileId\"\n            (ngModelChange)=\"removeImageError()\">\n        </mat-form-field>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".error-block{background-color:#f32323;color:#fff;text-align:center;border-radius:10px;padding:10px}.media-request__header{align-items:center;display:flex;width:100%;justify-content:space-between}.media-request__container{display:flex;align-items:center;border-bottom:1px solid rgba(128,128,128,.7);padding-bottom:10px}@media screen and (max-width: 700px){mat-button-toggle-group{display:flex;flex-direction:column}}\n"] }]
+                    ], template: "<div>\n  <div style=\"height: 10px;\">\n  </div>\n\n  @if (hasImageError) {\n    <div class=\"error-block\">\n      \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E \u043F\u043E \u0443\u043A\u0430\u0437\u0430\u043D\u043D\u043E\u043C\u0443 \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E \u0444\u0430\u0439\u043B \u043D\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u043B\u0438 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043D\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.\n    </div>\n  }\n\n  @if (hasFileId() && !hasImageError) {\n    <div>\n      <img\n        [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%', 'max-width': imageMaxWidth ? imageMaxWidth + 'px' : '100%', }\"\n        class=\"mx-auto d-block img-fluid\" [src]=\"getSrc()\" (error)=\"onErrorHandler()\" alt=\"photo\"/>\n    </div>\n  }\n\n  @if (!hasFileId()) {\n    <div>\n      <h5>[\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E]</h5>\n    </div>\n  }\n\n  @if(!tag.presentOrEdit) {\n    <mat-slide-toggle style=\"padding: 10px 0\" [(ngModel)]=\"isShowMediaRequest\">\u041F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C \u043C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B</mat-slide-toggle>\n  }\n\n  @if(isShowMediaRequest) {\n    <div style=\"display: flex; flex-direction: column; gap: 20px\">\n      <div class=\"media-request__header\">\n        <span>\u041C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B:</span>\n        @if (!tag.presentOrEdit) {\n          <button (click)=\"addNewMediaRequest()\" class=\"w-30\" mat-icon-button color=\"primary\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n      </div>\n      @for (request of requests; track $index) {\n        <div class=\"media-request__container\">\n          @if (tag.presentOrEdit) {\n            <div style=\"display: flex; flex-direction: column; gap: 5px\">\n              <span class=\"w-100\">\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.minScreenWidth}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.maxScreenWidth}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageHeight}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageWidth}}</span>\n            </div>\n          }\n\n          @if (!tag.presentOrEdit) {\n            <div style=\"width: 100%\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.minScreenWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxScreenWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxImageHeight\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxImageWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n            </div>\n\n            <button (click)=\"deleteMediaRequest($index)\" class=\"w-30\" mat-icon-button color=\"warn\">\n              <mat-icon>delete</mat-icon>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n\n@if (!tag.presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\"></div>\n    <div style=\"overflow-x:auto;\">\n      <mat-button-toggle-group [(ngModel)]=\"searchOrEdit\">\n        <mat-button-toggle value=\"search\">\n          \u0418\u0441\u043A\u0430\u0442\u044C \u0444\u0430\u0439\u043B <mat-icon>search</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"edit\">\n          \u0423\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u043E \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443 <mat-icon>settings</mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <div [hidden]=\"searchOrEdit !== 'search'\">\n      <croco-html-file-id-select\n        [labelText]=\"'\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B'\"\n        [(fileId)]=\"fileId\"\n        (onFileIdChanged)=\"onFileIdChanged($event)\">\n      </croco-html-file-id-select>\n    </div>\n    <div [hidden]=\"searchOrEdit !== 'edit'\">\n      <div>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\n            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\n          </mat-label>\n          <input matInput placeholder=\"\u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\" new-autocomplete=\"off\" autocomplete=\"off\"\n            [(ngModel)]=\"fileId\"\n            (ngModelChange)=\"onFileIdChanged($event)\">\n        </mat-form-field>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".error-block{background-color:#f32323;color:#fff;text-align:center;border-radius:10px;padding:10px}.media-request__header{align-items:center;display:flex;width:100%;justify-content:space-between}.media-request__container{display:flex;align-items:center;border-bottom:1px solid rgba(128,128,128,.7);padding-bottom:10px}@media screen and (max-width: 700px){mat-button-toggle-group{display:flex;flex-direction:column}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [CrocoHtmlOptionsToken]
@@ -2364,11 +2483,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 type: Input
             }] } });
 
+class HtmlEditorSettingsModalComponent {
+    constructor(fb, dialogRef, _htmlSettingsService) {
+        this.fb = fb;
+        this.dialogRef = dialogRef;
+        this._htmlSettingsService = _htmlSettingsService;
+        this.form = this.fb.group({
+            usePrivateFiles: false,
+            applicationId: ''
+        });
+    }
+    ngOnInit() {
+        this.form.patchValue(this._htmlSettingsService.get());
+    }
+    cancel() {
+        this.dialogRef.close();
+    }
+    setSettings() {
+        this.dialogRef.close(this.form.getRawValue());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: HtmlEditorSettingsModalComponent, deps: [{ token: i1$4.FormBuilder }, { token: i2$2.MatDialogRef }, { token: CrocoHtmlFileOptionsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: HtmlEditorSettingsModalComponent, isStandalone: true, selector: "croco-html-html-editor-settings-modal", ngImport: i0, template: "<div mat-dialog-title>Editor Settings</div>\n<div mat-dialog-content class=\"editor-settings\" [formGroup]=\"form\">\n  <mat-form-field style=\"margin-top: 20px\">\n    <mat-label>\n      applicationId\n    </mat-label>\n    <input matInput formControlName=\"applicationId\">\n  </mat-form-field>\n\n  <div>\n    <mat-label>\n      usePrivateFiles\n    </mat-label>\n    <mat-checkbox\n      formControlName=\"usePrivateFiles\">\n    </mat-checkbox>\n  </div>\n\n</div>\n<div mat-dialog-actions style=\"display: flex; justify-content: flex-end\">\n  <button mat-raised-button color=\"warn\" (click)=\"cancel()\" >Cancel</button>\n  <button mat-raised-button color=\"primary\" (click)=\"setSettings()\">Ok</button>\n</div>\n", styles: [".editor-settings{padding:20px;display:flex;gap:10px;flex-direction:column;width:360px}\n"], dependencies: [{ kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatFormField$1, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel$1, selector: "mat-label" }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: HtmlEditorSettingsModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'croco-html-html-editor-settings-modal', standalone: true, imports: [
+                        MatInput,
+                        MatCheckbox,
+                        ReactiveFormsModule,
+                        MatFormField$1,
+                        MatLabel$1,
+                        MatDialogTitle,
+                        MatDialogContent,
+                        MatDialogActions,
+                        MatButton
+                    ], template: "<div mat-dialog-title>Editor Settings</div>\n<div mat-dialog-content class=\"editor-settings\" [formGroup]=\"form\">\n  <mat-form-field style=\"margin-top: 20px\">\n    <mat-label>\n      applicationId\n    </mat-label>\n    <input matInput formControlName=\"applicationId\">\n  </mat-form-field>\n\n  <div>\n    <mat-label>\n      usePrivateFiles\n    </mat-label>\n    <mat-checkbox\n      formControlName=\"usePrivateFiles\">\n    </mat-checkbox>\n  </div>\n\n</div>\n<div mat-dialog-actions style=\"display: flex; justify-content: flex-end\">\n  <button mat-raised-button color=\"warn\" (click)=\"cancel()\" >Cancel</button>\n  <button mat-raised-button color=\"primary\" (click)=\"setSettings()\">Ok</button>\n</div>\n", styles: [".editor-settings{padding:20px;display:flex;gap:10px;flex-direction:column;width:360px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$4.FormBuilder }, { type: i2$2.MatDialogRef }, { type: CrocoHtmlFileOptionsService }] });
+
 class MainEditorComponent {
-    constructor(_clipboardService, _snackBar, _cdref) {
+    constructor(_clipboardService, _snackBar, _cdref, _dialog, _htmlSettingsService) {
         this._clipboardService = _clipboardService;
         this._snackBar = _snackBar;
         this._cdref = _cdref;
+        this._dialog = _dialog;
+        this._htmlSettingsService = _htmlSettingsService;
         this.visualEditorRendered = false;
         this.showMarkUp = true;
         this.useHtmlRaw = false;
@@ -2404,9 +2562,22 @@ class MainEditorComponent {
     }
     ngOnInit() {
         this.visualEditor.recalculateBodyTags();
+        this._htmlSettingsService.set(this._htmlSettingsService.get());
+    }
+    openSettings() {
+        this._dialog.open(HtmlEditorSettingsModalComponent, {
+            height: '300px',
+        }).afterClosed().subscribe((data) => {
+            if (!data)
+                return;
+            this._htmlSettingsService.set({
+                usePrivateFiles: data.usePrivateFiles,
+                applicationId: data.applicationId === '' ? null : data.applicationId,
+            });
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MainEditorComponent, deps: [{ token: i1$5.ClipboardService }, { token: i2$3.MatSnackBar }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: MainEditorComponent, isStandalone: true, selector: "croco-html-main-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged" }, viewQueries: [{ propertyName: "visualEditor", first: true, predicate: ["visualEditor"], descendants: true, static: true }], ngImport: i0, template: "<mat-tab-group mat-stretch-tabs=\"false\" mat-align-tabs=\"start\">\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'visual-editor-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 20px;\"></div>\n\n    <croco-visual-editor #visualEditor [useHtmlRaw]=\"true\" [html]=\"html\" (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n      (rendered)=\"visualEditorRenderedHandler()\">\n    </croco-visual-editor>\n\n    <div style=\"height: 20px;\"></div>\n  </mat-tab>\n\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'source-code-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 10px;\"></div>\n    @if (visualEditorRendered) {\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434</mat-label>\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\" cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\" (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n      </mat-form-field>\n    </div>\n    }\n\n    <button (click)=\"copyMarkUp()\" mat-raised-button color=\"primary\">\n      \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n    </button>\n  </mat-tab>\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"30\">\n        <use [attr.xlink:href]=\"'viewer-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n\n    <mat-card style=\"padding: 2px;\" class=\"mat-card\">\n      <mat-card-content>\n        <croco-html-view [html]=\"html\">\n        </croco-html-view>\n      </mat-card-content>\n    </mat-card>\n  </mat-tab>\n</mat-tab-group>", styles: [":host ::ng-deep .mdc-tab.mat-mdc-tab{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab .custom-icon{fill:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover .custom-icon{fill:#747ebf}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active{background-color:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active svg.custom-icon{fill:#fff}:host ::ng-deep div.mat-mdc-tab-labels{justify-content:center}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i3$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i3$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i3$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: VisualEditorComponent, selector: "croco-visual-editor", inputs: ["showMarkUp", "useHtmlRaw", "html"], outputs: ["html", "onHtmlChanged", "rendered"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: HtmlViewComponent, selector: "croco-html-view", inputs: ["html"] }, { kind: "pipe", type: SpriteIconPathPipe, name: "spriteIconPath" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MainEditorComponent, deps: [{ token: i1$5.ClipboardService }, { token: i2$3.MatSnackBar }, { token: i0.ChangeDetectorRef }, { token: i2$2.MatDialog }, { token: CrocoHtmlFileOptionsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: MainEditorComponent, isStandalone: true, selector: "croco-html-main-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged" }, viewQueries: [{ propertyName: "visualEditor", first: true, predicate: ["visualEditor"], descendants: true, static: true }], ngImport: i0, template: "<mat-tab-group mat-stretch-tabs=\"false\" mat-align-tabs=\"start\" style=\"position: relative\">\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'visual-editor-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 20px;\"></div>\n\n    <croco-visual-editor #visualEditor [useHtmlRaw]=\"true\" [html]=\"html\" (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n      (rendered)=\"visualEditorRenderedHandler()\">\n    </croco-visual-editor>\n\n    <div style=\"height: 20px;\"></div>\n  </mat-tab>\n\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'source-code-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 10px;\"></div>\n    @if (visualEditorRendered) {\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434</mat-label>\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\" cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\" (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n      </mat-form-field>\n    </div>\n    }\n\n    <button (click)=\"copyMarkUp()\" mat-raised-button color=\"primary\">\n      \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n    </button>\n  </mat-tab>\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"30\">\n        <use [attr.xlink:href]=\"'viewer-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n\n    <mat-card style=\"padding: 2px;\" class=\"mat-card\">\n      <mat-card-content>\n        <croco-html-view [html]=\"html\">\n        </croco-html-view>\n      </mat-card-content>\n    </mat-card>\n  </mat-tab>\n</mat-tab-group>\n\n<div>\n  <mat-icon class=\"settings\" (click)=\"openSettings()\">settings</mat-icon>\n</div>\n", styles: [":host ::ng-deep .mdc-tab.mat-mdc-tab{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab .custom-icon{fill:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover .custom-icon{fill:#747ebf}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active{background-color:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active svg.custom-icon{fill:#fff}:host ::ng-deep div.mat-mdc-tab-labels{justify-content:center}:host{position:relative}:host ::ng-deep .mat-expansion-panel,:host ::ng-deep .mat-mdc-tab-body-content,:host ::ng-deep .mat-mdc-tab-body,:host ::ng-deep .mat-mdc-tab-body-wrapper{overflow:visible}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.settings{position:absolute;top:20px;right:20px;cursor:pointer;z-index:1000}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i5.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: VisualEditorComponent, selector: "croco-visual-editor", inputs: ["showMarkUp", "useHtmlRaw", "html"], outputs: ["html", "onHtmlChanged", "rendered"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: HtmlViewComponent, selector: "croco-html-view", inputs: ["html"] }, { kind: "pipe", type: SpriteIconPathPipe, name: "spriteIconPath" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MainEditorComponent, decorators: [{
             type: Component,
@@ -2421,9 +2592,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                         MatButton,
                         MatCardModule,
                         HtmlViewComponent,
-                        SpriteIconPathPipe
-                    ], template: "<mat-tab-group mat-stretch-tabs=\"false\" mat-align-tabs=\"start\">\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'visual-editor-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 20px;\"></div>\n\n    <croco-visual-editor #visualEditor [useHtmlRaw]=\"true\" [html]=\"html\" (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n      (rendered)=\"visualEditorRenderedHandler()\">\n    </croco-visual-editor>\n\n    <div style=\"height: 20px;\"></div>\n  </mat-tab>\n\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'source-code-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 10px;\"></div>\n    @if (visualEditorRendered) {\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434</mat-label>\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\" cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\" (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n      </mat-form-field>\n    </div>\n    }\n\n    <button (click)=\"copyMarkUp()\" mat-raised-button color=\"primary\">\n      \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n    </button>\n  </mat-tab>\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"30\">\n        <use [attr.xlink:href]=\"'viewer-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n\n    <mat-card style=\"padding: 2px;\" class=\"mat-card\">\n      <mat-card-content>\n        <croco-html-view [html]=\"html\">\n        </croco-html-view>\n      </mat-card-content>\n    </mat-card>\n  </mat-tab>\n</mat-tab-group>", styles: [":host ::ng-deep .mdc-tab.mat-mdc-tab{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab .custom-icon{fill:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover .custom-icon{fill:#747ebf}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active{background-color:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active svg.custom-icon{fill:#fff}:host ::ng-deep div.mat-mdc-tab-labels{justify-content:center}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
-        }], ctorParameters: () => [{ type: i1$5.ClipboardService }, { type: i2$3.MatSnackBar }, { type: i0.ChangeDetectorRef }], propDecorators: { visualEditor: [{
+                        SpriteIconPathPipe,
+                        MatIcon
+                    ], template: "<mat-tab-group mat-stretch-tabs=\"false\" mat-align-tabs=\"start\" style=\"position: relative\">\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'visual-editor-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 20px;\"></div>\n\n    <croco-visual-editor #visualEditor [useHtmlRaw]=\"true\" [html]=\"html\" (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n      (rendered)=\"visualEditorRenderedHandler()\">\n    </croco-visual-editor>\n\n    <div style=\"height: 20px;\"></div>\n  </mat-tab>\n\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'source-code-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 10px;\"></div>\n    @if (visualEditorRendered) {\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434</mat-label>\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\" cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\" (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n      </mat-form-field>\n    </div>\n    }\n\n    <button (click)=\"copyMarkUp()\" mat-raised-button color=\"primary\">\n      \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n    </button>\n  </mat-tab>\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"30\">\n        <use [attr.xlink:href]=\"'viewer-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n\n    <mat-card style=\"padding: 2px;\" class=\"mat-card\">\n      <mat-card-content>\n        <croco-html-view [html]=\"html\">\n        </croco-html-view>\n      </mat-card-content>\n    </mat-card>\n  </mat-tab>\n</mat-tab-group>\n\n<div>\n  <mat-icon class=\"settings\" (click)=\"openSettings()\">settings</mat-icon>\n</div>\n", styles: [":host ::ng-deep .mdc-tab.mat-mdc-tab{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab .custom-icon{fill:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover .custom-icon{fill:#747ebf}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active{background-color:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active svg.custom-icon{fill:#fff}:host ::ng-deep div.mat-mdc-tab-labels{justify-content:center}:host{position:relative}:host ::ng-deep .mat-expansion-panel,:host ::ng-deep .mat-mdc-tab-body-content,:host ::ng-deep .mat-mdc-tab-body,:host ::ng-deep .mat-mdc-tab-body-wrapper{overflow:visible}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.settings{position:absolute;top:20px;right:20px;cursor:pointer;z-index:1000}\n"] }]
+        }], ctorParameters: () => [{ type: i1$5.ClipboardService }, { type: i2$3.MatSnackBar }, { type: i0.ChangeDetectorRef }, { type: i2$2.MatDialog }, { type: CrocoHtmlFileOptionsService }], propDecorators: { visualEditor: [{
                 type: ViewChild,
                 args: ["visualEditor", { static: true }]
             }], showMarkUp: [{
@@ -2571,7 +2743,7 @@ class CrocoHtmlModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: CrocoHtmlModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
-            NgSelectModule, i1$6.MatBadgeModule, i2$4.MatTableModule, i3$2.MatExpansionModule, i1$3.MatFormFieldModule, i2$3.MatSnackBarModule, i6.MatProgressBarModule, i7.MatProgressSpinnerModule, i3$1.MatTabsModule, i9.MatMenuModule, i1$2.MatCardModule, i11.MatSelectModule, i12.MatTooltipModule, i13.MatCheckboxModule, i14.MatChipsModule, i15.MatListModule, i2.MatButtonModule, i2$1.MatInputModule, i18.MatDialogModule, i19.MatPaginatorModule, i20.MatDatepickerModule, i21.MatGridListModule, i22.MatSlideToggleModule, i23.MatTreeModule, i24.MatNativeDateModule, i25.MatAutocompleteModule, i26.MatSidenavModule, i27.MatIconModule, i28.DragDropModule, i29.MatButtonToggleModule, ErrorBannerComponent,
+            NgSelectModule, i1$6.MatBadgeModule, i2$4.MatTableModule, i3$1.MatExpansionModule, i1$3.MatFormFieldModule, i2$3.MatSnackBarModule, i6.MatProgressBarModule, i7.MatProgressSpinnerModule, i5.MatTabsModule, i9.MatMenuModule, i1$2.MatCardModule, i11.MatSelectModule, i12.MatTooltipModule, i13.MatCheckboxModule, i14.MatChipsModule, i15.MatListModule, i2.MatButtonModule, i2$1.MatInputModule, i2$2.MatDialogModule, i19.MatPaginatorModule, i20.MatDatepickerModule, i21.MatGridListModule, i22.MatSlideToggleModule, i23.MatTreeModule, i24.MatNativeDateModule, i25.MatAutocompleteModule, i26.MatSidenavModule, i27.MatIconModule, i28.DragDropModule, i29.MatButtonToggleModule, ErrorBannerComponent,
             VkVideoPlayerComponent,
             YoutubeVideoPlayerComponent,
             DownloadFileButtonEditorComponent,