croco-html 2.43.0 → 2.47.0

package/esm2022/lib/components/editor/main-editor/main-editor.component.mjs

@@ -60,7 +60,7 @@ export class MainEditorComponent {
         this.visualEditor.recalculateBodyTags();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MainEditorComponent, deps: [{ token: i1.ClipboardService }, { token: i2.MatSnackBar }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", 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\">\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\n      [useHtmlRaw]=\"useHtmlRaw\"\n      [html]=\"html\"\n      (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n      (rendered)=\"visualEditorRenderedHandler()\">\n    </croco-visual-editor>\n\n    <div style=\"height: 20px;\"></div>\n\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\"\n            cdkAutosizeMinRows=\"1\"\n            placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\"\n          (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n        </mat-form-field>\n      </div>\n    }\n\n    <button (click)=\"copyMarkUp()\"\n      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\" viewBox=\"0 0 32 30\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M31.8081 14.1889C28.797 8.31109 22.8303 4.33331 16.0026 4.33331C9.17479 4.33331 3.20813 8.31109 0.197015 14.1889C0.0700503 14.4404 0.00390625 14.7182 0.00390625 15C0.00390625 15.2817 0.0700503 15.5596 0.197015 15.8111C3.20813 21.6889 9.17479 25.6666 16.0026 25.6666C22.8303 25.6666 28.797 21.6889 31.8081 15.8111C31.9351 15.5596 32.0012 15.2817 32.0012 15C32.0012 14.7182 31.9351 14.4404 31.8081 14.1889ZM16.0026 23C14.4203 23 12.8736 22.5308 11.558 21.6517C10.2424 20.7727 9.21704 19.5233 8.61154 18.0614C8.00603 16.5996 7.84761 14.9911 8.15629 13.4393C8.46497 11.8874 9.2269 10.4619 10.3457 9.34313C11.4645 8.22431 12.89 7.46238 14.4418 7.1537C15.9937 6.84502 17.6022 7.00344 19.064 7.60894C20.5258 8.21444 21.7753 9.23982 22.6543 10.5554C23.5334 11.871 24.0026 13.4177 24.0026 15C24.0033 16.0508 23.7969 17.0914 23.3951 18.0623C22.9933 19.0332 22.4041 19.9154 21.6611 20.6585C20.918 21.4015 20.0358 21.9907 19.0649 22.3925C18.094 22.7943 17.0534 23.0007 16.0026 23ZM16.0026 9.66665C15.5267 9.67352 15.0539 9.74453 14.597 9.87776C14.9689 10.3904 15.1459 11.0188 15.096 11.6502C15.0461 12.2815 14.7726 12.8744 14.3248 13.3222C13.877 13.7701 13.2841 14.0435 12.6528 14.0934C12.0214 14.1433 11.393 13.9664 10.8803 13.5944C10.5886 14.6689 10.6413 15.8079 11.0308 16.8509C11.4203 17.8939 12.1271 18.7885 13.0518 19.4088C13.9764 20.029 15.0723 20.3436 16.1851 20.3084C17.2979 20.2732 18.3717 19.8898 19.2552 19.2123C20.1388 18.5348 20.7876 17.5973 21.1103 16.5317C21.4331 15.4661 21.4135 14.3261 21.0544 13.2722C20.6953 12.2183 20.0147 11.3036 19.1085 10.6568C18.2022 10.01 17.116 9.6637 16.0026 9.66665Z\"/>\n        <rect width=\"32\" height=\"28.4444\" fill=\"none\"/>\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", 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}.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)}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i3.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], 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"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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: i5.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i5.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: HtmlViewComponent, selector: "croco-html-view", inputs: ["html"] }, { kind: "pipe", type: SpriteIconPathPipe, name: "spriteIconPath" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", 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\">\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\n      [useHtmlRaw]=\"useHtmlRaw\"\n      [html]=\"html\"\n      (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n      (rendered)=\"visualEditorRenderedHandler()\">\n    </croco-visual-editor>\n\n    <div style=\"height: 20px;\"></div>\n\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\"\n            cdkAutosizeMinRows=\"1\"\n            placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\"\n          (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n        </mat-form-field>\n      </div>\n    }\n\n    <button (click)=\"copyMarkUp()\"\n      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", 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}.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)}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i3.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], 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"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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: i5.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i5.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: HtmlViewComponent, selector: "croco-html-view", inputs: ["html"] }, { kind: "pipe", type: SpriteIconPathPipe, name: "spriteIconPath" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MainEditorComponent, decorators: [{
             type: Component,
@@ -79,7 +79,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                         MatIcon,
                         NgTemplateOutlet,
                         SpriteIconPathPipe
