croco-html 0.1.6 → 0.2.0

package/fesm2015/croco-html.mjs

@@ -1,42 +1,42 @@
 import * as i0 from '@angular/core';
 import { Injectable, Inject, EventEmitter, Component, ViewChild, Input, Output, ViewEncapsulation, Pipe, NgModule } from '@angular/core';
-import * as i1 from '@angular/common/http';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i5$1 from '@angular/forms';
-import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i1$1 from '@angular/platform-browser';
-import * as i2$1 from '@angular/common';
+import * as i1 from '@angular/common/http';
+import * as i2$1 from '@angular/forms';
+import { UntypedFormGroup, UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i1$2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i5 from '@angular/material/form-field';
+import * as i3 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i5$2 from '@angular/material/input';
+import * as i4 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i4 from '@angular/cdk/text-field';
-import * as i1$2 from '@angular/material/button-toggle';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i2$2 from '@angular/material/icon';
+import * as i1$1 from '@angular/platform-browser';
+import * as i5 from '@angular/cdk/text-field';
+import * as i5$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i3 from '@ng-select/ng-select';
+import * as i6 from '@angular/material/button-toggle';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import * as i3$1 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
-import * as i1$4 from 'ngx-clipboard';
-import * as i2$4 from '@angular/material/snack-bar';
+import * as i1$3 from 'ngx-clipboard';
+import * as i2$2 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import * as i3$2 from '@angular/material/tabs';
+import * as i6$2 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
-import * as i11 from '@angular/cdk/drag-drop';
+import * as i5$2 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import * as i10 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i1$3 from '@angular/material/progress-spinner';
+import * as i4$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i2$3 from '@angular/material/card';
-import { MatCardModule } from '@angular/material/card';
-import * as i3$1 from '@angular/material/chips';
-import { MatChipsModule } from '@angular/material/chips';
-import * as i6 from '@angular/material/select';
+import * as i6$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i7 from '@angular/material/core';
 import { MatNativeDateModule } from '@angular/material/core';
-import * as i1$5 from '@angular/material/table';
+import * as i8 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import * as i2$3 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
 import * as i34 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -120,9 +120,9 @@ class FileUploadService {
             .post(endpoint, formData);
     }
 }
