croco-html 2.29.0 → 2.31.0

package/fesm2022/croco-html.mjs

@@ -18,6 +18,8 @@ import { BehaviorSubject, Subject, takeUntil } from 'rxjs';
 import { NgStyle, CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/material/input';
 import { MatInput, MatInputModule } from '@angular/material/input';
+import * as i12 from '@angular/material/tooltip';
+import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
 import { CdkTextareaAutosize } from '@angular/cdk/text-field';
 import * as i2$2 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
@@ -38,8 +40,6 @@ import { MatTabsModule } from '@angular/material/tabs';
 import * as i1$5 from 'ngx-clipboard';
 import * as i2$3 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import * as i12 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i13 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i25 from '@angular/material/autocomplete';
@@ -137,10 +137,11 @@ class FileImageTagDataConsts {
     static { this.TagName = "file-image"; }
     static { this.FileIdAttrName = "file-id"; }
     static { this.ScreenMediaRequest = "screen-media-request"; }
-    static { this.DefaultValueForFileImage = "max-screen-width:1200,min-screen-width:900,max-image-height:300;max-screen-width:900,min-screen-width:600,max-image-height:200"; }
     static { this.MaxScreenWidth = 'max-screen-width'; }
     static { this.MinScreenWidth = 'min-screen-width'; }
     static { this.MaxImageHeight = 'max-image-height'; }
+    static { this.MaxImageWidth = 'max-image-width'; }
+    static { this.DefaultValueForFileImage = "max-screen-width:1200,min-screen-width:900,max-image-height:300;max-screen-width:900,min-screen-width:600,max-image-height:200"; }
 }
 class ImageMethods {
     static buildUrl(fileId, sizeType, options) {
@@ -177,31 +178,53 @@ class ImageMethods {
             return [];
         }
         return data.split(';').reduce((requests, currentValue) => {
+            const attrs = currentValue.split(',');
             requests.push({
-                maxScreenWidth: ImageMethods.createMediaRequestValue(currentValue.split(','), FileImageTagDataConsts.MaxScreenWidth),
-                minScreenWidth: ImageMethods.createMediaRequestValue(currentValue.split(','), FileImageTagDataConsts.MinScreenWidth),
-                maxImageHeight: ImageMethods.createMediaRequestValue(currentValue.split(','), FileImageTagDataConsts.MaxImageHeight),
+                maxScreenWidth: ImageMethods.createMediaRequestValue(attrs, FileImageTagDataConsts.MaxScreenWidth),
+                minScreenWidth: ImageMethods.createMediaRequestValue(attrs, FileImageTagDataConsts.MinScreenWidth),
+                maxImageHeight: ImageMethods.createMediaRequestValue(attrs, FileImageTagDataConsts.MaxImageHeight),
+                maxImageWidth: ImageMethods.createMediaRequestValue(attrs, FileImageTagDataConsts.MaxImageHeight)
             });
             return requests;
         }, []);
     }; }
     static createMediaRequestValue(arr, attribute) {
-        return +arr.find(el => el.includes(attribute)).match(/\d+/g).join('');
+        let elem = arr.find(el => el.includes(attribute));
+        if (!elem) {
+            return null;
+        }
+        return +elem.match(/\d+/g).join('');
     }
-    static { this.mediaRequestsArrayToStringParser = (data) => {
+    static mediaRequestsArrayToStringParser(data) {
         if (!data.length) {
             return '';
         }
-        return data.map(el => `${FileImageTagDataConsts.MaxScreenWidth}:${el.maxScreenWidth},${FileImageTagDataConsts.MinScreenWidth}:${el.minScreenWidth},${FileImageTagDataConsts.MaxImageHeight}:${el.maxImageHeight}`).join(';');
-    }; }
-    static getMaxImageHeightByScreenSize(screenSize, requests) {
+        return data.map(el => ImageMethods.mediaRequestToString(el)).join(';');
+    }
+    static mediaRequestToString(data) {
+        let result = `${FileImageTagDataConsts.MaxScreenWidth}:${data.maxScreenWidth},${FileImageTagDataConsts.MinScreenWidth}:${data.minScreenWidth}`;
+        if (data.maxImageHeight) {
+            result += `,${FileImageTagDataConsts.MaxImageHeight}:${data.maxImageHeight}`;
+        }
+        if (data.maxImageWidth) {
+            result += `,${FileImageTagDataConsts.MaxImageWidth}:${data.maxImageWidth}`;
+        }
+        return result;
+    }
+    static getImageRestrictionsByScreenSize(screenSize, requests) {
         let result = requests
             .sort((a, b) => b.maxScreenWidth - a.maxScreenWidth)
             .find(el => screenSize <= +el.maxScreenWidth && screenSize >= +el.minScreenWidth);
         if (!result) {
-            return null;
+            return {
+                maxWidth: null,
+                maxHeight: null,
+            };
         }
-        return result.maxImageHeight;
+        return {
+            maxHeight: result.maxImageHeight,
+            maxWidth: result.maxImageWidth
+        };
     }
 }
 
@@ -572,6 +595,39 @@ class ButtonMethods {
     }
 }
 
+class CustomWidgetTagDataConsts {
+    static { this.TagName = "custom-widget"; }
+    static { this.TypeAttrName = "type"; }
+    static { this.DataIdAttrName = "data-id"; }
+    static { this.WidgetIdAttrName = "widget-id"; }
+}
+class CustomWidgetMethods {
+    static ExtractCustomWidgetTagData(attributes) {
+        return {
+            type: attributes[CustomWidgetTagDataConsts.TypeAttrName],
+            dataId: attributes[CustomWidgetTagDataConsts.DataIdAttrName],
+            widgetId: attributes[CustomWidgetTagDataConsts.WidgetIdAttrName]
+        };
+    }
+    static ExtractCustomWidgetAttributes(customWidgetTagData) {
+        return {
+            [CustomWidgetTagDataConsts.TypeAttrName]: customWidgetTagData.type,
+            [CustomWidgetTagDataConsts.DataIdAttrName]: customWidgetTagData.dataId,
+            [CustomWidgetTagDataConsts.WidgetIdAttrName]: customWidgetTagData.widgetId
+        };
+    }
+    static ExtractCustomWidgetTag(elem) {
+        return {
+            type: CustomWidgetTagDataConsts.TagName,
+            data: {
+                type: elem.getAttribute(CustomWidgetTagDataConsts.TypeAttrName),
+                dataId: elem.getAttribute(CustomWidgetTagDataConsts.DataIdAttrName),
+                widgetId: elem.getAttribute(CustomWidgetTagDataConsts.WidgetIdAttrName)
+            }
+        };
+    }
+}
+
 class HtmlExtractionMethods {
     static ExtractHeaderTag(elem, tagName) {
         var data = TextSimpleMethods.ExtractTextTag(elem);
@@ -598,6 +654,7 @@ class HtmlExtractionMethods {
         [ExternalVideoTagDataConsts.TagName.toUpperCase()]: (elem, options) => VideoMethods.ExtractExternalVideoTag(elem),
         [DownloadButtonTagDataConsts.TagName.toUpperCase()]: (elem, options) => DownloadButtonMethods.ExtractDownloadButtonTag(elem),
         [ButtonTagDataConsts.TagName.toUpperCase()]: (elem, options) => ButtonMethods.ExtractButtonTag(elem),
+        [CustomWidgetTagDataConsts.TagName.toUpperCase()]: (elem, options) => CustomWidgetMethods.ExtractCustomWidgetTag(elem),
     }; }
     static transformHtmlElementToBlocks(element, options) {
         var data = [];
@@ -653,6 +710,7 @@ class Tags {
     static { this.RichText = 'rich-text'; }
     static { this.ExternalVideo = ExternalVideoTagDataConsts.TagName; }
     static { this.UnsupportedTag = 'unsupported-tag'; }
+    static { this.CustomWidget = CustomWidgetTagDataConsts.TagName; }
 }
 
 class BodyTagsExtensions {
@@ -670,7 +728,8 @@ class BodyTagsExtensions {
             [DownloadButtonTagDataConsts.TagName]: "Кнопка",
             [HtmlRawTagDataConsts.TagName]: "Html разметка",
             [DownloadButtonTagDataConsts.TagName]: "Кнопка для скачивания",
-            [ButtonTagDataConsts.TagName]: "Кнопка"
+            [ButtonTagDataConsts.TagName]: "Кнопка",
+            [CustomWidgetTagDataConsts.TagName]: "Кастомный виджет"
         };
         return descriptions[tagName];
     }
@@ -691,6 +750,9 @@ class BodyTagsExtensions {
             if (x.tagDescription.tag === ButtonTagDataConsts.TagName) {
                 return `<${x.tagDescription.tag} text="${x.attributes[ButtonTagDataConsts.TextAttrName]}" type="${x.attributes[ButtonTagDataConsts.TypeAttrName]}"  click="${x.attributes[ButtonTagDataConsts.ClickAttrName]}"></${x.tagDescription.tag}>`;
             }
+            if (x.tagDescription.tag === CustomWidgetTagDataConsts.TagName) {
+                return `<${x.tagDescription.tag} type="${x.attributes[CustomWidgetTagDataConsts.TypeAttrName]}" data-id="${x.attributes[CustomWidgetTagDataConsts.DataIdAttrName]}"  widget-id="${x.attributes[CustomWidgetTagDataConsts.WidgetIdAttrName]}"></${x.tagDescription.tag}>`;
+            }
             return BodyTagsExtensions.imageTagToHtml(x);
         });
         let result = "";
@@ -786,6 +848,18 @@ class BodyTagsExtensions {
                 innerHtml: ""
             };
         }
+        if (data.type === CustomWidgetTagDataConsts.TagName) {
+            let customWidgetTagData = data.data;
+            return {
+                presentOrEdit: true,
+                tagDescription: {
+                    tag: data.type,
+                    displayValue: BodyTagsExtensions.getDescription(data.type)
+                },
+                attributes: customWidgetTagData,
+                innerHtml: ""
+            };
+        }
         if (data.type === HtmlRawTagDataConsts.TagName) {
             return {
                 presentOrEdit: true,
@@ -1293,6 +1367,7 @@ class FileImageTagViewComponent {
         this.requests = [];
         this.unsubscribe = new Subject();
         this.imageMaxHeight = null;
+        this.imageMaxWidth = null;
     }
     getMediaRequests(screenMediaRequest) {
         let result = ImageMethods.mediaRequestStringToArrayParser(screenMediaRequest);
@@ -1305,7 +1380,9 @@ class FileImageTagViewComponent {
         this.screenWidthService.getScreenWidth()
             .pipe(takeUntil(this.unsubscribe))
             .subscribe(screenWidth => {
-            this.imageMaxHeight = ImageMethods.getMaxImageHeightByScreenSize(screenWidth, this.requests);
+            let restrictions = ImageMethods.getImageRestrictionsByScreenSize(screenWidth, this.requests);
+            this.imageMaxHeight = restrictions.maxHeight;
+            this.imageMaxWidth = restrictions.maxWidth;
         });
     }
     ngOnDestroy() {
@@ -1313,13 +1390,13 @@ class FileImageTagViewComponent {
         this.unsubscribe.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FileImageTagViewComponent, deps: [{ token: ScreenWidthService }, { token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: FileImageTagViewComponent, isStandalone: true, selector: "croco-html-file-image-tag-view", inputs: { item: "item" }, ngImport: i0, template: "<img\n  [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%'}\"\n  class=\"mx-auto d-block img-fluid\"\n  [src]=\"imageSrc\"\n  alt=\"\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043E\"\n/>\n", styles: [""], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: FileImageTagViewComponent, isStandalone: true, selector: "croco-html-file-image-tag-view", inputs: { item: "item" }, ngImport: i0, template: "<img\n  [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%', 'max-width': imageMaxWidth ? imageMaxWidth + 'px' : '100%', }\"\n  class=\"mx-auto d-block img-fluid\"\n  [src]=\"imageSrc\"\n  alt=\"\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043E\"\n/>\n", styles: [""], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FileImageTagViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'croco-html-file-image-tag-view', imports: [
                         NgStyle
-                    ], standalone: true, template: "<img\n  [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%'}\"\n  class=\"mx-auto d-block img-fluid\"\n  [src]=\"imageSrc\"\n  alt=\"\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043E\"\n/>\n" }]
+                    ], standalone: true, template: "<img\n  [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%', 'max-width': imageMaxWidth ? imageMaxWidth + 'px' : '100%', }\"\n  class=\"mx-auto d-block img-fluid\"\n  [src]=\"imageSrc\"\n  alt=\"\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043E\"\n/>\n" }]
         }], ctorParameters: () => [{ type: ScreenWidthService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [CrocoHtmlOptionsToken]
@@ -1442,6 +1519,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 type: Output
             }] } });
 