-                    ], template: "<mat-tab-group mat-stretch-tabs=\"false\" mat-align-tabs=\"start\">\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\n      [useHtmlRaw]=\"useHtmlRaw\"\n      [html]=\"html\"\n      (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n      (rendered)=\"visualEditorRenderedHandler()\">\n    </croco-visual-editor>\n\n    <div style=\"height: 20px;\"></div>\n\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\"\n            cdkAutosizeMinRows=\"1\"\n            placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\"\n          (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n        </mat-form-field>\n      </div>\n    }\n\n    <button (click)=\"copyMarkUp()\"\n      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\" viewBox=\"0 0 32 30\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M31.8081 14.1889C28.797 8.31109 22.8303 4.33331 16.0026 4.33331C9.17479 4.33331 3.20813 8.31109 0.197015 14.1889C0.0700503 14.4404 0.00390625 14.7182 0.00390625 15C0.00390625 15.2817 0.0700503 15.5596 0.197015 15.8111C3.20813 21.6889 9.17479 25.6666 16.0026 25.6666C22.8303 25.6666 28.797 21.6889 31.8081 15.8111C31.9351 15.5596 32.0012 15.2817 32.0012 15C32.0012 14.7182 31.9351 14.4404 31.8081 14.1889ZM16.0026 23C14.4203 23 12.8736 22.5308 11.558 21.6517C10.2424 20.7727 9.21704 19.5233 8.61154 18.0614C8.00603 16.5996 7.84761 14.9911 8.15629 13.4393C8.46497 11.8874 9.2269 10.4619 10.3457 9.34313C11.4645 8.22431 12.89 7.46238 14.4418 7.1537C15.9937 6.84502 17.6022 7.00344 19.064 7.60894C20.5258 8.21444 21.7753 9.23982 22.6543 10.5554C23.5334 11.871 24.0026 13.4177 24.0026 15C24.0033 16.0508 23.7969 17.0914 23.3951 18.0623C22.9933 19.0332 22.4041 19.9154 21.6611 20.6585C20.918 21.4015 20.0358 21.9907 19.0649 22.3925C18.094 22.7943 17.0534 23.0007 16.0026 23ZM16.0026 9.66665C15.5267 9.67352 15.0539 9.74453 14.597 9.87776C14.9689 10.3904 15.1459 11.0188 15.096 11.6502C15.0461 12.2815 14.7726 12.8744 14.3248 13.3222C13.877 13.7701 13.2841 14.0435 12.6528 14.0934C12.0214 14.1433 11.393 13.9664 10.8803 13.5944C10.5886 14.6689 10.6413 15.8079 11.0308 16.8509C11.4203 17.8939 12.1271 18.7885 13.0518 19.4088C13.9764 20.029 15.0723 20.3436 16.1851 20.3084C17.2979 20.2732 18.3717 19.8898 19.2552 19.2123C20.1388 18.5348 20.7876 17.5973 21.1103 16.5317C21.4331 15.4661 21.4135 14.3261 21.0544 13.2722C20.6953 12.2183 20.0147 11.3036 19.1085 10.6568C18.2022 10.01 17.116 9.6637 16.0026 9.66665Z\"/>\n        <rect width=\"32\" height=\"28.4444\" fill=\"none\"/>\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", 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}.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)}\n"] }]
+                    ], template: "<mat-tab-group mat-stretch-tabs=\"false\" mat-align-tabs=\"start\">\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\n      [useHtmlRaw]=\"useHtmlRaw\"\n      [html]=\"html\"\n      (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n      (rendered)=\"visualEditorRenderedHandler()\">\n    </croco-visual-editor>\n\n    <div style=\"height: 20px;\"></div>\n\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\"\n            cdkAutosizeMinRows=\"1\"\n            placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\"\n          (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n        </mat-form-field>\n      </div>\n    }\n\n    <button (click)=\"copyMarkUp()\"\n      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", 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}.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)}\n"] }]
         }], ctorParameters: () => [{ type: i1.ClipboardService }, { type: i2.MatSnackBar }, { type: i0.ChangeDetectorRef }], propDecorators: { visualEditor: [{
                 type: ViewChild,
                 args: ["visualEditor", { static: true }]
@@ -94,4 +94,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
             }], onHtmlChanged: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFpbi1lZGl0b3IuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY3JvY28taHRtbC9zcmMvbGliL2NvbXBvbmVudHMvZWRpdG9yL21haW4tZWRpdG9yL21haW4tZWRpdG9yLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Nyb2NvLWh0bWwvc3JjL2xpYi9jb21wb25lbnRzL2VkaXRvci9tYWluLWVkaXRvci9tYWluLWVkaXRvci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQXlELFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFHakosT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sMENBQTBDLENBQUM7QUFDakYsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sb0RBQW9ELENBQUM7QUFDekYsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUNyRCxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDN0MsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDOUQsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQ25ELE9BQU8sRUFBRSxZQUFZLEVBQUUsUUFBUSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDdEUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQ3hFLE9BQU8sRUFBQyxPQUFPLEVBQUMsTUFBTSx3QkFBd0IsQ0FBQztBQUMvQyxPQUFPLEVBQUMsZ0JBQWdCLEVBQUMsTUFBTSxpQkFBaUIsQ0FBQztBQUNqRCxPQUFPLEVBQUMsa0JBQWtCLEVBQUMsTUFBTSxzQ0FBc0MsQ0FBQzs7Ozs7OztBQXdCeEUsTUFBTSxPQUFPLG1CQUFtQjtJQW9COUIsWUFBb0IsaUJBQW1DLEVBQzdDLFNBQXNCLEVBQ3RCLE1BQXlCO1FBRmYsc0JBQWlCLEdBQWpCLGlCQUFpQixDQUFrQjtRQUM3QyxjQUFTLEdBQVQsU0FBUyxDQUFhO1FBQ3RCLFdBQU0sR0FBTixNQUFNLENBQW1CO1FBcEJuQyx5QkFBb0IsR0FBRyxLQUFLLENBQUM7UUFNN0IsZUFBVSxHQUFHLElBQUksQ0FBQztRQUdsQixlQUFVLEdBQUcsS0FBSyxDQUFDO1FBSW5CLFNBQUksR0FBVyxFQUFFLENBQUM7UUFHbEIsa0JBQWEsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO0lBSUosQ0FBQztJQUV4QyxlQUFlO1FBQ2IsSUFBSSxDQUFDLG1CQUFtQixFQUFFLENBQUM7SUFDN0IsQ0FBQztJQUVELHFCQUFxQjtRQUNuQixJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsRUFBRSxDQUFDO0lBQzlCLENBQUM7SUFFRCwyQkFBMkI7UUFDekIsSUFBSSxDQUFDLG9CQUFvQixHQUFHLElBQUksQ0FBQztRQUNqQyxJQUFJLENBQUMsbUJBQW1CLEVBQUUsQ0FBQztJQUM3QixDQUFDO0lBRUQsb0JBQW9CLENBQUMsSUFBWTtRQUMvQixJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQztRQUNqQixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNoQyxDQUFDO0lBRUQsMkJBQTJCO1FBQ3pCLElBQUksQ0FBQyxtQkFBbUIsRUFBRSxDQUFDO1FBQzNCLElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDdkMsQ0FBQztJQUVELG1CQUFtQjtRQUNqQixJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDO1FBQ25DLElBQUksQ0FBQyxZQUFZLENBQUMsbUJBQW1CLEVBQUUsQ0FBQztRQUN4QyxJQUFJLENBQUMsTUFBTSxDQUFDLFlBQVksRUFBRSxDQUFDO0lBQzdCLENBQUM7SUFFRCxVQUFVO1FBQ1IsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMscUNBQXFDLEVBQUUsU0FBUyxFQUFFLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRSxDQUFDLENBQUM7UUFDMUYsSUFBSSxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDekMsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLENBQUMsWUFBWSxDQUFDLG1CQUFtQixFQUFFLENBQUM7SUFDMUMsQ0FBQzs4R0E1RFUsbUJBQW1CO2tHQUFuQixtQkFBbUIsdVZDdkNoQyxzdUhBZ0VBLDR4Q0R6Q0ksYUFBYSxxc0JBQ2IscUJBQXFCLDhKQUNyQixZQUFZLDRMQUNaLFFBQVEsc0RBQ1IsUUFBUSxpVUFDUixtQkFBbUIsd01BQ25CLFdBQVcsK21CQUNYLFNBQVMsZ0xBQ1QsYUFBYSwyTkFFYixpQkFBaUIseUVBR2pCLGtCQUFrQjs7MkZBR1QsbUJBQW1CO2tCQXRCL0IsU0FBUzsrQkFDSSx3QkFBd0IsY0FHdEIsSUFBSSxXQUNUO3dCQUNQLGFBQWE7d0JBQ2IscUJBQXFCO3dCQUNyQixZQUFZO3dCQUNaLFFBQVE7d0JBQ1IsUUFBUTt3QkFDUixtQkFBbUI7d0JBQ25CLFdBQVc7d0JBQ1gsU0FBUzt3QkFDVCxhQUFhO3dCQUNiLG1CQUFtQjt3QkFDbkIsaUJBQWlCO3dCQUNqQixPQUFPO3dCQUNQLGdCQUFnQjt3QkFDaEIsa0JBQWtCO3FCQUNuQjsrSUFPRCxZQUFZO3NCQURYLFNBQVM7dUJBQUMsY0FBYyxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRTtnQkFJM0MsVUFBVTtzQkFEVCxLQUFLO2dCQUlOLFVBQVU7c0JBRFQsS0FBSztnQkFLTixJQUFJO3NCQUZILEtBQUs7O3NCQUNMLE1BQU07Z0JBSVAsYUFBYTtzQkFEWixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQWZ0ZXJDb250ZW50Q2hlY2tlZCwgQWZ0ZXJWaWV3SW5pdCwgQ2hhbmdlRGV0ZWN0b3JSZWYsIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTWF0U25hY2tCYXIgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9zbmFjay1iYXInO1xuaW1wb3J0IHsgQ2xpcGJvYXJkU2VydmljZSB9IGZyb20gJ25neC1jbGlwYm9hcmQnO1xuaW1wb3J0IHsgVmlzdWFsRWRpdG9yQ29tcG9uZW50IH0gZnJvbSAnLi4vdmlzdWFsLWVkaXRvci92aXN1YWwtZWRpdG9yLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBYbWxUYWdWaWV3Q29tcG9uZW50IH0gZnJvbSAnLi4vLi4veG1sLXRhZ3MveG1sLXRhZy12aWV3L3htbC10YWctdmlldy5jb21wb25lbnQnO1xuaW1wb3J0IHsgTWF0Q2FyZE1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2NhcmQnO1xuaW1wb3J0IHsgTWF0QnV0dG9uIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvYnV0dG9uJztcbmltcG9ydCB7IEZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgQ2RrVGV4dGFyZWFBdXRvc2l6ZSB9IGZyb20gJ0Bhbmd1bGFyL2Nkay90ZXh0LWZpZWxkJztcbmltcG9ydCB7IE1hdElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvaW5wdXQnO1xuaW1wb3J0IHsgTWF0Rm9ybUZpZWxkLCBNYXRMYWJlbCB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2Zvcm0tZmllbGQnO1xuaW1wb3J0IHsgTWF0VGFic01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3RhYnMnO1xuaW1wb3J0IHsgSHRtbFZpZXdDb21wb25lbnQgfSBmcm9tIFwiLi4vLi4vaHRtbC12aWV3L2h0bWwtdmlldy5jb21wb25lbnRcIjtcbmltcG9ydCB7TWF0SWNvbn0gZnJvbSBcIkBhbmd1bGFyL21hdGVyaWFsL2ljb25cIjtcbmltcG9ydCB7TmdUZW1wbGF0ZU91dGxldH0gZnJvbSBcIkBhbmd1bGFyL2NvbW1vblwiO1xuaW1wb3J0IHtTcHJpdGVJY29uUGF0aFBpcGV9IGZyb20gXCIuLi8uLi8uLi9waXBlcy9zcHJpdGUtaWNvbi1wYXRoLnBpcGVcIjtcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdjcm9jby1odG1sLW1haW4tZWRpdG9yJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vbWFpbi1lZGl0b3IuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL21haW4tZWRpdG9yLmNvbXBvbmVudC5jc3MnXSxcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXG4gICAgTWF0VGFic01vZHVsZSxcbiAgICBWaXN1YWxFZGl0b3JDb21wb25lbnQsXG4gICAgTWF0Rm9ybUZpZWxkLFxuICAgIE1hdExhYmVsLFxuICAgIE1hdElucHV0LFxuICAgIENka1RleHRhcmVhQXV0b3NpemUsXG4gICAgRm9ybXNNb2R1bGUsXG4gICAgTWF0QnV0dG9uLFxuICAgIE1hdENhcmRNb2R1bGUsXG4gICAgWG1sVGFnVmlld0NvbXBvbmVudCxcbiAgICBIdG1sVmlld0NvbXBvbmVudCxcbiAgICBNYXRJY29uLFxuICAgIE5nVGVtcGxhdGVPdXRsZXQsXG4gICAgU3ByaXRlSWNvblBhdGhQaXBlXG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgTWFpbkVkaXRvckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgQWZ0ZXJDb250ZW50Q2hlY2tlZCwgQWZ0ZXJWaWV3SW5pdCB7XG5cbiAgdmlzdWFsRWRpdG9yUmVuZGVyZWQgPSBmYWxzZTtcblxuICBAVmlld0NoaWxkKFwidmlzdWFsRWRpdG9yXCIsIHsgc3RhdGljOiB0cnVlIH0pXG4gIHZpc3VhbEVkaXRvcjogVmlzdWFsRWRpdG9yQ29tcG9uZW50O1xuXG4gIEBJbnB1dCgpXG4gIHNob3dNYXJrVXAgPSB0cnVlO1xuXG4gIEBJbnB1dCgpXG4gIHVzZUh0bWxSYXcgPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBAT3V0cHV0KClcbiAgaHRtbDogc3RyaW5nID0gXCJcIjtcblxuICBAT3V0cHV0KClcbiAgb25IdG1sQ2hhbmdlZCA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgX2NsaXBib2FyZFNlcnZpY2U6IENsaXBib2FyZFNlcnZpY2UsXG4gICAgcHJpdmF0ZSBfc25hY2tCYXI6IE1hdFNuYWNrQmFyLFxuICAgIHByaXZhdGUgX2NkcmVmOiBDaGFuZ2VEZXRlY3RvclJlZikgeyB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgIHRoaXMucmVjYWxjdWxhdGVCb2R5VGFncygpO1xuICB9XG5cbiAgbmdBZnRlckNvbnRlbnRDaGVja2VkKCk6IHZvaWQge1xuICAgIHRoaXMuX2NkcmVmLmRldGVjdENoYW5nZXMoKTtcbiAgfVxuXG4gIHZpc3VhbEVkaXRvclJlbmRlcmVkSGFuZGxlcigpe1xuICAgIHRoaXMudmlzdWFsRWRpdG9yUmVuZGVyZWQgPSB0cnVlO1xuICAgIHRoaXMucmVjYWxjdWxhdGVCb2R5VGFncygpO1xuICB9XG5cbiAgb25IdG1sQ2hhbmdlZEhhbmRsZXIoaHRtbDogc3RyaW5nKSB7XG4gICAgdGhpcy5odG1sID0gaHRtbDtcbiAgICB0aGlzLm9uSHRtbENoYW5nZWQuZW1pdChodG1sKTtcbiAgfVxuXG4gIHRleHRBcmVhTW9kZWxDaGFuZ2VkSGFuZGxlcigpe1xuICAgIHRoaXMucmVjYWxjdWxhdGVCb2R5VGFncygpO1xuICAgIHRoaXMub25IdG1sQ2hhbmdlZEhhbmRsZXIodGhpcy5odG1sKTtcbiAgfVxuXG4gIHJlY2FsY3VsYXRlQm9keVRhZ3MoKSB7XG4gICAgdGhpcy52aXN1YWxFZGl0b3IuaHRtbCA9IHRoaXMuaHRtbDtcbiAgICB0aGlzLnZpc3VhbEVkaXRvci5yZWNhbGN1bGF0ZUJvZHlUYWdzKCk7XG4gICAgdGhpcy5fY2RyZWYubWFya0ZvckNoZWNrKCk7XG4gIH1cblxuICBjb3B5TWFya1VwKCkge1xuICAgIHRoaXMuX3NuYWNrQmFyLm9wZW4oXCLQoNCw0LfQvNC10YLQutCwINGB0LrQvtC/0LjRgNC+0LLQsNC90LAg0LIg0LHRg9GE0LXRgCDQvtCx0LzQtdC90LBcIiwgXCLQl9Cw0LrRgNGL0YLRjFwiLCB7IGR1cmF0aW9uOiAxNTAwIH0pO1xuICAgIHRoaXMuX2NsaXBib2FyZFNlcnZpY2UuY29weSh0aGlzLmh0bWwpO1xuICB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy52aXN1YWxFZGl0b3IucmVjYWxjdWxhdGVCb2R5VGFncygpO1xuICB9XG59XG4iLCI8bWF0LXRhYi1ncm91cCBtYXQtc3RyZXRjaC10YWJzPVwiZmFsc2VcIiBtYXQtYWxpZ24tdGFicz1cInN0YXJ0XCI+XG4gIDxtYXQtdGFiPlxuICAgIDxuZy10ZW1wbGF0ZSBtYXQtdGFiLWxhYmVsPlxuICAgICAgPHN2ZyBjbGFzcz1cImN1c3RvbS1pY29uXCIgd2lkdGg9XCIzMlwiIGhlaWdodD1cIjI2XCI+XG4gICAgICAgIDx1c2UgW2F0dHIueGxpbms6aHJlZl09XCIndmlzdWFsLWVkaXRvci10YWInIHwgc3ByaXRlSWNvblBhdGhcIj48L3VzZT5cbiAgICAgIDwvc3ZnPlxuICAgIDwvbmctdGVtcGxhdGU+XG5cbiAgICA8ZGl2IHN0eWxlPVwiaGVpZ2h0OiAyMHB4O1wiPjwvZGl2PlxuXG4gICAgPGNyb2NvLXZpc3VhbC1lZGl0b3IgI3Zpc3VhbEVkaXRvclxuICAgICAgW3VzZUh0bWxSYXddPVwidXNlSHRtbFJhd1wiXG4gICAgICBbaHRtbF09XCJodG1sXCJcbiAgICAgIChvbkh0bWxDaGFuZ2VkKT1cIm9uSHRtbENoYW5nZWRIYW5kbGVyKCRldmVudClcIlxuICAgICAgKHJlbmRlcmVkKT1cInZpc3VhbEVkaXRvclJlbmRlcmVkSGFuZGxlcigpXCI+XG4gICAgPC9jcm9jby12aXN1YWwtZWRpdG9yPlxuXG4gICAgPGRpdiBzdHlsZT1cImhlaWdodDogMjBweDtcIj48L2Rpdj5cblxuICA8L21hdC10YWI+XG5cbiAgPG1hdC10YWI+XG4gICAgPG5nLXRlbXBsYXRlIG1hdC10YWItbGFiZWw+XG4gICAgICA8c3ZnIGNsYXNzPVwiY3VzdG9tLWljb25cIiB3aWR0aD1cIjMyXCIgaGVpZ2h0PVwiMjZcIj5cbiAgICAgICAgPHVzZSBbYXR0ci54bGluazpocmVmXT1cIidzb3VyY2UtY29kZS10YWInIHwgc3ByaXRlSWNvblBhdGhcIj48L3VzZT5cbiAgICAgIDwvc3ZnPlxuICAgIDwvbmctdGVtcGxhdGU+XG5cbiAgICA8ZGl2IHN0eWxlPVwiaGVpZ2h0OiAxMHB4O1wiPjwvZGl2PlxuICAgIEBpZiAodmlzdWFsRWRpdG9yUmVuZGVyZWQpIHtcbiAgICAgIDxkaXY+XG4gICAgICAgIDxtYXQtZm9ybS1maWVsZCBjbGFzcz1cInctMTAwXCI+XG4gICAgICAgICAgPG1hdC1sYWJlbD7QmNGB0YXQvtC00L3Ri9C5INC60L7QtDwvbWF0LWxhYmVsPlxuICAgICAgICAgIDx0ZXh0YXJlYSBtYXRJbnB1dCBjZGtUZXh0YXJlYUF1dG9zaXplICNhdXRvc2l6ZT1cImNka1RleHRhcmVhQXV0b3NpemVcIlxuICAgICAgICAgICAgY2RrQXV0b3NpemVNaW5Sb3dzPVwiMVwiXG4gICAgICAgICAgICBwbGFjZWhvbGRlcj1cItCY0YHRhdC+0LTQvdGL0Lkg0LrQvtC0XCIgWyhuZ01vZGVsKV09XCJodG1sXCJcbiAgICAgICAgICAobmdNb2RlbENoYW5nZSk9XCJ0ZXh0QXJlYU1vZGVsQ2hhbmdlZEhhbmRsZXIoKVwiPjwvdGV4dGFyZWE+XG4gICAgICAgIDwvbWF0LWZvcm0tZmllbGQ+XG4gICAgICA8L2Rpdj5cbiAgICB9XG5cbiAgICA8YnV0dG9uIChjbGljayk9XCJjb3B5TWFya1VwKClcIlxuICAgICAgbWF0LXJhaXNlZC1idXR0b24gY29sb3I9XCJwcmltYXJ5XCI+XG4gICAgICDQmtC+0L/QuNGA0L7QstCw0YLRjCDRgNCw0LfQvNC10YLQutGDXG4gICAgPC9idXR0b24+XG4gIDwvbWF0LXRhYj5cbiAgPG1hdC10YWI+XG4gICAgPG5nLXRlbXBsYXRlIG1hdC10YWItbGFiZWw+XG4gICAgICA8c3ZnIGNsYXNzPVwiY3VzdG9tLWljb25cIiB3aWR0aD1cIjMyXCIgaGVpZ2h0PVwiMzBcIiB2aWV3Qm94PVwiMCAwIDMyIDMwXCIgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiPlxuICAgICAgICA8cGF0aFxuICAgICAgICAgIGQ9XCJNMzEuODA4MSAxNC4xODg5QzI4Ljc5NyA4LjMxMTA5IDIyLjgzMDMgNC4zMzMzMSAxNi4wMDI2IDQuMzMzMzFDOS4xNzQ3OSA0LjMzMzMxIDMuMjA4MTMgOC4zMTEwOSAwLjE5NzAxNSAxNC4xODg5QzAuMDcwMDUwMyAxNC40NDA0IDAuMDAzOTA2MjUgMTQuNzE4MiAwLjAwMzkwNjI1IDE1QzAuMDAzOTA2MjUgMTUuMjgxNyAwLjA3MDA1MDMgMTUuNTU5NiAwLjE5NzAxNSAxNS44MTExQzMuMjA4MTMgMjEuNjg4OSA5LjE3NDc5IDI1LjY2NjYgMTYuMDAyNiAyNS42NjY2QzIyLjgzMDMgMjUuNjY2NiAyOC43OTcgMjEuNjg4OSAzMS44MDgxIDE1LjgxMTFDMzEuOTM1MSAxNS41NTk2IDMyLjAwMTIgMTUuMjgxNyAzMi4wMDEyIDE1QzMyLjAwMTIgMTQuNzE4MiAzMS45MzUxIDE0LjQ0MDQgMzEuODA4MSAxNC4xODg5Wk0xNi4wMDI2IDIzQzE0LjQyMDMgMjMgMTIuODczNiAyMi41MzA4IDExLjU1OCAyMS42NTE3QzEwLjI0MjQgMjAuNzcyNyA5LjIxNzA0IDE5LjUyMzMgOC42MTE1NCAxOC4wNjE0QzguMDA2MDMgMTYuNTk5NiA3Ljg0NzYxIDE0Ljk5MTEgOC4xNTYyOSAxMy40MzkzQzguNDY0OTcgMTEuODg3NCA5LjIyNjkgMTAuNDYxOSAxMC4zNDU3IDkuMzQzMTNDMTEuNDY0NSA4LjIyNDMxIDEyLjg5IDcuNDYyMzggMTQuNDQxOCA3LjE1MzdDMTUuOTkzNyA2Ljg0NTAyIDE3LjYwMjIgNy4wMDM0NCAxOS4wNjQgNy42MDg5NEMyMC41MjU4IDguMjE0NDQgMjEuNzc1MyA5LjIzOTgyIDIyLjY1NDMgMTAuNTU1NEMyMy41MzM0IDExLjg3MSAyNC4wMDI2IDEzLjQxNzcgMjQuMDAyNiAxNUMyNC4wMDMzIDE2LjA1MDggMjMuNzk2OSAxNy4wOTE0IDIzLjM5NTEgMTguMDYyM0MyMi45OTMzIDE5LjAzMzIgMjIuNDA0MSAxOS45MTU0IDIxLjY2MTEgMjAuNjU4NUMyMC45MTggMjEuNDAxNSAyMC4wMzU4IDIxLjk5MDcgMTkuMDY0OSAyMi4zOTI1QzE4LjA5NCAyMi43OTQzIDE3LjA1MzQgMjMuMDAwNyAxNi4wMDI2IDIzWk0xNi4wMDI2IDkuNjY2NjVDMTUuNTI2NyA5LjY3MzUyIDE1LjA1MzkgOS43NDQ1MyAxNC41OTcgOS44Nzc3NkMxNC45Njg5IDEwLjM5MDQgMTUuMTQ1OSAxMS4wMTg4IDE1LjA5NiAxMS42NTAyQzE1LjA0NjEgMTIuMjgxNSAxNC43NzI2IDEyLjg3NDQgMTQuMzI0OCAxMy4zMjIyQzEzLjg3NyAxMy43NzAxIDEzLjI4NDEgMTQuMDQzNSAxMi42NTI4IDE0LjA5MzRDMTIuMDIxNCAxNC4xNDMzIDExLjM5MyAxMy45NjY0IDEwLjg4MDMgMTMuNTk0NEMxMC41ODg2IDE0LjY2ODkgMTAuNjQxMyAxNS44MDc5IDExLjAzMDggMTYuODUwOUMxMS40MjAzIDE3Ljg5MzkgMTIuMTI3MSAxOC43ODg1IDEzLjA1MTggMTkuNDA4OEMxMy45NzY0IDIwLjAyOSAxNS4wNzIzIDIwLjM0MzYgMTYuMTg1MSAyMC4zMDg0QzE3LjI5NzkgMjAuMjczMiAxOC4zNzE3IDE5Ljg4OTggMTkuMjU1MiAxOS4yMTIzQzIwLjEzODggMTguNTM0OCAyMC43ODc2IDE3LjU5NzMgMjEuMTEwMyAxNi41MzE3QzIxLjQzMzEgMTUuNDY2MSAyMS40MTM1IDE0LjMyNjEgMjEuMDU0NCAxMy4yNzIyQzIwLjY5NTMgMTIuMjE4MyAyMC4wMTQ3IDExLjMwMzYgMTkuMTA4NSAxMC42NTY4QzE4LjIwMjIgMTAuMDEgMTcuMTE2IDkuNjYzNyAxNi4wMDI2IDkuNjY2NjVaXCIvPlxuICAgICAgICA8cmVjdCB3aWR0aD1cIjMyXCIgaGVpZ2h0PVwiMjguNDQ0NFwiIGZpbGw9XCJub25lXCIvPlxuICAgICAgPC9zdmc+XG4gICAgPC9uZy10ZW1wbGF0ZT5cblxuXG4gICAgPG1hdC1jYXJkIHN0eWxlPVwicGFkZGluZzogMnB4O1wiIGNsYXNzPVwibWF0LWNhcmRcIj5cbiAgICAgIDxtYXQtY2FyZC1jb250ZW50PlxuICAgICAgICA8Y3JvY28taHRtbC12aWV3IFtodG1sXT1cImh0bWxcIj5cbiAgICAgICAgPC9jcm9jby1odG1sLXZpZXc+XG4gICAgICA8L21hdC1jYXJkLWNvbnRlbnQ+XG4gICAgPC9tYXQtY2FyZD5cbiAgPC9tYXQtdGFiPlxuPC9tYXQtdGFiLWdyb3VwPlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFpbi1lZGl0b3IuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY3JvY28taHRtbC9zcmMvbGliL2NvbXBvbmVudHMvZWRpdG9yL21haW4tZWRpdG9yL21haW4tZWRpdG9yLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Nyb2NvLWh0bWwvc3JjL2xpYi9jb21wb25lbnRzL2VkaXRvci9tYWluLWVkaXRvci9tYWluLWVkaXRvci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQXlELFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFHakosT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sMENBQTBDLENBQUM7QUFDakYsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sb0RBQW9ELENBQUM7QUFDekYsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUNyRCxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDN0MsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDOUQsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQ25ELE9BQU8sRUFBRSxZQUFZLEVBQUUsUUFBUSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDdEUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQ3hFLE9BQU8sRUFBQyxPQUFPLEVBQUMsTUFBTSx3QkFBd0IsQ0FBQztBQUMvQyxPQUFPLEVBQUMs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WixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQWZ0ZXJDb250ZW50Q2hlY2tlZCwgQWZ0ZXJWaWV3SW5pdCwgQ2hhbmdlRGV0ZWN0b3JSZWYsIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTWF0U25hY2tCYXIgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9zbmFjay1iYXInO1xuaW1wb3J0IHsgQ2xpcGJvYXJkU2VydmljZSB9IGZyb20gJ25neC1jbGlwYm9hcmQnO1xuaW1wb3J0IHsgVmlzdWFsRWRpdG9yQ29tcG9uZW50IH0gZnJvbSAnLi4vdmlzdWFsLWVkaXRvci92aXN1YWwtZWRpdG9yLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBYbWxUYWdWaWV3Q29tcG9uZW50IH0gZnJvbSAnLi4vLi4veG1sLXRhZ3MveG1sLXRhZy12aWV3L3htbC10YWctdmlldy5jb21wb25lbnQnO1xuaW1wb3J0IHsgTWF0Q2FyZE1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2NhcmQnO1xuaW1wb3J0IHsgTWF0QnV0dG9uIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvYnV0dG9uJztcbmltcG9ydCB7IEZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgQ2RrVGV4dGFyZWFBdXRvc2l6ZSB9IGZyb20gJ0Bhbmd1bGFyL2Nkay90ZXh0LWZpZWxkJztcbmltcG9ydCB7IE1hdElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvaW5wdXQnO1xuaW1wb3J0IHsgTWF0Rm9ybUZpZWxkLCBNYXRMYWJlbCB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2Zvcm0tZmllbGQnO1xuaW1wb3J0IHsgTWF0VGFic01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3RhYnMnO1xuaW1wb3J0IHsgSHRtbFZpZXdDb21wb25lbnQgfSBmcm9tIFwiLi4vLi4vaHRtbC12aWV3L2h0bWwtdmlldy5jb21wb25lbnRcIjtcbmltcG9ydCB7TWF0SWNvbn0gZnJvbSBcIkBhbmd1bGFyL21hdGVyaWFsL2ljb25cIjtcbmltcG9ydCB7TmdUZW1wbGF0ZU91dGxldH0gZnJvbSBcIkBhbmd1bGFyL2NvbW1vblwiO1xuaW1wb3J0IHtTcHJpdGVJY29uUGF0aFBpcGV9IGZyb20gXCIuLi8uLi8uLi9waXBlcy9zcHJpdGUtaWNvbi1wYXRoLnBpcGVcIjtcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdjcm9jby1odG1sLW1haW4tZWRpdG9yJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vbWFpbi1lZGl0b3IuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL21haW4tZWRpdG9yLmNvbXBvbmVudC5jc3MnXSxcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXG4gICAgTWF0VGFic01vZHVsZSxcbiAgICBWaXN1YWxFZGl0b3JDb21wb25lbnQsXG4gICAgTWF0Rm9ybUZpZWxkLFxuICAgIE1hdExhYmVsLFxuICAgIE1hdElucHV0LFxuICAgIENka1RleHRhcmVhQXV0b3NpemUsXG4gICAgRm9ybXNNb2R1bGUsXG4gICAgTWF0QnV0dG9uLFxuICAgIE1hdENhcmRNb2R1bGUsXG4gICAgWG1sVGFnVmlld0NvbXBvbmVudCxcbiAgICBIdG1sVmlld0NvbXBvbmVudCxcbiAgICBNYXRJY29uLFxuICAgIE5nVGVtcGxhdGVPdXRsZXQsXG4gICAgU3ByaXRlSWNvblBhdGhQaXBlXG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgTWFpbkVkaXRvckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgQWZ0ZXJDb250ZW50Q2hlY2tlZCwgQWZ0ZXJWaWV3SW5pdCB7XG5cbiAgdmlzdWFsRWRpdG9yUmVuZGVyZWQgPSBmYWxzZTtcblxuICBAVmlld0NoaWxkKFwidmlzdWFsRWRpdG9yXCIsIHsgc3RhdGljOiB0cnVlIH0pXG4gIHZpc3VhbEVkaXRvcjogVmlzdWFsRWRpdG9yQ29tcG9uZW50O1xuXG4gIEBJbnB1dCgpXG4gIHNob3dNYXJrVXAgPSB0cnVlO1xuXG4gIEBJbnB1dCgpXG4gIHVzZUh0bWxSYXcgPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBAT3V0cHV0KClcbiAgaHRtbDogc3RyaW5nID0gXCJcIjtcblxuICBAT3V0cHV0KClcbiAgb25IdG1sQ2hhbmdlZCA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgX2NsaXBib2FyZFNlcnZpY2U6IENsaXBib2FyZFNlcnZpY2UsXG4gICAgcHJpdmF0ZSBfc25hY2tCYXI6IE1hdFNuYWNrQmFyLFxuICAgIHByaXZhdGUgX2NkcmVmOiBDaGFuZ2VEZXRlY3RvclJlZikgeyB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgIHRoaXMucmVjYWxjdWxhdGVCb2R5VGFncygpO1xuICB9XG5cbiAgbmdBZnRlckNvbnRlbnRDaGVja2VkKCk6IHZvaWQge1xuICAgIHRoaXMuX2NkcmVmLmRldGVjdENoYW5nZXMoKTtcbiAgfVxuXG4gIHZpc3VhbEVkaXRvclJlbmRlcmVkSGFuZGxlcigpe1xuICAgIHRoaXMudmlzdWFsRWRpdG9yUmVuZGVyZWQgPSB0cnVlO1xuICAgIHRoaXMucmVjYWxjdWxhdGVCb2R5VGFncygpO1xuICB9XG5cbiAgb25IdG1sQ2hhbmdlZEhhbmRsZXIoaHRtbDogc3RyaW5nKSB7XG4gICAgdGhpcy5odG1sID0gaHRtbDtcbiAgICB0aGlzLm9uSHRtbENoYW5nZWQuZW1pdChodG1sKTtcbiAgfVxuXG4gIHRleHRBcmVhTW9kZWxDaGFuZ2VkSGFuZGxlcigpe1xuICAgIHRoaXMucmVjYWxjdWxhdGVCb2R5VGFncygpO1xuICAgIHRoaXMub25IdG1sQ2hhbmdlZEhhbmRsZXIodGhpcy5odG1sKTtcbiAgfVxuXG4gIHJlY2FsY3VsYXRlQm9keVRhZ3MoKSB7XG4gICAgdGhpcy52aXN1YWxFZGl0b3IuaHRtbCA9IHRoaXMuaHRtbDtcbiAgICB0aGlzLnZpc3VhbEVkaXRvci5yZWNhbGN1bGF0ZUJvZHlUYWdzKCk7XG4gICAgdGhpcy5fY2RyZWYubWFya0ZvckNoZWNrKCk7XG4gIH1cblxuICBjb3B5TWFya1VwKCkge1xuICAgIHRoaXMuX3NuYWNrQmFyLm9wZW4oXCLQoNCw0LfQvNC10YLQutCwINGB0LrQvtC/0LjRgNC+0LLQsNC90LAg0LIg0LHRg9GE0LXRgCDQvtCx0LzQtdC90LBcIiwgXCLQl9Cw0LrRgNGL0YLRjFwiLCB7IGR1cmF0aW9uOiAxNTAwIH0pO1xuICAgIHRoaXMuX2NsaXBib2FyZFNlcnZpY2UuY29weSh0aGlzLmh0bWwpO1xuICB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy52aXN1YWxFZGl0b3IucmVjYWxjdWxhdGVCb2R5VGFncygpO1xuICB9XG59XG4iLCI8bWF0LXRhYi1ncm91cCBtYXQtc3RyZXRjaC10YWJzPVwiZmFsc2VcIiBtYXQtYWxpZ24tdGFicz1cInN0YXJ0XCI+XG4gIDxtYXQtdGFiPlxuICAgIDxuZy10ZW1wbGF0ZSBtYXQtdGFiLWxhYmVsPlxuICAgICAgPHN2ZyBjbGFzcz1cImN1c3RvbS1pY29uXCIgd2lkdGg9XCIzMlwiIGhlaWdodD1cIjI2XCI+XG4gICAgICAgIDx1c2UgW2F0dHIueGxpbms6aHJlZl09XCIndmlzdWFsLWVkaXRvci10YWInIHwgc3ByaXRlSWNvblBhdGhcIj48L3VzZT5cbiAgICAgIDwvc3ZnPlxuICAgIDwvbmctdGVtcGxhdGU+XG5cbiAgICA8ZGl2IHN0eWxlPVwiaGVpZ2h0OiAyMHB4O1wiPjwvZGl2PlxuXG4gICAgPGNyb2NvLXZpc3VhbC1lZGl0b3IgI3Zpc3VhbEVkaXRvclxuICAgICAgW3VzZUh0bWxSYXddPVwidXNlSHRtbFJhd1wiXG4gICAgICBbaHRtbF09XCJodG1sXCJcbiAgICAgIChvbkh0bWxDaGFuZ2VkKT1cIm9uSHRtbENoYW5nZWRIYW5kbGVyKCRldmVudClcIlxuICAgICAgKHJlbmRlcmVkKT1cInZpc3VhbEVkaXRvclJlbmRlcmVkSGFuZGxlcigpXCI+XG4gICAgPC9jcm9jby12aXN1YWwtZWRpdG9yPlxuXG4gICAgPGRpdiBzdHlsZT1cImhlaWdodDogMjBweDtcIj48L2Rpdj5cblxuICA8L21hdC10YWI+XG5cbiAgPG1hdC10YWI+XG4gICAgPG5nLXRlbXBsYXRlIG1hdC10YWItbGFiZWw+XG4gICAgICA8c3ZnIGNsYXNzPVwiY3VzdG9tLWljb25cIiB3aWR0aD1cIjMyXCIgaGVpZ2h0PVwiMjZcIj5cbiAgICAgICAgPHVzZSBbYXR0ci54bGluazpocmVmXT1cIidzb3VyY2UtY29kZS10YWInIHwgc3ByaXRlSWNvblBhdGhcIj48L3VzZT5cbiAgICAgIDwvc3ZnPlxuICAgIDwvbmctdGVtcGxhdGU+XG5cbiAgICA8ZGl2IHN0eWxlPVwiaGVpZ2h0OiAxMHB4O1wiPjwvZGl2PlxuICAgIEBpZiAodmlzdWFsRWRpdG9yUmVuZGVyZWQpIHtcbiAgICAgIDxkaXY+XG4gICAgICAgIDxtYXQtZm9ybS1maWVsZCBjbGFzcz1cInctMTAwXCI+XG4gICAgICAgICAgPG1hdC1sYWJlbD7QmNGB0YXQvtC00L3Ri9C5INC60L7QtDwvbWF0LWxhYmVsPlxuICAgICAgICAgIDx0ZXh0YXJlYSBtYXRJbnB1dCBjZGtUZXh0YXJlYUF1dG9zaXplICNhdXRvc2l6ZT1cImNka1RleHRhcmVhQXV0b3NpemVcIlxuICAgICAgICAgICAgY2RrQXV0b3NpemVNaW5Sb3dzPVwiMVwiXG4gICAgICAgICAgICBwbGFjZWhvbGRlcj1cItCY0YHRhdC+0LTQvdGL0Lkg0LrQvtC0XCIgWyhuZ01vZGVsKV09XCJodG1sXCJcbiAgICAgICAgICAobmdNb2RlbENoYW5nZSk9XCJ0ZXh0QXJlYU1vZGVsQ2hhbmdlZEhhbmRsZXIoKVwiPjwvdGV4dGFyZWE+XG4gICAgICAgIDwvbWF0LWZvcm0tZmllbGQ+XG4gICAgICA8L2Rpdj5cbiAgICB9XG5cbiAgICA8YnV0dG9uIChjbGljayk9XCJjb3B5TWFya1VwKClcIlxuICAgICAgbWF0LXJhaXNlZC1idXR0b24gY29sb3I9XCJwcmltYXJ5XCI+XG4gICAgICDQmtC+0L/QuNGA0L7QstCw0YLRjCDRgNCw0LfQvNC10YLQutGDXG4gICAgPC9idXR0b24+XG4gIDwvbWF0LXRhYj5cbiAgPG1hdC10YWI+XG4gICAgPG5nLXRlbXBsYXRlIG1hdC10YWItbGFiZWw+XG4gICAgICA8c3ZnIGNsYXNzPVwiY3VzdG9tLWljb25cIiB3aWR0aD1cIjMyXCIgaGVpZ2h0PVwiMzBcIj5cbiAgICAgICAgPHVzZSBbYXR0ci54bGluazpocmVmXT1cIid2aWV3ZXItdGFiJyB8IHNwcml0ZUljb25QYXRoXCI+PC91c2U+XG4gICAgICA8L3N2Zz5cbiAgICA8L25nLXRlbXBsYXRlPlxuXG5cbiAgICA8bWF0LWNhcmQgc3R5bGU9XCJwYWRkaW5nOiAycHg7XCIgY2xhc3M9XCJtYXQtY2FyZFwiPlxuICAgICAgPG1hdC1jYXJkLWNvbnRlbnQ+XG4gICAgICAgIDxjcm9jby1odG1sLXZpZXcgW2h0bWxdPVwiaHRtbFwiPlxuICAgICAgICA8L2Nyb2NvLWh0bWwtdmlldz5cbiAgICAgIDwvbWF0LWNhcmQtY29udGVudD5cbiAgICA8L21hdC1jYXJkPlxuICA8L21hdC10YWI+XG48L21hdC10YWItZ3JvdXA+XG4iXX0=

package/esm2022/lib/pipes/sprite-icon-path.pipe.mjs

@@ -3,7 +3,7 @@ import { spritesHash } from "../../sprites-hash";
 import * as i0 from "@angular/core";
 export class SpriteIconPathPipe {
     transform(id) {
-        return `assets/sprites/symbol/croco-html-svg-sprite-${spritesHash.symbol}.svg#${id}`;
+        return `assets/lib-sprites/symbol/croco-html-svg-sprite-${spritesHash.symbol}.svg#${id}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SpriteIconPathPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: SpriteIconPathPipe, isStandalone: true, name: "spriteIconPath" }); }
@@ -15,4 +15,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                     standalone: true,
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3ByaXRlLWljb24tcGF0aC5waXBlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY3JvY28taHRtbC9zcmMvbGliL3BpcGVzL3Nwcml0ZS1pY29uLXBhdGgucGlwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsSUFBSSxFQUFnQixNQUFNLGVBQWUsQ0FBQztBQUNsRCxPQUFPLEVBQUMsV0FBVyxFQUFDLE1BQU0sb0JBQW9CLENBQUM7O0FBTy9DLE1BQU0sT0FBTyxrQkFBa0I7SUFDN0IsU0FBUyxDQUFDLEVBQWlCO1FBQ3pCLE9BQU8sK0NBQStDLFdBQVcsQ0FBQyxNQUFNLFFBQVEsRUFBRSxFQUFFLENBQUM7SUFDdkYsQ0FBQzs4R0FIVSxrQkFBa0I7NEdBQWxCLGtCQUFrQjs7MkZBQWxCLGtCQUFrQjtrQkFKOUIsSUFBSTttQkFBQztvQkFDSixJQUFJLEVBQUUsZ0JBQWdCO29CQUN0QixVQUFVLEVBQUUsSUFBSTtpQkFDakIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1BpcGUsIFBpcGVUcmFuc2Zvcm19IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQge3Nwcml0ZXNIYXNofSBmcm9tIFwiLi4vLi4vc3ByaXRlcy1oYXNoXCI7XG5pbXBvcnQge1Nwcml0ZUlkc1R5cGV9IGZyb20gXCIuLi8uLi9zcHJpdGVzLWlkcy50eXBlXCI7XG5cbkBQaXBlKHtcbiAgbmFtZTogJ3Nwcml0ZUljb25QYXRoJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbn0pXG5leHBvcnQgY2xhc3MgU3ByaXRlSWNvblBhdGhQaXBlIGltcGxlbWVudHMgUGlwZVRyYW5zZm9ybSB7XG4gIHRyYW5zZm9ybShpZDogU3ByaXRlSWRzVHlwZSk6IHN0cmluZyB7XG4gICAgcmV0dXJuIGBhc3NldHMvc3ByaXRlcy9zeW1ib2wvY3JvY28taHRtbC1zdmctc3ByaXRlLSR7c3ByaXRlc0hhc2guc3ltYm9sfS5zdmcjJHtpZH1gO1xuICB9XG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3ByaXRlLWljb24tcGF0aC5waXBlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY3JvY28taHRtbC9zcmMvbGliL3BpcGVzL3Nwcml0ZS1pY29uLXBhdGgucGlwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsSUFBSSxFQUFnQixNQUFNLGVBQWUsQ0FBQztBQUNsRCxPQUFPLEVBQUMsV0FBVyxFQUFDLE1BQU0sb0JBQW9CLENBQUM7O0FBTy9DLE1BQU0sT0FBTyxrQkFBa0I7SUFDN0IsU0FBUyxDQUFDLEVBQWlCO1FBQ3pCLE9BQU8sbURBQW1ELFdBQVcsQ0FBQyxNQUFNLFFBQVEsRUFBRSxFQUFFLENBQUM7SUFDM0YsQ0FBQzs4R0FIVSxrQkFBa0I7NEdBQWxCLGtCQUFrQjs7MkZBQWxCLGtCQUFrQjtrQkFKOUIsSUFBSTttQkFBQztvQkFDSixJQUFJLEVBQUUsZ0JBQWdCO29CQUN0QixVQUFVLEVBQUUsSUFBSTtpQkFDakIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1BpcGUsIFBpcGVUcmFuc2Zvcm19IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQge3Nwcml0ZXNIYXNofSBmcm9tIFwiLi4vLi4vc3ByaXRlcy1oYXNoXCI7XG5pbXBvcnQge1Nwcml0ZUlkc1R5cGV9IGZyb20gXCIuLi8uLi9zcHJpdGVzLWlkcy50eXBlXCI7XG5cbkBQaXBlKHtcbiAgbmFtZTogJ3Nwcml0ZUljb25QYXRoJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbn0pXG5leHBvcnQgY2xhc3MgU3ByaXRlSWNvblBhdGhQaXBlIGltcGxlbWVudHMgUGlwZVRyYW5zZm9ybSB7XG4gIHRyYW5zZm9ybShpZDogU3ByaXRlSWRzVHlwZSk6IHN0cmluZyB7XG4gICAgcmV0dXJuIGBhc3NldHMvbGliLXNwcml0ZXMvc3ltYm9sL2Nyb2NvLWh0bWwtc3ZnLXNwcml0ZS0ke3Nwcml0ZXNIYXNoLnN5bWJvbH0uc3ZnIyR7aWR9YDtcbiAgfVxufVxuIl19

package/esm2022/sprites-hash.mjs

@@ -1,2 +1,2 @@
-export const spritesHash = { symbol: "8c6e4c57" };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3ByaXRlcy1oYXNoLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vcHJvamVjdHMvY3JvY28taHRtbC9zcmMvc3ByaXRlcy1oYXNoLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBQyxNQUFNLFdBQVcsR0FBRyxFQUFFLE1BQU0sRUFBRSxVQUFVLEVBQUUsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBjb25zdCBzcHJpdGVzSGFzaCA9IHsgc3ltYm9sOiBcIjhjNmU0YzU3XCIgfTsiXX0=
+export const spritesHash = { symbol: "croco-html-svg-sprite" };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3ByaXRlcy1oYXNoLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vcHJvamVjdHMvY3JvY28taHRtbC9zcmMvc3ByaXRlcy1oYXNoLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBQyxNQUFNLFdBQVcsR0FBRyxFQUFFLE1BQU0sRUFBRSx1QkFBdUIsRUFBRSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGNvbnN0IHNwcml0ZXNIYXNoID0geyBzeW1ib2w6IFwiY3JvY28taHRtbC1zdmctc3ByaXRlXCIgfTsiXX0=

package/esm2022/sprites-ids.type.mjs

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3ByaXRlcy1pZHMudHlwZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2Nyb2NvLWh0bWwvc3JjL3Nwcml0ZXMtaWRzLnR5cGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCB0eXBlIFNwcml0ZUlkc1R5cGUgPSAnc291cmNlLWNvZGUtdGFiJyB8ICd2aXN1YWwtZWRpdG9yLXRhYiciXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3ByaXRlcy1pZHMudHlwZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2Nyb2NvLWh0bWwvc3JjL3Nwcml0ZXMtaWRzLnR5cGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCB0eXBlIFNwcml0ZUlkc1R5cGUgPSAnc291cmNlLWNvZGUtdGFiJyB8ICd2aWV3ZXItdGFiJyB8ICd2aXN1YWwtZWRpdG9yLXRhYiciXX0=

package/fesm2022/croco-html.mjs

@@ -2248,11 +2248,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 type: Input
             }] } });
 
-const spritesHash = { symbol: "8c6e4c57" };
+const spritesHash = { symbol: "croco-html-svg-sprite" };
 
 class SpriteIconPathPipe {
     transform(id) {
-        return `assets/sprites/symbol/croco-html-svg-sprite-${spritesHash.symbol}.svg#${id}`;
+        return `assets/lib-sprites/symbol/croco-html-svg-sprite-${spritesHash.symbol}.svg#${id}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SpriteIconPathPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: SpriteIconPathPipe, isStandalone: true, name: "spriteIconPath" }); }
@@ -2307,7 +2307,7 @@ class MainEditorComponent {
         this.visualEditor.recalculateBodyTags();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MainEditorComponent, deps: [{ token: i1$5.ClipboardService }, { token: i2$3.MatSnackBar }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", 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\">\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\n      [useHtmlRaw]=\"useHtmlRaw\"\n      [html]=\"html\"\n      (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n      (rendered)=\"visualEditorRenderedHandler()\">\n    </croco-visual-editor>\n\n    <div style=\"height: 20px;\"></div>\n\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\"\n            cdkAutosizeMinRows=\"1\"\n            placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\"\n          (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n        </mat-form-field>\n      </div>\n    }\n\n    <button (click)=\"copyMarkUp()\"\n      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\" viewBox=\"0 0 32 30\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M31.8081 14.1889C28.797 8.31109 22.8303 4.33331 16.0026 4.33331C9.17479 4.33331 3.20813 8.31109 0.197015 14.1889C0.0700503 14.4404 0.00390625 14.7182 0.00390625 15C0.00390625 15.2817 0.0700503 15.5596 0.197015 15.8111C3.20813 21.6889 9.17479 25.6666 16.0026 25.6666C22.8303 25.6666 28.797 21.6889 31.8081 15.8111C31.9351 15.5596 32.0012 15.2817 32.0012 15C32.0012 14.7182 31.9351 14.4404 31.8081 14.1889ZM16.0026 23C14.4203 23 12.8736 22.5308 11.558 21.6517C10.2424 20.7727 9.21704 19.5233 8.61154 18.0614C8.00603 16.5996 7.84761 14.9911 8.15629 13.4393C8.46497 11.8874 9.2269 10.4619 10.3457 9.34313C11.4645 8.22431 12.89 7.46238 14.4418 7.1537C15.9937 6.84502 17.6022 7.00344 19.064 7.60894C20.5258 8.21444 21.7753 9.23982 22.6543 10.5554C23.5334 11.871 24.0026 13.4177 24.0026 15C24.0033 16.0508 23.7969 17.0914 23.3951 18.0623C22.9933 19.0332 22.4041 19.9154 21.6611 20.6585C20.918 21.4015 20.0358 21.9907 19.0649 22.3925C18.094 22.7943 17.0534 23.0007 16.0026 23ZM16.0026 9.66665C15.5267 9.67352 15.0539 9.74453 14.597 9.87776C14.9689 10.3904 15.1459 11.0188 15.096 11.6502C15.0461 12.2815 14.7726 12.8744 14.3248 13.3222C13.877 13.7701 13.2841 14.0435 12.6528 14.0934C12.0214 14.1433 11.393 13.9664 10.8803 13.5944C10.5886 14.6689 10.6413 15.8079 11.0308 16.8509C11.4203 17.8939 12.1271 18.7885 13.0518 19.4088C13.9764 20.029 15.0723 20.3436 16.1851 20.3084C17.2979 20.2732 18.3717 19.8898 19.2552 19.2123C20.1388 18.5348 20.7876 17.5973 21.1103 16.5317C21.4331 15.4661 21.4135 14.3261 21.0544 13.2722C20.6953 12.2183 20.0147 11.3036 19.1085 10.6568C18.2022 10.01 17.116 9.6637 16.0026 9.66665Z\"/>\n        <rect width=\"32\" height=\"28.4444\" fill=\"none\"/>\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", 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}.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)}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i3.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], 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"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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"] }, { kind: "pipe", type: SpriteIconPathPipe, name: "spriteIconPath" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", 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\">\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\n      [useHtmlRaw]=\"useHtmlRaw\"\n      [html]=\"html\"\n      (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n      (rendered)=\"visualEditorRenderedHandler()\">\n    </croco-visual-editor>\n\n    <div style=\"height: 20px;\"></div>\n\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\"\n            cdkAutosizeMinRows=\"1\"\n            placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\"\n          (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n        </mat-form-field>\n      </div>\n    }\n\n    <button (click)=\"copyMarkUp()\"\n      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", 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}.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)}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i3.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], 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"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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"] }, { kind: "pipe", type: SpriteIconPathPipe, name: "spriteIconPath" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MainEditorComponent, decorators: [{
             type: Component,
@@ -2326,7 +2326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                         MatIcon,
                         NgTemplateOutlet,
                         SpriteIconPathPipe
-                    ], template: "<mat-tab-group mat-stretch-tabs=\"false\" mat-align-tabs=\"start\">\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\n      [useHtmlRaw]=\"useHtmlRaw\"\n      [html]=\"html\"\n      (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n      (rendered)=\"visualEditorRenderedHandler()\">\n    </croco-visual-editor>\n\n    <div style=\"height: 20px;\"></div>\n\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\"\n            cdkAutosizeMinRows=\"1\"\n            placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\"\n          (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n        </mat-form-field>\n      </div>\n    }\n\n    <button (click)=\"copyMarkUp()\"\n      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\" viewBox=\"0 0 32 30\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M31.8081 14.1889C28.797 8.31109 22.8303 4.33331 16.0026 4.33331C9.17479 4.33331 3.20813 8.31109 0.197015 14.1889C0.0700503 14.4404 0.00390625 14.7182 0.00390625 15C0.00390625 15.2817 0.0700503 15.5596 0.197015 15.8111C3.20813 21.6889 9.17479 25.6666 16.0026 25.6666C22.8303 25.6666 28.797 21.6889 31.8081 15.8111C31.9351 15.5596 32.0012 15.2817 32.0012 15C32.0012 14.7182 31.9351 14.4404 31.8081 14.1889ZM16.0026 23C14.4203 23 12.8736 22.5308 11.558 21.6517C10.2424 20.7727 9.21704 19.5233 8.61154 18.0614C8.00603 16.5996 7.84761 14.9911 8.15629 13.4393C8.46497 11.8874 9.2269 10.4619 10.3457 9.34313C11.4645 8.22431 12.89 7.46238 14.4418 7.1537C15.9937 6.84502 17.6022 7.00344 19.064 7.60894C20.5258 8.21444 21.7753 9.23982 22.6543 10.5554C23.5334 11.871 24.0026 13.4177 24.0026 15C24.0033 16.0508 23.7969 17.0914 23.3951 18.0623C22.9933 19.0332 22.4041 19.9154 21.6611 20.6585C20.918 21.4015 20.0358 21.9907 19.0649 22.3925C18.094 22.7943 17.0534 23.0007 16.0026 23ZM16.0026 9.66665C15.5267 9.67352 15.0539 9.74453 14.597 9.87776C14.9689 10.3904 15.1459 11.0188 15.096 11.6502C15.0461 12.2815 14.7726 12.8744 14.3248 13.3222C13.877 13.7701 13.2841 14.0435 12.6528 14.0934C12.0214 14.1433 11.393 13.9664 10.8803 13.5944C10.5886 14.6689 10.6413 15.8079 11.0308 16.8509C11.4203 17.8939 12.1271 18.7885 13.0518 19.4088C13.9764 20.029 15.0723 20.3436 16.1851 20.3084C17.2979 20.2732 18.3717 19.8898 19.2552 19.2123C20.1388 18.5348 20.7876 17.5973 21.1103 16.5317C21.4331 15.4661 21.4135 14.3261 21.0544 13.2722C20.6953 12.2183 20.0147 11.3036 19.1085 10.6568C18.2022 10.01 17.116 9.6637 16.0026 9.66665Z\"/>\n        <rect width=\"32\" height=\"28.4444\" fill=\"none\"/>\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", 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}.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)}\n"] }]
+                    ], template: "<mat-tab-group mat-stretch-tabs=\"false\" mat-align-tabs=\"start\">\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\n      [useHtmlRaw]=\"useHtmlRaw\"\n      [html]=\"html\"\n      (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n      (rendered)=\"visualEditorRenderedHandler()\">\n    </croco-visual-editor>\n\n    <div style=\"height: 20px;\"></div>\n\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\"\n            cdkAutosizeMinRows=\"1\"\n            placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\"\n          (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n        </mat-form-field>\n      </div>\n    }\n\n    <button (click)=\"copyMarkUp()\"\n      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", 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}.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)}\n"] }]
         }], ctorParameters: () => [{ type: i1$5.ClipboardService }, { type: i2$3.MatSnackBar }, { type: i0.ChangeDetectorRef }], propDecorators: { visualEditor: [{
                 type: ViewChild,
                 args: ["visualEditor", { static: true }]