-FileUploadService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileUploadService, deps: [{ token: i1.HttpClient }, { token: 'BASE_URL' }], target: i0.ɵɵFactoryTarget.Injectable });
-FileUploadService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileUploadService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileUploadService, decorators: [{
+FileUploadService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileUploadService, deps: [{ token: i1.HttpClient }, { token: 'BASE_URL' }], target: i0.ɵɵFactoryTarget.Injectable });
+FileUploadService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileUploadService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileUploadService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () {
@@ -158,11 +158,11 @@ class UploadFilesBtnComponent {
     ngOnInit() {
     }
 }
-UploadFilesBtnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadFilesBtnComponent, deps: [{ token: FileUploadService }], target: i0.ɵɵFactoryTarget.Component });
-UploadFilesBtnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: UploadFilesBtnComponent, selector: "croco-app-upload-files-btn", inputs: { extAccepts: "extAccepts", isMultiple: "isMultiple", btnText: "btnText", createLocalCopiesNow: "createLocalCopiesNow", hidden: "hidden" }, outputs: { postFilesStarted: "postFilesStarted", onFilesUploaded: "onFilesUploaded" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["filesInput"], descendants: true }], ngImport: i0, template: "<button [hidden]=\"hidden\" mat-raised-button color=\"primary\" (click)=\"filesInput.click()\">{{btnText}}</button>\r\n<input [hidden]=\"true\" [accept]=\"extAccepts\" [multiple]=\"isMultiple\" type=\"file\" #filesInput (change)=\"handleFileInput($event.target.files)\" />", styles: [""], components: [{ type: i2.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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadFilesBtnComponent, decorators: [{
+UploadFilesBtnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UploadFilesBtnComponent, deps: [{ token: FileUploadService }], target: i0.ɵɵFactoryTarget.Component });
+UploadFilesBtnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: UploadFilesBtnComponent, selector: "croco-app-upload-files-btn", inputs: { extAccepts: "extAccepts", isMultiple: "isMultiple", btnText: "btnText", createLocalCopiesNow: "createLocalCopiesNow", hidden: "hidden" }, outputs: { postFilesStarted: "postFilesStarted", onFilesUploaded: "onFilesUploaded" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["filesInput"], descendants: true }], ngImport: i0, template: "<button [hidden]=\"hidden\" mat-raised-button color=\"primary\" (click)=\"filesInput.click()\">{{btnText}}</button>\r\n<input [hidden]=\"true\" [accept]=\"extAccepts\" [multiple]=\"isMultiple\" type=\"file\" #filesInput (change)=\"handleFileInput($event.target.files)\" />", styles: [""], dependencies: [{ kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UploadFilesBtnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-app-upload-files-btn', template: "<button [hidden]=\"hidden\" mat-raised-button color=\"primary\" (click)=\"filesInput.click()\">{{btnText}}</button>\r\n<input [hidden]=\"true\" [accept]=\"extAccepts\" [multiple]=\"isMultiple\" type=\"file\" #filesInput (change)=\"handleFileInput($event.target.files)\" />", styles: [""] }]
+            args: [{ selector: 'croco-app-upload-files-btn', template: "<button [hidden]=\"hidden\" mat-raised-button color=\"primary\" (click)=\"filesInput.click()\">{{btnText}}</button>\r\n<input [hidden]=\"true\" [accept]=\"extAccepts\" [multiple]=\"isMultiple\" type=\"file\" #filesInput (change)=\"handleFileInput($event.target.files)\" />" }]
         }], ctorParameters: function () { return [{ type: FileUploadService }]; }, propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['filesInput']
@@ -216,11 +216,11 @@ class AddFilesBtnComponent {
     ngOnInit() {
     }
 }
-AddFilesBtnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AddFilesBtnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AddFilesBtnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AddFilesBtnComponent, selector: "croco-add-files-btn", outputs: { postFilesStarted: "postFilesStarted", filesTagsReady: "filesTagsReady" }, viewQueries: [{ propertyName: "fakeBtn", first: true, predicate: ["fakeBtn"], descendants: true }], ngImport: i0, template: "<div [hidden]=\"true\">\r\n    <croco-app-upload-files-btn #fakeBtn \r\n        (onFilesUploaded)=\"filesUploadedHandler($event)\" \r\n        [btnText]=\"'\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F'\"\r\n        [createLocalCopiesNow]=\"true\"\r\n        (postFilesStarted)=\"postFilesStartedEventHandler($event)\" \r\n        [extAccepts]=\"'image/*'\"></croco-app-upload-files-btn>\r\n</div>\r\n\r\n<div>\r\n    <button class=\"w-100\" \r\n        (click)=\"handleClick()\"\r\n        mat-stroked-button>\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F</button>\r\n</div>", styles: [""], components: [{ type: UploadFilesBtnComponent, selector: "croco-app-upload-files-btn", inputs: ["extAccepts", "isMultiple", "btnText", "createLocalCopiesNow", "hidden"], outputs: ["postFilesStarted", "onFilesUploaded"] }, { type: i2.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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AddFilesBtnComponent, decorators: [{
+AddFilesBtnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AddFilesBtnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AddFilesBtnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: AddFilesBtnComponent, selector: "croco-add-files-btn", outputs: { postFilesStarted: "postFilesStarted", filesTagsReady: "filesTagsReady" }, viewQueries: [{ propertyName: "fakeBtn", first: true, predicate: ["fakeBtn"], descendants: true }], ngImport: i0, template: "<div [hidden]=\"true\">\r\n    <croco-app-upload-files-btn #fakeBtn \r\n        (onFilesUploaded)=\"filesUploadedHandler($event)\" \r\n        [btnText]=\"'\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F'\"\r\n        [createLocalCopiesNow]=\"true\"\r\n        (postFilesStarted)=\"postFilesStartedEventHandler($event)\" \r\n        [extAccepts]=\"'image/*'\"></croco-app-upload-files-btn>\r\n</div>\r\n\r\n<div>\r\n    <button class=\"w-100\" \r\n        (click)=\"handleClick()\"\r\n        mat-stroked-button>\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F</button>\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: UploadFilesBtnComponent, selector: "croco-app-upload-files-btn", inputs: ["extAccepts", "isMultiple", "btnText", "createLocalCopiesNow", "hidden"], outputs: ["postFilesStarted", "onFilesUploaded"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AddFilesBtnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-add-files-btn', template: "<div [hidden]=\"true\">\r\n    <croco-app-upload-files-btn #fakeBtn \r\n        (onFilesUploaded)=\"filesUploadedHandler($event)\" \r\n        [btnText]=\"'\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F'\"\r\n        [createLocalCopiesNow]=\"true\"\r\n        (postFilesStarted)=\"postFilesStartedEventHandler($event)\" \r\n        [extAccepts]=\"'image/*'\"></croco-app-upload-files-btn>\r\n</div>\r\n\r\n<div>\r\n    <button class=\"w-100\" \r\n        (click)=\"handleClick()\"\r\n        mat-stroked-button>\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F</button>\r\n</div>", styles: [""] }]
+            args: [{ selector: 'croco-add-files-btn', template: "<div [hidden]=\"true\">\r\n    <croco-app-upload-files-btn #fakeBtn \r\n        (onFilesUploaded)=\"filesUploadedHandler($event)\" \r\n        [btnText]=\"'\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F'\"\r\n        [createLocalCopiesNow]=\"true\"\r\n        (postFilesStarted)=\"postFilesStartedEventHandler($event)\" \r\n        [extAccepts]=\"'image/*'\"></croco-app-upload-files-btn>\r\n</div>\r\n\r\n<div>\r\n    <button class=\"w-100\" \r\n        (click)=\"handleClick()\"\r\n        mat-stroked-button>\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F</button>\r\n</div>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { postFilesStarted: [{
                 type: Output
             }], fakeBtn: [{
@@ -251,9 +251,6 @@ class VideoMethods {
 }
 
 class XmlTagExternalVideoComponent {
-    constructor(_domSanitizer) {
-        this._domSanitizer = _domSanitizer;
-    }
     getYouTubeId(youtubeLink) {
         //https://www.youtube.com/watch?v=l3KfbfkxJOU
         if (youtubeLink.includes("watch?v=")) {
@@ -270,6 +267,9 @@ class XmlTagExternalVideoComponent {
         this.widgetUrl = this._domSanitizer.bypassSecurityTrustResourceUrl(result);
         return result;
     }
+    constructor(_domSanitizer) {
+        this._domSanitizer = _domSanitizer;
+    }
     ngOnInit() {
         if (this.data != null) {
             this.tagData = this.data.data;
@@ -278,9 +278,9 @@ class XmlTagExternalVideoComponent {
         this.widgetUrl = this._domSanitizer.bypassSecurityTrustResourceUrl(youtubeWidgetLink);
     }
 }
-XmlTagExternalVideoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: XmlTagExternalVideoComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-XmlTagExternalVideoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: { data: "data", tagData: "tagData" }, ngImport: i0, template: "<div class=\"d-flex justify-content-center\">\r\n    <div *ngIf=\"widgetUrl\" class=\"y-video\">\r\n        <iframe width=\"100%\" height=\"100%\" [src]=\"widgetUrl\"\r\n            title=\"YouTube video player\" frameborder=\"0\"\r\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\r\n            allowfullscreen></iframe>\r\n    </div>\r\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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: XmlTagExternalVideoComponent, decorators: [{
+XmlTagExternalVideoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: XmlTagExternalVideoComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+XmlTagExternalVideoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: { data: "data", tagData: "tagData" }, ngImport: i0, template: "<div class=\"d-flex justify-content-center\">\r\n    <div *ngIf=\"widgetUrl\" class=\"y-video\">\r\n        <iframe width=\"100%\" height=\"100%\" [src]=\"widgetUrl\"\r\n            title=\"YouTube video player\" frameborder=\"0\"\r\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\r\n            allowfullscreen></iframe>\r\n    </div>\r\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"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: XmlTagExternalVideoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'croco-html-xml-tag-external-video', template: "<div class=\"d-flex justify-content-center\">\r\n    <div *ngIf=\"widgetUrl\" class=\"y-video\">\r\n        <iframe width=\"100%\" height=\"100%\" [src]=\"widgetUrl\"\r\n            title=\"YouTube video player\" frameborder=\"0\"\r\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\r\n            allowfullscreen></iframe>\r\n    </div>\r\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"] }]
         }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { data: [{
@@ -292,8 +292,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class ExternalVideoBlockComponent {
     constructor() {
         this.onTagUpdated = new EventEmitter();
-        this.myForm = new FormGroup({
-            youtubeLink: new FormControl()
+        this.myForm = new UntypedFormGroup({
+            youtubeLink: new UntypedFormControl()
         });
         this.defaultLink = "https://youtu.be/jzBneaWSswY";
         this.data = {
@@ -314,11 +314,11 @@ class ExternalVideoBlockComponent {
         this.data.youtubeLink = this.tagData.link;
     }
 }
-ExternalVideoBlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExternalVideoBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ExternalVideoBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ExternalVideoBlockComponent, selector: "croco-html-external-video-block", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "<div *ngIf=\"tag.presentOrEdit\">\r\n    \r\n    <div>\r\n        \u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 YouTube: {{data.youtubeLink}}\r\n    </div>\r\n\r\n    <div style=\"height: 10px;\"></div>\r\n\r\n    <croco-html-xml-tag-external-video [tagData]=\"tagData\">\r\n    </croco-html-xml-tag-external-video>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n    <div>\r\n        <form [formGroup]=\"myForm\">\r\n            <mat-form-field class=\"w-100\">\r\n                <input matInput placeholder=\"\u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 YouTube\"\r\n                    new-autocomplete=\"off\"\r\n                    autocomplete=\"off\"\r\n                    formControlName=\"youtubeLink\"\r\n                    [(ngModel)]=\"data.youtubeLink\"\r\n                    (ngModelChange)=\"linkChanged()\">\r\n            </mat-form-field>\r\n        </form>\r\n    </div>\r\n</div>\r\n\r\n", styles: [""], components: [{ type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }, { type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$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$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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExternalVideoBlockComponent, decorators: [{
+ExternalVideoBlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ExternalVideoBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ExternalVideoBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ExternalVideoBlockComponent, selector: "croco-html-external-video-block", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "<div *ngIf=\"tag.presentOrEdit\">\r\n    \r\n    <div>\r\n        \u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 YouTube: {{data.youtubeLink}}\r\n    </div>\r\n\r\n    <div style=\"height: 10px;\"></div>\r\n\r\n    <croco-html-xml-tag-external-video [tagData]=\"tagData\">\r\n    </croco-html-xml-tag-external-video>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n    <div>\r\n        <form [formGroup]=\"myForm\">\r\n            <mat-form-field class=\"w-100\">\r\n                <input matInput placeholder=\"\u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 YouTube\"\r\n                    new-autocomplete=\"off\"\r\n                    autocomplete=\"off\"\r\n                    formControlName=\"youtubeLink\"\r\n                    [(ngModel)]=\"data.youtubeLink\"\r\n                    (ngModelChange)=\"linkChanged()\">\r\n            </mat-form-field>\r\n        </form>\r\n    </div>\r\n</div>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ExternalVideoBlockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-external-video-block', template: "<div *ngIf=\"tag.presentOrEdit\">\r\n    \r\n    <div>\r\n        \u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 YouTube: {{data.youtubeLink}}\r\n    </div>\r\n\r\n    <div style=\"height: 10px;\"></div>\r\n\r\n    <croco-html-xml-tag-external-video [tagData]=\"tagData\">\r\n    </croco-html-xml-tag-external-video>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n    <div>\r\n        <form [formGroup]=\"myForm\">\r\n            <mat-form-field class=\"w-100\">\r\n                <input matInput placeholder=\"\u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 YouTube\"\r\n                    new-autocomplete=\"off\"\r\n                    autocomplete=\"off\"\r\n                    formControlName=\"youtubeLink\"\r\n                    [(ngModel)]=\"data.youtubeLink\"\r\n                    (ngModelChange)=\"linkChanged()\">\r\n            </mat-form-field>\r\n        </form>\r\n    </div>\r\n</div>\r\n\r\n", styles: [""] }]
+            args: [{ selector: 'croco-html-external-video-block', template: "<div *ngIf=\"tag.presentOrEdit\">\r\n    \r\n    <div>\r\n        \u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 YouTube: {{data.youtubeLink}}\r\n    </div>\r\n\r\n    <div style=\"height: 10px;\"></div>\r\n\r\n    <croco-html-xml-tag-external-video [tagData]=\"tagData\">\r\n    </croco-html-xml-tag-external-video>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n    <div>\r\n        <form [formGroup]=\"myForm\">\r\n            <mat-form-field class=\"w-100\">\r\n                <input matInput placeholder=\"\u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 YouTube\"\r\n                    new-autocomplete=\"off\"\r\n                    autocomplete=\"off\"\r\n                    formControlName=\"youtubeLink\"\r\n                    [(ngModel)]=\"data.youtubeLink\"\r\n                    (ngModelChange)=\"linkChanged()\">\r\n            </mat-form-field>\r\n        </form>\r\n    </div>\r\n</div>\r\n\r\n" }]
         }], propDecorators: { tag: [{
                 type: Input
             }], onTagUpdated: [{
@@ -332,11 +332,11 @@ class HtmlRawEditorComponent {
     ngOnInit() {
     }
 }
-HtmlRawEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HtmlRawEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HtmlRawEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: HtmlRawEditorComponent, selector: "croco-html-html-raw-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "<div *ngIf=\"tag.presentOrEdit\">\r\n    <div [innerHTML]=\"tag.innerHtml\"></div>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n    <div>\r\n        <mat-form-field class=\"w-100\">\r\n            <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\r\n                cdkAutosizeMinRows=\"1\"\r\n                placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\"\r\n                [(ngModel)]=\"tag.innerHtml\"></textarea>\r\n        </mat-form-field>\r\n    </div>\r\n</div>\r\n\r\n", styles: [""], components: [{ type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$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.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i5$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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HtmlRawEditorComponent, decorators: [{
+HtmlRawEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HtmlRawEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+HtmlRawEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: HtmlRawEditorComponent, selector: "croco-html-html-raw-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "<div *ngIf=\"tag.presentOrEdit\">\r\n    <div [innerHTML]=\"tag.innerHtml\"></div>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n    <div>\r\n        <mat-form-field class=\"w-100\">\r\n            <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\r\n                cdkAutosizeMinRows=\"1\"\r\n                placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\"\r\n                [(ngModel)]=\"tag.innerHtml\"></textarea>\r\n        </mat-form-field>\r\n    </div>\r\n</div>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HtmlRawEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-html-raw-editor', template: "<div *ngIf=\"tag.presentOrEdit\">\r\n    <div [innerHTML]=\"tag.innerHtml\"></div>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n    <div>\r\n        <mat-form-field class=\"w-100\">\r\n            <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\r\n                cdkAutosizeMinRows=\"1\"\r\n                placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\"\r\n                [(ngModel)]=\"tag.innerHtml\"></textarea>\r\n        </mat-form-field>\r\n    </div>\r\n</div>\r\n\r\n", styles: [""] }]
+            args: [{ selector: 'croco-html-html-raw-editor', template: "<div *ngIf=\"tag.presentOrEdit\">\r\n    <div [innerHTML]=\"tag.innerHtml\"></div>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n    <div>\r\n        <mat-form-field class=\"w-100\">\r\n            <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\r\n                cdkAutosizeMinRows=\"1\"\r\n                placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\"\r\n                [(ngModel)]=\"tag.innerHtml\"></textarea>\r\n        </mat-form-field>\r\n    </div>\r\n</div>\r\n\r\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { tag: [{
                 type: Input
             }], onTagUpdated: [{
@@ -355,9 +355,9 @@ class FilesQueryService {
         return this._httpClient.post(this._baseControllerUrl + `GetFiles`, model);
     }
 }
-FilesQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilesQueryService, deps: [{ token: i1.HttpClient }, { token: 'BASE_URL' }], target: i0.ɵɵFactoryTarget.Injectable });
-FilesQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilesQueryService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilesQueryService, decorators: [{
+FilesQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilesQueryService, deps: [{ token: i1.HttpClient }, { token: 'BASE_URL' }], target: i0.ɵɵFactoryTarget.Injectable });
+FilesQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilesQueryService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilesQueryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -410,12 +410,12 @@ class FileIdSelectComponent {
         this.loadFiles();
     }
 }
-FileIdSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileIdSelectComponent, deps: [{ token: i5$1.FormBuilder }, { token: FilesQueryService }], target: i0.ɵɵFactoryTarget.Component });
-FileIdSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FileIdSelectComponent, selector: "croco-html-file-id-select", inputs: { labelText: "labelText", fileId: "fileId" }, outputs: { fileId: "fileId", onFileIdChanged: "onFileIdChanged" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\">\r\n    <div class=\"form-group\">\r\n        <label for=\"fileName\">{{labelText}}</label>\r\n        <ng-select [(ngModel)]=\"fileId\" (ngModelChange)=\"onModelChanged($event)\"\r\n                   [items]=\"files\"\r\n                   #select\r\n                   bindLabel=\"fileName\"\r\n                   (search)=\"onSearchChanged($event)\"\r\n                   [loading]=\"loading\"\r\n                   [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\r\n                   dropdownPosition=\"auto\"\r\n                   bindValue=\"fileId\"\r\n                   labelForId=\"fileName\"\r\n                   placeholder=\"\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B\"\r\n                   [virtualScroll]=\"true\"\r\n                   formControlName=\"fileName\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n                <div>\r\n                    <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc(item.fileId)\"/>\r\n                </div>\r\n                <div>\r\n                    <span class=\"h5\">\u0424\u0430\u0439\u043B: </span>\r\n                    <span class=\"h5\" [ngOptionHighlight]=\"search\"><b>{{item.fileName}}</b></span>\r\n                </div>\r\n                <div>\r\n                    <small>\r\n                        <span>\r\n                            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: <b>{{item.fileId}}</b>\r\n                        </span>\r\n                    </small>\r\n                </div>\r\n            </ng-template>\r\n        </ng-select>\r\n    </div>\r\n</form>\r\n\r\n<div>\r\n    \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: {{fileId}}\r\n</div>\r\n", styles: [""], components: [{ type: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileIdSelectComponent, decorators: [{
+FileIdSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileIdSelectComponent, deps: [{ token: i2$1.UntypedFormBuilder }, { token: FilesQueryService }], target: i0.ɵɵFactoryTarget.Component });
+FileIdSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FileIdSelectComponent, selector: "croco-html-file-id-select", inputs: { labelText: "labelText", fileId: "fileId" }, outputs: { fileId: "fileId", onFileIdChanged: "onFileIdChanged" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\">\r\n    <div class=\"form-group\">\r\n        <label for=\"fileName\">{{labelText}}</label>\r\n        <ng-select [(ngModel)]=\"fileId\" (ngModelChange)=\"onModelChanged($event)\"\r\n                   [items]=\"files\"\r\n                   #select\r\n                   bindLabel=\"fileName\"\r\n                   (search)=\"onSearchChanged($event)\"\r\n                   [loading]=\"loading\"\r\n                   [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\r\n                   dropdownPosition=\"auto\"\r\n                   bindValue=\"fileId\"\r\n                   labelForId=\"fileName\"\r\n                   placeholder=\"\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B\"\r\n                   [virtualScroll]=\"true\"\r\n                   formControlName=\"fileName\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n                <div>\r\n                    <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc(item.fileId)\"/>\r\n                </div>\r\n                <div>\r\n                    <span class=\"h5\">\u0424\u0430\u0439\u043B: </span>\r\n                    <span class=\"h5\" [ngOptionHighlight]=\"search\"><b>{{item.fileName}}</b></span>\r\n                </div>\r\n                <div>\r\n                    <small>\r\n                        <span>\r\n                            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: <b>{{item.fileId}}</b>\r\n                        </span>\r\n                    </small>\r\n                </div>\r\n            </ng-template>\r\n        </ng-select>\r\n    </div>\r\n</form>\r\n\r\n<div>\r\n    \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: {{fileId}}\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileIdSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-file-id-select', template: "<form [formGroup]=\"form\">\r\n    <div class=\"form-group\">\r\n        <label for=\"fileName\">{{labelText}}</label>\r\n        <ng-select [(ngModel)]=\"fileId\" (ngModelChange)=\"onModelChanged($event)\"\r\n                   [items]=\"files\"\r\n                   #select\r\n                   bindLabel=\"fileName\"\r\n                   (search)=\"onSearchChanged($event)\"\r\n                   [loading]=\"loading\"\r\n                   [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\r\n                   dropdownPosition=\"auto\"\r\n                   bindValue=\"fileId\"\r\n                   labelForId=\"fileName\"\r\n                   placeholder=\"\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B\"\r\n                   [virtualScroll]=\"true\"\r\n                   formControlName=\"fileName\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n                <div>\r\n                    <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc(item.fileId)\"/>\r\n                </div>\r\n                <div>\r\n                    <span class=\"h5\">\u0424\u0430\u0439\u043B: </span>\r\n                    <span class=\"h5\" [ngOptionHighlight]=\"search\"><b>{{item.fileName}}</b></span>\r\n                </div>\r\n                <div>\r\n                    <small>\r\n                        <span>\r\n                            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: <b>{{item.fileId}}</b>\r\n                        </span>\r\n                    </small>\r\n                </div>\r\n            </ng-template>\r\n        </ng-select>\r\n    </div>\r\n</form>\r\n\r\n<div>\r\n    \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: {{fileId}}\r\n</div>\r\n", styles: [""] }]
-        }], ctorParameters: function () { return [{ type: i5$1.FormBuilder }, { type: FilesQueryService }]; }, propDecorators: { labelText: [{
+            args: [{ selector: 'croco-html-file-id-select', template: "<form [formGroup]=\"form\">\r\n    <div class=\"form-group\">\r\n        <label for=\"fileName\">{{labelText}}</label>\r\n        <ng-select [(ngModel)]=\"fileId\" (ngModelChange)=\"onModelChanged($event)\"\r\n                   [items]=\"files\"\r\n                   #select\r\n                   bindLabel=\"fileName\"\r\n                   (search)=\"onSearchChanged($event)\"\r\n                   [loading]=\"loading\"\r\n                   [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\r\n                   dropdownPosition=\"auto\"\r\n                   bindValue=\"fileId\"\r\n                   labelForId=\"fileName\"\r\n                   placeholder=\"\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B\"\r\n                   [virtualScroll]=\"true\"\r\n                   formControlName=\"fileName\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n                <div>\r\n                    <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc(item.fileId)\"/>\r\n                </div>\r\n                <div>\r\n                    <span class=\"h5\">\u0424\u0430\u0439\u043B: </span>\r\n                    <span class=\"h5\" [ngOptionHighlight]=\"search\"><b>{{item.fileName}}</b></span>\r\n                </div>\r\n                <div>\r\n                    <small>\r\n                        <span>\r\n                            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: <b>{{item.fileId}}</b>\r\n                        </span>\r\n                    </small>\r\n                </div>\r\n            </ng-template>\r\n        </ng-select>\r\n    </div>\r\n</form>\r\n\r\n<div>\r\n    \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: {{fileId}}\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i2$1.UntypedFormBuilder }, { type: FilesQueryService }]; }, propDecorators: { labelText: [{
                 type: Input
             }], fileId: [{
                 type: Input
@@ -426,17 +426,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }] } });
 
 class ImageEditorComponent {
+    onErrorHandler() {
+        this.hasImageError = true;
+    }
     constructor() {
         this.hasImageError = false;
         this.searchOrEdit = "search";
-        this.myForm = new FormGroup({
-            fileId: new FormControl()
+        this.myForm = new UntypedFormGroup({
+            fileId: new UntypedFormControl()
         });
         this.onTagUpdated = new EventEmitter();
     }
-    onErrorHandler() {
-        this.hasImageError = true;
-    }
     getSrc() {
         return ImageMethods.buildUrl(this.tag.attributes[FileImageTagDataConsts.FileIdAttrName]);
     }
@@ -453,9 +453,9 @@ class ImageEditorComponent {
     ngOnInit() {
     }
 }
-ImageEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ImageEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ImageEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ImageEditorComponent, selector: "croco-html-image-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "<div>\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n    \r\n    <div *ngIf=\"hasImageError\" class=\"error-block\">\r\n        \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E \u043F\u043E \u0443\u043A\u0430\u0437\u0430\u043D\u043D\u043E\u043C\u0443 \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E \u0444\u0430\u0439\u043B \u043D\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u043B\u0438 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043D\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.\r\n    </div>\r\n\r\n    <div *ngIf=\"hasFileId() && !hasImageError\">\r\n        <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc()\" (error)=\"onErrorHandler()\"/>\r\n    </div>\r\n\r\n    <div *ngIf=\"!hasFileId()\">\r\n        <h5>[\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E]</h5>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n    <div style=\"height: 10px;\"></div>\r\n\r\n    <div style=\"overflow-x:auto;\">\r\n        <mat-button-toggle-group [(ngModel)]=\"searchOrEdit\">\r\n            <mat-button-toggle value=\"search\">\r\n                \u0418\u0441\u043A\u0430\u0442\u044C \u0444\u0430\u0439\u043B <mat-icon>search</mat-icon>\r\n            </mat-button-toggle>\r\n            <mat-button-toggle value=\"edit\">\r\n                \u0423\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u043E \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443 <mat-icon>settings</mat-icon>\r\n            </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n    </div>\r\n    \r\n\r\n    <div style=\"height: 10px;\"></div>\r\n\r\n    <div [hidden]=\"searchOrEdit !== 'search'\">\r\n        <croco-html-file-id-select\r\n         [labelText]=\"'\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B'\"\r\n         [(fileId)]=\"tag.attributes['file-id']\"\r\n         (onFileIdChanged)=\"onFileIdChanged($event)\">\r\n        </croco-html-file-id-select>\r\n    </div>\r\n\r\n    <div [hidden]=\"searchOrEdit !== 'edit'\">\r\n        <form [formGroup]=\"myForm\">\r\n            <mat-form-field class=\"w-100\">\r\n                <input matInput placeholder=\"\u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\" new-autocomplete=\"off\" autocomplete=\"off\"\r\n                    formControlName=\"fileId\" \r\n                    type=\"number\"\r\n                    [(ngModel)]=\"tag.attributes['file-id']\"\r\n                    (ngModelChange)=\"removeImageError()\">\r\n            </mat-form-field>\r\n        </form>\r\n    </div>\r\n</div>", styles: [".error-block{background-color:#f32323;color:#fff;text-align:center;border-radius:10px;padding:10px}\n"], components: [{ type: i1$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$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.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$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$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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i5$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ImageEditorComponent, decorators: [{
+ImageEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ImageEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ImageEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ImageEditorComponent, selector: "croco-html-image-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "<div>\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n    \r\n    <div *ngIf=\"hasImageError\" class=\"error-block\">\r\n        \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E \u043F\u043E \u0443\u043A\u0430\u0437\u0430\u043D\u043D\u043E\u043C\u0443 \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E \u0444\u0430\u0439\u043B \u043D\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u043B\u0438 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043D\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.\r\n    </div>\r\n\r\n    <div *ngIf=\"hasFileId() && !hasImageError\">\r\n        <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc()\" (error)=\"onErrorHandler()\"/>\r\n    </div>\r\n\r\n    <div *ngIf=\"!hasFileId()\">\r\n        <h5>[\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E]</h5>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n    <div style=\"height: 10px;\"></div>\r\n\r\n    <div style=\"overflow-x:auto;\">\r\n        <mat-button-toggle-group [(ngModel)]=\"searchOrEdit\">\r\n            <mat-button-toggle value=\"search\">\r\n                \u0418\u0441\u043A\u0430\u0442\u044C \u0444\u0430\u0439\u043B <mat-icon>search</mat-icon>\r\n            </mat-button-toggle>\r\n            <mat-button-toggle value=\"edit\">\r\n                \u0423\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u043E \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443 <mat-icon>settings</mat-icon>\r\n            </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n    </div>\r\n    \r\n\r\n    <div style=\"height: 10px;\"></div>\r\n\r\n    <div [hidden]=\"searchOrEdit !== 'search'\">\r\n        <croco-html-file-id-select\r\n         [labelText]=\"'\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B'\"\r\n         [(fileId)]=\"tag.attributes['file-id']\"\r\n         (onFileIdChanged)=\"onFileIdChanged($event)\">\r\n        </croco-html-file-id-select>\r\n    </div>\r\n\r\n    <div [hidden]=\"searchOrEdit !== 'edit'\">\r\n        <form [formGroup]=\"myForm\">\r\n            <mat-form-field class=\"w-100\">\r\n                <input matInput placeholder=\"\u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\" new-autocomplete=\"off\" autocomplete=\"off\"\r\n                    formControlName=\"fileId\" \r\n                    type=\"number\"\r\n                    [(ngModel)]=\"tag.attributes['file-id']\"\r\n                    (ngModelChange)=\"removeImageError()\">\r\n            </mat-form-field>\r\n        </form>\r\n    </div>\r\n</div>", styles: [".error-block{background-color:#f32323;color:#fff;text-align:center;border-radius:10px;padding:10px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: FileIdSelectComponent, selector: "croco-html-file-id-select", inputs: ["labelText", "fileId"], outputs: ["fileId", "onFileIdChanged"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ImageEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'croco-html-image-editor', template: "<div>\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n    \r\n    <div *ngIf=\"hasImageError\" class=\"error-block\">\r\n        \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E \u043F\u043E \u0443\u043A\u0430\u0437\u0430\u043D\u043D\u043E\u043C\u0443 \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E \u0444\u0430\u0439\u043B \u043D\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u043B\u0438 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043D\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.\r\n    </div>\r\n\r\n    <div *ngIf=\"hasFileId() && !hasImageError\">\r\n        <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc()\" (error)=\"onErrorHandler()\"/>\r\n    </div>\r\n\r\n    <div *ngIf=\"!hasFileId()\">\r\n        <h5>[\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E]</h5>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n    <div style=\"height: 10px;\"></div>\r\n\r\n    <div style=\"overflow-x:auto;\">\r\n        <mat-button-toggle-group [(ngModel)]=\"searchOrEdit\">\r\n            <mat-button-toggle value=\"search\">\r\n                \u0418\u0441\u043A\u0430\u0442\u044C \u0444\u0430\u0439\u043B <mat-icon>search</mat-icon>\r\n            </mat-button-toggle>\r\n            <mat-button-toggle value=\"edit\">\r\n                \u0423\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u043E \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443 <mat-icon>settings</mat-icon>\r\n            </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n    </div>\r\n    \r\n\r\n    <div style=\"height: 10px;\"></div>\r\n\r\n    <div [hidden]=\"searchOrEdit !== 'search'\">\r\n        <croco-html-file-id-select\r\n         [labelText]=\"'\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B'\"\r\n         [(fileId)]=\"tag.attributes['file-id']\"\r\n         (onFileIdChanged)=\"onFileIdChanged($event)\">\r\n        </croco-html-file-id-select>\r\n    </div>\r\n\r\n    <div [hidden]=\"searchOrEdit !== 'edit'\">\r\n        <form [formGroup]=\"myForm\">\r\n            <mat-form-field class=\"w-100\">\r\n                <input matInput placeholder=\"\u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\" new-autocomplete=\"off\" autocomplete=\"off\"\r\n                    formControlName=\"fileId\" \r\n                    type=\"number\"\r\n                    [(ngModel)]=\"tag.attributes['file-id']\"\r\n                    (ngModelChange)=\"removeImageError()\">\r\n            </mat-form-field>\r\n        </form>\r\n    </div>\r\n</div>", styles: [".error-block{background-color:#f32323;color:#fff;text-align:center;border-radius:10px;padding:10px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { tag: [{
@@ -464,6 +464,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Output
             }] } });
 
+class XmlTagHtmlViewComponent {
+    constructor() {
+        this.html = "";
+    }
+}
+XmlTagHtmlViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: XmlTagHtmlViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+XmlTagHtmlViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: XmlTagHtmlViewComponent, selector: "croco-html-xml-tag-html-view", inputs: { html: "html" }, ngImport: i0, template: "<div class=\"col\" [innerHTML]=\"html\">\r\n    \r\n</div>", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: XmlTagHtmlViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'croco-html-xml-tag-html-view', template: "<div class=\"col\" [innerHTML]=\"html\">\r\n    \r\n</div>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { html: [{
+                type: Input
+            }] } });
+
+class XmlTagTextViewComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+XmlTagTextViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: XmlTagTextViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+XmlTagTextViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: XmlTagTextViewComponent, selector: "croco-html-xml-tag-text-view", inputs: { item: "item" }, ngImport: i0, template: "<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'left'\" style=\"text-align: left;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <span *ngIf=\"item.data.html.length > 0\" [innerHtml]=\"item.data.html\"></span>\r\n</div>\r\n\r\n<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'right'\" style=\"text-align: right;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <span *ngIf=\"item.data.html.length > 0\" [innerHtml]=\"item.data.html\"></span>\r\n</div>\r\n\r\n<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'center'\" style=\"text-align: center;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <span *ngIf=\"item.data.html.length > 0\" [innerHtml]=\"item.data.html\"></span>\r\n</div>\r\n\r\n<div *ngIf=\"!item.data.validationResult.isSucceeded\" class=\"red\" style=\"margin-top: 10px;\" >\r\n    <h4>\u0414\u043E\u043F\u0443\u0449\u0435\u043D\u0430 \u043E\u0448\u0438\u0431\u043A\u0430 \u0432 \u0442\u0435\u0433\u0435 &lt;text&gt;</h4>\r\n    <span>\r\n        {{item.data.validationResult.message}}\r\n    </span>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: XmlTagTextViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'croco-html-xml-tag-text-view', template: "<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'left'\" style=\"text-align: left;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <span *ngIf=\"item.data.html.length > 0\" [innerHtml]=\"item.data.html\"></span>\r\n</div>\r\n\r\n<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'right'\" style=\"text-align: right;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <span *ngIf=\"item.data.html.length > 0\" [innerHtml]=\"item.data.html\"></span>\r\n</div>\r\n\r\n<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'center'\" style=\"text-align: center;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <span *ngIf=\"item.data.html.length > 0\" [innerHtml]=\"item.data.html\"></span>\r\n</div>\r\n\r\n<div *ngIf=\"!item.data.validationResult.isSucceeded\" class=\"red\" style=\"margin-top: 10px;\" >\r\n    <h4>\u0414\u043E\u043F\u0443\u0449\u0435\u043D\u0430 \u043E\u0448\u0438\u0431\u043A\u0430 \u0432 \u0442\u0435\u0433\u0435 &lt;text&gt;</h4>\r\n    <span>\r\n        {{item.data.validationResult.message}}\r\n    </span>\r\n</div>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { item: [{
+                type: Input
+            }] } });
+
+class XmlTagHeaderInnerTextViewComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+XmlTagHeaderInnerTextViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: XmlTagHeaderInnerTextViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+XmlTagHeaderInnerTextViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: XmlTagHeaderInnerTextViewComponent, selector: "croco-html-xml-tag-header-inner-text-view", inputs: { item: "item" }, ngImport: i0, template: "<h1 *ngIf=\"item.type === 'h1'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h1>\r\n<h2 *ngIf=\"item.type === 'h2'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h2>\r\n<h3 *ngIf=\"item.type === 'h3'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h3>\r\n<h4 *ngIf=\"item.type === 'h4'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h4>\r\n<h5 *ngIf=\"item.type === 'h5'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h5>\r\n<h6 *ngIf=\"item.type === 'h6'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h6>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: XmlTagHeaderInnerTextViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'croco-html-xml-tag-header-inner-text-view', template: "<h1 *ngIf=\"item.type === 'h1'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h1>\r\n<h2 *ngIf=\"item.type === 'h2'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h2>\r\n<h3 *ngIf=\"item.type === 'h3'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h3>\r\n<h4 *ngIf=\"item.type === 'h4'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h4>\r\n<h5 *ngIf=\"item.type === 'h5'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h5>\r\n<h6 *ngIf=\"item.type === 'h6'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h6>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { item: [{
+                type: Input
+            }] } });
+
+class XmlTagHeaderTextViewComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+XmlTagHeaderTextViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: XmlTagHeaderTextViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+XmlTagHeaderTextViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: XmlTagHeaderTextViewComponent, selector: "croco-html-xml-tag-header-text-view", inputs: { item: "item" }, ngImport: i0, template: "<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'left'\" style=\"text-align: left;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <croco-html-xml-tag-header-inner-text-view *ngIf=\"item.data.html.length > 0\"  [item]=\"item\">\r\n    </croco-html-xml-tag-header-inner-text-view>\r\n</div>\r\n\r\n<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'right'\" style=\"text-align: right;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <croco-html-xml-tag-header-inner-text-view *ngIf=\"item.data.html.length > 0\"  [item]=\"item\">\r\n    </croco-html-xml-tag-header-inner-text-view>\r\n</div>\r\n\r\n<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'center'\" style=\"text-align: center;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n\r\n    <croco-html-xml-tag-header-inner-text-view *ngIf=\"item.data.html.length > 0\"  [item]=\"item\">\r\n    </croco-html-xml-tag-header-inner-text-view>\r\n</div>\r\n\r\n<div *ngIf=\"!item.data.validationResult.isSucceeded\" class=\"red\" style=\"margin-top: 10px;\" >\r\n    <h4>\u0414\u043E\u043F\u0443\u0449\u0435\u043D\u0430 \u043E\u0448\u0438\u0431\u043A\u0430 \u0432 \u0442\u0435\u0433\u0435 &lt;text&gt;</h4>\r\n    <span>\r\n        {{item.data.validationResult.message}}\r\n    </span>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: XmlTagHeaderInnerTextViewComponent, selector: "croco-html-xml-tag-header-inner-text-view", inputs: ["item"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: XmlTagHeaderTextViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'croco-html-xml-tag-header-text-view', template: "<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'left'\" style=\"text-align: left;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <croco-html-xml-tag-header-inner-text-view *ngIf=\"item.data.html.length > 0\"  [item]=\"item\">\r\n    </croco-html-xml-tag-header-inner-text-view>\r\n</div>\r\n\r\n<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'right'\" style=\"text-align: right;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <croco-html-xml-tag-header-inner-text-view *ngIf=\"item.data.html.length > 0\"  [item]=\"item\">\r\n    </croco-html-xml-tag-header-inner-text-view>\r\n</div>\r\n\r\n<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'center'\" style=\"text-align: center;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n\r\n    <croco-html-xml-tag-header-inner-text-view *ngIf=\"item.data.html.length > 0\"  [item]=\"item\">\r\n    </croco-html-xml-tag-header-inner-text-view>\r\n</div>\r\n\r\n<div *ngIf=\"!item.data.validationResult.isSucceeded\" class=\"red\" style=\"margin-top: 10px;\" >\r\n    <h4>\u0414\u043E\u043F\u0443\u0449\u0435\u043D\u0430 \u043E\u0448\u0438\u0431\u043A\u0430 \u0432 \u0442\u0435\u0433\u0435 &lt;text&gt;</h4>\r\n    <span>\r\n        {{item.data.validationResult.message}}\r\n    </span>\r\n</div>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { item: [{
+                type: Input
+            }] } });
+
+class XmlTagViewComponent {
+    constructor() {
+        this.data = [];
+    }
+}
+XmlTagViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: XmlTagViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+XmlTagViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: XmlTagViewComponent, selector: "croco-html-xml-tag-view", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"\">\r\n    <div class=\"row\" *ngFor=\"let item of data\">\r\n        <div *ngIf=\"item.type === 'text'\">\r\n            <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'image'\" class=\"red\" style=\"margin-top: 10px;\" >\r\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>\r\n            <span>\r\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\r\n            </span>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'html-raw'\" [innerHTML]=\"item.data.innerHTML\">\r\n        </div>\r\n        <div *ngIf=\"item.type === 'h1' || item.type === 'h2' || item.type === 'h3' || item.type === 'h4' || item.type === 'h5' || item.type === 'h6'\">\r\n            <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'file-image'\">\r\n            <img class=\"mx-auto d-block img-fluid\" [src]=\"item.data.src\"/>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'table'\">\r\n    \r\n            <croco-html-xml-tag-html-view *ngIf=\"item.validationResult.isSucceeded\" [html]=\"item.bootstrapHtml\">\r\n            </croco-html-xml-tag-html-view>\r\n             \r\n            <app-tutor-baseapiresponse-banner \r\n                *ngIf=\"item.validationResult && !item.validationResult.isSucceeded\" \r\n                [message]=\"item.validationResult.message\">\r\n            </app-tutor-baseapiresponse-banner>\r\n        </div>\r\n    \r\n        <div *ngIf=\"item.type === 'rich-text'\">\r\n            <croco-html-xml-tag-text-view [richTextData]=\"item\"></croco-html-xml-tag-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'external-video'\">\r\n            <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'unsupported-tag'\" class=\"red\" style=\"margin-top: 10px;\" >\r\n            <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\r\n            <span>\r\n                {{item.data.tagString}}\r\n            </span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".red{background-color:#c94444;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: XmlTagHtmlViewComponent, selector: "croco-html-xml-tag-html-view", inputs: ["html"] }, { kind: "component", type: XmlTagTextViewComponent, selector: "croco-html-xml-tag-text-view", inputs: ["item"] }, { kind: "component", type: XmlTagHeaderTextViewComponent, selector: "croco-html-xml-tag-header-text-view", inputs: ["item"] }, { kind: "component", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: XmlTagViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'croco-html-xml-tag-view', encapsulation: ViewEncapsulation.None, template: "<div class=\"\">\r\n    <div class=\"row\" *ngFor=\"let item of data\">\r\n        <div *ngIf=\"item.type === 'text'\">\r\n            <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'image'\" class=\"red\" style=\"margin-top: 10px;\" >\r\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>\r\n            <span>\r\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\r\n            </span>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'html-raw'\" [innerHTML]=\"item.data.innerHTML\">\r\n        </div>\r\n        <div *ngIf=\"item.type === 'h1' || item.type === 'h2' || item.type === 'h3' || item.type === 'h4' || item.type === 'h5' || item.type === 'h6'\">\r\n            <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'file-image'\">\r\n            <img class=\"mx-auto d-block img-fluid\" [src]=\"item.data.src\"/>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'table'\">\r\n    \r\n            <croco-html-xml-tag-html-view *ngIf=\"item.validationResult.isSucceeded\" [html]=\"item.bootstrapHtml\">\r\n            </croco-html-xml-tag-html-view>\r\n             \r\n            <app-tutor-baseapiresponse-banner \r\n                *ngIf=\"item.validationResult && !item.validationResult.isSucceeded\" \r\n                [message]=\"item.validationResult.message\">\r\n            </app-tutor-baseapiresponse-banner>\r\n        </div>\r\n    \r\n        <div *ngIf=\"item.type === 'rich-text'\">\r\n            <croco-html-xml-tag-text-view [richTextData]=\"item\"></croco-html-xml-tag-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'external-video'\">\r\n            <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'unsupported-tag'\" class=\"red\" style=\"margin-top: 10px;\" >\r\n            <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\r\n            <span>\r\n                {{item.data.tagString}}\r\n            </span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".red{background-color:#c94444;color:#fff}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+                type: Input
+            }] } });
+
 class AngularMaterialTableMethods {
     static getAngularMaterialTableData(columns, rows) {
         let data = [];
@@ -604,7 +674,7 @@ class TextSimpleMethods {
         };
     }
 }
