croco-html 2.4.0 → 2.6.0

package/fesm2022/croco-html.mjs

@@ -1,47 +1,46 @@
 import * as i0 from '@angular/core';
 import { Injectable, Inject, EventEmitter, Component, ViewChild, Input, Output, signal, ChangeDetectionStrategy, ViewEncapsulation, Pipe, NgModule } from '@angular/core';
-import * as i2 from '@angular/material/button';
+import * as i1$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i1 from '@angular/common/http';
 import { HttpEventType, HttpResponse } from '@angular/common/http';
 import { throwError, Observable, map, distinctUntilChanged } from 'rxjs';
 import { filter, switchMap } from 'rxjs/operators';
-import * as i1$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i2$2 from '@angular/forms';
+import * as i1$4 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i3 from '@angular/material/form-field';
+import * as i2 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i4 from '@angular/material/input';
+import * as i3 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i2$1 from '@angular/youtube-player';
+import * as i1$3 from '@angular/youtube-player';
 import { YouTubePlayerModule } from '@angular/youtube-player';
-import * as i5 from '@angular/cdk/text-field';
-import * as i5$1 from '@angular/material/icon';
+import * as i1$2 from '@angular/platform-browser';
+import * as i4 from '@angular/cdk/text-field';
+import * as i4$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i6 from '@angular/material/button-toggle';
+import * as i5 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i3$1 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
-import * as i1$3 from 'ngx-clipboard';
-import * as i2$3 from '@angular/material/snack-bar';
+import * as i1$5 from 'ngx-clipboard';
+import * as i2$1 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import * as i6$2 from '@angular/material/tabs';
+import * as i5$2 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
-import * as i5$2 from '@angular/material/card';
+import * as i4$2 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i1$2 from '@angular/platform-browser';
-import * as i11 from '@angular/cdk/drag-drop';
+import * as i10 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i4$1 from '@angular/material/progress-spinner';
+import * as i3$2 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i6$1 from '@angular/material/select';
+import * as i5$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i7 from '@angular/material/core';
+import * as i6 from '@angular/material/core';
 import { MatNativeDateModule } from '@angular/material/core';
-import * as i2$4 from '@angular/material/table';
+import * as i1$6 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
+import { CommonModule } from '@angular/common';
 import * as i38 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i39 from '@angular/material/checkbox';
