croco-html 20.0.2 → 20.1.0

package/fesm2022/croco-html.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Inject, Injectable, EventEmitter, Output, Input, ViewChild, Component, ChangeDetectionStrategy, ViewContainerRef, ViewEncapsulation, Pipe, NgModule } from '@angular/core';
+import { Inject, Injectable, EventEmitter, Output, Input, ViewChild, Component, inject, ChangeDetectorRef, ChangeDetectionStrategy, ViewContainerRef, ViewEncapsulation, Pipe, NgModule } from '@angular/core';
 import * as i2 from '@angular/material/button';
 import { MatButton, MatIconButton, MatButtonModule } from '@angular/material/button';
 import * as i1 from '@angular/common/http';
@@ -758,7 +758,7 @@ class FileAudioTagService {
         }
         return `<${FileAudioTagDataConsts.TagName} ${fileIdAttr} ${titleAttr}></${FileAudioTagDataConsts.TagName}>`;
     }
-    extractBlockFromHtmlElement(elem, options) {
+    extractBlockFromHtmlElement(elem, _) {
         let fileId = elem.getAttribute(FileAudioTagDataConsts.FileIdAttrName);
         let title = elem.getAttribute(FileAudioTagDataConsts.TitleAttrName);
         return {
@@ -1416,7 +1416,7 @@ class AddFilesBtnComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AddFilesBtnComponent, decorators: [{
             type: Component,
             args: [{ selector: 'croco-html-add-files-btn', standalone: true, imports: [UploadFilesBtnComponent, MatButton], template: "<div [hidden]=\"true\">\n    <croco-app-upload-files-btn #fakeBtn\n                                (onPrivateFilesUploaded)=\"filesUploadedPrivateHandler($event)\"\n                                (onPublicFilesUploaded)=\"filesUploadedPublicHandler($event)\"\n        [btnText]=\"'\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F'\"\n        (postFilesStarted)=\"postFilesStartedEventHandler($event)\" [extAccepts]=\"'image/*'\"></croco-app-upload-files-btn>\n</div>\n\n<div>\n    <button class=\"w-100\" (click)=\"handleClick()\" mat-stroked-button>\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F</button>\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { postFilesStarted: [{
+        }], propDecorators: { postFilesStarted: [{
                 type: Output
             }], fakeBtn: [{
                 type: ViewChild,
@@ -1991,14 +1991,14 @@ class AudioPlayerTagViewComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AudioPlayerTagViewComponent, deps: [{ token: CrocoHtmlOptionsToken }, { token: CommonFileInfoQueryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AudioPlayerTagViewComponent, isStandalone: true, selector: "croco-html-audio-player-tag-view", inputs: { data: "data" }, viewQueries: [{ propertyName: "audioPlayer", first: true, predicate: ["audioPlayer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"audio-view\">\n  @if (hasAudioError) {\n    <div class=\"error-block\">\n      <mat-icon>error</mat-icon>\n      <span>{{ errorMessage }}</span>\n    </div>\n  }\n\n  @if (hasFileId() && !hasAudioError) {\n    <div class=\"audio-player-container\">\n      <audio\n        #audioPlayer\n        [src]=\"audioSrc\"\n        (error)=\"onErrorHandler()\"\n        (loadedmetadata)=\"onLoadedMetadata()\"\n        (timeupdate)=\"onTimeUpdate()\"\n        (ended)=\"onEnded()\"\n        (canplay)=\"onCanPlay()\"\n        preload=\"metadata\">\n      </audio>\n\n      @if (isLoading) {\n        <div class=\"loading-indicator\">\n          <div class=\"progress-bar\">\n            <div class=\"progress-bar-fill\"></div>\n          </div>\n          <span>\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0430\u0443\u0434\u0438\u043E...</span>\n        </div>\n      }\n\n      <div class=\"file-info\">\n        <mat-icon>audiotrack</mat-icon>\n        <span class=\"file-name\">{{ title }}</span>\n      </div>\n\n      <div class=\"player-controls\">\n        <div class=\"control-buttons\">\n          <button (click)=\"restart()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>replay</mat-icon>\n          </button>\n\n          <button (click)=\"rewind()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>replay_10</mat-icon>\n          </button>\n\n          <button\n            (click)=\"togglePlayPause()\"\n            [disabled]=\"!hasFileId() || isLoading\"\n            class=\"play-pause-btn\" mat-icon-button>\n            <mat-icon>{{ isPlaying ? 'pause' : 'play_arrow' }}</mat-icon>\n          </button>\n\n          <button (click)=\"forward()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>forward_10</mat-icon>\n          </button>\n        </div>\n\n        <div class=\"progress-section\">\n          <span class=\"time-display\">{{ formatTime(currentTime) }}</span>\n\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"getProgress()\"\n            (input)=\"onSeekChange($event)\"\n            [disabled]=\"!hasFileId() || duration === 0\"\n            class=\"progress-slider\">\n\n          <span class=\"time-display\">{{ formatTime(duration) }}</span>\n        </div>\n\n        <div class=\"volume-controls\">\n          <button (click)=\"toggleMute()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>{{ isMuted ? 'volume_off' : 'volume_up' }}</mat-icon>\n          </button>\n\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"volume * 100\"\n            (input)=\"onVolumeChange($event)\"\n            [disabled]=\"!hasFileId()\"\n            class=\"volume-slider\">\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- \u0421\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435 \u043E\u0431 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 \u0444\u0430\u0439\u043B\u0430 -->\n  @if (!hasFileId()) {\n    <div class=\"no-file-message\">\n      <mat-icon>music_off</mat-icon>\n      <h5>\u0410\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D</h5>\n    </div>\n  }\n</div>\n", styles: [".audio-view{width:100%;max-width:500px;margin:0 auto}.error-block{display:flex;align-items:center;gap:8px;background-color:#ffebee;color:#c62828;padding:12px;border-radius:8px;border:1px solid #ffcdd2;margin-bottom:16px}.error-block mat-icon{color:#c62828}.audio-player-container{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 8px #0000001a;margin-bottom:16px}.loading-indicator{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;color:#666}.loading-indicator .progress-bar{width:200px;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden}.loading-indicator .progress-bar .progress-bar-fill{height:100%;background-color:#1976d2;animation:loading 1.5s ease-in-out infinite}@keyframes loading{0%{transform:translate(-100%)}50%{transform:translate(0)}to{transform:translate(100%)}}.file-info{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:12px;background:#f5f5f5;border-radius:8px}.file-info mat-icon{color:#1976d2}.file-info .file-name{font-weight:500;flex:1}.player-controls{display:flex;flex-direction:column;gap:16px}.control-buttons{display:flex;justify-content:center;align-items:center;gap:8px}.control-buttons .play-pause-btn{background-color:#1976d2;color:#fff;width:48px;height:48px}.control-buttons .play-pause-btn:hover{background-color:#1565c0}.control-buttons .play-pause-btn mat-icon{font-size:24px}.control-buttons mat-icon-button{width:40px;height:40px}.control-buttons mat-icon-button:disabled{color:#ccc}.progress-section{display:flex;align-items:center;gap:12px}.progress-section .time-display{font-family:Roboto Mono,monospace;font-size:14px;color:#666;min-width:40px;text-align:center}.progress-section .progress-slider{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:#e0e0e0;outline:none;border-radius:3px}.progress-section .progress-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.progress-section .progress-slider::-moz-range-thumb{width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.progress-section .progress-slider:hover::-webkit-slider-thumb{background:#1565c0}.progress-section .progress-slider:hover::-moz-range-thumb{background:#1565c0}.volume-controls{display:flex;align-items:center;gap:8px;justify-content:center}.volume-controls .volume-slider{width:100px;height:6px;-webkit-appearance:none;appearance:none;background:#e0e0e0;outline:none;border-radius:3px}.volume-controls .volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.volume-controls .volume-slider::-moz-range-thumb{width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.volume-controls .volume-slider:hover::-webkit-slider-thumb{background:#1565c0}.volume-controls .volume-slider:hover::-moz-range-thumb{background:#1565c0}.no-file-message{text-align:center;padding:40px 20px;color:#666}.no-file-message mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:16px;color:#ccc}.no-file-message h5{margin:0;color:#999}@media screen and (max-width: 768px){.audio-view{padding:0 12px}.audio-player-container{padding:16px}.control-buttons{flex-wrap:wrap;gap:4px}.progress-section{flex-direction:column;gap:8px}.progress-section .progress-slider{width:100%}.volume-controls{justify-content:flex-start}.volume-controls .volume-slider{width:80px}}input[type=range].progress-slider:disabled,input[type=range].volume-slider:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AudioPlayerTagViewComponent, isStandalone: true, selector: "croco-html-audio-player-tag-view", inputs: { data: "data" }, viewQueries: [{ propertyName: "audioPlayer", first: true, predicate: ["audioPlayer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"audio-view\">\n  @if (hasAudioError) {\n    <div class=\"error-block\">\n      <mat-icon>error</mat-icon>\n      <span>{{ errorMessage }}</span>\n    </div>\n  }\n\n  @if (hasFileId() && !hasAudioError) {\n    <div class=\"audio-player-container\">\n      <audio\n        #audioPlayer\n        [src]=\"audioSrc\"\n        (error)=\"onErrorHandler()\"\n        (loadedmetadata)=\"onLoadedMetadata()\"\n        (timeupdate)=\"onTimeUpdate()\"\n        (ended)=\"onEnded()\"\n        (canplay)=\"onCanPlay()\"\n        preload=\"metadata\">\n      </audio>\n\n      @if (isLoading) {\n        <div class=\"loading-indicator\">\n          <div class=\"progress-bar\">\n            <div class=\"progress-bar-fill\"></div>\n          </div>\n          <span>\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0430\u0443\u0434\u0438\u043E...</span>\n        </div>\n      }\n\n      <div class=\"file-info\">\n        <mat-icon>audiotrack</mat-icon>\n        <span class=\"file-name\">{{ title }}</span>\n      </div>\n\n      <div class=\"player-controls\">\n        <div class=\"control-buttons\">\n          <button (click)=\"restart()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>replay</mat-icon>\n          </button>\n\n          <button (click)=\"rewind()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>replay_10</mat-icon>\n          </button>\n\n          <button\n            (click)=\"togglePlayPause()\"\n            [disabled]=\"!hasFileId() || isLoading\"\n            class=\"play-pause-btn\" mat-icon-button>\n            <mat-icon>{{ isPlaying ? 'pause' : 'play_arrow' }}</mat-icon>\n          </button>\n\n          <button (click)=\"forward()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>forward_10</mat-icon>\n          </button>\n        </div>\n\n        <div class=\"progress-section\">\n          <span class=\"time-display\">{{ formatTime(currentTime) }}</span>\n\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"getProgress()\"\n            (input)=\"onSeekChange($event)\"\n            [disabled]=\"!hasFileId() || duration === 0\"\n            class=\"progress-slider\">\n\n          <span class=\"time-display\">{{ formatTime(duration) }}</span>\n        </div>\n\n        <div class=\"volume-controls\">\n          <button (click)=\"toggleMute()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>{{ isMuted ? 'volume_off' : 'volume_up' }}</mat-icon>\n          </button>\n\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"volume * 100\"\n            (input)=\"onVolumeChange($event)\"\n            [disabled]=\"!hasFileId()\"\n            class=\"volume-slider\">\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- \u0421\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435 \u043E\u0431 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 \u0444\u0430\u0439\u043B\u0430 -->\n  @if (!hasFileId()) {\n    <div class=\"no-file-message\">\n      <mat-icon>music_off</mat-icon>\n      <h5>\u0410\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D</h5>\n    </div>\n  }\n</div>\n", styles: [".audio-view{width:100%;max-width:500px;margin:0 auto}.error-block{display:flex;align-items:center;gap:8px;background-color:#ffebee;color:#c62828;padding:12px;border-radius:8px;border:1px solid #ffcdd2;margin-bottom:16px}.error-block mat-icon{color:#c62828}.audio-player-container{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 8px #0000001a;margin-bottom:16px}.loading-indicator{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;color:#666}.loading-indicator .progress-bar{width:200px;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden}.loading-indicator .progress-bar .progress-bar-fill{height:100%;background-color:#1976d2;animation:loading 1.5s ease-in-out infinite}@keyframes loading{0%{transform:translate(-100%)}50%{transform:translate(0)}to{transform:translate(100%)}}.file-info{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:12px;background:#f5f5f5;border-radius:8px}.file-info mat-icon{color:#1976d2}.file-info .file-name{font-weight:500;flex:1}.player-controls{display:flex;flex-direction:column;gap:16px}.control-buttons{display:flex;justify-content:center;align-items:center;gap:8px}.control-buttons .play-pause-btn{background-color:#1976d2;color:#fff;width:48px;height:48px}.control-buttons .play-pause-btn:hover{background-color:#1565c0}.control-buttons .play-pause-btn mat-icon{font-size:24px}.control-buttons mat-icon-button{width:40px;height:40px}.control-buttons mat-icon-button:disabled{color:#ccc}.progress-section{display:flex;align-items:center;gap:12px}.progress-section .time-display{font-family:Roboto Mono,monospace;font-size:14px;color:#666;min-width:40px;text-align:center}.progress-section .progress-slider{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:#e0e0e0;outline:none;border-radius:3px}.progress-section .progress-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.progress-section .progress-slider::-moz-range-thumb{width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.progress-section .progress-slider:hover::-webkit-slider-thumb{background:#1565c0}.progress-section .progress-slider:hover::-moz-range-thumb{background:#1565c0}.volume-controls{display:flex;align-items:center;gap:8px;justify-content:center}.volume-controls .volume-slider{width:100px;height:6px;-webkit-appearance:none;appearance:none;background:#e0e0e0;outline:none;border-radius:3px}.volume-controls .volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.volume-controls .volume-slider::-moz-range-thumb{width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.volume-controls .volume-slider:hover::-webkit-slider-thumb{background:#1565c0}.volume-controls .volume-slider:hover::-moz-range-thumb{background:#1565c0}.no-file-message{text-align:center;padding:40px 20px;color:#666}.no-file-message mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:16px;color:#ccc}.no-file-message h5{margin:0;color:#999}@media screen and (max-width: 768px){.audio-player-container{padding:16px}.control-buttons{flex-wrap:wrap;gap:4px}.progress-section{flex-direction:column;gap:8px}.progress-section .progress-slider{width:100%}.volume-controls{justify-content:flex-start}.volume-controls .volume-slider{width:80px}}input[type=range].progress-slider:disabled,input[type=range].volume-slider:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AudioPlayerTagViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'croco-html-audio-player-tag-view', standalone: true, imports: [
                         MatIcon,
                         MatIconButton
-                    ], template: "<div class=\"audio-view\">\n  @if (hasAudioError) {\n    <div class=\"error-block\">\n      <mat-icon>error</mat-icon>\n      <span>{{ errorMessage }}</span>\n    </div>\n  }\n\n  @if (hasFileId() && !hasAudioError) {\n    <div class=\"audio-player-container\">\n      <audio\n        #audioPlayer\n        [src]=\"audioSrc\"\n        (error)=\"onErrorHandler()\"\n        (loadedmetadata)=\"onLoadedMetadata()\"\n        (timeupdate)=\"onTimeUpdate()\"\n        (ended)=\"onEnded()\"\n        (canplay)=\"onCanPlay()\"\n        preload=\"metadata\">\n      </audio>\n\n      @if (isLoading) {\n        <div class=\"loading-indicator\">\n          <div class=\"progress-bar\">\n            <div class=\"progress-bar-fill\"></div>\n          </div>\n          <span>\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0430\u0443\u0434\u0438\u043E...</span>\n        </div>\n      }\n\n      <div class=\"file-info\">\n        <mat-icon>audiotrack</mat-icon>\n        <span class=\"file-name\">{{ title }}</span>\n      </div>\n\n      <div class=\"player-controls\">\n        <div class=\"control-buttons\">\n          <button (click)=\"restart()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>replay</mat-icon>\n          </button>\n\n          <button (click)=\"rewind()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>replay_10</mat-icon>\n          </button>\n\n          <button\n            (click)=\"togglePlayPause()\"\n            [disabled]=\"!hasFileId() || isLoading\"\n            class=\"play-pause-btn\" mat-icon-button>\n            <mat-icon>{{ isPlaying ? 'pause' : 'play_arrow' }}</mat-icon>\n          </button>\n\n          <button (click)=\"forward()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>forward_10</mat-icon>\n          </button>\n        </div>\n\n        <div class=\"progress-section\">\n          <span class=\"time-display\">{{ formatTime(currentTime) }}</span>\n\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"getProgress()\"\n            (input)=\"onSeekChange($event)\"\n            [disabled]=\"!hasFileId() || duration === 0\"\n            class=\"progress-slider\">\n\n          <span class=\"time-display\">{{ formatTime(duration) }}</span>\n        </div>\n\n        <div class=\"volume-controls\">\n          <button (click)=\"toggleMute()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>{{ isMuted ? 'volume_off' : 'volume_up' }}</mat-icon>\n          </button>\n\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"volume * 100\"\n            (input)=\"onVolumeChange($event)\"\n            [disabled]=\"!hasFileId()\"\n            class=\"volume-slider\">\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- \u0421\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435 \u043E\u0431 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 \u0444\u0430\u0439\u043B\u0430 -->\n  @if (!hasFileId()) {\n    <div class=\"no-file-message\">\n      <mat-icon>music_off</mat-icon>\n      <h5>\u0410\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D</h5>\n    </div>\n  }\n</div>\n", styles: [".audio-view{width:100%;max-width:500px;margin:0 auto}.error-block{display:flex;align-items:center;gap:8px;background-color:#ffebee;color:#c62828;padding:12px;border-radius:8px;border:1px solid #ffcdd2;margin-bottom:16px}.error-block mat-icon{color:#c62828}.audio-player-container{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 8px #0000001a;margin-bottom:16px}.loading-indicator{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;color:#666}.loading-indicator .progress-bar{width:200px;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden}.loading-indicator .progress-bar .progress-bar-fill{height:100%;background-color:#1976d2;animation:loading 1.5s ease-in-out infinite}@keyframes loading{0%{transform:translate(-100%)}50%{transform:translate(0)}to{transform:translate(100%)}}.file-info{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:12px;background:#f5f5f5;border-radius:8px}.file-info mat-icon{color:#1976d2}.file-info .file-name{font-weight:500;flex:1}.player-controls{display:flex;flex-direction:column;gap:16px}.control-buttons{display:flex;justify-content:center;align-items:center;gap:8px}.control-buttons .play-pause-btn{background-color:#1976d2;color:#fff;width:48px;height:48px}.control-buttons .play-pause-btn:hover{background-color:#1565c0}.control-buttons .play-pause-btn mat-icon{font-size:24px}.control-buttons mat-icon-button{width:40px;height:40px}.control-buttons mat-icon-button:disabled{color:#ccc}.progress-section{display:flex;align-items:center;gap:12px}.progress-section .time-display{font-family:Roboto Mono,monospace;font-size:14px;color:#666;min-width:40px;text-align:center}.progress-section .progress-slider{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:#e0e0e0;outline:none;border-radius:3px}.progress-section .progress-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.progress-section .progress-slider::-moz-range-thumb{width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.progress-section .progress-slider:hover::-webkit-slider-thumb{background:#1565c0}.progress-section .progress-slider:hover::-moz-range-thumb{background:#1565c0}.volume-controls{display:flex;align-items:center;gap:8px;justify-content:center}.volume-controls .volume-slider{width:100px;height:6px;-webkit-appearance:none;appearance:none;background:#e0e0e0;outline:none;border-radius:3px}.volume-controls .volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.volume-controls .volume-slider::-moz-range-thumb{width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.volume-controls .volume-slider:hover::-webkit-slider-thumb{background:#1565c0}.volume-controls .volume-slider:hover::-moz-range-thumb{background:#1565c0}.no-file-message{text-align:center;padding:40px 20px;color:#666}.no-file-message mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:16px;color:#ccc}.no-file-message h5{margin:0;color:#999}@media screen and (max-width: 768px){.audio-view{padding:0 12px}.audio-player-container{padding:16px}.control-buttons{flex-wrap:wrap;gap:4px}.progress-section{flex-direction:column;gap:8px}.progress-section .progress-slider{width:100%}.volume-controls{justify-content:flex-start}.volume-controls .volume-slider{width:80px}}input[type=range].progress-slider:disabled,input[type=range].volume-slider:disabled{opacity:.5;cursor:not-allowed}\n"] }]
+                    ], template: "<div class=\"audio-view\">\n  @if (hasAudioError) {\n    <div class=\"error-block\">\n      <mat-icon>error</mat-icon>\n      <span>{{ errorMessage }}</span>\n    </div>\n  }\n\n  @if (hasFileId() && !hasAudioError) {\n    <div class=\"audio-player-container\">\n      <audio\n        #audioPlayer\n        [src]=\"audioSrc\"\n        (error)=\"onErrorHandler()\"\n        (loadedmetadata)=\"onLoadedMetadata()\"\n        (timeupdate)=\"onTimeUpdate()\"\n        (ended)=\"onEnded()\"\n        (canplay)=\"onCanPlay()\"\n        preload=\"metadata\">\n      </audio>\n\n      @if (isLoading) {\n        <div class=\"loading-indicator\">\n          <div class=\"progress-bar\">\n            <div class=\"progress-bar-fill\"></div>\n          </div>\n          <span>\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0430\u0443\u0434\u0438\u043E...</span>\n        </div>\n      }\n\n      <div class=\"file-info\">\n        <mat-icon>audiotrack</mat-icon>\n        <span class=\"file-name\">{{ title }}</span>\n      </div>\n\n      <div class=\"player-controls\">\n        <div class=\"control-buttons\">\n          <button (click)=\"restart()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>replay</mat-icon>\n          </button>\n\n          <button (click)=\"rewind()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>replay_10</mat-icon>\n          </button>\n\n          <button\n            (click)=\"togglePlayPause()\"\n            [disabled]=\"!hasFileId() || isLoading\"\n            class=\"play-pause-btn\" mat-icon-button>\n            <mat-icon>{{ isPlaying ? 'pause' : 'play_arrow' }}</mat-icon>\n          </button>\n\n          <button (click)=\"forward()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>forward_10</mat-icon>\n          </button>\n        </div>\n\n        <div class=\"progress-section\">\n          <span class=\"time-display\">{{ formatTime(currentTime) }}</span>\n\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"getProgress()\"\n            (input)=\"onSeekChange($event)\"\n            [disabled]=\"!hasFileId() || duration === 0\"\n            class=\"progress-slider\">\n\n          <span class=\"time-display\">{{ formatTime(duration) }}</span>\n        </div>\n\n        <div class=\"volume-controls\">\n          <button (click)=\"toggleMute()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>{{ isMuted ? 'volume_off' : 'volume_up' }}</mat-icon>\n          </button>\n\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"volume * 100\"\n            (input)=\"onVolumeChange($event)\"\n            [disabled]=\"!hasFileId()\"\n            class=\"volume-slider\">\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- \u0421\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435 \u043E\u0431 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 \u0444\u0430\u0439\u043B\u0430 -->\n  @if (!hasFileId()) {\n    <div class=\"no-file-message\">\n      <mat-icon>music_off</mat-icon>\n      <h5>\u0410\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D</h5>\n    </div>\n  }\n</div>\n", styles: [".audio-view{width:100%;max-width:500px;margin:0 auto}.error-block{display:flex;align-items:center;gap:8px;background-color:#ffebee;color:#c62828;padding:12px;border-radius:8px;border:1px solid #ffcdd2;margin-bottom:16px}.error-block mat-icon{color:#c62828}.audio-player-container{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 8px #0000001a;margin-bottom:16px}.loading-indicator{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;color:#666}.loading-indicator .progress-bar{width:200px;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden}.loading-indicator .progress-bar .progress-bar-fill{height:100%;background-color:#1976d2;animation:loading 1.5s ease-in-out infinite}@keyframes loading{0%{transform:translate(-100%)}50%{transform:translate(0)}to{transform:translate(100%)}}.file-info{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:12px;background:#f5f5f5;border-radius:8px}.file-info mat-icon{color:#1976d2}.file-info .file-name{font-weight:500;flex:1}.player-controls{display:flex;flex-direction:column;gap:16px}.control-buttons{display:flex;justify-content:center;align-items:center;gap:8px}.control-buttons .play-pause-btn{background-color:#1976d2;color:#fff;width:48px;height:48px}.control-buttons .play-pause-btn:hover{background-color:#1565c0}.control-buttons .play-pause-btn mat-icon{font-size:24px}.control-buttons mat-icon-button{width:40px;height:40px}.control-buttons mat-icon-button:disabled{color:#ccc}.progress-section{display:flex;align-items:center;gap:12px}.progress-section .time-display{font-family:Roboto Mono,monospace;font-size:14px;color:#666;min-width:40px;text-align:center}.progress-section .progress-slider{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:#e0e0e0;outline:none;border-radius:3px}.progress-section .progress-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.progress-section .progress-slider::-moz-range-thumb{width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.progress-section .progress-slider:hover::-webkit-slider-thumb{background:#1565c0}.progress-section .progress-slider:hover::-moz-range-thumb{background:#1565c0}.volume-controls{display:flex;align-items:center;gap:8px;justify-content:center}.volume-controls .volume-slider{width:100px;height:6px;-webkit-appearance:none;appearance:none;background:#e0e0e0;outline:none;border-radius:3px}.volume-controls .volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.volume-controls .volume-slider::-moz-range-thumb{width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.volume-controls .volume-slider:hover::-webkit-slider-thumb{background:#1565c0}.volume-controls .volume-slider:hover::-moz-range-thumb{background:#1565c0}.no-file-message{text-align:center;padding:40px 20px;color:#666}.no-file-message mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:16px;color:#ccc}.no-file-message h5{margin:0;color:#999}@media screen and (max-width: 768px){.audio-player-container{padding:16px}.control-buttons{flex-wrap:wrap;gap:4px}.progress-section{flex-direction:column;gap:8px}.progress-section .progress-slider{width:100%}.volume-controls{justify-content:flex-start}.volume-controls .volume-slider{width:80px}}input[type=range].progress-slider:disabled,input[type=range].volume-slider:disabled{opacity:.5;cursor:not-allowed}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [CrocoHtmlOptionsToken]
@@ -2013,16 +2013,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 class YoutubeVideoPlayerComponent {
     set link(link) {
         this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(link);
+        this._cdr.markForCheck();
     }
     constructor(sanitizer) {
         this.sanitizer = sanitizer;
+        this._cdr = inject(ChangeDetectorRef);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: YoutubeVideoPlayerComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: YoutubeVideoPlayerComponent, isStandalone: true, selector: "youtube-video-player", inputs: { link: "link" }, ngImport: i0, template: "<div class=\"code-view video-player use-responsive\">\n    <iframe\n      [src]=\"safeUrl\"\n      title=\"YouTube video player\"\n      frameborder=\"0\"\n      allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n      referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>\n</div>\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"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: YoutubeVideoPlayerComponent, isStandalone: true, selector: "youtube-video-player", inputs: { link: "link" }, ngImport: i0, template: "<div class=\"code-view video-player use-responsive\">\n    <iframe\n      [src]=\"safeUrl\"\n      title=\"YouTube video player\"\n      frameborder=\"0\"\n      allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n      referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>\n</div>\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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: YoutubeVideoPlayerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'youtube-video-player', standalone: true, imports: [], template: "<div class=\"code-view video-player use-responsive\">\n    <iframe\n      [src]=\"safeUrl\"\n      title=\"YouTube video player\"\n      frameborder=\"0\"\n      allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n      referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>\n</div>\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"] }]
+            args: [{ selector: 'youtube-video-player', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"code-view video-player use-responsive\">\n    <iframe\n      [src]=\"safeUrl\"\n      title=\"YouTube video player\"\n      frameborder=\"0\"\n      allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n      referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>\n</div>\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"] }]
         }], ctorParameters: () => [{ type: i1$2.DomSanitizer }], propDecorators: { link: [{
                 type: Input
             }] } });
@@ -2030,16 +2032,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 class VkVideoPlayerComponent {
     set link(link) {
         this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(link);
+        this._cdr.markForCheck();
     }
     constructor(sanitizer) {
         this.sanitizer = sanitizer;
+        this._cdr = inject(ChangeDetectorRef);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: VkVideoPlayerComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: VkVideoPlayerComponent, isStandalone: true, selector: "vk-video-player", inputs: { link: "link" }, ngImport: i0, template: "<div class=\"code-view video-player use-responsive\">\n  <iframe\n    [src]=\"safeUrl\"\n    allow=\"autoplay; encrypted-media; fullscreen; picture-in-picture;\"\n    frameborder=\"0\"\n    allowfullscreen></iframe>\n</div>\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"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: VkVideoPlayerComponent, isStandalone: true, selector: "vk-video-player", inputs: { link: "link" }, ngImport: i0, template: "<div class=\"code-view video-player use-responsive\">\n  <iframe\n    [src]=\"safeUrl\"\n    allow=\"autoplay; encrypted-media; fullscreen; picture-in-picture;\"\n    frameborder=\"0\"\n    allowfullscreen></iframe>\n</div>\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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: VkVideoPlayerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vk-video-player', standalone: true, imports: [], template: "<div class=\"code-view video-player use-responsive\">\n  <iframe\n    [src]=\"safeUrl\"\n    allow=\"autoplay; encrypted-media; fullscreen; picture-in-picture;\"\n    frameborder=\"0\"\n    allowfullscreen></iframe>\n</div>\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"] }]
+            args: [{ selector: 'vk-video-player', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"code-view video-player use-responsive\">\n  <iframe\n    [src]=\"safeUrl\"\n    allow=\"autoplay; encrypted-media; fullscreen; picture-in-picture;\"\n    frameborder=\"0\"\n    allowfullscreen></iframe>\n</div>\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"] }]
         }], ctorParameters: () => [{ type: i1$2.DomSanitizer }], propDecorators: { link: [{
                 type: Input
             }] } });