-TextSimpleMethods.supportedTags = ["sup", "sub", "strong", "b", "i"];
+TextSimpleMethods.supportedTags = ["sup", "sub", "strong", "b", "i", "u"];
 
 class BootstrapTableMethods {
     static BuildTable(data) {
@@ -1001,8 +1071,8 @@ class XmlExtensions {
 
 class TextEditorComponent {
     constructor() {
-        this.myForm = new FormGroup({
-            "innerHtml": new FormControl()
+        this.myForm = new UntypedFormGroup({
+            "innerHtml": new UntypedFormControl()
         });
         this.onTagUpdated = new EventEmitter();
     }
@@ -1012,11 +1082,11 @@ class TextEditorComponent {
         return `<${this.tag.tagDescription.tag}>${this.tag.innerHtml}<${this.tag.tagDescription.tag}/>`;
     }
 }
-TextEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TextEditorComponent, selector: "croco-html-text-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "<div *ngIf=\"tag.presentOrEdit\">\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n\r\n    <div style=\"text-align: left;\" *ngIf=\"tag.attributes['h-align'] === 'left'\" [innerHtml]=\"getInnerHtml()\">\r\n    </div>\r\n    <div style=\"text-align: right;\" *ngIf=\"tag.attributes['h-align'] === 'right'\" [innerHtml]=\"getInnerHtml()\">\r\n    </div>\r\n    <div style=\"text-align: center;\" *ngIf=\"tag.attributes['h-align'] === 'center'\" [innerHtml]=\"getInnerHtml()\">\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n    <div style=\"overflow-x: auto;\">\r\n        <mat-button-toggle-group [(ngModel)]=\"tag.attributes['h-align']\">\r\n            <mat-button-toggle value=\"center\">\r\n                \u041F\u043E \u0446\u0435\u043D\u0442\u0440\u0443 <mat-icon>format_align_center</mat-icon>\r\n            </mat-button-toggle>\r\n            <mat-button-toggle value=\"left\">\r\n                \u0421\u043B\u0435\u0432\u0430 <mat-icon>format_align_left</mat-icon>\r\n            </mat-button-toggle>\r\n            <mat-button-toggle value=\"right\">\r\n                \u0421\u043F\u0440\u0430\u0432\u0430 <mat-icon> format_align_right</mat-icon>\r\n            </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n    </div>\r\n\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n    <form [formGroup]=\"myForm\">\r\n        <mat-form-field class=\"w-100\">\r\n            <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\r\n                cdkAutosizeMinRows=\"1\"\r\n                placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430\"\r\n                formControlName=\"innerHtml\"\r\n                [(ngModel)]=\"tag.innerHtml\"></textarea>\r\n        </mat-form-field>\r\n    </form>\r\n</div>", styles: [""], components: [{ type: i1$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$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$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.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i5$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$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextEditorComponent, decorators: [{
+TextEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TextEditorComponent, selector: "croco-html-text-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "<div *ngIf=\"tag.presentOrEdit\">\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n\r\n    <div style=\"text-align: left;\" *ngIf=\"tag.attributes['h-align'] === 'left'\" [innerHtml]=\"getInnerHtml()\">\r\n    </div>\r\n    <div style=\"text-align: right;\" *ngIf=\"tag.attributes['h-align'] === 'right'\" [innerHtml]=\"getInnerHtml()\">\r\n    </div>\r\n    <div style=\"text-align: center;\" *ngIf=\"tag.attributes['h-align'] === 'center'\" [innerHtml]=\"getInnerHtml()\">\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n    <div style=\"overflow-x: auto;\">\r\n        <mat-button-toggle-group [(ngModel)]=\"tag.attributes['h-align']\">\r\n            <mat-button-toggle value=\"center\">\r\n                \u041F\u043E \u0446\u0435\u043D\u0442\u0440\u0443 <mat-icon>format_align_center</mat-icon>\r\n            </mat-button-toggle>\r\n            <mat-button-toggle value=\"left\">\r\n                \u0421\u043B\u0435\u0432\u0430 <mat-icon>format_align_left</mat-icon>\r\n            </mat-button-toggle>\r\n            <mat-button-toggle value=\"right\">\r\n                \u0421\u043F\u0440\u0430\u0432\u0430 <mat-icon> format_align_right</mat-icon>\r\n            </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n    </div>\r\n\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n    <form [formGroup]=\"myForm\">\r\n        <mat-form-field class=\"w-100\">\r\n            <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\r\n                cdkAutosizeMinRows=\"1\"\r\n                placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430\"\r\n                formControlName=\"innerHtml\"\r\n                [(ngModel)]=\"tag.innerHtml\"></textarea>\r\n        </mat-form-field>\r\n    </form>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-text-editor', template: "<div *ngIf=\"tag.presentOrEdit\">\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n\r\n    <div style=\"text-align: left;\" *ngIf=\"tag.attributes['h-align'] === 'left'\" [innerHtml]=\"getInnerHtml()\">\r\n    </div>\r\n    <div style=\"text-align: right;\" *ngIf=\"tag.attributes['h-align'] === 'right'\" [innerHtml]=\"getInnerHtml()\">\r\n    </div>\r\n    <div style=\"text-align: center;\" *ngIf=\"tag.attributes['h-align'] === 'center'\" [innerHtml]=\"getInnerHtml()\">\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n    <div style=\"overflow-x: auto;\">\r\n        <mat-button-toggle-group [(ngModel)]=\"tag.attributes['h-align']\">\r\n            <mat-button-toggle value=\"center\">\r\n                \u041F\u043E \u0446\u0435\u043D\u0442\u0440\u0443 <mat-icon>format_align_center</mat-icon>\r\n            </mat-button-toggle>\r\n            <mat-button-toggle value=\"left\">\r\n                \u0421\u043B\u0435\u0432\u0430 <mat-icon>format_align_left</mat-icon>\r\n            </mat-button-toggle>\r\n            <mat-button-toggle value=\"right\">\r\n                \u0421\u043F\u0440\u0430\u0432\u0430 <mat-icon> format_align_right</mat-icon>\r\n            </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n    </div>\r\n\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n    <form [formGroup]=\"myForm\">\r\n        <mat-form-field class=\"w-100\">\r\n            <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\r\n                cdkAutosizeMinRows=\"1\"\r\n                placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430\"\r\n                formControlName=\"innerHtml\"\r\n                [(ngModel)]=\"tag.innerHtml\"></textarea>\r\n        </mat-form-field>\r\n    </form>\r\n</div>", styles: [""] }]
+            args: [{ selector: 'croco-html-text-editor', template: "<div *ngIf=\"tag.presentOrEdit\">\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n\r\n    <div style=\"text-align: left;\" *ngIf=\"tag.attributes['h-align'] === 'left'\" [innerHtml]=\"getInnerHtml()\">\r\n    </div>\r\n    <div style=\"text-align: right;\" *ngIf=\"tag.attributes['h-align'] === 'right'\" [innerHtml]=\"getInnerHtml()\">\r\n    </div>\r\n    <div style=\"text-align: center;\" *ngIf=\"tag.attributes['h-align'] === 'center'\" [innerHtml]=\"getInnerHtml()\">\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n    <div style=\"overflow-x: auto;\">\r\n        <mat-button-toggle-group [(ngModel)]=\"tag.attributes['h-align']\">\r\n            <mat-button-toggle value=\"center\">\r\n                \u041F\u043E \u0446\u0435\u043D\u0442\u0440\u0443 <mat-icon>format_align_center</mat-icon>\r\n            </mat-button-toggle>\r\n            <mat-button-toggle value=\"left\">\r\n                \u0421\u043B\u0435\u0432\u0430 <mat-icon>format_align_left</mat-icon>\r\n            </mat-button-toggle>\r\n            <mat-button-toggle value=\"right\">\r\n                \u0421\u043F\u0440\u0430\u0432\u0430 <mat-icon> format_align_right</mat-icon>\r\n            </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n    </div>\r\n\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n    <form [formGroup]=\"myForm\">\r\n        <mat-form-field class=\"w-100\">\r\n            <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\r\n                cdkAutosizeMinRows=\"1\"\r\n                placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430\"\r\n                formControlName=\"innerHtml\"\r\n                [(ngModel)]=\"tag.innerHtml\"></textarea>\r\n        </mat-form-field>\r\n    </form>\r\n</div>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { tag: [{
                 type: Input
             }], onTagUpdated: [{
@@ -1041,11 +1111,11 @@ class MainEditorBlockComponent {
     ngOnInit() {
     }
 }
-MainEditorBlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MainEditorBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MainEditorBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MainEditorBlockComponent, selector: "croco-html-main-editor-block", inputs: { tag: "tag" }, outputs: { onTagSaved: "onTagSaved", onTagRemoved: "onTagRemoved" }, ngImport: i0, template: "<div>\r\n  <div>\r\n    <div *ngIf=\"textTags.includes(tag.tagDescription.tag)\">\r\n      <croco-html-text-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\r\n      </croco-html-text-editor>\r\n    </div>\r\n\r\n    <div *ngIf=\"tag.tagDescription.tag === 'file-image'\"> \r\n      <croco-html-image-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\r\n      </croco-html-image-editor>\r\n    </div>\r\n\r\n    <div *ngIf=\"tag.tagDescription.tag === 'external-video'\">\r\n      <croco-html-external-video-block (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\r\n      </croco-html-external-video-block>\r\n    </div>\r\n\r\n    <div *ngIf=\"tag.tagDescription.tag === 'html-raw'\">\r\n      <croco-html-html-raw-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\r\n      </croco-html-html-raw-editor>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"d-flex justify-content-between\">\r\n    <div class=\"d-flex justify-content-end align-self-center\">\r\n      <div>\r\n        <button *ngIf=\"tag.presentOrEdit\" (click)=\"tag.presentOrEdit = false\" mat-icon-button>\r\n          <mat-icon>edit</mat-icon>\r\n        </button>\r\n        <button *ngIf=\"!tag.presentOrEdit\" (click)=\"save()\" mat-icon-button>\r\n          <mat-icon>save</mat-icon>\r\n        </button>\r\n        <button (click)=\"deleteItem()\" mat-icon-button color=\"warn\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</div>", styles: [""], 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.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$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MainEditorBlockComponent, decorators: [{
+MainEditorBlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MainEditorBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MainEditorBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MainEditorBlockComponent, selector: "croco-html-main-editor-block", inputs: { tag: "tag" }, outputs: { onTagSaved: "onTagSaved", onTagRemoved: "onTagRemoved" }, ngImport: i0, template: "<div>\r\n  <div>\r\n    <div *ngIf=\"textTags.includes(tag.tagDescription.tag)\">\r\n      <croco-html-text-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\r\n      </croco-html-text-editor>\r\n    </div>\r\n\r\n    <div *ngIf=\"tag.tagDescription.tag === 'file-image'\"> \r\n      <croco-html-image-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\r\n      </croco-html-image-editor>\r\n    </div>\r\n\r\n    <div *ngIf=\"tag.tagDescription.tag === 'external-video'\">\r\n      <croco-html-external-video-block (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\r\n      </croco-html-external-video-block>\r\n    </div>\r\n\r\n    <div *ngIf=\"tag.tagDescription.tag === 'html-raw'\">\r\n      <croco-html-html-raw-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\r\n      </croco-html-html-raw-editor>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"d-flex justify-content-between\">\r\n    <div class=\"d-flex justify-content-end align-self-center\">\r\n      <div>\r\n        <button *ngIf=\"tag.presentOrEdit\" (click)=\"tag.presentOrEdit = false\" mat-icon-button>\r\n          <mat-icon>edit</mat-icon>\r\n        </button>\r\n        <button *ngIf=\"!tag.presentOrEdit\" (click)=\"save()\" mat-icon-button>\r\n          <mat-icon>save</mat-icon>\r\n        </button>\r\n        <button (click)=\"deleteItem()\" mat-icon-button color=\"warn\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TextEditorComponent, selector: "croco-html-text-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: ExternalVideoBlockComponent, selector: "croco-html-external-video-block", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: ImageEditorComponent, selector: "croco-html-image-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: HtmlRawEditorComponent, selector: "croco-html-html-raw-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MainEditorBlockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-main-editor-block', template: "<div>\r\n  <div>\r\n    <div *ngIf=\"textTags.includes(tag.tagDescription.tag)\">\r\n      <croco-html-text-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\r\n      </croco-html-text-editor>\r\n    </div>\r\n\r\n    <div *ngIf=\"tag.tagDescription.tag === 'file-image'\"> \r\n      <croco-html-image-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\r\n      </croco-html-image-editor>\r\n    </div>\r\n\r\n    <div *ngIf=\"tag.tagDescription.tag === 'external-video'\">\r\n      <croco-html-external-video-block (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\r\n      </croco-html-external-video-block>\r\n    </div>\r\n\r\n    <div *ngIf=\"tag.tagDescription.tag === 'html-raw'\">\r\n      <croco-html-html-raw-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\r\n      </croco-html-html-raw-editor>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"d-flex justify-content-between\">\r\n    <div class=\"d-flex justify-content-end align-self-center\">\r\n      <div>\r\n        <button *ngIf=\"tag.presentOrEdit\" (click)=\"tag.presentOrEdit = false\" mat-icon-button>\r\n          <mat-icon>edit</mat-icon>\r\n        </button>\r\n        <button *ngIf=\"!tag.presentOrEdit\" (click)=\"save()\" mat-icon-button>\r\n          <mat-icon>save</mat-icon>\r\n        </button>\r\n        <button (click)=\"deleteItem()\" mat-icon-button color=\"warn\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</div>", styles: [""] }]
+            args: [{ selector: 'croco-html-main-editor-block', template: "<div>\r\n  <div>\r\n    <div *ngIf=\"textTags.includes(tag.tagDescription.tag)\">\r\n      <croco-html-text-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\r\n      </croco-html-text-editor>\r\n    </div>\r\n\r\n    <div *ngIf=\"tag.tagDescription.tag === 'file-image'\"> \r\n      <croco-html-image-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\r\n      </croco-html-image-editor>\r\n    </div>\r\n\r\n    <div *ngIf=\"tag.tagDescription.tag === 'external-video'\">\r\n      <croco-html-external-video-block (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\r\n      </croco-html-external-video-block>\r\n    </div>\r\n\r\n    <div *ngIf=\"tag.tagDescription.tag === 'html-raw'\">\r\n      <croco-html-html-raw-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\r\n      </croco-html-html-raw-editor>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"d-flex justify-content-between\">\r\n    <div class=\"d-flex justify-content-end align-self-center\">\r\n      <div>\r\n        <button *ngIf=\"tag.presentOrEdit\" (click)=\"tag.presentOrEdit = false\" mat-icon-button>\r\n          <mat-icon>edit</mat-icon>\r\n        </button>\r\n        <button *ngIf=\"!tag.presentOrEdit\" (click)=\"save()\" mat-icon-button>\r\n          <mat-icon>save</mat-icon>\r\n        </button>\r\n        <button (click)=\"deleteItem()\" mat-icon-button color=\"warn\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</div>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { tag: [{
                 type: Input
             }], onTagSaved: [{
@@ -1078,13 +1148,24 @@ DefaultTags.htmlRawTag = {
     tag: HtmlRawTagDataConsts.TagName, displayValue: 'Html разметка'
 };
 class VisualEditorComponent {
+    isHtmlSet() {
+        return this.html.startsWith("<body>");
+    }
+    clearHtml() {
+        this.html = "";
+        this.recalculateBodyTags();
+    }
+    getHtml() {
+        this.recalculateHtml();
+        return this.html;
+    }
     constructor(_cdref) {
         this._cdref = _cdref;
         this.isLoading = false;
         this.loadingText = "Идёт загрузка";
         this.showMarkUp = true;
-        this.myForm = new FormGroup({
-            "html": new FormControl(),
+        this.myForm = new UntypedFormGroup({
+            "html": new UntypedFormControl(),
         });
         this.tags = [];
         this.useHtmlRaw = false;
@@ -1093,17 +1174,6 @@ class VisualEditorComponent {
         this.rendered = new EventEmitter();
         this.bodyTags = [];
     }
-    isHtmlSet() {
-        return this.html.startsWith("<body>");
-    }
-    clearHtml() {
-        this.html = "";
-        this.recalculateBodyTags();
-    }
-    getHtml() {
-        this.recalculateHtml();
-        return this.html;
-    }
     ngAfterViewInit() {
         this.rendered.emit(true);
     }
@@ -1174,11 +1244,11 @@ class VisualEditorComponent {
         this.selectedValue = this.tags[0].tag;
     }
 }
-VisualEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: VisualEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-VisualEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: VisualEditorComponent, selector: "croco-visual-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged", rendered: "rendered" }, ngImport: i0, template: "<div *ngIf=\"isLoading\">\r\n    <div>\r\n        <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\r\n        <div style=\"text-align: center;\">{{loadingText}}</div>\r\n    </div>\r\n    <div style=\"height: 10px;\"></div>\r\n</div>\r\n\r\n<div [hidden]=\"isLoading\">\r\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n        <div *ngFor=\"let tag of bodyTags; let i = index\" cdkDrag>\r\n            <mat-card>\r\n                <div class=\"d-flex justify-content-between\">\r\n                    <div class=\"example-handle\" cdkDragHandle>\r\n                        <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                            <path\r\n                                d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\">\r\n                            </path>\r\n                            <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n                        </svg>\r\n                    </div>\r\n                    <div>\r\n                        <mat-chip-list aria-label=\"Tag display value\">\r\n                            <mat-chip color=\"primary\" selected>{{tag.tagDescription.displayValue}}</mat-chip>\r\n                        </mat-chip-list>\r\n                    </div>\r\n                </div>\r\n    \r\n                <div style=\"height: 15px;\"></div>\r\n    \r\n                <croco-html-main-editor-block [tag]=\"tag\" \r\n                    (onTagSaved)=\"onTagSavedHandler($event)\"\r\n                    (onTagRemoved)=\"onTagRemovedHandler(i)\">\r\n                </croco-html-main-editor-block>\r\n            </mat-card>\r\n    \r\n            <div style=\"height: 10px;\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n\r\n<div [hidden]=\"isLoading\">\r\n    <mat-card>\r\n        <div class=\"row d-flex align-items-center\">\r\n            <div class=\"col-12\">\r\n                <mat-form-field class=\"w-100\" appearance=\"fill\">\r\n                    <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0435\u0433</mat-label>\r\n                    <mat-select [(ngModel)]=\"selectedValue\">\r\n                        <mat-option *ngFor=\"let tag of tags\" [value]=\"tag.tag\">\r\n                            {{tag.displayValue}}\r\n                        </mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n            </div>\r\n            <div class=\"col-12\">\r\n                <button (click)=\"addTag()\" class=\"w-100\" mat-stroked-button>\r\n                    \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </mat-card>\r\n\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n</div>\r\n\r\n<div [hidden]=\"isLoading\">\r\n    <mat-card>\r\n        <div class=\"row d-flex align-items-center\">\r\n            <div class=\"col-12\">\r\n                <croco-add-files-btn \r\n                    (filesTagsReady)=\"filesTagsReadyHandler($event)\"\r\n                    (postFilesStarted)=\"postFilesStartedEventHandler($event)\"\r\n                    class=\"w-100\">\r\n                </croco-add-files-btn>\r\n            </div>\r\n        </div>\r\n    </mat-card>\r\n\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\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$3.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: i2$3.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i3$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.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i2.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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i11.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i3$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.MatLabel, selector: "mat-label" }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: VisualEditorComponent, decorators: [{
+VisualEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: VisualEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+VisualEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: VisualEditorComponent, selector: "croco-visual-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged", rendered: "rendered" }, ngImport: i0, template: "<div *ngIf=\"isLoading\">\r\n    <div>\r\n        <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\r\n        <div style=\"text-align: center;\">{{loadingText}}</div>\r\n    </div>\r\n    <div style=\"height: 10px;\"></div>\r\n</div>\r\n\r\n<div [hidden]=\"isLoading\">\r\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n        <div *ngFor=\"let tag of bodyTags; let i = index\" cdkDrag>\r\n            <mat-card>\r\n                <div class=\"d-flex justify-content-between\">\r\n                    <div class=\"example-handle\" cdkDragHandle>\r\n                        <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                            <path\r\n                                d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\">\r\n                            </path>\r\n                            <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n                        </svg>\r\n                    </div>\r\n                    <div>\r\n                        <mat-chip-listbox aria-label=\"Tag display value\">\r\n                            <mat-chip-option color=\"primary\" selected>{{tag.tagDescription.displayValue}}</mat-chip-option>\r\n                        </mat-chip-listbox>\r\n                    </div>\r\n                </div>\r\n\r\n                <div style=\"height: 15px;\"></div>\r\n\r\n                <croco-html-main-editor-block [tag]=\"tag\"\r\n                    (onTagSaved)=\"onTagSavedHandler($event)\"\r\n                    (onTagRemoved)=\"onTagRemovedHandler(i)\">\r\n                </croco-html-main-editor-block>\r\n            </mat-card>\r\n\r\n            <div style=\"height: 10px;\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n\r\n<div [hidden]=\"isLoading\">\r\n    <mat-card>\r\n        <div class=\"row d-flex align-items-center\">\r\n            <div class=\"col-12\">\r\n                <mat-form-field class=\"w-100\" appearance=\"fill\">\r\n                    <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0435\u0433</mat-label>\r\n                    <mat-select [(ngModel)]=\"selectedValue\">\r\n                        <mat-option *ngFor=\"let tag of tags\" [value]=\"tag.tag\">\r\n                            {{tag.displayValue}}\r\n                        </mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n            </div>\r\n            <div class=\"col-12\">\r\n                <button (click)=\"addTag()\" class=\"w-100\" mat-stroked-button>\r\n                    \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </mat-card>\r\n\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n</div>\r\n\r\n<div [hidden]=\"isLoading\">\r\n    <mat-card>\r\n        <div class=\"row d-flex align-items-center\">\r\n            <div class=\"col-12\">\r\n                <croco-add-files-btn\r\n                    (filesTagsReady)=\"filesTagsReadyHandler($event)\"\r\n                    (postFilesStarted)=\"postFilesStartedEventHandler($event)\"\r\n                    class=\"w-100\">\r\n                </croco-add-files-btn>\r\n            </div>\r\n        </div>\r\n    </mat-card>\r\n\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n</div>\r\n", 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"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i4$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i5$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i8.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i10.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i10.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MainEditorBlockComponent, selector: "croco-html-main-editor-block", inputs: ["tag"], outputs: ["onTagSaved", "onTagRemoved"] }, { kind: "component", type: AddFilesBtnComponent, selector: "croco-add-files-btn", outputs: ["postFilesStarted", "filesTagsReady"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: VisualEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-visual-editor', template: "<div *ngIf=\"isLoading\">\r\n    <div>\r\n        <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\r\n        <div style=\"text-align: center;\">{{loadingText}}</div>\r\n    </div>\r\n    <div style=\"height: 10px;\"></div>\r\n</div>\r\n\r\n<div [hidden]=\"isLoading\">\r\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n        <div *ngFor=\"let tag of bodyTags; let i = index\" cdkDrag>\r\n            <mat-card>\r\n                <div class=\"d-flex justify-content-between\">\r\n                    <div class=\"example-handle\" cdkDragHandle>\r\n                        <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                            <path\r\n                                d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\">\r\n                            </path>\r\n                            <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n                        </svg>\r\n                    </div>\r\n                    <div>\r\n                        <mat-chip-list aria-label=\"Tag display value\">\r\n                            <mat-chip color=\"primary\" selected>{{tag.tagDescription.displayValue}}</mat-chip>\r\n                        </mat-chip-list>\r\n                    </div>\r\n                </div>\r\n    \r\n                <div style=\"height: 15px;\"></div>\r\n    \r\n                <croco-html-main-editor-block [tag]=\"tag\" \r\n                    (onTagSaved)=\"onTagSavedHandler($event)\"\r\n                    (onTagRemoved)=\"onTagRemovedHandler(i)\">\r\n                </croco-html-main-editor-block>\r\n            </mat-card>\r\n    \r\n            <div style=\"height: 10px;\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n\r\n<div [hidden]=\"isLoading\">\r\n    <mat-card>\r\n        <div class=\"row d-flex align-items-center\">\r\n            <div class=\"col-12\">\r\n                <mat-form-field class=\"w-100\" appearance=\"fill\">\r\n                    <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0435\u0433</mat-label>\r\n                    <mat-select [(ngModel)]=\"selectedValue\">\r\n                        <mat-option *ngFor=\"let tag of tags\" [value]=\"tag.tag\">\r\n                            {{tag.displayValue}}\r\n                        </mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n            </div>\r\n            <div class=\"col-12\">\r\n                <button (click)=\"addTag()\" class=\"w-100\" mat-stroked-button>\r\n                    \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </mat-card>\r\n\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n</div>\r\n\r\n<div [hidden]=\"isLoading\">\r\n    <mat-card>\r\n        <div class=\"row d-flex align-items-center\">\r\n            <div class=\"col-12\">\r\n                <croco-add-files-btn \r\n                    (filesTagsReady)=\"filesTagsReadyHandler($event)\"\r\n                    (postFilesStarted)=\"postFilesStartedEventHandler($event)\"\r\n                    class=\"w-100\">\r\n                </croco-add-files-btn>\r\n            </div>\r\n        </div>\r\n    </mat-card>\r\n\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\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"] }]
+            args: [{ selector: 'croco-visual-editor', template: "<div *ngIf=\"isLoading\">\r\n    <div>\r\n        <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\r\n        <div style=\"text-align: center;\">{{loadingText}}</div>\r\n    </div>\r\n    <div style=\"height: 10px;\"></div>\r\n</div>\r\n\r\n<div [hidden]=\"isLoading\">\r\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n        <div *ngFor=\"let tag of bodyTags; let i = index\" cdkDrag>\r\n            <mat-card>\r\n                <div class=\"d-flex justify-content-between\">\r\n                    <div class=\"example-handle\" cdkDragHandle>\r\n                        <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                            <path\r\n                                d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\">\r\n                            </path>\r\n                            <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n                        </svg>\r\n                    </div>\r\n                    <div>\r\n                        <mat-chip-listbox aria-label=\"Tag display value\">\r\n                            <mat-chip-option color=\"primary\" selected>{{tag.tagDescription.displayValue}}</mat-chip-option>\r\n                        </mat-chip-listbox>\r\n                    </div>\r\n                </div>\r\n\r\n                <div style=\"height: 15px;\"></div>\r\n\r\n                <croco-html-main-editor-block [tag]=\"tag\"\r\n                    (onTagSaved)=\"onTagSavedHandler($event)\"\r\n                    (onTagRemoved)=\"onTagRemovedHandler(i)\">\r\n                </croco-html-main-editor-block>\r\n            </mat-card>\r\n\r\n            <div style=\"height: 10px;\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n\r\n<div [hidden]=\"isLoading\">\r\n    <mat-card>\r\n        <div class=\"row d-flex align-items-center\">\r\n            <div class=\"col-12\">\r\n                <mat-form-field class=\"w-100\" appearance=\"fill\">\r\n                    <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0435\u0433</mat-label>\r\n                    <mat-select [(ngModel)]=\"selectedValue\">\r\n                        <mat-option *ngFor=\"let tag of tags\" [value]=\"tag.tag\">\r\n                            {{tag.displayValue}}\r\n                        </mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n            </div>\r\n            <div class=\"col-12\">\r\n                <button (click)=\"addTag()\" class=\"w-100\" mat-stroked-button>\r\n                    \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </mat-card>\r\n\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n</div>\r\n\r\n<div [hidden]=\"isLoading\">\r\n    <mat-card>\r\n        <div class=\"row d-flex align-items-center\">\r\n            <div class=\"col-12\">\r\n                <croco-add-files-btn\r\n                    (filesTagsReady)=\"filesTagsReadyHandler($event)\"\r\n                    (postFilesStarted)=\"postFilesStartedEventHandler($event)\"\r\n                    class=\"w-100\">\r\n                </croco-add-files-btn>\r\n            </div>\r\n        </div>\r\n    </mat-card>\r\n\r\n    <div style=\"height: 10px;\">\r\n    </div>\r\n</div>\r\n", 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"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { showMarkUp: [{
                 type: Input
             }], useHtmlRaw: [{
@@ -1193,84 +1263,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Output
             }] } });
 
-class XmlTagTextViewComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-}
-XmlTagTextViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: XmlTagTextViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-XmlTagTextViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: XmlTagTextViewComponent, selector: "croco-html-xml-tag-text-view", inputs: { item: "item" }, ngImport: i0, template: "<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'left'\" style=\"text-align: left;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <span *ngIf=\"item.data.html.length > 0\" [innerHtml]=\"item.data.html\"></span>\r\n</div>\r\n\r\n<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'right'\" style=\"text-align: right;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <span *ngIf=\"item.data.html.length > 0\" [innerHtml]=\"item.data.html\"></span>\r\n</div>\r\n\r\n<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'center'\" style=\"text-align: center;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <span *ngIf=\"item.data.html.length > 0\" [innerHtml]=\"item.data.html\"></span>\r\n</div>\r\n\r\n<div *ngIf=\"!item.data.validationResult.isSucceeded\" class=\"red\" style=\"margin-top: 10px;\" >\r\n    <h4>\u0414\u043E\u043F\u0443\u0449\u0435\u043D\u0430 \u043E\u0448\u0438\u0431\u043A\u0430 \u0432 \u0442\u0435\u0433\u0435 &lt;text&gt;</h4>\r\n    <span>\r\n        {{item.data.validationResult.message}}\r\n    </span>\r\n</div>", styles: [""], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: XmlTagTextViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'croco-html-xml-tag-text-view', template: "<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'left'\" style=\"text-align: left;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <span *ngIf=\"item.data.html.length > 0\" [innerHtml]=\"item.data.html\"></span>\r\n</div>\r\n\r\n<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'right'\" style=\"text-align: right;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <span *ngIf=\"item.data.html.length > 0\" [innerHtml]=\"item.data.html\"></span>\r\n</div>\r\n\r\n<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'center'\" style=\"text-align: center;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <span *ngIf=\"item.data.html.length > 0\" [innerHtml]=\"item.data.html\"></span>\r\n</div>\r\n\r\n<div *ngIf=\"!item.data.validationResult.isSucceeded\" class=\"red\" style=\"margin-top: 10px;\" >\r\n    <h4>\u0414\u043E\u043F\u0443\u0449\u0435\u043D\u0430 \u043E\u0448\u0438\u0431\u043A\u0430 \u0432 \u0442\u0435\u0433\u0435 &lt;text&gt;</h4>\r\n    <span>\r\n        {{item.data.validationResult.message}}\r\n    </span>\r\n</div>", styles: [""] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { item: [{
-                type: Input
-            }] } });
-
-class XmlTagHeaderInnerTextViewComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-}
-XmlTagHeaderInnerTextViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: XmlTagHeaderInnerTextViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-XmlTagHeaderInnerTextViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: XmlTagHeaderInnerTextViewComponent, selector: "croco-html-xml-tag-header-inner-text-view", inputs: { item: "item" }, ngImport: i0, template: "<h1 *ngIf=\"item.type === 'h1'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h1>\r\n<h2 *ngIf=\"item.type === 'h2'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h2>\r\n<h3 *ngIf=\"item.type === 'h3'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h3>\r\n<h4 *ngIf=\"item.type === 'h4'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h4>\r\n<h5 *ngIf=\"item.type === 'h5'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h5>\r\n<h6 *ngIf=\"item.type === 'h6'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h6>", styles: [""], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: XmlTagHeaderInnerTextViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'croco-html-xml-tag-header-inner-text-view', template: "<h1 *ngIf=\"item.type === 'h1'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h1>\r\n<h2 *ngIf=\"item.type === 'h2'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h2>\r\n<h3 *ngIf=\"item.type === 'h3'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h3>\r\n<h4 *ngIf=\"item.type === 'h4'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h4>\r\n<h5 *ngIf=\"item.type === 'h5'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h5>\r\n<h6 *ngIf=\"item.type === 'h6'\" \r\n    [innerHtml]=\"item.data.html\">\r\n</h6>", styles: [""] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { item: [{
-                type: Input
-            }] } });
-
-class XmlTagHeaderTextViewComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-}
-XmlTagHeaderTextViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: XmlTagHeaderTextViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-XmlTagHeaderTextViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: XmlTagHeaderTextViewComponent, selector: "croco-html-xml-tag-header-text-view", inputs: { item: "item" }, ngImport: i0, template: "<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'left'\" style=\"text-align: left;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <croco-html-xml-tag-header-inner-text-view *ngIf=\"item.data.html.length > 0\"  [item]=\"item\">\r\n    </croco-html-xml-tag-header-inner-text-view>\r\n</div>\r\n\r\n<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'right'\" style=\"text-align: right;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <croco-html-xml-tag-header-inner-text-view *ngIf=\"item.data.html.length > 0\"  [item]=\"item\">\r\n    </croco-html-xml-tag-header-inner-text-view>\r\n</div>\r\n\r\n<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'center'\" style=\"text-align: center;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n\r\n    <croco-html-xml-tag-header-inner-text-view *ngIf=\"item.data.html.length > 0\"  [item]=\"item\">\r\n    </croco-html-xml-tag-header-inner-text-view>\r\n</div>\r\n\r\n<div *ngIf=\"!item.data.validationResult.isSucceeded\" class=\"red\" style=\"margin-top: 10px;\" >\r\n    <h4>\u0414\u043E\u043F\u0443\u0449\u0435\u043D\u0430 \u043E\u0448\u0438\u0431\u043A\u0430 \u0432 \u0442\u0435\u0433\u0435 &lt;text&gt;</h4>\r\n    <span>\r\n        {{item.data.validationResult.message}}\r\n    </span>\r\n</div>", styles: [""], components: [{ type: XmlTagHeaderInnerTextViewComponent, selector: "croco-html-xml-tag-header-inner-text-view", inputs: ["item"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: XmlTagHeaderTextViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'croco-html-xml-tag-header-text-view', template: "<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'left'\" style=\"text-align: left;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <croco-html-xml-tag-header-inner-text-view *ngIf=\"item.data.html.length > 0\"  [item]=\"item\">\r\n    </croco-html-xml-tag-header-inner-text-view>\r\n</div>\r\n\r\n<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'right'\" style=\"text-align: right;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n    <croco-html-xml-tag-header-inner-text-view *ngIf=\"item.data.html.length > 0\"  [item]=\"item\">\r\n    </croco-html-xml-tag-header-inner-text-view>\r\n</div>\r\n\r\n<div *ngIf=\"item.data.validationResult.isSucceeded && item.data.horizontalAlignment === 'center'\" style=\"text-align: center;\">\r\n    <span *ngIf=\"item.data.html.length === 0 || !item.data.html\">&nbsp;</span>\r\n\r\n    <croco-html-xml-tag-header-inner-text-view *ngIf=\"item.data.html.length > 0\"  [item]=\"item\">\r\n    </croco-html-xml-tag-header-inner-text-view>\r\n</div>\r\n\r\n<div *ngIf=\"!item.data.validationResult.isSucceeded\" class=\"red\" style=\"margin-top: 10px;\" >\r\n    <h4>\u0414\u043E\u043F\u0443\u0449\u0435\u043D\u0430 \u043E\u0448\u0438\u0431\u043A\u0430 \u0432 \u0442\u0435\u0433\u0435 &lt;text&gt;</h4>\r\n    <span>\r\n        {{item.data.validationResult.message}}\r\n    </span>\r\n</div>", styles: [""] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { item: [{
-                type: Input
-            }] } });
-
-class XmlTagHtmlViewComponent {
-    constructor() {
-        this.html = "";
-    }
-}
-XmlTagHtmlViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: XmlTagHtmlViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-XmlTagHtmlViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: XmlTagHtmlViewComponent, selector: "croco-html-xml-tag-html-view", inputs: { html: "html" }, ngImport: i0, template: "<div class=\"col\" [innerHTML]=\"html\">\r\n    \r\n</div>", styles: [""] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: XmlTagHtmlViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'croco-html-xml-tag-html-view', template: "<div class=\"col\" [innerHTML]=\"html\">\r\n    \r\n</div>", styles: [""] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { html: [{
-                type: Input
-            }] } });
-
-class XmlTagViewComponent {
-    constructor() {
-        this.data = [];
-    }
-}
-XmlTagViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: XmlTagViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-XmlTagViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: XmlTagViewComponent, selector: "croco-html-xml-tag-view", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"\">\r\n    <div class=\"row\" *ngFor=\"let item of data\">\r\n        <div *ngIf=\"item.type === 'text'\">\r\n            <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'image'\" class=\"red\" style=\"margin-top: 10px;\" >\r\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>\r\n            <span>\r\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\r\n            </span>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'html-raw'\" [innerHTML]=\"item.data.innerHTML\">\r\n        </div>\r\n        <div *ngIf=\"item.type === 'h1' || item.type === 'h2' || item.type === 'h3' || item.type === 'h4' || item.type === 'h5' || item.type === 'h6'\">\r\n            <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'file-image'\">\r\n            <img class=\"mx-auto d-block img-fluid\" [src]=\"item.data.src\"/>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'table'\">\r\n    \r\n            <croco-html-xml-tag-html-view *ngIf=\"item.validationResult.isSucceeded\" [html]=\"item.bootstrapHtml\">\r\n            </croco-html-xml-tag-html-view>\r\n             \r\n            <app-tutor-baseapiresponse-banner \r\n                *ngIf=\"item.validationResult && !item.validationResult.isSucceeded\" \r\n                [message]=\"item.validationResult.message\">\r\n            </app-tutor-baseapiresponse-banner>\r\n        </div>\r\n    \r\n        <div *ngIf=\"item.type === 'rich-text'\">\r\n            <croco-html-xml-tag-text-view [richTextData]=\"item\"></croco-html-xml-tag-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'external-video'\">\r\n            <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'unsupported-tag'\" class=\"red\" style=\"margin-top: 10px;\" >\r\n            <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\r\n            <span>\r\n                {{item.data.tagString}}\r\n            </span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".red{background-color:#c94444;color:#fff}\n"], 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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: XmlTagViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'croco-html-xml-tag-view', encapsulation: ViewEncapsulation.None, template: "<div class=\"\">\r\n    <div class=\"row\" *ngFor=\"let item of data\">\r\n        <div *ngIf=\"item.type === 'text'\">\r\n            <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'image'\" class=\"red\" style=\"margin-top: 10px;\" >\r\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>\r\n            <span>\r\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\r\n            </span>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'html-raw'\" [innerHTML]=\"item.data.innerHTML\">\r\n        </div>\r\n        <div *ngIf=\"item.type === 'h1' || item.type === 'h2' || item.type === 'h3' || item.type === 'h4' || item.type === 'h5' || item.type === 'h6'\">\r\n            <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'file-image'\">\r\n            <img class=\"mx-auto d-block img-fluid\" [src]=\"item.data.src\"/>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'table'\">\r\n    \r\n            <croco-html-xml-tag-html-view *ngIf=\"item.validationResult.isSucceeded\" [html]=\"item.bootstrapHtml\">\r\n            </croco-html-xml-tag-html-view>\r\n             \r\n            <app-tutor-baseapiresponse-banner \r\n                *ngIf=\"item.validationResult && !item.validationResult.isSucceeded\" \r\n                [message]=\"item.validationResult.message\">\r\n            </app-tutor-baseapiresponse-banner>\r\n        </div>\r\n    \r\n        <div *ngIf=\"item.type === 'rich-text'\">\r\n            <croco-html-xml-tag-text-view [richTextData]=\"item\"></croco-html-xml-tag-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'external-video'\">\r\n            <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'unsupported-tag'\" class=\"red\" style=\"margin-top: 10px;\" >\r\n            <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\r\n            <span>\r\n                {{item.data.tagString}}\r\n            </span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".red{background-color:#c94444;color:#fff}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
-                type: Input
-            }] } });
-
 class ToPreviewPipe {
     transform(value) {
         return HtmlExtractionMethods.transformHtmlStringToBlocks(value);
     }
 }
-ToPreviewPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToPreviewPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-ToPreviewPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToPreviewPipe, name: "topreview" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToPreviewPipe, decorators: [{
+ToPreviewPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToPreviewPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ToPreviewPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: ToPreviewPipe, name: "topreview" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToPreviewPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'topreview'
@@ -1285,8 +1285,8 @@ class MainEditorComponent {
         this.visualEditorRendered = false;
         this.showMarkUp = true;
         this.useHtmlRaw = false;
-        this.myForm = new FormGroup({
-            "html": new FormControl(),
+        this.myForm = new UntypedFormGroup({
+            "html": new UntypedFormControl(),
         });
         this.html = "";
         this.onHtmlChanged = new EventEmitter();
@@ -1317,12 +1317,12 @@ class MainEditorComponent {
     ngOnInit() {
     }
 }
-MainEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MainEditorComponent, deps: [{ token: i1$4.ClipboardService }, { token: i2$4.MatSnackBar }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MainEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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, template: "<mat-tab-group>\r\n  <mat-tab label=\"\u0412\u0438\u0437\u0443\u0430\u043B\u044C\u043D\u044B\u0439 \u0440\u0435\u0434\u0430\u043A\u0442\u043E\u0440\">\r\n\r\n    <div style=\"height: 20px;\"></div>\r\n\r\n    <croco-visual-editor #visualEditor\r\n      [useHtmlRaw]=\"useHtmlRaw\"\r\n      [html]=\"html\"\r\n      (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\r\n      (rendered)=\"visualEditorRenderedHandler()\">\r\n    </croco-visual-editor>\r\n\r\n    <div style=\"height: 20px;\"></div>\r\n\r\n  </mat-tab>\r\n\r\n  <mat-tab label=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\">\r\n    <div style=\"height: 10px;\"></div>\r\n    <form *ngIf=\"visualEditorRendered\" [formGroup]=\"myForm\">\r\n      <mat-form-field class=\"w-100\">\r\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\r\n          cdkAutosizeMinRows=\"1\"\r\n          placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" formControlName=\"html\" [(ngModel)]=\"html\"\r\n          (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\r\n      </mat-form-field>\r\n    </form>\r\n\r\n    <button (click)=\"copyMarkUp()\" \r\n      mat-raised-button color=\"primary\">\r\n      \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\r\n    </button>\r\n  </mat-tab>\r\n  <mat-tab label=\"\u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\">\r\n    <mat-card>\r\n      <croco-html-xml-tag-view [data]=\"html | topreview\">\r\n      </croco-html-xml-tag-view>\r\n    </mat-card>\r\n  </mat-tab>\r\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$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i3$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.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2.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$3.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: XmlTagViewComponent, selector: "croco-html-xml-tag-view", inputs: ["data"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$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.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i5$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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "topreview": ToPreviewPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MainEditorComponent, decorators: [{
+MainEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MainEditorComponent, deps: [{ token: i1$3.ClipboardService }, { token: i2$2.MatSnackBar }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+MainEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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, template: "<mat-tab-group>\r\n  <mat-tab label=\"\u0412\u0438\u0437\u0443\u0430\u043B\u044C\u043D\u044B\u0439 \u0440\u0435\u0434\u0430\u043A\u0442\u043E\u0440\">\r\n\r\n    <div style=\"height: 20px;\"></div>\r\n\r\n    <croco-visual-editor #visualEditor\r\n      [useHtmlRaw]=\"useHtmlRaw\"\r\n      [html]=\"html\"\r\n      (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\r\n      (rendered)=\"visualEditorRenderedHandler()\">\r\n    </croco-visual-editor>\r\n\r\n    <div style=\"height: 20px;\"></div>\r\n\r\n  </mat-tab>\r\n\r\n  <mat-tab label=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\">\r\n    <div style=\"height: 10px;\"></div>\r\n    <form *ngIf=\"visualEditorRendered\" [formGroup]=\"myForm\">\r\n      <mat-form-field class=\"w-100\">\r\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\r\n          cdkAutosizeMinRows=\"1\"\r\n          placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" formControlName=\"html\" [(ngModel)]=\"html\"\r\n          (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\r\n      </mat-form-field>\r\n    </form>\r\n\r\n    <button (click)=\"copyMarkUp()\" \r\n      mat-raised-button color=\"primary\">\r\n      \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\r\n    </button>\r\n  </mat-tab>\r\n  <mat-tab label=\"\u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\">\r\n    <mat-card>\r\n      <croco-html-xml-tag-view [data]=\"html | topreview\">\r\n      </croco-html-xml-tag-view>\r\n    </mat-card>\r\n  </mat-tab>\r\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"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i6$2.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i6$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: i5$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: XmlTagViewComponent, selector: "croco-html-xml-tag-view", inputs: ["data"] }, { kind: "component", type: VisualEditorComponent, selector: "croco-visual-editor", inputs: ["showMarkUp", "useHtmlRaw", "html"], outputs: ["html", "onHtmlChanged", "rendered"] }, { kind: "pipe", type: ToPreviewPipe, name: "topreview" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MainEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'croco-html-main-editor', template: "<mat-tab-group>\r\n  <mat-tab label=\"\u0412\u0438\u0437\u0443\u0430\u043B\u044C\u043D\u044B\u0439 \u0440\u0435\u0434\u0430\u043A\u0442\u043E\u0440\">\r\n\r\n    <div style=\"height: 20px;\"></div>\r\n\r\n    <croco-visual-editor #visualEditor\r\n      [useHtmlRaw]=\"useHtmlRaw\"\r\n      [html]=\"html\"\r\n      (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\r\n      (rendered)=\"visualEditorRenderedHandler()\">\r\n    </croco-visual-editor>\r\n\r\n    <div style=\"height: 20px;\"></div>\r\n\r\n  </mat-tab>\r\n\r\n  <mat-tab label=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\">\r\n    <div style=\"height: 10px;\"></div>\r\n    <form *ngIf=\"visualEditorRendered\" [formGroup]=\"myForm\">\r\n      <mat-form-field class=\"w-100\">\r\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\r\n          cdkAutosizeMinRows=\"1\"\r\n          placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" formControlName=\"html\" [(ngModel)]=\"html\"\r\n          (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\r\n      </mat-form-field>\r\n    </form>\r\n\r\n    <button (click)=\"copyMarkUp()\" \r\n      mat-raised-button color=\"primary\">\r\n      \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\r\n    </button>\r\n  </mat-tab>\r\n  <mat-tab label=\"\u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\">\r\n    <mat-card>\r\n      <croco-html-xml-tag-view [data]=\"html | topreview\">\r\n      </croco-html-xml-tag-view>\r\n    </mat-card>\r\n  </mat-tab>\r\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"] }]
-        }], ctorParameters: function () { return [{ type: i1$4.ClipboardService }, { type: i2$4.MatSnackBar }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { visualEditor: [{
+        }], ctorParameters: function () { return [{ type: i1$3.ClipboardService }, { type: i2$2.MatSnackBar }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { visualEditor: [{
                 type: ViewChild,
                 args: ["visualEditor"]
             }], showMarkUp: [{
@@ -1352,9 +1352,9 @@ class RichTextToHtmlPipe {
         return result;
     }
 }
-RichTextToHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RichTextToHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-RichTextToHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RichTextToHtmlPipe, name: "richTextToHtml" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RichTextToHtmlPipe, decorators: [{
+RichTextToHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RichTextToHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+RichTextToHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: RichTextToHtmlPipe, name: "richTextToHtml" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RichTextToHtmlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'richTextToHtml'
@@ -1368,11 +1368,11 @@ class XmlTagRichTextViewComponent {
     ngOnInit() {
     }
 }
-XmlTagRichTextViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: XmlTagRichTextViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-XmlTagRichTextViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: XmlTagRichTextViewComponent, selector: "croco-html-xml-tag-rich-text-view", inputs: { richTextData: "richTextData" }, ngImport: i0, template: "<div *ngIf=\"richTextData\" [innerHtml]=\"richTextData | richTextToHtml\">\r\n</div>", styles: [""], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "richTextToHtml": RichTextToHtmlPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: XmlTagRichTextViewComponent, decorators: [{
+XmlTagRichTextViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: XmlTagRichTextViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+XmlTagRichTextViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: XmlTagRichTextViewComponent, selector: "croco-html-xml-tag-rich-text-view", inputs: { richTextData: "richTextData" }, ngImport: i0, template: "<div *ngIf=\"richTextData\" [innerHtml]=\"richTextData | richTextToHtml\">\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: RichTextToHtmlPipe, name: "richTextToHtml" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: XmlTagRichTextViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-xml-tag-rich-text-view', template: "<div *ngIf=\"richTextData\" [innerHtml]=\"richTextData | richTextToHtml\">\r\n</div>", styles: [""] }]
+            args: [{ selector: 'croco-html-xml-tag-rich-text-view', template: "<div *ngIf=\"richTextData\" [innerHtml]=\"richTextData | richTextToHtml\">\r\n</div>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { richTextData: [{
                 type: Input
             }] } });
@@ -1382,11 +1382,11 @@ class XmlTagTableViewComponent {
         this.displayedColumns = [];
     }
 }
-XmlTagTableViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: XmlTagTableViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-XmlTagTableViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: XmlTagTableViewComponent, selector: "croco-html-xml-tag-table-view", inputs: { displayedColumns: "displayedColumns", data: "data" }, ngImport: i0, template: "<table mat-table [dataSource]=\"data\" class=\"mat-elevation-z8 w-100 example-container\">\r\n    <ng-container [matColumnDef]=\"column\" *ngFor=\"let column of displayedColumns\">\r\n        <th mat-header-cell *matHeaderCellDef> {{column}} </th>\r\n        <td mat-cell *matCellDef=\"let element\"> {{element[column]}} </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n</table>", styles: [""], components: [{ type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i1$5.MatCellDef, selector: "[matCellDef]" }, { type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i1$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i1$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: XmlTagTableViewComponent, decorators: [{
+XmlTagTableViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: XmlTagTableViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+XmlTagTableViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: XmlTagTableViewComponent, selector: "croco-html-xml-tag-table-view", inputs: { displayedColumns: "displayedColumns", data: "data" }, ngImport: i0, template: "<table mat-table [dataSource]=\"data\" class=\"mat-elevation-z8 w-100 example-container\">\r\n    <ng-container [matColumnDef]=\"column\" *ngFor=\"let column of displayedColumns\">\r\n        <th mat-header-cell *matHeaderCellDef> {{column}} </th>\r\n        <td mat-cell *matCellDef=\"let element\"> {{element[column]}} </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n</table>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: XmlTagTableViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-xml-tag-table-view', template: "<table mat-table [dataSource]=\"data\" class=\"mat-elevation-z8 w-100 example-container\">\r\n    <ng-container [matColumnDef]=\"column\" *ngFor=\"let column of displayedColumns\">\r\n        <th mat-header-cell *matHeaderCellDef> {{column}} </th>\r\n        <td mat-cell *matCellDef=\"let element\"> {{element[column]}} </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n</table>", styles: [""] }]
+            args: [{ selector: 'croco-html-xml-tag-table-view', template: "<table mat-table [dataSource]=\"data\" class=\"mat-elevation-z8 w-100 example-container\">\r\n    <ng-container [matColumnDef]=\"column\" *ngFor=\"let column of displayedColumns\">\r\n        <th mat-header-cell *matHeaderCellDef> {{column}} </th>\r\n        <td mat-cell *matCellDef=\"let element\"> {{element[column]}} </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n</table>" }]
         }], propDecorators: { displayedColumns: [{
                 type: Input
             }], data: [{
@@ -1398,9 +1398,9 @@ class TagToSpanPipe {
         return value.map(x => (`<b>${x}</b>`)).join(' | ');
     }
 }
-TagToSpanPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TagToSpanPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-TagToSpanPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TagToSpanPipe, name: "tagToSpan" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TagToSpanPipe, decorators: [{
+TagToSpanPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagToSpanPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+TagToSpanPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: TagToSpanPipe, name: "tagToSpan" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagToSpanPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'tagToSpan'
@@ -1412,9 +1412,9 @@ class ToHtmlBodyTagsPipe {
         return BodyTagsExtensions.getBodyTags(value);
     }
 }
-ToHtmlBodyTagsPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToHtmlBodyTagsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-ToHtmlBodyTagsPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToHtmlBodyTagsPipe, name: "tohtmlbodytags" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToHtmlBodyTagsPipe, decorators: [{
+ToHtmlBodyTagsPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToHtmlBodyTagsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ToHtmlBodyTagsPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: ToHtmlBodyTagsPipe, name: "tohtmlbodytags" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToHtmlBodyTagsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'tohtmlbodytags'
@@ -1522,19 +1522,16 @@ const MaterialModules = [
 
 class CrocoHtmlModule {
 }
-CrocoHtmlModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CrocoHtmlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CrocoHtmlModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, 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: [CommonModule,
+CrocoHtmlModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CrocoHtmlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CrocoHtmlModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, 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: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        NgSelectModule, i23.MatBadgeModule, i2$3.MatTableModule, i25.MatExpansionModule, i3.MatFormFieldModule, i2$2.MatSnackBarModule, i28.MatProgressBarModule, i4$1.MatProgressSpinnerModule, i6$2.MatTabsModule, i31.MatMenuModule, i5$2.MatCardModule, i6$1.MatSelectModule, i34.MatTooltipModule, i35.MatCheckboxModule, i8.MatChipsModule, i37.MatListModule, i2.MatButtonModule, i4.MatInputModule, i40.MatDialogModule, i41.MatPaginatorModule, i42.MatDatepickerModule, i43.MatGridListModule, i44.MatSlideToggleModule, i45.MatTreeModule, i7.MatNativeDateModule, i47.MatAutocompleteModule, i48.MatSidenavModule, i5$1.MatIconModule, i10.DragDropModule, i6.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.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CrocoHtmlModule, imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
-        NgSelectModule, i23.MatBadgeModule, i1$5.MatTableModule, i25.MatExpansionModule, i5.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], 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.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CrocoHtmlModule, imports: [[
-            CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            NgSelectModule,
-            ...MaterialModules
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CrocoHtmlModule, decorators: [{
+        NgSelectModule, MaterialModules] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CrocoHtmlModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [