croco-html 4.2.1 → 4.2.3

package/fesm2022/croco-html.mjs

@@ -87,14 +87,14 @@ class AngularMaterialTableMethods {
             data: data,
         };
     }
-    static checkHeaders(tableData) {
-        if (tableData.header === null) {
+    static checkHeaders(header) {
+        if (header === null) {
             return {
                 isSucceeded: false,
                 message: "Необходимо указать заголовок таблицы"
             };
         }
-        let columns = tableData.header.columns;
+        let columns = header.columns;
         var uniqueDislayedColumns = columns.filter((v, i, a) => a.indexOf(v) === i);
         if (uniqueDislayedColumns.length !== columns.length) {
             return {
@@ -107,15 +107,14 @@ class AngularMaterialTableMethods {
             message: "Ok"
         };
     }
-    static checkAngularMaterialTableData(tableData, checkHeaders = true) {
+    static checkAngularMaterialTableData(header, rows, checkHeaders = true) {
         if (checkHeaders) {
-            var checkHeadersResult = this.checkHeaders(tableData);
+            var checkHeadersResult = this.checkHeaders(header);
             if (!checkHeadersResult.isSucceeded) {
                 return checkHeadersResult;
             }
         }
-        let rows = tableData.rows;
-        let columns = tableData.header.columns;
+        let columns = header.columns;
         for (let i = 0; i < rows.length; i++) {
             const row = rows[i];
             if (row.columns.length !== columns.length) {
@@ -134,6 +133,42 @@ class AngularMaterialTableMethods {
     }
 }
 
+class HtmlExtractionMethods {
+    static transformHtmlElementToBlocks(element, options) {
+        const data = [];
+        for (let i = 0; i < element.children.length; i++) {
+            const elem = element.children.item(i);
+            const loweredTagName = elem.tagName.toLowerCase();
+            if (BodyTagsExtensions.tagServices.hasOwnProperty(loweredTagName)) {
+                const tagService = BodyTagsExtensions.tagServices[loweredTagName];
+                const resultBlock = tagService.extractBlockFromHtmlElement(elem, options);
+                data.push(resultBlock);
+                continue;
+            }
+            else {
+                data.push({
+                    tagName: "unsupported-tag",
+                    data: {
+                        tagString: elem.outerHTML
+                    }
+                });
+            }
+        }
+        return data;
+    }
+    static transformHtmlStringToBlocks(value, options) {
+        if (value === undefined || value === null) {
+            return [];
+        }
+        value = value
+            .replace('\n', '')
+            .replace('\t', '');
+        var div = document.createElement("div");
+        div.innerHTML = value;
+        return this.transformHtmlElementToBlocks(div, options);
+    }
+}
+
 class FileImageTagDataConsts {
     static { this.TagName = "file-image"; }
     static { this.FileIdAttrName = "file-id"; }
@@ -405,7 +440,6 @@ class ExternalVideoTagService {
 class HtmlRawTagDataConsts {
     static { this.TagName = "html-raw"; }
 }
-
 class HtmlRawTagService {
     constructor() {
         this.tagName = HtmlRawTagDataConsts.TagName;
@@ -627,6 +661,62 @@ class CustomWidgetTagService {
     }
 }
 
+class TextTags {
+    static { this.text = "text"; }
+    static { this.h1 = "h1"; }
+    static { this.h2 = "h2"; }
+    static { this.h3 = "h3"; }
+    static { this.h4 = "h4"; }
+    static { this.h5 = "h5"; }
+    static { this.h6 = "h6"; }
+    static { this.headerTextTags = [TextTags.h1, TextTags.h2, TextTags.h3, TextTags.h4, TextTags.h5, TextTags.h6]; }
+    static { this.allTextTags = [TextTags.text, ...TextTags.headerTextTags]; }
+}
+
+class ExternalVideoTagDataConsts {
+    static { this.TagName = "external-video"; }
+    static { this.VideoTypeAttrName = "type"; }
+    static { this.LinkAttrName = "link"; }
+    static { this.UseResponsiveWrapperAttrName = "use-responsive-wrapper"; }
+    static { this.IframeAttrName = "iframe"; }
+}
+class ExternalVideoSupportedTypes {
+    static { this.Youtube = "youtube"; }
+    static { this.VkVideo = "vk-video"; }
+    static { this.Code = "code"; }
+}
+const ExternalVideoPlayers = [
+    {
+        type: ExternalVideoSupportedTypes.Code,
+        displayValue: 'Встраиваемое Видео',
+    },
+    {
+        type: ExternalVideoSupportedTypes.Youtube,
+        displayValue: 'Youtube',
+    },
+    {
+        type: ExternalVideoSupportedTypes.VkVideo,
+        displayValue: 'Vk Video',
+    }
+];
+
+class Tags {
+    static { this.Text = TextTags.text; }
+    static { this.H1 = TextTags.h1; }
+    static { this.H2 = TextTags.h2; }
+    static { this.H3 = TextTags.h3; }
+    static { this.H4 = TextTags.h4; }
+    static { this.H5 = TextTags.h5; }
+    static { this.H6 = TextTags.h6; }
+    static { this.HtmlRaw = HtmlRawTagDataConsts.TagName; }
+    static { this.FileImage = FileImageTagDataConsts.TagName; }
+    static { this.Table = 'table'; }
+    static { this.RichText = 'rich-text'; }
+    static { this.ExternalVideo = ExternalVideoTagDataConsts.TagName; }
+    static { this.UnsupportedTag = 'unsupported-tag'; }
+    static { this.CustomWidget = CustomWidgetTagDataConsts.TagName; }
+}
+
 const TextTag = "text";
 class TextSimpleMethods {
     static { this.supportedTags = ["sup", "sub", "strong", "b", "i", "u"]; }
@@ -705,10 +795,10 @@ class TextSimpleMethods {
 }
 
 class BootstrapTableMethods {
-    static BuildTable(data) {
+    static BuildTable(header, rows) {
         let result = `<table class="table table-bordered">`;
-        result += this.BuildHeader(data.header);
-        result += this.BuildBody(data.rows);
+        result += this.BuildHeader(header);
+        result += this.BuildBody(rows);
         result += "</table>";
         return result;
     }
@@ -776,32 +866,19 @@ class TableTypes {
 }
 class TableMethods {
     static getTableFromHtmlTag(tableTag, options) {
+        const tableHeader = TableMethods.getHeader(tableTag);
+        const tableRows = TableMethods.getTableRows(tableTag, options);
         let tableData = {
-            header: TableMethods.getHeader(tableTag),
-            rows: TableMethods.getTableRows(tableTag, options)
-        };
-        var result = {
-            type: TableTypes.Table,
-            data: tableData,
-            validationResult: this.checkTable(tableData),
-            bootstrapHtml: ""
+            header: tableHeader,
+            rows: tableRows,
+            bootstrapHtml: BootstrapTableMethods.BuildTable(tableHeader, tableRows),
+            html: tableTag.outerHTML,
+            angularMaterialTableDataCheck: AngularMaterialTableMethods.checkAngularMaterialTableData(tableHeader, tableRows)
         };
-        if (!result.validationResult) {
-            return result;
-        }
-        result.bootstrapHtml = BootstrapTableMethods.BuildTable(result.data);
-        var angularMaterialTableDataCheck = AngularMaterialTableMethods.checkAngularMaterialTableData(tableData);
-        if (!angularMaterialTableDataCheck.isSucceeded) {
-            return {
-                ...result,
-                angularMaterialTableDataCheck
-            };
-        }
         return {
-            ...result,
-            angularMaterialTableDataCheck,
-            html: tableTag.outerHTML,
-            angularMaterialTableData: AngularMaterialTableMethods.getAngularMaterialTableData(tableData.header.columns, tableData.rows),
+            tagName: TableTypes.Table,
+            data: tableData,
+            validationResult: this.checkTable(tableData)
         };
     }
     static checkTable(tableData) {
@@ -873,105 +950,42 @@ class TableMethods {
     }
 }
 
-class HtmlExtractionMethods {
-    // TODO удалить в пользу BodyTagsExtensions
-    static { this.Extractors = {
-        [TableTypes.Table]: (elem, options) => TableMethods.getTableFromHtmlTag(elem, options),
-    }; }
-    static transformHtmlElementToBlocks(element, options) {
-        var data = [];
-        for (let i = 0; i < element.children.length; i++) {
-            var elem = element.children.item(i);
-            var loweredTagName = elem.tagName.toLowerCase();
-            if (BodyTagsExtensions.tagServices.hasOwnProperty(loweredTagName)) {
-                var tagService = BodyTagsExtensions.tagServices[loweredTagName];
-                var resultBlock = tagService.extractBlockFromHtmlElement(elem, options);
-                data.push(resultBlock);
-                continue;
-            }
-            if (!HtmlExtractionMethods.Extractors.hasOwnProperty(loweredTagName)) {
-                data.push({
-                    tagName: "unsupported-tag",
-                    data: {
-                        tagString: elem.outerHTML
-                    }
-                });
-            }
-            else {
-                var extractor = HtmlExtractionMethods.Extractors[loweredTagName];
-                var result = extractor(elem, options);
-                data.push(result);
-            }
-        }
-        return data;
+class TableTagService {
+    constructor() {
+        this.tagName = TableTypes.Table;
+        this.shortDescription = "Таблица";
     }
-    static transformHtmlStringToBlocks(value, options) {
-        if (value === undefined || value === null) {
-            return [];
-        }
-        value = value
-            .replace('\n', '')
-            .replace('\t', '');
-        var div = document.createElement("div");
-        div.innerHTML = value;
-        return this.transformHtmlElementToBlocks(div, options);
+    bodyTagToHtmlStringConverter(bodyTag) {
+        return `<${this.tagName}>${bodyTag.innerHtml}</${this.tagName}>`;
     }
-}
-
-class TextTags {
-    static { this.text = "text"; }
-    static { this.h1 = "h1"; }
-    static { this.h2 = "h2"; }
-    static { this.h3 = "h3"; }
-    static { this.h4 = "h4"; }
-    static { this.h5 = "h5"; }
-    static { this.h6 = "h6"; }
-    static { this.headerTextTags = [TextTags.h1, TextTags.h2, TextTags.h3, TextTags.h4, TextTags.h5, TextTags.h6]; }
-    static { this.allTextTags = [TextTags.text, ...TextTags.headerTextTags]; }
-}
-
-class ExternalVideoTagDataConsts {
-    static { this.TagName = "external-video"; }
-    static { this.VideoTypeAttrName = "type"; }
-    static { this.LinkAttrName = "link"; }
-    static { this.UseResponsiveWrapperAttrName = "use-responsive-wrapper"; }
-    static { this.IframeAttrName = "iframe"; }
-}
-class ExternalVideoSupportedTypes {
-    static { this.Youtube = "youtube"; }
-    static { this.VkVideo = "vk-video"; }
-    static { this.Code = "code"; }
-}
-const ExternalVideoPlayers = [
-    {
-        type: ExternalVideoSupportedTypes.Code,
-        displayValue: 'Встраиваемое Видео',
-    },
-    {
-        type: ExternalVideoSupportedTypes.Youtube,
-        displayValue: 'Youtube',
-    },
-    {
-        type: ExternalVideoSupportedTypes.VkVideo,
-        displayValue: 'Vk Video',
+    extractBlockFromHtmlElement(elem, options) {
+        return TableMethods.getTableFromHtmlTag(elem, options);
+    }
+    toBodyTag(data) {
+        let tableData = data.data;
+        return {
+            presentOrEdit: true,
+            tagDescription: {
+                tag: data.tagName,
+                displayValue: this.shortDescription,
+                isCustom: false
+            },
+            attributes: tableData,
+            innerHtml: null
+        };
+    }
+    getDefaultValue(props) {
+        return {
+            tagDescription: {
+                tag: this.tagName,
+                displayValue: this.shortDescription,
+                isCustom: false
+            },
+            attributes: {},
+            presentOrEdit: false,
+            innerHtml: props.htmlRaw,
+        };
     }
-];
-
-class Tags {
-    static { this.Text = TextTags.text; }
-    static { this.H1 = TextTags.h1; }
-    static { this.H2 = TextTags.h2; }
-    static { this.H3 = TextTags.h3; }
-    static { this.H4 = TextTags.h4; }
-    static { this.H5 = TextTags.h5; }
-    static { this.H6 = TextTags.h6; }
-    static { this.HtmlRaw = HtmlRawTagDataConsts.TagName; }
-    static { this.FileImage = FileImageTagDataConsts.TagName; }
-    static { this.Table = 'table'; }
-    static { this.RichText = 'rich-text'; }
-    static { this.ExternalVideo = ExternalVideoTagDataConsts.TagName; }
-    static { this.UnsupportedTag = 'unsupported-tag'; }
-    static { this.CustomWidget = CustomWidgetTagDataConsts.TagName; }
 }
 
 class BodyTagsExtensions {
@@ -987,7 +1001,8 @@ class BodyTagsExtensions {
         [ExternalVideoTagDataConsts.TagName]: new ExternalVideoTagService(),
         [HtmlRawTagDataConsts.TagName]: new HtmlRawTagService(),
         [DownloadButtonTagDataConsts.TagName]: new DownloadButtonTagService(),
-        [ButtonTagDataConsts.TagName]: new ButtonTagService()
+        [ButtonTagDataConsts.TagName]: new ButtonTagService(),
+        [TableTypes.Table]: new TableTagService()
     }; }
     static convertToHtmlString(bodyTag) {
         const tagName = bodyTag.tagDescription.tag;
@@ -1745,7 +1760,7 @@ class XmlTagViewComponent {
         return this._options.definedCustomTags.includes(item.tagName);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: XmlTagViewComponent, deps: [{ token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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.tagName === '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.tagName === 'html-raw') {\n    <div>\n      <croco-html-raw-view [rawHtml]=\"item.data.innerHTML\"></croco-html-raw-view>\n    </div>\n    }\n\n    @if (isHeaderTextTag(item)) {\n    <div>\n      <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\n    </div>\n    }\n\n    @if (item.tagName === '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.tagName === '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.tagName === '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.tagName === '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.tagName === '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.tagName === 'button') {\n    <div>\n      <croco-html-xml-tag-button [data]=\"item\"></croco-html-xml-tag-button>\n    </div>\n    }\n\n    @if (item.tagName === '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\n    @if (isDefinedCustomTag(item)) {\n      <div>\n        <croco-html-defined-custom-tag-view [data]=\"item\"></croco-html-defined-custom-tag-view>\n      </div>\n    }\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"] }, { kind: "component", type: XmlTagCustomWidgetComponent, selector: "croco-html-xml-tag-custom-widget", inputs: ["tagData"] }, { kind: "component", type: DefinedCustomTagViewComponent, selector: "croco-html-defined-custom-tag-view", inputs: ["data"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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.tagName === '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.tagName === 'html-raw') {\n    <div>\n      <croco-html-raw-view [rawHtml]=\"item.data.innerHTML\"></croco-html-raw-view>\n    </div>\n    }\n\n    @if (isHeaderTextTag(item)) {\n    <div>\n      <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\n    </div>\n    }\n\n    @if (item.tagName === '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.tagName === '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.tagName === 'table' && item.validationResult) {\n\n    @if (item.validationResult.isSucceeded){\n    <croco-html-xml-tag-html-view [html]=\"item.data.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.tagName === '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.tagName === '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.tagName === 'button') {\n    <div>\n      <croco-html-xml-tag-button [data]=\"item\"></croco-html-xml-tag-button>\n    </div>\n    }\n\n    @if (item.tagName === '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\n    @if (isDefinedCustomTag(item)) {\n    <div>\n      <croco-html-defined-custom-tag-view [data]=\"item\"></croco-html-defined-custom-tag-view>\n    </div>\n    }\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"] }, { kind: "component", type: XmlTagCustomWidgetComponent, selector: "croco-html-xml-tag-custom-widget", inputs: ["tagData"] }, { kind: "component", type: DefinedCustomTagViewComponent, selector: "croco-html-defined-custom-tag-view", inputs: ["data"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: XmlTagViewComponent, decorators: [{
             type: Component,
@@ -1761,7 +1776,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         XmlTagButtonComponent,
                         XmlTagCustomWidgetComponent,
                         DefinedCustomTagViewComponent
-                    ], template: "<div>\n  @for (item of data; track $index) {\n  <div class=\"row\">\n\n    @if (item.tagName === '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.tagName === 'html-raw') {\n    <div>\n      <croco-html-raw-view [rawHtml]=\"item.data.innerHTML\"></croco-html-raw-view>\n    </div>\n    }\n\n    @if (isHeaderTextTag(item)) {\n    <div>\n      <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\n    </div>\n    }\n\n    @if (item.tagName === '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.tagName === '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.tagName === '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.tagName === '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.tagName === '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.tagName === 'button') {\n    <div>\n      <croco-html-xml-tag-button [data]=\"item\"></croco-html-xml-tag-button>\n    </div>\n    }\n\n    @if (item.tagName === '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\n    @if (isDefinedCustomTag(item)) {\n      <div>\n        <croco-html-defined-custom-tag-view [data]=\"item\"></croco-html-defined-custom-tag-view>\n      </div>\n    }\n\n  </div>\n  }\n</div>", styles: [".red{background-color:#c94444;color:#fff}\n"] }]
+                    ], template: "<div>\n  @for (item of data; track $index) {\n  <div class=\"row\">\n\n    @if (item.tagName === '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.tagName === 'html-raw') {\n    <div>\n      <croco-html-raw-view [rawHtml]=\"item.data.innerHTML\"></croco-html-raw-view>\n    </div>\n    }\n\n    @if (isHeaderTextTag(item)) {\n    <div>\n      <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\n    </div>\n    }\n\n    @if (item.tagName === '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.tagName === '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.tagName === 'table' && item.validationResult) {\n\n    @if (item.validationResult.isSucceeded){\n    <croco-html-xml-tag-html-view [html]=\"item.data.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.tagName === '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.tagName === '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.tagName === 'button') {\n    <div>\n      <croco-html-xml-tag-button [data]=\"item\"></croco-html-xml-tag-button>\n    </div>\n    }\n\n    @if (item.tagName === '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\n    @if (isDefinedCustomTag(item)) {\n    <div>\n      <croco-html-defined-custom-tag-view [data]=\"item\"></croco-html-defined-custom-tag-view>\n    </div>\n    }\n\n  </div>\n  }\n</div>", styles: [".red{background-color:#c94444;color:#fff}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [CrocoHtmlOptionsToken]