+class XmlTagCustomWidgetComponent {
+    constructor() {
+        this.tooltipData = "";
+    }
+    set tagData(value) {
+        this._tagData = value;
+        this.tooltipData = `data-id:${value.dataId}; widget-id: ${value.widgetId}`;
+    }
+    ;
+    get tagData() {
+        return this._tagData;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagCustomWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: XmlTagCustomWidgetComponent, isStandalone: true, selector: "croco-html-xml-tag-custom-widget", inputs: { tagData: "tagData" }, ngImport: i0, template: "<div [matTooltip]=\"tooltipData\">\n  \u0432\u0438\u0434\u0436\u0435\u0442 \u0442\u0438\u043F\u0430 {{ tagData.type }}\n</div>\n\n\n", styles: [":host div{background-color:#a3ded5;padding:5px 10px;display:inline-block;border-radius:10px}\n"], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagCustomWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'croco-html-xml-tag-custom-widget', imports: [MatTooltip], standalone: true, template: "<div [matTooltip]=\"tooltipData\">\n  \u0432\u0438\u0434\u0436\u0435\u0442 \u0442\u0438\u043F\u0430 {{ tagData.type }}\n</div>\n\n\n", styles: [":host div{background-color:#a3ded5;padding:5px 10px;display:inline-block;border-radius:10px}\n"] }]
+        }], propDecorators: { tagData: [{
+                type: Input
+            }] } });
+
 class XmlTagViewComponent {
     constructor() {
         this.data = [];
@@ -1450,7 +1549,7 @@ class XmlTagViewComponent {
         return TextTags.headerTextTags.includes(item.type);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: XmlTagViewComponent, isStandalone: true, selector: "croco-html-xml-tag-view", inputs: { data: "data" }, ngImport: i0, template: "<div>\n  @for (item of data; track $index) {\n  <div class=\"row\">\n\n    @if (item.type === 'text') {\n    <div>\n      <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\n    </div>\n    }\n\n    @if (item.type === 'html-raw') {\n    <div>\n      <croco-html-raw-view [rawHtml]=\"item.data.innerHTML\">\n      </croco-html-raw-view>\n    </div>\n    }\n\n    @if (isHeaderTextTag(item)) {\n    <div>\n      <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\n    </div>\n    }\n\n    @if (item.type === 'file-image') {\n    <div>\n      <croco-html-file-image-tag-view [item]=\"item\"></croco-html-file-image-tag-view>\n    </div>\n    }\n\n    @if (item.type === 'table' && item.validationResult) {\n\n    @if (item.validationResult.isSucceeded){\n    <croco-html-xml-tag-html-view [html]=\"item.bootstrapHtml\">\n    </croco-html-xml-tag-html-view>\n    }\n    @else {\n    <croco-html-error-banner [message]=\"item.validationResult.message\">\n    </croco-html-error-banner>\n    }\n    }\n\n    @if (item.type === 'rich-text') {\n    <div>\n      <croco-html-xml-tag-text-view></croco-html-xml-tag-text-view>\n    </div>\n    }\n\n    @if (item.type === 'external-video') {\n    <div>\n      <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\n    </div>\n    }\n\n    @if (item.type === 'download-file-button') {\n    <div>\n      <croco-html-xml-tag-download-file-button [data]=\"item\"></croco-html-xml-tag-download-file-button>\n    </div>\n    }\n\n    @if (item.type === 'button') {\n    <div>\n      <croco-html-xml-tag-button [data]=\"item\"></croco-html-xml-tag-button>\n    </div>\n    }\n    @if (item.type === 'unsupported-tag') {\n    <div class=\"red\" style=\"margin-top: 10px;\">\n      <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\n      <span>\n        {{item.data.tagString}}\n      </span>\n    </div>\n    }\n  </div>\n  }\n</div>", styles: [".red{background-color:#c94444;color:#fff}\n"], dependencies: [{ kind: "component", type: XmlTagTextViewComponent, selector: "croco-html-xml-tag-text-view", inputs: ["item"] }, { kind: "component", type: HtmlRawViewComponent, selector: "croco-html-raw-view", inputs: ["rawHtml"] }, { kind: "component", type: XmlTagHeaderTextViewComponent, selector: "croco-html-xml-tag-header-text-view", inputs: ["item"] }, { kind: "component", type: FileImageTagViewComponent, selector: "croco-html-file-image-tag-view", inputs: ["item"] }, { kind: "component", type: XmlTagHtmlViewComponent, selector: "croco-html-xml-tag-html-view", inputs: ["html"] }, { kind: "component", type: ErrorBannerComponent, selector: "croco-html-error-banner", inputs: ["message"] }, { kind: "component", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }, { kind: "component", type: XmlTagDownloadFileButtonComponent, selector: "croco-html-xml-tag-download-file-button", inputs: ["data", "tagData"] }, { kind: "component", type: XmlTagButtonComponent, selector: "croco-html-xml-tag-button", inputs: ["data", "tagData"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: XmlTagViewComponent, isStandalone: true, selector: "croco-html-xml-tag-view", inputs: { data: "data" }, ngImport: i0, template: "<div>\n  @for (item of data; track $index) {\n  <div class=\"row\">\n\n    @if (item.type === 'text') {\n    <div>\n      <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\n    </div>\n    }\n\n    @if (item.type === 'html-raw') {\n    <div>\n      <croco-html-raw-view [rawHtml]=\"item.data.innerHTML\">\n      </croco-html-raw-view>\n    </div>\n    }\n\n    @if (isHeaderTextTag(item)) {\n    <div>\n      <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\n    </div>\n    }\n\n    @if (item.type === 'file-image') {\n    <div>\n      <croco-html-file-image-tag-view [item]=\"item\"></croco-html-file-image-tag-view>\n    </div>\n    }\n\n    @if (item.type === 'custom-widget') {\n      <div>\n        <croco-html-xml-tag-custom-widget [tagData]=\"item.data\"></croco-html-xml-tag-custom-widget>\n      </div>\n    }\n\n    @if (item.type === 'table' && item.validationResult) {\n\n    @if (item.validationResult.isSucceeded){\n    <croco-html-xml-tag-html-view [html]=\"item.bootstrapHtml\">\n    </croco-html-xml-tag-html-view>\n    }\n    @else {\n    <croco-html-error-banner [message]=\"item.validationResult.message\">\n    </croco-html-error-banner>\n    }\n    }\n\n    @if (item.type === 'rich-text') {\n    <div>\n      <croco-html-xml-tag-text-view></croco-html-xml-tag-text-view>\n    </div>\n    }\n\n    @if (item.type === 'external-video') {\n    <div>\n      <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\n    </div>\n    }\n\n    @if (item.type === 'download-file-button') {\n    <div>\n      <croco-html-xml-tag-download-file-button [data]=\"item\"></croco-html-xml-tag-download-file-button>\n    </div>\n    }\n\n    @if (item.type === 'button') {\n    <div>\n      <croco-html-xml-tag-button [data]=\"item\"></croco-html-xml-tag-button>\n    </div>\n    }\n    @if (item.type === 'unsupported-tag') {\n    <div class=\"red\" style=\"margin-top: 10px;\">\n      <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\n      <span>\n        {{item.data.tagString}}\n      </span>\n    </div>\n    }\n  </div>\n  }\n</div>\n", styles: [".red{background-color:#c94444;color:#fff}\n"], dependencies: [{ kind: "component", type: XmlTagTextViewComponent, selector: "croco-html-xml-tag-text-view", inputs: ["item"] }, { kind: "component", type: HtmlRawViewComponent, selector: "croco-html-raw-view", inputs: ["rawHtml"] }, { kind: "component", type: XmlTagHeaderTextViewComponent, selector: "croco-html-xml-tag-header-text-view", inputs: ["item"] }, { kind: "component", type: FileImageTagViewComponent, selector: "croco-html-file-image-tag-view", inputs: ["item"] }, { kind: "component", type: XmlTagHtmlViewComponent, selector: "croco-html-xml-tag-html-view", inputs: ["html"] }, { kind: "component", type: ErrorBannerComponent, selector: "croco-html-error-banner", inputs: ["message"] }, { kind: "component", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }, { kind: "component", type: XmlTagDownloadFileButtonComponent, selector: "croco-html-xml-tag-download-file-button", inputs: ["data", "tagData"] }, { kind: "component", type: XmlTagButtonComponent, selector: "croco-html-xml-tag-button", inputs: ["data", "tagData"] }, { kind: "component", type: XmlTagCustomWidgetComponent, selector: "croco-html-xml-tag-custom-widget", inputs: ["tagData"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagViewComponent, decorators: [{
             type: Component,
@@ -1465,7 +1564,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                         XmlTagDownloadFileButtonComponent,
                         ButtonEditorComponent,
                         XmlTagButtonComponent,
-                    ], template: "<div>\n  @for (item of data; track $index) {\n  <div class=\"row\">\n\n    @if (item.type === 'text') {\n    <div>\n      <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\n    </div>\n    }\n\n    @if (item.type === 'html-raw') {\n    <div>\n      <croco-html-raw-view [rawHtml]=\"item.data.innerHTML\">\n      </croco-html-raw-view>\n    </div>\n    }\n\n    @if (isHeaderTextTag(item)) {\n    <div>\n      <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\n    </div>\n    }\n\n    @if (item.type === 'file-image') {\n    <div>\n      <croco-html-file-image-tag-view [item]=\"item\"></croco-html-file-image-tag-view>\n    </div>\n    }\n\n    @if (item.type === 'table' && item.validationResult) {\n\n    @if (item.validationResult.isSucceeded){\n    <croco-html-xml-tag-html-view [html]=\"item.bootstrapHtml\">\n    </croco-html-xml-tag-html-view>\n    }\n    @else {\n    <croco-html-error-banner [message]=\"item.validationResult.message\">\n    </croco-html-error-banner>\n    }\n    }\n\n    @if (item.type === 'rich-text') {\n    <div>\n      <croco-html-xml-tag-text-view></croco-html-xml-tag-text-view>\n    </div>\n    }\n\n    @if (item.type === 'external-video') {\n    <div>\n      <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\n    </div>\n    }\n\n    @if (item.type === 'download-file-button') {\n    <div>\n      <croco-html-xml-tag-download-file-button [data]=\"item\"></croco-html-xml-tag-download-file-button>\n    </div>\n    }\n\n    @if (item.type === 'button') {\n    <div>\n      <croco-html-xml-tag-button [data]=\"item\"></croco-html-xml-tag-button>\n    </div>\n    }\n    @if (item.type === 'unsupported-tag') {\n    <div class=\"red\" style=\"margin-top: 10px;\">\n      <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\n      <span>\n        {{item.data.tagString}}\n      </span>\n    </div>\n    }\n  </div>\n  }\n</div>", styles: [".red{background-color:#c94444;color:#fff}\n"] }]
+                        XmlTagCustomWidgetComponent,
+                    ], template: "<div>\n  @for (item of data; track $index) {\n  <div class=\"row\">\n\n    @if (item.type === 'text') {\n    <div>\n      <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\n    </div>\n    }\n\n    @if (item.type === 'html-raw') {\n    <div>\n      <croco-html-raw-view [rawHtml]=\"item.data.innerHTML\">\n      </croco-html-raw-view>\n    </div>\n    }\n\n    @if (isHeaderTextTag(item)) {\n    <div>\n      <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\n    </div>\n    }\n\n    @if (item.type === 'file-image') {\n    <div>\n      <croco-html-file-image-tag-view [item]=\"item\"></croco-html-file-image-tag-view>\n    </div>\n    }\n\n    @if (item.type === 'custom-widget') {\n      <div>\n        <croco-html-xml-tag-custom-widget [tagData]=\"item.data\"></croco-html-xml-tag-custom-widget>\n      </div>\n    }\n\n    @if (item.type === 'table' && item.validationResult) {\n\n    @if (item.validationResult.isSucceeded){\n    <croco-html-xml-tag-html-view [html]=\"item.bootstrapHtml\">\n    </croco-html-xml-tag-html-view>\n    }\n    @else {\n    <croco-html-error-banner [message]=\"item.validationResult.message\">\n    </croco-html-error-banner>\n    }\n    }\n\n    @if (item.type === 'rich-text') {\n    <div>\n      <croco-html-xml-tag-text-view></croco-html-xml-tag-text-view>\n    </div>\n    }\n\n    @if (item.type === 'external-video') {\n    <div>\n      <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\n    </div>\n    }\n\n    @if (item.type === 'download-file-button') {\n    <div>\n      <croco-html-xml-tag-download-file-button [data]=\"item\"></croco-html-xml-tag-download-file-button>\n    </div>\n    }\n\n    @if (item.type === 'button') {\n    <div>\n      <croco-html-xml-tag-button [data]=\"item\"></croco-html-xml-tag-button>\n    </div>\n    }\n    @if (item.type === 'unsupported-tag') {\n    <div class=\"red\" style=\"margin-top: 10px;\">\n      <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\n      <span>\n        {{item.data.tagString}}\n      </span>\n    </div>\n    }\n  </div>\n  }\n</div>\n", styles: [".red{background-color:#c94444;color:#fff}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }] } });
@@ -1636,6 +1736,7 @@ class ImageEditorComponent {
         this.searchOrEdit = "search";
         this.requests = [];
         this.imageMaxHeight = null;
+        this.imageMaxWidth = null;
         this.isShowMediaRequest = false;
         this.unsubscribe = new Subject();
         this.onTagUpdated = new EventEmitter();
@@ -1659,7 +1760,9 @@ class ImageEditorComponent {
         this.screenWidthService.getScreenWidth()
             .pipe(takeUntil(this.unsubscribe))
             .subscribe(screenWidth => {
-            this.imageMaxHeight = ImageMethods.getMaxImageHeightByScreenSize(screenWidth, this.requests);
+            let imageRestrictions = ImageMethods.getImageRestrictionsByScreenSize(screenWidth, this.requests);
+            this.imageMaxHeight = imageRestrictions.maxHeight;
+            this.imageMaxWidth = imageRestrictions.maxWidth;
         });
     }
     requestChanged() {
@@ -1670,6 +1773,7 @@ class ImageEditorComponent {
             maxScreenWidth: 0,
             minScreenWidth: 0,
             maxImageHeight: 0,
+            maxImageWidth: 0
         });
     }
     deleteMediaRequest(index) {
@@ -1681,7 +1785,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%'}\"\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            </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            </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)]=\"tag.attributes['file-id']\"\n        (onFileIdChanged)=\"onFileIdChanged($event)\">\n      </croco-html-file-id-select>\n    </div>\n    <div [hidden]=\"searchOrEdit !== 'edit'\">\n      <div>\n        <mat-form-field class=\"w-100\">\n          <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            type=\"number\"\n            [(ngModel)]=\"tag.attributes['file-id']\"\n            (ngModelChange)=\"removeImageError()\">\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}\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$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: 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)]=\"tag.attributes['file-id']\"\n        (onFileIdChanged)=\"onFileIdChanged($event)\">\n      </croco-html-file-id-select>\n    </div>\n    <div [hidden]=\"searchOrEdit !== 'edit'\">\n      <div>\n        <mat-form-field class=\"w-100\">\n          <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            type=\"number\"\n            [(ngModel)]=\"tag.attributes['file-id']\"\n            (ngModelChange)=\"removeImageError()\">\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}\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$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: 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,
@@ -1702,7 +1806,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                         MatButton,
                         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%'}\"\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            </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            </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)]=\"tag.attributes['file-id']\"\n        (onFileIdChanged)=\"onFileIdChanged($event)\">\n      </croco-html-file-id-select>\n    </div>\n    <div [hidden]=\"searchOrEdit !== 'edit'\">\n      <div>\n        <mat-form-field class=\"w-100\">\n          <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            type=\"number\"\n            [(ngModel)]=\"tag.attributes['file-id']\"\n            (ngModelChange)=\"removeImageError()\">\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}\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)]=\"tag.attributes['file-id']\"\n        (onFileIdChanged)=\"onFileIdChanged($event)\">\n      </croco-html-file-id-select>\n    </div>\n    <div [hidden]=\"searchOrEdit !== 'edit'\">\n      <div>\n        <mat-form-field class=\"w-100\">\n          <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            type=\"number\"\n            [(ngModel)]=\"tag.attributes['file-id']\"\n            (ngModelChange)=\"removeImageError()\">\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}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [CrocoHtmlOptionsToken]
@@ -1727,6 +1831,7 @@ class DefaultTags {
         { tag: ExternalVideoTagDataConsts.TagName, displayValue: 'Внешнее видео' },
         { tag: DownloadButtonTagDataConsts.TagName, displayValue: 'Кнопка для скачивания' },
         { tag: ButtonTagDataConsts.TagName, displayValue: 'Кнопка' },
+        { tag: CustomWidgetTagDataConsts.TagName, displayValue: 'Кастомный виджет' },
         ...DefaultTags.textTags
     ]; }
     static { this.htmlRawTag = {
@@ -1796,6 +1901,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 type: Output
             }] } });
 
+class CustomWidgetEditorComponent {
+    constructor() {
+        this.onTagUpdated = new EventEmitter();
+        this.tagData = {
+            type: '',
+            dataId: '',
+            widgetId: ''
+        };
+    }
+    ngOnInit() {
+        this.tagData = CustomWidgetMethods.ExtractCustomWidgetTagData(this.tag.attributes);
+    }
+    dataChanged() {
+        this.tag.attributes = CustomWidgetMethods.ExtractCustomWidgetAttributes(this.tagData);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: CustomWidgetEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: CustomWidgetEditorComponent, isStandalone: true, selector: "croco-html-custom-widget-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "@if (tag.presentOrEdit) {\n  <div>\n    <div>\n      <b>type:</b> {{tagData.type}}\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <div>\n      <b>data-id:</b> {{tagData.dataId}}\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <div>\n      <b>widget-id:</b> {{tagData.widgetId}}\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <croco-html-xml-tag-custom-widget [tagData]=\"tagData\"></croco-html-xml-tag-custom-widget>\n  </div>\n} @else {\n  <div>\n    <mat-form-field class=\"w-100\">\n      <mat-label>\n        type\n      </mat-label>\n      <input matInput\n             placeholder=\"type\"\n             autocomplete=\"off\"\n             [(ngModel)]=\"tagData.type\"\n             (ngModelChange)=\"dataChanged()\">\n    </mat-form-field>\n\n    <mat-form-field class=\"w-100\">\n      <mat-label>\n        data-id\n      </mat-label>\n      <input matInput\n             placeholder=\"data-id\"\n             autocomplete=\"off\"\n             [(ngModel)]=\"tagData.dataId\"\n             (ngModelChange)=\"dataChanged()\">\n    </mat-form-field>\n\n    <mat-form-field class=\"w-100\">\n      <mat-label>\n        widget-id\n      </mat-label>\n      <input matInput\n             placeholder=\"widget-id\"\n             autocomplete=\"off\"\n             [(ngModel)]=\"tagData.widgetId\"\n             (ngModelChange)=\"dataChanged()\">\n    </mat-form-field>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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: MatLabel, selector: "mat-label" }, { kind: "component", type: XmlTagCustomWidgetComponent, selector: "croco-html-xml-tag-custom-widget", inputs: ["tagData"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: CustomWidgetEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'croco-html-custom-widget-editor', standalone: true, imports: [
+                        FormsModule,
+                        MatFormField,
+                        MatInput,
+                        MatLabel,
+                        XmlTagCustomWidgetComponent,
+                    ], template: "@if (tag.presentOrEdit) {\n  <div>\n    <div>\n      <b>type:</b> {{tagData.type}}\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <div>\n      <b>data-id:</b> {{tagData.dataId}}\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <div>\n      <b>widget-id:</b> {{tagData.widgetId}}\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <croco-html-xml-tag-custom-widget [tagData]=\"tagData\"></croco-html-xml-tag-custom-widget>\n  </div>\n} @else {\n  <div>\n    <mat-form-field class=\"w-100\">\n      <mat-label>\n        type\n      </mat-label>\n      <input matInput\n             placeholder=\"type\"\n             autocomplete=\"off\"\n             [(ngModel)]=\"tagData.type\"\n             (ngModelChange)=\"dataChanged()\">\n    </mat-form-field>\n\n    <mat-form-field class=\"w-100\">\n      <mat-label>\n        data-id\n      </mat-label>\n      <input matInput\n             placeholder=\"data-id\"\n             autocomplete=\"off\"\n             [(ngModel)]=\"tagData.dataId\"\n             (ngModelChange)=\"dataChanged()\">\n    </mat-form-field>\n\n    <mat-form-field class=\"w-100\">\n      <mat-label>\n        widget-id\n      </mat-label>\n      <input matInput\n             placeholder=\"widget-id\"\n             autocomplete=\"off\"\n             [(ngModel)]=\"tagData.widgetId\"\n             (ngModelChange)=\"dataChanged()\">\n    </mat-form-field>\n  </div>\n}\n" }]
+        }], propDecorators: { tag: [{
+                type: Input
+            }], onTagUpdated: [{
+                type: Output
+            }] } });
+
 class MainEditorBlockComponent {
     constructor() {
         this.textTags = TextTags.allTextTags;
@@ -1814,7 +1952,7 @@ class MainEditorBlockComponent {
     ngOnInit() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MainEditorBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: MainEditorBlockComponent, isStandalone: true, selector: "croco-html-main-editor-block", inputs: { tag: "tag" }, outputs: { onTagSaved: "onTagSaved", onTagRemoved: "onTagRemoved" }, ngImport: i0, template: "<div>\n  <div>\n    @if (textTags.includes(tag.tagDescription.tag)) {\n      <div>\n        <croco-html-text-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-text-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'file-image') {\n      <div>\n        <croco-html-image-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-image-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'external-video') {\n      <div>\n        <croco-html-external-video-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-external-video-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'download-file-button') {\n      <div>\n        <croco-html-download-file-button-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-download-file-button-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'button') {\n      <div>\n        <croco-html-button-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-button-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'html-raw') {\n      <div>\n        <croco-html-html-raw-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-html-raw-editor>\n      </div>\n    }\n\n  </div>\n\n  <div class=\"d-flex justify-content-between\">\n    <div class=\"d-flex justify-content-end align-self-center\">\n      <div>\n        @if (tag.presentOrEdit) {\n          <button (click)=\"tag.presentOrEdit = false\" mat-icon-button>\n            <mat-icon>edit</mat-icon>\n          </button>\n        }\n        @if (!tag.presentOrEdit) {\n          <button (click)=\"save()\" mat-icon-button>\n            <mat-icon>save</mat-icon>\n          </button>\n        }\n        <button (click)=\"deleteItem()\" mat-icon-button color=\"warn\">\n          <mat-icon>delete</mat-icon>\n        </button>\n      </div>\n    </div>\n\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: TextEditorComponent, selector: "croco-html-text-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: ImageEditorComponent, selector: "croco-html-image-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: DownloadFileButtonEditorComponent, selector: "croco-html-download-file-button-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: HtmlRawEditorComponent, selector: "croco-html-html-raw-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ExternalVideoEditorComponent, selector: "croco-html-external-video-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: ButtonEditorComponent, selector: "croco-html-button-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: MainEditorBlockComponent, isStandalone: true, selector: "croco-html-main-editor-block", inputs: { tag: "tag" }, outputs: { onTagSaved: "onTagSaved", onTagRemoved: "onTagRemoved" }, ngImport: i0, template: "<div>\n  <div>\n    @if (textTags.includes(tag.tagDescription.tag)) {\n      <div>\n        <croco-html-text-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-text-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'file-image') {\n      <div>\n        <croco-html-image-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-image-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'custom-widget') {\n      <div>\n        <croco-html-custom-widget-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-custom-widget-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'external-video') {\n      <div>\n        <croco-html-external-video-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-external-video-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'download-file-button') {\n      <div>\n        <croco-html-download-file-button-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-download-file-button-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'button') {\n      <div>\n        <croco-html-button-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-button-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'html-raw') {\n      <div>\n        <croco-html-html-raw-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-html-raw-editor>\n      </div>\n    }\n\n  </div>\n\n  <div class=\"d-flex justify-content-between\">\n    <div class=\"d-flex justify-content-end align-self-center\">\n      <div>\n        @if (tag.presentOrEdit) {\n          <button (click)=\"tag.presentOrEdit = false\" mat-icon-button>\n            <mat-icon>edit</mat-icon>\n          </button>\n        }\n        @if (!tag.presentOrEdit) {\n          <button (click)=\"save()\" mat-icon-button>\n            <mat-icon>save</mat-icon>\n          </button>\n        }\n        <button (click)=\"deleteItem()\" mat-icon-button color=\"warn\">\n          <mat-icon>delete</mat-icon>\n        </button>\n      </div>\n    </div>\n\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: TextEditorComponent, selector: "croco-html-text-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: ImageEditorComponent, selector: "croco-html-image-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: DownloadFileButtonEditorComponent, selector: "croco-html-download-file-button-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: HtmlRawEditorComponent, selector: "croco-html-html-raw-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ExternalVideoEditorComponent, selector: "croco-html-external-video-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: ButtonEditorComponent, selector: "croco-html-button-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: CustomWidgetEditorComponent, selector: "croco-html-custom-widget-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MainEditorBlockComponent, decorators: [{
             type: Component,
@@ -1826,8 +1964,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                         MatIconButton,
                         MatIcon,
                         ExternalVideoEditorComponent,
-                        ButtonEditorComponent
-                    ], template: "<div>\n  <div>\n    @if (textTags.includes(tag.tagDescription.tag)) {\n      <div>\n        <croco-html-text-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-text-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'file-image') {\n      <div>\n        <croco-html-image-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-image-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'external-video') {\n      <div>\n        <croco-html-external-video-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-external-video-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'download-file-button') {\n      <div>\n        <croco-html-download-file-button-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-download-file-button-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'button') {\n      <div>\n        <croco-html-button-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-button-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'html-raw') {\n      <div>\n        <croco-html-html-raw-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-html-raw-editor>\n      </div>\n    }\n\n  </div>\n\n  <div class=\"d-flex justify-content-between\">\n    <div class=\"d-flex justify-content-end align-self-center\">\n      <div>\n        @if (tag.presentOrEdit) {\n          <button (click)=\"tag.presentOrEdit = false\" mat-icon-button>\n            <mat-icon>edit</mat-icon>\n          </button>\n        }\n        @if (!tag.presentOrEdit) {\n          <button (click)=\"save()\" mat-icon-button>\n            <mat-icon>save</mat-icon>\n          </button>\n        }\n        <button (click)=\"deleteItem()\" mat-icon-button color=\"warn\">\n          <mat-icon>delete</mat-icon>\n        </button>\n      </div>\n    </div>\n\n  </div>\n</div>\n" }]
+                        ButtonEditorComponent,
+                        CustomWidgetEditorComponent
+                    ], template: "<div>\n  <div>\n    @if (textTags.includes(tag.tagDescription.tag)) {\n      <div>\n        <croco-html-text-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-text-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'file-image') {\n      <div>\n        <croco-html-image-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-image-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'custom-widget') {\n      <div>\n        <croco-html-custom-widget-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-custom-widget-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'external-video') {\n      <div>\n        <croco-html-external-video-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-external-video-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'download-file-button') {\n      <div>\n        <croco-html-download-file-button-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-download-file-button-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'button') {\n      <div>\n        <croco-html-button-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-button-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'html-raw') {\n      <div>\n        <croco-html-html-raw-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-html-raw-editor>\n      </div>\n    }\n\n  </div>\n\n  <div class=\"d-flex justify-content-between\">\n    <div class=\"d-flex justify-content-end align-self-center\">\n      <div>\n        @if (tag.presentOrEdit) {\n          <button (click)=\"tag.presentOrEdit = false\" mat-icon-button>\n            <mat-icon>edit</mat-icon>\n          </button>\n        }\n        @if (!tag.presentOrEdit) {\n          <button (click)=\"save()\" mat-icon-button>\n            <mat-icon>save</mat-icon>\n          </button>\n        }\n        <button (click)=\"deleteItem()\" mat-icon-button color=\"warn\">\n          <mat-icon>delete</mat-icon>\n        </button>\n      </div>\n    </div>\n\n  </div>\n</div>\n" }]
         }], propDecorators: { tag: [{
                 type: Input
             }], onTagSaved: [{
@@ -1904,6 +2043,11 @@ class VisualEditorComponent {
             attrs[ButtonTagDataConsts.TypeAttrName] = 'button';
             attrs[ButtonTagDataConsts.TextAttrName] = 'Кнопка';
         }
+        else if (tagDescription.tag == CustomWidgetTagDataConsts.TagName) {
+            attrs[CustomWidgetTagDataConsts.TypeAttrName] = 'example-type';
+            attrs[CustomWidgetTagDataConsts.DataIdAttrName] = 'example-data-id';
+            attrs[CustomWidgetTagDataConsts.WidgetIdAttrName] = 'example-widget-id';
+        }
         else {
             attrs[FileImageTagDataConsts.FileIdAttrName] = null;
         }
@@ -2195,6 +2339,7 @@ const EditorComponents = [
     VisualEditorComponent,
     AddFilesBtnComponent,
     HtmlRawEditorComponent,
+    CustomWidgetEditorComponent,
 ];
 const XmlComponents = [
     XmlTagTableViewComponent,
@@ -2207,6 +2352,7 @@ const XmlComponents = [
     XmlTagExternalVideoComponent,
     HtmlRawViewComponent,
     FileImageTagViewComponent,
+    XmlTagCustomWidgetComponent,
     HtmlViewComponent
 ];
 const CrocoPipes = [
@@ -2264,13 +2410,13 @@ class CrocoHtmlModule {
             VkVideoPlayerComponent,
             YoutubeVideoPlayerComponent,
             DownloadFileButtonEditorComponent,
-            XmlTagDownloadFileButtonComponent, UploadFilesBtnComponent, HtmlViewComponent, XmlTagTableViewComponent, XmlTagViewComponent, XmlTagRichTextViewComponent, XmlTagHtmlViewComponent, XmlTagTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHeaderInnerTextViewComponent, XmlTagExternalVideoComponent, HtmlRawViewComponent, FileImageTagViewComponent, HtmlViewComponent, MainEditorComponent, FileIdSelectComponent, TextEditorComponent, ImageEditorComponent, MainEditorBlockComponent, VisualEditorComponent, AddFilesBtnComponent, HtmlRawEditorComponent, RichTextToHtmlPipe, TagToSpanPipe, ToPreviewPipe, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe], exports: [UploadFilesBtnComponent, HtmlViewComponent, XmlTagTableViewComponent, XmlTagViewComponent, XmlTagRichTextViewComponent, XmlTagHtmlViewComponent, XmlTagTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHeaderInnerTextViewComponent, XmlTagExternalVideoComponent, HtmlRawViewComponent, FileImageTagViewComponent, HtmlViewComponent, MainEditorComponent, FileIdSelectComponent, TextEditorComponent, ImageEditorComponent, MainEditorBlockComponent, VisualEditorComponent, AddFilesBtnComponent, HtmlRawEditorComponent, RichTextToHtmlPipe, TagToSpanPipe, ToPreviewPipe, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe] }); }
+            XmlTagDownloadFileButtonComponent, UploadFilesBtnComponent, HtmlViewComponent, XmlTagTableViewComponent, XmlTagViewComponent, XmlTagRichTextViewComponent, XmlTagHtmlViewComponent, XmlTagTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHeaderInnerTextViewComponent, XmlTagExternalVideoComponent, HtmlRawViewComponent, FileImageTagViewComponent, XmlTagCustomWidgetComponent, HtmlViewComponent, MainEditorComponent, FileIdSelectComponent, TextEditorComponent, ImageEditorComponent, MainEditorBlockComponent, VisualEditorComponent, AddFilesBtnComponent, HtmlRawEditorComponent, CustomWidgetEditorComponent, RichTextToHtmlPipe, TagToSpanPipe, ToPreviewPipe, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe], exports: [UploadFilesBtnComponent, HtmlViewComponent, XmlTagTableViewComponent, XmlTagViewComponent, XmlTagRichTextViewComponent, XmlTagHtmlViewComponent, XmlTagTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHeaderInnerTextViewComponent, XmlTagExternalVideoComponent, HtmlRawViewComponent, FileImageTagViewComponent, XmlTagCustomWidgetComponent, HtmlViewComponent, MainEditorComponent, FileIdSelectComponent, TextEditorComponent, ImageEditorComponent, MainEditorBlockComponent, VisualEditorComponent, AddFilesBtnComponent, HtmlRawEditorComponent, CustomWidgetEditorComponent, RichTextToHtmlPipe, TagToSpanPipe, ToPreviewPipe, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: CrocoHtmlModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             NgSelectModule, MaterialModules, ErrorBannerComponent,
             DownloadFileButtonEditorComponent,
-            XmlTagDownloadFileButtonComponent, UploadFilesBtnComponent, HtmlViewComponent, XmlTagTableViewComponent, XmlTagViewComponent, HtmlViewComponent, MainEditorComponent, FileIdSelectComponent, TextEditorComponent, ImageEditorComponent, MainEditorBlockComponent, VisualEditorComponent, AddFilesBtnComponent, HtmlRawEditorComponent] }); }
+            XmlTagDownloadFileButtonComponent, UploadFilesBtnComponent, HtmlViewComponent, XmlTagTableViewComponent, XmlTagViewComponent, HtmlViewComponent, MainEditorComponent, FileIdSelectComponent, TextEditorComponent, ImageEditorComponent, MainEditorBlockComponent, VisualEditorComponent, AddFilesBtnComponent, HtmlRawEditorComponent, CustomWidgetEditorComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: CrocoHtmlModule, decorators: [{
             type: NgModule,
@@ -2302,5 +2448,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AddFilesBtnComponent, AngularMaterialTableMethods, BodyTagsExtensions, BootstrapTableMethods, CrocoHtmlModule, CrocoHtmlOptionsToken, ExternalVideoEditorComponent, ExternalVideoPlayers, ExternalVideoSupportedTypes, ExternalVideoTagDataConsts, FileIdSelectComponent, FileImageTagDataConsts, FileImageTagViewComponent, HtmlRawEditorComponent, HtmlRawViewComponent, HtmlViewComponent, HtmlViewController, ImageEditorComponent, ImageMethods, MainEditorBlockComponent, MainEditorComponent, RichTextToHtmlPipe, TableBuilder, TableMethods, TableTypes, TagToSpanPipe, TextEditorComponent, TextMethods, TextSimpleMethods, TextTag, TextTagDataConsts, TextTags, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe, ToPreviewPipe, UploadFilesBtnComponent, VideoMethods, VisualEditorComponent, XmlExtensions, XmlTagExternalVideoComponent, XmlTagHeaderInnerTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHtmlViewComponent, XmlTagRichTextViewComponent, XmlTagTableViewComponent, XmlTagTextViewComponent, XmlTagViewComponent, defaultLinkForDownload, defaultLinkVk, defaultLinkYouTube };
+export { AddFilesBtnComponent, AngularMaterialTableMethods, BodyTagsExtensions, BootstrapTableMethods, CrocoHtmlModule, CrocoHtmlOptionsToken, CustomWidgetEditorComponent, CustomWidgetMethods, CustomWidgetTagDataConsts, ExternalVideoEditorComponent, ExternalVideoPlayers, ExternalVideoSupportedTypes, ExternalVideoTagDataConsts, FileIdSelectComponent, FileImageTagDataConsts, FileImageTagViewComponent, HtmlRawEditorComponent, HtmlRawViewComponent, HtmlViewComponent, HtmlViewController, ImageEditorComponent, ImageMethods, MainEditorBlockComponent, MainEditorComponent, RichTextToHtmlPipe, TableBuilder, TableMethods, TableTypes, TagToSpanPipe, TextEditorComponent, TextMethods, TextSimpleMethods, TextTag, TextTagDataConsts, TextTags, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe, ToPreviewPipe, UploadFilesBtnComponent, VideoMethods, VisualEditorComponent, XmlExtensions, XmlTagCustomWidgetComponent, XmlTagExternalVideoComponent, XmlTagHeaderInnerTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHtmlViewComponent, XmlTagRichTextViewComponent, XmlTagTableViewComponent, XmlTagTextViewComponent, XmlTagViewComponent, defaultLinkForDownload, defaultLinkVk, defaultLinkYouTube };
 //# sourceMappingURL=croco-html.mjs.map