croco-html 3.0.2 → 3.0.3

package/fesm2022/croco-html.mjs

@@ -20,6 +20,7 @@ import * as i2$1 from '@angular/material/input';
 import { MatInput, MatInputModule } from '@angular/material/input';
 import * as i12 from '@angular/material/tooltip';
 import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
+import * as i3 from '@angular/cdk/text-field';
 import { CdkTextareaAutosize } from '@angular/cdk/text-field';
 import * as i2$2 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
@@ -35,7 +36,7 @@ import * as i11 from '@angular/material/select';
 import { MatSelect, MatSelectModule } from '@angular/material/select';
 import * as i7 from '@angular/material/progress-spinner';
 import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i3 from '@angular/material/tabs';
+import * as i3$1 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import * as i1$5 from 'ngx-clipboard';
 import * as i2$3 from '@angular/material/snack-bar';
@@ -50,7 +51,7 @@ import * as i20 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i18 from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
-import * as i3$1 from '@angular/material/expansion';
+import * as i3$2 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import * as i21 from '@angular/material/grid-list';
 import { MatGridListModule } from '@angular/material/grid-list';
@@ -532,10 +533,12 @@ class ExternalVideoTagDataConsts {
     static { this.TagName = "external-video"; }
     static { this.VideoTypeAttrName = "type"; }
     static { this.LinkAttrName = "link"; }
+    static { this.IframeAttrName = "iframe"; }
 }
 class ExternalVideoSupportedTypes {
     static { this.Youtube = "youtube"; }
     static { this.VkVideo = "vk-video"; }
+    static { this.Code = "code"; }
 }
 const ExternalVideoPlayers = [
     {
@@ -545,6 +548,10 @@ const ExternalVideoPlayers = [
     {
         type: ExternalVideoSupportedTypes.VkVideo,
         displayValue: 'Vk Video',
+    },
+    {
+        type: ExternalVideoSupportedTypes.Code,
+        displayValue: 'Встраиваемое Видео',
     }
 ];
 class VideoMethods {
@@ -553,7 +560,8 @@ class VideoMethods {
             type: ExternalVideoTagDataConsts.TagName,
             data: {
                 type: elem.getAttribute(ExternalVideoTagDataConsts.VideoTypeAttrName),
-                link: elem.getAttribute(ExternalVideoTagDataConsts.LinkAttrName)
+                link: elem.getAttribute(ExternalVideoTagDataConsts.LinkAttrName),
+                innerHtml: elem.innerHTML
             }
         };
     }
@@ -628,6 +636,20 @@ class CustomWidgetMethods {
     }
 }
 
+class HtmlRawTagDataConsts {
+    static { this.TagName = "html-raw"; }
+}
+class ExtractHtmlRawTagMethods {
+    static ExtractHtmlRawTag(elem) {
+        return {
+            type: HtmlRawTagDataConsts.TagName,
+            data: {
+                innerHTML: elem.innerHTML
+            }
+        };
+    }
+}
+
 class HtmlExtractionMethods {
     static ExtractHeaderTag(elem, tagName) {
         var data = TextSimpleMethods.ExtractTextTag(elem);
@@ -639,12 +661,6 @@ class HtmlExtractionMethods {
         ["FILE-IMAGE"]: (elem, options) => ImageMethods.ExtractImage(elem, options),
         ["TABLE"]: (elem, options) => TableMethods.getTableFromHtmlTag(elem, options),
         ["RICH-TEXT"]: (elem, options) => TextMethods.ExtractRichTextData(elem),
-        ["HTML-RAW"]: (elem, options) => ({
-            type: "html-raw",
-            data: {
-                innerHTML: elem.innerHTML
-            }
-        }),
         ["H1"]: (elem, options) => HtmlExtractionMethods.ExtractHeaderTag(elem, "h1"),
         ["H2"]: (elem, options) => HtmlExtractionMethods.ExtractHeaderTag(elem, "h2"),
         ["H3"]: (elem, options) => HtmlExtractionMethods.ExtractHeaderTag(elem, "h3"),
@@ -655,6 +671,7 @@ class HtmlExtractionMethods {
         [DownloadButtonTagDataConsts.TagName.toUpperCase()]: (elem, options) => DownloadButtonMethods.ExtractDownloadButtonTag(elem),
         [ButtonTagDataConsts.TagName.toUpperCase()]: (elem, options) => ButtonMethods.ExtractButtonTag(elem),
         [CustomWidgetTagDataConsts.TagName.toUpperCase()]: (elem, options) => CustomWidgetMethods.ExtractCustomWidgetTag(elem),
+        [HtmlRawTagDataConsts.TagName.toUpperCase()]: (elem, options) => ExtractHtmlRawTagMethods.ExtractHtmlRawTag(elem)
     }; }
     static transformHtmlElementToBlocks(element, options) {
         var data = [];
@@ -689,13 +706,6 @@ class HtmlExtractionMethods {
     }
 }
 
-class HtmlRawTagDataConsts {
-    static { this.TagName = "html-raw"; }
-    static { this.ScreenWidth = "screen-width"; }
-    static { this.MaxImageHeight = "max-image-height"; }
-    static { this.MediaRequest = " media-request"; }
-}
-
 class Tags {
     static { this.Text = TextTags.text; }
     static { this.H1 = TextTags.h1; }
@@ -1080,11 +1090,11 @@ class YoutubeVideoPlayerComponent {
         this.sanitizer = sanitizer;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: YoutubeVideoPlayerComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: YoutubeVideoPlayerComponent, isStandalone: true, selector: "youtube-video-player", inputs: { link: "link" }, ngImport: i0, template: "<div class=\"video-player\">\n    <iframe\n      width=\"100%\"\n      height=\"100%\"\n      [src]=\"safeUrl\"\n      title=\"YouTube video player\"\n      frameborder=\"0\"\n      allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n      referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>\n</div>\n", styles: [".video-player{margin:0 auto;max-width:640px;width:100%;height:360px}@media screen and (max-width: 760px){.video-player{height:300px}}@media screen and (max-width: 540px){.video-player{height:250px}}@media screen and (max-width: 450px){.video-player{height:200px}}@media screen and (max-width: 380px){.video-player{height:180px}}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: YoutubeVideoPlayerComponent, isStandalone: true, selector: "youtube-video-player", inputs: { link: "link" }, ngImport: i0, template: "<div class=\"video-player\">\n    <iframe\n      width=\"100%\"\n      height=\"100%\"\n      [src]=\"safeUrl\"\n      title=\"YouTube video player\"\n      frameborder=\"0\"\n      allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n      referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>\n</div>\n", styles: [".video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.video-player ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 760px){.video-player{height:300px}}@media screen and (max-width: 540px){.video-player{height:250px}}@media screen and (max-width: 450px){.video-player{height:200px}}@media screen and (max-width: 380px){.video-player{height:180px}}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: YoutubeVideoPlayerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'youtube-video-player', standalone: true, imports: [], template: "<div class=\"video-player\">\n    <iframe\n      width=\"100%\"\n      height=\"100%\"\n      [src]=\"safeUrl\"\n      title=\"YouTube video player\"\n      frameborder=\"0\"\n      allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n      referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>\n</div>\n", styles: [".video-player{margin:0 auto;max-width:640px;width:100%;height:360px}@media screen and (max-width: 760px){.video-player{height:300px}}@media screen and (max-width: 540px){.video-player{height:250px}}@media screen and (max-width: 450px){.video-player{height:200px}}@media screen and (max-width: 380px){.video-player{height:180px}}\n"] }]
+            args: [{ selector: 'youtube-video-player', standalone: true, imports: [], template: "<div class=\"video-player\">\n    <iframe\n      width=\"100%\"\n      height=\"100%\"\n      [src]=\"safeUrl\"\n      title=\"YouTube video player\"\n      frameborder=\"0\"\n      allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n      referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>\n</div>\n", styles: [".video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.video-player ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 760px){.video-player{height:300px}}@media screen and (max-width: 540px){.video-player{height:250px}}@media screen and (max-width: 450px){.video-player{height:200px}}@media screen and (max-width: 380px){.video-player{height:180px}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { link: [{
                 type: Input
             }] } });
@@ -1097,21 +1107,42 @@ class VkVideoPlayerComponent {
         this.sanitizer = sanitizer;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: VkVideoPlayerComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: VkVideoPlayerComponent, isStandalone: true, selector: "vk-video-player", inputs: { link: "link" }, ngImport: i0, template: "<div class=\"video-player\">\n  <iframe\n    [src]=\"safeUrl\"\n    width=\"100%\"\n    height=\"100%\"\n    allow=\"autoplay; encrypted-media; fullscreen; picture-in-picture;\"\n    frameborder=\"0\"\n    allowfullscreen></iframe>\n</div>\n", styles: [".video-player{margin:0 auto;max-width:640px;width:100%;height:360px}@media screen and (max-width: 760px){.video-player{height:300px}}@media screen and (max-width: 540px){.video-player{height:250px}}@media screen and (max-width: 450px){.video-player{height:200px}}@media screen and (max-width: 380px){.video-player{height:180px}}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: VkVideoPlayerComponent, isStandalone: true, selector: "vk-video-player", inputs: { link: "link" }, ngImport: i0, template: "<div class=\"video-player\">\n  <iframe\n    [src]=\"safeUrl\"\n    width=\"100%\"\n    height=\"100%\"\n    allow=\"autoplay; encrypted-media; fullscreen; picture-in-picture;\"\n    frameborder=\"0\"\n    allowfullscreen></iframe>\n</div>\n", styles: [".video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.video-player ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 760px){.video-player{height:300px}}@media screen and (max-width: 540px){.video-player{height:250px}}@media screen and (max-width: 450px){.video-player{height:200px}}@media screen and (max-width: 380px){.video-player{height:180px}}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: VkVideoPlayerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vk-video-player', standalone: true, imports: [], template: "<div class=\"video-player\">\n  <iframe\n    [src]=\"safeUrl\"\n    width=\"100%\"\n    height=\"100%\"\n    allow=\"autoplay; encrypted-media; fullscreen; picture-in-picture;\"\n    frameborder=\"0\"\n    allowfullscreen></iframe>\n</div>\n", styles: [".video-player{margin:0 auto;max-width:640px;width:100%;height:360px}@media screen and (max-width: 760px){.video-player{height:300px}}@media screen and (max-width: 540px){.video-player{height:250px}}@media screen and (max-width: 450px){.video-player{height:200px}}@media screen and (max-width: 380px){.video-player{height:180px}}\n"] }]
+            args: [{ selector: 'vk-video-player', standalone: true, imports: [], template: "<div class=\"video-player\">\n  <iframe\n    [src]=\"safeUrl\"\n    width=\"100%\"\n    height=\"100%\"\n    allow=\"autoplay; encrypted-media; fullscreen; picture-in-picture;\"\n    frameborder=\"0\"\n    allowfullscreen></iframe>\n</div>\n", styles: [".video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.video-player ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 760px){.video-player{height:300px}}@media screen and (max-width: 540px){.video-player{height:250px}}@media screen and (max-width: 450px){.video-player{height:200px}}@media screen and (max-width: 380px){.video-player{height:180px}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { link: [{
                 type: Input
             }] } });
 
+class CodeVideoComponent {
+    constructor(_sanitizer) {
+        this._sanitizer = _sanitizer;
+        this.code = "";
+    }
+    ngOnChanges(changes) {
+        if (changes['code'] && changes['code'].currentValue !== changes['code'].previousValue) {
+            this.safeHtml = this._sanitizer.bypassSecurityTrustHtml(this.code);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: CodeVideoComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: CodeVideoComponent, isStandalone: true, selector: "code-video", inputs: { code: "code" }, usesOnChanges: true, ngImport: i0, template: "@if (code) {\n  <div class=\"video-player\" [innerHTML]=\"safeHtml\"></div>\n}\n", styles: [".video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.video-player ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 760px){.video-player{height:300px}}@media screen and (max-width: 540px){.video-player{height:250px}}@media screen and (max-width: 450px){.video-player{height:200px}}@media screen and (max-width: 380px){.video-player{height:180px}}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: CodeVideoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'code-video', standalone: true, imports: [], template: "@if (code) {\n  <div class=\"video-player\" [innerHTML]=\"safeHtml\"></div>\n}\n", styles: [".video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.video-player ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 760px){.video-player{height:300px}}@media screen and (max-width: 540px){.video-player{height:250px}}@media screen and (max-width: 450px){.video-player{height:200px}}@media screen and (max-width: 380px){.video-player{height:180px}}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { code: [{
+                type: Input
+            }] } });
+
 class XmlTagExternalVideoComponent {
     constructor() {
         this.ExternalVideoSupportedTypes = ExternalVideoSupportedTypes;
         this._block = {
             type: '',
-            link: ''
+            link: '',
+            innerHtml: ''
         };
     }
     set data(value) {
@@ -1121,16 +1152,17 @@ class XmlTagExternalVideoComponent {
     set tagData(value) {
         this._block = {
             type: value.type,
-            link: value.link
+            link: value.link,
+            innerHtml: value.innerHtml
         };
     }
     ;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagExternalVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: XmlTagExternalVideoComponent, isStandalone: true, selector: "croco-html-xml-tag-external-video", inputs: { data: "data", tagData: "tagData" }, ngImport: i0, template: "@switch (_block.type) {\n  @case (ExternalVideoSupportedTypes.VkVideo) {\n    <vk-video-player [link]=\"_block.link\"></vk-video-player>\n  }\n  @case (ExternalVideoSupportedTypes.Youtube) {\n    <youtube-video-player [link]=\"_block.link\"></youtube-video-player>\n  }\n}\n", styles: ["@media only screen and (min-width: 769px){.y-video{display:block;width:640px;height:360px;margin:0 auto}}@media only screen and (max-width: 827px){.y-video{display:block;width:100%;height:315px}}\n"], dependencies: [{ kind: "component", type: VkVideoPlayerComponent, selector: "vk-video-player", inputs: ["link"] }, { kind: "component", type: YoutubeVideoPlayerComponent, selector: "youtube-video-player", inputs: ["link"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: XmlTagExternalVideoComponent, isStandalone: true, selector: "croco-html-xml-tag-external-video", inputs: { data: "data", tagData: "tagData" }, ngImport: i0, template: "@switch (_block.type) {\n  @case (ExternalVideoSupportedTypes.VkVideo) {\n    <vk-video-player [link]=\"_block.link\"></vk-video-player>\n  }\n  @case (ExternalVideoSupportedTypes.Youtube) {\n    <youtube-video-player [link]=\"_block.link\"></youtube-video-player>\n  }\n  @case (ExternalVideoSupportedTypes.Code) {\n    <code-video [code]=\"_block.innerHtml\"></code-video>\n  }\n}\n", styles: ["@media only screen and (min-width: 769px){.y-video{display:block;width:640px;height:360px;margin:0 auto}}@media only screen and (max-width: 827px){.y-video{display:block;width:100%;height:315px}}\n"], dependencies: [{ kind: "component", type: VkVideoPlayerComponent, selector: "vk-video-player", inputs: ["link"] }, { kind: "component", type: YoutubeVideoPlayerComponent, selector: "youtube-video-player", inputs: ["link"] }, { kind: "component", type: CodeVideoComponent, selector: "code-video", inputs: ["code"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagExternalVideoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-xml-tag-external-video', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [VkVideoPlayerComponent, YoutubeVideoPlayerComponent], template: "@switch (_block.type) {\n  @case (ExternalVideoSupportedTypes.VkVideo) {\n    <vk-video-player [link]=\"_block.link\"></vk-video-player>\n  }\n  @case (ExternalVideoSupportedTypes.Youtube) {\n    <youtube-video-player [link]=\"_block.link\"></youtube-video-player>\n  }\n}\n", styles: ["@media only screen and (min-width: 769px){.y-video{display:block;width:640px;height:360px;margin:0 auto}}@media only screen and (max-width: 827px){.y-video{display:block;width:100%;height:315px}}\n"] }]
+            args: [{ selector: 'croco-html-xml-tag-external-video', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [VkVideoPlayerComponent, YoutubeVideoPlayerComponent, CodeVideoComponent], template: "@switch (_block.type) {\n  @case (ExternalVideoSupportedTypes.VkVideo) {\n    <vk-video-player [link]=\"_block.link\"></vk-video-player>\n  }\n  @case (ExternalVideoSupportedTypes.Youtube) {\n    <youtube-video-player [link]=\"_block.link\"></youtube-video-player>\n  }\n  @case (ExternalVideoSupportedTypes.Code) {\n    <code-video [code]=\"_block.innerHtml\"></code-video>\n  }\n}\n", styles: ["@media only screen and (min-width: 769px){.y-video{display:block;width:640px;height:360px;margin:0 auto}}@media only screen and (max-width: 827px){.y-video{display:block;width:100%;height:315px}}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }], tagData: [{
@@ -1404,21 +1436,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 type: Input
             }] } });
 
+;
 class HtmlRawViewComponent {
     constructor(_sanitizer) {
         this._sanitizer = _sanitizer;
         this.rawHtml = "";
-        this.isInitialized = false;
     }
-    ngOnInit() {
-        this.safeHtml = this._sanitizer.bypassSecurityTrustHtml(this.rawHtml);
+    ngOnChanges(changes) {
+        if (changes['rawHtml'] && changes['rawHtml'].currentValue !== changes['rawHtml'].previousValue) {
+            this.safeHtml = this._sanitizer.bypassSecurityTrustHtml(this.rawHtml);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: HtmlRawViewComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: HtmlRawViewComponent, isStandalone: true, selector: "croco-html-raw-view", inputs: { rawHtml: "rawHtml" }, ngImport: i0, template: "<div [innerHTML]=\"safeHtml\">\n</div>", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: HtmlRawViewComponent, isStandalone: true, selector: "croco-html-raw-view", inputs: { rawHtml: "rawHtml" }, usesOnChanges: true, ngImport: i0, template: "<div [innerHTML]=\"safeHtml\"></div>\n", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: HtmlRawViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-raw-view', standalone: true, template: "<div [innerHTML]=\"safeHtml\">\n</div>" }]
+            args: [{ selector: 'croco-html-raw-view', standalone: true, template: "<div [innerHTML]=\"safeHtml\"></div>\n" }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { rawHtml: [{
                 type: Input
             }] } });
@@ -1510,7 +1544,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                         MatFormField,
                         MatInput,
                         MatLabel,
-                        XmlTagDownloadFileButtonComponent,
                         XmlTagButtonComponent
                     ], template: "@if (tag.presentOrEdit) {\n  <div>\n    <div>\n      \u0422\u0438\u043F: {{tagData.type}}\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <div>\n      \u0422\u0435\u043A\u0441\u0442: {{tagData.text}}\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <div>\n      \u041E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A \u043D\u0430\u0436\u0430\u0442\u0438\u044F: {{tagData.click}}\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <croco-html-xml-tag-button [tagData]=\"tagData\"></croco-html-xml-tag-button>\n  </div>\n} @else {\n  <div>\n    <mat-form-field class=\"w-100\">\n      <mat-label>\n        \u0422\u0438\u043F\n      </mat-label>\n      <input matInput placeholder=\"\u0422\u0438\u043F\"\n             autocomplete=\"off\"\n             [(ngModel)]=\"tagData.type\"\n             (ngModelChange)=\"linkChanged()\">\n    </mat-form-field>\n\n    <mat-form-field class=\"w-100\">\n      <mat-label>\n        \u0422\u0435\u043A\u0441\u0442\n      </mat-label>\n      <input matInput placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n             autocomplete=\"off\"\n             [(ngModel)]=\"tagData.text\"\n             (ngModelChange)=\"linkChanged()\">\n    </mat-form-field>\n\n    <mat-form-field class=\"w-100\">\n      <mat-label>\n        \u041E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A \u043D\u0430\u0436\u0430\u0442\u0438\u044F\n      </mat-label>\n      <input matInput placeholder=\"\u041E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A \u043D\u0430\u0436\u0430\u0442\u0438\u044F\"\n             autocomplete=\"off\"\n             [(ngModel)]=\"tagData.click\"\n             (ngModelChange)=\"linkChanged()\">\n    </mat-form-field>\n  </div>\n}\n" }]
         }], propDecorators: { tag: [{
@@ -1573,7 +1606,7 @@ class XmlTagViewComponent {
         return TextTags.headerTextTags.includes(item.type);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: XmlTagViewComponent, isStandalone: true, selector: "croco-html-xml-tag-view", inputs: { data: "data" }, ngImport: i0, template: "<div>\n  @for (item of data; track $index) {\n  <div class=\"row\">\n\n    @if (item.type === 'text') {\n    <div>\n      <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\n    </div>\n    }\n\n    @if (item.type === 'html-raw') {\n    <div>\n      <croco-html-raw-view [rawHtml]=\"item.data.innerHTML\">\n      </croco-html-raw-view>\n    </div>\n    }\n\n    @if (isHeaderTextTag(item)) {\n    <div>\n      <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\n    </div>\n    }\n\n    @if (item.type === 'file-image') {\n    <div>\n      <croco-html-file-image-tag-view [item]=\"item\"></croco-html-file-image-tag-view>\n    </div>\n    }\n\n    @if (item.type === 'custom-widget') {\n      <div>\n        <croco-html-xml-tag-custom-widget [tagData]=\"item.data\"></croco-html-xml-tag-custom-widget>\n      </div>\n    }\n\n    @if (item.type === 'table' && item.validationResult) {\n\n    @if (item.validationResult.isSucceeded){\n    <croco-html-xml-tag-html-view [html]=\"item.bootstrapHtml\">\n    </croco-html-xml-tag-html-view>\n    }\n    @else {\n    <croco-html-error-banner [message]=\"item.validationResult.message\">\n    </croco-html-error-banner>\n    }\n    }\n\n    @if (item.type === 'rich-text') {\n    <div>\n      <croco-html-xml-tag-text-view></croco-html-xml-tag-text-view>\n    </div>\n    }\n\n    @if (item.type === 'external-video') {\n    <div>\n      <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\n    </div>\n    }\n\n    @if (item.type === 'download-file-button') {\n    <div>\n      <croco-html-xml-tag-download-file-button [data]=\"item\"></croco-html-xml-tag-download-file-button>\n    </div>\n    }\n\n    @if (item.type === 'button') {\n    <div>\n      <croco-html-xml-tag-button [data]=\"item\"></croco-html-xml-tag-button>\n    </div>\n    }\n    @if (item.type === 'unsupported-tag') {\n    <div class=\"red\" style=\"margin-top: 10px;\">\n      <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\n      <span>\n        {{item.data.tagString}}\n      </span>\n    </div>\n    }\n  </div>\n  }\n</div>\n", styles: [".red{background-color:#c94444;color:#fff}\n"], dependencies: [{ kind: "component", type: XmlTagTextViewComponent, selector: "croco-html-xml-tag-text-view", inputs: ["item"] }, { kind: "component", type: HtmlRawViewComponent, selector: "croco-html-raw-view", inputs: ["rawHtml"] }, { kind: "component", type: XmlTagHeaderTextViewComponent, selector: "croco-html-xml-tag-header-text-view", inputs: ["item"] }, { kind: "component", type: FileImageTagViewComponent, selector: "croco-html-file-image-tag-view", inputs: ["item"] }, { kind: "component", type: XmlTagHtmlViewComponent, selector: "croco-html-xml-tag-html-view", inputs: ["html"] }, { kind: "component", type: ErrorBannerComponent, selector: "croco-html-error-banner", inputs: ["message"] }, { kind: "component", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }, { kind: "component", type: XmlTagDownloadFileButtonComponent, selector: "croco-html-xml-tag-download-file-button", inputs: ["data", "tagData"] }, { kind: "component", type: XmlTagButtonComponent, selector: "croco-html-xml-tag-button", inputs: ["data", "tagData"] }, { kind: "component", type: XmlTagCustomWidgetComponent, selector: "croco-html-xml-tag-custom-widget", inputs: ["tagData"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: XmlTagViewComponent, isStandalone: true, selector: "croco-html-xml-tag-view", inputs: { data: "data" }, ngImport: i0, template: "<div>\n  @for (item of data; track $index) {\n  <div class=\"row\">\n\n    @if (item.type === 'text') {\n    <div>\n      <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\n    </div>\n    }\n\n    @if (item.type === 'html-raw') {\n    <div>\n      <croco-html-raw-view [rawHtml]=\"item.data.innerHTML\"></croco-html-raw-view>\n    </div>\n    }\n\n    @if (isHeaderTextTag(item)) {\n    <div>\n      <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\n    </div>\n    }\n\n    @if (item.type === 'file-image') {\n    <div>\n      <croco-html-file-image-tag-view [item]=\"item\"></croco-html-file-image-tag-view>\n    </div>\n    }\n\n    @if (item.type === 'custom-widget') {\n      <div>\n        <croco-html-xml-tag-custom-widget [tagData]=\"item.data\"></croco-html-xml-tag-custom-widget>\n      </div>\n    }\n\n    @if (item.type === 'table' && item.validationResult) {\n\n    @if (item.validationResult.isSucceeded){\n    <croco-html-xml-tag-html-view [html]=\"item.bootstrapHtml\">\n    </croco-html-xml-tag-html-view>\n    }\n    @else {\n    <croco-html-error-banner [message]=\"item.validationResult.message\">\n    </croco-html-error-banner>\n    }\n    }\n\n    @if (item.type === 'rich-text') {\n    <div>\n      <croco-html-xml-tag-text-view></croco-html-xml-tag-text-view>\n    </div>\n    }\n\n    @if (item.type === 'external-video') {\n    <div>\n      <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\n    </div>\n    }\n\n    @if (item.type === 'download-file-button') {\n    <div>\n      <croco-html-xml-tag-download-file-button [data]=\"item\"></croco-html-xml-tag-download-file-button>\n    </div>\n    }\n\n    @if (item.type === 'button') {\n    <div>\n      <croco-html-xml-tag-button [data]=\"item\"></croco-html-xml-tag-button>\n    </div>\n    }\n    @if (item.type === 'unsupported-tag') {\n    <div class=\"red\" style=\"margin-top: 10px;\">\n      <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\n      <span>\n        {{item.data.tagString}}\n      </span>\n    </div>\n    }\n  </div>\n  }\n</div>\n", styles: [".red{background-color:#c94444;color:#fff}\n"], dependencies: [{ kind: "component", type: XmlTagTextViewComponent, selector: "croco-html-xml-tag-text-view", inputs: ["item"] }, { kind: "component", type: HtmlRawViewComponent, selector: "croco-html-raw-view", inputs: ["rawHtml"] }, { kind: "component", type: XmlTagHeaderTextViewComponent, selector: "croco-html-xml-tag-header-text-view", inputs: ["item"] }, { kind: "component", type: FileImageTagViewComponent, selector: "croco-html-file-image-tag-view", inputs: ["item"] }, { kind: "component", type: XmlTagHtmlViewComponent, selector: "croco-html-xml-tag-html-view", inputs: ["html"] }, { kind: "component", type: ErrorBannerComponent, selector: "croco-html-error-banner", inputs: ["message"] }, { kind: "component", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }, { kind: "component", type: XmlTagDownloadFileButtonComponent, selector: "croco-html-xml-tag-download-file-button", inputs: ["data", "tagData"] }, { kind: "component", type: XmlTagButtonComponent, selector: "croco-html-xml-tag-button", inputs: ["data", "tagData"] }, { kind: "component", type: XmlTagCustomWidgetComponent, selector: "croco-html-xml-tag-custom-widget", inputs: ["tagData"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagViewComponent, decorators: [{
             type: Component,
@@ -1589,7 +1622,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                         ButtonEditorComponent,
                         XmlTagButtonComponent,
                         XmlTagCustomWidgetComponent,
-                    ], template: "<div>\n  @for (item of data; track $index) {\n  <div class=\"row\">\n\n    @if (item.type === 'text') {\n    <div>\n      <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\n    </div>\n    }\n\n    @if (item.type === 'html-raw') {\n    <div>\n      <croco-html-raw-view [rawHtml]=\"item.data.innerHTML\">\n      </croco-html-raw-view>\n    </div>\n    }\n\n    @if (isHeaderTextTag(item)) {\n    <div>\n      <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\n    </div>\n    }\n\n    @if (item.type === 'file-image') {\n    <div>\n      <croco-html-file-image-tag-view [item]=\"item\"></croco-html-file-image-tag-view>\n    </div>\n    }\n\n    @if (item.type === 'custom-widget') {\n      <div>\n        <croco-html-xml-tag-custom-widget [tagData]=\"item.data\"></croco-html-xml-tag-custom-widget>\n      </div>\n    }\n\n    @if (item.type === 'table' && item.validationResult) {\n\n    @if (item.validationResult.isSucceeded){\n    <croco-html-xml-tag-html-view [html]=\"item.bootstrapHtml\">\n    </croco-html-xml-tag-html-view>\n    }\n    @else {\n    <croco-html-error-banner [message]=\"item.validationResult.message\">\n    </croco-html-error-banner>\n    }\n    }\n\n    @if (item.type === 'rich-text') {\n    <div>\n      <croco-html-xml-tag-text-view></croco-html-xml-tag-text-view>\n    </div>\n    }\n\n    @if (item.type === 'external-video') {\n    <div>\n      <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\n    </div>\n    }\n\n    @if (item.type === 'download-file-button') {\n    <div>\n      <croco-html-xml-tag-download-file-button [data]=\"item\"></croco-html-xml-tag-download-file-button>\n    </div>\n    }\n\n    @if (item.type === 'button') {\n    <div>\n      <croco-html-xml-tag-button [data]=\"item\"></croco-html-xml-tag-button>\n    </div>\n    }\n    @if (item.type === 'unsupported-tag') {\n    <div class=\"red\" style=\"margin-top: 10px;\">\n      <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\n      <span>\n        {{item.data.tagString}}\n      </span>\n    </div>\n    }\n  </div>\n  }\n</div>\n", styles: [".red{background-color:#c94444;color:#fff}\n"] }]
+                    ], template: "<div>\n  @for (item of data; track $index) {\n  <div class=\"row\">\n\n    @if (item.type === 'text') {\n    <div>\n      <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\n    </div>\n    }\n\n    @if (item.type === 'html-raw') {\n    <div>\n      <croco-html-raw-view [rawHtml]=\"item.data.innerHTML\"></croco-html-raw-view>\n    </div>\n    }\n\n    @if (isHeaderTextTag(item)) {\n    <div>\n      <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\n    </div>\n    }\n\n    @if (item.type === 'file-image') {\n    <div>\n      <croco-html-file-image-tag-view [item]=\"item\"></croco-html-file-image-tag-view>\n    </div>\n    }\n\n    @if (item.type === 'custom-widget') {\n      <div>\n        <croco-html-xml-tag-custom-widget [tagData]=\"item.data\"></croco-html-xml-tag-custom-widget>\n      </div>\n    }\n\n    @if (item.type === 'table' && item.validationResult) {\n\n    @if (item.validationResult.isSucceeded){\n    <croco-html-xml-tag-html-view [html]=\"item.bootstrapHtml\">\n    </croco-html-xml-tag-html-view>\n    }\n    @else {\n    <croco-html-error-banner [message]=\"item.validationResult.message\">\n    </croco-html-error-banner>\n    }\n    }\n\n    @if (item.type === 'rich-text') {\n    <div>\n      <croco-html-xml-tag-text-view></croco-html-xml-tag-text-view>\n    </div>\n    }\n\n    @if (item.type === 'external-video') {\n    <div>\n      <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\n    </div>\n    }\n\n    @if (item.type === 'download-file-button') {\n    <div>\n      <croco-html-xml-tag-download-file-button [data]=\"item\"></croco-html-xml-tag-download-file-button>\n    </div>\n    }\n\n    @if (item.type === 'button') {\n    <div>\n      <croco-html-xml-tag-button [data]=\"item\"></croco-html-xml-tag-button>\n    </div>\n    }\n    @if (item.type === 'unsupported-tag') {\n    <div class=\"red\" style=\"margin-top: 10px;\">\n      <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\n      <span>\n        {{item.data.tagString}}\n      </span>\n    </div>\n    }\n  </div>\n  }\n</div>\n", styles: [".red{background-color:#c94444;color:#fff}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }] } });
@@ -1600,6 +1633,7 @@ class ExternalVideoEditorComponent {
         this.ExternalVideoSupportedTypes = ExternalVideoSupportedTypes;
         this.tagData = {
             link: '',
+            innerHtml: '',
             type: ExternalVideoSupportedTypes.Youtube
         };
         this.linkText = '';
@@ -1607,13 +1641,29 @@ class ExternalVideoEditorComponent {
     ngOnInit() {
         this.tagData.link = this.tag.attributes.link;
         this.tagData.type = this.tag.attributes.type;
-        this.linkText = this.tagData.type === ExternalVideoSupportedTypes.VkVideo ? 'Ссылка на Vk Video' : ' Ссылка на YouTube';
+        this.tagData.innerHtml = this.tag.innerHtml;
+        switch (this.tagData.type) {
+            case ExternalVideoSupportedTypes.Youtube: {
+                this.linkText = 'Ссылка на YouTube';
+                break;
+            }
+            case ExternalVideoSupportedTypes.VkVideo: {
+                this.linkText = 'Ссылка на Vk Video';
+                break;
+            }
+            case ExternalVideoSupportedTypes.Code: {
+                this.linkText = 'Встраиваемый код';
+                break;
+            }
+        }
     }
     linkChanged() {
         if (this.tagData.link.includes('iframe')) {
             this.createLinkByIFrame();
         }
-        this.tag.attributes = this.tagData;
+        const { innerHtml, ...tagData } = this.tagData;
+        this.tag.attributes = tagData;
+        this.tag.innerHtml = innerHtml;
     }
     createLinkByIFrame() {
         const parser = new DOMParser();
@@ -1623,7 +1673,7 @@ class ExternalVideoEditorComponent {
         this.tagData.link = src;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ExternalVideoEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: ExternalVideoEditorComponent, isStandalone: true, selector: "croco-html-external-video-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "@if (tag.presentOrEdit) {\n  <div>\n    <div>\n      @switch (tagData.type) {\n        @case (ExternalVideoSupportedTypes.VkVideo) {\n          {{linkText}}: {{tagData.link}}\n        }\n        @case (ExternalVideoSupportedTypes.Youtube) {\n          {{linkText}}: {{tagData.link}}\n        }\n      }\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <croco-html-xml-tag-external-video [tagData]=\"tagData\"></croco-html-xml-tag-external-video>\n  </div>\n}\n\n@if (!tag.presentOrEdit) {\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\n          {{linkText}}\n        </mat-label>\n        <input matInput placeholder=\"{{linkText}}\"\n          autocomplete=\"off\"\n          [(ngModel)]=\"tagData.link\"\n                  (ngModelChange)=\"linkChanged()\">\n          </mat-form-field>\n    </div>\n}\n", styles: [".video-player{margin:0 auto;max-width:640px;width:100%;height:360px}@media screen and (max-width: 760px){.video-player{height:300px}}@media screen and (max-width: 540px){.video-player{height:250px}}@media screen and (max-width: 450px){.video-player{height:200px}}@media screen and (max-width: 380px){.video-player{height:180px}}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: ExternalVideoEditorComponent, isStandalone: true, selector: "croco-html-external-video-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "@if (tag.presentOrEdit) {\n  <div>\n    <div>\n      @switch (tagData.type) {\n        @case (ExternalVideoSupportedTypes.VkVideo) {\n          {{linkText}}: {{tagData.link}}\n        }\n        @case (ExternalVideoSupportedTypes.Youtube) {\n          {{linkText}}: {{tagData.link}}\n        }\n        @case (ExternalVideoSupportedTypes.Code) {\n          <div>\n            \u0412\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043C\u044B\u0439 \u043A\u043E\u0434 \u043F\u043B\u0435\u0435\u0440\u0430.\n          </div>\n        }\n      }\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <croco-html-xml-tag-external-video [tagData]=\"tagData\"></croco-html-xml-tag-external-video>\n  </div>\n}\n\n@if (!tag.presentOrEdit) {\n  @if(tagData.type !== ExternalVideoSupportedTypes.Code) {\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\n          {{linkText}}\n        </mat-label>\n        <input matInput placeholder=\"{{linkText}}\"\n               autocomplete=\"off\"\n               [(ngModel)]=\"tagData.link\"\n               (ngModelChange)=\"linkChanged()\">\n      </mat-form-field>\n    </div>\n  } @else {\n    <div>\n        <mat-label>\n          {{linkText}}\n        </mat-label>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n          <textarea\n            #autosize=\"cdkTextareaAutosize\"\n            matInput\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"1\"\n            cdkAutosizeMaxRows=\"5\"\n            placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n            #textArea\n            [(ngModel)]=\"tagData.innerHtml\"\n            (ngModelChange)=\"linkChanged()\"\n          ></textarea>\n        </mat-form-field>\n    </div>\n  }\n}\n", styles: [".video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.video-player ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 760px){.video-player{height:300px}}@media screen and (max-width: 540px){.video-player{height:250px}}@media screen and (max-width: 450px){.video-player{height:200px}}@media screen and (max-width: 380px){.video-player{height:180px}}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.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: i3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ExternalVideoEditorComponent, decorators: [{
             type: Component,
@@ -1632,7 +1682,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                         MatInputModule,
                         FormsModule,
                         XmlTagExternalVideoComponent,
-                    ], template: "@if (tag.presentOrEdit) {\n  <div>\n    <div>\n      @switch (tagData.type) {\n        @case (ExternalVideoSupportedTypes.VkVideo) {\n          {{linkText}}: {{tagData.link}}\n        }\n        @case (ExternalVideoSupportedTypes.Youtube) {\n          {{linkText}}: {{tagData.link}}\n        }\n      }\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <croco-html-xml-tag-external-video [tagData]=\"tagData\"></croco-html-xml-tag-external-video>\n  </div>\n}\n\n@if (!tag.presentOrEdit) {\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\n          {{linkText}}\n        </mat-label>\n        <input matInput placeholder=\"{{linkText}}\"\n          autocomplete=\"off\"\n          [(ngModel)]=\"tagData.link\"\n                  (ngModelChange)=\"linkChanged()\">\n          </mat-form-field>\n    </div>\n}\n", styles: [".video-player{margin:0 auto;max-width:640px;width:100%;height:360px}@media screen and (max-width: 760px){.video-player{height:300px}}@media screen and (max-width: 540px){.video-player{height:250px}}@media screen and (max-width: 450px){.video-player{height:200px}}@media screen and (max-width: 380px){.video-player{height:180px}}\n"] }]
+                    ], template: "@if (tag.presentOrEdit) {\n  <div>\n    <div>\n      @switch (tagData.type) {\n        @case (ExternalVideoSupportedTypes.VkVideo) {\n          {{linkText}}: {{tagData.link}}\n        }\n        @case (ExternalVideoSupportedTypes.Youtube) {\n          {{linkText}}: {{tagData.link}}\n        }\n        @case (ExternalVideoSupportedTypes.Code) {\n          <div>\n            \u0412\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043C\u044B\u0439 \u043A\u043E\u0434 \u043F\u043B\u0435\u0435\u0440\u0430.\n          </div>\n        }\n      }\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <croco-html-xml-tag-external-video [tagData]=\"tagData\"></croco-html-xml-tag-external-video>\n  </div>\n}\n\n@if (!tag.presentOrEdit) {\n  @if(tagData.type !== ExternalVideoSupportedTypes.Code) {\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\n          {{linkText}}\n        </mat-label>\n        <input matInput placeholder=\"{{linkText}}\"\n               autocomplete=\"off\"\n               [(ngModel)]=\"tagData.link\"\n               (ngModelChange)=\"linkChanged()\">\n      </mat-form-field>\n    </div>\n  } @else {\n    <div>\n        <mat-label>\n          {{linkText}}\n        </mat-label>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n          <textarea\n            #autosize=\"cdkTextareaAutosize\"\n            matInput\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"1\"\n            cdkAutosizeMaxRows=\"5\"\n            placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n            #textArea\n            [(ngModel)]=\"tagData.innerHtml\"\n            (ngModelChange)=\"linkChanged()\"\n          ></textarea>\n        </mat-form-field>\n    </div>\n  }\n}\n", styles: [".video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.video-player ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 760px){.video-player{height:300px}}@media screen and (max-width: 540px){.video-player{height:250px}}@media screen and (max-width: 450px){.video-player{height:200px}}@media screen and (max-width: 380px){.video-player{height:180px}}\n"] }]
         }], propDecorators: { tag: [{
                 type: Input
             }], onTagUpdated: [{
@@ -1862,17 +1912,11 @@ class DefaultTags {
         { tag: DownloadButtonTagDataConsts.TagName, displayValue: 'Кнопка для скачивания' },
         { tag: ButtonTagDataConsts.TagName, displayValue: 'Кнопка' },
         { tag: CustomWidgetTagDataConsts.TagName, displayValue: 'Виджет' },
+        { tag: HtmlRawTagDataConsts.TagName, displayValue: 'Разметка' },
         { tag: 'text', displayValue: 'Текст' },
     ]; }
-    static { this.htmlRawTag = {
-        tag: HtmlRawTagDataConsts.TagName, displayValue: 'Разметка'
-    }; }
-    static getTags(useHtmlRaw) {
-        var result = [...DefaultTags.tags];
-        if (useHtmlRaw) {
-            result.push(DefaultTags.htmlRawTag);
-        }
-        return result;
+    static getTags() {
+        return [...DefaultTags.tags];
     }
 }
 
@@ -1920,11 +1964,11 @@ class TextEditorComponent {
         return `<${this.tag.tagDescription.tag}>${this.tag.innerHtml}<${this.tag.tagDescription.tag}/>`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: TextEditorComponent, isStandalone: true, selector: "croco-html-text-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "@if (tag.presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\">\n    </div>\n    @if (tag.attributes['h-align'] === 'left') {\n      <div style=\"text-align: left;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n    @if (tag.attributes['h-align'] === 'right') {\n      <div style=\"text-align: right;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n    @if (tag.attributes['h-align'] === 'center') {\n      <div style=\"text-align: center;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n  </div>\n}\n\n@if (!tag.presentOrEdit) {\n  <div>\n    <div style=\"overflow-x: auto;\">\n      <mat-button-toggle-group [(ngModel)]=\"tag.attributes['h-align']\">\n        <mat-button-toggle value=\"center\">\n          \u041F\u043E \u0446\u0435\u043D\u0442\u0440\u0443 <mat-icon>format_align_center</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"left\">\n          \u0421\u043B\u0435\u0432\u0430 <mat-icon>format_align_left</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"right\">\n          \u0421\u043F\u0440\u0430\u0432\u0430 <mat-icon> format_align_right</mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"height: 10px;\">\n    </div>\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\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</mat-label>\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n          cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430\"\n        [(ngModel)]=\"tag.innerHtml\"></textarea>\n      </mat-form-field>\n    </div>\n  </div>\n}", styles: [""], dependencies: [{ kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: TextEditorComponent, isStandalone: true, selector: "croco-html-text-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "@if (tag.presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\">\n    </div>\n    @if (tag.attributes['h-align'] === 'left') {\n      <div style=\"text-align: left;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n    @if (tag.attributes['h-align'] === 'right') {\n      <div style=\"text-align: right;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n    @if (tag.attributes['h-align'] === 'center') {\n      <div style=\"text-align: center;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n  </div>\n}\n\n@if (!tag.presentOrEdit) {\n  <div>\n    <div style=\"overflow-x: auto;\">\n      <mat-button-toggle-group [(ngModel)]=\"tag.attributes['h-align']\">\n        <mat-button-toggle value=\"center\">\n          \u041F\u043E \u0446\u0435\u043D\u0442\u0440\u0443 <mat-icon>format_align_center</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"left\">\n          \u0421\u043B\u0435\u0432\u0430 <mat-icon>format_align_left</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"right\">\n          \u0421\u043F\u0440\u0430\u0432\u0430 <mat-icon> format_align_right</mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"height: 10px;\">\n    </div>\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\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</mat-label>\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n          cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430\"\n        [(ngModel)]=\"tag.innerHtml\"></textarea>\n      </mat-form-field>\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TextEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-text-editor', standalone: true, imports: [MatButtonToggleGroup, FormsModule, MatButtonToggle, MatIcon, MatFormField, MatLabel, MatInput, CdkTextareaAutosize], template: "@if (tag.presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\">\n    </div>\n    @if (tag.attributes['h-align'] === 'left') {\n      <div style=\"text-align: left;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n    @if (tag.attributes['h-align'] === 'right') {\n      <div style=\"text-align: right;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n    @if (tag.attributes['h-align'] === 'center') {\n      <div style=\"text-align: center;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n  </div>\n}\n\n@if (!tag.presentOrEdit) {\n  <div>\n    <div style=\"overflow-x: auto;\">\n      <mat-button-toggle-group [(ngModel)]=\"tag.attributes['h-align']\">\n        <mat-button-toggle value=\"center\">\n          \u041F\u043E \u0446\u0435\u043D\u0442\u0440\u0443 <mat-icon>format_align_center</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"left\">\n          \u0421\u043B\u0435\u0432\u0430 <mat-icon>format_align_left</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"right\">\n          \u0421\u043F\u0440\u0430\u0432\u0430 <mat-icon> format_align_right</mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"height: 10px;\">\n    </div>\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\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</mat-label>\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n          cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430\"\n        [(ngModel)]=\"tag.innerHtml\"></textarea>\n      </mat-form-field>\n    </div>\n  </div>\n}" }]
+            args: [{ selector: 'croco-html-text-editor', standalone: true, imports: [MatButtonToggleGroup, FormsModule, MatButtonToggle, MatIcon, MatFormField, MatLabel, MatInput, CdkTextareaAutosize], template: "@if (tag.presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\">\n    </div>\n    @if (tag.attributes['h-align'] === 'left') {\n      <div style=\"text-align: left;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n    @if (tag.attributes['h-align'] === 'right') {\n      <div style=\"text-align: right;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n    @if (tag.attributes['h-align'] === 'center') {\n      <div style=\"text-align: center;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n  </div>\n}\n\n@if (!tag.presentOrEdit) {\n  <div>\n    <div style=\"overflow-x: auto;\">\n      <mat-button-toggle-group [(ngModel)]=\"tag.attributes['h-align']\">\n        <mat-button-toggle value=\"center\">\n          \u041F\u043E \u0446\u0435\u043D\u0442\u0440\u0443 <mat-icon>format_align_center</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"left\">\n          \u0421\u043B\u0435\u0432\u0430 <mat-icon>format_align_left</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"right\">\n          \u0421\u043F\u0440\u0430\u0432\u0430 <mat-icon> format_align_right</mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"height: 10px;\">\n    </div>\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\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</mat-label>\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n          cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430\"\n        [(ngModel)]=\"tag.innerHtml\"></textarea>\n      </mat-form-field>\n    </div>\n  </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { tag: [{
                 type: Input
             }], onTagUpdated: [{
@@ -2026,6 +2070,7 @@ class VisualEditorComponent {
         this.isLoading = false;
         this.loadingText = "Идёт загрузка";
         this.text = '';
+        this.htmlRaw = '';
         this.alignment = EAlignments.Left;
         this.textTag = DefaultTags.textTags[0].tag;
         this.textTagOptions = DefaultTags.textTags;
@@ -2034,7 +2079,8 @@ class VisualEditorComponent {
         this.tags = [];
         this.videoPlayers = ExternalVideoPlayers;
         this.ExternalVideoTagDataConsts = ExternalVideoTagDataConsts;
-        this.useHtmlRaw = false;
+        this.HtmlRawTagDataConsts = HtmlRawTagDataConsts;
+        this.useHtmlRaw = true;
         this.html = "";
         this.onHtmlChanged = new EventEmitter();
         this.rendered = new EventEmitter();
@@ -2059,7 +2105,10 @@ class VisualEditorComponent {
         }
         else if (tagDescription.tag == ExternalVideoTagDataConsts.TagName) {
             attrs[ExternalVideoTagDataConsts.VideoTypeAttrName] = this.selectedVideoPlayer;
-            attrs[ExternalVideoTagDataConsts.LinkAttrName] = this.selectedVideoPlayer === ExternalVideoSupportedTypes.VkVideo ? defaultLinkVk : defaultLinkYouTube;
+            attrs[ExternalVideoTagDataConsts.LinkAttrName] = this.selectedVideoPlayer === ExternalVideoSupportedTypes.Code ? '' :
+                this.selectedVideoPlayer === ExternalVideoSupportedTypes.VkVideo
+                    ? defaultLinkVk
+                    : defaultLinkYouTube;
         }
         else if (tagDescription.tag == FileImageTagDataConsts.TagName) {
             attrs[FileImageTagDataConsts.ScreenMediaRequest] = FileImageTagDataConsts.DefaultValueForFileImage;
@@ -2073,6 +2122,9 @@ class VisualEditorComponent {
             attrs[ButtonTagDataConsts.TypeAttrName] = 'button';
             attrs[ButtonTagDataConsts.TextAttrName] = 'Кнопка';
         }
+        else if (tagDescription.tag === HtmlRawTagDataConsts.TagName) {
+            innerHtml = this.htmlRaw;
+        }
         else if (tagDescription.tag == CustomWidgetTagDataConsts.TagName) {
             attrs[CustomWidgetTagDataConsts.TypeAttrName] = 'example-type';
             attrs[CustomWidgetTagDataConsts.DataIdAttrName] = 'example-data-id';
@@ -2087,6 +2139,7 @@ class VisualEditorComponent {
             attributes: attrs,
             presentOrEdit: true
         });
+        this.htmlRaw = '';
         this.recalculateHtml();
     }
     startAddingText(tag = '') {
@@ -2157,16 +2210,17 @@ class VisualEditorComponent {
     }
     selectTag(data) {
         this.selectedValue = data.tag;
+        console.log(this.selectedValue);
         this.startAddingText(data.tag);
     }
     ngOnInit() {
         this.recalculateBodyTags();
-        this.tags = DefaultTags.getTags(this.useHtmlRaw);
+        this.tags = DefaultTags.getTags();
         this.selectedValue = this.tags[0].tag;
         this.selectedVideoPlayer = this.videoPlayers[0].type;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: VisualEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: VisualEditorComponent, isStandalone: true, selector: "croco-visual-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged", rendered: "rendered" }, viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }], ngImport: i0, template: "@if (isLoading) {\n  <div>\n    <div>\n      <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\n      <div style=\"text-align: center;\">{{loadingText}}</div>\n    </div>\n    <div style=\"height: 10px;\"></div>\n  </div>\n}\n<div [hidden]=\"isLoading\">\n  <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n    <mat-card-content>\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-12\">\n          <div class=\"w-100\" style=\"margin-bottom: 22px\">\n            <div class=\"tags\">\n              @for (tag of tags; track tag) {\n                <span class=\"tag-item\" (click)=\"selectTag(tag)\" [class.active]=\"selectedValue === tag.tag\">\n                  <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                [ngTemplateOutletContext]=\"{icon: tag.tag}\">\n                  </ng-container>\n                  {{tag.displayValue}}\n                </span>\n              }\n            </div>\n          </div>\n        </div>\n        @if (selectedValue === ExternalVideoTagDataConsts.TagName) {\n          <div class=\"col-12\">\n            <mat-form-field class=\"w-100\" appearance=\"outline\">\n              <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0438\u0434\u0435\u043E\u043F\u043B\u0435\u0435\u0440</mat-label>\n              <mat-select [(ngModel)]=\"selectedVideoPlayer\">\n                @for (videoPlayer of videoPlayers; track videoPlayer.type) {\n                  <mat-option [value]=\"videoPlayer.type\">\n                    {{videoPlayer.displayValue}}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </div>\n        }\n        @if (selectedValue === 'text') {\n          <div style=\"display: flex; justify-content: space-between; flex-wrap: wrap\">\n            <div style=\"margin-bottom: 22px; overflow-x: auto;\">\n              <mat-button-toggle-group\n                [(ngModel)]=\"textTag\"\n                [hideSingleSelectionIndicator]=\"true\"\n              >\n                @for (option of textTagOptions; track option) {\n                  <mat-button-toggle value=\"{{ option.tag }}\">\n                    {{ option.displayValue }}\n                  </mat-button-toggle>\n                }\n              </mat-button-toggle-group>\n            </div>\n\n            <div style=\"margin-bottom: 22px\">\n              <mat-button-toggle-group\n                [(ngModel)]=\"alignment\"\n                [hideSingleSelectionIndicator]=\"true\"\n              >\n                @for (option of alignmentOptions; track option) {\n                  <mat-button-toggle value=\"{{ option.value }}\">\n                    <ng-container [ngTemplateOutlet]=\"textAlignToggleIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: option.value}\">\n                    </ng-container>\n                  </mat-button-toggle>\n                }\n              </mat-button-toggle-group>\n            </div>\n          </div>\n          <mat-form-field class=\"w-100\">\n            <mat-label>\u0422\u0435\u043A\u0441\u0442</mat-label>\n            <textarea\n              #autosize=\"cdkTextareaAutosize\"\n              matInput\n              cdkTextareaAutosize\n              cdkAutosizeMinRows=\"1\"\n              cdkAutosizeMaxRows=\"5\"\n              placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n              #textArea\n              [(ngModel)]=\"text\"\n            ></textarea>\n          </mat-form-field>\n        }\n        <div class=\"col-12\">\n          <button (click)=\"addTag()\" class=\"w-100\" mat-stroked-button>\n            \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433\n          </button>\n        </div>\n      </div>\n    </mat-card-content>\n  </mat-card>\n\n  <div style=\"height: 10px;\">\n  </div>\n</div>\n<div [hidden]=\"isLoading\">\n  <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n    <mat-card-content>\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-12\">\n          <croco-html-add-files-btn (filesTagsReady)=\"filesTagsReadyHandler($event)\"\n            (postFilesStarted)=\"postFilesStartedEventHandler($event)\" class=\"w-100\">\n          </croco-html-add-files-btn>\n        </div>\n      </div>\n    </mat-card-content>\n  </mat-card>\n\n  <div style=\"height: 10px;\">\n  </div>\n</div>\n<div [hidden]=\"isLoading\">\n  <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    @for (tag of bodyTags; track tag; let i = $index) {\n      <div cdkDrag>\n        <mat-card style=\"margin: 2px;\" class=\"mat-card special\">\n          <mat-card-content>\n            <div class=\"d-flex justify-content-between\">\n              <div class=\"example-handle\" cdkDragHandle>\n                <svg class=\"move-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"cursor: pointer\">\n                  <path\n                    d=\"M14.6516 19.0984L12 21.75M12 21.75L9.34838 19.0984M12 21.75V15M4.90163 14.6516L2.25 12M2.25 12L4.90163 9.34838M2.25 12H9M19.0984 9.34838L21.75 12M21.75 12L19.0984 14.6516M21.75 12H15M9.34838 4.90163L12 2.25M12 2.25L14.6516 4.90163M12 2.25V9\"\n                    stroke=\"#323E8B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </div>\n              <div>\n                <div class=\"badge\" style=\"color:#323E8B\">\n                  <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                [ngTemplateOutletContext]=\"{icon: tag.tagDescription.tag}\">\n                  </ng-container>\n                </div>\n              </div>\n            </div>\n            <div style=\"height: 15px;\"></div>\n            <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagSavedHandler($event)\"\n              (onTagRemoved)=\"onTagRemovedHandler(i)\">\n            </croco-html-main-editor-block>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template #textAlignToggleIcons let-icon=\"icon\">\n  @if (icon === 'left') {\n    <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M3.12548 14.6875H13.125M3.12548 11.5625H16.875M3.125 8.4375H13.125M3.125 5.3125H16.875\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @if (icon === 'center') {\n    <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M5.00024 14.6875H14.9998M3.12524 11.5625H16.8748M5 8.4375H15M3.125 5.3125H16.875\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @if (icon === 'right') {\n    <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M6.87548 14.6875H16.875M3.12548 11.5625H16.875M6.875 8.4375H16.875M3.125 5.3125H16.875\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n</ng-template>\n\n<ng-template #tagButtonIcons let-icon=\"icon\">\n  @if (icon === 'text') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M7.49952 15.6246H12.4995M9.99952 4.37459V15.6246M3.74951 6.87459V4.37459H16.2495V6.87459\"\n            stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'html-raw') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M15 6.875L18.75 10L15 13.125M5 6.875L1.25 10L5 13.125M12.5 3.125L7.5 16.875\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon.indexOf('h') === 0) {\n    {{icon.toUpperCase()}}\n  }\n  @else if (icon === 'external-video') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M14.375 8.75L18.75 6.25V13.75L14.375 11.25M1.875 4.6875H11.875C12.538 4.6875 13.1739 4.95089 13.6428 5.41973C14.1116 5.88857 14.375 6.52446 14.375 7.1875V14.6875C14.375 14.8533 14.3092 15.0122 14.1919 15.1294C14.0747 15.2467 13.9158 15.3125 13.75 15.3125H3.75C3.08696 15.3125 2.45107 15.0491 1.98223 14.5803C1.51339 14.1114 1.25 13.4755 1.25 12.8125V5.3125C1.25 5.14674 1.31585 4.98777 1.43306 4.87056C1.55027 4.75335 1.70924 4.6875 1.875 4.6875Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'file-image') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M2.5 13.125L6.43305 9.19194C6.49108 9.1339 6.55998 9.08787 6.63581 9.05646C6.71164 9.02505 6.79291 9.00888 6.87499 9.00888C6.95706 9.00888 7.03834 9.02505 7.11417 9.05646C7.18999 9.08787 7.25889 9.1339 7.31693 9.19194L10.808 12.6831C10.8661 12.7411 10.935 12.7871 11.0108 12.8185C11.0866 12.8499 11.1679 12.8661 11.25 12.8661C11.3321 12.8661 11.4133 12.8499 11.4892 12.8185C11.565 12.7871 11.6339 12.7411 11.6919 12.6831L13.308 11.0669C13.3661 11.0089 13.435 10.9629 13.5108 10.9315C13.5866 10.9 13.6679 10.8839 13.75 10.8839C13.8321 10.8839 13.9133 10.9 13.9892 10.9315C14.065 10.9629 14.1339 11.0089 14.1919 11.0669L17.5 14.375M3.125 3.75H16.875C17.2202 3.75 17.5 4.02982 17.5 4.375V15.625C17.5 15.9702 17.2202 16.25 16.875 16.25H3.125C2.77982 16.25 2.5 15.9702 2.5 15.625V4.375C2.5 4.02982 2.77982 3.75 3.125 3.75ZM13.125 7.8125C13.125 8.33027 12.7053 8.75 12.1875 8.75C11.6697 8.75 11.25 8.33027 11.25 7.8125C11.25 7.29473 11.6697 6.875 12.1875 6.875C12.7053 6.875 13.125 7.29473 13.125 7.8125Z\"\n        stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'custom-widget') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M16.25 15V16.25M13.75 12.5H16.25M11.25 16.25H13.75V11.25M11.25 11.25V13.75M4.375 11.25H8.125C8.47018 11.25 8.75 11.5298 8.75 11.875V15.625C8.75 15.9702 8.47018 16.25 8.125 16.25H4.375C4.02982 16.25 3.75 15.9702 3.75 15.625V11.875C3.75 11.5298 4.02982 11.25 4.375 11.25ZM11.875 3.75H15.625C15.9702 3.75 16.25 4.02982 16.25 4.375V8.125C16.25 8.47018 15.9702 8.75 15.625 8.75H11.875C11.5298 8.75 11.25 8.47018 11.25 8.125V4.375C11.25 4.02982 11.5298 3.75 11.875 3.75ZM4.375 3.75H8.125C8.47018 3.75 8.75 4.02982 8.75 4.375V8.125C8.75 8.47018 8.47018 8.75 8.125 8.75H4.375C4.02982 8.75 3.75 8.47018 3.75 8.125V4.375C3.75 4.02982 4.02982 3.75 4.375 3.75Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'button') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M9.99939 3.75024V9.68775M13.7501 4.23695C14.9923 5.04536 15.9399 6.23353 16.4518 7.62435C16.9638 9.01517 17.0125 10.5342 16.5909 11.955C16.1693 13.3758 15.2998 14.6223 14.1121 15.5087C12.9244 16.3952 11.482 16.8741 9.99998 16.8741C8.51795 16.8741 7.07559 16.3951 5.88788 15.5087C4.70017 14.6223 3.83071 13.3757 3.40908 11.9549C2.98746 10.5341 3.03624 9.01513 3.54816 7.62432C4.06009 6.2335 5.00774 5.04534 6.24988 4.23693\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'download-file-button') {\n    <svg style=\"fill:currentColor\"  width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.42424 9.41667C3.49967 9.41667 2.75 10.1663 2.75 11.0909V19.5758C2.75 20.5003 3.49967 21.25 4.42424 21.25H19.5758C20.5003 21.25 21.25 20.5003 21.25 19.5758V11.0909C21.25 10.1663 20.5003 9.41667 19.5758 9.41667H15.9394C15.5252 9.41667 15.1894 9.08088 15.1894 8.66667C15.1894 8.25245 15.5252 7.91667 15.9394 7.91667H19.5758C21.3288 7.91667 22.75 9.33791 22.75 11.0909V19.5758C22.75 21.3288 21.3288 22.75 19.5758 22.75H4.42424C2.67124 22.75 1.25 21.3288 1.25 19.5758V11.0909C1.25 9.33791 2.67124 7.91667 4.42424 7.91667H8.06061C8.47482 7.91667 8.81061 8.25245 8.81061 8.66667C8.81061 9.08088 8.47482 9.41667 8.06061 9.41667H4.42424Z\"/>\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 1.25C12.4142 1.25 12.75 1.58579 12.75 2V15.9394C12.75 16.3536 12.4142 16.6894 12 16.6894C11.5858 16.6894 11.25 16.3536 11.25 15.9394V2C11.25 1.58579 11.5858 1.25 12 1.25Z\"/>\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.83331 12.9848C8.1262 12.6919 8.60107 12.6919 8.89397 12.9848L12 16.0909L15.106 12.9848C15.3989 12.6919 15.8738 12.6919 16.1667 12.9848C16.4596 13.2777 16.4596 13.7526 16.1667 14.0455L12.5303 17.6818C12.2374 17.9747 11.7626 17.9747 11.4697 17.6818L7.83331 14.0455C7.54041 13.7526 7.54041 13.2777 7.83331 12.9848Z\"/>\n    </svg>\n  }\n</ng-template>\n\n\n\n\n\n\n", styles: [":host{--mat-standard-button-toggle-selected-state-background-color: #323E8B;--mat-standard-button-toggle-text-color: #323E8B;--mat-standard-button-toggle-selected-state-text-color: white;--mat-standard-button-toggle-height: 36px;--mat-standard-button-toggle-divider-color: #323E8B;--mdc-outlined-button-label-text-weight: 400;--mdc-outlined-button-label-text-color: #333333 !important;--mdc-outlined-button-container-shape: 30px;--mdc-outlined-button-outline-width: 2px;--mdc-outlined-button-container-height: 44px}:host ::ng-deep .mat-button-toggle-appearance-standard span.mat-button-toggle-label-content{padding:0 8px;min-width:36px}.mat-button-toggle .text-align-icon{stroke:#323e8b}.mat-button-toggle:hover{color:#747ebf}.mat-button-toggle:hover .text-align-icon{stroke:#747ebf}.mat-button-toggle-checked .text-align-icon{stroke:#fff}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.badge{width:44px;height:44px;border-radius:50%;border:1px solid #323E8B;display:flex;align-items:center;justify-content:center}.mat-card.special{border:1px solid #747EBF;border-radius:8px;box-shadow:none;margin:2px 2px 10px}.tags{display:flex;gap:10px;flex-wrap:wrap}.tag-item{display:flex;align-items:center;gap:5px;cursor:pointer;padding:10px 20px;border:1px solid #323E8B;border-radius:30px;background-color:#fff;color:#23262a;transition:.2s ease-in-out}.tag-item svg{color:#323e8b}.tag-item.active{background-color:#323e8b;color:#fff}.tag-item.active svg{color:#fff}.tag-item:hover{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:hover svg{color:#747ebf}.move-icon:hover{opacity:.7}\n"], dependencies: [{ kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: AddFilesBtnComponent, selector: "croco-html-add-files-btn", outputs: ["postFilesStarted", "filesTagsReady"] }, { kind: "directive", type: 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: 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: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MainEditorBlockComponent, selector: "croco-html-main-editor-block", inputs: ["tag"], outputs: ["onTagSaved", "onTagRemoved"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: VisualEditorComponent, isStandalone: true, selector: "croco-visual-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged", rendered: "rendered" }, viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }], ngImport: i0, template: "@if (isLoading) {\n  <div>\n    <div>\n      <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\n      <div style=\"text-align: center;\">{{loadingText}}</div>\n    </div>\n    <div style=\"height: 10px;\"></div>\n  </div>\n}\n<div [hidden]=\"isLoading\">\n  <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n    <mat-card-content>\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-12\">\n          <div class=\"w-100\" style=\"margin-bottom: 22px\">\n            <div class=\"tags\">\n              @for (tag of tags; track tag) {\n                <span class=\"tag-item\" (click)=\"selectTag(tag)\" [class.active]=\"selectedValue === tag.tag\">\n                  <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                [ngTemplateOutletContext]=\"{icon: tag.tag}\">\n                  </ng-container>\n                  {{tag.displayValue}}\n                </span>\n              }\n            </div>\n          </div>\n        </div>\n        @if (selectedValue === ExternalVideoTagDataConsts.TagName) {\n          <div class=\"col-12\">\n            <mat-form-field class=\"w-100\" appearance=\"outline\">\n              <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0438\u0434\u0435\u043E\u043F\u043B\u0435\u0435\u0440</mat-label>\n              <mat-select [(ngModel)]=\"selectedVideoPlayer\">\n                @for (videoPlayer of videoPlayers; track videoPlayer.type) {\n                  <mat-option [value]=\"videoPlayer.type\">\n                    {{videoPlayer.displayValue}}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </div>\n        }\n        @if (selectedValue === HtmlRawTagDataConsts.TagName) {\n          <div class=\"col-12\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n                <textarea\n                  #autosize=\"cdkTextareaAutosize\"\n                  matInput\n                  cdkTextareaAutosize\n                  cdkAutosizeMinRows=\"1\"\n                  cdkAutosizeMaxRows=\"5\"\n                  placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n                  #textArea\n                  [(ngModel)]=\"htmlRaw\"\n                ></textarea>\n            </mat-form-field>\n          </div>\n        }\n        @if (selectedValue === 'text') {\n          <div style=\"display: flex; justify-content: space-between; flex-wrap: wrap\">\n            <div style=\"margin-bottom: 22px; overflow-x: auto;\">\n              <mat-button-toggle-group\n                [(ngModel)]=\"textTag\"\n                [hideSingleSelectionIndicator]=\"true\"\n              >\n                @for (option of textTagOptions; track option) {\n                  <mat-button-toggle value=\"{{ option.tag }}\">\n                    {{ option.displayValue }}\n                  </mat-button-toggle>\n                }\n              </mat-button-toggle-group>\n            </div>\n\n            <div style=\"margin-bottom: 22px\">\n              <mat-button-toggle-group\n                [(ngModel)]=\"alignment\"\n                [hideSingleSelectionIndicator]=\"true\"\n              >\n                @for (option of alignmentOptions; track option) {\n                  <mat-button-toggle value=\"{{ option.value }}\">\n                    <ng-container [ngTemplateOutlet]=\"textAlignToggleIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: option.value}\">\n                    </ng-container>\n                  </mat-button-toggle>\n                }\n              </mat-button-toggle-group>\n            </div>\n          </div>\n          <mat-form-field class=\"w-100\">\n            <mat-label>\u0422\u0435\u043A\u0441\u0442</mat-label>\n            <textarea\n              #autosize=\"cdkTextareaAutosize\"\n              matInput\n              cdkTextareaAutosize\n              cdkAutosizeMinRows=\"1\"\n              cdkAutosizeMaxRows=\"5\"\n              placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n              #textArea\n              [(ngModel)]=\"text\"\n            ></textarea>\n          </mat-form-field>\n        }\n        <div class=\"col-12\">\n          <button (click)=\"addTag()\" class=\"w-100\" mat-stroked-button>\n            \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433\n          </button>\n        </div>\n      </div>\n    </mat-card-content>\n  </mat-card>\n\n  <div style=\"height: 10px;\">\n  </div>\n</div>\n<div [hidden]=\"isLoading\">\n  <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n    <mat-card-content>\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-12\">\n          <croco-html-add-files-btn (filesTagsReady)=\"filesTagsReadyHandler($event)\"\n            (postFilesStarted)=\"postFilesStartedEventHandler($event)\" class=\"w-100\">\n          </croco-html-add-files-btn>\n        </div>\n      </div>\n    </mat-card-content>\n  </mat-card>\n\n  <div style=\"height: 10px;\">\n  </div>\n</div>\n<div [hidden]=\"isLoading\">\n  <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    @for (tag of bodyTags; track tag; let i = $index) {\n      <div cdkDrag>\n        <mat-card style=\"margin: 2px;\" class=\"mat-card special\">\n          <mat-card-content>\n            <div class=\"d-flex justify-content-between\">\n              <div class=\"example-handle\" cdkDragHandle>\n                <svg class=\"move-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"cursor: pointer\">\n                  <path\n                    d=\"M14.6516 19.0984L12 21.75M12 21.75L9.34838 19.0984M12 21.75V15M4.90163 14.6516L2.25 12M2.25 12L4.90163 9.34838M2.25 12H9M19.0984 9.34838L21.75 12M21.75 12L19.0984 14.6516M21.75 12H15M9.34838 4.90163L12 2.25M12 2.25L14.6516 4.90163M12 2.25V9\"\n                    stroke=\"#323E8B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </div>\n              <div>\n                <div class=\"badge\" style=\"color:#323E8B\">\n                  <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                [ngTemplateOutletContext]=\"{icon: tag.tagDescription.tag}\">\n                  </ng-container>\n                </div>\n              </div>\n            </div>\n            <div style=\"height: 15px;\"></div>\n            <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagSavedHandler($event)\"\n              (onTagRemoved)=\"onTagRemovedHandler(i)\">\n            </croco-html-main-editor-block>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template #textAlignToggleIcons let-icon=\"icon\">\n  @if (icon === 'left') {\n    <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M3.12548 14.6875H13.125M3.12548 11.5625H16.875M3.125 8.4375H13.125M3.125 5.3125H16.875\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @if (icon === 'center') {\n    <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M5.00024 14.6875H14.9998M3.12524 11.5625H16.8748M5 8.4375H15M3.125 5.3125H16.875\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @if (icon === 'right') {\n    <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M6.87548 14.6875H16.875M3.12548 11.5625H16.875M6.875 8.4375H16.875M3.125 5.3125H16.875\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n</ng-template>\n\n<ng-template #tagButtonIcons let-icon=\"icon\">\n  @if (icon === 'text') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M7.49952 15.6246H12.4995M9.99952 4.37459V15.6246M3.74951 6.87459V4.37459H16.2495V6.87459\"\n            stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'html-raw') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M15 6.875L18.75 10L15 13.125M5 6.875L1.25 10L5 13.125M12.5 3.125L7.5 16.875\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon.indexOf('h') === 0) {\n    {{icon.toUpperCase()}}\n  }\n  @else if (icon === 'external-video') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M14.375 8.75L18.75 6.25V13.75L14.375 11.25M1.875 4.6875H11.875C12.538 4.6875 13.1739 4.95089 13.6428 5.41973C14.1116 5.88857 14.375 6.52446 14.375 7.1875V14.6875C14.375 14.8533 14.3092 15.0122 14.1919 15.1294C14.0747 15.2467 13.9158 15.3125 13.75 15.3125H3.75C3.08696 15.3125 2.45107 15.0491 1.98223 14.5803C1.51339 14.1114 1.25 13.4755 1.25 12.8125V5.3125C1.25 5.14674 1.31585 4.98777 1.43306 4.87056C1.55027 4.75335 1.70924 4.6875 1.875 4.6875Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'file-image') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M2.5 13.125L6.43305 9.19194C6.49108 9.1339 6.55998 9.08787 6.63581 9.05646C6.71164 9.02505 6.79291 9.00888 6.87499 9.00888C6.95706 9.00888 7.03834 9.02505 7.11417 9.05646C7.18999 9.08787 7.25889 9.1339 7.31693 9.19194L10.808 12.6831C10.8661 12.7411 10.935 12.7871 11.0108 12.8185C11.0866 12.8499 11.1679 12.8661 11.25 12.8661C11.3321 12.8661 11.4133 12.8499 11.4892 12.8185C11.565 12.7871 11.6339 12.7411 11.6919 12.6831L13.308 11.0669C13.3661 11.0089 13.435 10.9629 13.5108 10.9315C13.5866 10.9 13.6679 10.8839 13.75 10.8839C13.8321 10.8839 13.9133 10.9 13.9892 10.9315C14.065 10.9629 14.1339 11.0089 14.1919 11.0669L17.5 14.375M3.125 3.75H16.875C17.2202 3.75 17.5 4.02982 17.5 4.375V15.625C17.5 15.9702 17.2202 16.25 16.875 16.25H3.125C2.77982 16.25 2.5 15.9702 2.5 15.625V4.375C2.5 4.02982 2.77982 3.75 3.125 3.75ZM13.125 7.8125C13.125 8.33027 12.7053 8.75 12.1875 8.75C11.6697 8.75 11.25 8.33027 11.25 7.8125C11.25 7.29473 11.6697 6.875 12.1875 6.875C12.7053 6.875 13.125 7.29473 13.125 7.8125Z\"\n        stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'custom-widget') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M16.25 15V16.25M13.75 12.5H16.25M11.25 16.25H13.75V11.25M11.25 11.25V13.75M4.375 11.25H8.125C8.47018 11.25 8.75 11.5298 8.75 11.875V15.625C8.75 15.9702 8.47018 16.25 8.125 16.25H4.375C4.02982 16.25 3.75 15.9702 3.75 15.625V11.875C3.75 11.5298 4.02982 11.25 4.375 11.25ZM11.875 3.75H15.625C15.9702 3.75 16.25 4.02982 16.25 4.375V8.125C16.25 8.47018 15.9702 8.75 15.625 8.75H11.875C11.5298 8.75 11.25 8.47018 11.25 8.125V4.375C11.25 4.02982 11.5298 3.75 11.875 3.75ZM4.375 3.75H8.125C8.47018 3.75 8.75 4.02982 8.75 4.375V8.125C8.75 8.47018 8.47018 8.75 8.125 8.75H4.375C4.02982 8.75 3.75 8.47018 3.75 8.125V4.375C3.75 4.02982 4.02982 3.75 4.375 3.75Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'button') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M9.99939 3.75024V9.68775M13.7501 4.23695C14.9923 5.04536 15.9399 6.23353 16.4518 7.62435C16.9638 9.01517 17.0125 10.5342 16.5909 11.955C16.1693 13.3758 15.2998 14.6223 14.1121 15.5087C12.9244 16.3952 11.482 16.8741 9.99998 16.8741C8.51795 16.8741 7.07559 16.3951 5.88788 15.5087C4.70017 14.6223 3.83071 13.3757 3.40908 11.9549C2.98746 10.5341 3.03624 9.01513 3.54816 7.62432C4.06009 6.2335 5.00774 5.04534 6.24988 4.23693\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'download-file-button') {\n    <svg style=\"fill:currentColor\"  width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.42424 9.41667C3.49967 9.41667 2.75 10.1663 2.75 11.0909V19.5758C2.75 20.5003 3.49967 21.25 4.42424 21.25H19.5758C20.5003 21.25 21.25 20.5003 21.25 19.5758V11.0909C21.25 10.1663 20.5003 9.41667 19.5758 9.41667H15.9394C15.5252 9.41667 15.1894 9.08088 15.1894 8.66667C15.1894 8.25245 15.5252 7.91667 15.9394 7.91667H19.5758C21.3288 7.91667 22.75 9.33791 22.75 11.0909V19.5758C22.75 21.3288 21.3288 22.75 19.5758 22.75H4.42424C2.67124 22.75 1.25 21.3288 1.25 19.5758V11.0909C1.25 9.33791 2.67124 7.91667 4.42424 7.91667H8.06061C8.47482 7.91667 8.81061 8.25245 8.81061 8.66667C8.81061 9.08088 8.47482 9.41667 8.06061 9.41667H4.42424Z\"/>\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 1.25C12.4142 1.25 12.75 1.58579 12.75 2V15.9394C12.75 16.3536 12.4142 16.6894 12 16.6894C11.5858 16.6894 11.25 16.3536 11.25 15.9394V2C11.25 1.58579 11.5858 1.25 12 1.25Z\"/>\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.83331 12.9848C8.1262 12.6919 8.60107 12.6919 8.89397 12.9848L12 16.0909L15.106 12.9848C15.3989 12.6919 15.8738 12.6919 16.1667 12.9848C16.4596 13.2777 16.4596 13.7526 16.1667 14.0455L12.5303 17.6818C12.2374 17.9747 11.7626 17.9747 11.4697 17.6818L7.83331 14.0455C7.54041 13.7526 7.54041 13.2777 7.83331 12.9848Z\"/>\n    </svg>\n  }\n</ng-template>\n\n\n\n\n\n\n", styles: [":host{--mat-standard-button-toggle-selected-state-background-color: #323E8B;--mat-standard-button-toggle-text-color: #323E8B;--mat-standard-button-toggle-selected-state-text-color: white;--mat-standard-button-toggle-height: 36px;--mat-standard-button-toggle-divider-color: #323E8B;--mdc-outlined-button-label-text-weight: 400;--mdc-outlined-button-label-text-color: #333333 !important;--mdc-outlined-button-container-shape: 30px;--mdc-outlined-button-outline-width: 2px;--mdc-outlined-button-container-height: 44px}:host ::ng-deep .mat-button-toggle-appearance-standard span.mat-button-toggle-label-content{padding:0 8px;min-width:36px}.mat-button-toggle .text-align-icon{stroke:#323e8b}.mat-button-toggle:hover{color:#747ebf}.mat-button-toggle:hover .text-align-icon{stroke:#747ebf}.mat-button-toggle-checked .text-align-icon{stroke:#fff}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.badge{width:44px;height:44px;border-radius:50%;border:1px solid #323E8B;display:flex;align-items:center;justify-content:center}.mat-card.special{border:1px solid #747EBF;border-radius:8px;box-shadow:none;margin:2px 2px 10px}.tags{display:flex;gap:10px;flex-wrap:wrap}.tag-item{display:flex;align-items:center;gap:5px;cursor:pointer;padding:10px 20px;border:1px solid #323E8B;border-radius:30px;background-color:#fff;color:#23262a;transition:.2s ease-in-out}.tag-item svg{color:#323e8b}.tag-item.active{background-color:#323e8b;color:#fff}.tag-item.active svg{color:#fff}.tag-item:hover{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:hover svg{color:#747ebf}.move-icon:hover{opacity:.7}\n"], dependencies: [{ kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: AddFilesBtnComponent, selector: "croco-html-add-files-btn", outputs: ["postFilesStarted", "filesTagsReady"] }, { kind: "directive", type: 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: 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: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MainEditorBlockComponent, selector: "croco-html-main-editor-block", inputs: ["tag"], outputs: ["onTagSaved", "onTagRemoved"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: VisualEditorComponent, decorators: [{
             type: Component,
@@ -2191,7 +2245,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                         MatButtonToggle,
                         NgTemplateOutlet,
                         UpperCasePipe,
-                    ], template: "@if (isLoading) {\n  <div>\n    <div>\n      <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\n      <div style=\"text-align: center;\">{{loadingText}}</div>\n    </div>\n    <div style=\"height: 10px;\"></div>\n  </div>\n}\n<div [hidden]=\"isLoading\">\n  <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n    <mat-card-content>\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-12\">\n          <div class=\"w-100\" style=\"margin-bottom: 22px\">\n            <div class=\"tags\">\n              @for (tag of tags; track tag) {\n                <span class=\"tag-item\" (click)=\"selectTag(tag)\" [class.active]=\"selectedValue === tag.tag\">\n                  <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                [ngTemplateOutletContext]=\"{icon: tag.tag}\">\n                  </ng-container>\n                  {{tag.displayValue}}\n                </span>\n              }\n            </div>\n          </div>\n        </div>\n        @if (selectedValue === ExternalVideoTagDataConsts.TagName) {\n          <div class=\"col-12\">\n            <mat-form-field class=\"w-100\" appearance=\"outline\">\n              <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0438\u0434\u0435\u043E\u043F\u043B\u0435\u0435\u0440</mat-label>\n              <mat-select [(ngModel)]=\"selectedVideoPlayer\">\n                @for (videoPlayer of videoPlayers; track videoPlayer.type) {\n                  <mat-option [value]=\"videoPlayer.type\">\n                    {{videoPlayer.displayValue}}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </div>\n        }\n        @if (selectedValue === 'text') {\n          <div style=\"display: flex; justify-content: space-between; flex-wrap: wrap\">\n            <div style=\"margin-bottom: 22px; overflow-x: auto;\">\n              <mat-button-toggle-group\n                [(ngModel)]=\"textTag\"\n                [hideSingleSelectionIndicator]=\"true\"\n              >\n                @for (option of textTagOptions; track option) {\n                  <mat-button-toggle value=\"{{ option.tag }}\">\n                    {{ option.displayValue }}\n                  </mat-button-toggle>\n                }\n              </mat-button-toggle-group>\n            </div>\n\n            <div style=\"margin-bottom: 22px\">\n              <mat-button-toggle-group\n                [(ngModel)]=\"alignment\"\n                [hideSingleSelectionIndicator]=\"true\"\n              >\n                @for (option of alignmentOptions; track option) {\n                  <mat-button-toggle value=\"{{ option.value }}\">\n                    <ng-container [ngTemplateOutlet]=\"textAlignToggleIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: option.value}\">\n                    </ng-container>\n                  </mat-button-toggle>\n                }\n              </mat-button-toggle-group>\n            </div>\n          </div>\n          <mat-form-field class=\"w-100\">\n            <mat-label>\u0422\u0435\u043A\u0441\u0442</mat-label>\n            <textarea\n              #autosize=\"cdkTextareaAutosize\"\n              matInput\n              cdkTextareaAutosize\n              cdkAutosizeMinRows=\"1\"\n              cdkAutosizeMaxRows=\"5\"\n              placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n              #textArea\n              [(ngModel)]=\"text\"\n            ></textarea>\n          </mat-form-field>\n        }\n        <div class=\"col-12\">\n          <button (click)=\"addTag()\" class=\"w-100\" mat-stroked-button>\n            \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433\n          </button>\n        </div>\n      </div>\n    </mat-card-content>\n  </mat-card>\n\n  <div style=\"height: 10px;\">\n  </div>\n</div>\n<div [hidden]=\"isLoading\">\n  <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n    <mat-card-content>\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-12\">\n          <croco-html-add-files-btn (filesTagsReady)=\"filesTagsReadyHandler($event)\"\n            (postFilesStarted)=\"postFilesStartedEventHandler($event)\" class=\"w-100\">\n          </croco-html-add-files-btn>\n        </div>\n      </div>\n    </mat-card-content>\n  </mat-card>\n\n  <div style=\"height: 10px;\">\n  </div>\n</div>\n<div [hidden]=\"isLoading\">\n  <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    @for (tag of bodyTags; track tag; let i = $index) {\n      <div cdkDrag>\n        <mat-card style=\"margin: 2px;\" class=\"mat-card special\">\n          <mat-card-content>\n            <div class=\"d-flex justify-content-between\">\n              <div class=\"example-handle\" cdkDragHandle>\n                <svg class=\"move-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"cursor: pointer\">\n                  <path\n                    d=\"M14.6516 19.0984L12 21.75M12 21.75L9.34838 19.0984M12 21.75V15M4.90163 14.6516L2.25 12M2.25 12L4.90163 9.34838M2.25 12H9M19.0984 9.34838L21.75 12M21.75 12L19.0984 14.6516M21.75 12H15M9.34838 4.90163L12 2.25M12 2.25L14.6516 4.90163M12 2.25V9\"\n                    stroke=\"#323E8B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </div>\n              <div>\n                <div class=\"badge\" style=\"color:#323E8B\">\n                  <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                [ngTemplateOutletContext]=\"{icon: tag.tagDescription.tag}\">\n                  </ng-container>\n                </div>\n              </div>\n            </div>\n            <div style=\"height: 15px;\"></div>\n            <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagSavedHandler($event)\"\n              (onTagRemoved)=\"onTagRemovedHandler(i)\">\n            </croco-html-main-editor-block>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template #textAlignToggleIcons let-icon=\"icon\">\n  @if (icon === 'left') {\n    <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M3.12548 14.6875H13.125M3.12548 11.5625H16.875M3.125 8.4375H13.125M3.125 5.3125H16.875\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @if (icon === 'center') {\n    <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M5.00024 14.6875H14.9998M3.12524 11.5625H16.8748M5 8.4375H15M3.125 5.3125H16.875\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @if (icon === 'right') {\n    <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M6.87548 14.6875H16.875M3.12548 11.5625H16.875M6.875 8.4375H16.875M3.125 5.3125H16.875\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n</ng-template>\n\n<ng-template #tagButtonIcons let-icon=\"icon\">\n  @if (icon === 'text') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M7.49952 15.6246H12.4995M9.99952 4.37459V15.6246M3.74951 6.87459V4.37459H16.2495V6.87459\"\n            stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'html-raw') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M15 6.875L18.75 10L15 13.125M5 6.875L1.25 10L5 13.125M12.5 3.125L7.5 16.875\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon.indexOf('h') === 0) {\n    {{icon.toUpperCase()}}\n  }\n  @else if (icon === 'external-video') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M14.375 8.75L18.75 6.25V13.75L14.375 11.25M1.875 4.6875H11.875C12.538 4.6875 13.1739 4.95089 13.6428 5.41973C14.1116 5.88857 14.375 6.52446 14.375 7.1875V14.6875C14.375 14.8533 14.3092 15.0122 14.1919 15.1294C14.0747 15.2467 13.9158 15.3125 13.75 15.3125H3.75C3.08696 15.3125 2.45107 15.0491 1.98223 14.5803C1.51339 14.1114 1.25 13.4755 1.25 12.8125V5.3125C1.25 5.14674 1.31585 4.98777 1.43306 4.87056C1.55027 4.75335 1.70924 4.6875 1.875 4.6875Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'file-image') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M2.5 13.125L6.43305 9.19194C6.49108 9.1339 6.55998 9.08787 6.63581 9.05646C6.71164 9.02505 6.79291 9.00888 6.87499 9.00888C6.95706 9.00888 7.03834 9.02505 7.11417 9.05646C7.18999 9.08787 7.25889 9.1339 7.31693 9.19194L10.808 12.6831C10.8661 12.7411 10.935 12.7871 11.0108 12.8185C11.0866 12.8499 11.1679 12.8661 11.25 12.8661C11.3321 12.8661 11.4133 12.8499 11.4892 12.8185C11.565 12.7871 11.6339 12.7411 11.6919 12.6831L13.308 11.0669C13.3661 11.0089 13.435 10.9629 13.5108 10.9315C13.5866 10.9 13.6679 10.8839 13.75 10.8839C13.8321 10.8839 13.9133 10.9 13.9892 10.9315C14.065 10.9629 14.1339 11.0089 14.1919 11.0669L17.5 14.375M3.125 3.75H16.875C17.2202 3.75 17.5 4.02982 17.5 4.375V15.625C17.5 15.9702 17.2202 16.25 16.875 16.25H3.125C2.77982 16.25 2.5 15.9702 2.5 15.625V4.375C2.5 4.02982 2.77982 3.75 3.125 3.75ZM13.125 7.8125C13.125 8.33027 12.7053 8.75 12.1875 8.75C11.6697 8.75 11.25 8.33027 11.25 7.8125C11.25 7.29473 11.6697 6.875 12.1875 6.875C12.7053 6.875 13.125 7.29473 13.125 7.8125Z\"\n        stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'custom-widget') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M16.25 15V16.25M13.75 12.5H16.25M11.25 16.25H13.75V11.25M11.25 11.25V13.75M4.375 11.25H8.125C8.47018 11.25 8.75 11.5298 8.75 11.875V15.625C8.75 15.9702 8.47018 16.25 8.125 16.25H4.375C4.02982 16.25 3.75 15.9702 3.75 15.625V11.875C3.75 11.5298 4.02982 11.25 4.375 11.25ZM11.875 3.75H15.625C15.9702 3.75 16.25 4.02982 16.25 4.375V8.125C16.25 8.47018 15.9702 8.75 15.625 8.75H11.875C11.5298 8.75 11.25 8.47018 11.25 8.125V4.375C11.25 4.02982 11.5298 3.75 11.875 3.75ZM4.375 3.75H8.125C8.47018 3.75 8.75 4.02982 8.75 4.375V8.125C8.75 8.47018 8.47018 8.75 8.125 8.75H4.375C4.02982 8.75 3.75 8.47018 3.75 8.125V4.375C3.75 4.02982 4.02982 3.75 4.375 3.75Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'button') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M9.99939 3.75024V9.68775M13.7501 4.23695C14.9923 5.04536 15.9399 6.23353 16.4518 7.62435C16.9638 9.01517 17.0125 10.5342 16.5909 11.955C16.1693 13.3758 15.2998 14.6223 14.1121 15.5087C12.9244 16.3952 11.482 16.8741 9.99998 16.8741C8.51795 16.8741 7.07559 16.3951 5.88788 15.5087C4.70017 14.6223 3.83071 13.3757 3.40908 11.9549C2.98746 10.5341 3.03624 9.01513 3.54816 7.62432C4.06009 6.2335 5.00774 5.04534 6.24988 4.23693\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'download-file-button') {\n    <svg style=\"fill:currentColor\"  width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.42424 9.41667C3.49967 9.41667 2.75 10.1663 2.75 11.0909V19.5758C2.75 20.5003 3.49967 21.25 4.42424 21.25H19.5758C20.5003 21.25 21.25 20.5003 21.25 19.5758V11.0909C21.25 10.1663 20.5003 9.41667 19.5758 9.41667H15.9394C15.5252 9.41667 15.1894 9.08088 15.1894 8.66667C15.1894 8.25245 15.5252 7.91667 15.9394 7.91667H19.5758C21.3288 7.91667 22.75 9.33791 22.75 11.0909V19.5758C22.75 21.3288 21.3288 22.75 19.5758 22.75H4.42424C2.67124 22.75 1.25 21.3288 1.25 19.5758V11.0909C1.25 9.33791 2.67124 7.91667 4.42424 7.91667H8.06061C8.47482 7.91667 8.81061 8.25245 8.81061 8.66667C8.81061 9.08088 8.47482 9.41667 8.06061 9.41667H4.42424Z\"/>\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 1.25C12.4142 1.25 12.75 1.58579 12.75 2V15.9394C12.75 16.3536 12.4142 16.6894 12 16.6894C11.5858 16.6894 11.25 16.3536 11.25 15.9394V2C11.25 1.58579 11.5858 1.25 12 1.25Z\"/>\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.83331 12.9848C8.1262 12.6919 8.60107 12.6919 8.89397 12.9848L12 16.0909L15.106 12.9848C15.3989 12.6919 15.8738 12.6919 16.1667 12.9848C16.4596 13.2777 16.4596 13.7526 16.1667 14.0455L12.5303 17.6818C12.2374 17.9747 11.7626 17.9747 11.4697 17.6818L7.83331 14.0455C7.54041 13.7526 7.54041 13.2777 7.83331 12.9848Z\"/>\n    </svg>\n  }\n</ng-template>\n\n\n\n\n\n\n", styles: [":host{--mat-standard-button-toggle-selected-state-background-color: #323E8B;--mat-standard-button-toggle-text-color: #323E8B;--mat-standard-button-toggle-selected-state-text-color: white;--mat-standard-button-toggle-height: 36px;--mat-standard-button-toggle-divider-color: #323E8B;--mdc-outlined-button-label-text-weight: 400;--mdc-outlined-button-label-text-color: #333333 !important;--mdc-outlined-button-container-shape: 30px;--mdc-outlined-button-outline-width: 2px;--mdc-outlined-button-container-height: 44px}:host ::ng-deep .mat-button-toggle-appearance-standard span.mat-button-toggle-label-content{padding:0 8px;min-width:36px}.mat-button-toggle .text-align-icon{stroke:#323e8b}.mat-button-toggle:hover{color:#747ebf}.mat-button-toggle:hover .text-align-icon{stroke:#747ebf}.mat-button-toggle-checked .text-align-icon{stroke:#fff}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.badge{width:44px;height:44px;border-radius:50%;border:1px solid #323E8B;display:flex;align-items:center;justify-content:center}.mat-card.special{border:1px solid #747EBF;border-radius:8px;box-shadow:none;margin:2px 2px 10px}.tags{display:flex;gap:10px;flex-wrap:wrap}.tag-item{display:flex;align-items:center;gap:5px;cursor:pointer;padding:10px 20px;border:1px solid #323E8B;border-radius:30px;background-color:#fff;color:#23262a;transition:.2s ease-in-out}.tag-item svg{color:#323e8b}.tag-item.active{background-color:#323e8b;color:#fff}.tag-item.active svg{color:#fff}.tag-item:hover{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:hover svg{color:#747ebf}.move-icon:hover{opacity:.7}\n"] }]
+                    ], template: "@if (isLoading) {\n  <div>\n    <div>\n      <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\n      <div style=\"text-align: center;\">{{loadingText}}</div>\n    </div>\n    <div style=\"height: 10px;\"></div>\n  </div>\n}\n<div [hidden]=\"isLoading\">\n  <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n    <mat-card-content>\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-12\">\n          <div class=\"w-100\" style=\"margin-bottom: 22px\">\n            <div class=\"tags\">\n              @for (tag of tags; track tag) {\n                <span class=\"tag-item\" (click)=\"selectTag(tag)\" [class.active]=\"selectedValue === tag.tag\">\n                  <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                [ngTemplateOutletContext]=\"{icon: tag.tag}\">\n                  </ng-container>\n                  {{tag.displayValue}}\n                </span>\n              }\n            </div>\n          </div>\n        </div>\n        @if (selectedValue === ExternalVideoTagDataConsts.TagName) {\n          <div class=\"col-12\">\n            <mat-form-field class=\"w-100\" appearance=\"outline\">\n              <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0438\u0434\u0435\u043E\u043F\u043B\u0435\u0435\u0440</mat-label>\n              <mat-select [(ngModel)]=\"selectedVideoPlayer\">\n                @for (videoPlayer of videoPlayers; track videoPlayer.type) {\n                  <mat-option [value]=\"videoPlayer.type\">\n                    {{videoPlayer.displayValue}}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </div>\n        }\n        @if (selectedValue === HtmlRawTagDataConsts.TagName) {\n          <div class=\"col-12\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n                <textarea\n                  #autosize=\"cdkTextareaAutosize\"\n                  matInput\n                  cdkTextareaAutosize\n                  cdkAutosizeMinRows=\"1\"\n                  cdkAutosizeMaxRows=\"5\"\n                  placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n                  #textArea\n                  [(ngModel)]=\"htmlRaw\"\n                ></textarea>\n            </mat-form-field>\n          </div>\n        }\n        @if (selectedValue === 'text') {\n          <div style=\"display: flex; justify-content: space-between; flex-wrap: wrap\">\n            <div style=\"margin-bottom: 22px; overflow-x: auto;\">\n              <mat-button-toggle-group\n                [(ngModel)]=\"textTag\"\n                [hideSingleSelectionIndicator]=\"true\"\n              >\n                @for (option of textTagOptions; track option) {\n                  <mat-button-toggle value=\"{{ option.tag }}\">\n                    {{ option.displayValue }}\n                  </mat-button-toggle>\n                }\n              </mat-button-toggle-group>\n            </div>\n\n            <div style=\"margin-bottom: 22px\">\n              <mat-button-toggle-group\n                [(ngModel)]=\"alignment\"\n                [hideSingleSelectionIndicator]=\"true\"\n              >\n                @for (option of alignmentOptions; track option) {\n                  <mat-button-toggle value=\"{{ option.value }}\">\n                    <ng-container [ngTemplateOutlet]=\"textAlignToggleIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: option.value}\">\n                    </ng-container>\n                  </mat-button-toggle>\n                }\n              </mat-button-toggle-group>\n            </div>\n          </div>\n          <mat-form-field class=\"w-100\">\n            <mat-label>\u0422\u0435\u043A\u0441\u0442</mat-label>\n            <textarea\n              #autosize=\"cdkTextareaAutosize\"\n              matInput\n              cdkTextareaAutosize\n              cdkAutosizeMinRows=\"1\"\n              cdkAutosizeMaxRows=\"5\"\n              placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n              #textArea\n              [(ngModel)]=\"text\"\n            ></textarea>\n          </mat-form-field>\n        }\n        <div class=\"col-12\">\n          <button (click)=\"addTag()\" class=\"w-100\" mat-stroked-button>\n            \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433\n          </button>\n        </div>\n      </div>\n    </mat-card-content>\n  </mat-card>\n\n  <div style=\"height: 10px;\">\n  </div>\n</div>\n<div [hidden]=\"isLoading\">\n  <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n    <mat-card-content>\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-12\">\n          <croco-html-add-files-btn (filesTagsReady)=\"filesTagsReadyHandler($event)\"\n            (postFilesStarted)=\"postFilesStartedEventHandler($event)\" class=\"w-100\">\n          </croco-html-add-files-btn>\n        </div>\n      </div>\n    </mat-card-content>\n  </mat-card>\n\n  <div style=\"height: 10px;\">\n  </div>\n</div>\n<div [hidden]=\"isLoading\">\n  <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    @for (tag of bodyTags; track tag; let i = $index) {\n      <div cdkDrag>\n        <mat-card style=\"margin: 2px;\" class=\"mat-card special\">\n          <mat-card-content>\n            <div class=\"d-flex justify-content-between\">\n              <div class=\"example-handle\" cdkDragHandle>\n                <svg class=\"move-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"cursor: pointer\">\n                  <path\n                    d=\"M14.6516 19.0984L12 21.75M12 21.75L9.34838 19.0984M12 21.75V15M4.90163 14.6516L2.25 12M2.25 12L4.90163 9.34838M2.25 12H9M19.0984 9.34838L21.75 12M21.75 12L19.0984 14.6516M21.75 12H15M9.34838 4.90163L12 2.25M12 2.25L14.6516 4.90163M12 2.25V9\"\n                    stroke=\"#323E8B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </div>\n              <div>\n                <div class=\"badge\" style=\"color:#323E8B\">\n                  <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                [ngTemplateOutletContext]=\"{icon: tag.tagDescription.tag}\">\n                  </ng-container>\n                </div>\n              </div>\n            </div>\n            <div style=\"height: 15px;\"></div>\n            <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagSavedHandler($event)\"\n              (onTagRemoved)=\"onTagRemovedHandler(i)\">\n            </croco-html-main-editor-block>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template #textAlignToggleIcons let-icon=\"icon\">\n  @if (icon === 'left') {\n    <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M3.12548 14.6875H13.125M3.12548 11.5625H16.875M3.125 8.4375H13.125M3.125 5.3125H16.875\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @if (icon === 'center') {\n    <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M5.00024 14.6875H14.9998M3.12524 11.5625H16.8748M5 8.4375H15M3.125 5.3125H16.875\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @if (icon === 'right') {\n    <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M6.87548 14.6875H16.875M3.12548 11.5625H16.875M6.875 8.4375H16.875M3.125 5.3125H16.875\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n</ng-template>\n\n<ng-template #tagButtonIcons let-icon=\"icon\">\n  @if (icon === 'text') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M7.49952 15.6246H12.4995M9.99952 4.37459V15.6246M3.74951 6.87459V4.37459H16.2495V6.87459\"\n            stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'html-raw') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M15 6.875L18.75 10L15 13.125M5 6.875L1.25 10L5 13.125M12.5 3.125L7.5 16.875\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon.indexOf('h') === 0) {\n    {{icon.toUpperCase()}}\n  }\n  @else if (icon === 'external-video') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M14.375 8.75L18.75 6.25V13.75L14.375 11.25M1.875 4.6875H11.875C12.538 4.6875 13.1739 4.95089 13.6428 5.41973C14.1116 5.88857 14.375 6.52446 14.375 7.1875V14.6875C14.375 14.8533 14.3092 15.0122 14.1919 15.1294C14.0747 15.2467 13.9158 15.3125 13.75 15.3125H3.75C3.08696 15.3125 2.45107 15.0491 1.98223 14.5803C1.51339 14.1114 1.25 13.4755 1.25 12.8125V5.3125C1.25 5.14674 1.31585 4.98777 1.43306 4.87056C1.55027 4.75335 1.70924 4.6875 1.875 4.6875Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'file-image') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M2.5 13.125L6.43305 9.19194C6.49108 9.1339 6.55998 9.08787 6.63581 9.05646C6.71164 9.02505 6.79291 9.00888 6.87499 9.00888C6.95706 9.00888 7.03834 9.02505 7.11417 9.05646C7.18999 9.08787 7.25889 9.1339 7.31693 9.19194L10.808 12.6831C10.8661 12.7411 10.935 12.7871 11.0108 12.8185C11.0866 12.8499 11.1679 12.8661 11.25 12.8661C11.3321 12.8661 11.4133 12.8499 11.4892 12.8185C11.565 12.7871 11.6339 12.7411 11.6919 12.6831L13.308 11.0669C13.3661 11.0089 13.435 10.9629 13.5108 10.9315C13.5866 10.9 13.6679 10.8839 13.75 10.8839C13.8321 10.8839 13.9133 10.9 13.9892 10.9315C14.065 10.9629 14.1339 11.0089 14.1919 11.0669L17.5 14.375M3.125 3.75H16.875C17.2202 3.75 17.5 4.02982 17.5 4.375V15.625C17.5 15.9702 17.2202 16.25 16.875 16.25H3.125C2.77982 16.25 2.5 15.9702 2.5 15.625V4.375C2.5 4.02982 2.77982 3.75 3.125 3.75ZM13.125 7.8125C13.125 8.33027 12.7053 8.75 12.1875 8.75C11.6697 8.75 11.25 8.33027 11.25 7.8125C11.25 7.29473 11.6697 6.875 12.1875 6.875C12.7053 6.875 13.125 7.29473 13.125 7.8125Z\"\n        stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'custom-widget') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M16.25 15V16.25M13.75 12.5H16.25M11.25 16.25H13.75V11.25M11.25 11.25V13.75M4.375 11.25H8.125C8.47018 11.25 8.75 11.5298 8.75 11.875V15.625C8.75 15.9702 8.47018 16.25 8.125 16.25H4.375C4.02982 16.25 3.75 15.9702 3.75 15.625V11.875C3.75 11.5298 4.02982 11.25 4.375 11.25ZM11.875 3.75H15.625C15.9702 3.75 16.25 4.02982 16.25 4.375V8.125C16.25 8.47018 15.9702 8.75 15.625 8.75H11.875C11.5298 8.75 11.25 8.47018 11.25 8.125V4.375C11.25 4.02982 11.5298 3.75 11.875 3.75ZM4.375 3.75H8.125C8.47018 3.75 8.75 4.02982 8.75 4.375V8.125C8.75 8.47018 8.47018 8.75 8.125 8.75H4.375C4.02982 8.75 3.75 8.47018 3.75 8.125V4.375C3.75 4.02982 4.02982 3.75 4.375 3.75Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'button') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M9.99939 3.75024V9.68775M13.7501 4.23695C14.9923 5.04536 15.9399 6.23353 16.4518 7.62435C16.9638 9.01517 17.0125 10.5342 16.5909 11.955C16.1693 13.3758 15.2998 14.6223 14.1121 15.5087C12.9244 16.3952 11.482 16.8741 9.99998 16.8741C8.51795 16.8741 7.07559 16.3951 5.88788 15.5087C4.70017 14.6223 3.83071 13.3757 3.40908 11.9549C2.98746 10.5341 3.03624 9.01513 3.54816 7.62432C4.06009 6.2335 5.00774 5.04534 6.24988 4.23693\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'download-file-button') {\n    <svg style=\"fill:currentColor\"  width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.42424 9.41667C3.49967 9.41667 2.75 10.1663 2.75 11.0909V19.5758C2.75 20.5003 3.49967 21.25 4.42424 21.25H19.5758C20.5003 21.25 21.25 20.5003 21.25 19.5758V11.0909C21.25 10.1663 20.5003 9.41667 19.5758 9.41667H15.9394C15.5252 9.41667 15.1894 9.08088 15.1894 8.66667C15.1894 8.25245 15.5252 7.91667 15.9394 7.91667H19.5758C21.3288 7.91667 22.75 9.33791 22.75 11.0909V19.5758C22.75 21.3288 21.3288 22.75 19.5758 22.75H4.42424C2.67124 22.75 1.25 21.3288 1.25 19.5758V11.0909C1.25 9.33791 2.67124 7.91667 4.42424 7.91667H8.06061C8.47482 7.91667 8.81061 8.25245 8.81061 8.66667C8.81061 9.08088 8.47482 9.41667 8.06061 9.41667H4.42424Z\"/>\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 1.25C12.4142 1.25 12.75 1.58579 12.75 2V15.9394C12.75 16.3536 12.4142 16.6894 12 16.6894C11.5858 16.6894 11.25 16.3536 11.25 15.9394V2C11.25 1.58579 11.5858 1.25 12 1.25Z\"/>\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.83331 12.9848C8.1262 12.6919 8.60107 12.6919 8.89397 12.9848L12 16.0909L15.106 12.9848C15.3989 12.6919 15.8738 12.6919 16.1667 12.9848C16.4596 13.2777 16.4596 13.7526 16.1667 14.0455L12.5303 17.6818C12.2374 17.9747 11.7626 17.9747 11.4697 17.6818L7.83331 14.0455C7.54041 13.7526 7.54041 13.2777 7.83331 12.9848Z\"/>\n    </svg>\n  }\n</ng-template>\n\n\n\n\n\n\n", styles: [":host{--mat-standard-button-toggle-selected-state-background-color: #323E8B;--mat-standard-button-toggle-text-color: #323E8B;--mat-standard-button-toggle-selected-state-text-color: white;--mat-standard-button-toggle-height: 36px;--mat-standard-button-toggle-divider-color: #323E8B;--mdc-outlined-button-label-text-weight: 400;--mdc-outlined-button-label-text-color: #333333 !important;--mdc-outlined-button-container-shape: 30px;--mdc-outlined-button-outline-width: 2px;--mdc-outlined-button-container-height: 44px}:host ::ng-deep .mat-button-toggle-appearance-standard span.mat-button-toggle-label-content{padding:0 8px;min-width:36px}.mat-button-toggle .text-align-icon{stroke:#323e8b}.mat-button-toggle:hover{color:#747ebf}.mat-button-toggle:hover .text-align-icon{stroke:#747ebf}.mat-button-toggle-checked .text-align-icon{stroke:#fff}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.badge{width:44px;height:44px;border-radius:50%;border:1px solid #323E8B;display:flex;align-items:center;justify-content:center}.mat-card.special{border:1px solid #747EBF;border-radius:8px;box-shadow:none;margin:2px 2px 10px}.tags{display:flex;gap:10px;flex-wrap:wrap}.tag-item{display:flex;align-items:center;gap:5px;cursor:pointer;padding:10px 20px;border:1px solid #323E8B;border-radius:30px;background-color:#fff;color:#23262a;transition:.2s ease-in-out}.tag-item svg{color:#323e8b}.tag-item.active{background-color:#323e8b;color:#fff}.tag-item.active svg{color:#fff}.tag-item:hover{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:hover svg{color:#747ebf}.move-icon:hover{opacity:.7}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [CrocoHtmlOptionsToken]
@@ -2304,7 +2358,7 @@ class MainEditorComponent {
         this.visualEditor.recalculateBodyTags();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MainEditorComponent, deps: [{ token: i1$5.ClipboardService }, { token: i2$3.MatSnackBar }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: MainEditorComponent, isStandalone: true, selector: "croco-html-main-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged" }, viewQueries: [{ propertyName: "visualEditor", first: true, predicate: ["visualEditor"], descendants: true, static: true }], ngImport: i0, template: "<mat-tab-group mat-stretch-tabs=\"false\" mat-align-tabs=\"start\">\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'visual-editor-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 20px;\"></div>\n\n    <croco-visual-editor #visualEditor\n      [useHtmlRaw]=\"useHtmlRaw\"\n      [html]=\"html\"\n      (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n      (rendered)=\"visualEditorRenderedHandler()\">\n    </croco-visual-editor>\n\n    <div style=\"height: 20px;\"></div>\n\n  </mat-tab>\n\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'source-code-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 10px;\"></div>\n    @if (visualEditorRendered) {\n      <div>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434</mat-label>\n          <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n            cdkAutosizeMinRows=\"1\"\n            placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\"\n          (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n        </mat-form-field>\n      </div>\n    }\n\n    <button (click)=\"copyMarkUp()\"\n      mat-raised-button color=\"primary\">\n      \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n    </button>\n  </mat-tab>\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"30\">\n        <use [attr.xlink:href]=\"'viewer-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n\n    <mat-card style=\"padding: 2px;\" class=\"mat-card\">\n      <mat-card-content>\n        <croco-html-view [html]=\"html\">\n        </croco-html-view>\n      </mat-card-content>\n    </mat-card>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host ::ng-deep .mdc-tab.mat-mdc-tab{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab .custom-icon{fill:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover .custom-icon{fill:#747ebf}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active{background-color:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active svg.custom-icon{fill:#fff}:host ::ng-deep div.mat-mdc-tab-labels{justify-content:center}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i3.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: VisualEditorComponent, selector: "croco-visual-editor", inputs: ["showMarkUp", "useHtmlRaw", "html"], outputs: ["html", "onHtmlChanged", "rendered"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: HtmlViewComponent, selector: "croco-html-view", inputs: ["html"] }, { kind: "pipe", type: SpriteIconPathPipe, name: "spriteIconPath" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: MainEditorComponent, isStandalone: true, selector: "croco-html-main-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged" }, viewQueries: [{ propertyName: "visualEditor", first: true, predicate: ["visualEditor"], descendants: true, static: true }], ngImport: i0, template: "<mat-tab-group mat-stretch-tabs=\"false\" mat-align-tabs=\"start\">\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'visual-editor-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 20px;\"></div>\n\n    <croco-visual-editor #visualEditor\n      [useHtmlRaw]=\"true\"\n      [html]=\"html\"\n      (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n      (rendered)=\"visualEditorRenderedHandler()\">\n    </croco-visual-editor>\n\n    <div style=\"height: 20px;\"></div>\n\n  </mat-tab>\n\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'source-code-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 10px;\"></div>\n    @if (visualEditorRendered) {\n      <div>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434</mat-label>\n          <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n            cdkAutosizeMinRows=\"1\"\n            placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\"\n          (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n        </mat-form-field>\n      </div>\n    }\n\n    <button (click)=\"copyMarkUp()\"\n      mat-raised-button color=\"primary\">\n      \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n    </button>\n  </mat-tab>\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"30\">\n        <use [attr.xlink:href]=\"'viewer-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n\n    <mat-card style=\"padding: 2px;\" class=\"mat-card\">\n      <mat-card-content>\n        <croco-html-view [html]=\"html\">\n        </croco-html-view>\n      </mat-card-content>\n    </mat-card>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host ::ng-deep .mdc-tab.mat-mdc-tab{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab .custom-icon{fill:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover .custom-icon{fill:#747ebf}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active{background-color:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active svg.custom-icon{fill:#fff}:host ::ng-deep div.mat-mdc-tab-labels{justify-content:center}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i3$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i3$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i3$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: VisualEditorComponent, selector: "croco-visual-editor", inputs: ["showMarkUp", "useHtmlRaw", "html"], outputs: ["html", "onHtmlChanged", "rendered"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: HtmlViewComponent, selector: "croco-html-view", inputs: ["html"] }, { kind: "pipe", type: SpriteIconPathPipe, name: "spriteIconPath" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MainEditorComponent, decorators: [{
             type: Component,
@@ -2323,7 +2377,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                         MatIcon,
                         NgTemplateOutlet,
                         SpriteIconPathPipe
-                    ], template: "<mat-tab-group mat-stretch-tabs=\"false\" mat-align-tabs=\"start\">\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'visual-editor-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 20px;\"></div>\n\n    <croco-visual-editor #visualEditor\n      [useHtmlRaw]=\"useHtmlRaw\"\n      [html]=\"html\"\n      (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n      (rendered)=\"visualEditorRenderedHandler()\">\n    </croco-visual-editor>\n\n    <div style=\"height: 20px;\"></div>\n\n  </mat-tab>\n\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'source-code-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 10px;\"></div>\n    @if (visualEditorRendered) {\n      <div>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434</mat-label>\n          <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n            cdkAutosizeMinRows=\"1\"\n            placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\"\n          (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n        </mat-form-field>\n      </div>\n    }\n\n    <button (click)=\"copyMarkUp()\"\n      mat-raised-button color=\"primary\">\n      \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n    </button>\n  </mat-tab>\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"30\">\n        <use [attr.xlink:href]=\"'viewer-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n\n    <mat-card style=\"padding: 2px;\" class=\"mat-card\">\n      <mat-card-content>\n        <croco-html-view [html]=\"html\">\n        </croco-html-view>\n      </mat-card-content>\n    </mat-card>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host ::ng-deep .mdc-tab.mat-mdc-tab{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab .custom-icon{fill:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover .custom-icon{fill:#747ebf}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active{background-color:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active svg.custom-icon{fill:#fff}:host ::ng-deep div.mat-mdc-tab-labels{justify-content:center}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+                    ], template: "<mat-tab-group mat-stretch-tabs=\"false\" mat-align-tabs=\"start\">\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'visual-editor-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 20px;\"></div>\n\n    <croco-visual-editor #visualEditor\n      [useHtmlRaw]=\"true\"\n      [html]=\"html\"\n      (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n      (rendered)=\"visualEditorRenderedHandler()\">\n    </croco-visual-editor>\n\n    <div style=\"height: 20px;\"></div>\n\n  </mat-tab>\n\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'source-code-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 10px;\"></div>\n    @if (visualEditorRendered) {\n      <div>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434</mat-label>\n          <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n            cdkAutosizeMinRows=\"1\"\n            placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\"\n          (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n        </mat-form-field>\n      </div>\n    }\n\n    <button (click)=\"copyMarkUp()\"\n      mat-raised-button color=\"primary\">\n      \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n    </button>\n  </mat-tab>\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"30\">\n        <use [attr.xlink:href]=\"'viewer-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n\n    <mat-card style=\"padding: 2px;\" class=\"mat-card\">\n      <mat-card-content>\n        <croco-html-view [html]=\"html\">\n        </croco-html-view>\n      </mat-card-content>\n    </mat-card>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host ::ng-deep .mdc-tab.mat-mdc-tab{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab .custom-icon{fill:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover .custom-icon{fill:#747ebf}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active{background-color:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active svg.custom-icon{fill:#fff}:host ::ng-deep div.mat-mdc-tab-labels{justify-content:center}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: () => [{ type: i1$5.ClipboardService }, { type: i2$3.MatSnackBar }, { type: i0.ChangeDetectorRef }], propDecorators: { visualEditor: [{
                 type: ViewChild,
                 args: ["visualEditor", { static: true }]
@@ -2472,7 +2526,7 @@ class CrocoHtmlModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: CrocoHtmlModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
-            NgSelectModule, i1$6.MatBadgeModule, i2$4.MatTableModule, i3$1.MatExpansionModule, i1$4.MatFormFieldModule, i2$3.MatSnackBarModule, i6.MatProgressBarModule, i7.MatProgressSpinnerModule, i3.MatTabsModule, i9.MatMenuModule, i1$2.MatCardModule, i11.MatSelectModule, i12.MatTooltipModule, i13.MatCheckboxModule, i14.MatChipsModule, i15.MatListModule, i2.MatButtonModule, i2$1.MatInputModule, i18.MatDialogModule, i19.MatPaginatorModule, i20.MatDatepickerModule, i21.MatGridListModule, i22.MatSlideToggleModule, i23.MatTreeModule, i24.MatNativeDateModule, i25.MatAutocompleteModule, i26.MatSidenavModule, i27.MatIconModule, i28.DragDropModule, i29.MatButtonToggleModule, ErrorBannerComponent,
+            NgSelectModule, i1$6.MatBadgeModule, i2$4.MatTableModule, i3$2.MatExpansionModule, i1$4.MatFormFieldModule, i2$3.MatSnackBarModule, i6.MatProgressBarModule, i7.MatProgressSpinnerModule, i3$1.MatTabsModule, i9.MatMenuModule, i1$2.MatCardModule, i11.MatSelectModule, i12.MatTooltipModule, i13.MatCheckboxModule, i14.MatChipsModule, i15.MatListModule, i2.MatButtonModule, i2$1.MatInputModule, i18.MatDialogModule, i19.MatPaginatorModule, i20.MatDatepickerModule, i21.MatGridListModule, i22.MatSlideToggleModule, i23.MatTreeModule, i24.MatNativeDateModule, i25.MatAutocompleteModule, i26.MatSidenavModule, i27.MatIconModule, i28.DragDropModule, i29.MatButtonToggleModule, ErrorBannerComponent,
             VkVideoPlayerComponent,
             YoutubeVideoPlayerComponent,
             DownloadFileButtonEditorComponent,