croco-html 3.3.4 → 3.3.5

package/fesm2022/croco-html.mjs

@@ -1183,11 +1183,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=\"code-view video-player use-responsive\">\n    <iframe\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: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 760px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 540px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 450px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{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=\"code-view video-player use-responsive\">\n    <iframe\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: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 768px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 575px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 480px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{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=\"code-view video-player use-responsive\">\n    <iframe\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: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 760px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 540px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 450px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"] }]
+            args: [{ selector: 'youtube-video-player', standalone: true, imports: [], template: "<div class=\"code-view video-player use-responsive\">\n    <iframe\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: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 768px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 575px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 480px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { link: [{
                 type: Input
             }] } });
@@ -1200,11 +1200,11 @@ 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=\"code-view video-player use-responsive\">\n  <iframe\n    [src]=\"safeUrl\"\n    allow=\"autoplay; encrypted-media; fullscreen; picture-in-picture;\"\n    frameborder=\"0\"\n    allowfullscreen></iframe>\n</div>\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 760px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 540px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 450px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{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=\"code-view video-player use-responsive\">\n  <iframe\n    [src]=\"safeUrl\"\n    allow=\"autoplay; encrypted-media; fullscreen; picture-in-picture;\"\n    frameborder=\"0\"\n    allowfullscreen></iframe>\n</div>\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 768px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 575px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 480px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{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=\"code-view video-player use-responsive\">\n  <iframe\n    [src]=\"safeUrl\"\n    allow=\"autoplay; encrypted-media; fullscreen; picture-in-picture;\"\n    frameborder=\"0\"\n    allowfullscreen></iframe>\n</div>\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 760px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 540px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 450px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"] }]
+            args: [{ selector: 'vk-video-player', standalone: true, imports: [], template: "<div class=\"code-view video-player use-responsive\">\n  <iframe\n    [src]=\"safeUrl\"\n    allow=\"autoplay; encrypted-media; fullscreen; picture-in-picture;\"\n    frameborder=\"0\"\n    allowfullscreen></iframe>\n</div>\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 768px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 575px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 480px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { link: [{
                 type: Input
             }] } });
@@ -1224,11 +1224,11 @@ class CodeVideoComponent {
         }
     }
     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", _useResponsiveWrapper: "_useResponsiveWrapper" }, usesOnChanges: true, ngImport: i0, template: "@if (code) {\n  <div class=\"code-view video-player\" [class.use-responsive]=\"useResponsiveWrapper\" [innerHTML]=\"safeHtml\"></div>\n}\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 760px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 540px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 450px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: CodeVideoComponent, isStandalone: true, selector: "code-video", inputs: { code: "code", _useResponsiveWrapper: "_useResponsiveWrapper" }, usesOnChanges: true, ngImport: i0, template: "@if (code) {\n  <div class=\"code-view video-player\" [class.use-responsive]=\"useResponsiveWrapper\" [innerHTML]=\"safeHtml\"></div>\n}\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 768px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 575px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 480px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{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=\"code-view video-player\" [class.use-responsive]=\"useResponsiveWrapper\" [innerHTML]=\"safeHtml\"></div>\n}\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 760px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 540px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 450px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"] }]
+            args: [{ selector: 'code-video', standalone: true, imports: [], template: "@if (code) {\n  <div class=\"code-view video-player\" [class.use-responsive]=\"useResponsiveWrapper\" [innerHTML]=\"safeHtml\"></div>\n}\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 768px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 575px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 480px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { code: [{
                 type: Input
             }], _useResponsiveWrapper: [{
@@ -1259,11 +1259,11 @@ class XmlTagExternalVideoComponent {
     }
     ;
     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  @case (ExternalVideoSupportedTypes.Code) {\n    <code-video [code]=\"_block.innerHtml\" [_useResponsiveWrapper]=\"_block.useResponsiveWrapper\"></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", "_useResponsiveWrapper"] }], 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\" [_useResponsiveWrapper]=\"_block.useResponsiveWrapper\"></code-video>\n  }\n}\n", styles: ["@media only screen and (min-width: 768px){.y-video{display:block;width:640px;height:360px;margin:0 auto}}@media only screen and (max-width: 959px){.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", "_useResponsiveWrapper"] }], 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, 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\" [_useResponsiveWrapper]=\"_block.useResponsiveWrapper\"></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"] }]
