croco-html 2.30.0 → 2.32.0

package/fesm2022/croco-html.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Inject, EventEmitter, Component, ViewChild, Input, Output, ChangeDetectionStrategy, Pipe, ViewEncapsulation, NgModule } from '@angular/core';
+import { Injectable, Inject, EventEmitter, Component, ViewChild, Input, Output, ChangeDetectionStrategy, Pipe, ViewContainerRef, ViewEncapsulation, NgModule } from '@angular/core';
 import * as i2 from '@angular/material/button';
 import { MatButton, MatButtonModule, MatIconButton } from '@angular/material/button';
 import * as i1 from '@angular/common/http';
@@ -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';
@@ -595,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);
@@ -621,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 = [];
@@ -676,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 {
@@ -693,7 +728,8 @@ class BodyTagsExtensions {
             [DownloadButtonTagDataConsts.TagName]: "Кнопка",
             [HtmlRawTagDataConsts.TagName]: "Html разметка",
             [DownloadButtonTagDataConsts.TagName]: "Кнопка для скачивания",
-            [ButtonTagDataConsts.TagName]: "Кнопка"
+            [ButtonTagDataConsts.TagName]: "Кнопка",
+            [CustomWidgetTagDataConsts.TagName]: "Кастомный виджет"
         };
         return descriptions[tagName];
     }
@@ -714,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 = "";
@@ -809,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,
@@ -1468,6 +1519,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 type: Output
             }] } });
 
+class XmlTagCustomWidgetComponent {
+    set tagData(value) {
+        if (value) {
+            this._tagData = value;
+            this.tooltipData = `data-id:${value.dataId}; widget-id: ${value.widgetId}`;
+            if (this.dynamicContainerRef?.instance) {
+                this.dynamicContainerRef.instance.tagData = value;
+            }
+        }
+    }
+    ;
+    get tagData() {
+        return this._tagData;
+    }
+    constructor(_options) {
+        this._options = _options;
+        this.tooltipData = "";
+        this.useDynamicComponent = false;
+    }
+    ngOnInit() {
+        if (this._options.customWidgetRendererComponent) {
+            this.useDynamicComponent = true;
+            this.viewContainerRef.remove();
+            this.dynamicContainerRef = this.viewContainerRef.createComponent(this._options.customWidgetRendererComponent);
+            this.dynamicContainerRef.instance.tagData = this.tagData;
+        }
+    }
+    ngOnDestroy() {
+        this.dynamicContainerRef.destroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagCustomWidgetComponent, deps: [{ token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: XmlTagCustomWidgetComponent, isStandalone: true, selector: "croco-html-xml-tag-custom-widget", inputs: { tagData: "tagData" }, viewQueries: [{ propertyName: "viewContainerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #container>\n  @if (!useDynamicComponent) {\n    <div [matTooltip]=\"tooltipData\">\n       \u041A\u0430\u0441\u0442\u043E\u043C\u043D\u044B\u0439 \u0432\u0438\u0434\u0436\u0435\u0442. \u0442\u0438\u043F \u0432\u0438\u0434\u0436\u0435\u0442\u0430: {{ tagData?.type }}\n    </div>\n  }\n</ng-container>\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: "<ng-container #container>\n  @if (!useDynamicComponent) {\n    <div [matTooltip]=\"tooltipData\">\n       \u041A\u0430\u0441\u0442\u043E\u043C\u043D\u044B\u0439 \u0432\u0438\u0434\u0436\u0435\u0442. \u0442\u0438\u043F \u0432\u0438\u0434\u0436\u0435\u0442\u0430: {{ tagData?.type }}\n    </div>\n  }\n</ng-container>\n\n", styles: [":host div{background-color:#a3ded5;padding:5px 10px;display:inline-block;border-radius:10px}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [CrocoHtmlOptionsToken]
+                }] }], propDecorators: { viewContainerRef: [{
+                type: ViewChild,
+                args: ['container', { read: ViewContainerRef, static: true }]
+            }], tagData: [{
+                type: Input
+            }] } });
+
 class XmlTagViewComponent {
     constructor() {
         this.data = [];
@@ -1476,7 +1573,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,
@@ -1491,7 +1588,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
             }] } });
@@ -1757,6 +1855,7 @@ class DefaultTags {
         { tag: ExternalVideoTagDataConsts.TagName, displayValue: 'Внешнее видео' },
         { tag: DownloadButtonTagDataConsts.TagName, displayValue: 'Кнопка для скачивания' },
         { tag: ButtonTagDataConsts.TagName, displayValue: 'Кнопка' },
+        { tag: CustomWidgetTagDataConsts.TagName, displayValue: 'Кастомный виджет' },
         ...DefaultTags.textTags
     ]; }
     static { this.htmlRawTag = {
@@ -1826,6 +1925,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;
@@ -1844,7 +1976,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,
@@ -1856,8 +1988,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: [{
@@ -1934,6 +2067,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;
         }
@@ -2225,6 +2363,7 @@ const EditorComponents = [
     VisualEditorComponent,
     AddFilesBtnComponent,
     HtmlRawEditorComponent,
+    CustomWidgetEditorComponent,
 ];
 const XmlComponents = [
     XmlTagTableViewComponent,
@@ -2237,6 +2376,7 @@ const XmlComponents = [
     XmlTagExternalVideoComponent,
     HtmlRawViewComponent,
     FileImageTagViewComponent,
+    XmlTagCustomWidgetComponent,
     HtmlViewComponent
 ];
 const CrocoPipes = [
@@ -2294,13 +2434,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,
@@ -2332,5 +2472,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