croco-html 20.4.0 → 20.4.2

package/fesm2022/croco-html.mjs

@@ -692,7 +692,10 @@ class TagBuildExtensions {
         const attrValStrs = [];
         Object.keys(attrs).forEach(attributeName => {
             const attrDescription = attrs[attributeName];
-            const attrVal = bodyTag.attributes[attributeName] ?? attrDescription.defaultValue;
+            let attrVal = bodyTag.attributes[attributeName];
+            if (attrVal === undefined) {
+                attrVal = attrDescription.defaultValue;
+            }
             const attrValStr = (attrVal === undefined || attrVal === null)
                 ? null
                 : `${attributeName}="${attrVal}"`;
@@ -2868,6 +2871,29 @@ class HtmlPageDataController {
     }
 }
 
+class NullVisualEditorLogger {
+    onAdd(_) {
+    }
+    onChange(_, _2) {
+    }
+    onRemove(_) {
+    }
+}
+
+class ConsoleVisualEditorLogger {
+    onAdd(tags) {
+        const tagCopy = JSON.parse(JSON.stringify(tags));
+        console.log("onAdd", tagCopy);
+    }
+    onChange(tag, index) {
+        const tagCopy = JSON.parse(JSON.stringify(tag));
+        console.log("onChange", tagCopy, index);
+    }
+    onRemove(index) {
+        console.log("onRemove", index);
+    }
+}
+
 class XmlTagViewComponent {
     constructor(_options) {
         this._options = _options;
@@ -3571,6 +3597,7 @@ class VisualEditorComponent {
         this.alignmentOptions = AlignmentsData;
         this.isTagAdditionStarted = false;
         this.showMarkUp = true;
+        this.logger = new NullVisualEditorLogger();
         this.tags = [];
         this.videoPlayers = ExternalVideoPlayers;
         this.selectedValue = null;
@@ -3602,12 +3629,20 @@ class VisualEditorComponent {
         this.recalculateHtml();
     }
     addTag(tag) {
-        this.bodyTags.push(tag);
+        this.addTags([tag]);
+    }
+    addTags(tags) {
+        for (let index = 0; index < tags.length; index++) {
+            const tag = tags[index];
+            this.bodyTags.push(tag);
+        }
         this.recalculateHtml();
+        this.logger.onAdd(tags);
     }
     onTagChangedHandler(data, index) {
         this.bodyTags[index] = data;
         this.recalculateHtml();
+        this.logger.onChange(data, index);
     }
     onTagRemovedHandler(index) {
         this.bodyTags.splice(index, 1);
@@ -3679,8 +3714,7 @@ class VisualEditorComponent {
                 htmlRaw: '',
                 selectedVideoPlayer: null
             });
-            this.bodyTags.push(tag);
-            this.recalculateHtml();
+            this.addTag(tag);
             this.resetTagForm();
         }
     }
@@ -3692,6 +3726,7 @@ class VisualEditorComponent {
     onImageFilesUploaded(fileIds) {
         if (fileIds && fileIds.length > 0) {
             const fileIdsString = fileIds.map(id => typeof id === 'number' ? id.toString() : id);
+            const tags = [];
             fileIdsString.forEach(fileId => {
                 const tag = {
                     tagDescription: {
@@ -3705,9 +3740,9 @@ class VisualEditorComponent {
                     },
                     innerHtml: ""
                 };
-                this.bodyTags.push(tag);
+                tags.push(tag);
             });
-            this.recalculateHtml();
+            this.addTags(tags);
             this.resetTagForm();
         }
     }
@@ -3717,10 +3752,11 @@ class VisualEditorComponent {
         }
         let lines = this.text.split('\n');
         let tagDescription = this.textTagOptions?.find(x => x.tag === this.textTag);
+        const tags = [];
         for (let i = 0; i < lines.length; i++) {
             const line = lines[i];
             if (line.length > 0) {
-                this.bodyTags.push({
+                tags.push({
                     tagDescription,
                     innerHtml: line,
                     attributes: {
@@ -3729,18 +3765,17 @@ class VisualEditorComponent {
                 });
             }
         }
-        this.recalculateHtml();
+        this.addTags(tags);
     }
     addExternalVideoTag() {
         const tagName = ExternalVideoTagDataConsts.TagName;
         if (BodyTagsExtensions.hasTagService(tagName, this._options)) {
             const tagService = BodyTagsExtensions.getTagService(tagName, this._options);
-            let tag = tagService.getDefaultValue({
+            const tag = tagService.getDefaultValue({
                 htmlRaw: this.htmlRaw,
                 selectedVideoPlayer: this.selectedVideoPlayer
             });
-            this.bodyTags.push(tag);
-            this.recalculateHtml();
+            this.addTag(tag);
         }
     }
     addHtmlRawTag() {
@@ -3751,8 +3786,7 @@ class VisualEditorComponent {
                 htmlRaw: this.htmlRaw,
                 selectedVideoPlayer: null
             });
-            this.bodyTags.push(tag);
-            this.recalculateHtml();
+            this.addTag(tag);
         }
     }
     resetTagForm() {
@@ -3769,19 +3803,20 @@ class VisualEditorComponent {
             return;
         }
         const tagName = this.selectedValue;
+        const tags = [];
         if (BodyTagsExtensions.hasTagService(tagName, this._options)) {
             const tagService = BodyTagsExtensions.getTagService(tagName, this._options);
             let tag = tagService.getDefaultValue({
                 htmlRaw: '',
                 selectedVideoPlayer: null
             });
-            this.bodyTags.push(tag);
-            this.recalculateHtml();
+            tags.push(tag);
             this.resetTagForm();
         }
         else {
             alert(`Сервис для тега ${tagName} не зарегистрирован.`);
         }
+        this.addTags(tags);
     }
     isDefinedCustomWidget(tagName) {
         if (this._options.definedCustomTags.hasOwnProperty(tagName)) {
@@ -3805,7 +3840,7 @@ class VisualEditorComponent {
         return `align-${type}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: VisualEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: VisualEditorComponent, isStandalone: true, selector: "croco-visual-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged", rendered: "rendered" }, viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }, { propertyName: "imageUploadBtn", first: true, predicate: ["imageUploadBtn"], descendants: true }], ngImport: i0, template: "@if (isLoading) {\n  <div>\n    <div>\n      <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\n      <div style=\"text-align: center;\">{{loadingText}}</div>\n    </div>\n    <div style=\"height: 10px;\"></div>\n  </div>\n}\n<div [hidden]=\"isLoading\">\n  <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    @for (tag of bodyTags; track tag; let i = $index) {\n      <div cdkDrag>\n        <mat-card style=\"margin: 2px;\" class=\"mat-card special\">\n          <mat-card-content>\n            <div class=\"d-flex justify-content-between\">\n              <div class=\"example-handle\" cdkDragHandle>\n                <svg width=\"24\" height=\"24\" class=\"move-icon\">\n                  <use [attr.xlink:href]=\"'move-icon' | spriteIconPath\"></use>\n                </svg>\n              </div>\n              <div>\n                <div class=\"badge\" [matTooltip]=\"tag.tagDescription.displayValue\">\n                  <span class=\"text-align-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: tag.tagDescription.tag}\">\n                  </ng-container>\n                  </span>\n                </div>\n              </div>\n            </div>\n            <div style=\"height: 15px;\"></div>\n            <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagChangedHandler($event, i)\"\n              (onTagRemoved)=\"onTagRemovedHandler(i)\">\n            </croco-html-main-editor-block>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n  </div>\n</div>\n<div style=\"height: 10px;\"></div>\n<div [hidden]=\"isLoading\">\n  @if (!isTagAdditionStarted) {\n    <div class=\"col-12\">\n      <div class=\"tag-item add-tag-button\" (click)=\"isTagAdditionStarted = true\">\n        <div class=\"tag-icon\">\n          <mat-icon>add</mat-icon>\n        </div>\n        <div class=\"tag-text\">\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433</div>\n      </div>\n    </div>\n  }\n  @else {\n  <mat-card style=\"margin: 2px;\" class=\"mat-card special\">\n    <mat-card-content>\n        <div class=\"row d-flex align-items-center\">\n          <div class=\"col-12\">\n            <div class=\"w-100\">\n              <div class=\"tags\">\n                @for (tag of tags; track tag.displayValue) {\n                  <div class=\"tag-item\"\n                       (click)=\"selectTag(tag)\"\n                       [class.active]=\"selectedValue === tag.tag\"\n                  >\n                    <div class=\"tag-icon\">\n                      <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                    [ngTemplateOutletContext]=\"{icon: tag.tag}\">\n                      </ng-container>\n                    </div>\n                    <div class=\"tag-text\">{{tag.displayValue}}</div>\n                  </div>\n                }\n\n                @if (useCustomWidgetsButton) {\n                  <div class=\"tag-item\"\n                       (click)=\"customWidgetsClickHandler()\"\n                  >\n                    <div class=\"tag-icon\">\n                      <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                    [ngTemplateOutletContext]=\"{icon: 'custom-widget'}\">\n                      </ng-container>\n                    </div>\n                    <div class=\"tag-text\">\u0414\u0440\u0443\u0433\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044B</div>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n          @if (selectedValue === FileImageTagDataConsts.TagName && imageMode === null) {\n            <div class=\"col-12\">\n              <div class=\"image-mode-selection\">\n                <button (click)=\"imageMode = 'select'; selectExistingImage()\" class=\"w-100 image-mode-btn\" mat-stroked-button>\n                  <mat-icon>search</mat-icon>\n                  <span>\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0438\u0437 \u0443\u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043D\u044B\u0445 \u0444\u0430\u0439\u043B\u043E\u0432</span>\n                </button>\n                <button (click)=\"uploadNewImages()\" class=\"w-100 image-mode-btn\" mat-stroked-button>\n                  <mat-icon>upload</mat-icon>\n                  <span>\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u043D\u043E\u0432\u044B\u0435 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F</span>\n                </button>\n              </div>\n            </div>\n          }\n          <croco-app-upload-files-btn\n            #imageUploadBtn\n            [hidden]=\"true\"\n            extAccepts=\"image/*\"\n            [isMultiple]=\"true\"\n            btnText=\"\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n            (onPublicFilesUploaded)=\"onImageFilesUploaded($event.fileIds)\"\n            (onPrivateFilesUploaded)=\"onImageFilesUploaded($event.fileIds)\">\n          </croco-app-upload-files-btn>\n          @if (selectedValue === ExternalVideoTagDataConsts.TagName) {\n            <div class=\"col-12\">\n              <mat-form-field class=\"w-100\" appearance=\"outline\">\n                <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0438\u0434\u0435\u043E\u043F\u043B\u0435\u0435\u0440</mat-label>\n                <mat-select [(ngModel)]=\"selectedVideoPlayer\">\n                  @for (videoPlayer of videoPlayers; track videoPlayer.type) {\n                    <mat-option [value]=\"videoPlayer.type\">\n                      {{videoPlayer.displayValue}}\n                    </mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            </div>\n            @if (selectedVideoPlayer === ExternalVideoSupportedTypes.Code) {\n              <div class=\"col-12\">\n                <mat-form-field class=\"w-100\" appearance=\"outline\">\n                  <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n                  <input\n                    matInput\n                    placeholder=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\"\n                    [(ngModel)]=\"htmlRaw\"\n                  >\n                </mat-form-field>\n              </div>\n            }\n            <div class=\"col-12\">\n              <button (click)=\"addTagWithForm()\" class=\"w-100\" mat-stroked-button>\n                \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0432\u0438\u0434\u0435\u043E\n              </button>\n            </div>\n          }\n          @if (selectedValue === HtmlRawTagDataConsts.TagName) {\n            <div class=\"col-12\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n                <textarea\n                  #autosize=\"cdkTextareaAutosize\"\n                  matInput\n                  cdkTextareaAutosize\n                  cdkAutosizeMinRows=\"1\"\n                  cdkAutosizeMaxRows=\"5\"\n                  placeholder=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\"\n                  #textArea\n                  [(ngModel)]=\"htmlRaw\"\n                ></textarea>\n              </mat-form-field>\n            </div>\n            <div class=\"col-12\">\n              <button (click)=\"addTagWithForm()\" class=\"w-100\" mat-stroked-button>\n                \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n              </button>\n            </div>\n          }\n          @if (selectedValue === 'text') {\n            <div style=\"display: flex; justify-content: space-between; flex-wrap: wrap\">\n              <div style=\"margin-bottom: 22px; overflow-x: auto;\">\n                <mat-button-toggle-group\n                  [(ngModel)]=\"textTag\"\n                  [hideSingleSelectionIndicator]=\"true\"\n                >\n                  @for (option of textTagOptions; track option) {\n                    <mat-button-toggle value=\"{{ option.tag }}\">\n                      {{ option.displayValue }}\n                    </mat-button-toggle>\n                  }\n                </mat-button-toggle-group>\n              </div>\n\n              <div style=\"margin-bottom: 22px\">\n                <mat-button-toggle-group\n                  [(ngModel)]=\"alignment\"\n                  [hideSingleSelectionIndicator]=\"true\"\n                >\n                  @for (option of alignmentOptions; track option.value) {\n                    <mat-button-toggle value=\"{{ option.value }}\">\n                    <span class=\"text-align-icon\">\n                      <ng-container [ngTemplateOutlet]=\"textAlignToggleIcons\"\n                                    [ngTemplateOutletContext]=\"{icon: option.value}\">\n                      </ng-container>\n                    </span>\n                    </mat-button-toggle>\n                  }\n                </mat-button-toggle-group>\n              </div>\n            </div>\n            <mat-form-field class=\"w-100\">\n              <mat-label>\u0422\u0435\u043A\u0441\u0442</mat-label>\n              <textarea\n                #autosize=\"cdkTextareaAutosize\"\n                matInput\n                cdkTextareaAutosize\n                cdkAutosizeMinRows=\"1\"\n                cdkAutosizeMaxRows=\"5\"\n                placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n                #textArea\n                [(ngModel)]=\"text\"\n              ></textarea>\n            </mat-form-field>\n            <div class=\"col-12\">\n              <button (click)=\"addTagWithForm()\" class=\"w-100\" mat-stroked-button>\n                \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u043A\u0441\u0442\n              </button>\n            </div>\n          }\n        </div>\n\n    </mat-card-content>\n  </mat-card>\n  }\n</div>\n\n<ng-template #textAlignToggleIcons let-icon=\"icon\">\n  <svg width=\"20\" height=\"20\">\n    <use [attr.xlink:href]=\"setAlignButton(icon) | spriteIconPath\"></use>\n  </svg>\n</ng-template>\n\n<ng-template #tagButtonIcons let-icon=\"icon\">\n  @if (isDefinedCustomWidget(icon)) {\n    <croco-html-custom-widget-icon [tagName]=\"icon\"></croco-html-custom-widget-icon>\n  }\n  @else if (icon.indexOf('h') === 0 && icon.length === 2) {\n    {{icon.toUpperCase()}}\n  }\n  @else {\n    <svg width=\"20\" height=\"20\">\n      <use [attr.xlink:href]=\"setTagButton(icon) | spriteIconPath\"></use>\n    </svg>\n  }\n</ng-template>\n", styles: [":host{--mat-standard-button-toggle-selected-state-background-color: #323E8B;--mat-standard-button-toggle-text-color: #323E8B;--mat-standard-button-toggle-selected-state-text-color: white;--mat-standard-button-toggle-height: 36px;--mat-standard-button-toggle-divider-color: #323E8B;--mdc-outlined-button-label-text-weight: 400;--mdc-outlined-button-label-text-color: #333333 !important;--mdc-outlined-button-container-shape: 30px;--mdc-outlined-button-outline-width: 2px;--mdc-outlined-button-container-height: 44px}:host ::ng-deep .mat-button-toggle-appearance-standard span.mat-button-toggle-label-content{padding:0 8px;min-width:36px}.text-align-icon,.mat-button-toggle .text-align-icon{color:#323e8b}.mat-button-toggle:hover,.mat-button-toggle:hover .text-align-icon{color:#747ebf}.mat-button-toggle-checked .text-align-icon{color:#fff}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.badge{width:44px;height:44px;border-radius:50%;border:1px solid #323E8B;display:flex;align-items:center;justify-content:center;color:#323e8b}.mat-card.special{border:1px solid #747EBF;border-radius:8px;box-shadow:none;margin:2px 2px 10px}.tags{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}@media (max-width: 768px){.tags{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;background-color:#f5f5f5;border-radius:12px}}@media (max-width: 575px){.tags{grid-template-columns:repeat(2,1fr);gap:10px;padding:12px}}.tag-item{display:flex;align-items:center;gap:5px;cursor:pointer;padding:10px 20px;border:1px solid #323E8B;border-radius:30px;background-color:#fff;color:#23262a;transition:.2s ease-in-out}@media (max-width: 768px){.tag-item{flex-direction:column;justify-content:center;padding:16px 8px;border-radius:12px;min-height:80px;gap:8px}}.tag-icon{color:#323e8b;display:flex;align-items:center;justify-content:center}.tag-icon svg{width:20px;height:20px}@media (max-width: 768px){.tag-icon{font-size:24px;margin-bottom:0}.tag-icon svg{width:24px;height:24px}}.tag-text{color:#323e8b}@media (max-width: 768px){.tag-text{font-size:12px;font-weight:500;text-align:center;line-height:1.2}}.text-align-icon{color:#323e8b}.tag-item.active{background-color:#323e8b;color:#fff}.tag-item.active .tag-icon,.tag-item.active .tag-text{color:#fff}.tag-item.active svg{color:#fff}.tag-item:hover{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:hover .tag-icon,.tag-item:hover .tag-text{color:#747ebf}.tag-item:hover svg{color:#747ebf}.add-tag-button{width:100%;justify-content:center}.add-tag-button .tag-icon mat-icon{font-size:20px;width:20px;height:20px;line-height:20px;color:inherit}@media (max-width: 768px){.add-tag-button .tag-icon mat-icon{font-size:24px;width:24px;height:24px;line-height:24px}}.add-tag-button:hover .tag-icon mat-icon{color:#747ebf}.image-mode-selection{display:flex;flex-direction:column;gap:16px}.image-mode-selection .image-mode-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px}.image-mode-selection .image-mode-btn mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}@media (max-width: 768px){.tag-item:hover{color:inherit;box-shadow:none}.tag-item:hover svg{color:inherit}.tag-item:active{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:active svg{color:#747ebf}}.move-icon:hover{cursor:pointer;opacity:.7}.cdk-drag.cdk-drag-placeholder,.cdk-drag-preview{opacity:.5;transition:opacity .2s}.example-handle{color:#323e8b}\n"], dependencies: [{ kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MainEditorBlockComponent, selector: "croco-html-main-editor-block", inputs: ["tag"], outputs: ["onTagSaved", "onTagRemoved"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: CustomWidgetIconComponent, selector: "croco-html-custom-widget-icon", inputs: ["tagName"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: UploadFilesBtnComponent, selector: "croco-app-upload-files-btn", inputs: ["extAccepts", "isMultiple", "btnText", "hidden"], outputs: ["postFilesStarted", "onPublicFilesUploaded", "onPrivateFilesUploaded"] }, { kind: "pipe", type: SpriteIconPathPipe, name: "spriteIconPath" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: VisualEditorComponent, isStandalone: true, selector: "croco-visual-editor", inputs: { showMarkUp: "showMarkUp", logger: "logger", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged", rendered: "rendered" }, viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }, { propertyName: "imageUploadBtn", first: true, predicate: ["imageUploadBtn"], descendants: true }], ngImport: i0, template: "@if (isLoading) {\n  <div>\n    <div>\n      <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\n      <div style=\"text-align: center;\">{{loadingText}}</div>\n    </div>\n    <div style=\"height: 10px;\"></div>\n  </div>\n}\n<div [hidden]=\"isLoading\">\n  <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    @for (tag of bodyTags; track tag; let i = $index) {\n      <div cdkDrag>\n        <mat-card style=\"margin: 2px;\" class=\"mat-card special\">\n          <mat-card-content>\n            <div class=\"d-flex justify-content-between\">\n              <div class=\"example-handle\" cdkDragHandle>\n                <svg width=\"24\" height=\"24\" class=\"move-icon\">\n                  <use [attr.xlink:href]=\"'move-icon' | spriteIconPath\"></use>\n                </svg>\n              </div>\n              <div>\n                <div class=\"badge\" [matTooltip]=\"tag.tagDescription.displayValue\">\n                  <span class=\"text-align-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: tag.tagDescription.tag}\">\n                  </ng-container>\n                  </span>\n                </div>\n              </div>\n            </div>\n            <div style=\"height: 15px;\"></div>\n            <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagChangedHandler($event, i)\"\n              (onTagRemoved)=\"onTagRemovedHandler(i)\">\n            </croco-html-main-editor-block>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n  </div>\n</div>\n<div style=\"height: 10px;\"></div>\n<div [hidden]=\"isLoading\">\n  @if (!isTagAdditionStarted) {\n    <div class=\"col-12\">\n      <div class=\"tag-item add-tag-button\" (click)=\"isTagAdditionStarted = true\">\n        <div class=\"tag-icon\">\n          <mat-icon>add</mat-icon>\n        </div>\n        <div class=\"tag-text\">\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433</div>\n      </div>\n    </div>\n  }\n  @else {\n  <mat-card style=\"margin: 2px;\" class=\"mat-card special\">\n    <mat-card-content>\n        <div class=\"row d-flex align-items-center\">\n          <div class=\"col-12\">\n            <div class=\"w-100\">\n              <div class=\"tags\">\n                @for (tag of tags; track tag.displayValue) {\n                  <div class=\"tag-item\"\n                       (click)=\"selectTag(tag)\"\n                       [class.active]=\"selectedValue === tag.tag\"\n                  >\n                    <div class=\"tag-icon\">\n                      <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                    [ngTemplateOutletContext]=\"{icon: tag.tag}\">\n                      </ng-container>\n                    </div>\n                    <div class=\"tag-text\">{{tag.displayValue}}</div>\n                  </div>\n                }\n\n                @if (useCustomWidgetsButton) {\n                  <div class=\"tag-item\"\n                       (click)=\"customWidgetsClickHandler()\"\n                  >\n                    <div class=\"tag-icon\">\n                      <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                    [ngTemplateOutletContext]=\"{icon: 'custom-widget'}\">\n                      </ng-container>\n                    </div>\n                    <div class=\"tag-text\">\u0414\u0440\u0443\u0433\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044B</div>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n          @if (selectedValue === FileImageTagDataConsts.TagName && imageMode === null) {\n            <div class=\"col-12\">\n              <div class=\"image-mode-selection\">\n                <button (click)=\"imageMode = 'select'; selectExistingImage()\" class=\"w-100 image-mode-btn\" mat-stroked-button>\n                  <mat-icon>search</mat-icon>\n                  <span>\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0438\u0437 \u0443\u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043D\u044B\u0445 \u0444\u0430\u0439\u043B\u043E\u0432</span>\n                </button>\n                <button (click)=\"uploadNewImages()\" class=\"w-100 image-mode-btn\" mat-stroked-button>\n                  <mat-icon>upload</mat-icon>\n                  <span>\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u043D\u043E\u0432\u044B\u0435 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F</span>\n                </button>\n              </div>\n            </div>\n          }\n          <croco-app-upload-files-btn\n            #imageUploadBtn\n            [hidden]=\"true\"\n            extAccepts=\"image/*\"\n            [isMultiple]=\"true\"\n            btnText=\"\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n            (onPublicFilesUploaded)=\"onImageFilesUploaded($event.fileIds)\"\n            (onPrivateFilesUploaded)=\"onImageFilesUploaded($event.fileIds)\">\n          </croco-app-upload-files-btn>\n          @if (selectedValue === ExternalVideoTagDataConsts.TagName) {\n            <div class=\"col-12\">\n              <mat-form-field class=\"w-100\" appearance=\"outline\">\n                <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0438\u0434\u0435\u043E\u043F\u043B\u0435\u0435\u0440</mat-label>\n                <mat-select [(ngModel)]=\"selectedVideoPlayer\">\n                  @for (videoPlayer of videoPlayers; track videoPlayer.type) {\n                    <mat-option [value]=\"videoPlayer.type\">\n                      {{videoPlayer.displayValue}}\n                    </mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            </div>\n            @if (selectedVideoPlayer === ExternalVideoSupportedTypes.Code) {\n              <div class=\"col-12\">\n                <mat-form-field class=\"w-100\" appearance=\"outline\">\n                  <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n                  <input\n                    matInput\n                    placeholder=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\"\n                    [(ngModel)]=\"htmlRaw\"\n                  >\n                </mat-form-field>\n              </div>\n            }\n            <div class=\"col-12\">\n              <button (click)=\"addTagWithForm()\" class=\"w-100\" mat-stroked-button>\n                \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0432\u0438\u0434\u0435\u043E\n              </button>\n            </div>\n          }\n          @if (selectedValue === HtmlRawTagDataConsts.TagName) {\n            <div class=\"col-12\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n                <textarea\n                  #autosize=\"cdkTextareaAutosize\"\n                  matInput\n                  cdkTextareaAutosize\n                  cdkAutosizeMinRows=\"1\"\n                  cdkAutosizeMaxRows=\"5\"\n                  placeholder=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\"\n                  #textArea\n                  [(ngModel)]=\"htmlRaw\"\n                ></textarea>\n              </mat-form-field>\n            </div>\n            <div class=\"col-12\">\n              <button (click)=\"addTagWithForm()\" class=\"w-100\" mat-stroked-button>\n                \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n              </button>\n            </div>\n          }\n          @if (selectedValue === 'text') {\n            <div style=\"display: flex; justify-content: space-between; flex-wrap: wrap\">\n              <div style=\"margin-bottom: 22px; overflow-x: auto;\">\n                <mat-button-toggle-group\n                  [(ngModel)]=\"textTag\"\n                  [hideSingleSelectionIndicator]=\"true\"\n                >\n                  @for (option of textTagOptions; track option) {\n                    <mat-button-toggle value=\"{{ option.tag }}\">\n                      {{ option.displayValue }}\n                    </mat-button-toggle>\n                  }\n                </mat-button-toggle-group>\n              </div>\n\n              <div style=\"margin-bottom: 22px\">\n                <mat-button-toggle-group\n                  [(ngModel)]=\"alignment\"\n                  [hideSingleSelectionIndicator]=\"true\"\n                >\n                  @for (option of alignmentOptions; track option.value) {\n                    <mat-button-toggle value=\"{{ option.value }}\">\n                    <span class=\"text-align-icon\">\n                      <ng-container [ngTemplateOutlet]=\"textAlignToggleIcons\"\n                                    [ngTemplateOutletContext]=\"{icon: option.value}\">\n                      </ng-container>\n                    </span>\n                    </mat-button-toggle>\n                  }\n                </mat-button-toggle-group>\n              </div>\n            </div>\n            <mat-form-field class=\"w-100\">\n              <mat-label>\u0422\u0435\u043A\u0441\u0442</mat-label>\n              <textarea\n                #autosize=\"cdkTextareaAutosize\"\n                matInput\n                cdkTextareaAutosize\n                cdkAutosizeMinRows=\"1\"\n                cdkAutosizeMaxRows=\"5\"\n                placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n                #textArea\n                [(ngModel)]=\"text\"\n              ></textarea>\n            </mat-form-field>\n            <div class=\"col-12\">\n              <button (click)=\"addTagWithForm()\" class=\"w-100\" mat-stroked-button>\n                \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u043A\u0441\u0442\n              </button>\n            </div>\n          }\n        </div>\n\n    </mat-card-content>\n  </mat-card>\n  }\n</div>\n\n<ng-template #textAlignToggleIcons let-icon=\"icon\">\n  <svg width=\"20\" height=\"20\">\n    <use [attr.xlink:href]=\"setAlignButton(icon) | spriteIconPath\"></use>\n  </svg>\n</ng-template>\n\n<ng-template #tagButtonIcons let-icon=\"icon\">\n  @if (isDefinedCustomWidget(icon)) {\n    <croco-html-custom-widget-icon [tagName]=\"icon\"></croco-html-custom-widget-icon>\n  }\n  @else if (icon.indexOf('h') === 0 && icon.length === 2) {\n    {{icon.toUpperCase()}}\n  }\n  @else {\n    <svg width=\"20\" height=\"20\">\n      <use [attr.xlink:href]=\"setTagButton(icon) | spriteIconPath\"></use>\n    </svg>\n  }\n</ng-template>\n", styles: [":host{--mat-standard-button-toggle-selected-state-background-color: #323E8B;--mat-standard-button-toggle-text-color: #323E8B;--mat-standard-button-toggle-selected-state-text-color: white;--mat-standard-button-toggle-height: 36px;--mat-standard-button-toggle-divider-color: #323E8B;--mdc-outlined-button-label-text-weight: 400;--mdc-outlined-button-label-text-color: #333333 !important;--mdc-outlined-button-container-shape: 30px;--mdc-outlined-button-outline-width: 2px;--mdc-outlined-button-container-height: 44px}:host ::ng-deep .mat-button-toggle-appearance-standard span.mat-button-toggle-label-content{padding:0 8px;min-width:36px}.text-align-icon,.mat-button-toggle .text-align-icon{color:#323e8b}.mat-button-toggle:hover,.mat-button-toggle:hover .text-align-icon{color:#747ebf}.mat-button-toggle-checked .text-align-icon{color:#fff}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.badge{width:44px;height:44px;border-radius:50%;border:1px solid #323E8B;display:flex;align-items:center;justify-content:center;color:#323e8b}.mat-card.special{border:1px solid #747EBF;border-radius:8px;box-shadow:none;margin:2px 2px 10px}.tags{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}@media (max-width: 768px){.tags{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;background-color:#f5f5f5;border-radius:12px}}@media (max-width: 575px){.tags{grid-template-columns:repeat(2,1fr);gap:10px;padding:12px}}.tag-item{display:flex;align-items:center;gap:5px;cursor:pointer;padding:10px 20px;border:1px solid #323E8B;border-radius:30px;background-color:#fff;color:#23262a;transition:.2s ease-in-out}@media (max-width: 768px){.tag-item{flex-direction:column;justify-content:center;padding:16px 8px;border-radius:12px;min-height:80px;gap:8px}}.tag-icon{color:#323e8b;display:flex;align-items:center;justify-content:center}.tag-icon svg{width:20px;height:20px}@media (max-width: 768px){.tag-icon{font-size:24px;margin-bottom:0}.tag-icon svg{width:24px;height:24px}}.tag-text{color:#323e8b}@media (max-width: 768px){.tag-text{font-size:12px;font-weight:500;text-align:center;line-height:1.2}}.text-align-icon{color:#323e8b}.tag-item.active{background-color:#323e8b;color:#fff}.tag-item.active .tag-icon,.tag-item.active .tag-text{color:#fff}.tag-item.active svg{color:#fff}.tag-item:hover{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:hover .tag-icon,.tag-item:hover .tag-text{color:#747ebf}.tag-item:hover svg{color:#747ebf}.add-tag-button{width:100%;justify-content:center}.add-tag-button .tag-icon mat-icon{font-size:20px;width:20px;height:20px;line-height:20px;color:inherit}@media (max-width: 768px){.add-tag-button .tag-icon mat-icon{font-size:24px;width:24px;height:24px;line-height:24px}}.add-tag-button:hover .tag-icon mat-icon{color:#747ebf}.image-mode-selection{display:flex;flex-direction:column;gap:16px}.image-mode-selection .image-mode-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px}.image-mode-selection .image-mode-btn mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}@media (max-width: 768px){.tag-item:hover{color:inherit;box-shadow:none}.tag-item:hover svg{color:inherit}.tag-item:active{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:active svg{color:#747ebf}}.move-icon:hover{cursor:pointer;opacity:.7}.cdk-drag.cdk-drag-placeholder,.cdk-drag-preview{opacity:.5;transition:opacity .2s}.example-handle{color:#323e8b}\n"], dependencies: [{ kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MainEditorBlockComponent, selector: "croco-html-main-editor-block", inputs: ["tag"], outputs: ["onTagSaved", "onTagRemoved"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: CustomWidgetIconComponent, selector: "croco-html-custom-widget-icon", inputs: ["tagName"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: UploadFilesBtnComponent, selector: "croco-app-upload-files-btn", inputs: ["extAccepts", "isMultiple", "btnText", "hidden"], outputs: ["postFilesStarted", "onPublicFilesUploaded", "onPrivateFilesUploaded"] }, { kind: "pipe", type: SpriteIconPathPipe, name: "spriteIconPath" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: VisualEditorComponent, decorators: [{
             type: Component,
@@ -3844,7 +3879,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: ViewChild,
                 args: ['imageUploadBtn']
             }], showMarkUp: [{
-                type: Input
+                type: Input,
+                args: [{ required: false }]
+            }], logger: [{
+                type: Input,
+                args: [{ required: false }]
             }], useHtmlRaw: [{
                 type: Input
             }], html: [{
@@ -3948,6 +3987,7 @@ class MainEditorComponent {
         this.visualEditorRendered = false;
         this.showMarkUp = true;
         this.useHtmlRaw = false;
+        this.logger = new NullVisualEditorLogger();
         this.html = "";
         this.onHtmlChanged = new EventEmitter();
         this.showSettingsButton = false;
@@ -4007,7 +4047,7 @@ class MainEditorComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MainEditorComponent, deps: [{ token: i1$5.ClipboardService }, { token: i2$4.MatSnackBar }, { token: i0.ChangeDetectorRef }, { token: i2$3.MatDialog }, { token: CrocoHtmlFileOptionsService }, { token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MainEditorComponent, isStandalone: true, selector: "croco-html-main-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged" }, viewQueries: [{ propertyName: "visualEditor", first: true, predicate: ["visualEditor"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-tab-group mat-stretch-tabs=\"false\" mat-align-tabs=\"start\" style=\"position: relative\">\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'visual-editor-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 20px;\"></div>\n\n    <croco-visual-editor #visualEditor [useHtmlRaw]=\"true\" [html]=\"html\" (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n      (rendered)=\"visualEditorRenderedHandler()\">\n    </croco-visual-editor>\n  </mat-tab>\n\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'source-code-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 10px;\"></div>\n    @if (visualEditorRendered) {\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434</mat-label>\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\" cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\" (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n      </mat-form-field>\n    </div>\n    }\n\n    <button (click)=\"copyMarkUp()\" mat-raised-button color=\"primary\">\n      \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n    </button>\n  </mat-tab>\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"30\">\n        <use [attr.xlink:href]=\"'viewer-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n\n    <mat-card style=\"padding: 2px;\" class=\"mat-card\">\n      <mat-card-content>\n        <croco-html-view [html]=\"html\" [isEditor]=\"true\">\n        </croco-html-view>\n      </mat-card-content>\n    </mat-card>\n  </mat-tab>\n</mat-tab-group>\n\n<div [hidden]=\"!showSettingsButton\">\n  <mat-icon class=\"settings\" (click)=\"openSettingsModal()\">settings</mat-icon>\n</div>\n", styles: [":host ::ng-deep .mdc-tab.mat-mdc-tab{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab .custom-icon{fill:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover .custom-icon{fill:#747ebf}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active{background-color:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active svg.custom-icon{fill:#fff}:host ::ng-deep div.mat-mdc-tab-labels{justify-content:center}:host{position:relative;width:100%;display:block;overflow-x:hidden}:host ::ng-deep .mat-expansion-panel,:host ::ng-deep .mat-mdc-tab-body-content,:host ::ng-deep .mat-mdc-tab-body,:host ::ng-deep .mat-mdc-tab-body-wrapper{overflow:visible}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.settings{position:absolute;top:20px;right:20px;cursor:pointer;z-index:1000}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i5.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: VisualEditorComponent, selector: "croco-visual-editor", inputs: ["showMarkUp", "useHtmlRaw", "html"], outputs: ["html", "onHtmlChanged", "rendered"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: HtmlViewComponent, selector: "croco-html-view", inputs: ["html", "isEditor", "dataController"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SpriteIconPathPipe, name: "spriteIconPath" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MainEditorComponent, isStandalone: true, selector: "croco-html-main-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", logger: "logger", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged" }, viewQueries: [{ propertyName: "visualEditor", first: true, predicate: ["visualEditor"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-tab-group mat-stretch-tabs=\"false\" mat-align-tabs=\"start\" style=\"position: relative\">\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'visual-editor-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 20px;\"></div>\n\n    <croco-visual-editor #visualEditor [useHtmlRaw]=\"true\" [logger]=\"logger\" [html]=\"html\" (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n      (rendered)=\"visualEditorRenderedHandler()\">\n    </croco-visual-editor>\n  </mat-tab>\n\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'source-code-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 10px;\"></div>\n    @if (visualEditorRendered) {\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434</mat-label>\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\" cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\" (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n      </mat-form-field>\n    </div>\n    }\n\n    <button (click)=\"copyMarkUp()\" mat-raised-button color=\"primary\">\n      \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n    </button>\n  </mat-tab>\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"30\">\n        <use [attr.xlink:href]=\"'viewer-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n\n    <mat-card style=\"padding: 2px;\" class=\"mat-card\">\n      <mat-card-content>\n        <croco-html-view [html]=\"html\" [isEditor]=\"true\">\n        </croco-html-view>\n      </mat-card-content>\n    </mat-card>\n  </mat-tab>\n</mat-tab-group>\n\n<div [hidden]=\"!showSettingsButton\">\n  <mat-icon class=\"settings\" (click)=\"openSettingsModal()\">settings</mat-icon>\n</div>\n", styles: [":host ::ng-deep .mdc-tab.mat-mdc-tab{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab .custom-icon{fill:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover .custom-icon{fill:#747ebf}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active{background-color:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active svg.custom-icon{fill:#fff}:host ::ng-deep div.mat-mdc-tab-labels{justify-content:center}:host{position:relative;width:100%;display:block;overflow-x:hidden}:host ::ng-deep .mat-expansion-panel,:host ::ng-deep .mat-mdc-tab-body-content,:host ::ng-deep .mat-mdc-tab-body,:host ::ng-deep .mat-mdc-tab-body-wrapper{overflow:visible}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.settings{position:absolute;top:20px;right:20px;cursor:pointer;z-index:1000}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i5.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: VisualEditorComponent, selector: "croco-visual-editor", inputs: ["showMarkUp", "logger", "useHtmlRaw", "html"], outputs: ["html", "onHtmlChanged", "rendered"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: HtmlViewComponent, selector: "croco-html-view", inputs: ["html", "isEditor", "dataController"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SpriteIconPathPipe, name: "spriteIconPath" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MainEditorComponent, decorators: [{
             type: Component,
@@ -4024,7 +4064,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         HtmlViewComponent,
                         SpriteIconPathPipe,
                         MatIcon
-                    ], template: "<mat-tab-group mat-stretch-tabs=\"false\" mat-align-tabs=\"start\" style=\"position: relative\">\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'visual-editor-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 20px;\"></div>\n\n    <croco-visual-editor #visualEditor [useHtmlRaw]=\"true\" [html]=\"html\" (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n      (rendered)=\"visualEditorRenderedHandler()\">\n    </croco-visual-editor>\n  </mat-tab>\n\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'source-code-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 10px;\"></div>\n    @if (visualEditorRendered) {\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434</mat-label>\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\" cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\" (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n      </mat-form-field>\n    </div>\n    }\n\n    <button (click)=\"copyMarkUp()\" mat-raised-button color=\"primary\">\n      \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n    </button>\n  </mat-tab>\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"30\">\n        <use [attr.xlink:href]=\"'viewer-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n\n    <mat-card style=\"padding: 2px;\" class=\"mat-card\">\n      <mat-card-content>\n        <croco-html-view [html]=\"html\" [isEditor]=\"true\">\n        </croco-html-view>\n      </mat-card-content>\n    </mat-card>\n  </mat-tab>\n</mat-tab-group>\n\n<div [hidden]=\"!showSettingsButton\">\n  <mat-icon class=\"settings\" (click)=\"openSettingsModal()\">settings</mat-icon>\n</div>\n", styles: [":host ::ng-deep .mdc-tab.mat-mdc-tab{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab .custom-icon{fill:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover .custom-icon{fill:#747ebf}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active{background-color:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active svg.custom-icon{fill:#fff}:host ::ng-deep div.mat-mdc-tab-labels{justify-content:center}:host{position:relative;width:100%;display:block;overflow-x:hidden}:host ::ng-deep .mat-expansion-panel,:host ::ng-deep .mat-mdc-tab-body-content,:host ::ng-deep .mat-mdc-tab-body,:host ::ng-deep .mat-mdc-tab-body-wrapper{overflow:visible}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.settings{position:absolute;top:20px;right:20px;cursor:pointer;z-index:1000}\n"] }]
+                    ], template: "<mat-tab-group mat-stretch-tabs=\"false\" mat-align-tabs=\"start\" style=\"position: relative\">\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'visual-editor-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 20px;\"></div>\n\n    <croco-visual-editor #visualEditor [useHtmlRaw]=\"true\" [logger]=\"logger\" [html]=\"html\" (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n      (rendered)=\"visualEditorRenderedHandler()\">\n    </croco-visual-editor>\n  </mat-tab>\n\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'source-code-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 10px;\"></div>\n    @if (visualEditorRendered) {\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434</mat-label>\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\" cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\" (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n      </mat-form-field>\n    </div>\n    }\n\n    <button (click)=\"copyMarkUp()\" mat-raised-button color=\"primary\">\n      \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n    </button>\n  </mat-tab>\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"30\">\n        <use [attr.xlink:href]=\"'viewer-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n\n    <mat-card style=\"padding: 2px;\" class=\"mat-card\">\n      <mat-card-content>\n        <croco-html-view [html]=\"html\" [isEditor]=\"true\">\n        </croco-html-view>\n      </mat-card-content>\n    </mat-card>\n  </mat-tab>\n</mat-tab-group>\n\n<div [hidden]=\"!showSettingsButton\">\n  <mat-icon class=\"settings\" (click)=\"openSettingsModal()\">settings</mat-icon>\n</div>\n", styles: [":host ::ng-deep .mdc-tab.mat-mdc-tab{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab .custom-icon{fill:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover .custom-icon{fill:#747ebf}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active{background-color:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active svg.custom-icon{fill:#fff}:host ::ng-deep div.mat-mdc-tab-labels{justify-content:center}:host{position:relative;width:100%;display:block;overflow-x:hidden}:host ::ng-deep .mat-expansion-panel,:host ::ng-deep .mat-mdc-tab-body-content,:host ::ng-deep .mat-mdc-tab-body,:host ::ng-deep .mat-mdc-tab-body-wrapper{overflow:visible}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.settings{position:absolute;top:20px;right:20px;cursor:pointer;z-index:1000}\n"] }]
         }], ctorParameters: () => [{ type: i1$5.ClipboardService }, { type: i2$4.MatSnackBar }, { type: i0.ChangeDetectorRef }, { type: i2$3.MatDialog }, { type: CrocoHtmlFileOptionsService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [CrocoHtmlOptionsToken]
@@ -4032,9 +4072,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: ViewChild,
                 args: ["visualEditor", { static: true }]
             }], showMarkUp: [{
-                type: Input
+                type: Input,
+                args: [{ required: false }]
             }], useHtmlRaw: [{
-                type: Input
+                type: Input,
+                args: [{ required: false }]
+            }], logger: [{
+                type: Input,
+                args: [{ required: false }]
             }], html: [{
                 type: Input
             }, {
@@ -4219,5 +4264,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddFilesBtnComponent, AngularMaterialTableMethods, AudioEditorComponent, AudioMethods, AudioPlayerTagViewComponent, BodyTagsExtensions, BootstrapTableMethods, ButtonTagDataConsts, ButtonTagService, CrocoHtmlFileOptionsService, CrocoHtmlModule, CrocoHtmlOptionsToken, CustomWidgetEditorComponent, CustomWidgetIconComponent, CustomWidgetTagDataConsts, CustomWidgetTagService, DefinedCustomEditorBlockComponent, DefinedCustomTagViewComponent, DownloadButtonTagDataConsts, DownloadButtonTagService, ExternalVideoEditorComponent, ExternalVideoPlayers, ExternalVideoSupportedTypes, ExternalVideoTagDataConsts, ExternalVideoTagService, FileAudioTagDataConsts, FileIdSelectComponent, FileImageTagDataConsts, FileImageTagService, FileImageTagViewComponent, FileType, HtmlPageDataController, HtmlRawEditorComponent, HtmlRawTagDataConsts, HtmlRawTagService, HtmlRawViewComponent, HtmlViewComponent, HtmlViewController, ImageEditorComponent, ImageMethods, LinkEditorComponent, LinkTagAttrs, LinkTagConsts, LinkTagService, MainEditorBlockComponent, MainEditorComponent, TableBuilder, TableMethods, TableTypes, TagBuildExtensions, TagEditorService, TagToSpanPipe, TextAlignment, TextEditorComponent, TextSimpleMethods, TextTag, TextTagDataConsts, TextTagHtmlMarkupTagService, TextTags, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe, ToPreviewPipe, UploadFilesBtnComponent, VisualEditorComponent, XmlExtensions, XmlTagCustomWidgetComponent, XmlTagExternalVideoComponent, XmlTagHeaderInnerTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHtmlViewComponent, XmlTagTextViewComponent, XmlTagViewComponent };
+export { AddFilesBtnComponent, AngularMaterialTableMethods, AudioEditorComponent, AudioMethods, AudioPlayerTagViewComponent, BodyTagsExtensions, BootstrapTableMethods, ButtonTagDataConsts, ButtonTagService, ConsoleVisualEditorLogger, CrocoHtmlFileOptionsService, CrocoHtmlModule, CrocoHtmlOptionsToken, CustomWidgetEditorComponent, CustomWidgetIconComponent, CustomWidgetTagDataConsts, CustomWidgetTagService, DefinedCustomEditorBlockComponent, DefinedCustomTagViewComponent, DownloadButtonTagDataConsts, DownloadButtonTagService, ExternalVideoEditorComponent, ExternalVideoPlayers, ExternalVideoSupportedTypes, ExternalVideoTagDataConsts, ExternalVideoTagService, FileAudioTagDataConsts, FileIdSelectComponent, FileImageTagDataConsts, FileImageTagService, FileImageTagViewComponent, FileType, HtmlPageDataController, HtmlRawEditorComponent, HtmlRawTagDataConsts, HtmlRawTagService, HtmlRawViewComponent, HtmlViewComponent, HtmlViewController, ImageEditorComponent, ImageMethods, LinkEditorComponent, LinkTagAttrs, LinkTagConsts, LinkTagService, MainEditorBlockComponent, MainEditorComponent, NullVisualEditorLogger, TableBuilder, TableMethods, TableTypes, TagBuildExtensions, TagEditorService, TagToSpanPipe, TextAlignment, TextEditorComponent, TextSimpleMethods, TextTag, TextTagDataConsts, TextTagHtmlMarkupTagService, TextTags, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe, ToPreviewPipe, UploadFilesBtnComponent, VisualEditorComponent, XmlExtensions, XmlTagCustomWidgetComponent, XmlTagExternalVideoComponent, XmlTagHeaderInnerTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHtmlViewComponent, XmlTagTextViewComponent, XmlTagViewComponent };
 //# sourceMappingURL=croco-html.mjs.map