+            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\" [_useResponsiveWrapper]=\"_block.useResponsiveWrapper\"></code-video>\n  }\n}\n", styles: ["@media only screen and (min-width: 768px){.y-video{display:block;width:640px;height:360px;margin:0 auto}}@media only screen and (max-width: 959px){.y-video{display:block;width:100%;height:315px}}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }], tagData: [{
@@ -1743,7 +1743,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        @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\n        <mat-checkbox\n          [checked]=\"tagData.useResponsiveWrapper\"\n          (change)=\"onCheck($event.checked)\"\n        >\n          \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0430\u0434\u0430\u043F\u0442\u0438\u0432?\n        </mat-checkbox>\n    </div>\n  }\n}\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 760px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 540px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 450px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.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$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] }); }
+    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\n        <mat-checkbox\n          [checked]=\"tagData.useResponsiveWrapper\"\n          (change)=\"onCheck($event.checked)\"\n        >\n          \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0430\u0434\u0430\u043F\u0442\u0438\u0432?\n        </mat-checkbox>\n    </div>\n  }\n}\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 768px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 575px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 480px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.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$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ExternalVideoEditorComponent, decorators: [{
             type: Component,
@@ -1753,7 +1753,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                         FormsModule,
                         XmlTagExternalVideoComponent,
                         MatCheckbox,
-                    ], 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\n        <mat-checkbox\n          [checked]=\"tagData.useResponsiveWrapper\"\n          (change)=\"onCheck($event.checked)\"\n        >\n          \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0430\u0434\u0430\u043F\u0442\u0438\u0432?\n        </mat-checkbox>\n    </div>\n  }\n}\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 760px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 540px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 450px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{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\n        <mat-checkbox\n          [checked]=\"tagData.useResponsiveWrapper\"\n          (change)=\"onCheck($event.checked)\"\n        >\n          \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0430\u0434\u0430\u043F\u0442\u0438\u0432?\n        </mat-checkbox>\n    </div>\n  }\n}\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 768px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 575px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 480px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"] }]
         }], propDecorators: { tag: [{
                 type: Input
             }], onTagUpdated: [{
@@ -1774,11 +1774,11 @@ class HtmlRawEditorComponent {
         this.safeHtml = this._sanitizer.bypassSecurityTrustHtml(this.tag.innerHtml);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: HtmlRawEditorComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: HtmlRawEditorComponent, isStandalone: true, selector: "croco-html-html-raw-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, usesOnChanges: true, ngImport: i0, template: "@if (tag.presentOrEdit) {\n    <div [innerHTML]=\"safeHtml\">\n    </div>\n}\n@if (!tag.presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\">\n    </div>\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\n          \u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\n        </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\u0433\u0430\"\n          [(ngModel)]=\"tag.innerHtml\"\n          (ngModelChange)=\"onSafeHtmlChange()\"\n        ></textarea>\n      </mat-form-field>\n    </div>\n  </div>\n}\n\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 760px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 540px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 450px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: HtmlRawEditorComponent, isStandalone: true, selector: "croco-html-html-raw-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, usesOnChanges: true, ngImport: i0, template: "@if (tag.presentOrEdit) {\n    <div [innerHTML]=\"safeHtml\">\n    </div>\n}\n@if (!tag.presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\">\n    </div>\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\n          \u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\n        </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\u0433\u0430\"\n          [(ngModel)]=\"tag.innerHtml\"\n          (ngModelChange)=\"onSafeHtmlChange()\"\n        ></textarea>\n      </mat-form-field>\n    </div>\n  </div>\n}\n\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 768px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 575px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 480px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: HtmlRawEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-html-raw-editor', standalone: true, imports: [MatFormField, MatLabel, MatInput, CdkTextareaAutosize, FormsModule], template: "@if (tag.presentOrEdit) {\n    <div [innerHTML]=\"safeHtml\">\n    </div>\n}\n@if (!tag.presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\">\n    </div>\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\n          \u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\n        </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\u0433\u0430\"\n          [(ngModel)]=\"tag.innerHtml\"\n          (ngModelChange)=\"onSafeHtmlChange()\"\n        ></textarea>\n      </mat-form-field>\n    </div>\n  </div>\n}\n\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 760px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 540px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 450px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"] }]
+            args: [{ selector: 'croco-html-html-raw-editor', standalone: true, imports: [MatFormField, MatLabel, MatInput, CdkTextareaAutosize, FormsModule], template: "@if (tag.presentOrEdit) {\n    <div [innerHTML]=\"safeHtml\">\n    </div>\n}\n@if (!tag.presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\">\n    </div>\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\n          \u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\n        </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\u0433\u0430\"\n          [(ngModel)]=\"tag.innerHtml\"\n          (ngModelChange)=\"onSafeHtmlChange()\"\n        ></textarea>\n      </mat-form-field>\n    </div>\n  </div>\n}\n\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 768px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 575px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 480px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { tag: [{
                 type: Input
             }], onTagUpdated: [{
@@ -1894,11 +1894,11 @@ class FileIdSelectComponent {
         this.loadFiles();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FileIdSelectComponent, deps: [{ token: PublicFilesQueryService }, { token: PrivateFilesQueryService }, { token: CrocoHtmlFileOptionsService }, { token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: FileIdSelectComponent, isStandalone: true, selector: "croco-html-file-id-select", inputs: { labelText: "labelText", fileId: "fileId" }, outputs: { fileId: "fileId", onFileIdChanged: "onFileIdChanged" }, usesOnChanges: true, ngImport: i0, template: "<div>\n    <div class=\"form-group\">\n        <label for=\"fileName\">{{labelText}}</label>\n        <ng-select [(ngModel)]=\"fileId\" (ngModelChange)=\"onModelChanged($event)\" [items]=\"files\" #select\n            bindLabel=\"fileName\" (search)=\"onSearchChanged($event)\" [loading]=\"loading\" [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\n            dropdownPosition=\"auto\" [bindValue]=\"'fileId'\" labelForId=\"fileName\" placeholder=\"\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B\"\n            [virtualScroll]=\"true\">\n            <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n                <div>\n                    <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc(item.fileId)\" />\n                </div>\n                <div>\n                    <span class=\"h5\">\u0424\u0430\u0439\u043B: </span>\n                    <span class=\"h5\" [ngOptionHighlight]=\"search\"><b>{{item.fileName}}</b></span>\n                </div>\n                <div>\n                    <small>\n                        <span>\n                            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: <b>{{item.fileId }}</b>\n                        </span>\n                    </small>\n                </div>\n            </ng-template>\n        </ng-select>\n    </div>\n</div>\n\n<div>\n    \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: {{fileId}}\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i4.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: FileIdSelectComponent, isStandalone: true, selector: "croco-html-file-id-select", inputs: { labelText: "labelText", fileId: "fileId" }, outputs: { fileId: "fileId", onFileIdChanged: "onFileIdChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"file-id\">\n    <div class=\"form-group\">\n        <label for=\"fileName\">{{labelText}}</label>\n        <ng-select [(ngModel)]=\"fileId\" (ngModelChange)=\"onModelChanged($event)\" [items]=\"files\" #select\n            bindLabel=\"fileName\" (search)=\"onSearchChanged($event)\" [loading]=\"loading\" [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\n            dropdownPosition=\"auto\" [bindValue]=\"'fileId'\" labelForId=\"fileName\" placeholder=\"\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B\"\n            [virtualScroll]=\"true\">\n            <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n              <div class=\"file-id__container\">\n                <div class=\"file-id__text-container\">\n                  <div>\n                    <span class=\"h5\">\u0424\u0430\u0439\u043B: </span>\n                    <span class=\"h5\" [ngOptionHighlight]=\"search\"><b>{{item.fileName}}</b></span>\n                  </div>\n                  <div>\n                    <small>\n                        <span>\n                            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: <b>{{item.fileId }}</b>\n                        </span>\n                    </small>\n                  </div>\n                </div>\n                <div class=\"file-id__img\">\n                  <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc(item.fileId)\" />\n                </div>\n              </div>\n\n            </ng-template>\n        </ng-select>\n    </div>\n</div>\n\n<div>\n    \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: {{fileId}}\n</div>\n", styles: [".file-id__container{display:flex;align-items:center;justify-content:space-between;gap:10px}@media (max-width: 768px){.file-id__container{align-items:unset;flex-direction:column}}.file-id__text-container{display:flex;flex-direction:column}.file-id__text-container b{word-break:break-word;white-space:normal}@media (max-width: 768px){.file-id__text-container b{font-size:14px}}@media (max-width: 768px){.file-id__text-container span{font-size:14px}}.file-id__img img{width:100px;height:100px}\n"], dependencies: [{ kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i4.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FileIdSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-file-id-select', standalone: true, imports: [NgSelectModule, FormsModule], template: "<div>\n    <div class=\"form-group\">\n        <label for=\"fileName\">{{labelText}}</label>\n        <ng-select [(ngModel)]=\"fileId\" (ngModelChange)=\"onModelChanged($event)\" [items]=\"files\" #select\n            bindLabel=\"fileName\" (search)=\"onSearchChanged($event)\" [loading]=\"loading\" [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\n            dropdownPosition=\"auto\" [bindValue]=\"'fileId'\" labelForId=\"fileName\" placeholder=\"\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B\"\n            [virtualScroll]=\"true\">\n            <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n                <div>\n                    <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc(item.fileId)\" />\n                </div>\n                <div>\n                    <span class=\"h5\">\u0424\u0430\u0439\u043B: </span>\n                    <span class=\"h5\" [ngOptionHighlight]=\"search\"><b>{{item.fileName}}</b></span>\n                </div>\n                <div>\n                    <small>\n                        <span>\n                            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: <b>{{item.fileId }}</b>\n                        </span>\n                    </small>\n                </div>\n            </ng-template>\n        </ng-select>\n    </div>\n</div>\n\n<div>\n    \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: {{fileId}}\n</div>\n" }]
+            args: [{ selector: 'croco-html-file-id-select', standalone: true, imports: [NgSelectModule, FormsModule], template: "<div class=\"file-id\">\n    <div class=\"form-group\">\n        <label for=\"fileName\">{{labelText}}</label>\n        <ng-select [(ngModel)]=\"fileId\" (ngModelChange)=\"onModelChanged($event)\" [items]=\"files\" #select\n            bindLabel=\"fileName\" (search)=\"onSearchChanged($event)\" [loading]=\"loading\" [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\n            dropdownPosition=\"auto\" [bindValue]=\"'fileId'\" labelForId=\"fileName\" placeholder=\"\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B\"\n            [virtualScroll]=\"true\">\n            <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n              <div class=\"file-id__container\">\n                <div class=\"file-id__text-container\">\n                  <div>\n                    <span class=\"h5\">\u0424\u0430\u0439\u043B: </span>\n                    <span class=\"h5\" [ngOptionHighlight]=\"search\"><b>{{item.fileName}}</b></span>\n                  </div>\n                  <div>\n                    <small>\n                        <span>\n                            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: <b>{{item.fileId }}</b>\n                        </span>\n                    </small>\n                  </div>\n                </div>\n                <div class=\"file-id__img\">\n                  <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc(item.fileId)\" />\n                </div>\n              </div>\n\n            </ng-template>\n        </ng-select>\n    </div>\n</div>\n\n<div>\n    \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: {{fileId}}\n</div>\n", styles: [".file-id__container{display:flex;align-items:center;justify-content:space-between;gap:10px}@media (max-width: 768px){.file-id__container{align-items:unset;flex-direction:column}}.file-id__text-container{display:flex;flex-direction:column}.file-id__text-container b{word-break:break-word;white-space:normal}@media (max-width: 768px){.file-id__text-container b{font-size:14px}}@media (max-width: 768px){.file-id__text-container span{font-size:14px}}.file-id__img img{width:100px;height:100px}\n"] }]
         }], ctorParameters: () => [{ type: PublicFilesQueryService }, { type: PrivateFilesQueryService }, { type: CrocoHtmlFileOptionsService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [CrocoHtmlOptionsToken]
@@ -1978,7 +1978,7 @@ class ImageEditorComponent {
         this.unsubscribe.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ImageEditorComponent, deps: [{ token: CrocoHtmlOptionsToken }, { token: ScreenWidthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: ImageEditorComponent, isStandalone: true, selector: "croco-html-image-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "<div>\n  <div style=\"height: 10px;\">\n  </div>\n\n  @if (hasImageError) {\n    <div class=\"error-block\">\n      \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E \u043F\u043E \u0443\u043A\u0430\u0437\u0430\u043D\u043D\u043E\u043C\u0443 \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E \u0444\u0430\u0439\u043B \u043D\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u043B\u0438 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043D\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.\n    </div>\n  }\n\n  @if (hasFileId() && !hasImageError) {\n    <div>\n      <img\n        [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%', 'max-width': imageMaxWidth ? imageMaxWidth + 'px' : '100%', }\"\n        class=\"mx-auto d-block img-fluid\" [src]=\"getSrc()\" (error)=\"onErrorHandler()\" alt=\"photo\"/>\n    </div>\n  }\n\n  @if (!hasFileId()) {\n    <div>\n      <h5>[\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E]</h5>\n    </div>\n  }\n\n  @if(!tag.presentOrEdit) {\n    <mat-slide-toggle style=\"padding: 10px 0\" [(ngModel)]=\"isShowMediaRequest\">\u041F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C \u043C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B</mat-slide-toggle>\n  }\n\n  @if(isShowMediaRequest) {\n    <div style=\"display: flex; flex-direction: column; gap: 20px\">\n      <div class=\"media-request__header\">\n        <span>\u041C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B:</span>\n        @if (!tag.presentOrEdit) {\n          <button (click)=\"addNewMediaRequest()\" class=\"w-30\" mat-icon-button color=\"primary\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n      </div>\n      @for (request of requests; track $index) {\n        <div class=\"media-request__container\">\n          @if (tag.presentOrEdit) {\n            <div style=\"display: flex; flex-direction: column; gap: 5px\">\n              <span class=\"w-100\">\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.minScreenWidth}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.maxScreenWidth}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageHeight}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageWidth}}</span>\n            </div>\n          }\n\n          @if (!tag.presentOrEdit) {\n            <div style=\"width: 100%\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.minScreenWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxScreenWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxImageHeight\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxImageWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n            </div>\n\n            <button (click)=\"deleteMediaRequest($index)\" class=\"w-30\" mat-icon-button color=\"warn\">\n              <mat-icon>delete</mat-icon>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n\n@if (!tag.presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\"></div>\n    <div style=\"overflow-x:auto;\">\n      <mat-button-toggle-group [(ngModel)]=\"searchOrEdit\">\n        <mat-button-toggle value=\"search\">\n          \u0418\u0441\u043A\u0430\u0442\u044C \u0444\u0430\u0439\u043B <mat-icon>search</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"edit\">\n          \u0423\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u043E \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443 <mat-icon>settings</mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <div [hidden]=\"searchOrEdit !== 'search'\">\n      <croco-html-file-id-select\n        [labelText]=\"'\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B'\"\n        [(fileId)]=\"fileId\"\n        (onFileIdChanged)=\"onFileIdChanged($event)\">\n      </croco-html-file-id-select>\n    </div>\n    <div [hidden]=\"searchOrEdit !== 'edit'\">\n      <div>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\n            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\n          </mat-label>\n          <input matInput placeholder=\"\u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\" new-autocomplete=\"off\" autocomplete=\"off\"\n            [(ngModel)]=\"fileId\"\n            (ngModelChange)=\"onFileIdChanged($event)\">\n        </mat-form-field>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".error-block{background-color:#f32323;color:#fff;text-align:center;border-radius:10px;padding:10px}.media-request__header{align-items:center;display:flex;width:100%;justify-content:space-between}.media-request__container{display:flex;align-items:center;border-bottom:1px solid rgba(128,128,128,.7);padding-bottom:10px}@media screen and (max-width: 700px){mat-button-toggle-group{display:flex;flex-direction:column}}\n"], dependencies: [{ kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FileIdSelectComponent, selector: "croco-html-file-id-select", inputs: ["labelText", "fileId"], outputs: ["fileId", "onFileIdChanged"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: ImageEditorComponent, isStandalone: true, selector: "croco-html-image-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "<div>\n  <div style=\"height: 10px;\">\n  </div>\n\n  @if (hasImageError) {\n    <div class=\"error-block\">\n      \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E \u043F\u043E \u0443\u043A\u0430\u0437\u0430\u043D\u043D\u043E\u043C\u0443 \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E \u0444\u0430\u0439\u043B \u043D\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u043B\u0438 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043D\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.\n    </div>\n  }\n\n  @if (hasFileId() && !hasImageError) {\n    <div>\n      <img\n        [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%', 'max-width': imageMaxWidth ? imageMaxWidth + 'px' : '100%', }\"\n        class=\"mx-auto d-block img-fluid\" [src]=\"getSrc()\" (error)=\"onErrorHandler()\" alt=\"photo\"/>\n    </div>\n  }\n\n  @if (!hasFileId()) {\n    <div>\n      <h5>[\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E]</h5>\n    </div>\n  }\n\n  @if(!tag.presentOrEdit) {\n    <mat-slide-toggle style=\"padding: 10px 0\" [(ngModel)]=\"isShowMediaRequest\">\u041F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C \u043C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B</mat-slide-toggle>\n  }\n\n  @if(isShowMediaRequest) {\n    <div style=\"display: flex; flex-direction: column; gap: 20px\">\n      <div class=\"media-request__header\">\n        <span>\u041C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B:</span>\n        @if (!tag.presentOrEdit) {\n          <button (click)=\"addNewMediaRequest()\" class=\"w-30\" mat-icon-button color=\"primary\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n      </div>\n      @for (request of requests; track $index) {\n        <div class=\"media-request__container\">\n          @if (tag.presentOrEdit) {\n            <div style=\"display: flex; flex-direction: column; gap: 5px\">\n              <span class=\"w-100\">\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.minScreenWidth}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.maxScreenWidth}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageHeight}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageWidth}}</span>\n            </div>\n          }\n\n          @if (!tag.presentOrEdit) {\n            <div style=\"width: 100%\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.minScreenWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxScreenWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxImageHeight\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxImageWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n            </div>\n\n            <button (click)=\"deleteMediaRequest($index)\" class=\"w-30\" mat-icon-button color=\"warn\">\n              <mat-icon>delete</mat-icon>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n\n@if (!tag.presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\"></div>\n    <div style=\"overflow-x:auto;\">\n      <mat-button-toggle-group [(ngModel)]=\"searchOrEdit\">\n        <mat-button-toggle value=\"search\">\n          \u0418\u0441\u043A\u0430\u0442\u044C \u0444\u0430\u0439\u043B <mat-icon>search</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"edit\">\n          \u0423\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u043E \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443 <mat-icon>settings</mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <div [hidden]=\"searchOrEdit !== 'search'\">\n      <croco-html-file-id-select\n        [labelText]=\"'\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B'\"\n        [(fileId)]=\"fileId\"\n        (onFileIdChanged)=\"onFileIdChanged($event)\">\n      </croco-html-file-id-select>\n    </div>\n    <div [hidden]=\"searchOrEdit !== 'edit'\">\n      <div>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\n            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\n          </mat-label>\n          <input matInput placeholder=\"\u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\" new-autocomplete=\"off\" autocomplete=\"off\"\n            [(ngModel)]=\"fileId\"\n            (ngModelChange)=\"onFileIdChanged($event)\">\n        </mat-form-field>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".error-block{background-color:#f32323;color:#fff;text-align:center;border-radius:10px;padding:10px}.media-request__header{align-items:center;display:flex;width:100%;justify-content:space-between}.media-request__container{display:flex;align-items:center;border-bottom:1px solid rgba(128,128,128,.7);padding-bottom:10px}@media screen and (max-width: 768px){mat-button-toggle-group{display:flex;flex-direction:column}}\n"], dependencies: [{ kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FileIdSelectComponent, selector: "croco-html-file-id-select", inputs: ["labelText", "fileId"], outputs: ["fileId", "onFileIdChanged"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ImageEditorComponent, decorators: [{
             type: Component,
@@ -1994,7 +1994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                         NgStyle,
                         MatIconButton,
                         MatSlideToggle
-                    ], template: "<div>\n  <div style=\"height: 10px;\">\n  </div>\n\n  @if (hasImageError) {\n    <div class=\"error-block\">\n      \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E \u043F\u043E \u0443\u043A\u0430\u0437\u0430\u043D\u043D\u043E\u043C\u0443 \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E \u0444\u0430\u0439\u043B \u043D\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u043B\u0438 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043D\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.\n    </div>\n  }\n\n  @if (hasFileId() && !hasImageError) {\n    <div>\n      <img\n        [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%', 'max-width': imageMaxWidth ? imageMaxWidth + 'px' : '100%', }\"\n        class=\"mx-auto d-block img-fluid\" [src]=\"getSrc()\" (error)=\"onErrorHandler()\" alt=\"photo\"/>\n    </div>\n  }\n\n  @if (!hasFileId()) {\n    <div>\n      <h5>[\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E]</h5>\n    </div>\n  }\n\n  @if(!tag.presentOrEdit) {\n    <mat-slide-toggle style=\"padding: 10px 0\" [(ngModel)]=\"isShowMediaRequest\">\u041F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C \u043C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B</mat-slide-toggle>\n  }\n\n  @if(isShowMediaRequest) {\n    <div style=\"display: flex; flex-direction: column; gap: 20px\">\n      <div class=\"media-request__header\">\n        <span>\u041C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B:</span>\n        @if (!tag.presentOrEdit) {\n          <button (click)=\"addNewMediaRequest()\" class=\"w-30\" mat-icon-button color=\"primary\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n      </div>\n      @for (request of requests; track $index) {\n        <div class=\"media-request__container\">\n          @if (tag.presentOrEdit) {\n            <div style=\"display: flex; flex-direction: column; gap: 5px\">\n              <span class=\"w-100\">\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.minScreenWidth}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.maxScreenWidth}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageHeight}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageWidth}}</span>\n            </div>\n          }\n\n          @if (!tag.presentOrEdit) {\n            <div style=\"width: 100%\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.minScreenWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxScreenWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxImageHeight\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxImageWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n            </div>\n\n            <button (click)=\"deleteMediaRequest($index)\" class=\"w-30\" mat-icon-button color=\"warn\">\n              <mat-icon>delete</mat-icon>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n\n@if (!tag.presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\"></div>\n    <div style=\"overflow-x:auto;\">\n      <mat-button-toggle-group [(ngModel)]=\"searchOrEdit\">\n        <mat-button-toggle value=\"search\">\n          \u0418\u0441\u043A\u0430\u0442\u044C \u0444\u0430\u0439\u043B <mat-icon>search</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"edit\">\n          \u0423\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u043E \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443 <mat-icon>settings</mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <div [hidden]=\"searchOrEdit !== 'search'\">\n      <croco-html-file-id-select\n        [labelText]=\"'\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B'\"\n        [(fileId)]=\"fileId\"\n        (onFileIdChanged)=\"onFileIdChanged($event)\">\n      </croco-html-file-id-select>\n    </div>\n    <div [hidden]=\"searchOrEdit !== 'edit'\">\n      <div>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\n            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\n          </mat-label>\n          <input matInput placeholder=\"\u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\" new-autocomplete=\"off\" autocomplete=\"off\"\n            [(ngModel)]=\"fileId\"\n            (ngModelChange)=\"onFileIdChanged($event)\">\n        </mat-form-field>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".error-block{background-color:#f32323;color:#fff;text-align:center;border-radius:10px;padding:10px}.media-request__header{align-items:center;display:flex;width:100%;justify-content:space-between}.media-request__container{display:flex;align-items:center;border-bottom:1px solid rgba(128,128,128,.7);padding-bottom:10px}@media screen and (max-width: 700px){mat-button-toggle-group{display:flex;flex-direction:column}}\n"] }]
+                    ], template: "<div>\n  <div style=\"height: 10px;\">\n  </div>\n\n  @if (hasImageError) {\n    <div class=\"error-block\">\n      \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E \u043F\u043E \u0443\u043A\u0430\u0437\u0430\u043D\u043D\u043E\u043C\u0443 \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E \u0444\u0430\u0439\u043B \u043D\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u043B\u0438 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043D\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.\n    </div>\n  }\n\n  @if (hasFileId() && !hasImageError) {\n    <div>\n      <img\n        [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%', 'max-width': imageMaxWidth ? imageMaxWidth + 'px' : '100%', }\"\n        class=\"mx-auto d-block img-fluid\" [src]=\"getSrc()\" (error)=\"onErrorHandler()\" alt=\"photo\"/>\n    </div>\n  }\n\n  @if (!hasFileId()) {\n    <div>\n      <h5>[\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E]</h5>\n    </div>\n  }\n\n  @if(!tag.presentOrEdit) {\n    <mat-slide-toggle style=\"padding: 10px 0\" [(ngModel)]=\"isShowMediaRequest\">\u041F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C \u043C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B</mat-slide-toggle>\n  }\n\n  @if(isShowMediaRequest) {\n    <div style=\"display: flex; flex-direction: column; gap: 20px\">\n      <div class=\"media-request__header\">\n        <span>\u041C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B:</span>\n        @if (!tag.presentOrEdit) {\n          <button (click)=\"addNewMediaRequest()\" class=\"w-30\" mat-icon-button color=\"primary\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n      </div>\n      @for (request of requests; track $index) {\n        <div class=\"media-request__container\">\n          @if (tag.presentOrEdit) {\n            <div style=\"display: flex; flex-direction: column; gap: 5px\">\n              <span class=\"w-100\">\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.minScreenWidth}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.maxScreenWidth}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageHeight}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageWidth}}</span>\n            </div>\n          }\n\n          @if (!tag.presentOrEdit) {\n            <div style=\"width: 100%\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.minScreenWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxScreenWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxImageHeight\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxImageWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n            </div>\n\n            <button (click)=\"deleteMediaRequest($index)\" class=\"w-30\" mat-icon-button color=\"warn\">\n              <mat-icon>delete</mat-icon>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n\n@if (!tag.presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\"></div>\n    <div style=\"overflow-x:auto;\">\n      <mat-button-toggle-group [(ngModel)]=\"searchOrEdit\">\n        <mat-button-toggle value=\"search\">\n          \u0418\u0441\u043A\u0430\u0442\u044C \u0444\u0430\u0439\u043B <mat-icon>search</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"edit\">\n          \u0423\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u043E \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443 <mat-icon>settings</mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <div [hidden]=\"searchOrEdit !== 'search'\">\n      <croco-html-file-id-select\n        [labelText]=\"'\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B'\"\n        [(fileId)]=\"fileId\"\n        (onFileIdChanged)=\"onFileIdChanged($event)\">\n      </croco-html-file-id-select>\n    </div>\n    <div [hidden]=\"searchOrEdit !== 'edit'\">\n      <div>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\n            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\n          </mat-label>\n          <input matInput placeholder=\"\u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\" new-autocomplete=\"off\" autocomplete=\"off\"\n            [(ngModel)]=\"fileId\"\n            (ngModelChange)=\"onFileIdChanged($event)\">\n        </mat-form-field>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".error-block{background-color:#f32323;color:#fff;text-align:center;border-radius:10px;padding:10px}.media-request__header{align-items:center;display:flex;width:100%;justify-content:space-between}.media-request__container{display:flex;align-items:center;border-bottom:1px solid rgba(128,128,128,.7);padding-bottom:10px}@media screen and (max-width: 768px){mat-button-toggle-group{display:flex;flex-direction:column}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [CrocoHtmlOptionsToken]
@@ -2396,7 +2396,7 @@ class VisualEditorComponent {
         return `align-${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                  <span class=\"text-align-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: tag.tag}\">\n                    </ng-container>\n                  </span>\n                  {{tag.displayValue}}\n                </span>\n              }\n\n              @if (useCustomWidgetsButton) {\n                <span class=\"tag-item\" (click)=\"customWidgetsClickHandler()\">\n                  <span class=\"text-align-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: 'custom-widget'}\">\n                    </ng-container>\n                  </span>\n                  \u0414\u0440\u0443\u0433\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044B\n                </span>\n              }\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          @if (selectedVideoPlayer === ExternalVideoSupportedTypes.Code) {\n            <div class=\"col-12\">\n              <mat-form-field class=\"w-100\" appearance=\"outline\">\n                <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n                <input\n                  matInput\n                  placeholder=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\"\n                  [(ngModel)]=\"htmlRaw\"\n                >\n              </mat-form-field>\n            </div>\n          }\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                    <span class=\"text-align-icon\">\n                      <ng-container [ngTemplateOutlet]=\"textAlignToggleIcons\"\n                                    [ngTemplateOutletContext]=\"{icon: option.value}\">\n                      </ng-container>\n                    </span>\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\n        <div class=\"col-12\">\n          <button (click)=\"addTagClickHandler()\" 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()\" 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 width=\"24\" height=\"24\" class=\"move-icon\">\n                  <use [attr.xlink:href]=\"'move-icon' | spriteIconPath\"></use>\n                </svg>\n              </div>\n              <div>\n                <div class=\"badge\" [matTooltip]=\"tag.tagDescription.tag\">\n                  <span class=\"text-align-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: tag.tagDescription.tag}\">\n                  </ng-container>\n                  </span>\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  <svg width=\"20\" height=\"20\">\n    <use [attr.xlink:href]=\"setAlignButton(icon) | spriteIconPath\"></use>\n  </svg>\n</ng-template>\n\n<ng-template #tagButtonIcons let-icon=\"icon\">\n  @if (icon.indexOf('h') === 0 && icon.length === 2) {\n    {{icon.toUpperCase()}}\n  }\n  @else {\n    <svg width=\"20\" height=\"20\">\n      <use [attr.xlink:href]=\"setTagButton(icon) | spriteIconPath\"></use>\n    </svg>\n  }\n</ng-template>", 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}.text-align-icon,.mat-button-toggle .text-align-icon{color:#323e8b}.mat-button-toggle:hover,.mat-button-toggle:hover .text-align-icon{color:#747ebf}.mat-button-toggle-checked .text-align-icon{color:#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;color:#323e8b}.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}.text-align-icon{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}@media (max-width: 760px){.tag-item:hover{color:inherit;box-shadow:none}.tag-item:hover svg{color:inherit}.tag-item:active{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:active svg{color:#747ebf}}.move-icon:hover{cursor:pointer;opacity:.7}.cdk-drag.cdk-drag-placeholder,.cdk-drag-preview{opacity:.5;transition:opacity .2s}.example-handle{color:#323e8b}\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$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: SpriteIconPathPipe, name: "spriteIconPath" }] }); }
+    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                  <span class=\"text-align-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: tag.tag}\">\n                    </ng-container>\n                  </span>\n                  {{tag.displayValue}}\n                </span>\n              }\n\n              @if (useCustomWidgetsButton) {\n                <span class=\"tag-item\" (click)=\"customWidgetsClickHandler()\">\n                  <span class=\"text-align-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: 'custom-widget'}\">\n                    </ng-container>\n                  </span>\n                  \u0414\u0440\u0443\u0433\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044B\n                </span>\n              }\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          @if (selectedVideoPlayer === ExternalVideoSupportedTypes.Code) {\n            <div class=\"col-12\">\n              <mat-form-field class=\"w-100\" appearance=\"outline\">\n                <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n                <input\n                  matInput\n                  placeholder=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\"\n                  [(ngModel)]=\"htmlRaw\"\n                >\n              </mat-form-field>\n            </div>\n          }\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                    <span class=\"text-align-icon\">\n                      <ng-container [ngTemplateOutlet]=\"textAlignToggleIcons\"\n                                    [ngTemplateOutletContext]=\"{icon: option.value}\">\n                      </ng-container>\n                    </span>\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\n        <div class=\"col-12\">\n          <button (click)=\"addTagClickHandler()\" 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()\" 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 width=\"24\" height=\"24\" class=\"move-icon\">\n                  <use [attr.xlink:href]=\"'move-icon' | spriteIconPath\"></use>\n                </svg>\n              </div>\n              <div>\n                <div class=\"badge\" [matTooltip]=\"tag.tagDescription.tag\">\n                  <span class=\"text-align-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: tag.tagDescription.tag}\">\n                  </ng-container>\n                  </span>\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  <svg width=\"20\" height=\"20\">\n    <use [attr.xlink:href]=\"setAlignButton(icon) | spriteIconPath\"></use>\n  </svg>\n</ng-template>\n\n<ng-template #tagButtonIcons let-icon=\"icon\">\n  @if (icon.indexOf('h') === 0 && icon.length === 2) {\n    {{icon.toUpperCase()}}\n  }\n  @else {\n    <svg width=\"20\" height=\"20\">\n      <use [attr.xlink:href]=\"setTagButton(icon) | spriteIconPath\"></use>\n    </svg>\n  }\n</ng-template>", 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}.text-align-icon,.mat-button-toggle .text-align-icon{color:#323e8b}.mat-button-toggle:hover,.mat-button-toggle:hover .text-align-icon{color:#747ebf}.mat-button-toggle-checked .text-align-icon{color:#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;color:#323e8b}.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}.text-align-icon{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}@media (max-width: 768px){.tag-item:hover{color:inherit;box-shadow:none}.tag-item:hover svg{color:inherit}.tag-item:active{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:active svg{color:#747ebf}}.move-icon:hover{cursor:pointer;opacity:.7}.cdk-drag.cdk-drag-placeholder,.cdk-drag-preview{opacity:.5;transition:opacity .2s}.example-handle{color:#323e8b}\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$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: SpriteIconPathPipe, name: "spriteIconPath" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: VisualEditorComponent, decorators: [{
             type: Component,
@@ -2422,7 +2422,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                         NgTemplateOutlet,
                         MatTooltip,
                         SpriteIconPathPipe,
-                    ], 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                  <span class=\"text-align-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: tag.tag}\">\n                    </ng-container>\n                  </span>\n                  {{tag.displayValue}}\n                </span>\n              }\n\n              @if (useCustomWidgetsButton) {\n                <span class=\"tag-item\" (click)=\"customWidgetsClickHandler()\">\n                  <span class=\"text-align-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: 'custom-widget'}\">\n                    </ng-container>\n                  </span>\n                  \u0414\u0440\u0443\u0433\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044B\n                </span>\n              }\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          @if (selectedVideoPlayer === ExternalVideoSupportedTypes.Code) {\n            <div class=\"col-12\">\n              <mat-form-field class=\"w-100\" appearance=\"outline\">\n                <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n                <input\n                  matInput\n                  placeholder=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\"\n                  [(ngModel)]=\"htmlRaw\"\n                >\n              </mat-form-field>\n            </div>\n          }\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                    <span class=\"text-align-icon\">\n                      <ng-container [ngTemplateOutlet]=\"textAlignToggleIcons\"\n                                    [ngTemplateOutletContext]=\"{icon: option.value}\">\n                      </ng-container>\n                    </span>\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\n        <div class=\"col-12\">\n          <button (click)=\"addTagClickHandler()\" 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()\" 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 width=\"24\" height=\"24\" class=\"move-icon\">\n                  <use [attr.xlink:href]=\"'move-icon' | spriteIconPath\"></use>\n                </svg>\n              </div>\n              <div>\n                <div class=\"badge\" [matTooltip]=\"tag.tagDescription.tag\">\n                  <span class=\"text-align-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: tag.tagDescription.tag}\">\n                  </ng-container>\n                  </span>\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  <svg width=\"20\" height=\"20\">\n    <use [attr.xlink:href]=\"setAlignButton(icon) | spriteIconPath\"></use>\n  </svg>\n</ng-template>\n\n<ng-template #tagButtonIcons let-icon=\"icon\">\n  @if (icon.indexOf('h') === 0 && icon.length === 2) {\n    {{icon.toUpperCase()}}\n  }\n  @else {\n    <svg width=\"20\" height=\"20\">\n      <use [attr.xlink:href]=\"setTagButton(icon) | spriteIconPath\"></use>\n    </svg>\n  }\n</ng-template>", 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}.text-align-icon,.mat-button-toggle .text-align-icon{color:#323e8b}.mat-button-toggle:hover,.mat-button-toggle:hover .text-align-icon{color:#747ebf}.mat-button-toggle-checked .text-align-icon{color:#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;color:#323e8b}.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}.text-align-icon{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}@media (max-width: 760px){.tag-item:hover{color:inherit;box-shadow:none}.tag-item:hover svg{color:inherit}.tag-item:active{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:active svg{color:#747ebf}}.move-icon:hover{cursor:pointer;opacity:.7}.cdk-drag.cdk-drag-placeholder,.cdk-drag-preview{opacity:.5;transition:opacity .2s}.example-handle{color:#323e8b}\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                  <span class=\"text-align-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: tag.tag}\">\n                    </ng-container>\n                  </span>\n                  {{tag.displayValue}}\n                </span>\n              }\n\n              @if (useCustomWidgetsButton) {\n                <span class=\"tag-item\" (click)=\"customWidgetsClickHandler()\">\n                  <span class=\"text-align-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: 'custom-widget'}\">\n                    </ng-container>\n                  </span>\n                  \u0414\u0440\u0443\u0433\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044B\n                </span>\n              }\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          @if (selectedVideoPlayer === ExternalVideoSupportedTypes.Code) {\n            <div class=\"col-12\">\n              <mat-form-field class=\"w-100\" appearance=\"outline\">\n                <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n                <input\n                  matInput\n                  placeholder=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\"\n                  [(ngModel)]=\"htmlRaw\"\n                >\n              </mat-form-field>\n            </div>\n          }\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                    <span class=\"text-align-icon\">\n                      <ng-container [ngTemplateOutlet]=\"textAlignToggleIcons\"\n                                    [ngTemplateOutletContext]=\"{icon: option.value}\">\n                      </ng-container>\n                    </span>\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\n        <div class=\"col-12\">\n          <button (click)=\"addTagClickHandler()\" 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()\" 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 width=\"24\" height=\"24\" class=\"move-icon\">\n                  <use [attr.xlink:href]=\"'move-icon' | spriteIconPath\"></use>\n                </svg>\n              </div>\n              <div>\n                <div class=\"badge\" [matTooltip]=\"tag.tagDescription.tag\">\n                  <span class=\"text-align-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: tag.tagDescription.tag}\">\n                  </ng-container>\n                  </span>\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  <svg width=\"20\" height=\"20\">\n    <use [attr.xlink:href]=\"setAlignButton(icon) | spriteIconPath\"></use>\n  </svg>\n</ng-template>\n\n<ng-template #tagButtonIcons let-icon=\"icon\">\n  @if (icon.indexOf('h') === 0 && icon.length === 2) {\n    {{icon.toUpperCase()}}\n  }\n  @else {\n    <svg width=\"20\" height=\"20\">\n      <use [attr.xlink:href]=\"setTagButton(icon) | spriteIconPath\"></use>\n    </svg>\n  }\n</ng-template>", 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}.text-align-icon,.mat-button-toggle .text-align-icon{color:#323e8b}.mat-button-toggle:hover,.mat-button-toggle:hover .text-align-icon{color:#747ebf}.mat-button-toggle-checked .text-align-icon{color:#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;color:#323e8b}.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}.text-align-icon{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}@media (max-width: 768px){.tag-item:hover{color:inherit;box-shadow:none}.tag-item:hover svg{color:inherit}.tag-item:active{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:active svg{color:#747ebf}}.move-icon:hover{cursor:pointer;opacity:.7}.cdk-drag.cdk-drag-placeholder,.cdk-drag-preview{opacity:.5;transition:opacity .2s}.example-handle{color:#323e8b}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [CrocoHtmlOptionsToken]