@@ -2050,20 +2054,22 @@ class CodeVideoComponent {
     }
     constructor(_sanitizer) {
         this._sanitizer = _sanitizer;
+        this._cdr = inject(ChangeDetectorRef);
         this.code = "";
         this.useResponsiveWrapper = false;
     }
     ngOnChanges(changes) {
         if (changes['code'] && changes['code'].currentValue !== changes['code'].previousValue) {
             this.safeHtml = this._sanitizer.bypassSecurityTrustHtml(this.code);
+            this._cdr.markForCheck();
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CodeVideoComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CodeVideoComponent, isStandalone: true, selector: "code-video", inputs: { code: "code", _useResponsiveWrapper: "_useResponsiveWrapper" }, usesOnChanges: true, ngImport: i0, template: "@if (code) {\n  <div class=\"code-view video-player\" [class.use-responsive]=\"useResponsiveWrapper\" [innerHTML]=\"safeHtml\"></div>\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"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CodeVideoComponent, isStandalone: true, selector: "code-video", inputs: { code: "code", _useResponsiveWrapper: "_useResponsiveWrapper" }, usesOnChanges: true, ngImport: i0, template: "@if (code) {\n  <div class=\"code-view video-player\" [class.use-responsive]=\"useResponsiveWrapper\" [innerHTML]=\"safeHtml\"></div>\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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CodeVideoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'code-video', standalone: true, imports: [], template: "@if (code) {\n  <div class=\"code-view video-player\" [class.use-responsive]=\"useResponsiveWrapper\" [innerHTML]=\"safeHtml\"></div>\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"] }]
+            args: [{ selector: 'code-video', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (code) {\n  <div class=\"code-view video-player\" [class.use-responsive]=\"useResponsiveWrapper\" [innerHTML]=\"safeHtml\"></div>\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"] }]
         }], ctorParameters: () => [{ type: i1$2.DomSanitizer }], propDecorators: { code: [{
                 type: Input
             }], _useResponsiveWrapper: [{
@@ -2261,10 +2267,12 @@ class FileImageTagViewComponent {
         this.imageData = data;
         this.imageSrc = data.src;
         this.requests = this.getMediaRequests(data.screenMediaRequest);
+        this._cdr.markForCheck();
     }
     constructor(screenWidthService, _options) {
         this.screenWidthService = screenWidthService;
         this._options = _options;
+        this._cdr = inject(ChangeDetectorRef);
         this.isEditor = false;
         this.imageSrc = "";
         this.imageData = null;
@@ -2293,6 +2301,7 @@ class FileImageTagViewComponent {
                     this.imageMaxHeight = visualMaxHeight;
                 }
             }
+            this._cdr.markForCheck();
         });
     }
     ngOnDestroy() {
@@ -2305,13 +2314,13 @@ class FileImageTagViewComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FileImageTagViewComponent, deps: [{ token: ScreenWidthService }, { token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FileImageTagViewComponent, isStandalone: true, selector: "croco-html-file-image-tag-view", inputs: { item: "item", isEditor: "isEditor" }, ngImport: i0, template: "<img\n  [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%', 'max-width': imageMaxWidth ? imageMaxWidth + 'px' : '100%', }\"\n  class=\"mx-auto d-block img-fluid\"\n  [src]=\"imageSrc\"\n  alt=\"\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043E\"\n  (click)=\"onImageClick()\"\n  style=\"cursor: pointer;\"\n/>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FileImageTagViewComponent, isStandalone: true, selector: "croco-html-file-image-tag-view", inputs: { item: "item", isEditor: "isEditor" }, ngImport: i0, template: "<img\n  [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%', 'max-width': imageMaxWidth ? imageMaxWidth + 'px' : '100%', }\"\n  class=\"mx-auto d-block img-fluid\"\n  [src]=\"imageSrc\"\n  alt=\"\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043E\"\n  (click)=\"onImageClick()\"\n  style=\"cursor: pointer;\"\n/>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FileImageTagViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'croco-html-file-image-tag-view', imports: [
                         NgStyle
-                    ], standalone: true, template: "<img\n  [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%', 'max-width': imageMaxWidth ? imageMaxWidth + 'px' : '100%', }\"\n  class=\"mx-auto d-block img-fluid\"\n  [src]=\"imageSrc\"\n  alt=\"\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043E\"\n  (click)=\"onImageClick()\"\n  style=\"cursor: pointer;\"\n/>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<img\n  [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%', 'max-width': imageMaxWidth ? imageMaxWidth + 'px' : '100%', }\"\n  class=\"mx-auto d-block img-fluid\"\n  [src]=\"imageSrc\"\n  alt=\"\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043E\"\n  (click)=\"onImageClick()\"\n  style=\"cursor: pointer;\"\n/>\n" }]
         }], ctorParameters: () => [{ type: ScreenWidthService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [CrocoHtmlOptionsToken]
@@ -2599,6 +2608,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 
 class ExternalVideoEditorComponent {
     constructor() {
+        this._cdr = inject(ChangeDetectorRef);
         this.presentOrEdit = true;
         this.ExternalVideoSupportedTypes = ExternalVideoSupportedTypes;
         this.tagData = {
@@ -2631,6 +2641,7 @@ class ExternalVideoEditorComponent {
                 break;
             }
         }
+        this._cdr.markForCheck();
     }
     linkChanged() {
         if (this.tagData.link.includes('iframe')) {
@@ -2639,6 +2650,7 @@ class ExternalVideoEditorComponent {
         const { innerHtml, ...tagData } = this.tagData;
         this.tag.attributes = tagData;
         this.tag.innerHtml = innerHtml;
+        this._cdr.markForCheck();
     }
     onCheck(checked) {
         this.tagData.useResponsiveWrapper = checked;
@@ -2650,13 +2662,14 @@ class ExternalVideoEditorComponent {
         const elem = document.body.children[0];
         const src = elem.getAttribute("src");
         this.tagData.link = src;
+        this._cdr.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ExternalVideoEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$2.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$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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: "20.3.15", 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$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$2.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$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ExternalVideoEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-external-video-editor', standalone: true, imports: [
+            args: [{ selector: 'croco-html-external-video-editor', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatFormFieldModule,
                         MatInputModule,
                         FormsModule,
@@ -2674,22 +2687,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 class HtmlRawEditorComponent {
     constructor(_sanitizer) {
         this._sanitizer = _sanitizer;
+        this._cdr = inject(ChangeDetectorRef);
         this.presentOrEdit = true;
     }
     ngOnChanges(changes) {
         if (changes['tag'] && changes['tag'].currentValue !== changes['tag'].previousValue) {
             this.safeHtml = this._sanitizer.bypassSecurityTrustHtml(this.tag.innerHtml);
+            this._cdr.markForCheck();
         }
     }
     onSafeHtmlChange() {
         this.safeHtml = this._sanitizer.bypassSecurityTrustHtml(this.tag.innerHtml);
+        this._cdr.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlRawEditorComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: HtmlRawEditorComponent, isStandalone: true, selector: "croco-html-html-raw-editor", inputs: { tag: "tag", presentOrEdit: "presentOrEdit" }, usesOnChanges: true, ngImport: i0, template: "@if (presentOrEdit) {\n    <div [innerHTML]=\"safeHtml\">\n    </div>\n}\n@else {\n  <div>\n    <div style=\"height: 10px;\">\n    </div>\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\n          \u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\n        </mat-label>\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n          cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\"\n          [(ngModel)]=\"tag.innerHtml\"\n          (ngModelChange)=\"onSafeHtmlChange()\"\n        ></textarea>\n      </mat-form-field>\n    </div>\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: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: HtmlRawEditorComponent, isStandalone: true, selector: "croco-html-html-raw-editor", inputs: { tag: "tag", presentOrEdit: "presentOrEdit" }, usesOnChanges: true, ngImport: i0, template: "@if (presentOrEdit) {\n    <div [innerHTML]=\"safeHtml\">\n    </div>\n}\n@else {\n  <div>\n    <div style=\"height: 10px;\">\n    </div>\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\n          \u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\n        </mat-label>\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n          cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\"\n          [(ngModel)]=\"tag.innerHtml\"\n          (ngModelChange)=\"onSafeHtmlChange()\"\n        ></textarea>\n      </mat-form-field>\n    </div>\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: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlRawEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-html-raw-editor', standalone: true, imports: [MatFormField, MatLabel, MatInput, CdkTextareaAutosize, FormsModule], template: "@if (presentOrEdit) {\n    <div [innerHTML]=\"safeHtml\">\n    </div>\n}\n@else {\n  <div>\n    <div style=\"height: 10px;\">\n    </div>\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\n          \u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\n        </mat-label>\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n          cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\"\n          [(ngModel)]=\"tag.innerHtml\"\n          (ngModelChange)=\"onSafeHtmlChange()\"\n        ></textarea>\n      </mat-form-field>\n    </div>\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"] }]
+            args: [{ selector: 'croco-html-html-raw-editor', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatFormField, MatLabel, MatInput, CdkTextareaAutosize, FormsModule], template: "@if (presentOrEdit) {\n    <div [innerHTML]=\"safeHtml\">\n    </div>\n}\n@else {\n  <div>\n    <div style=\"height: 10px;\">\n    </div>\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\n          \u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\n        </mat-label>\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n          cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\"\n          [(ngModel)]=\"tag.innerHtml\"\n          (ngModelChange)=\"onSafeHtmlChange()\"\n        ></textarea>\n      </mat-form-field>\n    </div>\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"] }]
         }], ctorParameters: () => [{ type: i1$2.DomSanitizer }], propDecorators: { tag: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2793,6 +2809,7 @@ class ImageEditorComponent {
         this.imageMaxWidth = null;
         this.isShowMediaRequest = false;
         this.unsubscribe = new Subject();
+        this._cdr = inject(ChangeDetectorRef);
         this.presentOrEdit = true;
     }
     getSrc() {
@@ -2807,6 +2824,7 @@ class ImageEditorComponent {
     }
     removeImageError() {
         this.hasImageError = false;
+        this._cdr.markForCheck();
     }
     ngOnInit() {
         let attr = this.tag.attributes[FileImageTagDataConsts.ScreenMediaRequest];
@@ -2823,6 +2841,7 @@ class ImageEditorComponent {
                     this.imageMaxHeight = visualMaxHeight;
                 }
             }
+            this._cdr.markForCheck();
         });
     }
     requestChanged() {
@@ -2835,17 +2854,19 @@ class ImageEditorComponent {
             maxImageHeight: 0,
             maxImageWidth: 0
         });
+        this._cdr.markForCheck();
     }
     deleteMediaRequest(index) {
         this.requests.splice(index, 1);
         this.requestChanged();
+        this._cdr.markForCheck();
     }
     ngOnDestroy() {
         this.unsubscribe.next();
         this.unsubscribe.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ImageEditorComponent, deps: [{ token: CrocoHtmlOptionsToken }, { token: ScreenWidthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ImageEditorComponent, isStandalone: true, selector: "croco-html-image-editor", inputs: { tag: "tag", presentOrEdit: "presentOrEdit" }, ngImport: i0, template: "<div>\n  <div style=\"height: 10px;\">\n  </div>\n\n  @if (hasImageError) {\n    <div class=\"error-block\">\n      \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E \u043F\u043E \u0443\u043A\u0430\u0437\u0430\u043D\u043D\u043E\u043C\u0443 \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E \u0444\u0430\u0439\u043B \u043D\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u043B\u0438 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043D\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.\n    </div>\n  }\n\n  @if (hasFileId() && !hasImageError) {\n    <div>\n      <img\n        [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%', 'max-width': imageMaxWidth ? imageMaxWidth + 'px' : '100%', }\"\n        class=\"mx-auto d-block img-fluid\" [src]=\"getSrc()\" (error)=\"onErrorHandler()\" alt=\"photo\"/>\n    </div>\n  }\n\n  @if (!hasFileId()) {\n    <div>\n      <h5>[\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E]</h5>\n    </div>\n  }\n\n  @if(!presentOrEdit) {\n    <mat-slide-toggle style=\"padding: 10px 0\" [(ngModel)]=\"isShowMediaRequest\">\u041F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C \u043C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B</mat-slide-toggle>\n  }\n\n  @if(isShowMediaRequest) {\n    <div style=\"display: flex; flex-direction: column; gap: 20px\">\n      <div class=\"media-request__header\">\n        <span>\u041C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B:</span>\n        @if (!presentOrEdit) {\n          <button (click)=\"addNewMediaRequest()\" class=\"w-30\" mat-icon-button color=\"primary\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n      </div>\n      @for (request of requests; track $index) {\n        <div class=\"media-request__container\">\n          @if (presentOrEdit) {\n            <div style=\"display: flex; flex-direction: column; gap: 5px\">\n              <span class=\"w-100\">\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.minScreenWidth}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.maxScreenWidth}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageHeight}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageWidth}}</span>\n            </div>\n          }\n          @else {\n            <div style=\"width: 100%\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.minScreenWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxScreenWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxImageHeight\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxImageWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n            </div>\n\n            <button (click)=\"deleteMediaRequest($index)\" class=\"w-30\" mat-icon-button color=\"warn\">\n              <mat-icon>delete</mat-icon>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n\n@if (!presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\"></div>\n    <div style=\"overflow-x:auto;\" class=\"mode-toggle-container\">\n      <mat-button-toggle-group [(ngModel)]=\"searchOrEdit\">\n        <mat-button-toggle value=\"search\">\n          \u0418\u0441\u043A\u0430\u0442\u044C \u0444\u0430\u0439\u043B <mat-icon>search</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"edit\">\n          \u0423\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u043E \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443 <mat-icon>settings</mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div [hidden]=\"searchOrEdit !== 'search'\">\n      <div class=\"file-selection\">\n        <div class=\"existing-files\">\n          <h6>\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0438\u0437 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044E\u0449\u0438\u0445 \u0444\u0430\u0439\u043B\u043E\u0432:</h6>\n          <croco-html-file-id-select\n            [labelText]=\"'\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B'\"\n            [fileId]=\"fileId\"\n            (onFileIdChanged)=\"onFileIdChanged($event)\">\n          </croco-html-file-id-select>\n        </div>\n      </div>\n    </div>\n    <div [hidden]=\"searchOrEdit !== 'edit'\">\n      <div>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\n            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\n          </mat-label>\n          <input matInput placeholder=\"\u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\" new-autocomplete=\"off\" autocomplete=\"off\"\n            [(ngModel)]=\"fileId\"\n            (ngModelChange)=\"onFileIdChanged($event)\">\n        </mat-form-field>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".error-block{background-color:#f32323;color:#fff;text-align:center;border-radius:10px;padding:10px}.media-request__header{align-items:center;display:flex;width:100%;justify-content:space-between}.media-request__container{display:flex;align-items:center;border-bottom:1px solid rgba(128,128,128,.7);padding-bottom:10px}.file-selection{display:flex;flex-direction:column;gap:20px}.file-selection h6{margin:0 0 12px;color:#333}.file-selection .existing-files{display:flex;flex-direction:column;gap:8px}@media screen and (max-width: 768px){mat-button-toggle-group{display:flex;flex-direction:column}}.mode-toggle-container{margin-bottom:20px}\n"], dependencies: [{ kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FileIdSelectComponent, selector: "croco-html-file-id-select", inputs: ["labelText", "fileId"], outputs: ["fileId", "onFileIdChanged"] }, { 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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ImageEditorComponent, isStandalone: true, selector: "croco-html-image-editor", inputs: { tag: "tag", presentOrEdit: "presentOrEdit" }, ngImport: i0, template: "<div>\n  <div style=\"height: 10px;\">\n  </div>\n\n  @if (hasImageError) {\n    <div class=\"error-block\">\n      \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E \u043F\u043E \u0443\u043A\u0430\u0437\u0430\u043D\u043D\u043E\u043C\u0443 \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E \u0444\u0430\u0439\u043B \u043D\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u043B\u0438 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043D\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.\n    </div>\n  }\n\n  @if (hasFileId() && !hasImageError) {\n    <div>\n      <img\n        [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%', 'max-width': imageMaxWidth ? imageMaxWidth + 'px' : '100%', }\"\n        class=\"mx-auto d-block img-fluid\" [src]=\"getSrc()\" (error)=\"onErrorHandler()\" alt=\"photo\"/>\n    </div>\n  }\n\n  @if (!hasFileId()) {\n    <div>\n      <h5>[\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E]</h5>\n    </div>\n  }\n\n  @if(!presentOrEdit) {\n    <mat-slide-toggle style=\"padding: 10px 0\" [(ngModel)]=\"isShowMediaRequest\">\u041F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C \u043C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B</mat-slide-toggle>\n  }\n\n  @if(isShowMediaRequest) {\n    <div style=\"display: flex; flex-direction: column; gap: 20px\">\n      <div class=\"media-request__header\">\n        <span>\u041C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B:</span>\n        @if (!presentOrEdit) {\n          <button (click)=\"addNewMediaRequest()\" class=\"w-30\" mat-icon-button color=\"primary\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n      </div>\n      @for (request of requests; track $index) {\n        <div class=\"media-request__container\">\n          @if (presentOrEdit) {\n            <div style=\"display: flex; flex-direction: column; gap: 5px\">\n              <span class=\"w-100\">\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.minScreenWidth}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.maxScreenWidth}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageHeight}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageWidth}}</span>\n            </div>\n          }\n          @else {\n            <div style=\"width: 100%\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.minScreenWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxScreenWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxImageHeight\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxImageWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n            </div>\n\n            <button (click)=\"deleteMediaRequest($index)\" class=\"w-30\" mat-icon-button color=\"warn\">\n              <mat-icon>delete</mat-icon>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n\n@if (!presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\"></div>\n    <div style=\"overflow-x:auto;\" class=\"mode-toggle-container\">\n      <mat-button-toggle-group [(ngModel)]=\"searchOrEdit\">\n        <mat-button-toggle value=\"search\">\n          \u0418\u0441\u043A\u0430\u0442\u044C \u0444\u0430\u0439\u043B <mat-icon>search</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"edit\">\n          \u0423\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u043E \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443 <mat-icon>settings</mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div [hidden]=\"searchOrEdit !== 'search'\">\n      <div class=\"file-selection\">\n        <div class=\"existing-files\">\n          <h6>\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0438\u0437 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044E\u0449\u0438\u0445 \u0444\u0430\u0439\u043B\u043E\u0432:</h6>\n          <croco-html-file-id-select\n            [labelText]=\"'\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B'\"\n            [fileId]=\"fileId\"\n            (onFileIdChanged)=\"onFileIdChanged($event)\">\n          </croco-html-file-id-select>\n        </div>\n      </div>\n    </div>\n    <div [hidden]=\"searchOrEdit !== 'edit'\">\n      <div>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\n            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\n          </mat-label>\n          <input matInput placeholder=\"\u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\" new-autocomplete=\"off\" autocomplete=\"off\"\n            [(ngModel)]=\"fileId\"\n            (ngModelChange)=\"onFileIdChanged($event)\">\n        </mat-form-field>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".error-block{background-color:#f32323;color:#fff;text-align:center;border-radius:10px;padding:10px}.media-request__header{align-items:center;display:flex;width:100%;justify-content:space-between}.media-request__container{display:flex;align-items:center;border-bottom:1px solid rgba(128,128,128,.7);padding-bottom:10px}.file-selection{display:flex;flex-direction:column;gap:20px}.file-selection h6{margin:0 0 12px;color:#333}.file-selection .existing-files{display:flex;flex-direction:column;gap:8px}@media screen and (max-width: 768px){mat-button-toggle-group{display:flex;flex-direction:column}}.mode-toggle-container{margin-bottom:20px}\n"], dependencies: [{ kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FileIdSelectComponent, selector: "croco-html-file-id-select", inputs: ["labelText", "fileId"], outputs: ["fileId", "onFileIdChanged"] }, { 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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ImageEditorComponent, decorators: [{
             type: Component,
@@ -2861,7 +2882,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         NgStyle,
                         MatIconButton,
                         MatSlideToggle
-                    ], template: "<div>\n  <div style=\"height: 10px;\">\n  </div>\n\n  @if (hasImageError) {\n    <div class=\"error-block\">\n      \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E \u043F\u043E \u0443\u043A\u0430\u0437\u0430\u043D\u043D\u043E\u043C\u0443 \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E \u0444\u0430\u0439\u043B \u043D\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u043B\u0438 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043D\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.\n    </div>\n  }\n\n  @if (hasFileId() && !hasImageError) {\n    <div>\n      <img\n        [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%', 'max-width': imageMaxWidth ? imageMaxWidth + 'px' : '100%', }\"\n        class=\"mx-auto d-block img-fluid\" [src]=\"getSrc()\" (error)=\"onErrorHandler()\" alt=\"photo\"/>\n    </div>\n  }\n\n  @if (!hasFileId()) {\n    <div>\n      <h5>[\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E]</h5>\n    </div>\n  }\n\n  @if(!presentOrEdit) {\n    <mat-slide-toggle style=\"padding: 10px 0\" [(ngModel)]=\"isShowMediaRequest\">\u041F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C \u043C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B</mat-slide-toggle>\n  }\n\n  @if(isShowMediaRequest) {\n    <div style=\"display: flex; flex-direction: column; gap: 20px\">\n      <div class=\"media-request__header\">\n        <span>\u041C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B:</span>\n        @if (!presentOrEdit) {\n          <button (click)=\"addNewMediaRequest()\" class=\"w-30\" mat-icon-button color=\"primary\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n      </div>\n      @for (request of requests; track $index) {\n        <div class=\"media-request__container\">\n          @if (presentOrEdit) {\n            <div style=\"display: flex; flex-direction: column; gap: 5px\">\n              <span class=\"w-100\">\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.minScreenWidth}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.maxScreenWidth}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageHeight}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageWidth}}</span>\n            </div>\n          }\n          @else {\n            <div style=\"width: 100%\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.minScreenWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxScreenWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxImageHeight\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxImageWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n            </div>\n\n            <button (click)=\"deleteMediaRequest($index)\" class=\"w-30\" mat-icon-button color=\"warn\">\n              <mat-icon>delete</mat-icon>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n\n@if (!presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\"></div>\n    <div style=\"overflow-x:auto;\" class=\"mode-toggle-container\">\n      <mat-button-toggle-group [(ngModel)]=\"searchOrEdit\">\n        <mat-button-toggle value=\"search\">\n          \u0418\u0441\u043A\u0430\u0442\u044C \u0444\u0430\u0439\u043B <mat-icon>search</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"edit\">\n          \u0423\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u043E \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443 <mat-icon>settings</mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div [hidden]=\"searchOrEdit !== 'search'\">\n      <div class=\"file-selection\">\n        <div class=\"existing-files\">\n          <h6>\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0438\u0437 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044E\u0449\u0438\u0445 \u0444\u0430\u0439\u043B\u043E\u0432:</h6>\n          <croco-html-file-id-select\n            [labelText]=\"'\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B'\"\n            [fileId]=\"fileId\"\n            (onFileIdChanged)=\"onFileIdChanged($event)\">\n          </croco-html-file-id-select>\n        </div>\n      </div>\n    </div>\n    <div [hidden]=\"searchOrEdit !== 'edit'\">\n      <div>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\n            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\n          </mat-label>\n          <input matInput placeholder=\"\u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\" new-autocomplete=\"off\" autocomplete=\"off\"\n            [(ngModel)]=\"fileId\"\n            (ngModelChange)=\"onFileIdChanged($event)\">\n        </mat-form-field>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".error-block{background-color:#f32323;color:#fff;text-align:center;border-radius:10px;padding:10px}.media-request__header{align-items:center;display:flex;width:100%;justify-content:space-between}.media-request__container{display:flex;align-items:center;border-bottom:1px solid rgba(128,128,128,.7);padding-bottom:10px}.file-selection{display:flex;flex-direction:column;gap:20px}.file-selection h6{margin:0 0 12px;color:#333}.file-selection .existing-files{display:flex;flex-direction:column;gap:8px}@media screen and (max-width: 768px){mat-button-toggle-group{display:flex;flex-direction:column}}.mode-toggle-container{margin-bottom:20px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  <div style=\"height: 10px;\">\n  </div>\n\n  @if (hasImageError) {\n    <div class=\"error-block\">\n      \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E \u043F\u043E \u0443\u043A\u0430\u0437\u0430\u043D\u043D\u043E\u043C\u0443 \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E \u0444\u0430\u0439\u043B \u043D\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u043B\u0438 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043D\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.\n    </div>\n  }\n\n  @if (hasFileId() && !hasImageError) {\n    <div>\n      <img\n        [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%', 'max-width': imageMaxWidth ? imageMaxWidth + 'px' : '100%', }\"\n        class=\"mx-auto d-block img-fluid\" [src]=\"getSrc()\" (error)=\"onErrorHandler()\" alt=\"photo\"/>\n    </div>\n  }\n\n  @if (!hasFileId()) {\n    <div>\n      <h5>[\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E]</h5>\n    </div>\n  }\n\n  @if(!presentOrEdit) {\n    <mat-slide-toggle style=\"padding: 10px 0\" [(ngModel)]=\"isShowMediaRequest\">\u041F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C \u043C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B</mat-slide-toggle>\n  }\n\n  @if(isShowMediaRequest) {\n    <div style=\"display: flex; flex-direction: column; gap: 20px\">\n      <div class=\"media-request__header\">\n        <span>\u041C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B:</span>\n        @if (!presentOrEdit) {\n          <button (click)=\"addNewMediaRequest()\" class=\"w-30\" mat-icon-button color=\"primary\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n      </div>\n      @for (request of requests; track $index) {\n        <div class=\"media-request__container\">\n          @if (presentOrEdit) {\n            <div style=\"display: flex; flex-direction: column; gap: 5px\">\n              <span class=\"w-100\">\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.minScreenWidth}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.maxScreenWidth}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageHeight}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageWidth}}</span>\n            </div>\n          }\n          @else {\n            <div style=\"width: 100%\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.minScreenWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxScreenWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxImageHeight\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxImageWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n            </div>\n\n            <button (click)=\"deleteMediaRequest($index)\" class=\"w-30\" mat-icon-button color=\"warn\">\n              <mat-icon>delete</mat-icon>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n\n@if (!presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\"></div>\n    <div style=\"overflow-x:auto;\" class=\"mode-toggle-container\">\n      <mat-button-toggle-group [(ngModel)]=\"searchOrEdit\">\n        <mat-button-toggle value=\"search\">\n          \u0418\u0441\u043A\u0430\u0442\u044C \u0444\u0430\u0439\u043B <mat-icon>search</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"edit\">\n          \u0423\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u043E \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443 <mat-icon>settings</mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div [hidden]=\"searchOrEdit !== 'search'\">\n      <div class=\"file-selection\">\n        <div class=\"existing-files\">\n          <h6>\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0438\u0437 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044E\u0449\u0438\u0445 \u0444\u0430\u0439\u043B\u043E\u0432:</h6>\n          <croco-html-file-id-select\n            [labelText]=\"'\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B'\"\n            [fileId]=\"fileId\"\n            (onFileIdChanged)=\"onFileIdChanged($event)\">\n          </croco-html-file-id-select>\n        </div>\n      </div>\n    </div>\n    <div [hidden]=\"searchOrEdit !== 'edit'\">\n      <div>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\n            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\n          </mat-label>\n          <input matInput placeholder=\"\u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\" new-autocomplete=\"off\" autocomplete=\"off\"\n            [(ngModel)]=\"fileId\"\n            (ngModelChange)=\"onFileIdChanged($event)\">\n        </mat-form-field>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".error-block{background-color:#f32323;color:#fff;text-align:center;border-radius:10px;padding:10px}.media-request__header{align-items:center;display:flex;width:100%;justify-content:space-between}.media-request__container{display:flex;align-items:center;border-bottom:1px solid rgba(128,128,128,.7);padding-bottom:10px}.file-selection{display:flex;flex-direction:column;gap:20px}.file-selection h6{margin:0 0 12px;color:#333}.file-selection .existing-files{display:flex;flex-direction:column;gap:8px}@media screen and (max-width: 768px){mat-button-toggle-group{display:flex;flex-direction:column}}.mode-toggle-container{margin-bottom:20px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [CrocoHtmlOptionsToken]
@@ -2889,11 +2910,13 @@ class DefaultTags {
         { tag: ExternalVideoTagDataConsts.TagName, displayValue: 'Видео', isCustom: false },
         { tag: DownloadButtonTagDataConsts.TagName, displayValue: 'Кнопка для скачивания', isCustom: false },
         { tag: ButtonTagDataConsts.TagName, displayValue: 'Кнопка', isCustom: false },
-        // { tag: CustomWidgetTagDataConsts.TagName, displayValue: 'Виджет', isCustom: false },
         { tag: HtmlRawTagDataConsts.TagName, displayValue: 'Разметка', isCustom: false },
         { tag: 'text', displayValue: 'Текст', isCustom: false },
     ]; }
-    static getTags() {
+    static getTags(options) {
+        if (options.editorCustomAddTagButtons) {
+            return [...options.editorCustomAddTagButtons];
+        }
         return [...DefaultTags.tags];
     }
 }
@@ -2943,6 +2966,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 class TextEditorComponent {
     constructor() {
         this.unsubscribe = new Subject();
+        this._cdr = inject(ChangeDetectorRef);
         this.presentOrEdit = true;
         this.TextAlignment = TextAlignment;
         this._horizontalAlignment = TextAlignment.Left;
@@ -2953,19 +2977,23 @@ class TextEditorComponent {
             .pipe(takeUntil(this.unsubscribe))
             .subscribe(tag => {
             this._tag = tag;
+            this._cdr.markForCheck();
         });
         this._tagService.presentOrEdit$
             .pipe(takeUntil(this.unsubscribe))
             .subscribe(val => {
             this.presentOrEdit = val;
+            this._cdr.markForCheck();
         });
         this._horizontalAlignment = this._tag.attributes.hasOwnProperty(TextTagDataConsts.HAlign)
             ? this._tag.attributes[TextTagDataConsts.HAlign]
             : TextAlignment.Left;
+        this._cdr.markForCheck();
     }
     changeData() {
         this._tag.attributes[TextTagDataConsts.HAlign] = this._horizontalAlignment;
         this._tagService.tag$.next(this._tag);
+        this._cdr.markForCheck();
     }
     getInnerHtml() {
         return `<${this._tag.tagDescription.tag}>${this._tag.innerHtml}<${this._tag.tagDescription.tag}/>`;
@@ -2975,11 +3003,11 @@ class TextEditorComponent {
         this.unsubscribe.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TextEditorComponent, isStandalone: true, selector: "croco-html-text-editor", inputs: { tagService: "tagService" }, ngImport: i0, template: "@if (presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\">\n    </div>\n    @if (_horizontalAlignment === TextAlignment.Left) {\n      <div style=\"text-align: left;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n    @else if (_horizontalAlignment === TextAlignment.Right) {\n      <div style=\"text-align: right;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n    @else if (_horizontalAlignment === TextAlignment.Center) {\n      <div style=\"text-align: center;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n  </div>\n}\n@else {\n  <div>\n    <div style=\"overflow-x: auto;\">\n      <mat-button-toggle-group [(ngModel)]=\"_horizontalAlignment\" (ngModelChange)=\"changeData()\">\n        <mat-button-toggle value=\"center\">\n          \u041F\u043E \u0446\u0435\u043D\u0442\u0440\u0443 <mat-icon>format_align_center</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"left\">\n          \u0421\u043B\u0435\u0432\u0430 <mat-icon>format_align_left</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"right\">\n          \u0421\u043F\u0440\u0430\u0432\u0430 <mat-icon> format_align_right</mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"height: 10px;\">\n    </div>\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430</mat-label>\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n          cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430\"\n        [(ngModel)]=\"_tag.innerHtml\" (ngModelChange)=\"changeData()\"></textarea>\n      </mat-form-field>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TextEditorComponent, isStandalone: true, selector: "croco-html-text-editor", inputs: { tagService: "tagService" }, ngImport: i0, template: "@if (presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\">\n    </div>\n    @if (_horizontalAlignment === TextAlignment.Left) {\n      <div style=\"text-align: left;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n    @else if (_horizontalAlignment === TextAlignment.Right) {\n      <div style=\"text-align: right;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n    @else if (_horizontalAlignment === TextAlignment.Center) {\n      <div style=\"text-align: center;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n  </div>\n}\n@else {\n  <div>\n    <div style=\"overflow-x: auto;\">\n      <mat-button-toggle-group [(ngModel)]=\"_horizontalAlignment\" (ngModelChange)=\"changeData()\">\n        <mat-button-toggle value=\"center\">\n          \u041F\u043E \u0446\u0435\u043D\u0442\u0440\u0443 <mat-icon>format_align_center</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"left\">\n          \u0421\u043B\u0435\u0432\u0430 <mat-icon>format_align_left</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"right\">\n          \u0421\u043F\u0440\u0430\u0432\u0430 <mat-icon> format_align_right</mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"height: 10px;\">\n    </div>\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430</mat-label>\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n          cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430\"\n        [(ngModel)]=\"_tag.innerHtml\" (ngModelChange)=\"changeData()\"></textarea>\n      </mat-form-field>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TextEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-text-editor', standalone: true, imports: [
+            args: [{ selector: 'croco-html-text-editor', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatButtonToggleGroup,
                         FormsModule,
                         MatButtonToggle,
@@ -3135,12 +3163,14 @@ class MainEditorBlockComponent {
             .pipe(takeUntil(this.unsubscribe))
             .subscribe(val => {
             this.presentOrEdit = val;
+            this._cdr.markForCheck();
         });
     }
     constructor(_options) {
         this._options = _options;
         this.textTags = TextTags.allTextTags;
         this.unsubscribe = new Subject();
+        this._cdr = inject(ChangeDetectorRef);
         this.presentOrEdit = true;
         this.onTagSaved = new EventEmitter();
         this.onTagRemoved = new EventEmitter();
@@ -3168,11 +3198,11 @@ class MainEditorBlockComponent {
         this.unsubscribe.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MainEditorBlockComponent, deps: [{ token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MainEditorBlockComponent, isStandalone: true, selector: "croco-html-main-editor-block", inputs: { tag: "tag" }, outputs: { onTagSaved: "onTagSaved", onTagRemoved: "onTagRemoved" }, ngImport: i0, template: "<div class=\"main-editor-block\">\n  <div class=\"editor-container\">\n    @if (textTags.includes(_tag.tagDescription.tag)) {\n    <div>\n      <croco-html-text-editor [tagService]=\"_tagService\">\n      </croco-html-text-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'file-image') {\n    <div>\n      <croco-html-image-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-image-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'audio-player') {\n    <div>\n      <croco-html-audio-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-audio-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'custom-widget') {\n    <div>\n      <croco-html-custom-widget-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-custom-widget-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'external-video') {\n    <div>\n      <croco-html-external-video-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-external-video-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'download-file-button') {\n    <div>\n      <croco-html-download-file-button-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-download-file-button-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'button') {\n    <div>\n      <croco-html-button-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-button-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'html-raw') {\n    <div>\n      <croco-html-html-raw-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-html-raw-editor>\n    </div>\n    }\n    @else if (isDefinedCustomTag()) {\n    <div>\n      <croco-html-defined-custom-editor-block [tagService]=\"_tagService\"></croco-html-defined-custom-editor-block>\n    </div>\n    }\n    @else {\n    <div>\n      {{_tag.tagDescription.tag}} \u043D\u0435 \u043F\u043E\u043A\u0430\u0437\u0430\u043D\n    </div>\n    <div>\n      {{_tag | json}}\n    </div>\n    }\n\n  </div>\n\n  <div class=\"d-flex justify-content-between\">\n    <div class=\"d-flex justify-content-end align-self-center\">\n      <div style=\"margin-left: 16px;min-width: 96px\">\n        @if (presentOrEdit) {\n        <button (click)=\"cancelSave()\" mat-icon-button>\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M14.4374 0C15.0921 0 15.7197 0.261421 16.1781 0.723424L19.279 3.82432C19.7407 4.286 20.0001 4.91217 20.0001 5.56508C20.0001 6.21799 19.7407 6.84416 19.279 7.30584L7.95751 18.6238C7.25903 19.4295 6.2689 19.9245 5.1346 20.0023H0V19.0023L0.00324754 14.7873C0.0884381 13.7328 0.578667 12.7523 1.3265 12.0934L12.6954 0.72463C13.1564 0.260831 13.7834 0 14.4374 0ZM5.06401 18.0048C5.59823 17.967 6.09551 17.7184 6.49482 17.2616L14.0567 9.69971L10.3024 5.94518L2.69613 13.5496C2.29098 13.9079 2.04034 14.4092 2.00003 14.8678V18.0029L5.06401 18.0048ZM11.7167 4.53114L15.471 8.28549L17.8648 5.89162C17.9514 5.80502 18.0001 5.68756 18.0001 5.56508C18.0001 5.4426 17.9514 5.32514 17.8648 5.23854L14.7612 2.13486C14.6755 2.04855 14.559 2 14.4374 2C14.3158 2 14.1992 2.04855 14.1136 2.13486L11.7167 4.53114Z\"\n              fill=\"#323E8B\" />\n          </svg>\n        </button>\n        }\n        @else {\n        <button (click)=\"save()\" mat-icon-button>\n          <svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\"\n            aria-labelledby=\"saveIconTitle\" stroke=\"#000000\" stroke-width=\"1\" stroke-linecap=\"square\"\n            stroke-linejoin=\"miter\" fill=\"none\" color=\"#000000\">\n            <title id=\"saveIconTitle\">Save</title>\n            <path\n              d=\"M17.2928932,3.29289322 L21,7 L21,20 C21,20.5522847 20.5522847,21 20,21 L4,21 C3.44771525,21 3,20.5522847 3,20 L3,4 C3,3.44771525 3.44771525,3 4,3 L16.5857864,3 C16.8510029,3 17.1053568,3.10535684 17.2928932,3.29289322 Z\" />\n            <rect width=\"10\" height=\"8\" x=\"7\" y=\"13\" />\n            <rect width=\"8\" height=\"5\" x=\"8\" y=\"3\" />\n          </svg>\n        </button>\n        }\n        <button (click)=\"deleteItem()\" mat-icon-button color=\"warn\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M7.49988 0.833332H12.4999C13.4204 0.833332 14.1665 1.57952 14.1665 2.5V3.33333H16.6665C17.587 3.33333 18.3332 4.07952 18.3332 4.99999V6.66666C18.3332 7.58714 17.587 8.33333 16.6665 8.33333H16.5998L15.8332 17.5C15.8332 18.4205 15.087 19.1667 14.1665 19.1667H5.8332C4.91272 19.1667 4.16653 18.4205 4.16941 17.5692L3.39975 8.33333H3.33317C2.4127 8.33333 1.6665 7.58714 1.6665 6.66666V4.99999C1.6665 4.07952 2.4127 3.33333 3.33317 3.33333H5.83321V2.5C5.83321 1.57952 6.5794 0.833332 7.49988 0.833332ZM5.83321 5V4.99999H3.33317V6.66666H16.6665V4.99999L14.1665 5H5.83321ZM5.83324 17.5L5.07198 8.33333H14.9276L14.1695 17.4308L14.1666 17.5H5.83324ZM12.4999 2.5V3.33334H7.49992V2.5H12.4999Z\"\n              fill=\"#F96666\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n\n  </div>\n</div>\n", styles: [".main-editor-block{display:flex;justify-content:space-between}.editor-container{flex-grow:1}@media screen and (max-width: 700px){.main-editor-block{display:flex;flex-direction:column}}\n"], dependencies: [{ kind: "component", type: TextEditorComponent, selector: "croco-html-text-editor", inputs: ["tagService"] }, { kind: "component", type: ImageEditorComponent, selector: "croco-html-image-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: AudioEditorComponent, selector: "croco-html-audio-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: DownloadFileButtonEditorComponent, selector: "croco-html-download-file-button-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: HtmlRawEditorComponent, selector: "croco-html-html-raw-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ExternalVideoEditorComponent, selector: "croco-html-external-video-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: ButtonEditorComponent, selector: "croco-html-button-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: CustomWidgetEditorComponent, selector: "croco-html-custom-widget-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: DefinedCustomEditorBlockComponent, selector: "croco-html-defined-custom-editor-block", inputs: ["tagService"] }, { kind: "pipe", type: JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MainEditorBlockComponent, isStandalone: true, selector: "croco-html-main-editor-block", inputs: { tag: "tag" }, outputs: { onTagSaved: "onTagSaved", onTagRemoved: "onTagRemoved" }, ngImport: i0, template: "<div class=\"main-editor-block\">\n  <div class=\"editor-container\">\n    @if (textTags.includes(_tag.tagDescription.tag)) {\n    <div>\n      <croco-html-text-editor [tagService]=\"_tagService\">\n      </croco-html-text-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'file-image') {\n    <div>\n      <croco-html-image-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-image-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'audio-player') {\n    <div>\n      <croco-html-audio-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-audio-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'custom-widget') {\n    <div>\n      <croco-html-custom-widget-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-custom-widget-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'external-video') {\n    <div>\n      <croco-html-external-video-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-external-video-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'download-file-button') {\n    <div>\n      <croco-html-download-file-button-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-download-file-button-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'button') {\n    <div>\n      <croco-html-button-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-button-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'html-raw') {\n    <div>\n      <croco-html-html-raw-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-html-raw-editor>\n    </div>\n    }\n    @else if (isDefinedCustomTag()) {\n    <div>\n      <croco-html-defined-custom-editor-block [tagService]=\"_tagService\"></croco-html-defined-custom-editor-block>\n    </div>\n    }\n    @else {\n    <div>\n      {{_tag.tagDescription.tag}} \u043D\u0435 \u043F\u043E\u043A\u0430\u0437\u0430\u043D\n    </div>\n    <div>\n      {{_tag | json}}\n    </div>\n    }\n\n  </div>\n\n  <div class=\"d-flex justify-content-between\">\n    <div class=\"d-flex justify-content-end align-self-center\">\n      <div style=\"margin-left: 16px;min-width: 96px\">\n        @if (presentOrEdit) {\n        <button (click)=\"cancelSave()\" mat-icon-button>\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M14.4374 0C15.0921 0 15.7197 0.261421 16.1781 0.723424L19.279 3.82432C19.7407 4.286 20.0001 4.91217 20.0001 5.56508C20.0001 6.21799 19.7407 6.84416 19.279 7.30584L7.95751 18.6238C7.25903 19.4295 6.2689 19.9245 5.1346 20.0023H0V19.0023L0.00324754 14.7873C0.0884381 13.7328 0.578667 12.7523 1.3265 12.0934L12.6954 0.72463C13.1564 0.260831 13.7834 0 14.4374 0ZM5.06401 18.0048C5.59823 17.967 6.09551 17.7184 6.49482 17.2616L14.0567 9.69971L10.3024 5.94518L2.69613 13.5496C2.29098 13.9079 2.04034 14.4092 2.00003 14.8678V18.0029L5.06401 18.0048ZM11.7167 4.53114L15.471 8.28549L17.8648 5.89162C17.9514 5.80502 18.0001 5.68756 18.0001 5.56508C18.0001 5.4426 17.9514 5.32514 17.8648 5.23854L14.7612 2.13486C14.6755 2.04855 14.559 2 14.4374 2C14.3158 2 14.1992 2.04855 14.1136 2.13486L11.7167 4.53114Z\"\n              fill=\"#323E8B\" />\n          </svg>\n        </button>\n        }\n        @else {\n        <button (click)=\"save()\" mat-icon-button>\n          <svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\"\n            aria-labelledby=\"saveIconTitle\" stroke=\"#000000\" stroke-width=\"1\" stroke-linecap=\"square\"\n            stroke-linejoin=\"miter\" fill=\"none\" color=\"#000000\">\n            <title id=\"saveIconTitle\">Save</title>\n            <path\n              d=\"M17.2928932,3.29289322 L21,7 L21,20 C21,20.5522847 20.5522847,21 20,21 L4,21 C3.44771525,21 3,20.5522847 3,20 L3,4 C3,3.44771525 3.44771525,3 4,3 L16.5857864,3 C16.8510029,3 17.1053568,3.10535684 17.2928932,3.29289322 Z\" />\n            <rect width=\"10\" height=\"8\" x=\"7\" y=\"13\" />\n            <rect width=\"8\" height=\"5\" x=\"8\" y=\"3\" />\n          </svg>\n        </button>\n        }\n        <button (click)=\"deleteItem()\" mat-icon-button color=\"warn\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M7.49988 0.833332H12.4999C13.4204 0.833332 14.1665 1.57952 14.1665 2.5V3.33333H16.6665C17.587 3.33333 18.3332 4.07952 18.3332 4.99999V6.66666C18.3332 7.58714 17.587 8.33333 16.6665 8.33333H16.5998L15.8332 17.5C15.8332 18.4205 15.087 19.1667 14.1665 19.1667H5.8332C4.91272 19.1667 4.16653 18.4205 4.16941 17.5692L3.39975 8.33333H3.33317C2.4127 8.33333 1.6665 7.58714 1.6665 6.66666V4.99999C1.6665 4.07952 2.4127 3.33333 3.33317 3.33333H5.83321V2.5C5.83321 1.57952 6.5794 0.833332 7.49988 0.833332ZM5.83321 5V4.99999H3.33317V6.66666H16.6665V4.99999L14.1665 5H5.83321ZM5.83324 17.5L5.07198 8.33333H14.9276L14.1695 17.4308L14.1666 17.5H5.83324ZM12.4999 2.5V3.33334H7.49992V2.5H12.4999Z\"\n              fill=\"#F96666\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n\n  </div>\n</div>\n", styles: [".main-editor-block{display:flex;justify-content:space-between}.editor-container{flex-grow:1}@media screen and (max-width: 700px){.main-editor-block{display:flex;flex-direction:column}}\n"], dependencies: [{ kind: "component", type: TextEditorComponent, selector: "croco-html-text-editor", inputs: ["tagService"] }, { kind: "component", type: ImageEditorComponent, selector: "croco-html-image-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: AudioEditorComponent, selector: "croco-html-audio-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: DownloadFileButtonEditorComponent, selector: "croco-html-download-file-button-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: HtmlRawEditorComponent, selector: "croco-html-html-raw-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ExternalVideoEditorComponent, selector: "croco-html-external-video-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: ButtonEditorComponent, selector: "croco-html-button-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: CustomWidgetEditorComponent, selector: "croco-html-custom-widget-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: DefinedCustomEditorBlockComponent, selector: "croco-html-defined-custom-editor-block", inputs: ["tagService"] }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MainEditorBlockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-main-editor-block', standalone: true, imports: [
+            args: [{ selector: 'croco-html-main-editor-block', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         TextEditorComponent,
                         ImageEditorComponent,
                         AudioEditorComponent,
@@ -3216,10 +3246,12 @@ class CustomWidgetIconComponent {
     set tagName(tagName) {
         this._tagName = tagName;
         this._shortTagName = tagName.substring(0, 2);
+        this._cdr.markForCheck();
     }
     constructor(_options) {
         this._options = _options;
         this.useDynamicComponent = false;
+        this._cdr = inject(ChangeDetectorRef);
         this._tagName = "";
         this._shortTagName = "";
     }
@@ -3236,13 +3268,14 @@ class CustomWidgetIconComponent {
             this.viewContainerRef.remove();
             this.dynamicContainerRef = this.viewContainerRef.createComponent(component);
         }
+        this._cdr.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CustomWidgetIconComponent, deps: [{ token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CustomWidgetIconComponent, isStandalone: true, selector: "croco-html-custom-widget-icon", inputs: { tagName: "tagName" }, viewQueries: [{ propertyName: "viewContainerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #container>\n    @if (!useDynamicComponent) {\n    <span>\n        {{_shortTagName}}\n    </span>\n    }\n</ng-container>" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CustomWidgetIconComponent, isStandalone: true, selector: "croco-html-custom-widget-icon", inputs: { tagName: "tagName" }, viewQueries: [{ propertyName: "viewContainerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #container>\n    @if (!useDynamicComponent) {\n    <span>\n        {{_shortTagName}}\n    </span>\n    }\n</ng-container>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CustomWidgetIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-custom-widget-icon', imports: [], standalone: true, template: "<ng-container #container>\n    @if (!useDynamicComponent) {\n    <span>\n        {{_shortTagName}}\n    </span>\n    }\n</ng-container>" }]
+            args: [{ selector: 'croco-html-custom-widget-icon', imports: [], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container #container>\n    @if (!useDynamicComponent) {\n    <span>\n        {{_shortTagName}}\n    </span>\n    }\n</ng-container>" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [CrocoHtmlOptionsToken]
@@ -3266,8 +3299,8 @@ class VisualEditorComponent {
         this.recalculateHtml();
         return this.html;
     }
-    constructor(_cdref, _options) {
-        this._cdref = _cdref;
+    constructor(_cdr, _options) {
+        this._cdr = _cdr;
         this._options = _options;
         this.isLoading = false;
         this.loadingText = "Идёт загрузка";
@@ -3303,6 +3336,7 @@ class VisualEditorComponent {
         this.text = '';
         this.alignment = TextAlignment.Left;
         this.textTag = DefaultTags.textTags[0].tag;
+        this._cdr.markForCheck();
     }
     drop(event) {
         moveItemInArray(this.bodyTags, event.previousIndex, event.currentIndex);
@@ -3325,10 +3359,12 @@ class VisualEditorComponent {
         let result = BodyTagsExtensions.bodyTagsToHtml(this.bodyTags, this._options);
         this.html = XmlExtensions.formatXml("<body>" + result + "</body>");
         this.onHtmlChanged.emit(this.html);
+        this._cdr.markForCheck();
     }
     recalculateBodyTags() {
         this.bodyTags = BodyTagsExtensions.getBodyTags(this.html, this._options);
         this.saveBodyTags = [...this.bodyTags];
+        this._cdr.markForCheck();
     }
     selectTag(data) {
         this.htmlRaw = '';
@@ -3341,9 +3377,7 @@ class VisualEditorComponent {
             else if (data.tag === ExternalVideoTagDataConsts.TagName) {
                 this.selectedVideoPlayer = this.videoPlayers[0].type;
             }
-            else if (data.tag === FileImageTagDataConsts.TagName) {
-                return;
-            }
+            this._cdr.markForCheck();
             return;
         }
         this.addRegularTag();
@@ -3468,6 +3502,7 @@ class VisualEditorComponent {
         this.imageMode = null;
         this.resetTextStyle();
         this.isTagAdditionStarted = false;
+        this._cdr.markForCheck();
     }
     addRegularTag() {
         if (!this.selectedValue) {
@@ -3499,8 +3534,9 @@ class VisualEditorComponent {
     }
     ngOnInit() {
         this.recalculateBodyTags();
-        this.tags = DefaultTags.getTags();
+        this.tags = DefaultTags.getTags(this._options);
         this.selectedVideoPlayer = this.videoPlayers[0].type;
+        this._cdr.markForCheck();
     }
     setTagButton(tagName) {
         return `tag-button-${tagName}`;
@@ -3509,7 +3545,7 @@ class VisualEditorComponent {
         return `align-${type}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: VisualEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: VisualEditorComponent, isStandalone: true, selector: "croco-visual-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged", rendered: "rendered" }, viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }, { propertyName: "imageUploadBtn", first: true, predicate: ["imageUploadBtn"], descendants: true }], ngImport: i0, template: "@if (isLoading) {\n  <div>\n    <div>\n      <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\n      <div style=\"text-align: center;\">{{loadingText}}</div>\n    </div>\n    <div style=\"height: 10px;\"></div>\n  </div>\n}\n<div [hidden]=\"isLoading\">\n  <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    @for (tag of bodyTags; track tag; let i = $index) {\n      <div cdkDrag>\n        <mat-card style=\"margin: 2px;\" class=\"mat-card special\">\n          <mat-card-content>\n            <div class=\"d-flex justify-content-between\">\n              <div class=\"example-handle\" cdkDragHandle>\n                <svg width=\"24\" height=\"24\" class=\"move-icon\">\n                  <use [attr.xlink:href]=\"'move-icon' | spriteIconPath\"></use>\n                </svg>\n              </div>\n              <div>\n                <div class=\"badge\" [matTooltip]=\"tag.tagDescription.displayValue\">\n                  <span class=\"text-align-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: tag.tagDescription.tag}\">\n                  </ng-container>\n                  </span>\n                </div>\n              </div>\n            </div>\n            <div style=\"height: 15px;\"></div>\n            <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagChangedHandler($event, i)\"\n              (onTagRemoved)=\"onTagRemovedHandler(i)\">\n            </croco-html-main-editor-block>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n  </div>\n</div>\n<div style=\"height: 10px;\"></div>\n<div [hidden]=\"isLoading\">\n  @if (!isTagAdditionStarted) {\n    <div class=\"col-12\">\n      <div class=\"tag-item add-tag-button\" (click)=\"isTagAdditionStarted = true\">\n        <div class=\"tag-icon\">\n          <mat-icon>add</mat-icon>\n        </div>\n        <div class=\"tag-text\">\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433</div>\n      </div>\n    </div>\n  }\n  @else {\n  <mat-card style=\"margin: 2px;\" class=\"mat-card special\">\n    <mat-card-content>\n        <div class=\"row d-flex align-items-center\">\n          <div class=\"col-12\">\n            <div class=\"w-100\">\n              <div class=\"tags\">\n                @for (tag of tags; track tag.displayValue) {\n                  <div class=\"tag-item\"\n                       (click)=\"selectTag(tag)\"\n                       [class.active]=\"selectedValue === tag.tag\"\n                  >\n                    <div class=\"tag-icon\">\n                      <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                    [ngTemplateOutletContext]=\"{icon: tag.tag}\">\n                      </ng-container>\n                    </div>\n                    <div class=\"tag-text\">{{tag.displayValue}}</div>\n                  </div>\n                }\n\n                @if (useCustomWidgetsButton) {\n                  <div class=\"tag-item\"\n                       (click)=\"customWidgetsClickHandler()\"\n                  >\n                    <div class=\"tag-icon\">\n                      <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                    [ngTemplateOutletContext]=\"{icon: 'custom-widget'}\">\n                      </ng-container>\n                    </div>\n                    <div class=\"tag-text\">\u0414\u0440\u0443\u0433\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044B</div>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n          @if (selectedValue === FileImageTagDataConsts.TagName && imageMode === null) {\n            <div class=\"col-12\">\n              <div class=\"image-mode-selection\">\n                <button (click)=\"imageMode = 'select'; selectExistingImage()\" class=\"w-100 image-mode-btn\" mat-stroked-button>\n                  <mat-icon>search</mat-icon>\n                  <span>\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0438\u0437 \u0443\u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043D\u044B\u0445 \u0444\u0430\u0439\u043B\u043E\u0432</span>\n                </button>\n                <button (click)=\"uploadNewImages()\" class=\"w-100 image-mode-btn\" mat-stroked-button>\n                  <mat-icon>upload</mat-icon>\n                  <span>\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u043D\u043E\u0432\u044B\u0435 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F</span>\n                </button>\n              </div>\n            </div>\n          }\n          <croco-app-upload-files-btn\n            #imageUploadBtn\n            [hidden]=\"true\"\n            extAccepts=\"image/*\"\n            [isMultiple]=\"true\"\n            btnText=\"\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n            (onPublicFilesUploaded)=\"onImageFilesUploaded($event.fileIds)\"\n            (onPrivateFilesUploaded)=\"onImageFilesUploaded($event.fileIds)\">\n          </croco-app-upload-files-btn>\n          @if (selectedValue === ExternalVideoTagDataConsts.TagName) {\n            <div class=\"col-12\">\n              <mat-form-field class=\"w-100\" appearance=\"outline\">\n                <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0438\u0434\u0435\u043E\u043F\u043B\u0435\u0435\u0440</mat-label>\n                <mat-select [(ngModel)]=\"selectedVideoPlayer\">\n                  @for (videoPlayer of videoPlayers; track videoPlayer.type) {\n                    <mat-option [value]=\"videoPlayer.type\">\n                      {{videoPlayer.displayValue}}\n                    </mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            </div>\n            @if (selectedVideoPlayer === ExternalVideoSupportedTypes.Code) {\n              <div class=\"col-12\">\n                <mat-form-field class=\"w-100\" appearance=\"outline\">\n                  <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n                  <input\n                    matInput\n                    placeholder=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\"\n                    [(ngModel)]=\"htmlRaw\"\n                  >\n                </mat-form-field>\n              </div>\n            }\n            <div class=\"col-12\">\n              <button (click)=\"addTagWithForm()\" class=\"w-100\" mat-stroked-button>\n                \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0432\u0438\u0434\u0435\u043E\n              </button>\n            </div>\n          }\n          @if (selectedValue === HtmlRawTagDataConsts.TagName) {\n            <div class=\"col-12\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n                <textarea\n                  #autosize=\"cdkTextareaAutosize\"\n                  matInput\n                  cdkTextareaAutosize\n                  cdkAutosizeMinRows=\"1\"\n                  cdkAutosizeMaxRows=\"5\"\n                  placeholder=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\"\n                  #textArea\n                  [(ngModel)]=\"htmlRaw\"\n                ></textarea>\n              </mat-form-field>\n            </div>\n            <div class=\"col-12\">\n              <button (click)=\"addTagWithForm()\" class=\"w-100\" mat-stroked-button>\n                \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n              </button>\n            </div>\n          }\n          @if (selectedValue === 'text') {\n            <div style=\"display: flex; justify-content: space-between; flex-wrap: wrap\">\n              <div style=\"margin-bottom: 22px; overflow-x: auto;\">\n                <mat-button-toggle-group\n                  [(ngModel)]=\"textTag\"\n                  [hideSingleSelectionIndicator]=\"true\"\n                >\n                  @for (option of textTagOptions; track option) {\n                    <mat-button-toggle value=\"{{ option.tag }}\">\n                      {{ option.displayValue }}\n                    </mat-button-toggle>\n                  }\n                </mat-button-toggle-group>\n              </div>\n\n              <div style=\"margin-bottom: 22px\">\n                <mat-button-toggle-group\n                  [(ngModel)]=\"alignment\"\n                  [hideSingleSelectionIndicator]=\"true\"\n                >\n                  @for (option of alignmentOptions; track option) {\n                    <mat-button-toggle value=\"{{ option.value }}\">\n                    <span class=\"text-align-icon\">\n                      <ng-container [ngTemplateOutlet]=\"textAlignToggleIcons\"\n                                    [ngTemplateOutletContext]=\"{icon: option.value}\">\n                      </ng-container>\n                    </span>\n                    </mat-button-toggle>\n                  }\n                </mat-button-toggle-group>\n              </div>\n            </div>\n            <mat-form-field class=\"w-100\">\n              <mat-label>\u0422\u0435\u043A\u0441\u0442</mat-label>\n              <textarea\n                #autosize=\"cdkTextareaAutosize\"\n                matInput\n                cdkTextareaAutosize\n                cdkAutosizeMinRows=\"1\"\n                cdkAutosizeMaxRows=\"5\"\n                placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n                #textArea\n                [(ngModel)]=\"text\"\n              ></textarea>\n            </mat-form-field>\n            <div class=\"col-12\">\n              <button (click)=\"addTagWithForm()\" class=\"w-100\" mat-stroked-button>\n                \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u043A\u0441\u0442\n              </button>\n            </div>\n          }\n        </div>\n\n    </mat-card-content>\n  </mat-card>\n  }\n</div>\n\n<ng-template #textAlignToggleIcons let-icon=\"icon\">\n  <svg width=\"20\" height=\"20\">\n    <use [attr.xlink:href]=\"setAlignButton(icon) | spriteIconPath\"></use>\n  </svg>\n</ng-template>\n\n<ng-template #tagButtonIcons let-icon=\"icon\">\n  @if (isDefinedCustomWidget(icon)) {\n    <croco-html-custom-widget-icon [tagName]=\"icon\"></croco-html-custom-widget-icon>\n  }\n  @else if (icon.indexOf('h') === 0 && icon.length === 2) {\n    {{icon.toUpperCase()}}\n  }\n  @else {\n    <svg width=\"20\" height=\"20\">\n      <use [attr.xlink:href]=\"setTagButton(icon) | spriteIconPath\"></use>\n    </svg>\n  }\n</ng-template>\n", styles: [":host{--mat-standard-button-toggle-selected-state-background-color: #323E8B;--mat-standard-button-toggle-text-color: #323E8B;--mat-standard-button-toggle-selected-state-text-color: white;--mat-standard-button-toggle-height: 36px;--mat-standard-button-toggle-divider-color: #323E8B;--mdc-outlined-button-label-text-weight: 400;--mdc-outlined-button-label-text-color: #333333 !important;--mdc-outlined-button-container-shape: 30px;--mdc-outlined-button-outline-width: 2px;--mdc-outlined-button-container-height: 44px}:host ::ng-deep .mat-button-toggle-appearance-standard span.mat-button-toggle-label-content{padding:0 8px;min-width:36px}.text-align-icon,.mat-button-toggle .text-align-icon{color:#323e8b}.mat-button-toggle:hover,.mat-button-toggle:hover .text-align-icon{color:#747ebf}.mat-button-toggle-checked .text-align-icon{color:#fff}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.badge{width:44px;height:44px;border-radius:50%;border:1px solid #323E8B;display:flex;align-items:center;justify-content:center;color:#323e8b}.mat-card.special{border:1px solid #747EBF;border-radius:8px;box-shadow:none;margin:2px 2px 10px}.tags{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}@media (max-width: 768px){.tags{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;background-color:#f5f5f5;border-radius:12px}}@media (max-width: 575px){.tags{grid-template-columns:repeat(2,1fr);gap:10px;padding:12px}}.tag-item{display:flex;align-items:center;gap:5px;cursor:pointer;padding:10px 20px;border:1px solid #323E8B;border-radius:30px;background-color:#fff;color:#23262a;transition:.2s ease-in-out}@media (max-width: 768px){.tag-item{flex-direction:column;justify-content:center;padding:16px 8px;border-radius:12px;min-height:80px;gap:8px}}.tag-icon{color:#323e8b;display:flex;align-items:center;justify-content:center}.tag-icon svg{width:20px;height:20px}@media (max-width: 768px){.tag-icon{font-size:24px;margin-bottom:0}.tag-icon svg{width:24px;height:24px}}.tag-text{color:#323e8b}@media (max-width: 768px){.tag-text{font-size:12px;font-weight:500;text-align:center;line-height:1.2}}.text-align-icon{color:#323e8b}.tag-item.active{background-color:#323e8b;color:#fff}.tag-item.active .tag-icon,.tag-item.active .tag-text{color:#fff}.tag-item.active svg{color:#fff}.tag-item:hover{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:hover .tag-icon,.tag-item:hover .tag-text{color:#747ebf}.tag-item:hover svg{color:#747ebf}.add-tag-button{width:100%;justify-content:center}.add-tag-button .tag-icon mat-icon{font-size:20px;width:20px;height:20px;line-height:20px;color:inherit}@media (max-width: 768px){.add-tag-button .tag-icon mat-icon{font-size:24px;width:24px;height:24px;line-height:24px}}.add-tag-button:hover .tag-icon mat-icon{color:#747ebf}.image-mode-selection{display:flex;flex-direction:column;gap:16px}.image-mode-selection .image-mode-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px}.image-mode-selection .image-mode-btn mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}@media (max-width: 768px){.tag-item:hover{color:inherit;box-shadow:none}.tag-item:hover svg{color:inherit}.tag-item:active{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:active svg{color:#747ebf}}.move-icon:hover{cursor:pointer;opacity:.7}.cdk-drag.cdk-drag-placeholder,.cdk-drag-preview{opacity:.5;transition:opacity .2s}.example-handle{color:#323e8b}\n"], dependencies: [{ kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MainEditorBlockComponent, selector: "croco-html-main-editor-block", inputs: ["tag"], outputs: ["onTagSaved", "onTagRemoved"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: CustomWidgetIconComponent, selector: "croco-html-custom-widget-icon", inputs: ["tagName"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: UploadFilesBtnComponent, selector: "croco-app-upload-files-btn", inputs: ["extAccepts", "isMultiple", "btnText", "hidden"], outputs: ["postFilesStarted", "onPublicFilesUploaded", "onPrivateFilesUploaded"] }, { kind: "pipe", type: SpriteIconPathPipe, name: "spriteIconPath" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: VisualEditorComponent, isStandalone: true, selector: "croco-visual-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged", rendered: "rendered" }, viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }, { propertyName: "imageUploadBtn", first: true, predicate: ["imageUploadBtn"], descendants: true }], ngImport: i0, template: "@if (isLoading) {\n  <div>\n    <div>\n      <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\n      <div style=\"text-align: center;\">{{loadingText}}</div>\n    </div>\n    <div style=\"height: 10px;\"></div>\n  </div>\n}\n<div [hidden]=\"isLoading\">\n  <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    @for (tag of bodyTags; track tag; let i = $index) {\n      <div cdkDrag>\n        <mat-card style=\"margin: 2px;\" class=\"mat-card special\">\n          <mat-card-content>\n            <div class=\"d-flex justify-content-between\">\n              <div class=\"example-handle\" cdkDragHandle>\n                <svg width=\"24\" height=\"24\" class=\"move-icon\">\n                  <use [attr.xlink:href]=\"'move-icon' | spriteIconPath\"></use>\n                </svg>\n              </div>\n              <div>\n                <div class=\"badge\" [matTooltip]=\"tag.tagDescription.displayValue\">\n                  <span class=\"text-align-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: tag.tagDescription.tag}\">\n                  </ng-container>\n                  </span>\n                </div>\n              </div>\n            </div>\n            <div style=\"height: 15px;\"></div>\n            <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagChangedHandler($event, i)\"\n              (onTagRemoved)=\"onTagRemovedHandler(i)\">\n            </croco-html-main-editor-block>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n  </div>\n</div>\n<div style=\"height: 10px;\"></div>\n<div [hidden]=\"isLoading\">\n  @if (!isTagAdditionStarted) {\n    <div class=\"col-12\">\n      <div class=\"tag-item add-tag-button\" (click)=\"isTagAdditionStarted = true\">\n        <div class=\"tag-icon\">\n          <mat-icon>add</mat-icon>\n        </div>\n        <div class=\"tag-text\">\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433</div>\n      </div>\n    </div>\n  }\n  @else {\n  <mat-card style=\"margin: 2px;\" class=\"mat-card special\">\n    <mat-card-content>\n        <div class=\"row d-flex align-items-center\">\n          <div class=\"col-12\">\n            <div class=\"w-100\">\n              <div class=\"tags\">\n                @for (tag of tags; track tag.displayValue) {\n                  <div class=\"tag-item\"\n                       (click)=\"selectTag(tag)\"\n                       [class.active]=\"selectedValue === tag.tag\"\n                  >\n                    <div class=\"tag-icon\">\n                      <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                    [ngTemplateOutletContext]=\"{icon: tag.tag}\">\n                      </ng-container>\n                    </div>\n                    <div class=\"tag-text\">{{tag.displayValue}}</div>\n                  </div>\n                }\n\n                @if (useCustomWidgetsButton) {\n                  <div class=\"tag-item\"\n                       (click)=\"customWidgetsClickHandler()\"\n                  >\n                    <div class=\"tag-icon\">\n                      <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                    [ngTemplateOutletContext]=\"{icon: 'custom-widget'}\">\n                      </ng-container>\n                    </div>\n                    <div class=\"tag-text\">\u0414\u0440\u0443\u0433\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044B</div>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n          @if (selectedValue === FileImageTagDataConsts.TagName && imageMode === null) {\n            <div class=\"col-12\">\n              <div class=\"image-mode-selection\">\n                <button (click)=\"imageMode = 'select'; selectExistingImage()\" class=\"w-100 image-mode-btn\" mat-stroked-button>\n                  <mat-icon>search</mat-icon>\n                  <span>\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0438\u0437 \u0443\u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043D\u044B\u0445 \u0444\u0430\u0439\u043B\u043E\u0432</span>\n                </button>\n                <button (click)=\"uploadNewImages()\" class=\"w-100 image-mode-btn\" mat-stroked-button>\n                  <mat-icon>upload</mat-icon>\n                  <span>\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u043D\u043E\u0432\u044B\u0435 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F</span>\n                </button>\n              </div>\n            </div>\n          }\n          <croco-app-upload-files-btn\n            #imageUploadBtn\n            [hidden]=\"true\"\n            extAccepts=\"image/*\"\n            [isMultiple]=\"true\"\n            btnText=\"\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n            (onPublicFilesUploaded)=\"onImageFilesUploaded($event.fileIds)\"\n            (onPrivateFilesUploaded)=\"onImageFilesUploaded($event.fileIds)\">\n          </croco-app-upload-files-btn>\n          @if (selectedValue === ExternalVideoTagDataConsts.TagName) {\n            <div class=\"col-12\">\n              <mat-form-field class=\"w-100\" appearance=\"outline\">\n                <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0438\u0434\u0435\u043E\u043F\u043B\u0435\u0435\u0440</mat-label>\n                <mat-select [(ngModel)]=\"selectedVideoPlayer\">\n                  @for (videoPlayer of videoPlayers; track videoPlayer.type) {\n                    <mat-option [value]=\"videoPlayer.type\">\n                      {{videoPlayer.displayValue}}\n                    </mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            </div>\n            @if (selectedVideoPlayer === ExternalVideoSupportedTypes.Code) {\n              <div class=\"col-12\">\n                <mat-form-field class=\"w-100\" appearance=\"outline\">\n                  <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n                  <input\n                    matInput\n                    placeholder=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\"\n                    [(ngModel)]=\"htmlRaw\"\n                  >\n                </mat-form-field>\n              </div>\n            }\n            <div class=\"col-12\">\n              <button (click)=\"addTagWithForm()\" class=\"w-100\" mat-stroked-button>\n                \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0432\u0438\u0434\u0435\u043E\n              </button>\n            </div>\n          }\n          @if (selectedValue === HtmlRawTagDataConsts.TagName) {\n            <div class=\"col-12\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n                <textarea\n                  #autosize=\"cdkTextareaAutosize\"\n                  matInput\n                  cdkTextareaAutosize\n                  cdkAutosizeMinRows=\"1\"\n                  cdkAutosizeMaxRows=\"5\"\n                  placeholder=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\"\n                  #textArea\n                  [(ngModel)]=\"htmlRaw\"\n                ></textarea>\n              </mat-form-field>\n            </div>\n            <div class=\"col-12\">\n              <button (click)=\"addTagWithForm()\" class=\"w-100\" mat-stroked-button>\n                \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n              </button>\n            </div>\n          }\n          @if (selectedValue === 'text') {\n            <div style=\"display: flex; justify-content: space-between; flex-wrap: wrap\">\n              <div style=\"margin-bottom: 22px; overflow-x: auto;\">\n                <mat-button-toggle-group\n                  [(ngModel)]=\"textTag\"\n                  [hideSingleSelectionIndicator]=\"true\"\n                >\n                  @for (option of textTagOptions; track option) {\n                    <mat-button-toggle value=\"{{ option.tag }}\">\n                      {{ option.displayValue }}\n                    </mat-button-toggle>\n                  }\n                </mat-button-toggle-group>\n              </div>\n\n              <div style=\"margin-bottom: 22px\">\n                <mat-button-toggle-group\n                  [(ngModel)]=\"alignment\"\n                  [hideSingleSelectionIndicator]=\"true\"\n                >\n                  @for (option of alignmentOptions; track option.value) {\n                    <mat-button-toggle value=\"{{ option.value }}\">\n                    <span class=\"text-align-icon\">\n                      <ng-container [ngTemplateOutlet]=\"textAlignToggleIcons\"\n                                    [ngTemplateOutletContext]=\"{icon: option.value}\">\n                      </ng-container>\n                    </span>\n                    </mat-button-toggle>\n                  }\n                </mat-button-toggle-group>\n              </div>\n            </div>\n            <mat-form-field class=\"w-100\">\n              <mat-label>\u0422\u0435\u043A\u0441\u0442</mat-label>\n              <textarea\n                #autosize=\"cdkTextareaAutosize\"\n                matInput\n                cdkTextareaAutosize\n                cdkAutosizeMinRows=\"1\"\n                cdkAutosizeMaxRows=\"5\"\n                placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n                #textArea\n                [(ngModel)]=\"text\"\n              ></textarea>\n            </mat-form-field>\n            <div class=\"col-12\">\n              <button (click)=\"addTagWithForm()\" class=\"w-100\" mat-stroked-button>\n                \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u043A\u0441\u0442\n              </button>\n            </div>\n          }\n        </div>\n\n    </mat-card-content>\n  </mat-card>\n  }\n</div>\n\n<ng-template #textAlignToggleIcons let-icon=\"icon\">\n  <svg width=\"20\" height=\"20\">\n    <use [attr.xlink:href]=\"setAlignButton(icon) | spriteIconPath\"></use>\n  </svg>\n</ng-template>\n\n<ng-template #tagButtonIcons let-icon=\"icon\">\n  @if (isDefinedCustomWidget(icon)) {\n    <croco-html-custom-widget-icon [tagName]=\"icon\"></croco-html-custom-widget-icon>\n  }\n  @else if (icon.indexOf('h') === 0 && icon.length === 2) {\n    {{icon.toUpperCase()}}\n  }\n  @else {\n    <svg width=\"20\" height=\"20\">\n      <use [attr.xlink:href]=\"setTagButton(icon) | spriteIconPath\"></use>\n    </svg>\n  }\n</ng-template>\n", styles: [":host{--mat-standard-button-toggle-selected-state-background-color: #323E8B;--mat-standard-button-toggle-text-color: #323E8B;--mat-standard-button-toggle-selected-state-text-color: white;--mat-standard-button-toggle-height: 36px;--mat-standard-button-toggle-divider-color: #323E8B;--mdc-outlined-button-label-text-weight: 400;--mdc-outlined-button-label-text-color: #333333 !important;--mdc-outlined-button-container-shape: 30px;--mdc-outlined-button-outline-width: 2px;--mdc-outlined-button-container-height: 44px}:host ::ng-deep .mat-button-toggle-appearance-standard span.mat-button-toggle-label-content{padding:0 8px;min-width:36px}.text-align-icon,.mat-button-toggle .text-align-icon{color:#323e8b}.mat-button-toggle:hover,.mat-button-toggle:hover .text-align-icon{color:#747ebf}.mat-button-toggle-checked .text-align-icon{color:#fff}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.badge{width:44px;height:44px;border-radius:50%;border:1px solid #323E8B;display:flex;align-items:center;justify-content:center;color:#323e8b}.mat-card.special{border:1px solid #747EBF;border-radius:8px;box-shadow:none;margin:2px 2px 10px}.tags{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}@media (max-width: 768px){.tags{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;background-color:#f5f5f5;border-radius:12px}}@media (max-width: 575px){.tags{grid-template-columns:repeat(2,1fr);gap:10px;padding:12px}}.tag-item{display:flex;align-items:center;gap:5px;cursor:pointer;padding:10px 20px;border:1px solid #323E8B;border-radius:30px;background-color:#fff;color:#23262a;transition:.2s ease-in-out}@media (max-width: 768px){.tag-item{flex-direction:column;justify-content:center;padding:16px 8px;border-radius:12px;min-height:80px;gap:8px}}.tag-icon{color:#323e8b;display:flex;align-items:center;justify-content:center}.tag-icon svg{width:20px;height:20px}@media (max-width: 768px){.tag-icon{font-size:24px;margin-bottom:0}.tag-icon svg{width:24px;height:24px}}.tag-text{color:#323e8b}@media (max-width: 768px){.tag-text{font-size:12px;font-weight:500;text-align:center;line-height:1.2}}.text-align-icon{color:#323e8b}.tag-item.active{background-color:#323e8b;color:#fff}.tag-item.active .tag-icon,.tag-item.active .tag-text{color:#fff}.tag-item.active svg{color:#fff}.tag-item:hover{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:hover .tag-icon,.tag-item:hover .tag-text{color:#747ebf}.tag-item:hover svg{color:#747ebf}.add-tag-button{width:100%;justify-content:center}.add-tag-button .tag-icon mat-icon{font-size:20px;width:20px;height:20px;line-height:20px;color:inherit}@media (max-width: 768px){.add-tag-button .tag-icon mat-icon{font-size:24px;width:24px;height:24px;line-height:24px}}.add-tag-button:hover .tag-icon mat-icon{color:#747ebf}.image-mode-selection{display:flex;flex-direction:column;gap:16px}.image-mode-selection .image-mode-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px}.image-mode-selection .image-mode-btn mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}@media (max-width: 768px){.tag-item:hover{color:inherit;box-shadow:none}.tag-item:hover svg{color:inherit}.tag-item:active{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:active svg{color:#747ebf}}.move-icon:hover{cursor:pointer;opacity:.7}.cdk-drag.cdk-drag-placeholder,.cdk-drag-preview{opacity:.5;transition:opacity .2s}.example-handle{color:#323e8b}\n"], dependencies: [{ kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MainEditorBlockComponent, selector: "croco-html-main-editor-block", inputs: ["tag"], outputs: ["onTagSaved", "onTagRemoved"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: CustomWidgetIconComponent, selector: "croco-html-custom-widget-icon", inputs: ["tagName"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: UploadFilesBtnComponent, selector: "croco-app-upload-files-btn", inputs: ["extAccepts", "isMultiple", "btnText", "hidden"], outputs: ["postFilesStarted", "onPublicFilesUploaded", "onPrivateFilesUploaded"] }, { kind: "pipe", type: SpriteIconPathPipe, name: "spriteIconPath" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: VisualEditorComponent, decorators: [{
             type: Component,
@@ -3525,7 +3561,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         FormsModule,
                         MatSelect,
                         MatOption,
-                        AddFilesBtnComponent,
                         CdkDropList,
                         CdkDrag,
                         CdkDragHandle,
@@ -3538,7 +3573,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         CustomWidgetIconComponent,
                         MatIcon,
                         UploadFilesBtnComponent
-                    ], template: "@if (isLoading) {\n  <div>\n    <div>\n      <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\n      <div style=\"text-align: center;\">{{loadingText}}</div>\n    </div>\n    <div style=\"height: 10px;\"></div>\n  </div>\n}\n<div [hidden]=\"isLoading\">\n  <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    @for (tag of bodyTags; track tag; let i = $index) {\n      <div cdkDrag>\n        <mat-card style=\"margin: 2px;\" class=\"mat-card special\">\n          <mat-card-content>\n            <div class=\"d-flex justify-content-between\">\n              <div class=\"example-handle\" cdkDragHandle>\n                <svg width=\"24\" height=\"24\" class=\"move-icon\">\n                  <use [attr.xlink:href]=\"'move-icon' | spriteIconPath\"></use>\n                </svg>\n              </div>\n              <div>\n                <div class=\"badge\" [matTooltip]=\"tag.tagDescription.displayValue\">\n                  <span class=\"text-align-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: tag.tagDescription.tag}\">\n                  </ng-container>\n                  </span>\n                </div>\n              </div>\n            </div>\n            <div style=\"height: 15px;\"></div>\n            <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagChangedHandler($event, i)\"\n              (onTagRemoved)=\"onTagRemovedHandler(i)\">\n            </croco-html-main-editor-block>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n  </div>\n</div>\n<div style=\"height: 10px;\"></div>\n<div [hidden]=\"isLoading\">\n  @if (!isTagAdditionStarted) {\n    <div class=\"col-12\">\n      <div class=\"tag-item add-tag-button\" (click)=\"isTagAdditionStarted = true\">\n        <div class=\"tag-icon\">\n          <mat-icon>add</mat-icon>\n        </div>\n        <div class=\"tag-text\">\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433</div>\n      </div>\n    </div>\n  }\n  @else {\n  <mat-card style=\"margin: 2px;\" class=\"mat-card special\">\n    <mat-card-content>\n        <div class=\"row d-flex align-items-center\">\n          <div class=\"col-12\">\n            <div class=\"w-100\">\n              <div class=\"tags\">\n                @for (tag of tags; track tag.displayValue) {\n                  <div class=\"tag-item\"\n                       (click)=\"selectTag(tag)\"\n                       [class.active]=\"selectedValue === tag.tag\"\n                  >\n                    <div class=\"tag-icon\">\n                      <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                    [ngTemplateOutletContext]=\"{icon: tag.tag}\">\n                      </ng-container>\n                    </div>\n                    <div class=\"tag-text\">{{tag.displayValue}}</div>\n                  </div>\n                }\n\n                @if (useCustomWidgetsButton) {\n                  <div class=\"tag-item\"\n                       (click)=\"customWidgetsClickHandler()\"\n                  >\n                    <div class=\"tag-icon\">\n                      <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                    [ngTemplateOutletContext]=\"{icon: 'custom-widget'}\">\n                      </ng-container>\n                    </div>\n                    <div class=\"tag-text\">\u0414\u0440\u0443\u0433\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044B</div>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n          @if (selectedValue === FileImageTagDataConsts.TagName && imageMode === null) {\n            <div class=\"col-12\">\n              <div class=\"image-mode-selection\">\n                <button (click)=\"imageMode = 'select'; selectExistingImage()\" class=\"w-100 image-mode-btn\" mat-stroked-button>\n                  <mat-icon>search</mat-icon>\n                  <span>\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0438\u0437 \u0443\u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043D\u044B\u0445 \u0444\u0430\u0439\u043B\u043E\u0432</span>\n                </button>\n                <button (click)=\"uploadNewImages()\" class=\"w-100 image-mode-btn\" mat-stroked-button>\n                  <mat-icon>upload</mat-icon>\n                  <span>\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u043D\u043E\u0432\u044B\u0435 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F</span>\n                </button>\n              </div>\n            </div>\n          }\n          <croco-app-upload-files-btn\n            #imageUploadBtn\n            [hidden]=\"true\"\n            extAccepts=\"image/*\"\n            [isMultiple]=\"true\"\n            btnText=\"\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n            (onPublicFilesUploaded)=\"onImageFilesUploaded($event.fileIds)\"\n            (onPrivateFilesUploaded)=\"onImageFilesUploaded($event.fileIds)\">\n          </croco-app-upload-files-btn>\n          @if (selectedValue === ExternalVideoTagDataConsts.TagName) {\n            <div class=\"col-12\">\n              <mat-form-field class=\"w-100\" appearance=\"outline\">\n                <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0438\u0434\u0435\u043E\u043F\u043B\u0435\u0435\u0440</mat-label>\n                <mat-select [(ngModel)]=\"selectedVideoPlayer\">\n                  @for (videoPlayer of videoPlayers; track videoPlayer.type) {\n                    <mat-option [value]=\"videoPlayer.type\">\n                      {{videoPlayer.displayValue}}\n                    </mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            </div>\n            @if (selectedVideoPlayer === ExternalVideoSupportedTypes.Code) {\n              <div class=\"col-12\">\n                <mat-form-field class=\"w-100\" appearance=\"outline\">\n                  <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n                  <input\n                    matInput\n                    placeholder=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\"\n                    [(ngModel)]=\"htmlRaw\"\n                  >\n                </mat-form-field>\n              </div>\n            }\n            <div class=\"col-12\">\n              <button (click)=\"addTagWithForm()\" class=\"w-100\" mat-stroked-button>\n                \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0432\u0438\u0434\u0435\u043E\n              </button>\n            </div>\n          }\n          @if (selectedValue === HtmlRawTagDataConsts.TagName) {\n            <div class=\"col-12\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n                <textarea\n                  #autosize=\"cdkTextareaAutosize\"\n                  matInput\n                  cdkTextareaAutosize\n                  cdkAutosizeMinRows=\"1\"\n                  cdkAutosizeMaxRows=\"5\"\n                  placeholder=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\"\n                  #textArea\n                  [(ngModel)]=\"htmlRaw\"\n                ></textarea>\n              </mat-form-field>\n            </div>\n            <div class=\"col-12\">\n              <button (click)=\"addTagWithForm()\" class=\"w-100\" mat-stroked-button>\n                \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n              </button>\n            </div>\n          }\n          @if (selectedValue === 'text') {\n            <div style=\"display: flex; justify-content: space-between; flex-wrap: wrap\">\n              <div style=\"margin-bottom: 22px; overflow-x: auto;\">\n                <mat-button-toggle-group\n                  [(ngModel)]=\"textTag\"\n                  [hideSingleSelectionIndicator]=\"true\"\n                >\n                  @for (option of textTagOptions; track option) {\n                    <mat-button-toggle value=\"{{ option.tag }}\">\n                      {{ option.displayValue }}\n                    </mat-button-toggle>\n                  }\n                </mat-button-toggle-group>\n              </div>\n\n              <div style=\"margin-bottom: 22px\">\n                <mat-button-toggle-group\n                  [(ngModel)]=\"alignment\"\n                  [hideSingleSelectionIndicator]=\"true\"\n                >\n                  @for (option of alignmentOptions; track option) {\n                    <mat-button-toggle value=\"{{ option.value }}\">\n                    <span class=\"text-align-icon\">\n                      <ng-container [ngTemplateOutlet]=\"textAlignToggleIcons\"\n                                    [ngTemplateOutletContext]=\"{icon: option.value}\">\n                      </ng-container>\n                    </span>\n                    </mat-button-toggle>\n                  }\n                </mat-button-toggle-group>\n              </div>\n            </div>\n            <mat-form-field class=\"w-100\">\n              <mat-label>\u0422\u0435\u043A\u0441\u0442</mat-label>\n              <textarea\n                #autosize=\"cdkTextareaAutosize\"\n                matInput\n                cdkTextareaAutosize\n                cdkAutosizeMinRows=\"1\"\n                cdkAutosizeMaxRows=\"5\"\n                placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n                #textArea\n                [(ngModel)]=\"text\"\n              ></textarea>\n            </mat-form-field>\n            <div class=\"col-12\">\n              <button (click)=\"addTagWithForm()\" class=\"w-100\" mat-stroked-button>\n                \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u043A\u0441\u0442\n              </button>\n            </div>\n          }\n        </div>\n\n    </mat-card-content>\n  </mat-card>\n  }\n</div>\n\n<ng-template #textAlignToggleIcons let-icon=\"icon\">\n  <svg width=\"20\" height=\"20\">\n    <use [attr.xlink:href]=\"setAlignButton(icon) | spriteIconPath\"></use>\n  </svg>\n</ng-template>\n\n<ng-template #tagButtonIcons let-icon=\"icon\">\n  @if (isDefinedCustomWidget(icon)) {\n    <croco-html-custom-widget-icon [tagName]=\"icon\"></croco-html-custom-widget-icon>\n  }\n  @else if (icon.indexOf('h') === 0 && icon.length === 2) {\n    {{icon.toUpperCase()}}\n  }\n  @else {\n    <svg width=\"20\" height=\"20\">\n      <use [attr.xlink:href]=\"setTagButton(icon) | spriteIconPath\"></use>\n    </svg>\n  }\n</ng-template>\n", styles: [":host{--mat-standard-button-toggle-selected-state-background-color: #323E8B;--mat-standard-button-toggle-text-color: #323E8B;--mat-standard-button-toggle-selected-state-text-color: white;--mat-standard-button-toggle-height: 36px;--mat-standard-button-toggle-divider-color: #323E8B;--mdc-outlined-button-label-text-weight: 400;--mdc-outlined-button-label-text-color: #333333 !important;--mdc-outlined-button-container-shape: 30px;--mdc-outlined-button-outline-width: 2px;--mdc-outlined-button-container-height: 44px}:host ::ng-deep .mat-button-toggle-appearance-standard span.mat-button-toggle-label-content{padding:0 8px;min-width:36px}.text-align-icon,.mat-button-toggle .text-align-icon{color:#323e8b}.mat-button-toggle:hover,.mat-button-toggle:hover .text-align-icon{color:#747ebf}.mat-button-toggle-checked .text-align-icon{color:#fff}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.badge{width:44px;height:44px;border-radius:50%;border:1px solid #323E8B;display:flex;align-items:center;justify-content:center;color:#323e8b}.mat-card.special{border:1px solid #747EBF;border-radius:8px;box-shadow:none;margin:2px 2px 10px}.tags{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}@media (max-width: 768px){.tags{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;background-color:#f5f5f5;border-radius:12px}}@media (max-width: 575px){.tags{grid-template-columns:repeat(2,1fr);gap:10px;padding:12px}}.tag-item{display:flex;align-items:center;gap:5px;cursor:pointer;padding:10px 20px;border:1px solid #323E8B;border-radius:30px;background-color:#fff;color:#23262a;transition:.2s ease-in-out}@media (max-width: 768px){.tag-item{flex-direction:column;justify-content:center;padding:16px 8px;border-radius:12px;min-height:80px;gap:8px}}.tag-icon{color:#323e8b;display:flex;align-items:center;justify-content:center}.tag-icon svg{width:20px;height:20px}@media (max-width: 768px){.tag-icon{font-size:24px;margin-bottom:0}.tag-icon svg{width:24px;height:24px}}.tag-text{color:#323e8b}@media (max-width: 768px){.tag-text{font-size:12px;font-weight:500;text-align:center;line-height:1.2}}.text-align-icon{color:#323e8b}.tag-item.active{background-color:#323e8b;color:#fff}.tag-item.active .tag-icon,.tag-item.active .tag-text{color:#fff}.tag-item.active svg{color:#fff}.tag-item:hover{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:hover .tag-icon,.tag-item:hover .tag-text{color:#747ebf}.tag-item:hover svg{color:#747ebf}.add-tag-button{width:100%;justify-content:center}.add-tag-button .tag-icon mat-icon{font-size:20px;width:20px;height:20px;line-height:20px;color:inherit}@media (max-width: 768px){.add-tag-button .tag-icon mat-icon{font-size:24px;width:24px;height:24px;line-height:24px}}.add-tag-button:hover .tag-icon mat-icon{color:#747ebf}.image-mode-selection{display:flex;flex-direction:column;gap:16px}.image-mode-selection .image-mode-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px}.image-mode-selection .image-mode-btn mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}@media (max-width: 768px){.tag-item:hover{color:inherit;box-shadow:none}.tag-item:hover svg{color:inherit}.tag-item:active{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:active svg{color:#747ebf}}.move-icon:hover{cursor:pointer;opacity:.7}.cdk-drag.cdk-drag-placeholder,.cdk-drag-preview{opacity:.5;transition:opacity .2s}.example-handle{color:#323e8b}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isLoading) {\n  <div>\n    <div>\n      <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\n      <div style=\"text-align: center;\">{{loadingText}}</div>\n    </div>\n    <div style=\"height: 10px;\"></div>\n  </div>\n}\n<div [hidden]=\"isLoading\">\n  <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    @for (tag of bodyTags; track tag; let i = $index) {\n      <div cdkDrag>\n        <mat-card style=\"margin: 2px;\" class=\"mat-card special\">\n          <mat-card-content>\n            <div class=\"d-flex justify-content-between\">\n              <div class=\"example-handle\" cdkDragHandle>\n                <svg width=\"24\" height=\"24\" class=\"move-icon\">\n                  <use [attr.xlink:href]=\"'move-icon' | spriteIconPath\"></use>\n                </svg>\n              </div>\n              <div>\n                <div class=\"badge\" [matTooltip]=\"tag.tagDescription.displayValue\">\n                  <span class=\"text-align-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: tag.tagDescription.tag}\">\n                  </ng-container>\n                  </span>\n                </div>\n              </div>\n            </div>\n            <div style=\"height: 15px;\"></div>\n            <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagChangedHandler($event, i)\"\n              (onTagRemoved)=\"onTagRemovedHandler(i)\">\n            </croco-html-main-editor-block>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n  </div>\n</div>\n<div style=\"height: 10px;\"></div>\n<div [hidden]=\"isLoading\">\n  @if (!isTagAdditionStarted) {\n    <div class=\"col-12\">\n      <div class=\"tag-item add-tag-button\" (click)=\"isTagAdditionStarted = true\">\n        <div class=\"tag-icon\">\n          <mat-icon>add</mat-icon>\n        </div>\n        <div class=\"tag-text\">\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433</div>\n      </div>\n    </div>\n  }\n  @else {\n  <mat-card style=\"margin: 2px;\" class=\"mat-card special\">\n    <mat-card-content>\n        <div class=\"row d-flex align-items-center\">\n          <div class=\"col-12\">\n            <div class=\"w-100\">\n              <div class=\"tags\">\n                @for (tag of tags; track tag.displayValue) {\n                  <div class=\"tag-item\"\n                       (click)=\"selectTag(tag)\"\n                       [class.active]=\"selectedValue === tag.tag\"\n                  >\n                    <div class=\"tag-icon\">\n                      <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                    [ngTemplateOutletContext]=\"{icon: tag.tag}\">\n                      </ng-container>\n                    </div>\n                    <div class=\"tag-text\">{{tag.displayValue}}</div>\n                  </div>\n                }\n\n                @if (useCustomWidgetsButton) {\n                  <div class=\"tag-item\"\n                       (click)=\"customWidgetsClickHandler()\"\n                  >\n                    <div class=\"tag-icon\">\n                      <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                    [ngTemplateOutletContext]=\"{icon: 'custom-widget'}\">\n                      </ng-container>\n                    </div>\n                    <div class=\"tag-text\">\u0414\u0440\u0443\u0433\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044B</div>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n          @if (selectedValue === FileImageTagDataConsts.TagName && imageMode === null) {\n            <div class=\"col-12\">\n              <div class=\"image-mode-selection\">\n                <button (click)=\"imageMode = 'select'; selectExistingImage()\" class=\"w-100 image-mode-btn\" mat-stroked-button>\n                  <mat-icon>search</mat-icon>\n                  <span>\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0438\u0437 \u0443\u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043D\u044B\u0445 \u0444\u0430\u0439\u043B\u043E\u0432</span>\n                </button>\n                <button (click)=\"uploadNewImages()\" class=\"w-100 image-mode-btn\" mat-stroked-button>\n                  <mat-icon>upload</mat-icon>\n                  <span>\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u043D\u043E\u0432\u044B\u0435 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F</span>\n                </button>\n              </div>\n            </div>\n          }\n          <croco-app-upload-files-btn\n            #imageUploadBtn\n            [hidden]=\"true\"\n            extAccepts=\"image/*\"\n            [isMultiple]=\"true\"\n            btnText=\"\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n            (onPublicFilesUploaded)=\"onImageFilesUploaded($event.fileIds)\"\n            (onPrivateFilesUploaded)=\"onImageFilesUploaded($event.fileIds)\">\n          </croco-app-upload-files-btn>\n          @if (selectedValue === ExternalVideoTagDataConsts.TagName) {\n            <div class=\"col-12\">\n              <mat-form-field class=\"w-100\" appearance=\"outline\">\n                <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0438\u0434\u0435\u043E\u043F\u043B\u0435\u0435\u0440</mat-label>\n                <mat-select [(ngModel)]=\"selectedVideoPlayer\">\n                  @for (videoPlayer of videoPlayers; track videoPlayer.type) {\n                    <mat-option [value]=\"videoPlayer.type\">\n                      {{videoPlayer.displayValue}}\n                    </mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            </div>\n            @if (selectedVideoPlayer === ExternalVideoSupportedTypes.Code) {\n              <div class=\"col-12\">\n                <mat-form-field class=\"w-100\" appearance=\"outline\">\n                  <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n                  <input\n                    matInput\n                    placeholder=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\"\n                    [(ngModel)]=\"htmlRaw\"\n                  >\n                </mat-form-field>\n              </div>\n            }\n            <div class=\"col-12\">\n              <button (click)=\"addTagWithForm()\" class=\"w-100\" mat-stroked-button>\n                \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0432\u0438\u0434\u0435\u043E\n              </button>\n            </div>\n          }\n          @if (selectedValue === HtmlRawTagDataConsts.TagName) {\n            <div class=\"col-12\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n                <textarea\n                  #autosize=\"cdkTextareaAutosize\"\n                  matInput\n                  cdkTextareaAutosize\n                  cdkAutosizeMinRows=\"1\"\n                  cdkAutosizeMaxRows=\"5\"\n                  placeholder=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\"\n                  #textArea\n                  [(ngModel)]=\"htmlRaw\"\n                ></textarea>\n              </mat-form-field>\n            </div>\n            <div class=\"col-12\">\n              <button (click)=\"addTagWithForm()\" class=\"w-100\" mat-stroked-button>\n                \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n              </button>\n            </div>\n          }\n          @if (selectedValue === 'text') {\n            <div style=\"display: flex; justify-content: space-between; flex-wrap: wrap\">\n              <div style=\"margin-bottom: 22px; overflow-x: auto;\">\n                <mat-button-toggle-group\n                  [(ngModel)]=\"textTag\"\n                  [hideSingleSelectionIndicator]=\"true\"\n                >\n                  @for (option of textTagOptions; track option) {\n                    <mat-button-toggle value=\"{{ option.tag }}\">\n                      {{ option.displayValue }}\n                    </mat-button-toggle>\n                  }\n                </mat-button-toggle-group>\n              </div>\n\n              <div style=\"margin-bottom: 22px\">\n                <mat-button-toggle-group\n                  [(ngModel)]=\"alignment\"\n                  [hideSingleSelectionIndicator]=\"true\"\n                >\n                  @for (option of alignmentOptions; track option.value) {\n                    <mat-button-toggle value=\"{{ option.value }}\">\n                    <span class=\"text-align-icon\">\n                      <ng-container [ngTemplateOutlet]=\"textAlignToggleIcons\"\n                                    [ngTemplateOutletContext]=\"{icon: option.value}\">\n                      </ng-container>\n                    </span>\n                    </mat-button-toggle>\n                  }\n                </mat-button-toggle-group>\n              </div>\n            </div>\n            <mat-form-field class=\"w-100\">\n              <mat-label>\u0422\u0435\u043A\u0441\u0442</mat-label>\n              <textarea\n                #autosize=\"cdkTextareaAutosize\"\n                matInput\n                cdkTextareaAutosize\n                cdkAutosizeMinRows=\"1\"\n                cdkAutosizeMaxRows=\"5\"\n                placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n                #textArea\n                [(ngModel)]=\"text\"\n              ></textarea>\n            </mat-form-field>\n            <div class=\"col-12\">\n              <button (click)=\"addTagWithForm()\" class=\"w-100\" mat-stroked-button>\n                \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u043A\u0441\u0442\n              </button>\n            </div>\n          }\n        </div>\n\n    </mat-card-content>\n  </mat-card>\n  }\n</div>\n\n<ng-template #textAlignToggleIcons let-icon=\"icon\">\n  <svg width=\"20\" height=\"20\">\n    <use [attr.xlink:href]=\"setAlignButton(icon) | spriteIconPath\"></use>\n  </svg>\n</ng-template>\n\n<ng-template #tagButtonIcons let-icon=\"icon\">\n  @if (isDefinedCustomWidget(icon)) {\n    <croco-html-custom-widget-icon [tagName]=\"icon\"></croco-html-custom-widget-icon>\n  }\n  @else if (icon.indexOf('h') === 0 && icon.length === 2) {\n    {{icon.toUpperCase()}}\n  }\n  @else {\n    <svg width=\"20\" height=\"20\">\n      <use [attr.xlink:href]=\"setTagButton(icon) | spriteIconPath\"></use>\n    </svg>\n  }\n</ng-template>\n", styles: [":host{--mat-standard-button-toggle-selected-state-background-color: #323E8B;--mat-standard-button-toggle-text-color: #323E8B;--mat-standard-button-toggle-selected-state-text-color: white;--mat-standard-button-toggle-height: 36px;--mat-standard-button-toggle-divider-color: #323E8B;--mdc-outlined-button-label-text-weight: 400;--mdc-outlined-button-label-text-color: #333333 !important;--mdc-outlined-button-container-shape: 30px;--mdc-outlined-button-outline-width: 2px;--mdc-outlined-button-container-height: 44px}:host ::ng-deep .mat-button-toggle-appearance-standard span.mat-button-toggle-label-content{padding:0 8px;min-width:36px}.text-align-icon,.mat-button-toggle .text-align-icon{color:#323e8b}.mat-button-toggle:hover,.mat-button-toggle:hover .text-align-icon{color:#747ebf}.mat-button-toggle-checked .text-align-icon{color:#fff}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.badge{width:44px;height:44px;border-radius:50%;border:1px solid #323E8B;display:flex;align-items:center;justify-content:center;color:#323e8b}.mat-card.special{border:1px solid #747EBF;border-radius:8px;box-shadow:none;margin:2px 2px 10px}.tags{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}@media (max-width: 768px){.tags{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;background-color:#f5f5f5;border-radius:12px}}@media (max-width: 575px){.tags{grid-template-columns:repeat(2,1fr);gap:10px;padding:12px}}.tag-item{display:flex;align-items:center;gap:5px;cursor:pointer;padding:10px 20px;border:1px solid #323E8B;border-radius:30px;background-color:#fff;color:#23262a;transition:.2s ease-in-out}@media (max-width: 768px){.tag-item{flex-direction:column;justify-content:center;padding:16px 8px;border-radius:12px;min-height:80px;gap:8px}}.tag-icon{color:#323e8b;display:flex;align-items:center;justify-content:center}.tag-icon svg{width:20px;height:20px}@media (max-width: 768px){.tag-icon{font-size:24px;margin-bottom:0}.tag-icon svg{width:24px;height:24px}}.tag-text{color:#323e8b}@media (max-width: 768px){.tag-text{font-size:12px;font-weight:500;text-align:center;line-height:1.2}}.text-align-icon{color:#323e8b}.tag-item.active{background-color:#323e8b;color:#fff}.tag-item.active .tag-icon,.tag-item.active .tag-text{color:#fff}.tag-item.active svg{color:#fff}.tag-item:hover{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:hover .tag-icon,.tag-item:hover .tag-text{color:#747ebf}.tag-item:hover svg{color:#747ebf}.add-tag-button{width:100%;justify-content:center}.add-tag-button .tag-icon mat-icon{font-size:20px;width:20px;height:20px;line-height:20px;color:inherit}@media (max-width: 768px){.add-tag-button .tag-icon mat-icon{font-size:24px;width:24px;height:24px;line-height:24px}}.add-tag-button:hover .tag-icon mat-icon{color:#747ebf}.image-mode-selection{display:flex;flex-direction:column;gap:16px}.image-mode-selection .image-mode-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px}.image-mode-selection .image-mode-btn mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}@media (max-width: 768px){.tag-item:hover{color:inherit;box-shadow:none}.tag-item:hover svg{color:inherit}.tag-item:active{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:active svg{color:#747ebf}}.move-icon:hover{cursor:pointer;opacity:.7}.cdk-drag.cdk-drag-placeholder,.cdk-drag-preview{opacity:.5;transition:opacity .2s}.example-handle{color:#323e8b}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [CrocoHtmlOptionsToken]
@@ -3626,7 +3661,7 @@ class HtmlEditorSettingsModalComponent {
         this.dialogRef.close(this.form.getRawValue());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlEditorSettingsModalComponent, deps: [{ token: i1$1.FormBuilder }, { token: i2$3.MatDialogRef }, { token: CrocoHtmlFileOptionsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: HtmlEditorSettingsModalComponent, isStandalone: true, selector: "croco-html-html-editor-settings-modal", ngImport: i0, template: "<div mat-dialog-title>\u041D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 \u0440\u0435\u0434\u0430\u043A\u0442\u043E\u0440\u0430</div>\n<div mat-dialog-content class=\"editor-settings\" [formGroup]=\"form\">\n  <mat-form-field style=\"margin-top: 20px\">\n    <mat-label>\n      \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F\n    </mat-label>\n    <input matInput formControlName=\"applicationId\">\n  </mat-form-field>\n\n  <div>\n    <mat-label>\n      \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u043F\u0440\u0438\u0432\u0430\u0442\u043D\u044B\u0435 \u0444\u0430\u0439\u043B\u044B\n    </mat-label>\n    <mat-checkbox\n      formControlName=\"usePrivateFiles\">\n    </mat-checkbox>\n  </div>\n\n</div>\n<div mat-dialog-actions style=\"display: flex; justify-content: flex-end\">\n  <button mat-raised-button color=\"warn\" (click)=\"cancel()\" >\u041E\u0442\u043C\u0435\u043D\u0430</button>\n  <button mat-raised-button color=\"primary\" (click)=\"setSettings()\">\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C</button>\n</div>\n", styles: [".editor-settings{padding:20px;display:flex;gap:10px;flex-direction:column;width:360px}\n"], dependencies: [{ 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: "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"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatFormField$1, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel$1, selector: "mat-label" }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: HtmlEditorSettingsModalComponent, isStandalone: true, selector: "croco-html-html-editor-settings-modal", ngImport: i0, template: "<div mat-dialog-title>\u041D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 \u0440\u0435\u0434\u0430\u043A\u0442\u043E\u0440\u0430</div>\n<div mat-dialog-content class=\"editor-settings\" [formGroup]=\"form\">\n  <mat-form-field style=\"margin-top: 20px\">\n    <mat-label>\n      \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F\n    </mat-label>\n    <input matInput formControlName=\"applicationId\">\n  </mat-form-field>\n\n  <div>\n    <mat-label>\n      \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u043F\u0440\u0438\u0432\u0430\u0442\u043D\u044B\u0435 \u0444\u0430\u0439\u043B\u044B\n    </mat-label>\n    <mat-checkbox\n      formControlName=\"usePrivateFiles\">\n    </mat-checkbox>\n  </div>\n\n</div>\n<div mat-dialog-actions style=\"display: flex; justify-content: flex-end\">\n  <button mat-raised-button color=\"warn\" (click)=\"cancel()\">\u041E\u0442\u043C\u0435\u043D\u0430</button>\n  <button mat-raised-button color=\"primary\" (click)=\"setSettings()\">\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C</button>\n</div>\n", styles: [".editor-settings{padding:20px;display:flex;gap:10px;flex-direction:column;width:360px}\n"], dependencies: [{ 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: "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"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatFormField$1, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel$1, selector: "mat-label" }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlEditorSettingsModalComponent, decorators: [{
             type: Component,
@@ -3640,7 +3675,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatDialogContent,
                         MatDialogActions,
                         MatButton
-                    ], template: "<div mat-dialog-title>\u041D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 \u0440\u0435\u0434\u0430\u043A\u0442\u043E\u0440\u0430</div>\n<div mat-dialog-content class=\"editor-settings\" [formGroup]=\"form\">\n  <mat-form-field style=\"margin-top: 20px\">\n    <mat-label>\n      \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F\n    </mat-label>\n    <input matInput formControlName=\"applicationId\">\n  </mat-form-field>\n\n  <div>\n    <mat-label>\n      \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u043F\u0440\u0438\u0432\u0430\u0442\u043D\u044B\u0435 \u0444\u0430\u0439\u043B\u044B\n    </mat-label>\n    <mat-checkbox\n      formControlName=\"usePrivateFiles\">\n    </mat-checkbox>\n  </div>\n\n</div>\n<div mat-dialog-actions style=\"display: flex; justify-content: flex-end\">\n  <button mat-raised-button color=\"warn\" (click)=\"cancel()\" >\u041E\u0442\u043C\u0435\u043D\u0430</button>\n  <button mat-raised-button color=\"primary\" (click)=\"setSettings()\">\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C</button>\n</div>\n", styles: [".editor-settings{padding:20px;display:flex;gap:10px;flex-direction:column;width:360px}\n"] }]
+                    ], template: "<div mat-dialog-title>\u041D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 \u0440\u0435\u0434\u0430\u043A\u0442\u043E\u0440\u0430</div>\n<div mat-dialog-content class=\"editor-settings\" [formGroup]=\"form\">\n  <mat-form-field style=\"margin-top: 20px\">\n    <mat-label>\n      \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F\n    </mat-label>\n    <input matInput formControlName=\"applicationId\">\n  </mat-form-field>\n\n  <div>\n    <mat-label>\n      \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u043F\u0440\u0438\u0432\u0430\u0442\u043D\u044B\u0435 \u0444\u0430\u0439\u043B\u044B\n    </mat-label>\n    <mat-checkbox\n      formControlName=\"usePrivateFiles\">\n    </mat-checkbox>\n  </div>\n\n</div>\n<div mat-dialog-actions style=\"display: flex; justify-content: flex-end\">\n  <button mat-raised-button color=\"warn\" (click)=\"cancel()\">\u041E\u0442\u043C\u0435\u043D\u0430</button>\n  <button mat-raised-button color=\"primary\" (click)=\"setSettings()\">\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C</button>\n</div>\n", styles: [".editor-settings{padding:20px;display:flex;gap:10px;flex-direction:column;width:360px}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: i2$3.MatDialogRef }, { type: CrocoHtmlFileOptionsService }] });
 
 class MainEditorComponent {
@@ -3662,6 +3697,7 @@ class MainEditorComponent {
         if (changes['html'].currentValue !== changes['html'].previousValue) {
             this.recalculateBodyTags();
         }
+        this._cdref.markForCheck();
     }
     ngAfterViewInit() {
         this.recalculateBodyTags();
@@ -3676,6 +3712,7 @@ class MainEditorComponent {
     onHtmlChangedHandler(html) {
         this.html = html;
         this.onHtmlChanged.emit(html);
+        this._cdref.markForCheck();
     }
     textAreaModelChangedHandler() {
         this.recalculateBodyTags();
@@ -3710,11 +3747,11 @@ class MainEditorComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MainEditorComponent, deps: [{ token: i1$5.ClipboardService }, { token: i2$4.MatSnackBar }, { token: i0.ChangeDetectorRef }, { token: i2$3.MatDialog }, { token: CrocoHtmlFileOptionsService }, { token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MainEditorComponent, isStandalone: true, selector: "croco-html-main-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged" }, viewQueries: [{ propertyName: "visualEditor", first: true, predicate: ["visualEditor"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-tab-group mat-stretch-tabs=\"false\" mat-align-tabs=\"start\" style=\"position: relative\">\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'visual-editor-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 20px;\"></div>\n\n    <croco-visual-editor #visualEditor [useHtmlRaw]=\"true\" [html]=\"html\" (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n      (rendered)=\"visualEditorRenderedHandler()\">\n    </croco-visual-editor>\n  </mat-tab>\n\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'source-code-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 10px;\"></div>\n    @if (visualEditorRendered) {\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434</mat-label>\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\" cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\" (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n      </mat-form-field>\n    </div>\n    }\n\n    <button (click)=\"copyMarkUp()\" mat-raised-button color=\"primary\">\n      \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n    </button>\n  </mat-tab>\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"30\">\n        <use [attr.xlink:href]=\"'viewer-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n\n    <mat-card style=\"padding: 2px;\" class=\"mat-card\">\n      <mat-card-content>\n        <croco-html-view [html]=\"html\" [isEditor]=\"true\">\n        </croco-html-view>\n      </mat-card-content>\n    </mat-card>\n  </mat-tab>\n</mat-tab-group>\n\n<div [hidden]=\"!showSettingsButton\">\n  <mat-icon class=\"settings\" (click)=\"openSettingsModal()\">settings</mat-icon>\n</div>\n", styles: [":host ::ng-deep .mdc-tab.mat-mdc-tab{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab .custom-icon{fill:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover .custom-icon{fill:#747ebf}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active{background-color:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active svg.custom-icon{fill:#fff}:host ::ng-deep div.mat-mdc-tab-labels{justify-content:center}:host{position:relative;width:100%;display:block;overflow-x:hidden}:host ::ng-deep .mat-expansion-panel,:host ::ng-deep .mat-mdc-tab-body-content,:host ::ng-deep .mat-mdc-tab-body,:host ::ng-deep .mat-mdc-tab-body-wrapper{overflow:visible}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.settings{position:absolute;top:20px;right:20px;cursor:pointer;z-index:1000}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i5.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: VisualEditorComponent, selector: "croco-visual-editor", inputs: ["showMarkUp", "useHtmlRaw", "html"], outputs: ["html", "onHtmlChanged", "rendered"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: HtmlViewComponent, selector: "croco-html-view", inputs: ["html", "isEditor", "dataController"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SpriteIconPathPipe, name: "spriteIconPath" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MainEditorComponent, isStandalone: true, selector: "croco-html-main-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged" }, viewQueries: [{ propertyName: "visualEditor", first: true, predicate: ["visualEditor"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-tab-group mat-stretch-tabs=\"false\" mat-align-tabs=\"start\" style=\"position: relative\">\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'visual-editor-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 20px;\"></div>\n\n    <croco-visual-editor #visualEditor [useHtmlRaw]=\"true\" [html]=\"html\" (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n      (rendered)=\"visualEditorRenderedHandler()\">\n    </croco-visual-editor>\n  </mat-tab>\n\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'source-code-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 10px;\"></div>\n    @if (visualEditorRendered) {\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434</mat-label>\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\" cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\" (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n      </mat-form-field>\n    </div>\n    }\n\n    <button (click)=\"copyMarkUp()\" mat-raised-button color=\"primary\">\n      \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n    </button>\n  </mat-tab>\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"30\">\n        <use [attr.xlink:href]=\"'viewer-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n\n    <mat-card style=\"padding: 2px;\" class=\"mat-card\">\n      <mat-card-content>\n        <croco-html-view [html]=\"html\" [isEditor]=\"true\">\n        </croco-html-view>\n      </mat-card-content>\n    </mat-card>\n  </mat-tab>\n</mat-tab-group>\n\n<div [hidden]=\"!showSettingsButton\">\n  <mat-icon class=\"settings\" (click)=\"openSettingsModal()\">settings</mat-icon>\n</div>\n", styles: [":host ::ng-deep .mdc-tab.mat-mdc-tab{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab .custom-icon{fill:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover .custom-icon{fill:#747ebf}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active{background-color:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active svg.custom-icon{fill:#fff}:host ::ng-deep div.mat-mdc-tab-labels{justify-content:center}:host{position:relative;width:100%;display:block;overflow-x:hidden}:host ::ng-deep .mat-expansion-panel,:host ::ng-deep .mat-mdc-tab-body-content,:host ::ng-deep .mat-mdc-tab-body,:host ::ng-deep .mat-mdc-tab-body-wrapper{overflow:visible}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.settings{position:absolute;top:20px;right:20px;cursor:pointer;z-index:1000}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i5.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: VisualEditorComponent, selector: "croco-visual-editor", inputs: ["showMarkUp", "useHtmlRaw", "html"], outputs: ["html", "onHtmlChanged", "rendered"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: HtmlViewComponent, selector: "croco-html-view", inputs: ["html", "isEditor", "dataController"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SpriteIconPathPipe, name: "spriteIconPath" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MainEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-main-editor', standalone: true, imports: [
+            args: [{ selector: 'croco-html-main-editor', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatTabsModule,
                         VisualEditorComponent,
                         MatFormField,