croco-html 4.6.2 → 4.6.4

package/fesm2022/croco-html.mjs

@@ -1930,7 +1930,7 @@ class ExternalVideoEditorComponent {
         this.tagData.link = src;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ExternalVideoEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ExternalVideoEditorComponent, isStandalone: true, selector: "croco-html-external-video-editor", inputs: { tag: "tag", presentOrEdit: "presentOrEdit" }, ngImport: i0, template: "@if (presentOrEdit) {\n  <div>\n    <div>\n      @switch (tagData.type) {\n        @case (ExternalVideoSupportedTypes.VkVideo) {\n          {{linkText}}: {{tagData.link}}\n        }\n        @case (ExternalVideoSupportedTypes.Youtube) {\n          {{linkText}}: {{tagData.link}}\n        }\n        @case (ExternalVideoSupportedTypes.Code) {\n          <div>\n            \u0412\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043C\u044B\u0439 \u043A\u043E\u0434 \u043F\u043B\u0435\u0435\u0440\u0430.\n          </div>\n        }\n      }\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <croco-html-xml-tag-external-video [tagData]=\"tagData\"></croco-html-xml-tag-external-video>\n  </div>\n}\n@else {\n  @if(tagData.type !== ExternalVideoSupportedTypes.Code) {\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\n          {{linkText}}\n        </mat-label>\n        <input matInput placeholder=\"{{linkText}}\"\n               autocomplete=\"off\"\n               [(ngModel)]=\"tagData.link\"\n               (ngModelChange)=\"linkChanged()\">\n      </mat-form-field>\n    </div>\n  } @else {\n    <div>\n        <mat-label>\n          {{linkText}}\n        </mat-label>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n          <textarea\n            #autosize=\"cdkTextareaAutosize\"\n            matInput\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"1\"\n            cdkAutosizeMaxRows=\"5\"\n            placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n            #textArea\n            [(ngModel)]=\"tagData.innerHtml\"\n            (ngModelChange)=\"linkChanged()\"\n          ></textarea>\n        </mat-form-field>\n\n        <mat-checkbox\n          [checked]=\"tagData.useResponsiveWrapper\"\n          (change)=\"onCheck($event.checked)\"\n        >\n          \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0430\u0434\u0430\u043F\u0442\u0438\u0432?\n        </mat-checkbox>\n    </div>\n  }\n}\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 768px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 575px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 480px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ExternalVideoEditorComponent, isStandalone: true, selector: "croco-html-external-video-editor", inputs: { tag: "tag", presentOrEdit: "presentOrEdit" }, ngImport: i0, template: "@if (presentOrEdit) {\n  <div>\n    <div style=\"word-break: break-all\">\n      @switch (tagData.type) {\n        @case (ExternalVideoSupportedTypes.VkVideo) {\n          {{linkText}}: {{tagData.link}}\n        }\n        @case (ExternalVideoSupportedTypes.Youtube) {\n          {{linkText}}: {{tagData.link}}\n        }\n        @case (ExternalVideoSupportedTypes.Code) {\n          <div>\n            \u0412\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043C\u044B\u0439 \u043A\u043E\u0434 \u043F\u043B\u0435\u0435\u0440\u0430.\n          </div>\n        }\n      }\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <croco-html-xml-tag-external-video [tagData]=\"tagData\"></croco-html-xml-tag-external-video>\n  </div>\n}\n@else {\n  @if(tagData.type !== ExternalVideoSupportedTypes.Code) {\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\n          {{linkText}}\n        </mat-label>\n        <input matInput placeholder=\"{{linkText}}\"\n               autocomplete=\"off\"\n               [(ngModel)]=\"tagData.link\"\n               (ngModelChange)=\"linkChanged()\">\n      </mat-form-field>\n    </div>\n  } @else {\n    <div>\n        <mat-label>\n          {{linkText}}\n        </mat-label>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n          <textarea\n            #autosize=\"cdkTextareaAutosize\"\n            matInput\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"1\"\n            cdkAutosizeMaxRows=\"5\"\n            placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n            #textArea\n            [(ngModel)]=\"tagData.innerHtml\"\n            (ngModelChange)=\"linkChanged()\"\n          ></textarea>\n        </mat-form-field>\n\n        <mat-checkbox\n          [checked]=\"tagData.useResponsiveWrapper\"\n          (change)=\"onCheck($event.checked)\"\n        >\n          \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0430\u0434\u0430\u043F\u0442\u0438\u0432?\n        </mat-checkbox>\n    </div>\n  }\n}\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 768px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 575px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 480px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ExternalVideoEditorComponent, decorators: [{
             type: Component,
@@ -1940,7 +1940,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         FormsModule,
                         XmlTagExternalVideoComponent,
                         MatCheckbox,
-                    ], template: "@if (presentOrEdit) {\n  <div>\n    <div>\n      @switch (tagData.type) {\n        @case (ExternalVideoSupportedTypes.VkVideo) {\n          {{linkText}}: {{tagData.link}}\n        }\n        @case (ExternalVideoSupportedTypes.Youtube) {\n          {{linkText}}: {{tagData.link}}\n        }\n        @case (ExternalVideoSupportedTypes.Code) {\n          <div>\n            \u0412\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043C\u044B\u0439 \u043A\u043E\u0434 \u043F\u043B\u0435\u0435\u0440\u0430.\n          </div>\n        }\n      }\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <croco-html-xml-tag-external-video [tagData]=\"tagData\"></croco-html-xml-tag-external-video>\n  </div>\n}\n@else {\n  @if(tagData.type !== ExternalVideoSupportedTypes.Code) {\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\n          {{linkText}}\n        </mat-label>\n        <input matInput placeholder=\"{{linkText}}\"\n               autocomplete=\"off\"\n               [(ngModel)]=\"tagData.link\"\n               (ngModelChange)=\"linkChanged()\">\n      </mat-form-field>\n    </div>\n  } @else {\n    <div>\n        <mat-label>\n          {{linkText}}\n        </mat-label>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n          <textarea\n            #autosize=\"cdkTextareaAutosize\"\n            matInput\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"1\"\n            cdkAutosizeMaxRows=\"5\"\n            placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n            #textArea\n            [(ngModel)]=\"tagData.innerHtml\"\n            (ngModelChange)=\"linkChanged()\"\n          ></textarea>\n        </mat-form-field>\n\n        <mat-checkbox\n          [checked]=\"tagData.useResponsiveWrapper\"\n          (change)=\"onCheck($event.checked)\"\n        >\n          \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0430\u0434\u0430\u043F\u0442\u0438\u0432?\n        </mat-checkbox>\n    </div>\n  }\n}\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 768px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 575px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 480px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"] }]
+                    ], template: "@if (presentOrEdit) {\n  <div>\n    <div style=\"word-break: break-all\">\n      @switch (tagData.type) {\n        @case (ExternalVideoSupportedTypes.VkVideo) {\n          {{linkText}}: {{tagData.link}}\n        }\n        @case (ExternalVideoSupportedTypes.Youtube) {\n          {{linkText}}: {{tagData.link}}\n        }\n        @case (ExternalVideoSupportedTypes.Code) {\n          <div>\n            \u0412\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043C\u044B\u0439 \u043A\u043E\u0434 \u043F\u043B\u0435\u0435\u0440\u0430.\n          </div>\n        }\n      }\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <croco-html-xml-tag-external-video [tagData]=\"tagData\"></croco-html-xml-tag-external-video>\n  </div>\n}\n@else {\n  @if(tagData.type !== ExternalVideoSupportedTypes.Code) {\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\n          {{linkText}}\n        </mat-label>\n        <input matInput placeholder=\"{{linkText}}\"\n               autocomplete=\"off\"\n               [(ngModel)]=\"tagData.link\"\n               (ngModelChange)=\"linkChanged()\">\n      </mat-form-field>\n    </div>\n  } @else {\n    <div>\n        <mat-label>\n          {{linkText}}\n        </mat-label>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n          <textarea\n            #autosize=\"cdkTextareaAutosize\"\n            matInput\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"1\"\n            cdkAutosizeMaxRows=\"5\"\n            placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n            #textArea\n            [(ngModel)]=\"tagData.innerHtml\"\n            (ngModelChange)=\"linkChanged()\"\n          ></textarea>\n        </mat-form-field>\n\n        <mat-checkbox\n          [checked]=\"tagData.useResponsiveWrapper\"\n          (change)=\"onCheck($event.checked)\"\n        >\n          \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0430\u0434\u0430\u043F\u0442\u0438\u0432?\n        </mat-checkbox>\n    </div>\n  }\n}\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 768px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 575px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 480px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"] }]
         }], propDecorators: { tag: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2870,6 +2870,11 @@ class MainEditorComponent {
         this.showSettingsButton = false;
         this.showSettingsButton = options.showSettingsButton;
     }
+    ngOnChanges(changes) {
+        if (changes['html'].currentValue !== changes['html'].previousValue) {
+            this.recalculateBodyTags();
+        }
+    }
     ngAfterViewInit() {
         this.recalculateBodyTags();
     }
@@ -2917,7 +2922,7 @@ class MainEditorComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MainEditorComponent, deps: [{ token: i1$5.ClipboardService }, { token: i2$3.MatSnackBar }, { token: i0.ChangeDetectorRef }, { token: i2$2.MatDialog }, { token: CrocoHtmlFileOptionsService }, { token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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 }], 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\n    <div style=\"height: 20px;\"></div>\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\">\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}: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$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: HtmlViewComponent, selector: "croco-html-view", inputs: ["html", "dataController"] }, { kind: "pipe", type: SpriteIconPathPipe, name: "spriteIconPath" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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\n    <div style=\"height: 20px;\"></div>\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\">\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$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: HtmlViewComponent, selector: "croco-html-view", inputs: ["html", "dataController"] }, { kind: "pipe", type: SpriteIconPathPipe, name: "spriteIconPath" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MainEditorComponent, decorators: [{
             type: Component,
@@ -2934,7 +2939,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", 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\n    <div style=\"height: 20px;\"></div>\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\">\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}: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\" [html]=\"html\" (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n      (rendered)=\"visualEditorRenderedHandler()\">\n    </croco-visual-editor>\n\n    <div style=\"height: 20px;\"></div>\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\">\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$3.MatSnackBar }, { type: i0.ChangeDetectorRef }, { type: i2$2.MatDialog }, { type: CrocoHtmlFileOptionsService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [CrocoHtmlOptionsToken]