@@ -197,11 +196,11 @@ class UploadFilesBtnComponent {
     ngOnInit() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: UploadFilesBtnComponent, deps: [{ token: FileUploadService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: UploadFilesBtnComponent, selector: "croco-app-upload-files-btn", inputs: { extAccepts: "extAccepts", isMultiple: "isMultiple", btnText: "btnText", createLocalCopiesNow: "createLocalCopiesNow", hidden: "hidden" }, outputs: { postFilesStarted: "postFilesStarted", onFilesUploaded: "onFilesUploaded" }, 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>\r\n<input [hidden]=\"true\" [accept]=\"extAccepts\" [multiple]=\"isMultiple\" type=\"file\" #filesInput (change)=\"handleFileInput($event.target.files)\" />", styles: [""], dependencies: [{ kind: "component", type: i2.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: UploadFilesBtnComponent, selector: "croco-app-upload-files-btn", inputs: { extAccepts: "extAccepts", isMultiple: "isMultiple", btnText: "btnText", createLocalCopiesNow: "createLocalCopiesNow", hidden: "hidden" }, outputs: { postFilesStarted: "postFilesStarted", onFilesUploaded: "onFilesUploaded" }, 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: i1$1.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', template: "<button [hidden]=\"hidden\" mat-raised-button color=\"primary\" (click)=\"filesInput.click()\">{{btnText}}</button>\r\n<input [hidden]=\"true\" [accept]=\"extAccepts\" [multiple]=\"isMultiple\" type=\"file\" #filesInput (change)=\"handleFileInput($event.target.files)\" />" }]
+            args: [{ selector: 'croco-app-upload-files-btn', 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: FileUploadService }], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['filesInput']
@@ -255,11 +254,11 @@ class AddFilesBtnComponent {
     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, 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\">\r\n    <croco-app-upload-files-btn #fakeBtn (onFilesUploaded)=\"filesUploadedHandler($event)\"\r\n        [btnText]=\"'\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F'\" [createLocalCopiesNow]=\"true\"\r\n        (postFilesStarted)=\"postFilesStartedEventHandler($event)\" [extAccepts]=\"'image/*'\"></croco-app-upload-files-btn>\r\n</div>\r\n\r\n<div>\r\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>\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: UploadFilesBtnComponent, selector: "croco-app-upload-files-btn", inputs: ["extAccepts", "isMultiple", "btnText", "createLocalCopiesNow", "hidden"], outputs: ["postFilesStarted", "onFilesUploaded"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: AddFilesBtnComponent, 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 (onFilesUploaded)=\"filesUploadedHandler($event)\"\n        [btnText]=\"'\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F'\" [createLocalCopiesNow]=\"true\"\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>", styles: [""], dependencies: [{ kind: "component", type: i1$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: UploadFilesBtnComponent, selector: "croco-app-upload-files-btn", inputs: ["extAccepts", "isMultiple", "btnText", "createLocalCopiesNow", "hidden"], outputs: ["postFilesStarted", "onFilesUploaded"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: AddFilesBtnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-add-files-btn', template: "<div [hidden]=\"true\">\r\n    <croco-app-upload-files-btn #fakeBtn (onFilesUploaded)=\"filesUploadedHandler($event)\"\r\n        [btnText]=\"'\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F'\" [createLocalCopiesNow]=\"true\"\r\n        (postFilesStarted)=\"postFilesStartedEventHandler($event)\" [extAccepts]=\"'image/*'\"></croco-app-upload-files-btn>\r\n</div>\r\n\r\n<div>\r\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>\r\n</div>" }]
+            args: [{ selector: 'croco-html-add-files-btn', template: "<div [hidden]=\"true\">\n    <croco-app-upload-files-btn #fakeBtn (onFilesUploaded)=\"filesUploadedHandler($event)\"\n        [btnText]=\"'\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F'\" [createLocalCopiesNow]=\"true\"\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>" }]
         }], ctorParameters: () => [], propDecorators: { postFilesStarted: [{
                 type: Output
             }], fakeBtn: [{
@@ -269,942 +268,1040 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 type: Output
             }] } });
 
-class ExternalVideoTagDataConsts {
-    static { this.TagName = "external-video"; }
-    static { this.VideoTypeAttrName = "type"; }
-    static { this.LinkAttrName = "link"; }
-}
-class ExternalVideoSupportedTypes {
-    static { this.Youtube = "youtube"; }
-}
-class VideoMethods {
-    static ExtractExternalVideoTag(elem) {
-        return {
-            type: ExternalVideoTagDataConsts.TagName,
-            data: {
-                type: elem.getAttribute(ExternalVideoTagDataConsts.VideoTypeAttrName),
-                link: elem.getAttribute(ExternalVideoTagDataConsts.LinkAttrName)
+class AngularMaterialTableMethods {
+    static getAngularMaterialTableData(columns, rows) {
+        let data = [];
+        for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+            const row = rows[rowIndex];
+            var elem = {};
+            for (let columnIndex = 0; columnIndex < columns.length; columnIndex++) {
+                const column = columns[columnIndex];
+                elem[column] = row.columns[columnIndex].data.text;
             }
+            data.push(elem);
+        }
+        return {
+            displayedColumns: columns,
+            data: data,
         };
     }
-}
-
-function resizeObservable(elem, options) {
-    return new Observable((subscriber) => {
-        const resizeObserver = new ResizeObserver(([entry]) => {
-            subscriber.next(entry);
-        });
-        resizeObserver.observe(elem, options);
-        return function unsubscribe() {
-            resizeObserver.unobserve(elem);
-        };
-    });
-}
-
-class XmlTagExternalVideoComponent {
-    set data(value) {
-        this.tagData = value.data;
-    }
-    ;
-    set tagData(value) {
-        this.videoId = this.getYouTubeId(value.link);
-    }
-    ;
-    constructor(destroyRef) {
-        this.destroyRef = destroyRef;
-        this.playerWidth = signal(NaN);
-        this.playerHeight = signal(NaN);
-    }
-    ngOnInit() {
-        const youtubeIframeApiUrl = 'https://www.youtube.com/iframe_api';
-        if (!document.querySelector(`script[src="${youtubeIframeApiUrl}"]`)) {
-            // This code loads the IFrame Player API code asynchronously, according to the instructions at
-            // https://developers.google.com/youtube/iframe_api_reference#Getting_Started
-            const tag = document.createElement('script');
-            tag.setAttribute('src', youtubeIframeApiUrl);
-            document.body.appendChild(tag);
+    static checkHeaders(tableData) {
+        if (tableData.header === null) {
+            return {
+                isSucceeded: false,
+                message: "Необходимо указать заголовок таблицы"
+            };
         }
-        if (this.playerContainerRef) {
-            resizeObservable(this.playerContainerRef.nativeElement)
-                .pipe(map(({ contentRect: { height, width } }) => ({ height, width })), distinctUntilChanged((a, b) => a.height === b.height && a.width === b.width), takeUntilDestroyed(this.destroyRef))
-                .subscribe(({ height, width }) => {
-                this.playerHeight.set(height);
-                this.playerWidth.set(width);
-            });
+        let columns = tableData.header.columns;
+        var uniqueDislayedColumns = columns.filter((v, i, a) => a.indexOf(v) === i);
+        if (uniqueDislayedColumns.length !== columns.length) {
+            return {
+                isSucceeded: false,
+                message: "Ошибка при обработке разметки таблицы. Обнаружены дубликаты заголовков."
+            };
         }
+        return {
+            isSucceeded: true,
+            message: "Ok"
+        };
     }
-    getYouTubeId(youtubeLink) {
-        //https://www.youtube.com/watch?v=l3KfbfkxJOU
-        const url = new URL(youtubeLink);
-        if (url.pathname.endsWith('watch')) {
-            return url.searchParams.get("v");
+    static checkAngularMaterialTableData(tableData, checkHeaders = true) {
+        if (checkHeaders) {
+            var checkHeadersResult = this.checkHeaders(tableData);
+            if (!checkHeadersResult.isSucceeded) {
+                return checkHeadersResult;
+            }
         }
-        //https://youtu.be/jzBneaWSswY
-        const bits = url.pathname.split('/');
-        return bits[bits.length - 1];
+        let rows = tableData.rows;
+        let columns = tableData.header.columns;
+        for (let i = 0; i < rows.length; i++) {
+            const row = rows[i];
+            if (row.columns.length !== columns.length) {
+                return {
+                    isSucceeded: false,
+                    message: `Ошибка при обработке разметки таблицы. `
+                        + `Количество колонок в каждой строке таблицы должно соотвествовать количеству колонок указанных в заголовке. `
+                        + `В строке таблицы №${i + 1} количество колонок = ${row.columns.length}, а должно быть ${columns.length}.`
+                };
+            }
+        }
+        return {
+            isSucceeded: true,
+            message: "Ok"
+        };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagExternalVideoComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: { data: "data", tagData: "tagData" }, viewQueries: [{ propertyName: "playerContainerRef", first: true, predicate: ["playerContainer"], descendants: true, static: true }], ngImport: i0, template: "<div #playerContainer class=\"d-flex justify-content-center y-video\">\r\n  <youtube-player [height]=\"playerHeight()\" [width]=\"playerWidth()\" *ngIf=\"videoId\" [videoId]=\"videoId\"></youtube-player>\r\n</div>\r\n", styles: ["@media only screen and (min-width: 769px){.y-video{display:block;width:640px;height:360px;margin:0 auto}}@media only screen and (max-width: 827px){.y-video{display:block;width:100%;height:315px}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.YouTubePlayer, selector: "youtube-player", inputs: ["videoId", "height", "width", "startSeconds", "endSeconds", "suggestedQuality", "playerVars", "disableCookies", "loadApi", "disablePlaceholder", "showBeforeIframeApiLoads", "placeholderButtonLabel", "placeholderImageQuality"], outputs: ["ready", "stateChange", "error", "apiChange", "playbackQualityChange", "playbackRateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagExternalVideoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'croco-html-xml-tag-external-video', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #playerContainer class=\"d-flex justify-content-center y-video\">\r\n  <youtube-player [height]=\"playerHeight()\" [width]=\"playerWidth()\" *ngIf=\"videoId\" [videoId]=\"videoId\"></youtube-player>\r\n</div>\r\n", styles: ["@media only screen and (min-width: 769px){.y-video{display:block;width:640px;height:360px;margin:0 auto}}@media only screen and (max-width: 827px){.y-video{display:block;width:100%;height:315px}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { data: [{
-                type: Input
-            }], tagData: [{
-                type: Input
-            }], playerContainerRef: [{
-                type: ViewChild,
-                args: ['playerContainer', { static: true }]
-            }] } });
 
-class ExternalVideoBlockComponent {
-    constructor() {
-        this.onTagUpdated = new EventEmitter();
-        this.defaultLink = "https://youtu.be/jzBneaWSswY";
-        this.data = {
-            youtubeLink: this.defaultLink
+var EAlignments;
+(function (EAlignments) {
+    EAlignments["Left"] = "left";
+    EAlignments["Center"] = "center";
+    EAlignments["Right"] = "right";
+})(EAlignments || (EAlignments = {}));
+const AlignmentsData = [
+    { value: EAlignments.Left, text: 'Слева' },
+    { value: EAlignments.Center, text: 'По центру' },
+    { value: EAlignments.Right, text: 'Справа' },
+];
+
+const TextTag = "text";
+class TextSimpleMethods {
+    static { this.supportedTags = ["sup", "sub", "strong", "b", "i", "u"]; }
+    static ExtractTextTag(elem) {
+        var hAlignValue = elem.getAttribute("h-align") ?? EAlignments.Left;
+        var data = {
+            textTagName: elem.tagName.toLowerCase(),
+            text: elem.innerText.trim().replace('\n\t', ''),
+            html: elem.innerHTML.trim().replace('\n\t', ''),
+            horizontalAlignment: hAlignValue,
+            validationResult: {
+                isSucceeded: true,
+                message: "Ok"
+            }
         };
-        this.tagData = {
-            link: this.defaultLink,
-            type: ExternalVideoSupportedTypes.Youtube
+        let result = {
+            type: TextTag,
+            data: data
         };
+        if (result.data.text === '\n') {
+            result.data.text = '';
+        }
+        if (result.data.html === '\n') {
+            result.data.html = '';
+        }
+        var alignmentVals = [EAlignments.Left, EAlignments.Right, EAlignments.Center];
+        if (alignmentVals.indexOf(hAlignValue) < 0) {
+            result.data.validationResult = {
+                isSucceeded: false,
+                message: `Недопустимое значение атрибута h-align. Допустимые значения: ${alignmentVals.join(', ')}. `
+                    + 'Данный тег можно не указывать, по-умолчанию будет применено выравнивание слева.'
+            };
+        }
+        var html = result.data.html;
+        var htmlValidation = this.ValidateTextHtml(html);
+        if (!htmlValidation.isSucceeded) {
+            result.data.validationResult = htmlValidation;
+        }
+        return result;
     }
-    linkChanged() {
-        this.tagData.link = this.data.youtubeLink;
-        this.tag.attributes = this.tagData;
+    static ValidateTextHtml(html) {
+        var p = document.createElement("p");
+        p.innerHTML = html;
+        for (let i = 0; i < p.children.length; i++) {
+            const element = p.children.item(i);
+            var validationResult = this.ValidateTag(element);
+            if (!validationResult.isSucceeded) {
+                return validationResult;
+            }
+        }
+        return {
+            isSucceeded: true,
+            message: `Ok`
+        };
     }
-    ngOnInit() {
-        if (!this.tag?.attributes?.['link']) {
-            this.linkChanged();
+    static ValidateTag(element) {
+        let lowerTag = element.tagName.toLowerCase();
+        if (!this.supportedTags.includes(lowerTag)) {
+            return {
+                isSucceeded: false,
+                message: `Тег <${lowerTag}> не поддерживается внутри тега <text>`
+            };
+        }
+        for (let i = 0; i < element.children.length; i++) {
+            const nElement = element.children.item(i);
+            var innerValidationResult = this.ValidateTag(nElement);
+            if (!innerValidationResult.isSucceeded) {
+                return innerValidationResult;
+            }
         }
-        this.tagData = this.tag.attributes;
-        this.data.youtubeLink = this.tagData.link;
+        return {
+            isSucceeded: true,
+            message: "Ok"
+        };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ExternalVideoBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: ExternalVideoBlockComponent, selector: "croco-html-external-video-block", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "<div *ngIf=\"tag.presentOrEdit\">\r\n    \r\n    <div>\r\n        \u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 YouTube: {{data.youtubeLink}}\r\n    </div>\r\n\r\n    <div style=\"height: 10px;\"></div>\r\n\r\n    <croco-html-xml-tag-external-video [tagData]=\"tagData\">\r\n    </croco-html-xml-tag-external-video>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n    <div>\r\n        <div>\r\n            <mat-form-field class=\"w-100\">\r\n                <input matInput placeholder=\"\u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 YouTube\"\r\n                    new-autocomplete=\"off\"\r\n                    autocomplete=\"off\"\r\n                    [(ngModel)]=\"data.youtubeLink\"\r\n                    (ngModelChange)=\"linkChanged()\">\r\n            </mat-form-field>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ExternalVideoBlockComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'croco-html-external-video-block', template: "<div *ngIf=\"tag.presentOrEdit\">\r\n    \r\n    <div>\r\n        \u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 YouTube: {{data.youtubeLink}}\r\n    </div>\r\n\r\n    <div style=\"height: 10px;\"></div>\r\n\r\n    <croco-html-xml-tag-external-video [tagData]=\"tagData\">\r\n    </croco-html-xml-tag-external-video>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n    <div>\r\n        <div>\r\n            <mat-form-field class=\"w-100\">\r\n                <input matInput placeholder=\"\u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 YouTube\"\r\n                    new-autocomplete=\"off\"\r\n                    autocomplete=\"off\"\r\n                    [(ngModel)]=\"data.youtubeLink\"\r\n                    (ngModelChange)=\"linkChanged()\">\r\n            </mat-form-field>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n" }]
-        }], propDecorators: { tag: [{
-                type: Input
-            }], onTagUpdated: [{
-                type: Output
-            }] } });
 
-class HtmlRawEditorComponent {
-    constructor() {
-        this.onTagUpdated = new EventEmitter();
+class BootstrapTableMethods {
+    static BuildTable(data) {
+        let result = `<table class="table table-bordered">`;
+        result += this.BuildHeader(data.header);
+        result += this.BuildBody(data.rows);
+        result += "</table>";
+        return result;
     }
-    ngOnInit() {
+    static BuildHeader(data) {
+        if (data === null) {
+            return "";
+        }
+        let result = "<thead>";
+        result += "<tr>";
+        for (let index = 0; index < data.columns.length; index++) {
+            result += `<th>${data.columns[index]}</th>`;
+        }
+        result += "</tr>";
+        result += "</thead>";
+        return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: HtmlRawEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: HtmlRawEditorComponent, selector: "croco-html-html-raw-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "<div *ngIf=\"tag.presentOrEdit\">\r\n    <div [innerHTML]=\"tag.innerHtml\"></div>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n    <div>\r\n        <mat-form-field class=\"w-100\">\r\n            <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\r\n                cdkAutosizeMinRows=\"1\"\r\n                placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\"\r\n                [(ngModel)]=\"tag.innerHtml\"></textarea>\r\n        </mat-form-field>\r\n    </div>\r\n</div>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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: i5.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: HtmlRawEditorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'croco-html-html-raw-editor', template: "<div *ngIf=\"tag.presentOrEdit\">\r\n    <div [innerHTML]=\"tag.innerHtml\"></div>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n    <div>\r\n        <mat-form-field class=\"w-100\">\r\n            <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\r\n                cdkAutosizeMinRows=\"1\"\r\n                placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\"\r\n                [(ngModel)]=\"tag.innerHtml\"></textarea>\r\n        </mat-form-field>\r\n    </div>\r\n</div>\r\n\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { tag: [{
-                type: Input
-            }], onTagUpdated: [{
-                type: Output
-            }] } });
-
-const CrocoHtmlOptionsToken = "croco-html-options";
-
-var FileType;
-(function (FileType) {
-    FileType["Undefined"] = "Undefined";
-    FileType["Unknown"] = "Unknown";
-    FileType["Image"] = "Image";
-    FileType["Audio"] = "Audio";
-    FileType["Video"] = "Video";
-    FileType["Document"] = "Document";
-    FileType["Archive"] = "Archive";
-})(FileType || (FileType = {}));
-class FilesQueryService {
-    constructor(_httpClient, baseUrl) {
-        this._httpClient = _httpClient;
-        this._baseControllerUrl = `${baseUrl}Api/Files`;
+    static BuildBody(rows) {
+        let result = "<tbody>";
+        for (let i = 0; i < rows.length; i++) {
+            const row = rows[i];
+            result += "<tr>";
+            for (let j = 0; j < row.columns.length; j++) {
+                const col = row.columns[j];
+                result += `<td class="align-middle">${this.BuildInnerTags(col.data.children)}</td>`;
+            }
+            result += "</tr>";
+        }
+        result += "</tbody>";
+        return result;
     }
-    getFilesWithRelations(model) {
-        return this._httpClient.post(this._baseControllerUrl + `/GetFiles/WithRelations`, model);
+    static BuildInnerTags(tags) {
+        let result = "";
+        for (let i = 0; i < tags.length; i++) {
+            result += this.BuildInnerTag(tags[i]);
+        }
+        return result;
     }
-    getFiles(model) {
-        return this._httpClient.post(this._baseControllerUrl + `/GetFiles`, model);
+    static BuildInnerTag(data) {
+        if (data.type === FileImageTagDataConsts.TagName) {
+            let fileImageTag = data;
+            return `<img src=${fileImageTag.data.src} class="mx-auto d-block img-fluid" />`;
+        }
+        else if (data.type === TextTag) {
+            let simpleTextTag = data;
+            var map = {
+                ["left"]: "text-start",
+                ["center"]: "text-center",
+                ["right"]: "text-end"
+            };
+            if (!simpleTextTag.data.validationResult.isSucceeded) {
+                return `<span>Ошибка в тексте ${simpleTextTag.data.validationResult.message}</span>`;
+            }
+            return `<div class="${map[simpleTextTag.data.horizontalAlignment]}"><span>${simpleTextTag.data.html}</span></div>`;
+        }
+        else {
+            return `<p>Тег ${data.type} не поддерживается</p>`;
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FilesQueryService, 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: FilesQueryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FilesQueryService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['BASE_URL']
-                }] }] });
 
-class FileIdSelectComponent {
-    constructor(_fileService, _options) {
-        this._fileService = _fileService;
-        this._options = _options;
-        this.labelText = "Поиск файлов";
-        this.loading = false;
-        this.files = [];
-        this.onFileIdChanged = new EventEmitter();
-    }
-    onModelChanged(fileId) {
-        this.onFileIdChanged.emit(fileId);
-    }
-    getSrc(fileId) {
-        return ImageMethods.buildSmallUrl(fileId, this._options);
-    }
-    ngOnInit() {
-        this.loadFiles();
+class TableTypes {
+    static { this.TableRowColumnData = "table-row-column-data"; }
+    static { this.Table = "table"; }
+    static { this.TableRowColumn = "table-row-column"; }
+}
+class TableMethods {
+    static getTableFromHtmlTag(tableTag, options) {
+        let tableData = {
+            header: TableMethods.getHeader(tableTag),
+            rows: TableMethods.getTableRows(tableTag, options)
+        };
+        var result = {
+            type: TableTypes.Table,
+            data: tableData,
+            validationResult: this.checkTable(tableData),
+            bootstrapHtml: ""
+        };
+        if (!result.validationResult) {
+            return result;
+        }
+        result.bootstrapHtml = BootstrapTableMethods.BuildTable(result.data);
+        var angularMaterialTableDataCheck = AngularMaterialTableMethods.checkAngularMaterialTableData(tableData);
+        if (!angularMaterialTableDataCheck.isSucceeded) {
+            return {
+                ...result,
+                angularMaterialTableDataCheck
+            };
+        }
+        return {
+            ...result,
+            angularMaterialTableDataCheck,
+            html: tableTag.outerHTML,
+            angularMaterialTableData: AngularMaterialTableMethods.getAngularMaterialTableData(tableData.header.columns, tableData.rows),
+        };
     }
-    loadFiles() {
-        this.loading = true;
-        this._fileService.getFiles({
-            count: 10,
-            offSet: 0,
-            fileName: null,
-            fileTypes: [FileType.Image],
-            applicationId: null,
-            q: this.q
-        }).subscribe(data => {
-            this.files = [...data.list];
-            this.loading = false;
-        });
+    static checkTable(tableData) {
+        let rows = tableData.rows;
+        let prevRowCount = -1;
+        for (let i = 0; i < rows.length; i++) {
+            const row = rows[i];
+            if (row.columns.length !== prevRowCount && prevRowCount != -1) {
+                return {
+                    isSucceeded: false,
+                    message: `Ошибка при обработке разметки таблицы. `
+                        + `Количество колонок в каждой строке таблицы должно соотвествовать друг другу. `
+                        + `В строке таблицы №${i + 1} количество колонок = ${row.columns.length}, а в строке выше ${prevRowCount}.`
+                };
+            }
+            prevRowCount = row.columns.length;
+        }
+        return {
+            isSucceeded: true,
+            message: "Ok"
+        };
     }
-    onSearchChanged(q) {
-        this.q = q.term;
-        this.loadFiles();
+    static getHeader(tableTag) {
+        let header = tableTag.tHead;
+        if (header === null) {
+            return null;
+        }
+        let tr = header.children.item(0);
+        let headerColumns = [];
+        for (let j = 0; j < tr.children.length; j++) {
+            const jElement = tr.children.item(j);
+            headerColumns.push(jElement.innerHTML);
+        }
+        return {
+            type: "table-header",
+            columns: headerColumns
+        };
     }
-    ngOnChanges(changes) {
-        this.loadFiles();
+    static getTableRows(tableTag, options) {
+        let tBody = tableTag.tBodies.item(0);
+        let rows = [];
+        for (let i = 0; i < tBody.children.length; i++) {
+            const iElement = tBody.children.item(i);
+            let rowColumns = [];
+            for (let j = 0; j < iElement.children.length; j++) {
+                const jElement = iElement.children.item(j);
+                let children = HtmlExtractionMethods.transformHtmlElementToBlocks(jElement, options);
+                if (children.length === 0) {
+                    var textTag = document.createElement("p");
+                    textTag.innerHTML = jElement.innerHTML;
+                    var textElem = TextSimpleMethods.ExtractTextTag(textTag);
+                    children.push(textElem);
+                }
+                var result = {
+                    type: TableTypes.TableRowColumnData,
+                    data: {
+                        text: jElement.innerHTML,
+                        children
+                    }
+                };
+                rowColumns.push(result);
+            }
+            rows.push({
+                type: TableTypes.TableRowColumn,
+                columns: rowColumns
+            });
+        }
+        return rows;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FileIdSelectComponent, deps: [{ token: FilesQueryService }, { token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: FileIdSelectComponent, selector: "croco-html-file-id-select", inputs: { labelText: "labelText", fileId: "fileId" }, outputs: { fileId: "fileId", onFileIdChanged: "onFileIdChanged" }, usesOnChanges: true, ngImport: i0, template: "<div>\r\n    <div class=\"form-group\">\r\n        <label for=\"fileName\">{{labelText}}</label>\r\n        <ng-select [(ngModel)]=\"fileId\" (ngModelChange)=\"onModelChanged($event)\"\r\n                   [items]=\"files\"\r\n                   #select\r\n                   bindLabel=\"fileName\"\r\n                   (search)=\"onSearchChanged($event)\"\r\n                   [loading]=\"loading\"\r\n                   [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\r\n                   dropdownPosition=\"auto\"\r\n                   bindValue=\"fileId\"\r\n                   labelForId=\"fileName\"\r\n                   placeholder=\"\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B\"\r\n                   [virtualScroll]=\"true\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n                <div>\r\n                    <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc(item.fileId)\"/>\r\n                </div>\r\n                <div>\r\n                    <span class=\"h5\">\u0424\u0430\u0439\u043B: </span>\r\n                    <span class=\"h5\" [ngOptionHighlight]=\"search\"><b>{{item.fileName}}</b></span>\r\n                </div>\r\n                <div>\r\n                    <small>\r\n                        <span>\r\n                            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: <b>{{item.fileId}}</b>\r\n                        </span>\r\n                    </small>\r\n                </div>\r\n            </ng-template>\r\n        </ng-select>\r\n    </div>\r\n</div>\r\n\r\n<div>\r\n    \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: {{fileId}}\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.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: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FileIdSelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'croco-html-file-id-select', template: "<div>\r\n    <div class=\"form-group\">\r\n        <label for=\"fileName\">{{labelText}}</label>\r\n        <ng-select [(ngModel)]=\"fileId\" (ngModelChange)=\"onModelChanged($event)\"\r\n                   [items]=\"files\"\r\n                   #select\r\n                   bindLabel=\"fileName\"\r\n                   (search)=\"onSearchChanged($event)\"\r\n                   [loading]=\"loading\"\r\n                   [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\r\n                   dropdownPosition=\"auto\"\r\n                   bindValue=\"fileId\"\r\n                   labelForId=\"fileName\"\r\n                   placeholder=\"\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B\"\r\n                   [virtualScroll]=\"true\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n                <div>\r\n                    <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc(item.fileId)\"/>\r\n                </div>\r\n                <div>\r\n                    <span class=\"h5\">\u0424\u0430\u0439\u043B: </span>\r\n                    <span class=\"h5\" [ngOptionHighlight]=\"search\"><b>{{item.fileName}}</b></span>\r\n                </div>\r\n                <div>\r\n                    <small>\r\n                        <span>\r\n                            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: <b>{{item.fileId}}</b>\r\n                        </span>\r\n                    </small>\r\n                </div>\r\n            </ng-template>\r\n        </ng-select>\r\n    </div>\r\n</div>\r\n\r\n<div>\r\n    \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: {{fileId}}\r\n</div>\r\n" }]
-        }], ctorParameters: () => [{ type: FilesQueryService }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [CrocoHtmlOptionsToken]
-                }] }], propDecorators: { labelText: [{
-                type: Input
-            }], fileId: [{
-                type: Input
-            }, {
-                type: Output
-            }], onFileIdChanged: [{
-                type: Output
-            }] } });
 
-class ImageEditorComponent {
-    onErrorHandler() {
-        this.hasImageError = true;
-    }
-    constructor(_options) {
-        this._options = _options;
-        this.hasImageError = false;
-        this.searchOrEdit = "search";
-        this.onTagUpdated = new EventEmitter();
-    }
-    getSrc() {
-        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]);
-    }
-    onFileIdChanged(fileId) {
-        this.tag.attributes[FileImageTagDataConsts.FileIdAttrName] = fileId;
-        this.removeImageError();
-    }
-    removeImageError() {
-        this.hasImageError = false;
-    }
-    ngOnInit() {
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ImageEditorComponent, deps: [{ token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: ImageEditorComponent, selector: "croco-html-image-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "<div>\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n    \r\n    <div *ngIf=\"hasImageError\" class=\"error-block\">\r\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.\r\n    </div>\r\n\r\n    <div *ngIf=\"hasFileId() && !hasImageError\">\r\n        <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc()\" (error)=\"onErrorHandler()\"/>\r\n    </div>\r\n\r\n    <div *ngIf=\"!hasFileId()\">\r\n        <h5>[\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E]</h5>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n    <div style=\"height: 10px;\"></div>\r\n\r\n    <div style=\"overflow-x:auto;\">\r\n        <mat-button-toggle-group [(ngModel)]=\"searchOrEdit\">\r\n            <mat-button-toggle value=\"search\">\r\n                \u0418\u0441\u043A\u0430\u0442\u044C \u0444\u0430\u0439\u043B <mat-icon>search</mat-icon>\r\n            </mat-button-toggle>\r\n            <mat-button-toggle value=\"edit\">\r\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>\r\n            </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n    </div>\r\n    \r\n\r\n    <div style=\"height: 10px;\"></div>\r\n\r\n    <div [hidden]=\"searchOrEdit !== 'search'\">\r\n        <croco-html-file-id-select\r\n         [labelText]=\"'\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B'\"\r\n         [(fileId)]=\"tag.attributes['file-id']\"\r\n         (onFileIdChanged)=\"onFileIdChanged($event)\">\r\n        </croco-html-file-id-select>\r\n    </div>\r\n\r\n    <div [hidden]=\"searchOrEdit !== 'edit'\">\r\n        <div>\r\n            <mat-form-field class=\"w-100\">\r\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\"\r\n                    type=\"number\"\r\n                    [(ngModel)]=\"tag.attributes['file-id']\"\r\n                    (ngModelChange)=\"removeImageError()\">\r\n            </mat-form-field>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".error-block{background-color:#f32323;color:#fff;text-align:center;border-radius:10px;padding:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i6.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: FileIdSelectComponent, selector: "croco-html-file-id-select", inputs: ["labelText", "fileId"], outputs: ["fileId", "onFileIdChanged"] }] }); }
+class TextTags {
+    static { this.text = "text"; }
+    static { this.h1 = "h1"; }
+    static { this.h2 = "h2"; }
+    static { this.h3 = "h3"; }
+    static { this.h4 = "h4"; }
+    static { this.h5 = "h5"; }
+    static { this.h6 = "h6"; }
+    static { this.allTextTags = [TextTags.text, TextTags.h1, TextTags.h2, TextTags.h3, TextTags.h4, TextTags.h5, TextTags.h6]; }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ImageEditorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'croco-html-image-editor', template: "<div>\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n    \r\n    <div *ngIf=\"hasImageError\" class=\"error-block\">\r\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.\r\n    </div>\r\n\r\n    <div *ngIf=\"hasFileId() && !hasImageError\">\r\n        <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc()\" (error)=\"onErrorHandler()\"/>\r\n    </div>\r\n\r\n    <div *ngIf=\"!hasFileId()\">\r\n        <h5>[\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E]</h5>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n    <div style=\"height: 10px;\"></div>\r\n\r\n    <div style=\"overflow-x:auto;\">\r\n        <mat-button-toggle-group [(ngModel)]=\"searchOrEdit\">\r\n            <mat-button-toggle value=\"search\">\r\n                \u0418\u0441\u043A\u0430\u0442\u044C \u0444\u0430\u0439\u043B <mat-icon>search</mat-icon>\r\n            </mat-button-toggle>\r\n            <mat-button-toggle value=\"edit\">\r\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>\r\n            </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n    </div>\r\n    \r\n\r\n    <div style=\"height: 10px;\"></div>\r\n\r\n    <div [hidden]=\"searchOrEdit !== 'search'\">\r\n        <croco-html-file-id-select\r\n         [labelText]=\"'\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B'\"\r\n         [(fileId)]=\"tag.attributes['file-id']\"\r\n         (onFileIdChanged)=\"onFileIdChanged($event)\">\r\n        </croco-html-file-id-select>\r\n    </div>\r\n\r\n    <div [hidden]=\"searchOrEdit !== 'edit'\">\r\n        <div>\r\n            <mat-form-field class=\"w-100\">\r\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\"\r\n                    type=\"number\"\r\n                    [(ngModel)]=\"tag.attributes['file-id']\"\r\n                    (ngModelChange)=\"removeImageError()\">\r\n            </mat-form-field>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".error-block{background-color:#f32323;color:#fff;text-align:center;border-radius:10px;padding:10px}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [CrocoHtmlOptionsToken]
-                }] }], propDecorators: { tag: [{
-                type: Input
-            }], onTagUpdated: [{
-                type: Output
-            }] } });
-
-class XmlTagHtmlViewComponent {
-    constructor() {
-        this.html = "";
+class TextMethods {
+    static ExtractRichTextData(elem) {
+        let children = [];
+        for (let i = 0; i < elem.children.length; i++) {
+            const child = elem.children.item(i);
+            if (child.tagName === "text-block".toUpperCase()) {
+                children.push({
+                    type: "text-block",
+                    data: {
+                        text: child.innerHTML
+                    }
+                });
+            }
+            else if (child.tagName === "line-break".toUpperCase()) {
+                children.push({
+                    type: "line-break"
+                });
+            }
+        }
+        return {
+            type: "rich-text",
+            data: {
+                children
+            }
+        };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagHtmlViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: XmlTagHtmlViewComponent, selector: "croco-html-xml-tag-html-view", inputs: { html: "html" }, ngImport: i0, template: "<div class=\"col\" [innerHTML]=\"html\">\r\n</div>", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagHtmlViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'croco-html-xml-tag-html-view', template: "<div class=\"col\" [innerHTML]=\"html\">\r\n</div>" }]
-        }], ctorParameters: () => [], propDecorators: { html: [{
-                type: Input
-            }] } });
 
-class XmlTagTextViewComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagTextViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: XmlTagTextViewComponent, selector: "croco-html-xml-tag-text-view", inputs: { item: "item" }, ngImport: i0, template: "<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'left'\" style=\"text-align: left;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <span *ngIf=\"item.data.html.length > 0\" [innerHtml]=\"item.data.html\"></span>\r\n</div>\r\n\r\n<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'right'\" style=\"text-align: right;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <span *ngIf=\"item.data.html.length > 0\" [innerHtml]=\"item.data.html\"></span>\r\n</div>\r\n\r\n<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'center'\" style=\"text-align: center;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <span *ngIf=\"item.data.html.length > 0\" [innerHtml]=\"item.data.html\"></span>\r\n</div>\r\n\r\n<div *ngIf=\"!item.data.validationResult.isSucceeded\" class=\"red\" style=\"margin-top: 10px;\" >\r\n    <h4>\u0414\u043E\u043F\u0443\u0449\u0435\u043D\u0430 \u043E\u0448\u0438\u0431\u043A\u0430 \u0432 \u0442\u0435\u0433\u0435 &lt;text&gt;</h4>\r\n    <span>\r\n        {{item.data.validationResult.message}}\r\n    </span>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+class ExternalVideoTagDataConsts {
+    static { this.TagName = "external-video"; }
+    static { this.VideoTypeAttrName = "type"; }
+    static { this.LinkAttrName = "link"; }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagTextViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'croco-html-xml-tag-text-view', template: "<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'left'\" style=\"text-align: left;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <span *ngIf=\"item.data.html.length > 0\" [innerHtml]=\"item.data.html\"></span>\r\n</div>\r\n\r\n<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'right'\" style=\"text-align: right;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <span *ngIf=\"item.data.html.length > 0\" [innerHtml]=\"item.data.html\"></span>\r\n</div>\r\n\r\n<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'center'\" style=\"text-align: center;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <span *ngIf=\"item.data.html.length > 0\" [innerHtml]=\"item.data.html\"></span>\r\n</div>\r\n\r\n<div *ngIf=\"!item.data.validationResult.isSucceeded\" class=\"red\" style=\"margin-top: 10px;\" >\r\n    <h4>\u0414\u043E\u043F\u0443\u0449\u0435\u043D\u0430 \u043E\u0448\u0438\u0431\u043A\u0430 \u0432 \u0442\u0435\u0433\u0435 &lt;text&gt;</h4>\r\n    <span>\r\n        {{item.data.validationResult.message}}\r\n    </span>\r\n</div>" }]
-        }], ctorParameters: () => [], propDecorators: { item: [{
-                type: Input
-            }] } });
-
-class XmlTagHeaderInnerTextViewComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagHeaderInnerTextViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: XmlTagHeaderInnerTextViewComponent, selector: "croco-html-xml-tag-header-inner-text-view", inputs: { item: "item" }, ngImport: i0, template: "<h1 *ngIf=\"item.type === 'h1'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h1>\r\n<h2 *ngIf=\"item.type === 'h2'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h2>\r\n<h3 *ngIf=\"item.type === 'h3'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h3>\r\n<h4 *ngIf=\"item.type === 'h4'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h4>\r\n<h5 *ngIf=\"item.type === 'h5'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h5>\r\n<h6 *ngIf=\"item.type === 'h6'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h6>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+class ExternalVideoSupportedTypes {
+    static { this.Youtube = "youtube"; }
+    static { this.VkVideo = "vk-video"; }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagHeaderInnerTextViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'croco-html-xml-tag-header-inner-text-view', template: "<h1 *ngIf=\"item.type === 'h1'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h1>\r\n<h2 *ngIf=\"item.type === 'h2'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h2>\r\n<h3 *ngIf=\"item.type === 'h3'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h3>\r\n<h4 *ngIf=\"item.type === 'h4'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h4>\r\n<h5 *ngIf=\"item.type === 'h5'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h5>\r\n<h6 *ngIf=\"item.type === 'h6'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h6>" }]
-        }], ctorParameters: () => [], propDecorators: { item: [{
-                type: Input
-            }] } });
-
-class XmlTagHeaderTextViewComponent {
-    constructor() { }
-    ngOnInit() {
+const ExternalVideoPlayers = [
+    {
+        type: ExternalVideoSupportedTypes.Youtube,
+        displayValue: 'Youtube',
+    },
+    {
+        type: ExternalVideoSupportedTypes.VkVideo,
+        displayValue: 'Vk Video',
+    }
+];
+class VideoMethods {
+    static ExtractExternalVideoTag(elem) {
+        return {
+            type: ExternalVideoTagDataConsts.TagName,
+            data: {
+                type: elem.getAttribute(ExternalVideoTagDataConsts.VideoTypeAttrName),
+                link: elem.getAttribute(ExternalVideoTagDataConsts.LinkAttrName)
+            }
+        };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagHeaderTextViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: XmlTagHeaderTextViewComponent, selector: "croco-html-xml-tag-header-text-view", inputs: { item: "item" }, ngImport: i0, template: "<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'left'\" style=\"text-align: left;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <croco-html-xml-tag-header-inner-text-view *ngIf=\"item.data.html.length > 0\"  [item]=\"item\">\r\n    </croco-html-xml-tag-header-inner-text-view>\r\n</div>\r\n\r\n<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'right'\" style=\"text-align: right;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <croco-html-xml-tag-header-inner-text-view *ngIf=\"item.data.html.length > 0\"  [item]=\"item\">\r\n    </croco-html-xml-tag-header-inner-text-view>\r\n</div>\r\n\r\n<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'center'\" style=\"text-align: center;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n\r\n    <croco-html-xml-tag-header-inner-text-view *ngIf=\"item.data.html.length > 0\"  [item]=\"item\">\r\n    </croco-html-xml-tag-header-inner-text-view>\r\n</div>\r\n\r\n<div *ngIf=\"!item.data.validationResult.isSucceeded\" class=\"red\" style=\"margin-top: 10px;\" >\r\n    <h4>\u0414\u043E\u043F\u0443\u0449\u0435\u043D\u0430 \u043E\u0448\u0438\u0431\u043A\u0430 \u0432 \u0442\u0435\u0433\u0435 &lt;text&gt;</h4>\r\n    <span>\r\n        {{item.data.validationResult.message}}\r\n    </span>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: XmlTagHeaderInnerTextViewComponent, selector: "croco-html-xml-tag-header-inner-text-view", inputs: ["item"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagHeaderTextViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'croco-html-xml-tag-header-text-view', template: "<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'left'\" style=\"text-align: left;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <croco-html-xml-tag-header-inner-text-view *ngIf=\"item.data.html.length > 0\"  [item]=\"item\">\r\n    </croco-html-xml-tag-header-inner-text-view>\r\n</div>\r\n\r\n<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'right'\" style=\"text-align: right;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <croco-html-xml-tag-header-inner-text-view *ngIf=\"item.data.html.length > 0\"  [item]=\"item\">\r\n    </croco-html-xml-tag-header-inner-text-view>\r\n</div>\r\n\r\n<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'center'\" style=\"text-align: center;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n\r\n    <croco-html-xml-tag-header-inner-text-view *ngIf=\"item.data.html.length > 0\"  [item]=\"item\">\r\n    </croco-html-xml-tag-header-inner-text-view>\r\n</div>\r\n\r\n<div *ngIf=\"!item.data.validationResult.isSucceeded\" class=\"red\" style=\"margin-top: 10px;\" >\r\n    <h4>\u0414\u043E\u043F\u0443\u0449\u0435\u043D\u0430 \u043E\u0448\u0438\u0431\u043A\u0430 \u0432 \u0442\u0435\u0433\u0435 &lt;text&gt;</h4>\r\n    <span>\r\n        {{item.data.validationResult.message}}\r\n    </span>\r\n</div>" }]
-        }], ctorParameters: () => [], propDecorators: { item: [{
-                type: Input
-            }] } });
 
-class HtmlRawViewComponent {
-    constructor(_sanitizer) {
-        this._sanitizer = _sanitizer;
-        this.rawHtml = "";
-        this.isInitialized = false;
+class HtmlExtractionMethods {
+    static ExtractHeaderTag(elem, tagName) {
+        var data = TextSimpleMethods.ExtractTextTag(elem);
+        data.type = tagName;
+        return data;
     }
-    ngOnInit() {
-        this.safeHtml = this._sanitizer.bypassSecurityTrustHtml(this.rawHtml);
+    static { this.Extractors = {
+        ["TEXT"]: (elem, options) => TextSimpleMethods.ExtractTextTag(elem),
+        ["FILE-IMAGE"]: (elem, options) => ImageMethods.ExtractImage(elem, options),
+        ["TABLE"]: (elem, options) => TableMethods.getTableFromHtmlTag(elem, options),
+        ["RICH-TEXT"]: (elem, options) => TextMethods.ExtractRichTextData(elem),
+        ["HTML-RAW"]: (elem, options) => ({
+            type: "html-raw",
+            data: {
+                innerHTML: elem.innerHTML
+            }
+        }),
+        ["H1"]: (elem, options) => HtmlExtractionMethods.ExtractHeaderTag(elem, "h1"),
+        ["H2"]: (elem, options) => HtmlExtractionMethods.ExtractHeaderTag(elem, "h2"),
+        ["H3"]: (elem, options) => HtmlExtractionMethods.ExtractHeaderTag(elem, "h3"),
+        ["H4"]: (elem, options) => HtmlExtractionMethods.ExtractHeaderTag(elem, "h4"),
+        ["H5"]: (elem, options) => HtmlExtractionMethods.ExtractHeaderTag(elem, "h5"),
+        ["H6"]: (elem, options) => HtmlExtractionMethods.ExtractHeaderTag(elem, "h6"),
+        [ExternalVideoTagDataConsts.TagName.toUpperCase()]: (elem, options) => VideoMethods.ExtractExternalVideoTag(elem)
+    }; }
+    static transformHtmlElementToBlocks(element, options) {
+        var data = [];
+        for (let i = 0; i < element.children.length; i++) {
+            var elem = element.children.item(i);
+            if (!HtmlExtractionMethods.Extractors.hasOwnProperty(elem.tagName)) {
+                data.push({
+                    type: "unsupported-tag",
+                    data: {
+                        tagString: elem.outerHTML
+                    }
+                });
+            }
+            else {
+                var extractor = HtmlExtractionMethods.Extractors[elem.tagName];
+                var result = extractor(elem, options);
+                data.push(result);
+            }
+        }
+        return data;
+    }
+    static transformHtmlStringToBlocks(value, options) {
+        if (value === undefined || value === null) {
+            return [];
+        }
+        value = value
+            .replace('\n', '')
+            .replace('\t', '');
+        var div = document.createElement("div");
+        div.innerHTML = value;
+        return this.transformHtmlElementToBlocks(div, options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: HtmlRawViewComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: HtmlRawViewComponent, selector: "croco-html-raw-view", inputs: { rawHtml: "rawHtml" }, ngImport: i0, template: "<div [innerHTML]=\"safeHtml\">\n</div>", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: HtmlRawViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'croco-html-raw-view', template: "<div [innerHTML]=\"safeHtml\">\n</div>" }]
-        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }], propDecorators: { rawHtml: [{
-                type: Input
-            }] } });
 
-class FileImageTagViewComponent {
-    constructor() {
-        this.imageSrc = "";
-    }
-    ngOnInit() {
-        let data = this.item.data;
-        this.imageSrc = data.src;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FileImageTagViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: FileImageTagViewComponent, selector: "croco-html-file-image-tag-view", inputs: { item: "item" }, ngImport: i0, template: "\r\n<img class=\"mx-auto d-block img-fluid\" [src]=\"imageSrc\" alt=\"\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043E\"/>", styles: [""] }); }
+class HtmlRawTagDataConsts {
+    static { this.TagName = "html-raw"; }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FileImageTagViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'croco-html-file-image-tag-view', template: "\r\n<img class=\"mx-auto d-block img-fluid\" [src]=\"imageSrc\" alt=\"\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043E\"/>" }]
-        }], propDecorators: { item: [{
-                type: Input
-            }] } });
 
-class XmlTagViewComponent {
-    constructor() {
-        this.data = [];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: XmlTagViewComponent, selector: "croco-html-xml-tag-view", inputs: { data: "data" }, ngImport: i0, template: "<div>\r\n    <div class=\"row\" *ngFor=\"let item of data\">\r\n        <div *ngIf=\"item.type === 'text'\">\r\n            <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'html-raw'\">\r\n            <croco-html-raw-view [rawHtml]=\"item.data.innerHTML\">\r\n            </croco-html-raw-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'h1' || item.type === 'h2' || item.type === 'h3' || item.type === 'h4' || item.type === 'h5' || item.type === 'h6'\">\r\n            <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'file-image'\">\r\n            <croco-html-file-image-tag-view [item]=\"item\" [viewOptions]=\"viewOptions\"></croco-html-file-image-tag-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'table'\">\r\n    \r\n            <croco-html-xml-tag-html-view *ngIf=\"item.validationResult.isSucceeded\" [html]=\"item.bootstrapHtml\">\r\n            </croco-html-xml-tag-html-view>\r\n             \r\n            <app-tutor-baseapiresponse-banner \r\n                *ngIf=\"item.validationResult && !item.validationResult.isSucceeded\" \r\n                [message]=\"item.validationResult.message\">\r\n            </app-tutor-baseapiresponse-banner>\r\n        </div>\r\n    \r\n        <div *ngIf=\"item.type === 'rich-text'\">\r\n            <croco-html-xml-tag-text-view [richTextData]=\"item\"></croco-html-xml-tag-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'external-video'\">\r\n            <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'unsupported-tag'\" class=\"red\" style=\"margin-top: 10px;\" >\r\n            <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\r\n            <span>\r\n                {{item.data.tagString}}\r\n            </span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".red{background-color:#c94444;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: XmlTagHtmlViewComponent, selector: "croco-html-xml-tag-html-view", inputs: ["html"] }, { kind: "component", type: XmlTagTextViewComponent, selector: "croco-html-xml-tag-text-view", inputs: ["item"] }, { kind: "component", type: XmlTagHeaderTextViewComponent, selector: "croco-html-xml-tag-header-text-view", inputs: ["item"] }, { kind: "component", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }, { kind: "component", type: HtmlRawViewComponent, selector: "croco-html-raw-view", inputs: ["rawHtml"] }, { kind: "component", type: FileImageTagViewComponent, selector: "croco-html-file-image-tag-view", inputs: ["item"] }], encapsulation: i0.ViewEncapsulation.None }); }
+class Tags {
+    static { this.Text = TextTags.text; }
+    static { this.H1 = TextTags.h1; }
+    static { this.H2 = TextTags.h2; }
+    static { this.H3 = TextTags.h3; }
+    static { this.H4 = TextTags.h4; }
+    static { this.H5 = TextTags.h5; }
+    static { this.H6 = TextTags.h6; }
+    static { this.HtmlRaw = HtmlRawTagDataConsts.TagName; }
+    static { this.FileImage = FileImageTagDataConsts.TagName; }
+    static { this.Table = 'table'; }
+    static { this.RichText = 'rich-text'; }
+    static { this.ExternalVideo = ExternalVideoTagDataConsts.TagName; }
+    static { this.UnsupportedTag = 'unsupported-tag'; }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'croco-html-xml-tag-view', encapsulation: ViewEncapsulation.None, template: "<div>\r\n    <div class=\"row\" *ngFor=\"let item of data\">\r\n        <div *ngIf=\"item.type === 'text'\">\r\n            <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'html-raw'\">\r\n            <croco-html-raw-view [rawHtml]=\"item.data.innerHTML\">\r\n            </croco-html-raw-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'h1' || item.type === 'h2' || item.type === 'h3' || item.type === 'h4' || item.type === 'h5' || item.type === 'h6'\">\r\n            <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'file-image'\">\r\n            <croco-html-file-image-tag-view [item]=\"item\" [viewOptions]=\"viewOptions\"></croco-html-file-image-tag-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'table'\">\r\n    \r\n            <croco-html-xml-tag-html-view *ngIf=\"item.validationResult.isSucceeded\" [html]=\"item.bootstrapHtml\">\r\n            </croco-html-xml-tag-html-view>\r\n             \r\n            <app-tutor-baseapiresponse-banner \r\n                *ngIf=\"item.validationResult && !item.validationResult.isSucceeded\" \r\n                [message]=\"item.validationResult.message\">\r\n            </app-tutor-baseapiresponse-banner>\r\n        </div>\r\n    \r\n        <div *ngIf=\"item.type === 'rich-text'\">\r\n            <croco-html-xml-tag-text-view [richTextData]=\"item\"></croco-html-xml-tag-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'external-video'\">\r\n            <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'unsupported-tag'\" class=\"red\" style=\"margin-top: 10px;\" >\r\n            <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\r\n            <span>\r\n                {{item.data.tagString}}\r\n            </span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".red{background-color:#c94444;color:#fff}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { data: [{
-                type: Input
-            }] } });
 
-class AngularMaterialTableMethods {
-    static getAngularMaterialTableData(columns, rows) {
-        let data = [];
-        for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
-            const row = rows[rowIndex];
-            var elem = {};
-            for (let columnIndex = 0; columnIndex < columns.length; columnIndex++) {
-                const column = columns[columnIndex];
-                elem[column] = row.columns[columnIndex].data.text;
+class BodyTagsExtensions {
+    static getDescription(tagName) {
+        var descriptions = {
+            "text": "Текст",
+            "h1": "Заголовок 1 уровня",
+            "h2": "Заголовок 2 уровня",
+            "h3": "Заголовок 3 уровня",
+            "h4": "Заголовок 4 уровня",
+            "h5": "Заголовок 5 уровня",
+            "h6": "Заголовок 6 уровня",
+            [FileImageTagDataConsts.TagName]: "Изображение",
+            [ExternalVideoTagDataConsts.TagName]: "Внешнее видео",
+            [HtmlRawTagDataConsts.TagName]: "Html разметка"
+        };
+        return descriptions[tagName];
+    }
+    static toHtml(bodyTags) {
+        let htmls = bodyTags.map(x => {
+            if (TextTags.allTextTags.includes(x.tagDescription.tag)) {
+                return `<${x.tagDescription.tag} h-align="${x.attributes['h-align']}">${x.innerHtml}</${x.tagDescription.tag}>`;
             }
-            data.push(elem);
+            if (x.tagDescription.tag === ExternalVideoTagDataConsts.TagName) {
+                return `<${x.tagDescription.tag} type="${x.attributes['type']}" link="${x.attributes['link']}">${x.innerHtml}</${x.tagDescription.tag}>`;
+            }
+            if (x.tagDescription.tag === "html-raw") {
+                return `<${x.tagDescription.tag}>${x.innerHtml}</${x.tagDescription.tag}>`;
+            }
+            return BodyTagsExtensions.imageTagToHtml(x);
+        });
+        let result = "";
+        for (let index = 0; index < htmls.length; index++) {
+            const element = htmls[index];
+            result += element;
         }
-        return {
-            displayedColumns: columns,
-            data: data,
-        };
+        return result;
     }
-    static checkHeaders(tableData) {
-        if (tableData.header === null) {
+    static imageTagToHtml(imageTag) {
+        var attrStr = "";
+        var attrValue = imageTag.attributes[FileImageTagDataConsts.FileIdAttrName];
+        if (imageTag.attributes.hasOwnProperty(FileImageTagDataConsts.FileIdAttrName) && attrValue) {
+            attrStr = `${FileImageTagDataConsts.FileIdAttrName}="${attrValue}"`;
+        }
+        return `<${FileImageTagDataConsts.TagName} ${attrStr}></${FileImageTagDataConsts.TagName}>`;
+    }
+    static getBodyTags(html, options) {
+        let result = HtmlExtractionMethods.transformHtmlStringToBlocks(html, options);
+        return result.map(x => BodyTagsExtensions.toBodyTag(x));
+    }
+    static sanitizeInnerHtml(html) {
+        return html.trim().replace('\n\t', '');
+    }
+    static toBodyTag(data) {
+        if (TextTags.allTextTags.includes(data.type)) {
+            let textTagData = data.data;
             return {
-                isSucceeded: false,
-                message: "Необходимо указать заголовок таблицы"
+                presentOrEdit: true,
+                tagDescription: {
+                    tag: textTagData.textTagName,
+                    displayValue: BodyTagsExtensions.getDescription(data.type)
+                },
+                attributes: { "h-align": textTagData.horizontalAlignment },
+                innerHtml: BodyTagsExtensions.sanitizeInnerHtml(textTagData.html)
             };
         }
-        let columns = tableData.header.columns;
-        var uniqueDislayedColumns = columns.filter((v, i, a) => a.indexOf(v) === i);
-        if (uniqueDislayedColumns.length !== columns.length) {
+        if (data.type === FileImageTagDataConsts.TagName) {
+            let fileData = data.data;
+            let attrs = {};
+            if (fileData.fileId) {
+                attrs[FileImageTagDataConsts.FileIdAttrName] = fileData.fileId;
+            }
             return {
-                isSucceeded: false,
-                message: "Ошибка при обработке разметки таблицы. Обнаружены дубликаты заголовков."
+                presentOrEdit: true,
+                tagDescription: {
+                    tag: FileImageTagDataConsts.TagName,
+                    displayValue: BodyTagsExtensions.getDescription(data.type)
+                },
+                attributes: attrs,
+                innerHtml: ""
             };
         }
-        return {
-            isSucceeded: true,
-            message: "Ok"
-        };
-    }
-    static checkAngularMaterialTableData(tableData, checkHeaders = true) {
-        if (checkHeaders) {
-            var checkHeadersResult = this.checkHeaders(tableData);
-            if (!checkHeadersResult.isSucceeded) {
-                return checkHeadersResult;
-            }
+        if (data.type === ExternalVideoTagDataConsts.TagName) {
+            let fileData = data.data;
+            return {
+                presentOrEdit: true,
+                tagDescription: {
+                    tag: data.type,
+                    displayValue: BodyTagsExtensions.getDescription(data.type)
+                },
+                attributes: fileData,
+                innerHtml: ""
+            };
         }
-        let rows = tableData.rows;
-        let columns = tableData.header.columns;
-        for (let i = 0; i < rows.length; i++) {
-            const row = rows[i];
-            if (row.columns.length !== columns.length) {
-                return {
-                    isSucceeded: false,
-                    message: `Ошибка при обработке разметки таблицы. `
-                        + `Количество колонок в каждой строке таблицы должно соотвествовать количеству колонок указанных в заголовке. `
-                        + `В строке таблицы №${i + 1} количество колонок = ${row.columns.length}, а должно быть ${columns.length}.`
-                };
-            }
+        if (data.type === HtmlRawTagDataConsts.TagName) {
+            return {
+                presentOrEdit: true,
+                tagDescription: {
+                    tag: HtmlRawTagDataConsts.TagName,
+                    displayValue: BodyTagsExtensions.getDescription(data.type)
+                },
+                attributes: {},
+                innerHtml: BodyTagsExtensions.sanitizeInnerHtml(data.data["innerHTML"])
+            };
         }
         return {
-            isSucceeded: true,
-            message: "Ok"
+            presentOrEdit: true,
+            tagDescription: {
+                tag: Tags.UnsupportedTag,
+                displayValue: "Неподдерживаемый тег"
+            },
+            attributes: {},
+            innerHtml: JSON.stringify(data)
         };
     }
 }
 
-var EAlignments;
-(function (EAlignments) {
-    EAlignments["Left"] = "left";
-    EAlignments["Center"] = "center";
-    EAlignments["Right"] = "right";
-})(EAlignments || (EAlignments = {}));
-const AlignmentsData = [
-    { value: EAlignments.Left, text: 'Слева' },
-    { value: EAlignments.Center, text: 'По центру' },
-    { value: EAlignments.Right, text: 'Справа' },
-];
-
-const TextTag = "text";
-class TextSimpleMethods {
-    static { this.supportedTags = ["sup", "sub", "strong", "b", "i", "u"]; }
-    static ExtractTextTag(elem) {
-        var hAlignValue = elem.getAttribute("h-align") ?? EAlignments.Left;
-        var data = {
-            textTagName: elem.tagName.toLowerCase(),
-            text: elem.innerText.trim().replace('\n\t', ''),
-            html: elem.innerHTML.trim().replace('\n\t', ''),
-            horizontalAlignment: hAlignValue,
-            validationResult: {
-                isSucceeded: true,
-                message: "Ok"
-            }
-        };
-        let result = {
-            type: TextTag,
-            data: data
-        };
-        if (result.data.text === '\n') {
-            result.data.text = '';
-        }
-        if (result.data.html === '\n') {
-            result.data.html = '';
-        }
-        var alignmentVals = [EAlignments.Left, EAlignments.Right, EAlignments.Center];
-        if (alignmentVals.indexOf(hAlignValue) < 0) {
-            result.data.validationResult = {
-                isSucceeded: false,
-                message: `Недопустимое значение атрибута h-align. Допустимые значения: ${alignmentVals.join(', ')}. `
-                    + 'Данный тег можно не указывать, по-умолчанию будет применено выравнивание слева.'
-            };
-        }
-        var html = result.data.html;
-        var htmlValidation = this.ValidateTextHtml(html);
-        if (!htmlValidation.isSucceeded) {
-            result.data.validationResult = htmlValidation;
-        }
-        return result;
+class XmlExtensions {
+    static formatXml(xml, tab = '\t') {
+        var formatted = '', indent = '';
+        tab = tab || '\t';
+        xml.split(/>\s*</).forEach(function (node) {
+            if (node.match(/^\/\w/))
+                indent = indent.substring(tab.length); // decrease indent by one 'tab'
+            formatted += indent + '<' + node + '>\r\n';
+            if (node.match(/^<?\w[^>]*[^\/]$/))
+                indent += tab; // increase indent
+        });
+        return formatted.substring(1, formatted.length - 3);
     }
-    static ValidateTextHtml(html) {
-        var p = document.createElement("p");
-        p.innerHTML = html;
-        for (let i = 0; i < p.children.length; i++) {
-            const element = p.children.item(i);
-            var validationResult = this.ValidateTag(element);
-            if (!validationResult.isSucceeded) {
-                return validationResult;
-            }
-        }
-        return {
-            isSucceeded: true,
-            message: `Ok`
-        };
+    static tagsToLower(xml) {
+        xml = this.replaceTagToLower(xml, "Body");
+        xml = this.replaceTagToLower(xml, "Image");
+        xml = this.replaceTagToLower(xml, "Text");
+        return xml;
     }
-    static ValidateTag(element) {
-        let lowerTag = element.tagName.toLowerCase();
-        if (!this.supportedTags.includes(lowerTag)) {
-            return {
-                isSucceeded: false,
-                message: `Тег <${lowerTag}> не поддерживается внутри тега <text>`
-            };
-        }
-        for (let i = 0; i < element.children.length; i++) {
-            const nElement = element.children.item(i);
-            var innerValidationResult = this.ValidateTag(nElement);
-            if (!innerValidationResult.isSucceeded) {
-                return innerValidationResult;
-            }
-        }
-        return {
-            isSucceeded: true,
-            message: "Ok"
-        };
+    static replaceTagToLower(xml, tag) {
+        return xml
+            .replace(new RegExp(`<${tag}`, 'g'), `<${tag.toLowerCase()}`)
+            .replace(new RegExp(`</${tag}>`, 'g'), `</${tag.toLowerCase()}>`);
     }
 }
 
-class BootstrapTableMethods {
-    static BuildTable(data) {
-        let result = `<table class="table table-bordered">`;
-        result += this.BuildHeader(data.header);
-        result += this.BuildBody(data.rows);
+class TableBuilder {
+    static getTableMarkUp(rows, cols, generateHeaders) {
+        rows = +rows;
+        cols = +cols;
+        let result = "<table>";
+        if (generateHeaders) {
+            result += TableBuilder.getTableHeaderMarkUp(cols);
+        }
+        result += TableBuilder.getTableBodyMarkUp(cols, rows);
         result += "</table>";
-        return result;
+        return XmlExtensions.formatXml(result);
     }
-    static BuildHeader(data) {
-        if (data === null) {
-            return "";
-        }
-        let result = "<thead>";
-        result += "<tr>";
-        for (let index = 0; index < data.columns.length; index++) {
-            result += `<th>${data.columns[index]}</th>`;
+    static getTableHeaderMarkUp(cols) {
+        let result = "<thead><tr>";
+        for (let i = 0; i < cols; i++) {
+            result += `<th>Колонка #${i + 1}</th>`;
         }
-        result += "</tr>";
-        result += "</thead>";
+        result += "</tr></thead>";
         return result;
     }
-    static BuildBody(rows) {
+    static getTableBodyMarkUp(cols, rows) {
         let result = "<tbody>";
-        for (let i = 0; i < rows.length; i++) {
-            const row = rows[i];
+        for (let row = 0; row < rows; row++) {
             result += "<tr>";
-            for (let j = 0; j < row.columns.length; j++) {
-                const col = row.columns[j];
-                result += `<td class="align-middle">${this.BuildInnerTags(col.data.children)}</td>`;
+            for (let i = 0; i < cols; i++) {
+                result += `<td>Ряд№${row + 1} Колонка #${i + 1}</td>`;
             }
             result += "</tr>";
         }
         result += "</tbody>";
         return result;
     }
-    static BuildInnerTags(tags) {
-        let result = "";
-        for (let i = 0; i < tags.length; i++) {
-            result += this.BuildInnerTag(tags[i]);
-        }
-        return result;
+}
+
+function resizeObservable(elem, options) {
+    return new Observable((subscriber) => {
+        const resizeObserver = new ResizeObserver(([entry]) => {
+            subscriber.next(entry);
+        });
+        resizeObserver.observe(elem, options);
+        return function unsubscribe() {
+            resizeObserver.unobserve(elem);
+        };
+    });
+}
+
+class VkVideoPlayerComponent {
+    set link(link) {
+        this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(link);
     }
-    static BuildInnerTag(data) {
-        if (data.type === FileImageTagDataConsts.TagName) {
-            let fileImageTag = data;
-            return `<img src=${fileImageTag.data.src} class="mx-auto d-block img-fluid" />`;
-        }
-        else if (data.type === TextTag) {
-            let simpleTextTag = data;
-            var map = {
-                ["left"]: "text-start",
-                ["center"]: "text-center",
-                ["right"]: "text-end"
-            };
-            if (!simpleTextTag.data.validationResult.isSucceeded) {
-                return `<span>Ошибка в тексте ${simpleTextTag.data.validationResult.message}</span>`;
-            }
-            return `<div class="${map[simpleTextTag.data.horizontalAlignment]}"><span>${simpleTextTag.data.html}</span></div>`;
-        }
-        else {
-            return `<p>Тег ${data.type} не поддерживается</p>`;
-        }
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: VkVideoPlayerComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: VkVideoPlayerComponent, isStandalone: true, selector: "vk-video-player", inputs: { link: "link" }, ngImport: i0, template: "<div class=\"vk-video-player\">\n  <iframe\n    [src]=\"safeUrl\"\n    width=\"100%\"\n    height=\"100%\"\n    allow=\"autoplay; encrypted-media; fullscreen; picture-in-picture;\"\n    frameborder=\"0\"\n    allowfullscreen></iframe>\n</div>\n", styles: [".vk-video-player{margin:0 auto;max-width:640px;width:100%;height:360px}@media screen and (max-width: 760px){.vk-video-player{height:300px}}@media screen and (max-width: 540px){.vk-video-player{height:250px}}@media screen and (max-width: 450px){.vk-video-player{height:200px}}@media screen and (max-width: 380px){.vk-video-player{height:180px}}\n"] }); }
 }
-
-class TableTypes {
-    static { this.TableRowColumnData = "table-row-column-data"; }
-    static { this.Table = "table"; }
-    static { this.TableRowColumn = "table-row-column"; }
-}
-class TableMethods {
-    static getTableFromHtmlTag(tableTag, options) {
-        let tableData = {
-            header: TableMethods.getHeader(tableTag),
-            rows: TableMethods.getTableRows(tableTag, options)
-        };
-        var result = {
-            type: TableTypes.Table,
-            data: tableData,
-            validationResult: this.checkTable(tableData),
-            bootstrapHtml: ""
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: VkVideoPlayerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vk-video-player', standalone: true, imports: [], template: "<div class=\"vk-video-player\">\n  <iframe\n    [src]=\"safeUrl\"\n    width=\"100%\"\n    height=\"100%\"\n    allow=\"autoplay; encrypted-media; fullscreen; picture-in-picture;\"\n    frameborder=\"0\"\n    allowfullscreen></iframe>\n</div>\n", styles: [".vk-video-player{margin:0 auto;max-width:640px;width:100%;height:360px}@media screen and (max-width: 760px){.vk-video-player{height:300px}}@media screen and (max-width: 540px){.vk-video-player{height:250px}}@media screen and (max-width: 450px){.vk-video-player{height:200px}}@media screen and (max-width: 380px){.vk-video-player{height:180px}}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }], propDecorators: { link: [{
+                type: Input
+            }] } });
+
+class XmlTagExternalVideoComponent {
+    set data(value) {
+        this.tagData = value.data;
+    }
+    ;
+    set tagData(value) {
+        this._block = {
+            type: value.type,
+            link: value.link
         };
-        if (!result.validationResult) {
-            return result;
+        if (this._block.type === ExternalVideoSupportedTypes.VkVideo) {
+            return;
         }
-        result.bootstrapHtml = BootstrapTableMethods.BuildTable(result.data);
-        var angularMaterialTableDataCheck = AngularMaterialTableMethods.checkAngularMaterialTableData(tableData);
-        if (!angularMaterialTableDataCheck.isSucceeded) {
-            return {
-                ...result,
-                angularMaterialTableDataCheck
-            };
-        }
-        return {
-            ...result,
-            angularMaterialTableDataCheck,
-            html: tableTag.outerHTML,
-            angularMaterialTableData: AngularMaterialTableMethods.getAngularMaterialTableData(tableData.header.columns, tableData.rows),
-        };
+        this.videoId = this.getYouTubeId(this._block.link);
     }
-    static checkTable(tableData) {
-        let rows = tableData.rows;
-        let prevRowCount = -1;
-        for (let i = 0; i < rows.length; i++) {
-            const row = rows[i];
-            if (row.columns.length !== prevRowCount && prevRowCount != -1) {
-                return {
-                    isSucceeded: false,
-                    message: `Ошибка при обработке разметки таблицы. `
-                        + `Количество колонок в каждой строке таблицы должно соотвествовать друг другу. `
-                        + `В строке таблицы №${i + 1} количество колонок = ${row.columns.length}, а в строке выше ${prevRowCount}.`
-                };
-            }
-            prevRowCount = row.columns.length;
-        }
-        return {
-            isSucceeded: true,
-            message: "Ok"
+    ;
+    constructor(destroyRef) {
+        this.destroyRef = destroyRef;
+        this._block = {
+            type: '',
+            link: ''
         };
+        this.playerWidth = signal(NaN);
+        this.playerHeight = signal(NaN);
+        this.ExternalVideoSupportedTypes = ExternalVideoSupportedTypes;
     }
-    static getHeader(tableTag) {
-        let header = tableTag.tHead;
-        if (header === null) {
-            return null;
+    ngOnInit() {
+        if (this._block.type === ExternalVideoSupportedTypes.VkVideo) {
+            return;
         }
-        let tr = header.children.item(0);
-        let headerColumns = [];
-        for (let j = 0; j < tr.children.length; j++) {
-            const jElement = tr.children.item(j);
-            headerColumns.push(jElement.innerHTML);
+        const youtubeIframeApiUrl = 'https://www.youtube.com/iframe_api';
+        if (!document.querySelector(`script[src="${youtubeIframeApiUrl}"]`)) {
+            // This code loads the IFrame Player API code asynchronously, according to the instructions at
+            // https://developers.google.com/youtube/iframe_api_reference#Getting_Started
+            const tag = document.createElement('script');
+            tag.setAttribute('src', youtubeIframeApiUrl);
+            document.body.appendChild(tag);
         }
-        return {
-            type: "table-header",
-            columns: headerColumns
-        };
-    }
-    static getTableRows(tableTag, options) {
-        let tBody = tableTag.tBodies.item(0);
-        let rows = [];
-        for (let i = 0; i < tBody.children.length; i++) {
-            const iElement = tBody.children.item(i);
-            let rowColumns = [];
-            for (let j = 0; j < iElement.children.length; j++) {
-                const jElement = iElement.children.item(j);
-                let children = HtmlExtractionMethods.transformHtmlElementToBlocks(jElement, options);
-                if (children.length === 0) {
-                    var textTag = document.createElement("p");
-                    textTag.innerHTML = jElement.innerHTML;
-                    var textElem = TextSimpleMethods.ExtractTextTag(textTag);
-                    children.push(textElem);
-                }
-                var result = {
-                    type: TableTypes.TableRowColumnData,
-                    data: {
-                        text: jElement.innerHTML,
-                        children
-                    }
-                };
-                rowColumns.push(result);
-            }
-            rows.push({
-                type: TableTypes.TableRowColumn,
-                columns: rowColumns
+        if (this.playerContainerRef) {
+            resizeObservable(this.playerContainerRef.nativeElement)
+                .pipe(map(({ contentRect: { height, width } }) => ({ height, width })), distinctUntilChanged((a, b) => a.height === b.height && a.width === b.width), takeUntilDestroyed(this.destroyRef))
+                .subscribe(({ height, width }) => {
+                this.playerHeight.set(height);
+                this.playerWidth.set(width);
             });
         }
-        return rows;
     }
+    getYouTubeId(youtubeLink) {
+        //https://www.youtube.com/watch?v=l3KfbfkxJOU
+        const url = new URL(youtubeLink);
+        if (url.pathname.endsWith('watch')) {
+            return url.searchParams.get("v");
+        }
+        //https://youtu.be/jzBneaWSswY
+        const bits = url.pathname.split('/');
+        return bits[bits.length - 1];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagExternalVideoComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: { data: "data", tagData: "tagData" }, viewQueries: [{ propertyName: "playerContainerRef", first: true, predicate: ["playerContainer"], descendants: true, static: true }], ngImport: i0, template: "@switch (_block.type) {\n  @case (ExternalVideoSupportedTypes.VkVideo) {\n    <vk-video-player [link]=\"_block.link\"></vk-video-player>\n  }\n  @case (ExternalVideoSupportedTypes.Youtube) {\n    <div #playerContainer class=\"d-flex justify-content-center y-video\">\n      @if (videoId) {\n        <youtube-player [height]=\"playerHeight()\" [width]=\"playerWidth()\" [videoId]=\"videoId\"></youtube-player>\n      }\n    </div>\n  }\n}\n", styles: ["@media only screen and (min-width: 769px){.y-video{display:block;width:640px;height:360px;margin:0 auto}}@media only screen and (max-width: 827px){.y-video{display:block;width:100%;height:315px}}\n"], dependencies: [{ kind: "component", type: i1$3.YouTubePlayer, selector: "youtube-player", inputs: ["videoId", "height", "width", "startSeconds", "endSeconds", "suggestedQuality", "playerVars", "disableCookies", "loadApi", "disablePlaceholder", "showBeforeIframeApiLoads", "placeholderButtonLabel", "placeholderImageQuality"], outputs: ["ready", "stateChange", "error", "apiChange", "playbackQualityChange", "playbackRateChange"] }, { kind: "component", type: VkVideoPlayerComponent, selector: "vk-video-player", inputs: ["link"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagExternalVideoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'croco-html-xml-tag-external-video', changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (_block.type) {\n  @case (ExternalVideoSupportedTypes.VkVideo) {\n    <vk-video-player [link]=\"_block.link\"></vk-video-player>\n  }\n  @case (ExternalVideoSupportedTypes.Youtube) {\n    <div #playerContainer class=\"d-flex justify-content-center y-video\">\n      @if (videoId) {\n        <youtube-player [height]=\"playerHeight()\" [width]=\"playerWidth()\" [videoId]=\"videoId\"></youtube-player>\n      }\n    </div>\n  }\n}\n", styles: ["@media only screen and (min-width: 769px){.y-video{display:block;width:640px;height:360px;margin:0 auto}}@media only screen and (max-width: 827px){.y-video{display:block;width:100%;height:315px}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { data: [{
+                type: Input
+            }], tagData: [{
+                type: Input
+            }], playerContainerRef: [{
+                type: ViewChild,
+                args: ['playerContainer', { static: true }]
+            }] } });
 
-class TextMethods {
-    static { this.textTags = ["text", "h1", "h2", "h3", "h4", "h5", "h6"]; }
-    static ExtractRichTextData(elem) {
-        let children = [];
-        for (let i = 0; i < elem.children.length; i++) {
-            const child = elem.children.item(i);
-            if (child.tagName === "text-block".toUpperCase()) {
-                children.push({
-                    type: "text-block",
-                    data: {
-                        text: child.innerHTML
-                    }
-                });
-            }
-            else if (child.tagName === "line-break".toUpperCase()) {
-                children.push({
-                    type: "line-break"
-                });
-            }
-        }
-        return {
-            type: "rich-text",
-            data: {
-                children
-            }
+class ExternalVideoBlockComponent {
+    constructor() {
+        this.onTagUpdated = new EventEmitter();
+        this.defaultYoutubeLink = "https://youtu.be/jzBneaWSswY";
+        this.defaultVkLink = "https://vk.com/video_ext.php?oid=-22822305&id=456241864&hd=2";
+        this.ExternalVideoSupportedTypes = ExternalVideoSupportedTypes;
+        this.tagData = {
+            link: this.defaultYoutubeLink,
+            type: ExternalVideoSupportedTypes.Youtube
         };
     }
+    ngOnInit() {
+        this.tagData.link = this.tag.attributes.type === ExternalVideoSupportedTypes.VkVideo ? this.defaultVkLink : this.defaultYoutubeLink;
+        this.tagData.type = this.tag.attributes.type;
+    }
+    linkChanged() {
+        this.tag.attributes = this.tagData;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ExternalVideoBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: ExternalVideoBlockComponent, selector: "croco-html-external-video-block", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "@if (tag.presentOrEdit) {\n  <div>\n    <div>\n      @switch (tagData.type) {\n        @case (ExternalVideoSupportedTypes.VkVideo) {\n          \u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 Vk Video: {{tagData.link}}\n        }\n        @case (ExternalVideoSupportedTypes.Youtube) {\n          \u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 YouTube: {{tagData.link}}\n        }\n      }\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <croco-html-xml-tag-external-video [tagData]=\"tagData\"></croco-html-xml-tag-external-video>\n  </div>\n}\n\n@if (!tag.presentOrEdit) {\n  <div>\n    <div>\n      <div>\n        <mat-form-field class=\"w-100\">\n          <input matInput placeholder=\"\u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 YouTube\"\n            autocomplete=\"off\"\n            [(ngModel)]=\"tagData.link\"\n                    (ngModelChange)=\"linkChanged()\">\n            </mat-form-field>\n        </div>\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ 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: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.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: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ExternalVideoBlockComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'croco-html-external-video-block', template: "@if (tag.presentOrEdit) {\n  <div>\n    <div>\n      @switch (tagData.type) {\n        @case (ExternalVideoSupportedTypes.VkVideo) {\n          \u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 Vk Video: {{tagData.link}}\n        }\n        @case (ExternalVideoSupportedTypes.Youtube) {\n          \u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 YouTube: {{tagData.link}}\n        }\n      }\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <croco-html-xml-tag-external-video [tagData]=\"tagData\"></croco-html-xml-tag-external-video>\n  </div>\n}\n\n@if (!tag.presentOrEdit) {\n  <div>\n    <div>\n      <div>\n        <mat-form-field class=\"w-100\">\n          <input matInput placeholder=\"\u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 YouTube\"\n            autocomplete=\"off\"\n            [(ngModel)]=\"tagData.link\"\n                    (ngModelChange)=\"linkChanged()\">\n            </mat-form-field>\n        </div>\n    </div>\n  </div>\n}\n" }]
+        }], propDecorators: { tag: [{
+                type: Input
+            }], onTagUpdated: [{
+                type: Output
+            }] } });
+
+class HtmlRawEditorComponent {
+    constructor() {
+        this.onTagUpdated = new EventEmitter();
+    }
+    ngOnInit() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: HtmlRawEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: HtmlRawEditorComponent, selector: "croco-html-html-raw-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "@if (tag.presentOrEdit) {\n  <div>\n    <div [innerHTML]=\"tag.innerHtml\"></div>\n  </div>\n}\n\n@if (!tag.presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\">\n    </div>\n    <div>\n      <mat-form-field class=\"w-100\">\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n          cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\"\n        [(ngModel)]=\"tag.innerHtml\"></textarea>\n      </mat-form-field>\n    </div>\n  </div>\n}\n\n", styles: [""], dependencies: [{ 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: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.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: i4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }] }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: HtmlRawEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'croco-html-html-raw-editor', template: "@if (tag.presentOrEdit) {\n  <div>\n    <div [innerHTML]=\"tag.innerHtml\"></div>\n  </div>\n}\n\n@if (!tag.presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\">\n    </div>\n    <div>\n      <mat-form-field class=\"w-100\">\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n          cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\"\n        [(ngModel)]=\"tag.innerHtml\"></textarea>\n      </mat-form-field>\n    </div>\n  </div>\n}\n\n" }]
+        }], ctorParameters: () => [], propDecorators: { tag: [{
+                type: Input
+            }], onTagUpdated: [{
+                type: Output
+            }] } });
 
-class HtmlExtractionMethods {
-    static ExtractHeaderTag(elem, tagName) {
-        var data = TextSimpleMethods.ExtractTextTag(elem);
-        data.type = tagName;
-        return data;
+const CrocoHtmlOptionsToken = "croco-html-options";
+
+var FileType;
+(function (FileType) {
+    FileType["Undefined"] = "Undefined";
+    FileType["Unknown"] = "Unknown";
+    FileType["Image"] = "Image";
+    FileType["Audio"] = "Audio";
+    FileType["Video"] = "Video";
+    FileType["Document"] = "Document";
+    FileType["Archive"] = "Archive";
+})(FileType || (FileType = {}));
+class FilesQueryService {
+    constructor(_httpClient, baseUrl) {
+        this._httpClient = _httpClient;
+        this._baseControllerUrl = `${baseUrl}Api/Files`;
     }
-    static { this.Extractors = {
-        ["TEXT"]: (elem, options) => TextSimpleMethods.ExtractTextTag(elem),
-        ["FILE-IMAGE"]: (elem, options) => ImageMethods.ExtractImage(elem, options),
-        ["TABLE"]: (elem, options) => TableMethods.getTableFromHtmlTag(elem, options),
-        ["RICH-TEXT"]: (elem, options) => TextMethods.ExtractRichTextData(elem),
-        ["HTML-RAW"]: (elem, options) => ({
-            type: "html-raw",
-            data: {
-                innerHTML: elem.innerHTML
-            }
-        }),
-        ["H1"]: (elem, options) => HtmlExtractionMethods.ExtractHeaderTag(elem, "h1"),
-        ["H2"]: (elem, options) => HtmlExtractionMethods.ExtractHeaderTag(elem, "h2"),
-        ["H3"]: (elem, options) => HtmlExtractionMethods.ExtractHeaderTag(elem, "h3"),
-        ["H4"]: (elem, options) => HtmlExtractionMethods.ExtractHeaderTag(elem, "h4"),
-        ["H5"]: (elem, options) => HtmlExtractionMethods.ExtractHeaderTag(elem, "h5"),
-        ["H6"]: (elem, options) => HtmlExtractionMethods.ExtractHeaderTag(elem, "h6"),
-        [ExternalVideoTagDataConsts.TagName.toUpperCase()]: (elem, options) => VideoMethods.ExtractExternalVideoTag(elem)
-    }; }
-    static transformHtmlElementToBlocks(element, options) {
-        var data = [];
-        for (let i = 0; i < element.children.length; i++) {
-            var elem = element.children.item(i);
-            if (!HtmlExtractionMethods.Extractors.hasOwnProperty(elem.tagName)) {
-                data.push({
-                    type: "unsupported-tag",
-                    data: {
-                        tagString: elem.outerHTML
-                    }
-                });
-            }
-            else {
-                var extractor = HtmlExtractionMethods.Extractors[elem.tagName];
-                var result = extractor(elem, options);
-                data.push(result);
-            }
-        }
-        return data;
+    getFilesWithRelations(model) {
+        return this._httpClient.post(this._baseControllerUrl + `/GetFiles/WithRelations`, model);
     }
-    static transformHtmlStringToBlocks(value, options) {
-        if (value === undefined || value === null) {
-            return [];
-        }
-        value = value
-            .replace('\n', '')
-            .replace('\t', '');
-        var div = document.createElement("div");
-        div.innerHTML = value;
-        return this.transformHtmlElementToBlocks(div, options);
+    getFiles(model) {
+        return this._httpClient.post(this._baseControllerUrl + `/GetFiles`, model);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FilesQueryService, 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: FilesQueryService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FilesQueryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['BASE_URL']
+                }] }] });
+
+class FileIdSelectComponent {
+    constructor(_fileService, _options) {
+        this._fileService = _fileService;
+        this._options = _options;
+        this.labelText = "Поиск файлов";
+        this.loading = false;
+        this.files = [];
+        this.onFileIdChanged = new EventEmitter();
+    }
+    onModelChanged(fileId) {
+        this.onFileIdChanged.emit(fileId);
+    }
+    getSrc(fileId) {
+        return ImageMethods.buildSmallUrl(fileId, this._options);
+    }
+    ngOnInit() {
+        this.loadFiles();
+    }
+    loadFiles() {
+        this.loading = true;
+        this._fileService.getFiles({
+            count: 10,
+            offSet: 0,
+            fileName: null,
+            fileTypes: [FileType.Image],
+            applicationId: null,
+            q: this.q
+        }).subscribe(data => {
+            this.files = [...data.list];
+            this.loading = false;
+        });
+    }
+    onSearchChanged(q) {
+        this.q = q.term;
+        this.loadFiles();
+    }
+    ngOnChanges(changes) {
+        this.loadFiles();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FileIdSelectComponent, deps: [{ token: FilesQueryService }, { token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: FileIdSelectComponent, 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)\"\n                   [items]=\"files\"\n                   #select\n                   bindLabel=\"fileName\"\n                   (search)=\"onSearchChanged($event)\"\n                   [loading]=\"loading\"\n                   [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\n                   dropdownPosition=\"auto\"\n                   bindValue=\"fileId\"\n                   labelForId=\"fileName\"\n                   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: "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: i3$1.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: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FileIdSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'croco-html-file-id-select', template: "<div>\n    <div class=\"form-group\">\n        <label for=\"fileName\">{{labelText}}</label>\n        <ng-select [(ngModel)]=\"fileId\" (ngModelChange)=\"onModelChanged($event)\"\n                   [items]=\"files\"\n                   #select\n                   bindLabel=\"fileName\"\n                   (search)=\"onSearchChanged($event)\"\n                   [loading]=\"loading\"\n                   [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\n                   dropdownPosition=\"auto\"\n                   bindValue=\"fileId\"\n                   labelForId=\"fileName\"\n                   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: FilesQueryService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [CrocoHtmlOptionsToken]
+                }] }], propDecorators: { labelText: [{
+                type: Input
+            }], fileId: [{
+                type: Input
+            }, {
+                type: Output
+            }], onFileIdChanged: [{
+                type: Output
+            }] } });
+
+class ImageEditorComponent {
+    onErrorHandler() {
+        this.hasImageError = true;
+    }
+    constructor(_options) {
+        this._options = _options;
+        this.hasImageError = false;
+        this.searchOrEdit = "search";
+        this.onTagUpdated = new EventEmitter();
+    }
+    getSrc() {
+        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]);
+    }
+    onFileIdChanged(fileId) {
+        this.tag.attributes[FileImageTagDataConsts.FileIdAttrName] = fileId;
+        this.removeImageError();
+    }
+    removeImageError() {
+        this.hasImageError = false;
+    }
+    ngOnInit() {
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ImageEditorComponent, deps: [{ token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: ImageEditorComponent, 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 class=\"mx-auto d-block img-fluid\" [src]=\"getSrc()\" (error)=\"onErrorHandler()\"/>\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</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)]=\"tag.attributes['file-id']\"\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          <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)]=\"tag.attributes['file-id']\"\n            (ngModelChange)=\"removeImageError()\">\n        </mat-form-field>\n      </div>\n    </div>\n  </div>\n}", styles: [".error-block{background-color:#f32323;color:#fff;text-align:center;border-radius:10px;padding:10px}\n"], dependencies: [{ 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: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5.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: FileIdSelectComponent, selector: "croco-html-file-id-select", inputs: ["labelText", "fileId"], outputs: ["fileId", "onFileIdChanged"] }] }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ImageEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'croco-html-image-editor', 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 class=\"mx-auto d-block img-fluid\" [src]=\"getSrc()\" (error)=\"onErrorHandler()\"/>\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</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)]=\"tag.attributes['file-id']\"\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          <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)]=\"tag.attributes['file-id']\"\n            (ngModelChange)=\"removeImageError()\">\n        </mat-form-field>\n      </div>\n    </div>\n  </div>\n}", styles: [".error-block{background-color:#f32323;color:#fff;text-align:center;border-radius:10px;padding:10px}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [CrocoHtmlOptionsToken]
+                }] }], propDecorators: { tag: [{
+                type: Input
+            }], onTagUpdated: [{
+                type: Output
+            }] } });
 
-class HtmlRawTagDataConsts {
-    static { this.TagName = "html-raw"; }
+class XmlTagHtmlViewComponent {
+    constructor() {
+        this.html = "";
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagHtmlViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: XmlTagHtmlViewComponent, selector: "croco-html-xml-tag-html-view", inputs: { html: "html" }, ngImport: i0, template: "<div class=\"col\" [innerHTML]=\"html\">\n</div>", styles: [""] }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagHtmlViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'croco-html-xml-tag-html-view', template: "<div class=\"col\" [innerHTML]=\"html\">\n</div>" }]
+        }], ctorParameters: () => [], propDecorators: { html: [{
+                type: Input
+            }] } });
 
-class BodyTagsExtensions {
-    static getDescription(tagName) {
-        var descriptions = {
-            "text": "Текст",
-            "h1": "Заголовок 1 уровня",
-            "h2": "Заголовок 2 уровня",
-            "h3": "Заголовок 3 уровня",
-            "h4": "Заголовок 4 уровня",
-            "h5": "Заголовок 5 уровня",
-            "h6": "Заголовок 6 уровня",
-            [FileImageTagDataConsts.TagName]: "Изображение",
-            [ExternalVideoTagDataConsts.TagName]: "Внешнее видео YouTube",
-            [HtmlRawTagDataConsts.TagName]: "Html разметка"
-        };
-        return descriptions[tagName];
-    }
-    static toHtml(bodyTags) {
-        let htmls = bodyTags.map(x => {
-            if (TextMethods.textTags.includes(x.tagDescription.tag)) {
-                return `<${x.tagDescription.tag} h-align="${x.attributes['h-align']}">${x.innerHtml}</${x.tagDescription.tag}>`;
-            }
-            if (x.tagDescription.tag === ExternalVideoTagDataConsts.TagName) {
-                return `<${x.tagDescription.tag} type="${x.attributes['type']}" link="${x.attributes['link']}">${x.innerHtml}</${x.tagDescription.tag}>`;
-            }
-            if (x.tagDescription.tag === "html-raw") {
-                return `<${x.tagDescription.tag}>${x.innerHtml}</${x.tagDescription.tag}>`;
-            }
-            return BodyTagsExtensions.imageTagToHtml(x);
-        });
-        let result = "";
-        for (let index = 0; index < htmls.length; index++) {
-            const element = htmls[index];
-            result += element;
-        }
-        return result;
+class XmlTagTextViewComponent {
+    constructor() { }
+    ngOnInit() {
     }
-    static imageTagToHtml(imageTag) {
-        var attrStr = "";
-        var attrValue = imageTag.attributes[FileImageTagDataConsts.FileIdAttrName];
-        if (imageTag.attributes.hasOwnProperty(FileImageTagDataConsts.FileIdAttrName) && attrValue) {
-            attrStr = `${FileImageTagDataConsts.FileIdAttrName}="${attrValue}"`;
-        }
-        return `<${FileImageTagDataConsts.TagName} ${attrStr}></${FileImageTagDataConsts.TagName}>`;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagTextViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: XmlTagTextViewComponent, selector: "croco-html-xml-tag-text-view", inputs: { item: "item" }, ngImport: i0, template: "@if (item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'left') {\n  <div style=\"text-align: left;\">\n    @if (item.data.html.length === 0 || !item.data.html) {\n      <span>&nbsp;</span>\n    }\n    @if (item.data.html.length > 0) {\n      <span [innerHtml]=\"item.data.html\"></span>\n    }\n  </div>\n}\n\n@if (item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'right') {\n  <div style=\"text-align: right;\">\n    @if (item.data.html.length === 0 || !item.data.html) {\n      <span>&nbsp;</span>\n    }\n    @if (item.data.html.length > 0) {\n      <span [innerHtml]=\"item.data.html\"></span>\n    }\n  </div>\n}\n\n@if (item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'center') {\n  <div style=\"text-align: center;\">\n    @if (item.data.html.length === 0 || !item.data.html) {\n      <span>&nbsp;</span>\n    }\n    @if (item.data.html.length > 0) {\n      <span [innerHtml]=\"item.data.html\"></span>\n    }\n  </div>\n}\n\n@if (!item.data.validationResult.isSucceeded) {\n  <div class=\"red\" style=\"margin-top: 10px;\" >\n    <h4>\u0414\u043E\u043F\u0443\u0449\u0435\u043D\u0430 \u043E\u0448\u0438\u0431\u043A\u0430 \u0432 \u0442\u0435\u0433\u0435 &lt;text&gt;</h4>\n    <span>\n      {{item.data.validationResult.message}}\n    </span>\n  </div>\n}", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagTextViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'croco-html-xml-tag-text-view', template: "@if (item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'left') {\n  <div style=\"text-align: left;\">\n    @if (item.data.html.length === 0 || !item.data.html) {\n      <span>&nbsp;</span>\n    }\n    @if (item.data.html.length > 0) {\n      <span [innerHtml]=\"item.data.html\"></span>\n    }\n  </div>\n}\n\n@if (item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'right') {\n  <div style=\"text-align: right;\">\n    @if (item.data.html.length === 0 || !item.data.html) {\n      <span>&nbsp;</span>\n    }\n    @if (item.data.html.length > 0) {\n      <span [innerHtml]=\"item.data.html\"></span>\n    }\n  </div>\n}\n\n@if (item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'center') {\n  <div style=\"text-align: center;\">\n    @if (item.data.html.length === 0 || !item.data.html) {\n      <span>&nbsp;</span>\n    }\n    @if (item.data.html.length > 0) {\n      <span [innerHtml]=\"item.data.html\"></span>\n    }\n  </div>\n}\n\n@if (!item.data.validationResult.isSucceeded) {\n  <div class=\"red\" style=\"margin-top: 10px;\" >\n    <h4>\u0414\u043E\u043F\u0443\u0449\u0435\u043D\u0430 \u043E\u0448\u0438\u0431\u043A\u0430 \u0432 \u0442\u0435\u0433\u0435 &lt;text&gt;</h4>\n    <span>\n      {{item.data.validationResult.message}}\n    </span>\n  </div>\n}" }]
+        }], ctorParameters: () => [], propDecorators: { item: [{
+                type: Input
+            }] } });
+
+class XmlTagHeaderInnerTextViewComponent {
+    constructor() { }
+    ngOnInit() {
     }
-    static getBodyTags(html, options) {
-        let result = HtmlExtractionMethods.transformHtmlStringToBlocks(html, options);
-        return result.map(x => BodyTagsExtensions.toBodyTag(x));
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagHeaderInnerTextViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: XmlTagHeaderInnerTextViewComponent, selector: "croco-html-xml-tag-header-inner-text-view", inputs: { item: "item" }, ngImport: i0, template: "@if (item.type === 'h1') {\n  <h1\n    [innerHtml]=\"item.data.html\">\n  </h1>\n}\n@if (item.type === 'h2') {\n  <h2\n    [innerHtml]=\"item.data.html\">\n  </h2>\n}\n@if (item.type === 'h3') {\n  <h3\n    [innerHtml]=\"item.data.html\">\n  </h3>\n}\n@if (item.type === 'h4') {\n  <h4\n    [innerHtml]=\"item.data.html\">\n  </h4>\n}\n@if (item.type === 'h5') {\n  <h5\n    [innerHtml]=\"item.data.html\">\n  </h5>\n}\n@if (item.type === 'h6') {\n  <h6\n    [innerHtml]=\"item.data.html\">\n  </h6>\n}", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagHeaderInnerTextViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'croco-html-xml-tag-header-inner-text-view', template: "@if (item.type === 'h1') {\n  <h1\n    [innerHtml]=\"item.data.html\">\n  </h1>\n}\n@if (item.type === 'h2') {\n  <h2\n    [innerHtml]=\"item.data.html\">\n  </h2>\n}\n@if (item.type === 'h3') {\n  <h3\n    [innerHtml]=\"item.data.html\">\n  </h3>\n}\n@if (item.type === 'h4') {\n  <h4\n    [innerHtml]=\"item.data.html\">\n  </h4>\n}\n@if (item.type === 'h5') {\n  <h5\n    [innerHtml]=\"item.data.html\">\n  </h5>\n}\n@if (item.type === 'h6') {\n  <h6\n    [innerHtml]=\"item.data.html\">\n  </h6>\n}" }]
+        }], ctorParameters: () => [], propDecorators: { item: [{
+                type: Input
+            }] } });
+
+class XmlTagHeaderTextViewComponent {
+    constructor() { }
+    ngOnInit() {
     }
-    static sanitizeInnerHtml(html) {
-        return html.trim().replace('\n\t', '');
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagHeaderTextViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: XmlTagHeaderTextViewComponent, selector: "croco-html-xml-tag-header-text-view", inputs: { item: "item" }, ngImport: i0, template: "@if (item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'left') {\n  <div style=\"text-align: left;\">\n    @if (item.data.html.length === 0 || !item.data.html) {\n      <span>&nbsp;</span>\n    }\n    @if (item.data.html.length > 0) {\n      <croco-html-xml-tag-header-inner-text-view  [item]=\"item\">\n      </croco-html-xml-tag-header-inner-text-view>\n    }\n  </div>\n}\n\n@if (item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'right') {\n  <div style=\"text-align: right;\">\n    @if (item.data.html.length === 0 || !item.data.html) {\n      <span>&nbsp;</span>\n    }\n    @if (item.data.html.length > 0) {\n      <croco-html-xml-tag-header-inner-text-view  [item]=\"item\">\n      </croco-html-xml-tag-header-inner-text-view>\n    }\n  </div>\n}\n\n@if (item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'center') {\n  <div style=\"text-align: center;\">\n    @if (item.data.html.length === 0 || !item.data.html) {\n      <span>&nbsp;</span>\n    }\n    @if (item.data.html.length > 0) {\n      <croco-html-xml-tag-header-inner-text-view  [item]=\"item\">\n      </croco-html-xml-tag-header-inner-text-view>\n    }\n  </div>\n}\n\n@if (!item.data.validationResult.isSucceeded) {\n  <div class=\"red\" style=\"margin-top: 10px;\" >\n    <h4>\u0414\u043E\u043F\u0443\u0449\u0435\u043D\u0430 \u043E\u0448\u0438\u0431\u043A\u0430 \u0432 \u0442\u0435\u0433\u0435 &lt;text&gt;</h4>\n    <span>\n      {{item.data.validationResult.message}}\n    </span>\n  </div>\n}", styles: [""], dependencies: [{ kind: "component", type: XmlTagHeaderInnerTextViewComponent, selector: "croco-html-xml-tag-header-inner-text-view", inputs: ["item"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagHeaderTextViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'croco-html-xml-tag-header-text-view', template: "@if (item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'left') {\n  <div style=\"text-align: left;\">\n    @if (item.data.html.length === 0 || !item.data.html) {\n      <span>&nbsp;</span>\n    }\n    @if (item.data.html.length > 0) {\n      <croco-html-xml-tag-header-inner-text-view  [item]=\"item\">\n      </croco-html-xml-tag-header-inner-text-view>\n    }\n  </div>\n}\n\n@if (item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'right') {\n  <div style=\"text-align: right;\">\n    @if (item.data.html.length === 0 || !item.data.html) {\n      <span>&nbsp;</span>\n    }\n    @if (item.data.html.length > 0) {\n      <croco-html-xml-tag-header-inner-text-view  [item]=\"item\">\n      </croco-html-xml-tag-header-inner-text-view>\n    }\n  </div>\n}\n\n@if (item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'center') {\n  <div style=\"text-align: center;\">\n    @if (item.data.html.length === 0 || !item.data.html) {\n      <span>&nbsp;</span>\n    }\n    @if (item.data.html.length > 0) {\n      <croco-html-xml-tag-header-inner-text-view  [item]=\"item\">\n      </croco-html-xml-tag-header-inner-text-view>\n    }\n  </div>\n}\n\n@if (!item.data.validationResult.isSucceeded) {\n  <div class=\"red\" style=\"margin-top: 10px;\" >\n    <h4>\u0414\u043E\u043F\u0443\u0449\u0435\u043D\u0430 \u043E\u0448\u0438\u0431\u043A\u0430 \u0432 \u0442\u0435\u0433\u0435 &lt;text&gt;</h4>\n    <span>\n      {{item.data.validationResult.message}}\n    </span>\n  </div>\n}" }]
+        }], ctorParameters: () => [], propDecorators: { item: [{
+                type: Input
+            }] } });
+
+class HtmlRawViewComponent {
+    constructor(_sanitizer) {
+        this._sanitizer = _sanitizer;
+        this.rawHtml = "";
+        this.isInitialized = false;
     }
-    static toBodyTag(data) {
-        if (TextMethods.textTags.includes(data.type)) {
-            let textTagData = data.data;
-            return {
-                presentOrEdit: true,
-                tagDescription: {
-                    tag: textTagData.textTagName,
-                    displayValue: BodyTagsExtensions.getDescription(data.type)
-                },
-                attributes: { "h-align": textTagData.horizontalAlignment },
-                innerHtml: BodyTagsExtensions.sanitizeInnerHtml(textTagData.html)
-            };
-        }
-        if (data.type === FileImageTagDataConsts.TagName) {
-            let fileData = data.data;
-            let attrs = {};
-            if (fileData.fileId) {
-                attrs[FileImageTagDataConsts.FileIdAttrName] = fileData.fileId;
-            }
-            return {
-                presentOrEdit: true,
-                tagDescription: {
-                    tag: FileImageTagDataConsts.TagName,
-                    displayValue: BodyTagsExtensions.getDescription(data.type)
-                },
-                attributes: attrs,
-                innerHtml: ""
-            };
-        }
-        if (data.type === ExternalVideoTagDataConsts.TagName) {
-            let fileData = data.data;
-            return {
-                presentOrEdit: true,
-                tagDescription: {
-                    tag: ExternalVideoTagDataConsts.TagName,
-                    displayValue: BodyTagsExtensions.getDescription(data.type)
-                },
-                attributes: fileData,
-                innerHtml: ""
-            };
-        }
-        if (data.type === HtmlRawTagDataConsts.TagName) {
-            return {
-                presentOrEdit: true,
-                tagDescription: {
-                    tag: HtmlRawTagDataConsts.TagName,
-                    displayValue: BodyTagsExtensions.getDescription(data.type)
-                },
-                attributes: {},
-                innerHtml: BodyTagsExtensions.sanitizeInnerHtml(data.data["innerHTML"])
-            };
-        }
-        return {
-            presentOrEdit: true,
-            tagDescription: {
-                tag: "unsupported-tag",
-                displayValue: "Неподдерживаемый тег"
-            },
-            attributes: {},
-            innerHtml: JSON.stringify(data)
-        };
+    ngOnInit() {
+        this.safeHtml = this._sanitizer.bypassSecurityTrustHtml(this.rawHtml);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: HtmlRawViewComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: HtmlRawViewComponent, selector: "croco-html-raw-view", inputs: { rawHtml: "rawHtml" }, ngImport: i0, template: "<div [innerHTML]=\"safeHtml\">\n</div>", styles: [""] }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: HtmlRawViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'croco-html-raw-view', template: "<div [innerHTML]=\"safeHtml\">\n</div>" }]
+        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }], propDecorators: { rawHtml: [{
+                type: Input
+            }] } });
 
-class XmlExtensions {
-    static formatXml(xml, tab = '\t') {
-        var formatted = '', indent = '';
-        tab = tab || '\t';
-        xml.split(/>\s*</).forEach(function (node) {
-            if (node.match(/^\/\w/))
-                indent = indent.substring(tab.length); // decrease indent by one 'tab'
-            formatted += indent + '<' + node + '>\r\n';
-            if (node.match(/^<?\w[^>]*[^\/]$/))
-                indent += tab; // increase indent
-        });
-        return formatted.substring(1, formatted.length - 3);
+class FileImageTagViewComponent {
+    constructor() {
+        this.imageSrc = "";
     }
-    static tagsToLower(xml) {
-        xml = this.replaceTagToLower(xml, "Body");
-        xml = this.replaceTagToLower(xml, "Image");
-        xml = this.replaceTagToLower(xml, "Text");
-        return xml;
+    ngOnInit() {
+        let data = this.item.data;
+        this.imageSrc = data.src;
     }
-    static replaceTagToLower(xml, tag) {
-        return xml
-            .replace(new RegExp(`<${tag}`, 'g'), `<${tag.toLowerCase()}`)
-            .replace(new RegExp(`</${tag}>`, 'g'), `</${tag.toLowerCase()}>`);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FileImageTagViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: FileImageTagViewComponent, selector: "croco-html-file-image-tag-view", inputs: { item: "item" }, ngImport: i0, template: "\n<img class=\"mx-auto d-block img-fluid\" [src]=\"imageSrc\" alt=\"\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043E\"/>", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FileImageTagViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'croco-html-file-image-tag-view', template: "\n<img class=\"mx-auto d-block img-fluid\" [src]=\"imageSrc\" alt=\"\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043E\"/>" }]
+        }], propDecorators: { item: [{
+                type: Input
+            }] } });
+
+class XmlTagViewComponent {
+    constructor() {
+        this.data = [];
+        this.textTags = TextTags.allTextTags;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: XmlTagViewComponent, selector: "croco-html-xml-tag-view", inputs: { data: "data" }, ngImport: i0, template: "<div>\n  @for (item of data; track $index) {\n  <div class=\"row\">\n    @if (item.type === 'html-raw') {\n    <div>\n      <croco-html-raw-view [rawHtml]=\"item.data.innerHTML\">\n      </croco-html-raw-view>\n    </div>\n    }\n\n    @if (textTags.includes(item.type)) {\n    <div>\n      <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\n    </div>\n    }\n\n    @if (item.type === 'file-image') {\n    <div>\n      <croco-html-file-image-tag-view [item]=\"item\"></croco-html-file-image-tag-view>\n    </div>\n    }\n\n    @if (item.type === 'table') {\n    <div>\n      @if (item.data) {\n      <croco-html-xml-tag-html-view [html]=\"item.data\">\n      </croco-html-xml-tag-html-view>\n      }\n    </div>\n    }\n\n    @if (item.type === 'rich-text') {\n    <div>\n      <croco-html-xml-tag-text-view></croco-html-xml-tag-text-view>\n    </div>\n    }\n\n    @if (item.type === 'external-video') {\n    <div>\n      <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\n    </div>\n    }\n\n    @if (item.type === 'unsupported-tag') {\n    <div class=\"red\" style=\"margin-top: 10px;\">\n      <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\n      <span>\n        {{item.data.tagString}}\n      </span>\n    </div>\n    }\n  </div>\n  }\n</div>", styles: [".red{background-color:#c94444;color:#fff}\n"], dependencies: [{ kind: "component", type: XmlTagHtmlViewComponent, selector: "croco-html-xml-tag-html-view", inputs: ["html"] }, { kind: "component", type: XmlTagTextViewComponent, selector: "croco-html-xml-tag-text-view", inputs: ["item"] }, { kind: "component", type: XmlTagHeaderTextViewComponent, selector: "croco-html-xml-tag-header-text-view", inputs: ["item"] }, { kind: "component", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }, { kind: "component", type: HtmlRawViewComponent, selector: "croco-html-raw-view", inputs: ["rawHtml"] }, { kind: "component", type: FileImageTagViewComponent, selector: "croco-html-file-image-tag-view", inputs: ["item"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'croco-html-xml-tag-view', encapsulation: ViewEncapsulation.None, template: "<div>\n  @for (item of data; track $index) {\n  <div class=\"row\">\n    @if (item.type === 'html-raw') {\n    <div>\n      <croco-html-raw-view [rawHtml]=\"item.data.innerHTML\">\n      </croco-html-raw-view>\n    </div>\n    }\n\n    @if (textTags.includes(item.type)) {\n    <div>\n      <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\n    </div>\n    }\n\n    @if (item.type === 'file-image') {\n    <div>\n      <croco-html-file-image-tag-view [item]=\"item\"></croco-html-file-image-tag-view>\n    </div>\n    }\n\n    @if (item.type === 'table') {\n    <div>\n      @if (item.data) {\n      <croco-html-xml-tag-html-view [html]=\"item.data\">\n      </croco-html-xml-tag-html-view>\n      }\n    </div>\n    }\n\n    @if (item.type === 'rich-text') {\n    <div>\n      <croco-html-xml-tag-text-view></croco-html-xml-tag-text-view>\n    </div>\n    }\n\n    @if (item.type === 'external-video') {\n    <div>\n      <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\n    </div>\n    }\n\n    @if (item.type === 'unsupported-tag') {\n    <div class=\"red\" style=\"margin-top: 10px;\">\n      <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\n      <span>\n        {{item.data.tagString}}\n      </span>\n    </div>\n    }\n  </div>\n  }\n</div>", styles: [".red{background-color:#c94444;color:#fff}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }] } });
 
 class DefaultTags {
     static { this.textTags = [
@@ -1218,7 +1315,7 @@ class DefaultTags {
     ]; }
     static { this.tags = [
         { tag: FileImageTagDataConsts.TagName, displayValue: 'Изображение' },
-        { tag: ExternalVideoTagDataConsts.TagName, displayValue: 'Внешнее видео Youtube' },
+        { tag: ExternalVideoTagDataConsts.TagName, displayValue: 'Внешнее видео' },
         ...DefaultTags.textTags
     ]; }
     static { this.htmlRawTag = {
@@ -1243,11 +1340,11 @@ class TextEditorComponent {
         return `<${this.tag.tagDescription.tag}>${this.tag.innerHtml}<${this.tag.tagDescription.tag}/>`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TextEditorComponent, selector: "croco-html-text-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "<div *ngIf=\"tag.presentOrEdit\">\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n\r\n    <div style=\"text-align: left;\" *ngIf=\"tag.attributes['h-align'] === 'left'\" [innerHtml]=\"getInnerHtml()\">\r\n    </div>\r\n    <div style=\"text-align: right;\" *ngIf=\"tag.attributes['h-align'] === 'right'\" [innerHtml]=\"getInnerHtml()\">\r\n    </div>\r\n    <div style=\"text-align: center;\" *ngIf=\"tag.attributes['h-align'] === 'center'\" [innerHtml]=\"getInnerHtml()\">\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n    <div style=\"overflow-x: auto;\">\r\n        <mat-button-toggle-group [(ngModel)]=\"tag.attributes['h-align']\">\r\n            <mat-button-toggle value=\"center\">\r\n                \u041F\u043E \u0446\u0435\u043D\u0442\u0440\u0443 <mat-icon>format_align_center</mat-icon>\r\n            </mat-button-toggle>\r\n            <mat-button-toggle value=\"left\">\r\n                \u0421\u043B\u0435\u0432\u0430 <mat-icon>format_align_left</mat-icon>\r\n            </mat-button-toggle>\r\n            <mat-button-toggle value=\"right\">\r\n                \u0421\u043F\u0440\u0430\u0432\u0430 <mat-icon> format_align_right</mat-icon>\r\n            </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n    </div>\r\n\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n    <div>\r\n        <mat-form-field class=\"w-100\">\r\n            <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\r\n                cdkAutosizeMinRows=\"1\"\r\n                placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430\"\r\n                [(ngModel)]=\"tag.innerHtml\"></textarea>\r\n        </mat-form-field>\r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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: i5.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: TextEditorComponent, selector: "croco-html-text-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "@if (tag.presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\">\n    </div>\n    @if (tag.attributes['h-align'] === 'left') {\n      <div style=\"text-align: left;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n    @if (tag.attributes['h-align'] === 'right') {\n      <div style=\"text-align: right;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n    @if (tag.attributes['h-align'] === 'center') {\n      <div style=\"text-align: center;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n  </div>\n}\n\n@if (!tag.presentOrEdit) {\n  <div>\n    <div style=\"overflow-x: auto;\">\n      <mat-button-toggle-group [(ngModel)]=\"tag.attributes['h-align']\">\n        <mat-button-toggle value=\"center\">\n          \u041F\u043E \u0446\u0435\u043D\u0442\u0440\u0443 <mat-icon>format_align_center</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"left\">\n          \u0421\u043B\u0435\u0432\u0430 <mat-icon>format_align_left</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"right\">\n          \u0421\u043F\u0440\u0430\u0432\u0430 <mat-icon> format_align_right</mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"height: 10px;\">\n    </div>\n    <div>\n      <mat-form-field class=\"w-100\">\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n          cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430\"\n        [(ngModel)]=\"tag.innerHtml\"></textarea>\n      </mat-form-field>\n    </div>\n  </div>\n}", styles: [""], dependencies: [{ 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: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.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: i4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TextEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-text-editor', template: "<div *ngIf=\"tag.presentOrEdit\">\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n\r\n    <div style=\"text-align: left;\" *ngIf=\"tag.attributes['h-align'] === 'left'\" [innerHtml]=\"getInnerHtml()\">\r\n    </div>\r\n    <div style=\"text-align: right;\" *ngIf=\"tag.attributes['h-align'] === 'right'\" [innerHtml]=\"getInnerHtml()\">\r\n    </div>\r\n    <div style=\"text-align: center;\" *ngIf=\"tag.attributes['h-align'] === 'center'\" [innerHtml]=\"getInnerHtml()\">\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n    <div style=\"overflow-x: auto;\">\r\n        <mat-button-toggle-group [(ngModel)]=\"tag.attributes['h-align']\">\r\n            <mat-button-toggle value=\"center\">\r\n                \u041F\u043E \u0446\u0435\u043D\u0442\u0440\u0443 <mat-icon>format_align_center</mat-icon>\r\n            </mat-button-toggle>\r\n            <mat-button-toggle value=\"left\">\r\n                \u0421\u043B\u0435\u0432\u0430 <mat-icon>format_align_left</mat-icon>\r\n            </mat-button-toggle>\r\n            <mat-button-toggle value=\"right\">\r\n                \u0421\u043F\u0440\u0430\u0432\u0430 <mat-icon> format_align_right</mat-icon>\r\n            </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n    </div>\r\n\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n    <div>\r\n        <mat-form-field class=\"w-100\">\r\n            <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\r\n                cdkAutosizeMinRows=\"1\"\r\n                placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430\"\r\n                [(ngModel)]=\"tag.innerHtml\"></textarea>\r\n        </mat-form-field>\r\n    </div>\r\n</div>" }]
+            args: [{ selector: 'croco-html-text-editor', template: "@if (tag.presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\">\n    </div>\n    @if (tag.attributes['h-align'] === 'left') {\n      <div style=\"text-align: left;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n    @if (tag.attributes['h-align'] === 'right') {\n      <div style=\"text-align: right;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n    @if (tag.attributes['h-align'] === 'center') {\n      <div style=\"text-align: center;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n  </div>\n}\n\n@if (!tag.presentOrEdit) {\n  <div>\n    <div style=\"overflow-x: auto;\">\n      <mat-button-toggle-group [(ngModel)]=\"tag.attributes['h-align']\">\n        <mat-button-toggle value=\"center\">\n          \u041F\u043E \u0446\u0435\u043D\u0442\u0440\u0443 <mat-icon>format_align_center</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"left\">\n          \u0421\u043B\u0435\u0432\u0430 <mat-icon>format_align_left</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"right\">\n          \u0421\u043F\u0440\u0430\u0432\u0430 <mat-icon> format_align_right</mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"height: 10px;\">\n    </div>\n    <div>\n      <mat-form-field class=\"w-100\">\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n          cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430\"\n        [(ngModel)]=\"tag.innerHtml\"></textarea>\n      </mat-form-field>\n    </div>\n  </div>\n}" }]
         }], ctorParameters: () => [], propDecorators: { tag: [{
                 type: Input
             }], onTagUpdated: [{
@@ -1256,7 +1353,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
 
 class MainEditorBlockComponent {
     constructor() {
-        this.textTags = TextMethods.textTags;
+        this.textTags = TextTags.allTextTags;
         this.onTagSaved = new EventEmitter();
         this.onTagRemoved = new EventEmitter();
     }
@@ -1272,12 +1369,12 @@ class MainEditorBlockComponent {
     ngOnInit() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MainEditorBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: MainEditorBlockComponent, selector: "croco-html-main-editor-block", inputs: { tag: "tag" }, outputs: { onTagSaved: "onTagSaved", onTagRemoved: "onTagRemoved" }, ngImport: i0, template: "<div>\r\n  <div>\r\n    <div *ngIf=\"textTags.includes(tag.tagDescription.tag)\">\r\n      <croco-html-text-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\r\n      </croco-html-text-editor>\r\n    </div>\r\n\r\n    <div *ngIf=\"tag.tagDescription.tag === 'file-image'\"> \r\n      <croco-html-image-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\r\n      </croco-html-image-editor>\r\n    </div>\r\n\r\n    <div *ngIf=\"tag.tagDescription.tag === 'external-video'\">\r\n      <croco-html-external-video-block (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\r\n      </croco-html-external-video-block>\r\n    </div>\r\n\r\n    <div *ngIf=\"tag.tagDescription.tag === 'html-raw'\">\r\n      <croco-html-html-raw-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\r\n      </croco-html-html-raw-editor>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"d-flex justify-content-between\">\r\n    <div class=\"d-flex justify-content-end align-self-center\">\r\n      <div>\r\n        <button *ngIf=\"tag.presentOrEdit\" (click)=\"tag.presentOrEdit = false\" mat-icon-button>\r\n          <mat-icon>edit</mat-icon>\r\n        </button>\r\n        <button *ngIf=\"!tag.presentOrEdit\" (click)=\"save()\" mat-icon-button>\r\n          <mat-icon>save</mat-icon>\r\n        </button>\r\n        <button (click)=\"deleteItem()\" mat-icon-button color=\"warn\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TextEditorComponent, selector: "croco-html-text-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: ExternalVideoBlockComponent, selector: "croco-html-external-video-block", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: ImageEditorComponent, selector: "croco-html-image-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: HtmlRawEditorComponent, selector: "croco-html-html-raw-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: MainEditorBlockComponent, selector: "croco-html-main-editor-block", inputs: { tag: "tag" }, outputs: { onTagSaved: "onTagSaved", onTagRemoved: "onTagRemoved" }, ngImport: i0, template: "<div>\n  <div>\n    @if (textTags.includes(tag.tagDescription.tag)) {\n      <div>\n        <croco-html-text-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-text-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'file-image') {\n      <div>\n        <croco-html-image-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-image-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'external-video') {\n      <div>\n        <croco-html-external-video-block (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-external-video-block>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'html-raw') {\n      <div>\n        <croco-html-html-raw-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-html-raw-editor>\n      </div>\n    }\n\n  </div>\n\n  <div class=\"d-flex justify-content-between\">\n    <div class=\"d-flex justify-content-end align-self-center\">\n      <div>\n        @if (tag.presentOrEdit) {\n          <button (click)=\"tag.presentOrEdit = false\" mat-icon-button>\n            <mat-icon>edit</mat-icon>\n          </button>\n        }\n        @if (!tag.presentOrEdit) {\n          <button (click)=\"save()\" mat-icon-button>\n            <mat-icon>save</mat-icon>\n          </button>\n        }\n        <button (click)=\"deleteItem()\" mat-icon-button color=\"warn\">\n          <mat-icon>delete</mat-icon>\n        </button>\n      </div>\n    </div>\n\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TextEditorComponent, selector: "croco-html-text-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: ExternalVideoBlockComponent, selector: "croco-html-external-video-block", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: ImageEditorComponent, selector: "croco-html-image-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: HtmlRawEditorComponent, selector: "croco-html-html-raw-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MainEditorBlockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-main-editor-block', template: "<div>\r\n  <div>\r\n    <div *ngIf=\"textTags.includes(tag.tagDescription.tag)\">\r\n      <croco-html-text-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\r\n      </croco-html-text-editor>\r\n    </div>\r\n\r\n    <div *ngIf=\"tag.tagDescription.tag === 'file-image'\"> \r\n      <croco-html-image-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\r\n      </croco-html-image-editor>\r\n    </div>\r\n\r\n    <div *ngIf=\"tag.tagDescription.tag === 'external-video'\">\r\n      <croco-html-external-video-block (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\r\n      </croco-html-external-video-block>\r\n    </div>\r\n\r\n    <div *ngIf=\"tag.tagDescription.tag === 'html-raw'\">\r\n      <croco-html-html-raw-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\r\n      </croco-html-html-raw-editor>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"d-flex justify-content-between\">\r\n    <div class=\"d-flex justify-content-end align-self-center\">\r\n      <div>\r\n        <button *ngIf=\"tag.presentOrEdit\" (click)=\"tag.presentOrEdit = false\" mat-icon-button>\r\n          <mat-icon>edit</mat-icon>\r\n        </button>\r\n        <button *ngIf=\"!tag.presentOrEdit\" (click)=\"save()\" mat-icon-button>\r\n          <mat-icon>save</mat-icon>\r\n        </button>\r\n        <button (click)=\"deleteItem()\" mat-icon-button color=\"warn\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</div>" }]
-        }], ctorParameters: () => [], propDecorators: { tag: [{
+            args: [{ selector: 'croco-html-main-editor-block', template: "<div>\n  <div>\n    @if (textTags.includes(tag.tagDescription.tag)) {\n      <div>\n        <croco-html-text-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-text-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'file-image') {\n      <div>\n        <croco-html-image-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-image-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'external-video') {\n      <div>\n        <croco-html-external-video-block (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-external-video-block>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'html-raw') {\n      <div>\n        <croco-html-html-raw-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-html-raw-editor>\n      </div>\n    }\n\n  </div>\n\n  <div class=\"d-flex justify-content-between\">\n    <div class=\"d-flex justify-content-end align-self-center\">\n      <div>\n        @if (tag.presentOrEdit) {\n          <button (click)=\"tag.presentOrEdit = false\" mat-icon-button>\n            <mat-icon>edit</mat-icon>\n          </button>\n        }\n        @if (!tag.presentOrEdit) {\n          <button (click)=\"save()\" mat-icon-button>\n            <mat-icon>save</mat-icon>\n          </button>\n        }\n        <button (click)=\"deleteItem()\" mat-icon-button color=\"warn\">\n          <mat-icon>delete</mat-icon>\n        </button>\n      </div>\n    </div>\n\n  </div>\n</div>\n" }]
+        }], propDecorators: { tag: [{
                 type: Input
             }], onTagSaved: [{
                 type: Output
@@ -1285,6 +1382,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 type: Output
             }] } });
 
+const defaultLinkYouTube = "https://youtu.be/jzBneaWSswY";
+const defaultLinkVk = "https://vk.com/video_ext.php?oid=-22822305&id=456241864&hd=2";
 class VisualEditorComponent {
     isHtmlSet() {
         return this.html.startsWith("<body>");
@@ -1310,6 +1409,8 @@ class VisualEditorComponent {
         this.alignmentOptions = AlignmentsData;
         this.showMarkUp = true;
         this.tags = [];
+        this.videoPlayers = ExternalVideoPlayers;
+        this.ExternalVideoTagDataConsts = ExternalVideoTagDataConsts;
         this.useHtmlRaw = false;
         this.html = "";
         this.onHtmlChanged = new EventEmitter();
@@ -1328,13 +1429,13 @@ class VisualEditorComponent {
             .find(x => x.tag === this.selectedValue);
         let attrs = {};
         let innerHtml = "";
-        if (TextMethods.textTags.includes(tagDescription.tag)) {
+        if (TextTags.allTextTags.includes(tagDescription.tag)) {
             attrs["h-align"] = EAlignments.Left;
             innerHtml = "Введите ваш текст";
         }
         else if (tagDescription.tag == ExternalVideoTagDataConsts.TagName) {
-            attrs[ExternalVideoTagDataConsts.VideoTypeAttrName] = ExternalVideoSupportedTypes.Youtube;
-            attrs[ExternalVideoTagDataConsts.LinkAttrName] = null;
+            attrs[ExternalVideoTagDataConsts.VideoTypeAttrName] = this.selectedVideoPlayer;
+            attrs[ExternalVideoTagDataConsts.LinkAttrName] = this.selectedVideoPlayer === ExternalVideoSupportedTypes.VkVideo ? defaultLinkVk : defaultLinkYouTube;
         }
         else {
             attrs[FileImageTagDataConsts.FileIdAttrName] = null;
@@ -1424,13 +1525,14 @@ class VisualEditorComponent {
         this.recalculateBodyTags();
         this.tags = DefaultTags.getTags(this.useHtmlRaw);
         this.selectedValue = this.tags[0].tag;
+        this.selectedVideoPlayer = this.videoPlayers[0].type;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: VisualEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: VisualEditorComponent, selector: "croco-visual-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged", rendered: "rendered" }, viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"isLoading\">\r\n    <div>\r\n        <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\r\n        <div style=\"text-align: center;\">{{loadingText}}</div>\r\n    </div>\r\n    <div style=\"height: 10px;\"></div>\r\n</div>\r\n<div [hidden]=\"isLoading\">\r\n  <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n    <mat-card-content>\r\n      <div class=\"row d-flex align-items-center\">\r\n        <div class=\"col-12\">\r\n          <button (click)=\"addText()\" class=\"w-100\" mat-stroked-button *ngIf=\"!isActiveAddText\">\r\n            \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u043A\u0441\u0442\r\n          </button>\r\n          <ng-container *ngIf=\"isActiveAddText\">\r\n            <mat-form-field class=\"w-100\" >\r\n            <textarea\r\n              #autosize=\"cdkTextareaAutosize\"\r\n              matInput\r\n              cdkTextareaAutosize\r\n              cdkAutosizeMinRows=\"1\"\r\n              cdkAutosizeMaxRows=\"5\"\r\n              placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\r\n              #textArea\r\n              [(ngModel)]=\"text\"\r\n              (ngModelChange)=\"modelChanged()\"\r\n            ></textarea>\r\n            </mat-form-field>\r\n            <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n              <mat-label>\u0422\u0435\u0433 \u0434\u043B\u044F \u0442\u0435\u043A\u0441\u0442\u0430</mat-label>\r\n              <mat-select [(ngModel)]=\"textTag\" (ngModelChange)=\"modelChanged()\">\r\n                <mat-option *ngFor=\"let option of textTagOptions\" value=\"{{ option.tag }}\">\r\n                  {{ option.displayValue }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n              <mat-label>\u0413\u043E\u0440\u0438\u0437\u043E\u043D\u0442\u0430\u043B\u044C\u043D\u043E\u0435 \u0432\u044B\u0440\u0430\u0432\u043D\u0438\u0432\u0430\u043D\u0438\u0435</mat-label>\r\n              <mat-select [(ngModel)]=\"alignment\" (ngModelChange)=\"modelChanged()\">\r\n                <mat-option *ngFor=\"let option of alignmentOptions\" value=\"{{ option.value }}\">\r\n                  {{ option.text }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </ng-container>\r\n          <div class=\"d-flex flex-nowrap justify-content-end w-100\">\r\n            <button (click)=\"addText()\" class=\"w-20\" style=\"margin-right: 10px\" mat-flat-button color=\"primary\" *ngIf=\"isActiveAddText\">\r\n              \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C\r\n            </button>\r\n            <button (click)=\"closeText()\" class=\"w-20\" mat-flat-button color=\"warn\"  *ngIf=\"isActiveAddText\">\r\n              \u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C\r\n            </button>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n    </mat-card-content>\r\n  </mat-card>\r\n\r\n  <div style=\"height: 10px;\">\r\n  </div>\r\n</div>\r\n<div [hidden]=\"isLoading\">\r\n  <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n    <mat-card-content>\r\n      <div class=\"row d-flex align-items-center\">\r\n        <div class=\"col-12\">\r\n          <mat-form-field class=\"w-100\" appearance=\"outline\">\r\n            <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0435\u0433</mat-label>\r\n            <mat-select [(ngModel)]=\"selectedValue\">\r\n              <mat-option *ngFor=\"let tag of tags\" [value]=\"tag.tag\">\r\n                {{tag.displayValue}}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"col-12\">\r\n          <button (click)=\"addTag()\" class=\"w-100\" mat-stroked-button>\r\n            \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </mat-card-content>\r\n  </mat-card>\r\n\r\n  <div style=\"height: 10px;\">\r\n  </div>\r\n</div>\r\n<div [hidden]=\"isLoading\">\r\n  <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n    <mat-card-content>\r\n      <div class=\"row d-flex align-items-center\">\r\n        <div class=\"col-12\">\r\n          <croco-html-add-files-btn (filesTagsReady)=\"filesTagsReadyHandler($event)\"\r\n                                    (postFilesStarted)=\"postFilesStartedEventHandler($event)\" class=\"w-100\">\r\n          </croco-html-add-files-btn>\r\n        </div>\r\n      </div>\r\n    </mat-card-content>\r\n  </mat-card>\r\n\r\n  <div style=\"height: 10px;\">\r\n  </div>\r\n</div>\r\n<div [hidden]=\"isLoading\">\r\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n        <div *ngFor=\"let tag of bodyTags; let i = index\" cdkDrag>\r\n            <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n                <mat-card-content>\r\n                    <div class=\"d-flex justify-content-between\">\r\n                        <div class=\"example-handle\" cdkDragHandle>\r\n                            <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                                <path\r\n                                    d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\">\r\n                                </path>\r\n                                <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n                            </svg>\r\n                        </div>\r\n                        <div>\r\n                          <div class=\"badge\">\r\n                            {{tag.tagDescription.displayValue}}\r\n                          </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div style=\"height: 15px;\"></div>\r\n\r\n                    <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagSavedHandler($event)\"\r\n                        (onTagRemoved)=\"onTagRemovedHandler(i)\">\r\n                    </croco-html-main-editor-block>\r\n                </mat-card-content>\r\n            </mat-card>\r\n\r\n            <div style=\"height: 10px;\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".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)}.badge{background-color:#50a450;color:#fff;min-width:55px;height:25px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i4$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i5$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i5$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i4.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: i5.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i11.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i11.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i11.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MainEditorBlockComponent, selector: "croco-html-main-editor-block", inputs: ["tag"], outputs: ["onTagSaved", "onTagRemoved"] }, { kind: "component", type: AddFilesBtnComponent, selector: "croco-html-add-files-btn", outputs: ["postFilesStarted", "filesTagsReady"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: VisualEditorComponent, selector: "croco-visual-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged", rendered: "rendered" }, viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }], ngImport: i0, template: "@if (isLoading) {\n  <div>\n    <div>\n      <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\n      <div style=\"text-align: center;\">{{loadingText}}</div>\n    </div>\n    <div style=\"height: 10px;\"></div>\n  </div>\n}\n<div [hidden]=\"isLoading\">\n  <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n    <mat-card-content>\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-12\">\n          @if (!isActiveAddText) {\n            <button (click)=\"addText()\" class=\"w-100\" mat-stroked-button>\n              \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u043A\u0441\u0442\n            </button>\n          }\n          @if (isActiveAddText) {\n            <mat-form-field class=\"w-100\" >\n              <textarea\n                #autosize=\"cdkTextareaAutosize\"\n                matInput\n                cdkTextareaAutosize\n                cdkAutosizeMinRows=\"1\"\n                cdkAutosizeMaxRows=\"5\"\n                placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n                #textArea\n                [(ngModel)]=\"text\"\n                (ngModelChange)=\"modelChanged()\"\n              ></textarea>\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" class=\"w-100\">\n              <mat-label>\u0422\u0435\u0433 \u0434\u043B\u044F \u0442\u0435\u043A\u0441\u0442\u0430</mat-label>\n              <mat-select [(ngModel)]=\"textTag\" (ngModelChange)=\"modelChanged()\">\n                @for (option of textTagOptions; track option) {\n                  <mat-option value=\"{{ option.tag }}\">\n                    {{ option.displayValue }}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" class=\"w-100\">\n              <mat-label>\u0413\u043E\u0440\u0438\u0437\u043E\u043D\u0442\u0430\u043B\u044C\u043D\u043E\u0435 \u0432\u044B\u0440\u0430\u0432\u043D\u0438\u0432\u0430\u043D\u0438\u0435</mat-label>\n              <mat-select [(ngModel)]=\"alignment\" (ngModelChange)=\"modelChanged()\">\n                @for (option of alignmentOptions; track option) {\n                  <mat-option value=\"{{ option.value }}\">\n                    {{ option.text }}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          }\n          <div class=\"d-flex flex-nowrap justify-content-end w-100\">\n            @if (isActiveAddText) {\n              <button (click)=\"addText()\" class=\"w-20\" style=\"margin-right: 10px\" mat-flat-button color=\"primary\">\n                \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C\n              </button>\n            }\n            @if (isActiveAddText) {\n              <button (click)=\"closeText()\" class=\"w-20\" mat-flat-button color=\"warn\" >\n                \u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C\n              </button>\n            }\n          </div>\n\n        </div>\n      </div>\n    </mat-card-content>\n  </mat-card>\n\n  <div style=\"height: 10px;\">\n  </div>\n</div>\n<div [hidden]=\"isLoading\">\n  <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n    <mat-card-content>\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-12\">\n          <mat-form-field class=\"w-100\" appearance=\"outline\">\n            <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0435\u0433</mat-label>\n            <mat-select [(ngModel)]=\"selectedValue\">\n              @for (tag of tags; track tag) {\n                <mat-option [value]=\"tag.tag\">\n                  {{tag.displayValue}}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n        @if (selectedValue === ExternalVideoTagDataConsts.TagName) {\n          <div class=\"col-12\">\n            <mat-form-field class=\"w-100\" appearance=\"outline\">\n              <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0438\u0434\u0435\u043E\u043F\u043B\u0435\u0435\u0440</mat-label>\n              <mat-select [(ngModel)]=\"selectedVideoPlayer\">\n                @for (videoPlayer of videoPlayers; track videoPlayer.type) {\n                  <mat-option [value]=\"videoPlayer.type\">\n                    {{videoPlayer.displayValue}}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </div>\n        }\n        <div class=\"col-12\">\n          <button (click)=\"addTag()\" class=\"w-100\" mat-stroked-button>\n            \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433\n          </button>\n        </div>\n      </div>\n    </mat-card-content>\n  </mat-card>\n\n  <div style=\"height: 10px;\">\n  </div>\n</div>\n<div [hidden]=\"isLoading\">\n  <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n    <mat-card-content>\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-12\">\n          <croco-html-add-files-btn (filesTagsReady)=\"filesTagsReadyHandler($event)\"\n            (postFilesStarted)=\"postFilesStartedEventHandler($event)\" class=\"w-100\">\n          </croco-html-add-files-btn>\n        </div>\n      </div>\n    </mat-card-content>\n  </mat-card>\n\n  <div style=\"height: 10px;\">\n  </div>\n</div>\n<div [hidden]=\"isLoading\">\n  <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    @for (tag of bodyTags; track tag; let i = $index) {\n      <div cdkDrag>\n        <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n          <mat-card-content>\n            <div class=\"d-flex justify-content-between\">\n              <div class=\"example-handle\" cdkDragHandle>\n                <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                  <path\n                    d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\">\n                  </path>\n                  <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n                </svg>\n              </div>\n              <div>\n                <div class=\"badge\">\n                  {{tag.tagDescription.displayValue}}\n                </div>\n              </div>\n            </div>\n            <div style=\"height: 15px;\"></div>\n            <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagSavedHandler($event)\"\n              (onTagRemoved)=\"onTagRemovedHandler(i)\">\n            </croco-html-main-editor-block>\n          </mat-card-content>\n        </mat-card>\n        <div style=\"height: 10px;\">\n        </div>\n      </div>\n    }\n  </div>\n</div>\n\n\n\n\n\n", styles: [".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)}.badge{background-color:#50a450;color:#fff;min-width:55px;height:25px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-weight:400}\n"], dependencies: [{ 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: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i1$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3.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: i4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i10.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i10.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MainEditorBlockComponent, selector: "croco-html-main-editor-block", inputs: ["tag"], outputs: ["onTagSaved", "onTagRemoved"] }, { kind: "component", type: AddFilesBtnComponent, selector: "croco-html-add-files-btn", outputs: ["postFilesStarted", "filesTagsReady"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: VisualEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-visual-editor', template: "<div *ngIf=\"isLoading\">\r\n    <div>\r\n        <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\r\n        <div style=\"text-align: center;\">{{loadingText}}</div>\r\n    </div>\r\n    <div style=\"height: 10px;\"></div>\r\n</div>\r\n<div [hidden]=\"isLoading\">\r\n  <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n    <mat-card-content>\r\n      <div class=\"row d-flex align-items-center\">\r\n        <div class=\"col-12\">\r\n          <button (click)=\"addText()\" class=\"w-100\" mat-stroked-button *ngIf=\"!isActiveAddText\">\r\n            \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u043A\u0441\u0442\r\n          </button>\r\n          <ng-container *ngIf=\"isActiveAddText\">\r\n            <mat-form-field class=\"w-100\" >\r\n            <textarea\r\n              #autosize=\"cdkTextareaAutosize\"\r\n              matInput\r\n              cdkTextareaAutosize\r\n              cdkAutosizeMinRows=\"1\"\r\n              cdkAutosizeMaxRows=\"5\"\r\n              placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\r\n              #textArea\r\n              [(ngModel)]=\"text\"\r\n              (ngModelChange)=\"modelChanged()\"\r\n            ></textarea>\r\n            </mat-form-field>\r\n            <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n              <mat-label>\u0422\u0435\u0433 \u0434\u043B\u044F \u0442\u0435\u043A\u0441\u0442\u0430</mat-label>\r\n              <mat-select [(ngModel)]=\"textTag\" (ngModelChange)=\"modelChanged()\">\r\n                <mat-option *ngFor=\"let option of textTagOptions\" value=\"{{ option.tag }}\">\r\n                  {{ option.displayValue }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n              <mat-label>\u0413\u043E\u0440\u0438\u0437\u043E\u043D\u0442\u0430\u043B\u044C\u043D\u043E\u0435 \u0432\u044B\u0440\u0430\u0432\u043D\u0438\u0432\u0430\u043D\u0438\u0435</mat-label>\r\n              <mat-select [(ngModel)]=\"alignment\" (ngModelChange)=\"modelChanged()\">\r\n                <mat-option *ngFor=\"let option of alignmentOptions\" value=\"{{ option.value }}\">\r\n                  {{ option.text }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </ng-container>\r\n          <div class=\"d-flex flex-nowrap justify-content-end w-100\">\r\n            <button (click)=\"addText()\" class=\"w-20\" style=\"margin-right: 10px\" mat-flat-button color=\"primary\" *ngIf=\"isActiveAddText\">\r\n              \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C\r\n            </button>\r\n            <button (click)=\"closeText()\" class=\"w-20\" mat-flat-button color=\"warn\"  *ngIf=\"isActiveAddText\">\r\n              \u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C\r\n            </button>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n    </mat-card-content>\r\n  </mat-card>\r\n\r\n  <div style=\"height: 10px;\">\r\n  </div>\r\n</div>\r\n<div [hidden]=\"isLoading\">\r\n  <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n    <mat-card-content>\r\n      <div class=\"row d-flex align-items-center\">\r\n        <div class=\"col-12\">\r\n          <mat-form-field class=\"w-100\" appearance=\"outline\">\r\n            <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0435\u0433</mat-label>\r\n            <mat-select [(ngModel)]=\"selectedValue\">\r\n              <mat-option *ngFor=\"let tag of tags\" [value]=\"tag.tag\">\r\n                {{tag.displayValue}}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"col-12\">\r\n          <button (click)=\"addTag()\" class=\"w-100\" mat-stroked-button>\r\n            \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </mat-card-content>\r\n  </mat-card>\r\n\r\n  <div style=\"height: 10px;\">\r\n  </div>\r\n</div>\r\n<div [hidden]=\"isLoading\">\r\n  <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n    <mat-card-content>\r\n      <div class=\"row d-flex align-items-center\">\r\n        <div class=\"col-12\">\r\n          <croco-html-add-files-btn (filesTagsReady)=\"filesTagsReadyHandler($event)\"\r\n                                    (postFilesStarted)=\"postFilesStartedEventHandler($event)\" class=\"w-100\">\r\n          </croco-html-add-files-btn>\r\n        </div>\r\n      </div>\r\n    </mat-card-content>\r\n  </mat-card>\r\n\r\n  <div style=\"height: 10px;\">\r\n  </div>\r\n</div>\r\n<div [hidden]=\"isLoading\">\r\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n        <div *ngFor=\"let tag of bodyTags; let i = index\" cdkDrag>\r\n            <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n                <mat-card-content>\r\n                    <div class=\"d-flex justify-content-between\">\r\n                        <div class=\"example-handle\" cdkDragHandle>\r\n                            <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                                <path\r\n                                    d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\">\r\n                                </path>\r\n                                <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n                            </svg>\r\n                        </div>\r\n                        <div>\r\n                          <div class=\"badge\">\r\n                            {{tag.tagDescription.displayValue}}\r\n                          </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div style=\"height: 15px;\"></div>\r\n\r\n                    <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagSavedHandler($event)\"\r\n                        (onTagRemoved)=\"onTagRemovedHandler(i)\">\r\n                    </croco-html-main-editor-block>\r\n                </mat-card-content>\r\n            </mat-card>\r\n\r\n            <div style=\"height: 10px;\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".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)}.badge{background-color:#50a450;color:#fff;min-width:55px;height:25px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-weight:400}\n"] }]
+            args: [{ selector: 'croco-visual-editor', template: "@if (isLoading) {\n  <div>\n    <div>\n      <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\n      <div style=\"text-align: center;\">{{loadingText}}</div>\n    </div>\n    <div style=\"height: 10px;\"></div>\n  </div>\n}\n<div [hidden]=\"isLoading\">\n  <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n    <mat-card-content>\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-12\">\n          @if (!isActiveAddText) {\n            <button (click)=\"addText()\" class=\"w-100\" mat-stroked-button>\n              \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u043A\u0441\u0442\n            </button>\n          }\n          @if (isActiveAddText) {\n            <mat-form-field class=\"w-100\" >\n              <textarea\n                #autosize=\"cdkTextareaAutosize\"\n                matInput\n                cdkTextareaAutosize\n                cdkAutosizeMinRows=\"1\"\n                cdkAutosizeMaxRows=\"5\"\n                placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n                #textArea\n                [(ngModel)]=\"text\"\n                (ngModelChange)=\"modelChanged()\"\n              ></textarea>\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" class=\"w-100\">\n              <mat-label>\u0422\u0435\u0433 \u0434\u043B\u044F \u0442\u0435\u043A\u0441\u0442\u0430</mat-label>\n              <mat-select [(ngModel)]=\"textTag\" (ngModelChange)=\"modelChanged()\">\n                @for (option of textTagOptions; track option) {\n                  <mat-option value=\"{{ option.tag }}\">\n                    {{ option.displayValue }}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" class=\"w-100\">\n              <mat-label>\u0413\u043E\u0440\u0438\u0437\u043E\u043D\u0442\u0430\u043B\u044C\u043D\u043E\u0435 \u0432\u044B\u0440\u0430\u0432\u043D\u0438\u0432\u0430\u043D\u0438\u0435</mat-label>\n              <mat-select [(ngModel)]=\"alignment\" (ngModelChange)=\"modelChanged()\">\n                @for (option of alignmentOptions; track option) {\n                  <mat-option value=\"{{ option.value }}\">\n                    {{ option.text }}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          }\n          <div class=\"d-flex flex-nowrap justify-content-end w-100\">\n            @if (isActiveAddText) {\n              <button (click)=\"addText()\" class=\"w-20\" style=\"margin-right: 10px\" mat-flat-button color=\"primary\">\n                \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C\n              </button>\n            }\n            @if (isActiveAddText) {\n              <button (click)=\"closeText()\" class=\"w-20\" mat-flat-button color=\"warn\" >\n                \u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C\n              </button>\n            }\n          </div>\n\n        </div>\n      </div>\n    </mat-card-content>\n  </mat-card>\n\n  <div style=\"height: 10px;\">\n  </div>\n</div>\n<div [hidden]=\"isLoading\">\n  <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n    <mat-card-content>\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-12\">\n          <mat-form-field class=\"w-100\" appearance=\"outline\">\n            <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0435\u0433</mat-label>\n            <mat-select [(ngModel)]=\"selectedValue\">\n              @for (tag of tags; track tag) {\n                <mat-option [value]=\"tag.tag\">\n                  {{tag.displayValue}}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n        @if (selectedValue === ExternalVideoTagDataConsts.TagName) {\n          <div class=\"col-12\">\n            <mat-form-field class=\"w-100\" appearance=\"outline\">\n              <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0438\u0434\u0435\u043E\u043F\u043B\u0435\u0435\u0440</mat-label>\n              <mat-select [(ngModel)]=\"selectedVideoPlayer\">\n                @for (videoPlayer of videoPlayers; track videoPlayer.type) {\n                  <mat-option [value]=\"videoPlayer.type\">\n                    {{videoPlayer.displayValue}}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </div>\n        }\n        <div class=\"col-12\">\n          <button (click)=\"addTag()\" class=\"w-100\" mat-stroked-button>\n            \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433\n          </button>\n        </div>\n      </div>\n    </mat-card-content>\n  </mat-card>\n\n  <div style=\"height: 10px;\">\n  </div>\n</div>\n<div [hidden]=\"isLoading\">\n  <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n    <mat-card-content>\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-12\">\n          <croco-html-add-files-btn (filesTagsReady)=\"filesTagsReadyHandler($event)\"\n            (postFilesStarted)=\"postFilesStartedEventHandler($event)\" class=\"w-100\">\n          </croco-html-add-files-btn>\n        </div>\n      </div>\n    </mat-card-content>\n  </mat-card>\n\n  <div style=\"height: 10px;\">\n  </div>\n</div>\n<div [hidden]=\"isLoading\">\n  <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    @for (tag of bodyTags; track tag; let i = $index) {\n      <div cdkDrag>\n        <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n          <mat-card-content>\n            <div class=\"d-flex justify-content-between\">\n              <div class=\"example-handle\" cdkDragHandle>\n                <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                  <path\n                    d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\">\n                  </path>\n                  <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n                </svg>\n              </div>\n              <div>\n                <div class=\"badge\">\n                  {{tag.tagDescription.displayValue}}\n                </div>\n              </div>\n            </div>\n            <div style=\"height: 15px;\"></div>\n            <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagSavedHandler($event)\"\n              (onTagRemoved)=\"onTagRemovedHandler(i)\">\n            </croco-html-main-editor-block>\n          </mat-card-content>\n        </mat-card>\n        <div style=\"height: 10px;\">\n        </div>\n      </div>\n    }\n  </div>\n</div>\n\n\n\n\n\n", styles: [".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)}.badge{background-color:#50a450;color:#fff;min-width:55px;height:25px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-weight:400}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [CrocoHtmlOptionsToken]
@@ -1511,13 +1613,13 @@ class MainEditorComponent {
     ngOnInit() {
         this.visualEditor.recalculateBodyTags();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MainEditorComponent, deps: [{ token: i1$3.ClipboardService }, { token: i2$3.MatSnackBar }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: MainEditorComponent, 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>\r\n  <mat-tab label=\"\u0412\u0438\u0437\u0443\u0430\u043B\u044C\u043D\u044B\u0439 \u0440\u0435\u0434\u0430\u043A\u0442\u043E\u0440\">\r\n\r\n    <div style=\"height: 20px;\"></div>\r\n\r\n    <croco-visual-editor #visualEditor\r\n      [useHtmlRaw]=\"useHtmlRaw\"\r\n      [html]=\"html\"\r\n      (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\r\n      (rendered)=\"visualEditorRenderedHandler()\">\r\n    </croco-visual-editor>\r\n\r\n    <div style=\"height: 20px;\"></div>\r\n\r\n  </mat-tab>\r\n\r\n  <mat-tab label=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\">\r\n    <div style=\"height: 10px;\"></div>\r\n    <div *ngIf=\"visualEditorRendered\">\r\n      <mat-form-field class=\"w-100\">\r\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\r\n          cdkAutosizeMinRows=\"1\"\r\n          placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\"\r\n          (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <button (click)=\"copyMarkUp()\"\r\n      mat-raised-button color=\"primary\">\r\n      \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\r\n    </button>\r\n  </mat-tab>\r\n  <mat-tab label=\"\u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\">\r\n    <mat-card style=\"padding: 2px;\" class=\"mat-card\">\r\n      <mat-card-content>\r\n        <croco-html-xml-tag-view [data]=\"html | topreview\">\r\n        </croco-html-xml-tag-view>\r\n      </mat-card-content>\r\n    </mat-card>\r\n  </mat-tab>\r\n</mat-tab-group>\r\n", styles: [".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: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i6$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i6$2.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: i5$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i5$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i4.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: i5.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: XmlTagViewComponent, selector: "croco-html-xml-tag-view", inputs: ["data"] }, { kind: "component", type: VisualEditorComponent, selector: "croco-visual-editor", inputs: ["showMarkUp", "useHtmlRaw", "html"], outputs: ["html", "onHtmlChanged", "rendered"] }, { kind: "pipe", type: ToPreviewPipe, name: "topreview" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MainEditorComponent, deps: [{ token: i1$5.ClipboardService }, { token: i2$1.MatSnackBar }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: MainEditorComponent, 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>\n  <mat-tab label=\"\u0412\u0438\u0437\u0443\u0430\u043B\u044C\u043D\u044B\u0439 \u0440\u0435\u0434\u0430\u043A\u0442\u043E\u0440\">\n\n    <div style=\"height: 20px;\"></div>\n\n    <croco-visual-editor #visualEditor\n      [useHtmlRaw]=\"useHtmlRaw\"\n      [html]=\"html\"\n      (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n      (rendered)=\"visualEditorRenderedHandler()\">\n    </croco-visual-editor>\n\n    <div style=\"height: 20px;\"></div>\n\n  </mat-tab>\n\n  <mat-tab label=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\">\n    <div style=\"height: 10px;\"></div>\n    @if (visualEditorRendered) {\n      <div>\n        <mat-form-field class=\"w-100\">\n          <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n            cdkAutosizeMinRows=\"1\"\n            placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\"\n          (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n        </mat-form-field>\n      </div>\n    }\n\n    <button (click)=\"copyMarkUp()\"\n      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 label=\"\u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\">\n    <mat-card style=\"padding: 2px;\" class=\"mat-card\">\n      <mat-card-content>\n        <croco-html-xml-tag-view [data]=\"html | topreview\">\n        </croco-html-xml-tag-view>\n      </mat-card-content>\n    </mat-card>\n  </mat-tab>\n</mat-tab-group>\n", styles: [".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: "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: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i5$2.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: i4$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i1$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3.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: i4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: XmlTagViewComponent, selector: "croco-html-xml-tag-view", inputs: ["data"] }, { kind: "component", type: VisualEditorComponent, selector: "croco-visual-editor", inputs: ["showMarkUp", "useHtmlRaw", "html"], outputs: ["html", "onHtmlChanged", "rendered"] }, { kind: "pipe", type: ToPreviewPipe, name: "topreview" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MainEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-main-editor', template: "<mat-tab-group>\r\n  <mat-tab label=\"\u0412\u0438\u0437\u0443\u0430\u043B\u044C\u043D\u044B\u0439 \u0440\u0435\u0434\u0430\u043A\u0442\u043E\u0440\">\r\n\r\n    <div style=\"height: 20px;\"></div>\r\n\r\n    <croco-visual-editor #visualEditor\r\n      [useHtmlRaw]=\"useHtmlRaw\"\r\n      [html]=\"html\"\r\n      (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\r\n      (rendered)=\"visualEditorRenderedHandler()\">\r\n    </croco-visual-editor>\r\n\r\n    <div style=\"height: 20px;\"></div>\r\n\r\n  </mat-tab>\r\n\r\n  <mat-tab label=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\">\r\n    <div style=\"height: 10px;\"></div>\r\n    <div *ngIf=\"visualEditorRendered\">\r\n      <mat-form-field class=\"w-100\">\r\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\r\n          cdkAutosizeMinRows=\"1\"\r\n          placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\"\r\n          (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <button (click)=\"copyMarkUp()\"\r\n      mat-raised-button color=\"primary\">\r\n      \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\r\n    </button>\r\n  </mat-tab>\r\n  <mat-tab label=\"\u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\">\r\n    <mat-card style=\"padding: 2px;\" class=\"mat-card\">\r\n      <mat-card-content>\r\n        <croco-html-xml-tag-view [data]=\"html | topreview\">\r\n        </croco-html-xml-tag-view>\r\n      </mat-card-content>\r\n    </mat-card>\r\n  </mat-tab>\r\n</mat-tab-group>\r\n", styles: [".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$3.ClipboardService }, { type: i2$3.MatSnackBar }, { type: i0.ChangeDetectorRef }], propDecorators: { visualEditor: [{
+            args: [{ selector: 'croco-html-main-editor', template: "<mat-tab-group>\n  <mat-tab label=\"\u0412\u0438\u0437\u0443\u0430\u043B\u044C\u043D\u044B\u0439 \u0440\u0435\u0434\u0430\u043A\u0442\u043E\u0440\">\n\n    <div style=\"height: 20px;\"></div>\n\n    <croco-visual-editor #visualEditor\n      [useHtmlRaw]=\"useHtmlRaw\"\n      [html]=\"html\"\n      (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n      (rendered)=\"visualEditorRenderedHandler()\">\n    </croco-visual-editor>\n\n    <div style=\"height: 20px;\"></div>\n\n  </mat-tab>\n\n  <mat-tab label=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\">\n    <div style=\"height: 10px;\"></div>\n    @if (visualEditorRendered) {\n      <div>\n        <mat-form-field class=\"w-100\">\n          <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n            cdkAutosizeMinRows=\"1\"\n            placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\"\n          (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n        </mat-form-field>\n      </div>\n    }\n\n    <button (click)=\"copyMarkUp()\"\n      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 label=\"\u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\">\n    <mat-card style=\"padding: 2px;\" class=\"mat-card\">\n      <mat-card-content>\n        <croco-html-xml-tag-view [data]=\"html | topreview\">\n        </croco-html-xml-tag-view>\n      </mat-card-content>\n    </mat-card>\n  </mat-tab>\n</mat-tab-group>\n", styles: [".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$1.MatSnackBar }, { type: i0.ChangeDetectorRef }], propDecorators: { visualEditor: [{
                 type: ViewChild,
                 args: ["visualEditor", { static: true }]
             }], showMarkUp: [{
@@ -1563,11 +1665,11 @@ class XmlTagRichTextViewComponent {
     ngOnInit() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagRichTextViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: XmlTagRichTextViewComponent, selector: "croco-html-xml-tag-rich-text-view", inputs: { richTextData: "richTextData" }, ngImport: i0, template: "<div *ngIf=\"richTextData\" [innerHtml]=\"richTextData | richTextToHtml\">\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: RichTextToHtmlPipe, name: "richTextToHtml" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: XmlTagRichTextViewComponent, selector: "croco-html-xml-tag-rich-text-view", inputs: { richTextData: "richTextData" }, ngImport: i0, template: "@if (richTextData) {\n  <div [innerHtml]=\"richTextData | richTextToHtml\">\n  </div>\n}", styles: [""], dependencies: [{ kind: "pipe", type: RichTextToHtmlPipe, name: "richTextToHtml" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagRichTextViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-xml-tag-rich-text-view', template: "<div *ngIf=\"richTextData\" [innerHtml]=\"richTextData | richTextToHtml\">\r\n</div>" }]
+            args: [{ selector: 'croco-html-xml-tag-rich-text-view', template: "@if (richTextData) {\n  <div [innerHtml]=\"richTextData | richTextToHtml\">\n  </div>\n}" }]
         }], ctorParameters: () => [], propDecorators: { richTextData: [{
                 type: Input
             }] } });
@@ -1577,11 +1679,11 @@ class XmlTagTableViewComponent {
         this.displayedColumns = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagTableViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: XmlTagTableViewComponent, selector: "croco-html-xml-tag-table-view", inputs: { displayedColumns: "displayedColumns", data: "data" }, ngImport: i0, template: "<table mat-table [dataSource]=\"data\" class=\"mat-elevation-z8 w-100 example-container\">\r\n    <ng-container [matColumnDef]=\"column\" *ngFor=\"let column of displayedColumns\">\r\n        <th mat-header-cell *matHeaderCellDef> {{column}} </th>\r\n        <td mat-cell *matCellDef=\"let element\"> {{element[column]}} </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n</table>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: XmlTagTableViewComponent, selector: "croco-html-xml-tag-table-view", inputs: { displayedColumns: "displayedColumns", data: "data" }, ngImport: i0, template: "<table mat-table [dataSource]=\"data\" class=\"mat-elevation-z8 w-100 example-container\">\n  @for (column of displayedColumns; track column) {\n    <ng-container [matColumnDef]=\"column\">\n      <th mat-header-cell *matHeaderCellDef> {{column}} </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element[column]}} </td>\n    </ng-container>\n  }\n\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>", styles: [""], dependencies: [{ kind: "component", type: i1$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagTableViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-xml-tag-table-view', template: "<table mat-table [dataSource]=\"data\" class=\"mat-elevation-z8 w-100 example-container\">\r\n    <ng-container [matColumnDef]=\"column\" *ngFor=\"let column of displayedColumns\">\r\n        <th mat-header-cell *matHeaderCellDef> {{column}} </th>\r\n        <td mat-cell *matCellDef=\"let element\"> {{element[column]}} </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n</table>" }]
+            args: [{ selector: 'croco-html-xml-tag-table-view', template: "<table mat-table [dataSource]=\"data\" class=\"mat-elevation-z8 w-100 example-container\">\n  @for (column of displayedColumns; track column) {\n    <ng-container [matColumnDef]=\"column\">\n      <th mat-header-cell *matHeaderCellDef> {{column}} </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element[column]}} </td>\n    </ng-container>\n  }\n\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>" }]
         }], propDecorators: { displayedColumns: [{
                 type: Input
             }], data: [{
@@ -1656,40 +1758,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                     args: [CrocoHtmlOptionsToken]
                 }] }] });
 
-class TableBuilder {
-    static getTableMarkUp(rows, cols, generateHeaders) {
-        rows = +rows;
-        cols = +cols;
-        let result = "<table>";
-        if (generateHeaders) {
-            result += TableBuilder.getTableHeaderMarkUp(cols);
-        }
-        result += TableBuilder.getTableBodyMarkUp(cols, rows);
-        result += "</table>";
-        return XmlExtensions.formatXml(result);
-    }
-    static getTableHeaderMarkUp(cols) {
-        let result = "<thead><tr>";
-        for (let i = 0; i < cols; i++) {
-            result += `<th>Колонка #${i + 1}</th>`;
-        }
-        result += "</tr></thead>";
-        return result;
-    }
-    static getTableBodyMarkUp(cols, rows) {
-        let result = "<tbody>";
-        for (let row = 0; row < rows; row++) {
-            result += "<tr>";
-            for (let i = 0; i < cols; i++) {
-                result += `<td>Ряд№${row + 1} Колонка #${i + 1}</td>`;
-            }
-            result += "</tr>";
-        }
-        result += "</tbody>";
-        return result;
-    }
-}
-
 const EditorComponents = [
     MainEditorComponent,
     FileIdSelectComponent,
@@ -1765,7 +1833,8 @@ class CrocoHtmlModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: CrocoHtmlModule, declarations: [UploadFilesBtnComponent, HtmlViewComponent, XmlTagTableViewComponent, XmlTagViewComponent, XmlTagRichTextViewComponent, XmlTagHtmlViewComponent, XmlTagTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHeaderInnerTextViewComponent, XmlTagExternalVideoComponent, HtmlRawViewComponent, FileImageTagViewComponent, HtmlViewComponent, MainEditorComponent, FileIdSelectComponent, TextEditorComponent, ExternalVideoBlockComponent, ImageEditorComponent, MainEditorBlockComponent, VisualEditorComponent, AddFilesBtnComponent, HtmlRawEditorComponent, RichTextToHtmlPipe, TagToSpanPipe, ToPreviewPipe, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
-            NgSelectModule, i27.MatBadgeModule, i2$4.MatTableModule, i29.MatExpansionModule, i3.MatFormFieldModule, i2$3.MatSnackBarModule, i32.MatProgressBarModule, i4$1.MatProgressSpinnerModule, i6$2.MatTabsModule, i35.MatMenuModule, i5$2.MatCardModule, i6$1.MatSelectModule, i38.MatTooltipModule, i39.MatCheckboxModule, i40.MatChipsModule, i41.MatListModule, i2.MatButtonModule, i4.MatInputModule, i44.MatDialogModule, i45.MatPaginatorModule, i46.MatDatepickerModule, i47.MatGridListModule, i48.MatSlideToggleModule, i49.MatTreeModule, i7.MatNativeDateModule, i51.MatAutocompleteModule, i52.MatSidenavModule, i5$1.MatIconModule, i11.DragDropModule, i6.MatButtonToggleModule, YouTubePlayerModule], exports: [UploadFilesBtnComponent, HtmlViewComponent, XmlTagTableViewComponent, XmlTagViewComponent, XmlTagRichTextViewComponent, XmlTagHtmlViewComponent, XmlTagTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHeaderInnerTextViewComponent, XmlTagExternalVideoComponent, HtmlRawViewComponent, FileImageTagViewComponent, HtmlViewComponent, MainEditorComponent, FileIdSelectComponent, TextEditorComponent, ExternalVideoBlockComponent, ImageEditorComponent, MainEditorBlockComponent, VisualEditorComponent, AddFilesBtnComponent, HtmlRawEditorComponent, RichTextToHtmlPipe, TagToSpanPipe, ToPreviewPipe, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe] }); }
+            NgSelectModule, i27.MatBadgeModule, i1$6.MatTableModule, i29.MatExpansionModule, i2.MatFormFieldModule, i2$1.MatSnackBarModule, i32.MatProgressBarModule, i3$2.MatProgressSpinnerModule, i5$2.MatTabsModule, i35.MatMenuModule, i4$2.MatCardModule, i5$1.MatSelectModule, i38.MatTooltipModule, i39.MatCheckboxModule, i40.MatChipsModule, i41.MatListModule, i1$1.MatButtonModule, i3.MatInputModule, i44.MatDialogModule, i45.MatPaginatorModule, i46.MatDatepickerModule, i47.MatGridListModule, i48.MatSlideToggleModule, i49.MatTreeModule, i6.MatNativeDateModule, i51.MatAutocompleteModule, i52.MatSidenavModule, i4$1.MatIconModule, i10.DragDropModule, i5.MatButtonToggleModule, YouTubePlayerModule,
+            VkVideoPlayerComponent], exports: [UploadFilesBtnComponent, HtmlViewComponent, XmlTagTableViewComponent, XmlTagViewComponent, XmlTagRichTextViewComponent, XmlTagHtmlViewComponent, XmlTagTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHeaderInnerTextViewComponent, XmlTagExternalVideoComponent, HtmlRawViewComponent, FileImageTagViewComponent, HtmlViewComponent, MainEditorComponent, FileIdSelectComponent, TextEditorComponent, ExternalVideoBlockComponent, ImageEditorComponent, MainEditorBlockComponent, VisualEditorComponent, AddFilesBtnComponent, HtmlRawEditorComponent, RichTextToHtmlPipe, TagToSpanPipe, ToPreviewPipe, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: CrocoHtmlModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
@@ -1786,7 +1855,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                         ReactiveFormsModule,
                         NgSelectModule,
                         ...MaterialModules,
-                        YouTubePlayerModule
+                        YouTubePlayerModule,
+                        VkVideoPlayerComponent
                     ]
                 }]
         }] });
@@ -1799,5 +1869,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AddFilesBtnComponent, AngularMaterialTableMethods, BodyTagsExtensions, BootstrapTableMethods, CrocoHtmlModule, CrocoHtmlOptionsToken, ExternalVideoBlockComponent, ExternalVideoSupportedTypes, ExternalVideoTagDataConsts, FileIdSelectComponent, FileImageTagDataConsts, FileImageTagViewComponent, HtmlRawEditorComponent, HtmlRawViewComponent, HtmlViewComponent, ImageEditorComponent, ImageMethods, MainEditorBlockComponent, MainEditorComponent, RichTextToHtmlPipe, TableBuilder, TableMethods, TableTypes, TagToSpanPipe, TextEditorComponent, TextMethods, TextSimpleMethods, TextTag, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe, ToPreviewPipe, UploadFilesBtnComponent, VideoMethods, VisualEditorComponent, XmlExtensions, XmlTagExternalVideoComponent, XmlTagHeaderInnerTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHtmlViewComponent, XmlTagRichTextViewComponent, XmlTagTableViewComponent, XmlTagTextViewComponent, XmlTagViewComponent };
+export { AddFilesBtnComponent, AngularMaterialTableMethods, BodyTagsExtensions, BootstrapTableMethods, CrocoHtmlModule, CrocoHtmlOptionsToken, ExternalVideoBlockComponent, ExternalVideoPlayers, ExternalVideoSupportedTypes, ExternalVideoTagDataConsts, FileIdSelectComponent, FileImageTagDataConsts, FileImageTagViewComponent, HtmlRawEditorComponent, HtmlRawViewComponent, HtmlViewComponent, ImageEditorComponent, ImageMethods, MainEditorBlockComponent, MainEditorComponent, RichTextToHtmlPipe, TableBuilder, TableMethods, TableTypes, TagToSpanPipe, TextEditorComponent, TextMethods, TextSimpleMethods, TextTag, TextTags, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe, ToPreviewPipe, UploadFilesBtnComponent, VideoMethods, VisualEditorComponent, XmlExtensions, XmlTagExternalVideoComponent, XmlTagHeaderInnerTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHtmlViewComponent, XmlTagRichTextViewComponent, XmlTagTableViewComponent, XmlTagTextViewComponent, XmlTagViewComponent, defaultLinkVk, defaultLinkYouTube };
 //# sourceMappingURL=croco-html.mjs.map