croco-html 0.0.1

package/bundles/croco-html.umd.js

@@ -0,0 +1,2091 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common/http'), require('@angular/material/button'), require('@angular/forms'), require('@angular/platform-browser'), require('@angular/common'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/cdk/text-field'), require('@angular/material/button-toggle'), require('@angular/material/icon'), require('@ng-select/ng-select'), require('ngx-clipboard'), require('@angular/material/snack-bar'), require('@angular/material/tabs'), require('@angular/cdk/drag-drop'), require('@angular/material/progress-spinner'), require('@angular/material/card'), require('@angular/material/chips'), require('@angular/material/select'), require('@angular/material/core'), require('@angular/material/table'), require('@angular/material/tooltip'), require('@angular/material/checkbox'), require('@angular/material/autocomplete'), require('@angular/material/datepicker'), require('@angular/material/dialog'), require('@angular/material/expansion'), require('@angular/material/grid-list'), require('@angular/material/list'), require('@angular/material/menu'), require('@angular/material/paginator'), require('@angular/material/progress-bar'), require('@angular/material/sidenav'), require('@angular/material/slide-toggle'), require('@angular/material/tree'), require('@angular/material/badge')) :
+    typeof define === 'function' && define.amd ? define('croco-html', ['exports', '@angular/core', '@angular/common/http', '@angular/material/button', '@angular/forms', '@angular/platform-browser', '@angular/common', '@angular/material/form-field', '@angular/material/input', '@angular/cdk/text-field', '@angular/material/button-toggle', '@angular/material/icon', '@ng-select/ng-select', 'ngx-clipboard', '@angular/material/snack-bar', '@angular/material/tabs', '@angular/cdk/drag-drop', '@angular/material/progress-spinner', '@angular/material/card', '@angular/material/chips', '@angular/material/select', '@angular/material/core', '@angular/material/table', '@angular/material/tooltip', '@angular/material/checkbox', '@angular/material/autocomplete', '@angular/material/datepicker', '@angular/material/dialog', '@angular/material/expansion', '@angular/material/grid-list', '@angular/material/list', '@angular/material/menu', '@angular/material/paginator', '@angular/material/progress-bar', '@angular/material/sidenav', '@angular/material/slide-toggle', '@angular/material/tree', '@angular/material/badge'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["croco-html"] = {}, global.ng.core, global.ng.common.http, global.ng.material.button, global.ng.forms, global.ng.platformBrowser, global.ng.common, global.ng.material.formField, global.ng.material.input, global.ng.cdk.textField, global.ng.material.buttonToggle, global.ng.material.icon, global.i3, global.i1$4, global.ng.material.snackBar, global.ng.material.tabs, global.ng.cdk.dragDrop, global.ng.material.progressSpinner, global.ng.material.card, global.ng.material.chips, global.ng.material.select, global.ng.material.core, global.ng.material.table, global.ng.material.tooltip, global.ng.material.checkbox, global.ng.material.autocomplete, global.ng.material.datepicker, global.ng.material.dialog, global.ng.material.expansion, global.ng.material.gridList, global.ng.material.list, global.ng.material.menu, global.ng.material.paginator, global.ng.material.progressBar, global.ng.material.sidenav, global.ng.material.slideToggle, global.ng.material.tree, global.ng.material.badge));
+})(this, (function (exports, i0, i1, i2, i5, i1$1, i2$1, i5$1, i5$2, i4, i1$2, i2$2, i3, i1$4, i2$4, i3$2, i11, i1$3, i2$3, i3$1, i6, i7, i1$5, i34, i35, i47, i42, i40, i25, i43, i37, i31, i41, i28, i48, i44, i45, i23) { 'use strict';
+
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n["default"] = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5);
+    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
+    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5$1);
+    var i5__namespace$2 = /*#__PURE__*/_interopNamespace(i5$2);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$2);
+    var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$2);
+    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i1__namespace$4 = /*#__PURE__*/_interopNamespace(i1$4);
+    var i2__namespace$4 = /*#__PURE__*/_interopNamespace(i2$4);
+    var i3__namespace$2 = /*#__PURE__*/_interopNamespace(i3$2);
+    var i11__namespace = /*#__PURE__*/_interopNamespace(i11);
+    var i1__namespace$3 = /*#__PURE__*/_interopNamespace(i1$3);
+    var i2__namespace$3 = /*#__PURE__*/_interopNamespace(i2$3);
+    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
+    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
+    var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
+    var i1__namespace$5 = /*#__PURE__*/_interopNamespace(i1$5);
+    var i34__namespace = /*#__PURE__*/_interopNamespace(i34);
+    var i35__namespace = /*#__PURE__*/_interopNamespace(i35);
+    var i47__namespace = /*#__PURE__*/_interopNamespace(i47);
+    var i42__namespace = /*#__PURE__*/_interopNamespace(i42);
+    var i40__namespace = /*#__PURE__*/_interopNamespace(i40);
+    var i25__namespace = /*#__PURE__*/_interopNamespace(i25);
+    var i43__namespace = /*#__PURE__*/_interopNamespace(i43);
+    var i37__namespace = /*#__PURE__*/_interopNamespace(i37);
+    var i31__namespace = /*#__PURE__*/_interopNamespace(i31);
+    var i41__namespace = /*#__PURE__*/_interopNamespace(i41);
+    var i28__namespace = /*#__PURE__*/_interopNamespace(i28);
+    var i48__namespace = /*#__PURE__*/_interopNamespace(i48);
+    var i44__namespace = /*#__PURE__*/_interopNamespace(i44);
+    var i45__namespace = /*#__PURE__*/_interopNamespace(i45);
+    var i23__namespace = /*#__PURE__*/_interopNamespace(i23);
+
+    var FileImageTagDataConsts = /** @class */ (function () {
+        function FileImageTagDataConsts() {
+        }
+        return FileImageTagDataConsts;
+    }());
+    FileImageTagDataConsts.TagName = "file-image";
+    FileImageTagDataConsts.FileIdAttrName = "file-id";
+    var ImageMethods = /** @class */ (function () {
+        function ImageMethods() {
+        }
+        ImageMethods.buildUrl = function (fileId) {
+            return "/FileCopies/Images/Medium/" + fileId + ".jpg";
+        };
+        ImageMethods.buildSmallUrl = function (fileId) {
+            return "/FileCopies/Images/Small/" + fileId + ".jpg";
+        };
+        ImageMethods.ExtractImage = function (elem) {
+            var fileId = +elem.getAttribute(FileImageTagDataConsts.FileIdAttrName);
+            var src = ImageMethods.buildUrl(fileId);
+            return {
+                type: FileImageTagDataConsts.TagName,
+                data: {
+                    src: src,
+                    fileId: fileId,
+                }
+            };
+        };
+        return ImageMethods;
+    }());
+
+    var FileUploadService = /** @class */ (function () {
+        function FileUploadService(_httpClient, baseUrl) {
+            this._httpClient = _httpClient;
+            this.baseUrl = baseUrl;
+        }
+        FileUploadService.prototype.postFile = function (file, createLocalCopiesNow) {
+            if (createLocalCopiesNow === void 0) { createLocalCopiesNow = false; }
+            var formData = new FormData();
+            formData.append("fileKey1", file, file.name);
+            return this.postFilesInner(formData, createLocalCopiesNow);
+        };
+        FileUploadService.prototype.postFiles = function (files, createLocalCopiesNow) {
+            if (createLocalCopiesNow === void 0) { createLocalCopiesNow = false; }
+            var formData = new FormData();
+            for (var i = 0; i < files.length; i++) {
+                var fileToUpload = files.item(i);
+                formData.append("fileKey" + i, fileToUpload, fileToUpload === null || fileToUpload === void 0 ? void 0 : fileToUpload.name);
+            }
+            return this.postFilesInner(formData, createLocalCopiesNow);
+        };
+        FileUploadService.prototype.postFilesInner = function (formData, createLocalCopiesNow) {
+            if (createLocalCopiesNow === void 0) { createLocalCopiesNow = false; }
+            var endpoint = this.baseUrl + 'Api/Files/UploadFiles';
+            if (createLocalCopiesNow) {
+                endpoint += '/Now';
+            }
+            return this._httpClient
+                .post(endpoint, formData);
+        };
+        return FileUploadService;
+    }());
+    FileUploadService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: FileUploadService, deps: [{ token: i1__namespace.HttpClient }, { token: 'BASE_URL' }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    FileUploadService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: FileUploadService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: FileUploadService, decorators: [{
+                type: i0.Injectable,
+                args: [{ providedIn: 'root' }]
+            }], ctorParameters: function () {
+            return [{ type: i1__namespace.HttpClient }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: ['BASE_URL']
+                        }] }];
+        } });
+
+    var UploadFilesBtnComponent = /** @class */ (function () {
+        function UploadFilesBtnComponent(_fileUploadService) {
+            this._fileUploadService = _fileUploadService;
+            this.extAccepts = "*/*";
+            this.isMultiple = true;
+            this.btnText = "Загрузить файлы";
+            this.createLocalCopiesNow = false;
+            this.hidden = false;
+            this.postFilesStarted = new i0.EventEmitter();
+            this.onFilesUploaded = new i0.EventEmitter();
+        }
+        UploadFilesBtnComponent.prototype.handleFileInput = function (files) {
+            var _this = this;
+            this.postFilesStarted.emit({
+                filesCount: files.length,
+                createLocalCopiesNow: this.createLocalCopiesNow
+            });
+            this._fileUploadService.postFiles(files, this.createLocalCopiesNow).subscribe(function (data) {
+                _this.onFilesUploaded.emit(data);
+            });
+        };
+        UploadFilesBtnComponent.prototype.clickFileInput = function () {
+            this.fileInput.nativeElement.click();
+        };
+        UploadFilesBtnComponent.prototype.ngOnInit = function () {
+        };
+        return UploadFilesBtnComponent;
+    }());
+    UploadFilesBtnComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: UploadFilesBtnComponent, deps: [{ token: FileUploadService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    UploadFilesBtnComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: UploadFilesBtnComponent, selector: "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__namespace, 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: [""], components: [{ type: i2__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: UploadFilesBtnComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'app-upload-files-btn',
+                        templateUrl: './upload-files-btn.component.html',
+                        styleUrls: ['./upload-files-btn.component.css']
+                    }]
+            }], ctorParameters: function () { return [{ type: FileUploadService }]; }, propDecorators: { fileInput: [{
+                    type: i0.ViewChild,
+                    args: ['filesInput']
+                }], extAccepts: [{
+                    type: i0.Input
+                }], isMultiple: [{
+                    type: i0.Input
+                }], btnText: [{
+                    type: i0.Input
+                }], createLocalCopiesNow: [{
+                    type: i0.Input
+                }], hidden: [{
+                    type: i0.Input
+                }], postFilesStarted: [{
+                    type: i0.Output
+                }], onFilesUploaded: [{
+                    type: i0.Output
+                }] } });
+
+    var AddFilesBtnComponent = /** @class */ (function () {
+        function AddFilesBtnComponent() {
+            this.postFilesStarted = new i0.EventEmitter();
+            this.fileIds = [];
+            this.filesTagsReady = new i0.EventEmitter();
+        }
+        AddFilesBtnComponent.prototype.postFilesStartedEventHandler = function (data) {
+            this.postFilesStarted.emit(data);
+        };
+        AddFilesBtnComponent.prototype.filesUploadedHandler = function (data) {
+            var _a;
+            this.fileIds = data.responseObject;
+            var fileTags = [];
+            for (var i = 0; i < this.fileIds.length; i++) {
+                var fileTag = {
+                    presentOrEdit: true,
+                    tagDescription: {
+                        tag: FileImageTagDataConsts.TagName,
+                        displayValue: "Изображение"
+                    },
+                    attributes: (_a = {},
+                        _a[FileImageTagDataConsts.FileIdAttrName] = this.fileIds[i],
+                        _a),
+                    innerHtml: ""
+                };
+                fileTags.push(fileTag);
+            }
+            this.filesTagsReady.emit(fileTags);
+        };
+        AddFilesBtnComponent.prototype.handleClick = function () {
+            this.fakeBtn.clickFileInput();
+        };
+        AddFilesBtnComponent.prototype.ngOnInit = function () {
+        };
+        return AddFilesBtnComponent;
+    }());
+    AddFilesBtnComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: AddFilesBtnComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AddFilesBtnComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: AddFilesBtnComponent, selector: "croco-add-files-btn", outputs: { postFilesStarted: "postFilesStarted", filesTagsReady: "filesTagsReady" }, viewQueries: [{ propertyName: "fakeBtn", first: true, predicate: ["fakeBtn"], descendants: true }], ngImport: i0__namespace, template: "<div [hidden]=\"true\">\n    <app-upload-files-btn #fakeBtn \n        (onFilesUploaded)=\"filesUploadedHandler($event)\" \n        [btnText]=\"'\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F'\"\n        [createLocalCopiesNow]=\"true\"\n        (postFilesStarted)=\"postFilesStartedEventHandler($event)\" \n        [extAccepts]=\"'image/*'\"></app-upload-files-btn>\n</div>\n\n<div>\n    <button class=\"w-100\" \n        (click)=\"handleClick()\"\n        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: [""], components: [{ type: UploadFilesBtnComponent, selector: "app-upload-files-btn", inputs: ["extAccepts", "isMultiple", "btnText", "createLocalCopiesNow", "hidden"], outputs: ["postFilesStarted", "onFilesUploaded"] }, { type: i2__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: AddFilesBtnComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'croco-add-files-btn',
+                        templateUrl: './add-files-btn.component.html',
+                        styleUrls: ['./add-files-btn.component.css']
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { postFilesStarted: [{
+                    type: i0.Output
+                }], fakeBtn: [{
+                    type: i0.ViewChild,
+                    args: ["fakeBtn"]
+                }], filesTagsReady: [{
+                    type: i0.Output
+                }] } });
+
+    var ExternalVideoTagDataConsts = /** @class */ (function () {
+        function ExternalVideoTagDataConsts() {
+        }
+        return ExternalVideoTagDataConsts;
+    }());
+    ExternalVideoTagDataConsts.TagName = "external-video";
+    ExternalVideoTagDataConsts.VideoTypeAttrName = "type";
+    ExternalVideoTagDataConsts.LinkAttrName = "link";
+    var ExternalVideoSupportedTypes = /** @class */ (function () {
+        function ExternalVideoSupportedTypes() {
+        }
+        return ExternalVideoSupportedTypes;
+    }());
+    ExternalVideoSupportedTypes.Youtube = "youtube";
+    var VideoMethods = /** @class */ (function () {
+        function VideoMethods() {
+        }
+        VideoMethods.ExtractExternalVideoTag = function (elem) {
+            return {
+                type: ExternalVideoTagDataConsts.TagName,
+                data: {
+                    type: elem.getAttribute(ExternalVideoTagDataConsts.VideoTypeAttrName),
+                    link: elem.getAttribute(ExternalVideoTagDataConsts.LinkAttrName)
+                }
+            };
+        };
+        return VideoMethods;
+    }());
+
+    var XmlTagExternalVideoComponent = /** @class */ (function () {
+        function XmlTagExternalVideoComponent(_domSanitizer) {
+            this._domSanitizer = _domSanitizer;
+        }
+        XmlTagExternalVideoComponent.prototype.getYouTubeId = function (youtubeLink) {
+            //https://www.youtube.com/watch?v=l3KfbfkxJOU
+            if (youtubeLink.includes("watch?v=")) {
+                var url = new URL(youtubeLink);
+                return url.searchParams.get("v");
+            }
+            //https://youtu.be/jzBneaWSswY
+            var bits = youtubeLink.split('/');
+            return bits[bits.length - 1];
+        };
+        XmlTagExternalVideoComponent.prototype.getWidgetLink = function (youtubeLink) {
+            var id = this.getYouTubeId(youtubeLink);
+            var result = "https://www.youtube.com/embed/" + id + "?controls=0";
+            this.widgetUrl = this._domSanitizer.bypassSecurityTrustResourceUrl(result);
+            return result;
+        };
+        XmlTagExternalVideoComponent.prototype.ngOnInit = function () {
+            if (this.data != null) {
+                this.tagData = this.data.data;
+            }
+            var youtubeWidgetLink = this.getWidgetLink(this.tagData.link);
+            this.widgetUrl = this._domSanitizer.bypassSecurityTrustResourceUrl(youtubeWidgetLink);
+        };
+        return XmlTagExternalVideoComponent;
+    }());
+    XmlTagExternalVideoComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: XmlTagExternalVideoComponent, deps: [{ token: i1__namespace$1.DomSanitizer }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    XmlTagExternalVideoComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: { data: "data", tagData: "tagData" }, ngImport: i0__namespace, template: "<div class=\"d-flex justify-content-center\">\n    <div *ngIf=\"widgetUrl\" class=\"y-video\">\n        <iframe width=\"100%\" height=\"100%\" [src]=\"widgetUrl\"\n            title=\"YouTube video player\" frameborder=\"0\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n            allowfullscreen></iframe>\n    </div>\n</div>", styles: ["@media only screen and (min-width: 769px){.y-video{width:640px;height:360px;margin:0 auto}}@media only screen and (max-width: 768px){.y-video{width:560px;height:315px;margin:0 auto}}\n"], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: XmlTagExternalVideoComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'croco-html-xml-tag-external-video',
+                        templateUrl: './xml-tag-external-video.component.html',
+                        styleUrls: ['./xml-tag-external-video.component.css']
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$1.DomSanitizer }]; }, propDecorators: { data: [{
+                    type: i0.Input
+                }], tagData: [{
+                    type: i0.Input
+                }] } });
+
+    var ExternalVideoBlockComponent = /** @class */ (function () {
+        function ExternalVideoBlockComponent() {
+            this.onTagUpdated = new i0.EventEmitter();
+            this.myForm = new i5.FormGroup({
+                youtubeLink: new i5.FormControl()
+            });
+            this.defaultLink = "https://youtu.be/jzBneaWSswY";
+            this.data = {
+                youtubeLink: this.defaultLink
+            };
+            this.tagData = {
+                link: this.defaultLink,
+                type: ExternalVideoSupportedTypes.Youtube
+            };
+        }
+        ExternalVideoBlockComponent.prototype.linkChanged = function () {
+            this.tagData.link = this.data.youtubeLink;
+            this.tag.attributes = this.tagData;
+        };
+        ExternalVideoBlockComponent.prototype.ngOnInit = function () {
+            this.linkChanged();
+            this.tagData = this.tag.attributes;
+            this.data.youtubeLink = this.tagData.link;
+        };
+        return ExternalVideoBlockComponent;
+    }());
+    ExternalVideoBlockComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: ExternalVideoBlockComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ExternalVideoBlockComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: ExternalVideoBlockComponent, selector: "croco-html-external-video-block", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0__namespace, template: "<div *ngIf=\"tag.presentOrEdit\">\n    \n    <div>\n        \u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 YouTube: {{data.youtubeLink}}\n    </div>\n\n    <div style=\"height: 10px;\"></div>\n\n    <croco-html-xml-tag-external-video [tagData]=\"tagData\">\n    </croco-html-xml-tag-external-video>\n</div>\n\n<div *ngIf=\"!tag.presentOrEdit\">\n    <div>\n        <form [formGroup]=\"myForm\">\n            <mat-form-field class=\"w-100\">\n                <input matInput placeholder=\"\u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 YouTube\"\n                    new-autocomplete=\"off\"\n                    autocomplete=\"off\"\n                    formControlName=\"youtubeLink\"\n                    [(ngModel)]=\"data.youtubeLink\"\n                    (ngModelChange)=\"linkChanged()\">\n            </mat-form-field>\n        </form>\n    </div>\n</div>\n\n", styles: [""], components: [{ type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }, { type: i5__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5__namespace$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i5__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: ExternalVideoBlockComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'croco-html-external-video-block',
+                        templateUrl: './external-video-block.component.html',
+                        styleUrls: ['./external-video-block.component.css']
+                    }]
+            }], propDecorators: { tag: [{
+                    type: i0.Input
+                }], onTagUpdated: [{
+                    type: i0.Output
+                }] } });
+
+    var HtmlRawEditorComponent = /** @class */ (function () {
+        function HtmlRawEditorComponent() {
+            this.onTagUpdated = new i0.EventEmitter();
+        }
+        HtmlRawEditorComponent.prototype.ngOnInit = function () {
+        };
+        return HtmlRawEditorComponent;
+    }());
+    HtmlRawEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: HtmlRawEditorComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    HtmlRawEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: HtmlRawEditorComponent, selector: "croco-html-html-raw-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0__namespace, template: "<div *ngIf=\"tag.presentOrEdit\">\n    <div [innerHTML]=\"tag.innerHtml\"></div>\n</div>\n\n<div *ngIf=\"!tag.presentOrEdit\">\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", styles: [""], components: [{ type: i5__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4__namespace.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i5__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: HtmlRawEditorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'croco-html-html-raw-editor',
+                        templateUrl: './html-raw-editor.component.html',
+                        styleUrls: ['./html-raw-editor.component.css']
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { tag: [{
+                    type: i0.Input
+                }], onTagUpdated: [{
+                    type: i0.Output
+                }] } });
+
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b)
+                if (Object.prototype.hasOwnProperty.call(b, p))
+                    d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+    var __assign = function () {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s)
+                    if (Object.prototype.hasOwnProperty.call(s, p))
+                        t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+                t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+    function __decorate(decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+            r = Reflect.decorate(decorators, target, key, desc);
+        else
+            for (var i = decorators.length - 1; i >= 0; i--)
+                if (d = decorators[i])
+                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+    function __param(paramIndex, decorator) {
+        return function (target, key) { decorator(target, key, paramIndex); };
+    }
+    function __metadata(metadataKey, metadataValue) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+            return Reflect.metadata(metadataKey, metadataValue);
+    }
+    function __awaiter(thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try {
+                step(generator.next(value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function rejected(value) { try {
+                step(generator["throw"](value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+    function __generator(thisArg, body) {
+        var _ = { label: 0, sent: function () { if (t[0] & 1)
+                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
+        function verb(n) { return function (v) { return step([n, v]); }; }
+        function step(op) {
+            if (f)
+                throw new TypeError("Generator is already executing.");
+            while (_)
+                try {
+                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
+                        return t;
+                    if (y = 0, t)
+                        op = [op[0] & 2, t.value];
+                    switch (op[0]) {
+                        case 0:
+                        case 1:
+                            t = op;
+                            break;
+                        case 4:
+                            _.label++;
+                            return { value: op[1], done: false };
+                        case 5:
+                            _.label++;
+                            y = op[1];
+                            op = [0];
+                            continue;
+                        case 7:
+                            op = _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                        default:
+                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                                _ = 0;
+                                continue;
+                            }
+                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
+                                _.label = op[1];
+                                break;
+                            }
+                            if (op[0] === 6 && _.label < t[1]) {
+                                _.label = t[1];
+                                t = op;
+                                break;
+                            }
+                            if (t && _.label < t[2]) {
+                                _.label = t[2];
+                                _.ops.push(op);
+                                break;
+                            }
+                            if (t[2])
+                                _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                    }
+                    op = body.call(thisArg, _);
+                }
+                catch (e) {
+                    op = [6, e];
+                    y = 0;
+                }
+                finally {
+                    f = t = 0;
+                }
+            if (op[0] & 5)
+                throw op[1];
+            return { value: op[0] ? op[1] : void 0, done: true };
+        }
+    }
+    var __createBinding = Object.create ? (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+            desc = { enumerable: true, get: function () { return m[k]; } };
+        }
+        Object.defineProperty(o, k2, desc);
+    }) : (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        o[k2] = m[k];
+    });
+    function __exportStar(m, o) {
+        for (var p in m)
+            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
+                __createBinding(o, m, p);
+    }
+    function __values(o) {
+        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+        if (m)
+            return m.call(o);
+        if (o && typeof o.length === "number")
+            return {
+                next: function () {
+                    if (o && i >= o.length)
+                        o = void 0;
+                    return { value: o && o[i++], done: !o };
+                }
+            };
+        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+    }
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m)
+            return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
+                ar.push(r.value);
+        }
+        catch (error) {
+            e = { error: error };
+        }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"]))
+                    m.call(i);
+            }
+            finally {
+                if (e)
+                    throw e.error;
+            }
+        }
+        return ar;
+    }
+    /** @deprecated */
+    function __spread() {
+        for (var ar = [], i = 0; i < arguments.length; i++)
+            ar = ar.concat(__read(arguments[i]));
+        return ar;
+    }
+    /** @deprecated */
+    function __spreadArrays() {
+        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
+            s += arguments[i].length;
+        for (var r = Array(s), k = 0, i = 0; i < il; i++)
+            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+                r[k] = a[j];
+        return r;
+    }
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2)
+            for (var i = 0, l = from.length, ar; i < l; i++) {
+                if (ar || !(i in from)) {
+                    if (!ar)
+                        ar = Array.prototype.slice.call(from, 0, i);
+                    ar[i] = from[i];
+                }
+            }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
+    function __await(v) {
+        return this instanceof __await ? (this.v = v, this) : new __await(v);
+    }
+    function __asyncGenerator(thisArg, _arguments, generator) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var g = generator.apply(thisArg, _arguments || []), i, q = [];
+        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
+        function verb(n) { if (g[n])
+            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+        function resume(n, v) { try {
+            step(g[n](v));
+        }
+        catch (e) {
+            settle(q[0][3], e);
+        } }
+        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
+        function fulfill(value) { resume("next", value); }
+        function reject(value) { resume("throw", value); }
+        function settle(f, v) { if (f(v), q.shift(), q.length)
+            resume(q[0][0], q[0][1]); }
+    }
+    function __asyncDelegator(o) {
+        var i, p;
+        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
+        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
+    }
+    function __asyncValues(o) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var m = o[Symbol.asyncIterator], i;
+        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
+    }
+    function __makeTemplateObject(cooked, raw) {
+        if (Object.defineProperty) {
+            Object.defineProperty(cooked, "raw", { value: raw });
+        }
+        else {
+            cooked.raw = raw;
+        }
+        return cooked;
+    }
+    ;
+    var __setModuleDefault = Object.create ? (function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+    }) : function (o, v) {
+        o["default"] = v;
+    };
+    function __importStar(mod) {
+        if (mod && mod.__esModule)
+            return mod;
+        var result = {};
+        if (mod != null)
+            for (var k in mod)
+                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
+                    __createBinding(result, mod, k);
+        __setModuleDefault(result, mod);
+        return result;
+    }
+    function __importDefault(mod) {
+        return (mod && mod.__esModule) ? mod : { default: mod };
+    }
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+    }
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m")
+            throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    }
+    function __classPrivateFieldIn(state, receiver) {
+        if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function"))
+            throw new TypeError("Cannot use 'in' operator on non-object");
+        return typeof state === "function" ? receiver === state : state.has(receiver);
+    }
+
+    var FilesQueryService = /** @class */ (function () {
+        function FilesQueryService(_httpClient, baseUrl) {
+            this._httpClient = _httpClient;
+            this._baseControllerUrl = baseUrl + 'Api/Files/';
+        }
+        FilesQueryService.prototype.getFilesWithRelations = function (model) {
+            return this._httpClient.post(this._baseControllerUrl + "GetFiles/WithRelations", model);
+        };
+        FilesQueryService.prototype.getFiles = function (model) {
+            return this._httpClient.post(this._baseControllerUrl + "GetFiles", model);
+        };
+        return FilesQueryService;
+    }());
+    FilesQueryService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: FilesQueryService, deps: [{ token: i1__namespace.HttpClient }, { token: 'BASE_URL' }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    FilesQueryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: FilesQueryService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: FilesQueryService, decorators: [{
+                type: i0.Injectable,
+                args: [{
+                        providedIn: 'root'
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: i1__namespace.HttpClient }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: ['BASE_URL']
+                        }] }];
+        } });
+
+    var FileIdSelectComponent = /** @class */ (function () {
+        function FileIdSelectComponent(fb, _fileService) {
+            this.fb = fb;
+            this._fileService = _fileService;
+            this.labelText = "Поиск файлов";
+            this.loading = false;
+            this.files = [];
+            this.onFileIdChanged = new i0.EventEmitter();
+            this.form = this.fb.group({
+                fileName: '',
+            });
+        }
+        FileIdSelectComponent.prototype.onModelChanged = function (fileId) {
+            this.onFileIdChanged.emit(fileId);
+        };
+        FileIdSelectComponent.prototype.getSrc = function (fileId) {
+            return ImageMethods.buildSmallUrl(fileId);
+        };
+        FileIdSelectComponent.prototype.ngOnInit = function () {
+            this.loadFiles();
+        };
+        FileIdSelectComponent.prototype.loadFiles = function () {
+            var _this = this;
+            this.loading = true;
+            this._fileService.getFiles({
+                count: 10,
+                offSet: 0,
+                fileName: null,
+                q: this.q
+            }).subscribe(function (data) {
+                _this.files = __spreadArray([], __read(data.list));
+                _this.loading = false;
+            });
+        };
+        FileIdSelectComponent.prototype.onSearchChanged = function (q) {
+            this.q = q.term;
+            this.loadFiles();
+        };
+        FileIdSelectComponent.prototype.ngOnChanges = function (changes) {
+            this.loadFiles();
+        };
+        return FileIdSelectComponent;
+    }());
+    FileIdSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: FileIdSelectComponent, deps: [{ token: i5__namespace$1.FormBuilder }, { token: FilesQueryService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    FileIdSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: FileIdSelectComponent, selector: "croco-html-file-id-select", inputs: { labelText: "labelText", fileId: "fileId" }, outputs: { fileId: "fileId", onFileIdChanged: "onFileIdChanged" }, usesOnChanges: true, ngImport: i0__namespace, template: "<form [formGroup]=\"form\">\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                   formControlName=\"fileName\">\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</form>\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: [""], components: [{ type: i3__namespace.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: i5__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i3__namespace.ɵf, selector: "[ng-option-tmp]" }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: FileIdSelectComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'croco-html-file-id-select',
+                        templateUrl: './file-id-select.component.html',
+                        styleUrls: ['./file-id-select.component.css']
+                    }]
+            }], ctorParameters: function () { return [{ type: i5__namespace$1.FormBuilder }, { type: FilesQueryService }]; }, propDecorators: { labelText: [{
+                    type: i0.Input
+                }], fileId: [{
+                    type: i0.Input
+                }, {
+                    type: i0.Output
+                }], onFileIdChanged: [{
+                    type: i0.Output
+                }] } });
+
+    var ImageEditorComponent = /** @class */ (function () {
+        function ImageEditorComponent() {
+            this.hasImageError = false;
+            this.searchOrEdit = "search";
+            this.myForm = new i5.FormGroup({
+                fileId: new i5.FormControl()
+            });
+            this.onTagUpdated = new i0.EventEmitter();
+        }
+        ImageEditorComponent.prototype.onErrorHandler = function () {
+            this.hasImageError = true;
+        };
+        ImageEditorComponent.prototype.getSrc = function () {
+            return ImageMethods.buildUrl(this.tag.attributes[FileImageTagDataConsts.FileIdAttrName]);
+        };
+        ImageEditorComponent.prototype.hasFileId = function () {
+            return this.tag.attributes.hasOwnProperty(FileImageTagDataConsts.FileIdAttrName) && !isNaN(this.tag.attributes[FileImageTagDataConsts.FileIdAttrName]);
+        };
+        ImageEditorComponent.prototype.onFileIdChanged = function (fileId) {
+            this.tag.attributes[FileImageTagDataConsts.FileIdAttrName] = fileId;
+            this.removeImageError();
+        };
+        ImageEditorComponent.prototype.removeImageError = function () {
+            this.hasImageError = false;
+        };
+        ImageEditorComponent.prototype.ngOnInit = function () {
+        };
+        return ImageEditorComponent;
+    }());
+    ImageEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: ImageEditorComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ImageEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: ImageEditorComponent, selector: "croco-html-image-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0__namespace, template: "<div>\n    <div style=\"height: 10px;\">\n    </div>\n    \n    <div *ngIf=\"hasImageError\" 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    <div *ngIf=\"hasFileId() && !hasImageError\">\n        <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc()\" (error)=\"onErrorHandler()\"/>\n    </div>\n\n    <div *ngIf=\"!hasFileId()\">\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</div>\n\n<div *ngIf=\"!tag.presentOrEdit\">\n    <div style=\"height: 10px;\"></div>\n\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    \n\n    <div style=\"height: 10px;\"></div>\n\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\n    <div [hidden]=\"searchOrEdit !== 'edit'\">\n        <form [formGroup]=\"myForm\">\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                    formControlName=\"fileId\" \n                    type=\"number\"\n                    [(ngModel)]=\"tag.attributes['file-id']\"\n                    (ngModelChange)=\"removeImageError()\">\n            </mat-form-field>\n        </form>\n    </div>\n</div>", styles: [".error-block{background-color:#f32323;color:#fff;text-align:center;border-radius:10px;padding:10px}\n"], components: [{ type: i1__namespace$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i2__namespace$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: FileIdSelectComponent, selector: "croco-html-file-id-select", inputs: ["labelText", "fileId"], outputs: ["fileId", "onFileIdChanged"] }, { type: i5__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i5__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5__namespace$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i5__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i5__namespace$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: ImageEditorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'croco-html-image-editor',
+                        templateUrl: './image-editor.component.html',
+                        styleUrls: ['./image-editor.component.css']
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { tag: [{
+                    type: i0.Input
+                }], onTagUpdated: [{
+                    type: i0.Output
+                }] } });
+
+    var AngularMaterialTableMethods = /** @class */ (function () {
+        function AngularMaterialTableMethods() {
+        }
+        AngularMaterialTableMethods.getAngularMaterialTableData = function (columns, rows) {
+            var data = [];
+            for (var rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+                var row = rows[rowIndex];
+                var elem = {};
+                for (var columnIndex = 0; columnIndex < columns.length; columnIndex++) {
+                    var column = columns[columnIndex];
+                    elem[column] = row.columns[columnIndex].data.text;
+                }
+                data.push(elem);
+            }
+            return {
+                displayedColumns: columns,
+                data: data,
+            };
+        };
+        AngularMaterialTableMethods.checkHeaders = function (tableData) {
+            if (tableData.header === null) {
+                return {
+                    isSucceeded: false,
+                    message: "Необходимо указать заголовок таблицы"
+                };
+            }
+            var columns = tableData.header.columns;
+            var uniqueDislayedColumns = columns.filter(function (v, i, a) { return a.indexOf(v) === i; });
+            if (uniqueDislayedColumns.length !== columns.length) {
+                return {
+                    isSucceeded: false,
+                    message: "Ошибка при обработке разметки таблицы. Обнаружены дубликаты заголовков."
+                };
+            }
+            return {
+                isSucceeded: true,
+                message: "Ok"
+            };
+        };
+        AngularMaterialTableMethods.checkAngularMaterialTableData = function (tableData, checkHeaders) {
+            if (checkHeaders === void 0) { checkHeaders = true; }
+            if (checkHeaders) {
+                var checkHeadersResult = this.checkHeaders(tableData);
+                if (!checkHeadersResult.isSucceeded) {
+                    return checkHeadersResult;
+                }
+            }
+            var rows = tableData.rows;
+            var columns = tableData.header.columns;
+            for (var i = 0; i < rows.length; i++) {
+                var row = rows[i];
+                if (row.columns.length !== columns.length) {
+                    return {
+                        isSucceeded: false,
+                        message: "\u041E\u0448\u0438\u0431\u043A\u0430 \u043F\u0440\u0438 \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0435 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0438 \u0442\u0430\u0431\u043B\u0438\u0446\u044B. "
+                            + "\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u043A\u043E\u043B\u043E\u043D\u043E\u043A \u0432 \u043A\u0430\u0436\u0434\u043E\u0439 \u0441\u0442\u0440\u043E\u043A\u0435 \u0442\u0430\u0431\u043B\u0438\u0446\u044B \u0434\u043E\u043B\u0436\u043D\u043E \u0441\u043E\u043E\u0442\u0432\u0435\u0441\u0442\u0432\u043E\u0432\u0430\u0442\u044C \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u043A\u043E\u043B\u043E\u043D\u043E\u043A \u0443\u043A\u0430\u0437\u0430\u043D\u043D\u044B\u0445 \u0432 \u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043A\u0435. "
+                            + ("\u0412 \u0441\u0442\u0440\u043E\u043A\u0435 \u0442\u0430\u0431\u043B\u0438\u0446\u044B \u2116" + (i + 1) + " \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u043A\u043E\u043B\u043E\u043D\u043E\u043A = " + row.columns.length + ", \u0430 \u0434\u043E\u043B\u0436\u043D\u043E \u0431\u044B\u0442\u044C " + columns.length + ".")
+                    };
+                }
+            }
+            return {
+                isSucceeded: true,
+                message: "Ok"
+            };
+        };
+        return AngularMaterialTableMethods;
+    }());
+
+    var TextTag = "text";
+    var TextSimpleMethods = /** @class */ (function () {
+        function TextSimpleMethods() {
+        }
+        TextSimpleMethods.ExtractTextTag = function (elem) {
+            var _a;
+            var hAlignValue = (_a = elem.getAttribute("h-align")) !== null && _a !== void 0 ? _a : "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"
+                }
+            };
+            var result = {
+                type: TextTag,
+                data: data
+            };
+            if (result.data.text === '\n') {
+                result.data.text = '';
+            }
+            if (result.data.html === '\n') {
+                result.data.html = '';
+            }
+            var alignmentVals = ["left", "right", "center"];
+            if (alignmentVals.indexOf(hAlignValue) < 0) {
+                result.data.validationResult = {
+                    isSucceeded: false,
+                    message: "\u041D\u0435\u0434\u043E\u043F\u0443\u0441\u0442\u0438\u043C\u043E\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 h-align. \u0414\u043E\u043F\u0443\u0441\u0442\u0438\u043C\u044B\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F: " + alignmentVals.join(', ') + ". "
+                        + 'Данный тег можно не указывать, по-умолчанию будет применено выравнивание слева.'
+                };
+            }
+            var html = result.data.html;
+            var htmlValidation = this.ValidateTextHtml(html);
+            if (!htmlValidation.isSucceeded) {
+                result.data.validationResult = htmlValidation;
+            }
+            return result;
+        };
+        TextSimpleMethods.ValidateTextHtml = function (html) {
+            var p = document.createElement("p");
+            p.innerHTML = html;
+            for (var i = 0; i < p.children.length; i++) {
+                var element = p.children.item(i);
+                var validationResult = this.ValidateTag(element);
+                if (!validationResult.isSucceeded) {
+                    return validationResult;
+                }
+            }
+            return {
+                isSucceeded: true,
+                message: "Ok"
+            };
+        };
+        TextSimpleMethods.ValidateTag = function (element) {
+            var lowerTag = element.tagName.toLowerCase();
+            if (!this.supportedTags.includes(lowerTag)) {
+                return {
+                    isSucceeded: false,
+                    message: "\u0422\u0435\u0433 <" + lowerTag + "> \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F \u0432\u043D\u0443\u0442\u0440\u0438 \u0442\u0435\u0433\u0430 <text>"
+                };
+            }
+            for (var i = 0; i < element.children.length; i++) {
+                var nElement = element.children.item(i);
+                var innerValidationResult = this.ValidateTag(nElement);
+                if (!innerValidationResult.isSucceeded) {
+                    return innerValidationResult;
+                }
+            }
+            return {
+                isSucceeded: true,
+                message: "Ok"
+            };
+        };
+        return TextSimpleMethods;
+    }());
+    TextSimpleMethods.supportedTags = ["sup", "sub", "strong", "b", "i"];
+
+    var BootstrapTableMethods = /** @class */ (function () {
+        function BootstrapTableMethods() {
+        }
+        BootstrapTableMethods.BuildTable = function (data) {
+            var result = "<table class=\"table table-bordered\">";
+            result += this.BuildHeader(data.header);
+            result += this.BuildBody(data.rows);
+            result += "</table>";
+            return result;
+        };
+        BootstrapTableMethods.BuildHeader = function (data) {
+            if (data === null) {
+                return "";
+            }
+            var result = "<thead>";
+            result += "<tr>";
+            for (var index = 0; index < data.columns.length; index++) {
+                result += "<th>" + data.columns[index] + "</th>";
+            }
+            result += "</tr>";
+            result += "</thead>";
+            return result;
+        };
+        BootstrapTableMethods.BuildBody = function (rows) {
+            var result = "<tbody>";
+            for (var i = 0; i < rows.length; i++) {
+                var row = rows[i];
+                result += "<tr>";
+                for (var j = 0; j < row.columns.length; j++) {
+                    var col = row.columns[j];
+                    result += "<td class=\"align-middle\">" + this.BuildInnerTags(col.data.children) + "</td>";
+                }
+                result += "</tr>";
+            }
+            result += "</tbody>";
+            return result;
+        };
+        BootstrapTableMethods.BuildInnerTags = function (tags) {
+            var result = "";
+            for (var i = 0; i < tags.length; i++) {
+                result += this.BuildInnerTag(tags[i]);
+            }
+            return result;
+        };
+        BootstrapTableMethods.BuildInnerTag = function (data) {
+            var _a;
+            if (data.type === FileImageTagDataConsts.TagName) {
+                var fileImageTag = data;
+                return "<img src=" + fileImageTag.data.src + " class=\"mx-auto d-block img-fluid\" />";
+            }
+            else if (data.type === TextTag) {
+                var simpleTextTag = data;
+                var map = (_a = {},
+                    _a["left"] = "text-start",
+                    _a["center"] = "text-center",
+                    _a["right"] = "text-end",
+                    _a);
+                if (!simpleTextTag.data.validationResult.isSucceeded) {
+                    return "<span>\u041E\u0448\u0438\u0431\u043A\u0430 \u0432 \u0442\u0435\u043A\u0441\u0442\u0435 " + simpleTextTag.data.validationResult.message + "</span>";
+                }
+                return "<div class=\"" + map[simpleTextTag.data.horizontalAlignment] + "\"><span>" + simpleTextTag.data.html + "</span></div>";
+            }
+            else {
+                return "<p>\u0422\u0435\u0433 " + data.type + " \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</p>";
+            }
+        };
+        return BootstrapTableMethods;
+    }());
+
+    var TableTypes = /** @class */ (function () {
+        function TableTypes() {
+        }
+        return TableTypes;
+    }());
+    TableTypes.TableRowColumnData = "table-row-column-data";
+    TableTypes.Table = "table";
+    TableTypes.TableRowColumn = "table-row-column";
+    var TableMethods = /** @class */ (function () {
+        function TableMethods() {
+        }
+        TableMethods.getTableFromHtmlTag = function (tableTag) {
+            var tableData = {
+                header: TableMethods.getHeader(tableTag),
+                rows: TableMethods.getTableRows(tableTag)
+            };
+            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 Object.assign(Object.assign({}, result), { angularMaterialTableDataCheck: angularMaterialTableDataCheck });
+            }
+            return Object.assign(Object.assign({}, result), { angularMaterialTableDataCheck: angularMaterialTableDataCheck, html: tableTag.outerHTML, angularMaterialTableData: AngularMaterialTableMethods.getAngularMaterialTableData(tableData.header.columns, tableData.rows) });
+        };
+        TableMethods.checkTable = function (tableData) {
+            var rows = tableData.rows;
+            var prevRowCount = -1;
+            for (var i = 0; i < rows.length; i++) {
+                var row = rows[i];
+                if (row.columns.length !== prevRowCount && prevRowCount != -1) {
+                    return {
+                        isSucceeded: false,
+                        message: "\u041E\u0448\u0438\u0431\u043A\u0430 \u043F\u0440\u0438 \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0435 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0438 \u0442\u0430\u0431\u043B\u0438\u0446\u044B. "
+                            + "\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u043A\u043E\u043B\u043E\u043D\u043E\u043A \u0432 \u043A\u0430\u0436\u0434\u043E\u0439 \u0441\u0442\u0440\u043E\u043A\u0435 \u0442\u0430\u0431\u043B\u0438\u0446\u044B \u0434\u043E\u043B\u0436\u043D\u043E \u0441\u043E\u043E\u0442\u0432\u0435\u0441\u0442\u0432\u043E\u0432\u0430\u0442\u044C \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0443. "
+                            + ("\u0412 \u0441\u0442\u0440\u043E\u043A\u0435 \u0442\u0430\u0431\u043B\u0438\u0446\u044B \u2116" + (i + 1) + " \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u043A\u043E\u043B\u043E\u043D\u043E\u043A = " + row.columns.length + ", \u0430 \u0432 \u0441\u0442\u0440\u043E\u043A\u0435 \u0432\u044B\u0448\u0435 " + prevRowCount + ".")
+                    };
+                }
+                prevRowCount = row.columns.length;
+            }
+            return {
+                isSucceeded: true,
+                message: "Ok"
+            };
+        };
+        TableMethods.getHeader = function (tableTag) {
+            var header = tableTag.tHead;
+            if (header === null) {
+                return null;
+            }
+            var tr = header.children.item(0);
+            var headerColumns = [];
+            for (var j = 0; j < tr.children.length; j++) {
+                var jElement = tr.children.item(j);
+                headerColumns.push(jElement.innerHTML);
+            }
+            return {
+                type: "table-header",
+                columns: headerColumns
+            };
+        };
+        TableMethods.getTableRows = function (tableTag) {
+            var tBody = tableTag.tBodies.item(0);
+            var rows = [];
+            for (var i = 0; i < tBody.children.length; i++) {
+                var iElement = tBody.children.item(i);
+                var rowColumns = [];
+                for (var j = 0; j < iElement.children.length; j++) {
+                    var jElement = iElement.children.item(j);
+                    var children = HtmlExtractionMethods.transformHtmlElementToBlocks(jElement);
+                    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: children
+                        }
+                    };
+                    rowColumns.push(result);
+                }
+                rows.push({
+                    type: TableTypes.TableRowColumn,
+                    columns: rowColumns
+                });
+            }
+            return rows;
+        };
+        return TableMethods;
+    }());
+
+    var TextMethods = /** @class */ (function () {
+        function TextMethods() {
+        }
+        TextMethods.ExtractRichTextData = function (elem) {
+            var children = [];
+            for (var i = 0; i < elem.children.length; i++) {
+                var 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: children
+                }
+            };
+        };
+        return TextMethods;
+    }());
+    TextMethods.textTags = ["text", "h1", "h2", "h3", "h4", "h5", "h6"];
+
+    var _a;
+    var HtmlExtractionMethods = /** @class */ (function () {
+        function HtmlExtractionMethods() {
+        }
+        HtmlExtractionMethods.ExtractHeaderTag = function (elem, tagName) {
+            var data = TextSimpleMethods.ExtractTextTag(elem);
+            data.type = tagName;
+            return data;
+        };
+        HtmlExtractionMethods.transformHtmlElementToBlocks = function (element) {
+            var data = [];
+            for (var 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);
+                    data.push(result);
+                }
+            }
+            return data;
+        };
+        HtmlExtractionMethods.transformHtmlStringToBlocks = function (value) {
+            if (value === undefined) {
+                return [];
+            }
+            value = value
+                .replace('\n', '')
+                .replace('\t', '');
+            var div = document.createElement("div");
+            div.innerHTML = value;
+            return this.transformHtmlElementToBlocks(div);
+        };
+        return HtmlExtractionMethods;
+    }());
+    HtmlExtractionMethods.Extractors = (_a = {},
+        _a["TEXT"] = function (elem) { return TextSimpleMethods.ExtractTextTag(elem); },
+        _a["FILE-IMAGE"] = function (elem) { return ImageMethods.ExtractImage(elem); },
+        _a["TABLE"] = function (elem) { return TableMethods.getTableFromHtmlTag(elem); },
+        _a["RICH-TEXT"] = function (elem) { return TextMethods.ExtractRichTextData(elem); },
+        _a["HTML-RAW"] = function (elem) { return ({
+            type: "html-raw",
+            data: {
+                innerHTML: elem.innerHTML
+            }
+        }); },
+        _a["H1"] = function (elem) { return HtmlExtractionMethods.ExtractHeaderTag(elem, "h1"); },
+        _a["H2"] = function (elem) { return HtmlExtractionMethods.ExtractHeaderTag(elem, "h2"); },
+        _a["H3"] = function (elem) { return HtmlExtractionMethods.ExtractHeaderTag(elem, "h3"); },
+        _a["H4"] = function (elem) { return HtmlExtractionMethods.ExtractHeaderTag(elem, "h4"); },
+        _a["H5"] = function (elem) { return HtmlExtractionMethods.ExtractHeaderTag(elem, "h5"); },
+        _a["H6"] = function (elem) { return HtmlExtractionMethods.ExtractHeaderTag(elem, "h6"); },
+        _a[ExternalVideoTagDataConsts.TagName.toUpperCase()] = function (elem) { return VideoMethods.ExtractExternalVideoTag(elem); },
+        _a);
+
+    var HtmlRawTagDataConsts = /** @class */ (function () {
+        function HtmlRawTagDataConsts() {
+        }
+        return HtmlRawTagDataConsts;
+    }());
+    HtmlRawTagDataConsts.TagName = "html-raw";
+
+    var BodyTagsExtensions = /** @class */ (function () {
+        function BodyTagsExtensions() {
+        }
+        BodyTagsExtensions.getDescription = function (tagName) {
+            var _a;
+            var descriptions = (_a = {
+                    "text": "Текст",
+                    "h1": "Заголовок 1 уровня",
+                    "h2": "Заголовок 2 уровня",
+                    "h3": "Заголовок 3 уровня",
+                    "h4": "Заголовок 4 уровня",
+                    "h5": "Заголовок 5 уровня",
+                    "h6": "Заголовок 6 уровня"
+                },
+                _a[FileImageTagDataConsts.TagName] = "Изображение",
+                _a[ExternalVideoTagDataConsts.TagName] = "Внешнее видео YouTube",
+                _a[HtmlRawTagDataConsts.TagName] = "Html разметка",
+                _a);
+            return descriptions[tagName];
+        };
+        BodyTagsExtensions.toHtml = function (bodyTags) {
+            var htmls = bodyTags.map(function (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);
+            });
+            var result = "";
+            for (var index = 0; index < htmls.length; index++) {
+                var element = htmls[index];
+                result += element;
+            }
+            return result;
+        };
+        BodyTagsExtensions.imageTagToHtml = function (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 + ">";
+        };
+        BodyTagsExtensions.getBodyTags = function (html) {
+            var result = HtmlExtractionMethods.transformHtmlStringToBlocks(html);
+            return result.map(function (x) { return BodyTagsExtensions.toBodyTag(x); });
+        };
+        BodyTagsExtensions.sanitizeInnerHtml = function (html) {
+            return html.trim().replace('\n\t', '');
+        };
+        BodyTagsExtensions.toBodyTag = function (data) {
+            if (TextMethods.textTags.includes(data.type)) {
+                var 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) {
+                var fileData = data.data;
+                var atts = {};
+                if (fileData.fileId) {
+                    atts[FileImageTagDataConsts.FileIdAttrName] = fileData.fileId;
+                }
+                return {
+                    presentOrEdit: true,
+                    tagDescription: {
+                        tag: FileImageTagDataConsts.TagName,
+                        displayValue: BodyTagsExtensions.getDescription(data.type)
+                    },
+                    attributes: atts,
+                    innerHtml: ""
+                };
+            }
+            if (data.type === ExternalVideoTagDataConsts.TagName) {
+                var 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)
+            };
+        };
+        return BodyTagsExtensions;
+    }());
+
+    var XmlExtensions = /** @class */ (function () {
+        function XmlExtensions() {
+        }
+        XmlExtensions.formatXml = function (xml, tab) {
+            if (tab === void 0) { 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);
+        };
+        XmlExtensions.tagsToLower = function (xml) {
+            xml = this.replaceTagToLower(xml, "Body");
+            xml = this.replaceTagToLower(xml, "Image");
+            xml = this.replaceTagToLower(xml, "Text");
+            return xml;
+        };
+        XmlExtensions.replaceTagToLower = function (xml, tag) {
+            return xml
+                .replace(new RegExp("<" + tag, 'g'), "<" + tag.toLowerCase())
+                .replace(new RegExp("</" + tag + ">", 'g'), "</" + tag.toLowerCase() + ">");
+        };
+        return XmlExtensions;
+    }());
+
+    var TextEditorComponent = /** @class */ (function () {
+        function TextEditorComponent() {
+            this.myForm = new i5.FormGroup({
+                "innerHtml": new i5.FormControl()
+            });
+            this.onTagUpdated = new i0.EventEmitter();
+        }
+        TextEditorComponent.prototype.ngOnInit = function () {
+        };
+        TextEditorComponent.prototype.getInnerHtml = function () {
+            return "<" + this.tag.tagDescription.tag + ">" + this.tag.innerHtml + "<" + this.tag.tagDescription.tag + "/>";
+        };
+        return TextEditorComponent;
+    }());
+    TextEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: TextEditorComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TextEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: TextEditorComponent, selector: "croco-html-text-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0__namespace, template: "<div *ngIf=\"tag.presentOrEdit\">\n    <div style=\"height: 10px;\">\n    </div>\n\n    <div style=\"text-align: left;\" *ngIf=\"tag.attributes['h-align'] === 'left'\" [innerHtml]=\"getInnerHtml()\">\n    </div>\n    <div style=\"text-align: right;\" *ngIf=\"tag.attributes['h-align'] === 'right'\" [innerHtml]=\"getInnerHtml()\">\n    </div>\n    <div style=\"text-align: center;\" *ngIf=\"tag.attributes['h-align'] === 'center'\" [innerHtml]=\"getInnerHtml()\">\n    </div>\n</div>\n\n<div *ngIf=\"!tag.presentOrEdit\">\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\n    <div style=\"height: 10px;\">\n    </div>\n    <form [formGroup]=\"myForm\">\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                formControlName=\"innerHtml\"\n                [(ngModel)]=\"tag.innerHtml\"></textarea>\n        </mat-form-field>\n    </form>\n</div>", styles: [""], components: [{ type: i1__namespace$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i2__namespace$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i5__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5__namespace$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4__namespace.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i5__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: TextEditorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'croco-html-text-editor',
+                        templateUrl: './text-editor.component.html',
+                        styleUrls: ['./text-editor.component.css']
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { tag: [{
+                    type: i0.Input
+                }], onTagUpdated: [{
+                    type: i0.Output
+                }] } });
+
+    var MainEditorBlockComponent = /** @class */ (function () {
+        function MainEditorBlockComponent() {
+            this.textTags = TextMethods.textTags;
+            this.onTagSaved = new i0.EventEmitter();
+            this.onTagRemoved = new i0.EventEmitter();
+        }
+        MainEditorBlockComponent.prototype.tagUpdatedHandler = function (tag) {
+        };
+        MainEditorBlockComponent.prototype.save = function () {
+            this.tag.presentOrEdit = true;
+            this.onTagSaved.emit(this.tag);
+        };
+        MainEditorBlockComponent.prototype.deleteItem = function () {
+            this.onTagRemoved.emit(this.tag);
+        };
+        MainEditorBlockComponent.prototype.ngOnInit = function () {
+        };
+        return MainEditorBlockComponent;
+    }());
+    MainEditorBlockComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: MainEditorBlockComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MainEditorBlockComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: MainEditorBlockComponent, selector: "croco-html-main-editor-block", inputs: { tag: "tag" }, outputs: { onTagSaved: "onTagSaved", onTagRemoved: "onTagRemoved" }, ngImport: i0__namespace, template: "<div>\n  <div>\n    <div *ngIf=\"textTags.includes(tag.tagDescription.tag)\">\n      <croco-html-text-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n      </croco-html-text-editor>\n    </div>\n\n    <div *ngIf=\"tag.tagDescription.tag === 'file-image'\"> \n      <croco-html-image-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n      </croco-html-image-editor>\n    </div>\n\n    <div *ngIf=\"tag.tagDescription.tag === 'external-video'\">\n      <croco-html-external-video-block (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n      </croco-html-external-video-block>\n    </div>\n\n    <div *ngIf=\"tag.tagDescription.tag === 'html-raw'\">\n      <croco-html-html-raw-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n      </croco-html-html-raw-editor>\n    </div>\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        <button *ngIf=\"tag.presentOrEdit\" (click)=\"tag.presentOrEdit = false\" mat-icon-button>\n          <mat-icon>edit</mat-icon>\n        </button>\n        <button *ngIf=\"!tag.presentOrEdit\" (click)=\"save()\" mat-icon-button>\n          <mat-icon>save</mat-icon>\n        </button>\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>", styles: [""], components: [{ type: TextEditorComponent, selector: "croco-html-text-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { type: ImageEditorComponent, selector: "croco-html-image-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { type: ExternalVideoBlockComponent, selector: "croco-html-external-video-block", inputs: ["tag"], outputs: ["onTagUpdated"] }, { type: HtmlRawEditorComponent, selector: "croco-html-html-raw-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { type: i2__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2__namespace$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: MainEditorBlockComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'croco-html-main-editor-block',
+                        templateUrl: './main-editor-block.component.html',
+                        styleUrls: ['./main-editor-block.component.css']
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { tag: [{
+                    type: i0.Input
+                }], onTagSaved: [{
+                    type: i0.Output
+                }], onTagRemoved: [{
+                    type: i0.Output
+                }] } });
+
+    var DefaultTags = /** @class */ (function () {
+        function DefaultTags() {
+        }
+        DefaultTags.getTags = function (useHtmlRaw) {
+            var result = __spreadArray([], __read(DefaultTags.tags));
+            if (useHtmlRaw) {
+                result.push(DefaultTags.htmlRawTag);
+            }
+            return result;
+        };
+        return DefaultTags;
+    }());
+    DefaultTags.tags = [
+        { tag: FileImageTagDataConsts.TagName, displayValue: 'Изображение' },
+        { tag: ExternalVideoTagDataConsts.TagName, displayValue: 'Внешнее видео Youtube' },
+        { tag: 'text', displayValue: 'Текст' },
+        { tag: 'h1', displayValue: 'Заголовок 1 уровня' },
+        { tag: 'h2', displayValue: 'Заголовок 2 уровня' },
+        { tag: 'h3', displayValue: 'Заголовок 3 уровня' },
+        { tag: 'h4', displayValue: 'Заголовок 4 уровня' },
+        { tag: 'h5', displayValue: 'Заголовок 5 уровня' },
+        { tag: 'h6', displayValue: 'Заголовок 6 уровня' },
+    ];
+    DefaultTags.htmlRawTag = {
+        tag: HtmlRawTagDataConsts.TagName, displayValue: 'Html разметка'
+    };
+    var VisualEditorComponent = /** @class */ (function () {
+        function VisualEditorComponent(_cdref) {
+            this._cdref = _cdref;
+            this.isLoading = false;
+            this.loadingText = "Идёт загрузка";
+            this.showMarkUp = true;
+            this.myForm = new i5.FormGroup({
+                "html": new i5.FormControl(),
+            });
+            this.tags = [];
+            this.useHtmlRaw = false;
+            this.html = "";
+            this.onHtmlChanged = new i0.EventEmitter();
+            this.rendered = new i0.EventEmitter();
+            this.bodyTags = [];
+        }
+        VisualEditorComponent.prototype.isHtmlSet = function () {
+            return this.html.startsWith("<body>");
+        };
+        VisualEditorComponent.prototype.clearHtml = function () {
+            this.html = "";
+            this.recalculateBodyTags();
+        };
+        VisualEditorComponent.prototype.getHtml = function () {
+            this.recalculateHtml();
+            return this.html;
+        };
+        VisualEditorComponent.prototype.ngAfterViewInit = function () {
+            this.rendered.emit(true);
+        };
+        VisualEditorComponent.prototype.ngAfterContentChecked = function () {
+            this._cdref.detectChanges();
+        };
+        VisualEditorComponent.prototype.addTag = function () {
+            var _this = this;
+            var tagDescription = this.tags
+                .find(function (x) { return x.tag === _this.selectedValue; });
+            var attrs = {};
+            var innerHtml = "";
+            if (TextMethods.textTags.includes(tagDescription.tag)) {
+                attrs["h-align"] = "left";
+                innerHtml = "Введите ваш текст";
+            }
+            else if (tagDescription.tag == ExternalVideoTagDataConsts.TagName) {
+                attrs[ExternalVideoTagDataConsts.VideoTypeAttrName] = ExternalVideoSupportedTypes.Youtube;
+                attrs[ExternalVideoTagDataConsts.LinkAttrName] = null;
+            }
+            else {
+                attrs[FileImageTagDataConsts.FileIdAttrName] = null;
+            }
+            this.bodyTags.push({
+                tagDescription: tagDescription,
+                innerHtml: innerHtml,
+                attributes: attrs,
+                presentOrEdit: true
+            });
+            this.recalculateHtml();
+        };
+        VisualEditorComponent.prototype.postFilesStartedEventHandler = function (model) {
+            this.loadingText = "Файлы загружаются на сервер";
+            this.isLoading = true;
+        };
+        VisualEditorComponent.prototype.addTagCustom = function (tag) {
+            this.bodyTags.push(tag);
+            this.recalculateHtml();
+        };
+        VisualEditorComponent.prototype.filesTagsReadyHandler = function (tags) {
+            for (var i = 0; i < tags.length; i++) {
+                this.bodyTags.push(tags[i]);
+            }
+            this.recalculateHtml();
+            this.isLoading = false;
+        };
+        VisualEditorComponent.prototype.drop = function (event) {
+            i11.moveItemInArray(this.bodyTags, event.previousIndex, event.currentIndex);
+            this.recalculateHtml();
+        };
+        VisualEditorComponent.prototype.onTagSavedHandler = function (tag) {
+            this.recalculateHtml();
+        };
+        VisualEditorComponent.prototype.onTagRemovedHandler = function (index) {
+            this.bodyTags.splice(index, 1);
+            this.recalculateHtml();
+        };
+        VisualEditorComponent.prototype.recalculateHtml = function () {
+            var result = BodyTagsExtensions.toHtml(this.bodyTags);
+            this.html = XmlExtensions.formatXml("<body>" + result + "</body>");
+            this.onHtmlChanged.emit(this.html);
+        };
+        VisualEditorComponent.prototype.recalculateBodyTags = function () {
+            this.bodyTags = BodyTagsExtensions.getBodyTags(this.html);
+        };
+        VisualEditorComponent.prototype.ngOnInit = function () {
+            this.recalculateBodyTags();
+            this.tags = DefaultTags.getTags(this.useHtmlRaw);
+            this.selectedValue = this.tags[0].tag;
+        };
+        return VisualEditorComponent;
+    }());
+    VisualEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: VisualEditorComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    VisualEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: VisualEditorComponent, selector: "croco-visual-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged", rendered: "rendered" }, ngImport: i0__namespace, template: "<div *ngIf=\"isLoading\">\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    <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\n        <div *ngFor=\"let tag of bodyTags; let i = index\" cdkDrag>\n            <mat-card>\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                        <mat-chip-list aria-label=\"Tag display value\">\n                            <mat-chip color=\"primary\" selected>{{tag.tagDescription.displayValue}}</mat-chip>\n                        </mat-chip-list>\n                    </div>\n                </div>\n    \n                <div style=\"height: 15px;\"></div>\n    \n                <croco-html-main-editor-block [tag]=\"tag\" \n                    (onTagSaved)=\"onTagSavedHandler($event)\"\n                    (onTagRemoved)=\"onTagRemovedHandler(i)\">\n                </croco-html-main-editor-block>\n            </mat-card>\n    \n            <div style=\"height: 10px;\">\n            </div>\n        </div>\n    </div>\n</div>\n\n\n<div [hidden]=\"isLoading\">\n    <mat-card>\n        <div class=\"row d-flex align-items-center\">\n            <div class=\"col-12\">\n                <mat-form-field class=\"w-100\" appearance=\"fill\">\n                    <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0435\u0433</mat-label>\n                    <mat-select [(ngModel)]=\"selectedValue\">\n                        <mat-option *ngFor=\"let tag of tags\" [value]=\"tag.tag\">\n                            {{tag.displayValue}}\n                        </mat-option>\n                    </mat-select>\n                </mat-form-field>\n            </div>\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>\n\n    <div style=\"height: 10px;\">\n    </div>\n</div>\n\n<div [hidden]=\"isLoading\">\n    <mat-card>\n        <div class=\"row d-flex align-items-center\">\n            <div class=\"col-12\">\n                <croco-add-files-btn \n                    (filesTagsReady)=\"filesTagsReadyHandler($event)\"\n                    (postFilesStarted)=\"postFilesStartedEventHandler($event)\"\n                    class=\"w-100\">\n                </croco-add-files-btn>\n            </div>\n        </div>\n    </mat-card>\n\n    <div style=\"height: 10px;\">\n    </div>\n</div>", styles: [".example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:white;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:white;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"], components: [{ type: i1__namespace$3.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: i2__namespace$3.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i3__namespace$1.MatChipList, selector: "mat-chip-list", inputs: ["aria-orientation", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "selectable", "tabIndex", "errorStateMatcher"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: MainEditorBlockComponent, selector: "croco-html-main-editor-block", inputs: ["tag"], outputs: ["onTagSaved", "onTagRemoved"] }, { type: i5__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i6__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i7__namespace.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i2__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: AddFilesBtnComponent, selector: "croco-add-files-btn", outputs: ["postFilesStarted", "filesTagsReady"] }], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11__namespace.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i2__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11__namespace.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i11__namespace.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i3__namespace$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i5__namespace.MatLabel, selector: "mat-label" }, { type: i5__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: VisualEditorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'croco-visual-editor',
+                        templateUrl: './visual-editor.component.html',
+                        styleUrls: ['./visual-editor.component.css']
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { showMarkUp: [{
+                    type: i0.Input
+                }], useHtmlRaw: [{
+                    type: i0.Input
+                }], html: [{
+                    type: i0.Input
+                }, {
+                    type: i0.Output
+                }], onHtmlChanged: [{
+                    type: i0.Output
+                }], rendered: [{
+                    type: i0.Output
+                }] } });
+
+    var XmlTagTextViewComponent = /** @class */ (function () {
+        function XmlTagTextViewComponent() {
+        }
+        XmlTagTextViewComponent.prototype.ngOnInit = function () {
+        };
+        return XmlTagTextViewComponent;
+    }());
+    XmlTagTextViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: XmlTagTextViewComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    XmlTagTextViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: XmlTagTextViewComponent, selector: "croco-html-xml-tag-text-view", inputs: { item: "item" }, ngImport: i0__namespace, template: "<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'left'\" style=\"text-align: left;\">\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\n    <span *ngIf=\"item.data.html.length > 0\" [innerHtml]=\"item.data.html\"></span>\n</div>\n\n<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'right'\" style=\"text-align: right;\">\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\n    <span *ngIf=\"item.data.html.length > 0\" [innerHtml]=\"item.data.html\"></span>\n</div>\n\n<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'center'\" style=\"text-align: center;\">\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\n    <span *ngIf=\"item.data.html.length > 0\" [innerHtml]=\"item.data.html\"></span>\n</div>\n\n<div *ngIf=\"!item.data.validationResult.isSucceeded\" 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>", styles: [""], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: XmlTagTextViewComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'croco-html-xml-tag-text-view',
+                        templateUrl: './xml-tag-text-view.component.html',
+                        styleUrls: ['./xml-tag-text-view.component.css']
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { item: [{
+                    type: i0.Input
+                }] } });
+
+    var XmlTagHeaderInnerTextViewComponent = /** @class */ (function () {
+        function XmlTagHeaderInnerTextViewComponent() {
+        }
+        XmlTagHeaderInnerTextViewComponent.prototype.ngOnInit = function () {
+        };
+        return XmlTagHeaderInnerTextViewComponent;
+    }());
+    XmlTagHeaderInnerTextViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: XmlTagHeaderInnerTextViewComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    XmlTagHeaderInnerTextViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: XmlTagHeaderInnerTextViewComponent, selector: "croco-html-xml-tag-header-inner-text-view", inputs: { item: "item" }, ngImport: i0__namespace, template: "<h1 *ngIf=\"item.type === 'h1'\" \n    [innerHtml]=\"item.data.html\">\n</h1>\n<h2 *ngIf=\"item.type === 'h2'\" \n    [innerHtml]=\"item.data.html\">\n</h2>\n<h3 *ngIf=\"item.type === 'h3'\" \n    [innerHtml]=\"item.data.html\">\n</h3>\n<h4 *ngIf=\"item.type === 'h4'\" \n    [innerHtml]=\"item.data.html\">\n</h4>\n<h5 *ngIf=\"item.type === 'h5'\" \n    [innerHtml]=\"item.data.html\">\n</h5>\n<h6 *ngIf=\"item.type === 'h6'\" \n    [innerHtml]=\"item.data.html\">\n</h6>", styles: [""], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: XmlTagHeaderInnerTextViewComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'croco-html-xml-tag-header-inner-text-view',
+                        templateUrl: './xml-tag-header-inner-text-view.component.html',
+                        styleUrls: ['./xml-tag-header-inner-text-view.component.css']
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { item: [{
+                    type: i0.Input
+                }] } });
+
+    var XmlTagHeaderTextViewComponent = /** @class */ (function () {
+        function XmlTagHeaderTextViewComponent() {
+        }
+        XmlTagHeaderTextViewComponent.prototype.ngOnInit = function () {
+        };
+        return XmlTagHeaderTextViewComponent;
+    }());
+    XmlTagHeaderTextViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: XmlTagHeaderTextViewComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    XmlTagHeaderTextViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: XmlTagHeaderTextViewComponent, selector: "croco-html-xml-tag-header-text-view", inputs: { item: "item" }, ngImport: i0__namespace, template: "<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'left'\" style=\"text-align: left;\">\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\n    <croco-html-xml-tag-header-inner-text-view *ngIf=\"item.data.html.length > 0\"  [item]=\"item\">\n    </croco-html-xml-tag-header-inner-text-view>\n</div>\n\n<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'right'\" style=\"text-align: right;\">\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\n    <croco-html-xml-tag-header-inner-text-view *ngIf=\"item.data.html.length > 0\"  [item]=\"item\">\n    </croco-html-xml-tag-header-inner-text-view>\n</div>\n\n<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'center'\" style=\"text-align: center;\">\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\n\n    <croco-html-xml-tag-header-inner-text-view *ngIf=\"item.data.html.length > 0\"  [item]=\"item\">\n    </croco-html-xml-tag-header-inner-text-view>\n</div>\n\n<div *ngIf=\"!item.data.validationResult.isSucceeded\" 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>", styles: [""], components: [{ type: XmlTagHeaderInnerTextViewComponent, selector: "croco-html-xml-tag-header-inner-text-view", inputs: ["item"] }], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: XmlTagHeaderTextViewComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'croco-html-xml-tag-header-text-view',
+                        templateUrl: './xml-tag-header-text-view.component.html',
+                        styleUrls: ['./xml-tag-header-text-view.component.css']
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { item: [{
+                    type: i0.Input
+                }] } });
+
+    var XmlTagHtmlViewComponent = /** @class */ (function () {
+        function XmlTagHtmlViewComponent() {
+            this.html = "";
+        }
+        return XmlTagHtmlViewComponent;
+    }());
+    XmlTagHtmlViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: XmlTagHtmlViewComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    XmlTagHtmlViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: XmlTagHtmlViewComponent, selector: "croco-html-xml-tag-html-view", inputs: { html: "html" }, ngImport: i0__namespace, template: "<div class=\"col\" [innerHTML]=\"html\">\n    \n</div>", styles: [""] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: XmlTagHtmlViewComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'croco-html-xml-tag-html-view',
+                        templateUrl: './xml-tag-html-view.component.html',
+                        styleUrls: ['./xml-tag-html-view.component.css']
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { html: [{
+                    type: i0.Input
+                }] } });
+
+    var XmlTagViewComponent = /** @class */ (function () {
+        function XmlTagViewComponent() {
+            this.data = [];
+        }
+        return XmlTagViewComponent;
+    }());
+    XmlTagViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: XmlTagViewComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    XmlTagViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: XmlTagViewComponent, selector: "croco-html-xml-tag-view", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div class=\"\">\n    <div class=\"row\" *ngFor=\"let item of data\">\n        <div *ngIf=\"item.type === 'text'\">\n            <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\n        </div>\n        <div *ngIf=\"item.type === 'image'\" class=\"red\" style=\"margin-top: 10px;\" >\n            <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u0431\u043E\u043B\u044C\u0448\u0435 \u0431\u043E\u043B\u044C\u0448\u0435 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\n            <span>\n                \u0412\u043C\u0435\u0442\u043E \u044D\u0442\u043E\u0433\u043E \u043F\u0435\u0440\u0435\u0438\u043C\u0435\u043D\u0443\u0439\u0442\u0435 \u0442\u0435\u0433 image \u043D\u0430 file-image\n            </span>\n        </div>\n        <div *ngIf=\"item.type === 'html-raw'\" [innerHTML]=\"item.data.innerHTML\">\n        </div>\n        <div *ngIf=\"item.type === 'h1' || item.type === 'h2' || item.type === 'h3' || item.type === 'h4' || item.type === 'h5' || item.type === 'h6'\">\n            <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\n        </div>\n        <div *ngIf=\"item.type === 'file-image'\">\n            <img class=\"mx-auto d-block img-fluid\" [src]=\"item.data.src\"/>\n        </div>\n        <div *ngIf=\"item.type === 'table'\">\n    \n            <croco-html-xml-tag-html-view *ngIf=\"item.validationResult.isSucceeded\" [html]=\"item.bootstrapHtml\">\n            </croco-html-xml-tag-html-view>\n             \n            <app-tutor-baseapiresponse-banner \n                *ngIf=\"item.validationResult && !item.validationResult.isSucceeded\" \n                [message]=\"item.validationResult.message\">\n            </app-tutor-baseapiresponse-banner>\n        </div>\n    \n        <div *ngIf=\"item.type === 'rich-text'\">\n            <croco-html-xml-tag-text-view [richTextData]=\"item\"></croco-html-xml-tag-text-view>\n        </div>\n        <div *ngIf=\"item.type === 'external-video'\">\n            <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\n        </div>\n        <div *ngIf=\"item.type === 'unsupported-tag'\" 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    </div>\n</div>", styles: [".red{background-color:#c94444;color:#fff}\n"], components: [{ type: XmlTagTextViewComponent, selector: "croco-html-xml-tag-text-view", inputs: ["item"] }, { type: XmlTagHeaderTextViewComponent, selector: "croco-html-xml-tag-header-text-view", inputs: ["item"] }, { type: XmlTagHtmlViewComponent, selector: "croco-html-xml-tag-html-view", inputs: ["html"] }, { type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }], directives: [{ type: i2__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: XmlTagViewComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'croco-html-xml-tag-view',
+                        templateUrl: './xml-tag-view.component.html',
+                        styleUrls: ['./xml-tag-view.component.css'],
+                        encapsulation: i0.ViewEncapsulation.None,
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+                    type: i0.Input
+                }] } });
+
+    var ToPreviewPipe = /** @class */ (function () {
+        function ToPreviewPipe() {
+        }
+        ToPreviewPipe.prototype.transform = function (value) {
+            return HtmlExtractionMethods.transformHtmlStringToBlocks(value);
+        };
+        return ToPreviewPipe;
+    }());
+    ToPreviewPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: ToPreviewPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    ToPreviewPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: ToPreviewPipe, name: "topreview" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: ToPreviewPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{
+                        name: 'topreview'
+                    }]
+            }] });
+
+    var MainEditorComponent = /** @class */ (function () {
+        function MainEditorComponent(_clipboardService, _snackBar, _cdref) {
+            this._clipboardService = _clipboardService;
+            this._snackBar = _snackBar;
+            this._cdref = _cdref;
+            this.visualEditorRendered = false;
+            this.showMarkUp = true;
+            this.useHtmlRaw = false;
+            this.myForm = new i5.FormGroup({
+                "html": new i5.FormControl(),
+            });
+            this.html = "";
+            this.onHtmlChanged = new i0.EventEmitter();
+        }
+        MainEditorComponent.prototype.ngAfterContentChecked = function () {
+            this._cdref.detectChanges();
+        };
+        MainEditorComponent.prototype.visualEditorRenderedHandler = function () {
+            this.visualEditorRendered = true;
+            this.recalculateBodyTags();
+        };
+        MainEditorComponent.prototype.onHtmlChangedHandler = function (html) {
+            this.html = html;
+            this.onHtmlChanged.emit(html);
+        };
+        MainEditorComponent.prototype.textAreaModelChangedHandler = function () {
+            this.recalculateBodyTags();
+            this.onHtmlChangedHandler(this.html);
+        };
+        MainEditorComponent.prototype.recalculateBodyTags = function () {
+            this.visualEditor.html = this.html;
+            this.visualEditor.recalculateBodyTags();
+        };
+        MainEditorComponent.prototype.copyMarkUp = function () {
+            this._snackBar.open("Разметка таблицы скопирована в буфер обмена", "Закрыть", { duration: 1500 });
+            this._clipboardService.copy(this.html);
+        };
+        MainEditorComponent.prototype.ngOnInit = function () {
+        };
+        return MainEditorComponent;
+    }());
+    MainEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: MainEditorComponent, deps: [{ token: i1__namespace$4.ClipboardService }, { token: i2__namespace$4.MatSnackBar }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MainEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", 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 }], ngImport: i0__namespace, 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    <form *ngIf=\"visualEditorRendered\" [formGroup]=\"myForm\">\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\" formControlName=\"html\" [(ngModel)]=\"html\"\n          (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n      </mat-form-field>\n    </form>\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>\n      <croco-html-xml-tag-view [data]=\"html | topreview\">\n      </croco-html-xml-tag-view>\n    </mat-card>\n  </mat-tab>\n</mat-tab-group>", styles: [".example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:white;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:white;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"], components: [{ type: i3__namespace$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i3__namespace$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: VisualEditorComponent, selector: "croco-visual-editor", inputs: ["showMarkUp", "useHtmlRaw", "html"], outputs: ["html", "onHtmlChanged", "rendered"] }, { type: i5__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2__namespace$3.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: XmlTagViewComponent, selector: "croco-html-xml-tag-view", inputs: ["data"] }], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5__namespace$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4__namespace.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i5__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "topreview": ToPreviewPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: MainEditorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'croco-html-main-editor',
+                        templateUrl: './main-editor.component.html',
+                        styleUrls: ['./main-editor.component.css']
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$4.ClipboardService }, { type: i2__namespace$4.MatSnackBar }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { visualEditor: [{
+                    type: i0.ViewChild,
+                    args: ["visualEditor"]
+                }], showMarkUp: [{
+                    type: i0.Input
+                }], useHtmlRaw: [{
+                    type: i0.Input
+                }], html: [{
+                    type: i0.Input
+                }, {
+                    type: i0.Output
+                }], onHtmlChanged: [{
+                    type: i0.Output
+                }] } });
+
+    var RichTextToHtmlPipe = /** @class */ (function () {
+        function RichTextToHtmlPipe() {
+        }
+        RichTextToHtmlPipe.prototype.transform = function (value) {
+            var result = "";
+            for (var i = 0; i < value.data.children.length; i++) {
+                var child = value.data.children[i];
+                if (child.type === "text-block") {
+                    result += "<span>" + child.data.text + "</span>";
+                }
+                else if (child.type === "line-break") {
+                    result += "</br>";
+                }
+            }
+            return result;
+        };
+        return RichTextToHtmlPipe;
+    }());
+    RichTextToHtmlPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: RichTextToHtmlPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    RichTextToHtmlPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: RichTextToHtmlPipe, name: "richTextToHtml" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: RichTextToHtmlPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{
+                        name: 'richTextToHtml'
+                    }]
+            }] });
+
+    var XmlTagRichTextViewComponent = /** @class */ (function () {
+        function XmlTagRichTextViewComponent() {
+            this.richTextData = null;
+        }
+        XmlTagRichTextViewComponent.prototype.ngOnInit = function () {
+        };
+        return XmlTagRichTextViewComponent;
+    }());
+    XmlTagRichTextViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: XmlTagRichTextViewComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    XmlTagRichTextViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: XmlTagRichTextViewComponent, selector: "croco-html-xml-tag-rich-text-view", inputs: { richTextData: "richTextData" }, ngImport: i0__namespace, template: "<div *ngIf=\"richTextData\" [innerHtml]=\"richTextData | richTextToHtml\">\n</div>", styles: [""], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "richTextToHtml": RichTextToHtmlPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: XmlTagRichTextViewComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'croco-html-xml-tag-rich-text-view',
+                        templateUrl: './xml-tag-rich-text-view.component.html',
+                        styleUrls: ['./xml-tag-rich-text-view.component.css']
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { richTextData: [{
+                    type: i0.Input
+                }] } });
+
+    var XmlTagTableViewComponent = /** @class */ (function () {
+        function XmlTagTableViewComponent() {
+            this.displayedColumns = [];
+        }
+        return XmlTagTableViewComponent;
+    }());
+    XmlTagTableViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: XmlTagTableViewComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    XmlTagTableViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: XmlTagTableViewComponent, selector: "croco-html-xml-tag-table-view", inputs: { displayedColumns: "displayedColumns", data: "data" }, ngImport: i0__namespace, template: "<table mat-table [dataSource]=\"data\" class=\"mat-elevation-z8 w-100 example-container\">\n    <ng-container [matColumnDef]=\"column\" *ngFor=\"let column of displayedColumns\">\n        <th mat-header-cell *matHeaderCellDef> {{column}} </th>\n        <td mat-cell *matCellDef=\"let element\"> {{element[column]}} </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>", styles: [""], components: [{ type: i1__namespace$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i1__namespace$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i1__namespace$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i2__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i1__namespace$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i1__namespace$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i1__namespace$5.MatCellDef, selector: "[matCellDef]" }, { type: i1__namespace$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i1__namespace$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i1__namespace$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: XmlTagTableViewComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'croco-html-xml-tag-table-view',
+                        templateUrl: './xml-tag-table-view.component.html',
+                        styleUrls: ['./xml-tag-table-view.component.css']
+                    }]
+            }], propDecorators: { displayedColumns: [{
+                    type: i0.Input
+                }], data: [{
+                    type: i0.Input
+                }] } });
+
+    var TagToSpanPipe = /** @class */ (function () {
+        function TagToSpanPipe() {
+        }
+        TagToSpanPipe.prototype.transform = function (value) {
+            return value.map(function (x) { return ("<b>" + x + "</b>"); }).join(' | ');
+        };
+        return TagToSpanPipe;
+    }());
+    TagToSpanPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: TagToSpanPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    TagToSpanPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: TagToSpanPipe, name: "tagToSpan" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: TagToSpanPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{
+                        name: 'tagToSpan'
+                    }]
+            }] });
+
+    var ToHtmlBodyTagsPipe = /** @class */ (function () {
+        function ToHtmlBodyTagsPipe() {
+        }
+        ToHtmlBodyTagsPipe.prototype.transform = function (value) {
+            return BodyTagsExtensions.getBodyTags(value);
+        };
+        return ToHtmlBodyTagsPipe;
+    }());
+    ToHtmlBodyTagsPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: ToHtmlBodyTagsPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    ToHtmlBodyTagsPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: ToHtmlBodyTagsPipe, name: "tohtmlbodytags" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: ToHtmlBodyTagsPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{
+                        name: 'tohtmlbodytags'
+                    }]
+            }] });
+
+    var TableBuilder = /** @class */ (function () {
+        function TableBuilder() {
+        }
+        TableBuilder.getTableMarkUp = function (rows, cols, generateHeaders) {
+            rows = +rows;
+            cols = +cols;
+            var result = "<table>";
+            if (generateHeaders) {
+                result += TableBuilder.getTableHeaderMarkUp(cols);
+            }
+            result += TableBuilder.getTableBodyMarkUp(cols, rows);
+            result += "</table>";
+            return XmlExtensions.formatXml(result);
+        };
+        TableBuilder.getTableHeaderMarkUp = function (cols) {
+            var result = "<thead><tr>";
+            for (var i = 0; i < cols; i++) {
+                result += "<th>\u041A\u043E\u043B\u043E\u043D\u043A\u0430 #" + (i + 1) + "</th>";
+            }
+            result += "</tr></thead>";
+            return result;
+        };
+        TableBuilder.getTableBodyMarkUp = function (cols, rows) {
+            var result = "<tbody>";
+            for (var row = 0; row < rows; row++) {
+                result += "<tr>";
+                for (var i = 0; i < cols; i++) {
+                    result += "<td>\u0420\u044F\u0434\u2116" + (row + 1) + " \u041A\u043E\u043B\u043E\u043D\u043A\u0430 #" + (i + 1) + "</td>";
+                }
+                result += "</tr>";
+            }
+            result += "</tbody>";
+            return result;
+        };
+        return TableBuilder;
+    }());
+
+    var EditorComponents = [
+        MainEditorComponent,
+        FileIdSelectComponent,
+        TextEditorComponent,
+        ExternalVideoBlockComponent,
+        ImageEditorComponent,
+        MainEditorBlockComponent,
+        VisualEditorComponent,
+        AddFilesBtnComponent,
+        HtmlRawEditorComponent,
+    ];
+    var XmlComponents = [
+        XmlTagTableViewComponent,
+        XmlTagViewComponent,
+        XmlTagRichTextViewComponent,
+        XmlTagHtmlViewComponent,
+        XmlTagTextViewComponent,
+        XmlTagHeaderTextViewComponent,
+        XmlTagHeaderInnerTextViewComponent,
+        XmlTagExternalVideoComponent
+    ];
+    var CrocoPipes = [
+        RichTextToHtmlPipe,
+        TagToSpanPipe,
+        ToPreviewPipe,
+        ToHtmlBodyTagsPipe,
+    ];
+    var CrocoHtmlDeclarations = __spreadArray(__spreadArray(__spreadArray([
+        UploadFilesBtnComponent
+    ], __read(XmlComponents)), __read(EditorComponents)), __read(CrocoPipes));
+    var MaterialModules = [
+        i23.MatBadgeModule,
+        i1$5.MatTableModule,
+        i25.MatExpansionModule,
+        i5$1.MatFormFieldModule,
+        i2$4.MatSnackBarModule,
+        i28.MatProgressBarModule,
+        i1$3.MatProgressSpinnerModule,
+        i3$2.MatTabsModule,
+        i31.MatMenuModule,
+        i2$3.MatCardModule,
+        i6.MatSelectModule,
+        i34.MatTooltipModule,
+        i35.MatCheckboxModule,
+        i3$1.MatChipsModule,
+        i37.MatListModule,
+        i2.MatButtonModule,
+        i5$2.MatInputModule,
+        i40.MatDialogModule,
+        i41.MatPaginatorModule,
+        i42.MatDatepickerModule,
+        i43.MatGridListModule,
+        i44.MatSlideToggleModule,
+        i45.MatTreeModule,
+        i7.MatNativeDateModule,
+        i47.MatAutocompleteModule,
+        i48.MatSidenavModule,
+        i2$2.MatIconModule,
+        i11.DragDropModule,
+        i1$2.MatButtonToggleModule
+    ];
+
+    var CrocoHtmlModule = /** @class */ (function () {
+        function CrocoHtmlModule() {
+        }
+        return CrocoHtmlModule;
+    }());
+    CrocoHtmlModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: CrocoHtmlModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    CrocoHtmlModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: CrocoHtmlModule, declarations: [UploadFilesBtnComponent, XmlTagTableViewComponent, XmlTagViewComponent, XmlTagRichTextViewComponent, XmlTagHtmlViewComponent, XmlTagTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHeaderInnerTextViewComponent, XmlTagExternalVideoComponent, MainEditorComponent, FileIdSelectComponent, TextEditorComponent, ExternalVideoBlockComponent, ImageEditorComponent, MainEditorBlockComponent, VisualEditorComponent, AddFilesBtnComponent, HtmlRawEditorComponent, RichTextToHtmlPipe, TagToSpanPipe, ToPreviewPipe, ToHtmlBodyTagsPipe], imports: [i2$1.CommonModule,
+            i5.FormsModule,
+            i5.ReactiveFormsModule,
+            i3.NgSelectModule, i23__namespace.MatBadgeModule, i1__namespace$5.MatTableModule, i25__namespace.MatExpansionModule, i5__namespace.MatFormFieldModule, i2__namespace$4.MatSnackBarModule, i28__namespace.MatProgressBarModule, i1__namespace$3.MatProgressSpinnerModule, i3__namespace$2.MatTabsModule, i31__namespace.MatMenuModule, i2__namespace$3.MatCardModule, i6__namespace.MatSelectModule, i34__namespace.MatTooltipModule, i35__namespace.MatCheckboxModule, i3__namespace$1.MatChipsModule, i37__namespace.MatListModule, i2__namespace.MatButtonModule, i5__namespace$2.MatInputModule, i40__namespace.MatDialogModule, i41__namespace.MatPaginatorModule, i42__namespace.MatDatepickerModule, i43__namespace.MatGridListModule, i44__namespace.MatSlideToggleModule, i45__namespace.MatTreeModule, i7__namespace.MatNativeDateModule, i47__namespace.MatAutocompleteModule, i48__namespace.MatSidenavModule, i2__namespace$2.MatIconModule, i11__namespace.DragDropModule, i1__namespace$2.MatButtonToggleModule], exports: [UploadFilesBtnComponent, XmlTagTableViewComponent, XmlTagViewComponent, XmlTagRichTextViewComponent, XmlTagHtmlViewComponent, XmlTagTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHeaderInnerTextViewComponent, XmlTagExternalVideoComponent, MainEditorComponent, FileIdSelectComponent, TextEditorComponent, ExternalVideoBlockComponent, ImageEditorComponent, MainEditorBlockComponent, VisualEditorComponent, AddFilesBtnComponent, HtmlRawEditorComponent, RichTextToHtmlPipe, TagToSpanPipe, ToPreviewPipe, ToHtmlBodyTagsPipe] });
+    CrocoHtmlModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: CrocoHtmlModule, imports: [__spreadArray([
+                i2$1.CommonModule,
+                i5.FormsModule,
+                i5.ReactiveFormsModule,
+                i3.NgSelectModule
+            ], __read(MaterialModules))] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: CrocoHtmlModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: __spreadArray([], __read(CrocoHtmlDeclarations)),
+                        exports: __spreadArray([], __read(CrocoHtmlDeclarations)),
+                        imports: __spreadArray([
+                            i2$1.CommonModule,
+                            i5.FormsModule,
+                            i5.ReactiveFormsModule,
+                            i3.NgSelectModule
+                        ], __read(MaterialModules))
+                    }]
+            }] });
+
+    /*
+     * Public API Surface of croco-html
+     */
+
+    /**
+     * Generated bundle index. Do not edit.
+     */
+
+    exports.AddFilesBtnComponent = AddFilesBtnComponent;
+    exports.AngularMaterialTableMethods = AngularMaterialTableMethods;
+    exports.BodyTagsExtensions = BodyTagsExtensions;
+    exports.BootstrapTableMethods = BootstrapTableMethods;
+    exports.CrocoHtmlModule = CrocoHtmlModule;
+    exports.DefaultTags = DefaultTags;
+    exports.ExternalVideoBlockComponent = ExternalVideoBlockComponent;
+    exports.ExternalVideoSupportedTypes = ExternalVideoSupportedTypes;
+    exports.ExternalVideoTagDataConsts = ExternalVideoTagDataConsts;
+    exports.FileIdSelectComponent = FileIdSelectComponent;
+    exports.FileImageTagDataConsts = FileImageTagDataConsts;
+    exports.HtmlRawEditorComponent = HtmlRawEditorComponent;
+    exports.ImageEditorComponent = ImageEditorComponent;
+    exports.ImageMethods = ImageMethods;
+    exports.MainEditorBlockComponent = MainEditorBlockComponent;
+    exports.MainEditorComponent = MainEditorComponent;
+    exports.RichTextToHtmlPipe = RichTextToHtmlPipe;
+    exports.TableBuilder = TableBuilder;
+    exports.TableMethods = TableMethods;
+    exports.TableTypes = TableTypes;
+    exports.TagToSpanPipe = TagToSpanPipe;
+    exports.TextEditorComponent = TextEditorComponent;
+    exports.TextMethods = TextMethods;
+    exports.TextSimpleMethods = TextSimpleMethods;
+    exports.TextTag = TextTag;
+    exports.ToHtmlBodyTagsPipe = ToHtmlBodyTagsPipe;
+    exports.ToPreviewPipe = ToPreviewPipe;
+    exports.UploadFilesBtnComponent = UploadFilesBtnComponent;
+    exports.VideoMethods = VideoMethods;
+    exports.VisualEditorComponent = VisualEditorComponent;
+    exports.XmlExtensions = XmlExtensions;
+    exports.XmlTagExternalVideoComponent = XmlTagExternalVideoComponent;
+    exports.XmlTagHeaderInnerTextViewComponent = XmlTagHeaderInnerTextViewComponent;
+    exports.XmlTagHeaderTextViewComponent = XmlTagHeaderTextViewComponent;
+    exports.XmlTagHtmlViewComponent = XmlTagHtmlViewComponent;
+    exports.XmlTagRichTextViewComponent = XmlTagRichTextViewComponent;
+    exports.XmlTagTableViewComponent = XmlTagTableViewComponent;
+    exports.XmlTagTextViewComponent = XmlTagTextViewComponent;
+    exports.XmlTagViewComponent = XmlTagViewComponent;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=croco-html.umd.js.map