croco-html 20.3.0 → 20.3.1

package/fesm2022/croco-html.mjs

@@ -1584,6 +1584,7 @@ class AudioEditorComponent {
         this._privateFileService = _privateFileService;
         this._htmlSettingsService = _htmlSettingsService;
         this._commonFileInfoService = _commonFileInfoService;
+        this._cdr = inject(ChangeDetectorRef);
         this.hasAudioError = false;
         this.errorMessage = '';
         this.isPlaying = false;
@@ -1624,20 +1625,24 @@ class AudioEditorComponent {
         if (!this.errorMessage) {
             this.errorMessage = 'Аудио-файл не найден по указанному идентификатору, возможно файл не существует или отсутствует на сервере.';
         }
+        this._cdr.markForCheck();
     }
     removeAudioError() {
         this.hasAudioError = false;
         this.errorMessage = '';
+        this._cdr.markForCheck();
     }
     setError(message) {
         this.hasAudioError = true;
         this.errorMessage = message;
         this.isLoading = false;
+        this._cdr.markForCheck();
     }
     onFileIdChanged(fileId) {
         this.fileId = fileId;
         this.removeAudioError();
         this.checkAndLoadAudioFile();
+        this._cdr.markForCheck();
     }
     checkAndLoadAudioFile() {
         if (!this.hasFileId()) {
@@ -1647,6 +1652,7 @@ class AudioEditorComponent {
         this.hasAudioError = false;
         this.errorMessage = '';
         const fileIdValue = this.fileId;
+        this._cdr.markForCheck();
         this._commonFileInfoService.getInfo(fileIdValue)
             .pipe(takeUntil(this.unsubscribe))
             .subscribe({
@@ -1677,12 +1683,14 @@ class AudioEditorComponent {
         if (audio) {
             audio.load();
         }
+        this._cdr.markForCheck();
     }
     onLoadedMetadata() {
         const audio = this.audioElement;
         if (audio) {
             this.duration = audio.duration;
             this.isLoading = false;
+            this._cdr.markForCheck();
         }
     }
     onTimeUpdate() {
@@ -1691,18 +1699,22 @@ class AudioEditorComponent {
             this.currentTime = audio.currentTime;
             this.duration = audio.duration;
         }
+        this._cdr.markForCheck();
     }
     onEnded() {
         this.isPlaying = false;
         this.currentTime = 0;
+        this._cdr.markForCheck();
     }
     onCanPlay() {
         this.isLoading = false;
+        this._cdr.markForCheck();
     }
     togglePlayPause() {
         const audio = this.audioElement;
-        if (!audio)
+        if (!audio) {
             return;
+        }
         if (this.isPlaying) {
             audio.pause();
             this.isPlaying = false;
@@ -1710,8 +1722,10 @@ class AudioEditorComponent {
         else {
             audio.play().then(() => {
                 this.isPlaying = true;
+                this._cdr.markForCheck();
             }).catch(() => {
                 this.hasAudioError = true;
+                this._cdr.markForCheck();
             });
         }
     }
@@ -1720,18 +1734,21 @@ class AudioEditorComponent {
         if (audio) {
             audio.currentTime = 0;
             this.currentTime = 0;
+            this._cdr.markForCheck();
         }
     }
     rewind() {
         const audio = this.audioElement;
         if (audio) {
             audio.currentTime = Math.max(0, audio.currentTime - 10);
+            this._cdr.markForCheck();
         }
     }
     forward() {
         const audio = this.audioElement;
         if (audio) {
             audio.currentTime = Math.min(audio.duration, audio.currentTime + 10);
+            this._cdr.markForCheck();
         }
     }
     onVolumeChange(event) {
@@ -1743,11 +1760,13 @@ class AudioEditorComponent {
             audio.volume = value;
         }
         this.isMuted = value === 0;
+        this._cdr.markForCheck();
     }
     toggleMute() {
         const audio = this.audioElement;
-        if (!audio)
+        if (!audio) {
             return;
+        }
         if (this.isMuted) {
             audio.volume = this.volume;
             this.isMuted = false;
@@ -1756,6 +1775,7 @@ class AudioEditorComponent {
             audio.volume = 0;
             this.isMuted = true;
         }
+        this._cdr.markForCheck();
     }
     onSeekChange(event) {
         const target = event.target;
@@ -1764,6 +1784,7 @@ class AudioEditorComponent {
         if (audio) {
             audio.currentTime = (value / 100) * audio.duration;
         }
+        this._cdr.markForCheck();
     }
     formatTime(seconds) {
         return AudioMethods.formatTime(seconds);
@@ -1782,12 +1803,14 @@ class AudioEditorComponent {
             applicationId: isPrivate ? this._htmlSettingsService.get().applicationId : null,
             q: this.q
         };
+        this._cdr.markForCheck();
         if (isPrivate) {
             this._privateFileService.search(searchParams)
                 .pipe(takeUntil(this.unsubscribe))
                 .subscribe(data => {
                 this.files = data.list.map(el => ({ fileId: el.id, fileName: el.fileName }));
                 this.loading = false;
+                this._cdr.markForCheck();
             });
         }
         else {
@@ -1796,18 +1819,21 @@ class AudioEditorComponent {
                 .subscribe(data => {
                 this.files = data.list.map(el => ({ fileId: el.fileId.toString(), fileName: el.fileName }));
                 this.loading = false;
+                this._cdr.markForCheck();
             });
         }
     }
     onSearchChanged(q) {
         this.q = q.term;
         this.loadFiles();
+        this._cdr.markForCheck();
     }
     onFileSelected(fileId) {
         const selectedFile = this.files.find(f => f.fileId === fileId);
         if (selectedFile) {
             this.fileId = fileId;
             this.checkAndLoadAudioFile();
+            this._cdr.markForCheck();
         }
     }
     onFilesUploaded(fileIds) {
@@ -1816,6 +1842,7 @@ class AudioEditorComponent {
             this.fileId = typeof firstFileId === 'number' ? firstFileId.toString() : firstFileId;
             this.loadFiles();
             this.checkAndLoadAudioFile();
+            this._cdr.markForCheck();
         }
     }
     removeAudio() {
@@ -1826,6 +1853,7 @@ class AudioEditorComponent {
         this.currentTime = 0;
         this.duration = 0;
         this.removeAudioError();
+        this._cdr.markForCheck();
     }
     ngOnInit() {
         if (this.audioPlayer?.nativeElement) {
@@ -1836,13 +1864,14 @@ class AudioEditorComponent {
             this.checkAndLoadAudioFile();
         }
         this.loadFiles();
+        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: AudioEditorComponent, deps: [{ token: PublicFilesQueryService }, { token: PrivateFilesQueryService }, { token: CrocoHtmlFileOptionsService }, { token: CommonFileInfoQueryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AudioEditorComponent, isStandalone: true, selector: "croco-html-audio-editor", inputs: { tag: "tag", presentOrEdit: "presentOrEdit" }, viewQueries: [{ propertyName: "audioPlayer", first: true, predicate: ["audioPlayer"], descendants: true }], ngImport: i0, template: "<div class=\"audio-editor\">\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=\"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\n          @if (!presentOrEdit) {\n            <button (click)=\"removeAudio()\" [disabled]=\"!hasFileId()\" color=\"warn\" mat-icon-button>\n              <mat-icon>delete</mat-icon>\n            </button>\n          }\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  @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      @if (!presentOrEdit) {\n        <p>\u041D\u0430\u0436\u043C\u0438\u0442\u0435 \u043A\u043D\u043E\u043F\u043A\u0443 \u0440\u0435\u0434\u0430\u043A\u0442\u0438\u0440\u043E\u0432\u0430\u043D\u0438\u044F \u0434\u043B\u044F \u0432\u044B\u0431\u043E\u0440\u0430 \u0438\u043B\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0438 \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430</p>\n      }\n    </div>\n  }\n  @if (!presentOrEdit) {\n    <div class=\"edit-panel\">\n      <div class=\"edit-header\">\n        <h6>\u041D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430</h6>\n      </div>\n\n      <div class=\"mode-toggle\">\n        <mat-button-toggle-group [(ngModel)]=\"searchOrEdit\">\n          <mat-button-toggle value=\"search\">\n            <mat-icon>search</mat-icon>\n            \u0418\u0441\u043A\u0430\u0442\u044C \u0444\u0430\u0439\u043B\n          </mat-button-toggle>\n          <mat-button-toggle value=\"edit\">\n            <mat-icon>settings</mat-icon>\n            \u0423\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u043E ID\n          </mat-button-toggle>\n        </mat-button-toggle-group>\n      </div>\n\n      @if (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            <ng-select\n              [(ngModel)]=\"fileId\"\n              (ngModelChange)=\"onFileSelected($event)\"\n              [items]=\"files\"\n              bindLabel=\"fileName\"\n              bindValue=\"fileId\"\n              (search)=\"onSearchChanged($event)\"\n              [loading]=\"loading\"\n              [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\n              placeholder=\"\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\"\n              [clearable]=\"true\">\n              <ng-template ng-option-tmp let-item=\"item\">\n                <div class=\"file-option\">\n                  <mat-icon>audiotrack</mat-icon>\n                  <span>{{ item.fileName }}</span>\n                  <small>ID: {{ item.fileId }}</small>\n                </div>\n              </ng-template>\n            </ng-select>\n          </div>\n\n          <div class=\"title-input\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430</mat-label>\n              <input\n                matInput\n                placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430\"\n                autocomplete=\"off\"\n                [(ngModel)]=\"title\">\n            </mat-form-field>\n          </div>\n\n          <div class=\"upload-section\">\n            <h6>\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u043D\u043E\u0432\u044B\u0439 \u0444\u0430\u0439\u043B:</h6>\n            <croco-app-upload-files-btn\n              extAccepts=\"audio/*\"\n              [isMultiple]=\"false\"\n              btnText=\"\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\"\n              (onPublicFilesUploaded)=\"onFilesUploaded($event.fileIds)\"\n              (onPrivateFilesUploaded)=\"onFilesUploaded($event.fileIds)\">\n            </croco-app-upload-files-btn>\n          </div>\n        </div>\n      } @else if (searchOrEdit === 'edit') {\n        <div class=\"manual-input\">\n          <mat-form-field class=\"w-100\">\n            <mat-label>\u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430</mat-label>\n            <input\n              matInput\n              placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 ID \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430\"\n              autocomplete=\"off\"\n              [(ngModel)]=\"fileId\"\n              (ngModelChange)=\"onFileIdChanged($event)\">\n          </mat-form-field>\n\n          <mat-form-field class=\"w-100\">\n            <mat-label>\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430</mat-label>\n            <input\n              matInput\n              placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430\"\n              autocomplete=\"off\"\n              [(ngModel)]=\"title\">\n          </mat-form-field>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".audio-editor{width:100%;padding:16px;background:#fafafa;border-radius:8px;border:1px solid #e0e0e0}.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}.file-info .edit-btn{margin-left:auto}.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 0 8px;color:#999}.no-file-message p{margin:0;font-size:14px;color:#999}.edit-panel{background:#fff;border-radius:8px;padding:20px;border:1px solid #e0e0e0;margin-top:16px}.edit-panel .edit-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.edit-panel .edit-header h6{margin:0;color:#333}.edit-panel .mode-toggle{margin-bottom:20px}.edit-panel .mode-toggle mat-button-toggle-group{width:100%}.edit-panel .mode-toggle mat-button-toggle{flex:1;display:flex;align-items:center;justify-content:center;gap:8px}.edit-panel .file-selection{display:flex;flex-direction:column;gap:20px}.edit-panel .file-selection h6{margin:0 0 12px;color:#333}.edit-panel .file-selection .file-option{display:flex;align-items:center;gap:8px}.edit-panel .file-selection .file-option mat-icon{color:#1976d2}.edit-panel .file-selection .file-option small{margin-left:auto;color:#666}.edit-panel .file-selection .upload-section{padding-top:16px;border-top:1px solid #e0e0e0}.edit-panel .manual-input{display:flex;flex-direction:column;gap:16px}.edit-button-container{display:flex;justify-content:center;margin-top:16px}.edit-button-container .edit-mode-btn{background-color:#1976d2;color:#fff}.edit-button-container .edit-mode-btn:hover{background-color:#1565c0}@media screen and (max-width: 768px){.audio-editor{padding: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}.edit-panel{padding:16px}.edit-panel .mode-toggle mat-button-toggle-group{flex-direction:column}}::ng-deep .ng-select .ng-select-container{border-radius:4px;border:1px solid #ccc}::ng-deep .ng-select.ng-select-focused .ng-select-container{border-color:#1976d2}input[type=range].progress-slider:disabled,input[type=range].volume-slider:disabled{opacity:.5;cursor:not-allowed}\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: "component", type: UploadFilesBtnComponent, selector: "croco-app-upload-files-btn", inputs: ["extAccepts", "isMultiple", "btnText", "hidden"], outputs: ["postFilesStarted", "onPublicFilesUploaded", "onPrivateFilesUploaded"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i6.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: i6.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { 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: AudioEditorComponent, isStandalone: true, selector: "croco-html-audio-editor", inputs: { tag: "tag", presentOrEdit: "presentOrEdit" }, viewQueries: [{ propertyName: "audioPlayer", first: true, predicate: ["audioPlayer"], descendants: true }], ngImport: i0, template: "<div class=\"audio-editor\">\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=\"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\n          @if (!presentOrEdit) {\n            <button (click)=\"removeAudio()\" [disabled]=\"!hasFileId()\" color=\"warn\" mat-icon-button>\n              <mat-icon>delete</mat-icon>\n            </button>\n          }\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  @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      @if (!presentOrEdit) {\n        <p>\u041D\u0430\u0436\u043C\u0438\u0442\u0435 \u043A\u043D\u043E\u043F\u043A\u0443 \u0440\u0435\u0434\u0430\u043A\u0442\u0438\u0440\u043E\u0432\u0430\u043D\u0438\u044F \u0434\u043B\u044F \u0432\u044B\u0431\u043E\u0440\u0430 \u0438\u043B\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0438 \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430</p>\n      }\n    </div>\n  }\n  @if (!presentOrEdit) {\n    <div class=\"edit-panel\">\n      <div class=\"edit-header\">\n        <h6>\u041D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430</h6>\n      </div>\n\n      <div class=\"mode-toggle\">\n        <mat-button-toggle-group [(ngModel)]=\"searchOrEdit\">\n          <mat-button-toggle value=\"search\">\n            <mat-icon>search</mat-icon>\n            \u0418\u0441\u043A\u0430\u0442\u044C \u0444\u0430\u0439\u043B\n          </mat-button-toggle>\n          <mat-button-toggle value=\"edit\">\n            <mat-icon>settings</mat-icon>\n            \u0423\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u043E ID\n          </mat-button-toggle>\n        </mat-button-toggle-group>\n      </div>\n\n      @if (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            <ng-select\n              [(ngModel)]=\"fileId\"\n              (ngModelChange)=\"onFileSelected($event)\"\n              [items]=\"files\"\n              bindLabel=\"fileName\"\n              bindValue=\"fileId\"\n              (search)=\"onSearchChanged($event)\"\n              [loading]=\"loading\"\n              [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\n              placeholder=\"\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\"\n              [clearable]=\"true\">\n              <ng-template ng-option-tmp let-item=\"item\">\n                <div class=\"file-option\">\n                  <mat-icon>audiotrack</mat-icon>\n                  <span>{{ item.fileName }}</span>\n                  <small>ID: {{ item.fileId }}</small>\n                </div>\n              </ng-template>\n            </ng-select>\n          </div>\n\n          <div class=\"title-input\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430</mat-label>\n              <input\n                matInput\n                placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430\"\n                autocomplete=\"off\"\n                [(ngModel)]=\"title\">\n            </mat-form-field>\n          </div>\n\n          <div class=\"upload-section\">\n            <h6>\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u043D\u043E\u0432\u044B\u0439 \u0444\u0430\u0439\u043B:</h6>\n            <croco-app-upload-files-btn\n              extAccepts=\"audio/*\"\n              [isMultiple]=\"false\"\n              btnText=\"\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\"\n              (onPublicFilesUploaded)=\"onFilesUploaded($event.fileIds)\"\n              (onPrivateFilesUploaded)=\"onFilesUploaded($event.fileIds)\">\n            </croco-app-upload-files-btn>\n          </div>\n        </div>\n      } @else if (searchOrEdit === 'edit') {\n        <div class=\"manual-input\">\n          <mat-form-field class=\"w-100\">\n            <mat-label>\u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430</mat-label>\n            <input\n              matInput\n              placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 ID \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430\"\n              autocomplete=\"off\"\n              [(ngModel)]=\"fileId\"\n              (ngModelChange)=\"onFileIdChanged($event)\">\n          </mat-form-field>\n\n          <mat-form-field class=\"w-100\">\n            <mat-label>\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430</mat-label>\n            <input\n              matInput\n              placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430\"\n              autocomplete=\"off\"\n              [(ngModel)]=\"title\">\n          </mat-form-field>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".audio-editor{width:100%;padding:16px;background:#fafafa;border-radius:8px;border:1px solid #e0e0e0}.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}.file-info .edit-btn{margin-left:auto}.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 0 8px;color:#999}.no-file-message p{margin:0;font-size:14px;color:#999}.edit-panel{background:#fff;border-radius:8px;padding:20px;border:1px solid #e0e0e0;margin-top:16px}.edit-panel .edit-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.edit-panel .edit-header h6{margin:0;color:#333}.edit-panel .mode-toggle{margin-bottom:20px}.edit-panel .mode-toggle mat-button-toggle-group{width:100%}.edit-panel .mode-toggle mat-button-toggle{flex:1;display:flex;align-items:center;justify-content:center;gap:8px}.edit-panel .file-selection{display:flex;flex-direction:column;gap:20px}.edit-panel .file-selection h6{margin:0 0 12px;color:#333}.edit-panel .file-selection .file-option{display:flex;align-items:center;gap:8px}.edit-panel .file-selection .file-option mat-icon{color:#1976d2}.edit-panel .file-selection .file-option small{margin-left:auto;color:#666}.edit-panel .file-selection .upload-section{padding-top:16px;border-top:1px solid #e0e0e0}.edit-panel .manual-input{display:flex;flex-direction:column;gap:16px}.edit-button-container{display:flex;justify-content:center;margin-top:16px}.edit-button-container .edit-mode-btn{background-color:#1976d2;color:#fff}.edit-button-container .edit-mode-btn:hover{background-color:#1565c0}@media screen and (max-width: 768px){.audio-editor{padding: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}.edit-panel{padding:16px}.edit-panel .mode-toggle mat-button-toggle-group{flex-direction:column}}::ng-deep .ng-select .ng-select-container{border-radius:4px;border:1px solid #ccc}::ng-deep .ng-select.ng-select-focused .ng-select-container{border-color:#1976d2}input[type=range].progress-slider:disabled,input[type=range].volume-slider:disabled{opacity:.5;cursor:not-allowed}\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: "component", type: UploadFilesBtnComponent, selector: "croco-app-upload-files-btn", inputs: ["extAccepts", "isMultiple", "btnText", "hidden"], outputs: ["postFilesStarted", "onPublicFilesUploaded", "onPrivateFilesUploaded"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i6.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: i6.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AudioEditorComponent, decorators: [{
             type: Component,
@@ -1857,7 +1886,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         UploadFilesBtnComponent,
                         NgSelectModule,
                         MatIconButton
-                    ], template: "<div class=\"audio-editor\">\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=\"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\n          @if (!presentOrEdit) {\n            <button (click)=\"removeAudio()\" [disabled]=\"!hasFileId()\" color=\"warn\" mat-icon-button>\n              <mat-icon>delete</mat-icon>\n            </button>\n          }\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  @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      @if (!presentOrEdit) {\n        <p>\u041D\u0430\u0436\u043C\u0438\u0442\u0435 \u043A\u043D\u043E\u043F\u043A\u0443 \u0440\u0435\u0434\u0430\u043A\u0442\u0438\u0440\u043E\u0432\u0430\u043D\u0438\u044F \u0434\u043B\u044F \u0432\u044B\u0431\u043E\u0440\u0430 \u0438\u043B\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0438 \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430</p>\n      }\n    </div>\n  }\n  @if (!presentOrEdit) {\n    <div class=\"edit-panel\">\n      <div class=\"edit-header\">\n        <h6>\u041D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430</h6>\n      </div>\n\n      <div class=\"mode-toggle\">\n        <mat-button-toggle-group [(ngModel)]=\"searchOrEdit\">\n          <mat-button-toggle value=\"search\">\n            <mat-icon>search</mat-icon>\n            \u0418\u0441\u043A\u0430\u0442\u044C \u0444\u0430\u0439\u043B\n          </mat-button-toggle>\n          <mat-button-toggle value=\"edit\">\n            <mat-icon>settings</mat-icon>\n            \u0423\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u043E ID\n          </mat-button-toggle>\n        </mat-button-toggle-group>\n      </div>\n\n      @if (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            <ng-select\n              [(ngModel)]=\"fileId\"\n              (ngModelChange)=\"onFileSelected($event)\"\n              [items]=\"files\"\n              bindLabel=\"fileName\"\n              bindValue=\"fileId\"\n              (search)=\"onSearchChanged($event)\"\n              [loading]=\"loading\"\n              [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\n              placeholder=\"\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\"\n              [clearable]=\"true\">\n              <ng-template ng-option-tmp let-item=\"item\">\n                <div class=\"file-option\">\n                  <mat-icon>audiotrack</mat-icon>\n                  <span>{{ item.fileName }}</span>\n                  <small>ID: {{ item.fileId }}</small>\n                </div>\n              </ng-template>\n            </ng-select>\n          </div>\n\n          <div class=\"title-input\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430</mat-label>\n              <input\n                matInput\n                placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430\"\n                autocomplete=\"off\"\n                [(ngModel)]=\"title\">\n            </mat-form-field>\n          </div>\n\n          <div class=\"upload-section\">\n            <h6>\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u043D\u043E\u0432\u044B\u0439 \u0444\u0430\u0439\u043B:</h6>\n            <croco-app-upload-files-btn\n              extAccepts=\"audio/*\"\n              [isMultiple]=\"false\"\n              btnText=\"\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\"\n              (onPublicFilesUploaded)=\"onFilesUploaded($event.fileIds)\"\n              (onPrivateFilesUploaded)=\"onFilesUploaded($event.fileIds)\">\n            </croco-app-upload-files-btn>\n          </div>\n        </div>\n      } @else if (searchOrEdit === 'edit') {\n        <div class=\"manual-input\">\n          <mat-form-field class=\"w-100\">\n            <mat-label>\u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430</mat-label>\n            <input\n              matInput\n              placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 ID \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430\"\n              autocomplete=\"off\"\n              [(ngModel)]=\"fileId\"\n              (ngModelChange)=\"onFileIdChanged($event)\">\n          </mat-form-field>\n\n          <mat-form-field class=\"w-100\">\n            <mat-label>\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430</mat-label>\n            <input\n              matInput\n              placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430\"\n              autocomplete=\"off\"\n              [(ngModel)]=\"title\">\n          </mat-form-field>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".audio-editor{width:100%;padding:16px;background:#fafafa;border-radius:8px;border:1px solid #e0e0e0}.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}.file-info .edit-btn{margin-left:auto}.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 0 8px;color:#999}.no-file-message p{margin:0;font-size:14px;color:#999}.edit-panel{background:#fff;border-radius:8px;padding:20px;border:1px solid #e0e0e0;margin-top:16px}.edit-panel .edit-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.edit-panel .edit-header h6{margin:0;color:#333}.edit-panel .mode-toggle{margin-bottom:20px}.edit-panel .mode-toggle mat-button-toggle-group{width:100%}.edit-panel .mode-toggle mat-button-toggle{flex:1;display:flex;align-items:center;justify-content:center;gap:8px}.edit-panel .file-selection{display:flex;flex-direction:column;gap:20px}.edit-panel .file-selection h6{margin:0 0 12px;color:#333}.edit-panel .file-selection .file-option{display:flex;align-items:center;gap:8px}.edit-panel .file-selection .file-option mat-icon{color:#1976d2}.edit-panel .file-selection .file-option small{margin-left:auto;color:#666}.edit-panel .file-selection .upload-section{padding-top:16px;border-top:1px solid #e0e0e0}.edit-panel .manual-input{display:flex;flex-direction:column;gap:16px}.edit-button-container{display:flex;justify-content:center;margin-top:16px}.edit-button-container .edit-mode-btn{background-color:#1976d2;color:#fff}.edit-button-container .edit-mode-btn:hover{background-color:#1565c0}@media screen and (max-width: 768px){.audio-editor{padding: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}.edit-panel{padding:16px}.edit-panel .mode-toggle mat-button-toggle-group{flex-direction:column}}::ng-deep .ng-select .ng-select-container{border-radius:4px;border:1px solid #ccc}::ng-deep .ng-select.ng-select-focused .ng-select-container{border-color:#1976d2}input[type=range].progress-slider:disabled,input[type=range].volume-slider:disabled{opacity:.5;cursor:not-allowed}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"audio-editor\">\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=\"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\n          @if (!presentOrEdit) {\n            <button (click)=\"removeAudio()\" [disabled]=\"!hasFileId()\" color=\"warn\" mat-icon-button>\n              <mat-icon>delete</mat-icon>\n            </button>\n          }\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  @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      @if (!presentOrEdit) {\n        <p>\u041D\u0430\u0436\u043C\u0438\u0442\u0435 \u043A\u043D\u043E\u043F\u043A\u0443 \u0440\u0435\u0434\u0430\u043A\u0442\u0438\u0440\u043E\u0432\u0430\u043D\u0438\u044F \u0434\u043B\u044F \u0432\u044B\u0431\u043E\u0440\u0430 \u0438\u043B\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0438 \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430</p>\n      }\n    </div>\n  }\n  @if (!presentOrEdit) {\n    <div class=\"edit-panel\">\n      <div class=\"edit-header\">\n        <h6>\u041D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430</h6>\n      </div>\n\n      <div class=\"mode-toggle\">\n        <mat-button-toggle-group [(ngModel)]=\"searchOrEdit\">\n          <mat-button-toggle value=\"search\">\n            <mat-icon>search</mat-icon>\n            \u0418\u0441\u043A\u0430\u0442\u044C \u0444\u0430\u0439\u043B\n          </mat-button-toggle>\n          <mat-button-toggle value=\"edit\">\n            <mat-icon>settings</mat-icon>\n            \u0423\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u043E ID\n          </mat-button-toggle>\n        </mat-button-toggle-group>\n      </div>\n\n      @if (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            <ng-select\n              [(ngModel)]=\"fileId\"\n              (ngModelChange)=\"onFileSelected($event)\"\n              [items]=\"files\"\n              bindLabel=\"fileName\"\n              bindValue=\"fileId\"\n              (search)=\"onSearchChanged($event)\"\n              [loading]=\"loading\"\n              [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\n              placeholder=\"\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\"\n              [clearable]=\"true\">\n              <ng-template ng-option-tmp let-item=\"item\">\n                <div class=\"file-option\">\n                  <mat-icon>audiotrack</mat-icon>\n                  <span>{{ item.fileName }}</span>\n                  <small>ID: {{ item.fileId }}</small>\n                </div>\n              </ng-template>\n            </ng-select>\n          </div>\n\n          <div class=\"title-input\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430</mat-label>\n              <input\n                matInput\n                placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430\"\n                autocomplete=\"off\"\n                [(ngModel)]=\"title\">\n            </mat-form-field>\n          </div>\n\n          <div class=\"upload-section\">\n            <h6>\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u043D\u043E\u0432\u044B\u0439 \u0444\u0430\u0439\u043B:</h6>\n            <croco-app-upload-files-btn\n              extAccepts=\"audio/*\"\n              [isMultiple]=\"false\"\n              btnText=\"\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\"\n              (onPublicFilesUploaded)=\"onFilesUploaded($event.fileIds)\"\n              (onPrivateFilesUploaded)=\"onFilesUploaded($event.fileIds)\">\n            </croco-app-upload-files-btn>\n          </div>\n        </div>\n      } @else if (searchOrEdit === 'edit') {\n        <div class=\"manual-input\">\n          <mat-form-field class=\"w-100\">\n            <mat-label>\u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430</mat-label>\n            <input\n              matInput\n              placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 ID \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430\"\n              autocomplete=\"off\"\n              [(ngModel)]=\"fileId\"\n              (ngModelChange)=\"onFileIdChanged($event)\">\n          </mat-form-field>\n\n          <mat-form-field class=\"w-100\">\n            <mat-label>\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430</mat-label>\n            <input\n              matInput\n              placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430\"\n              autocomplete=\"off\"\n              [(ngModel)]=\"title\">\n          </mat-form-field>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".audio-editor{width:100%;padding:16px;background:#fafafa;border-radius:8px;border:1px solid #e0e0e0}.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}.file-info .edit-btn{margin-left:auto}.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 0 8px;color:#999}.no-file-message p{margin:0;font-size:14px;color:#999}.edit-panel{background:#fff;border-radius:8px;padding:20px;border:1px solid #e0e0e0;margin-top:16px}.edit-panel .edit-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.edit-panel .edit-header h6{margin:0;color:#333}.edit-panel .mode-toggle{margin-bottom:20px}.edit-panel .mode-toggle mat-button-toggle-group{width:100%}.edit-panel .mode-toggle mat-button-toggle{flex:1;display:flex;align-items:center;justify-content:center;gap:8px}.edit-panel .file-selection{display:flex;flex-direction:column;gap:20px}.edit-panel .file-selection h6{margin:0 0 12px;color:#333}.edit-panel .file-selection .file-option{display:flex;align-items:center;gap:8px}.edit-panel .file-selection .file-option mat-icon{color:#1976d2}.edit-panel .file-selection .file-option small{margin-left:auto;color:#666}.edit-panel .file-selection .upload-section{padding-top:16px;border-top:1px solid #e0e0e0}.edit-panel .manual-input{display:flex;flex-direction:column;gap:16px}.edit-button-container{display:flex;justify-content:center;margin-top:16px}.edit-button-container .edit-mode-btn{background-color:#1976d2;color:#fff}.edit-button-container .edit-mode-btn:hover{background-color:#1565c0}@media screen and (max-width: 768px){.audio-editor{padding: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}.edit-panel{padding:16px}.edit-panel .mode-toggle mat-button-toggle-group{flex-direction:column}}::ng-deep .ng-select .ng-select-container{border-radius:4px;border:1px solid #ccc}::ng-deep .ng-select.ng-select-focused .ng-select-container{border-color:#1976d2}input[type=range].progress-slider:disabled,input[type=range].volume-slider:disabled{opacity:.5;cursor:not-allowed}\n"] }]
         }], ctorParameters: () => [{ type: PublicFilesQueryService }, { type: PrivateFilesQueryService }, { type: CrocoHtmlFileOptionsService }, { type: CommonFileInfoQueryService }], propDecorators: { audioPlayer: [{
                 type: ViewChild,
                 args: ['audioPlayer', { static: false }]
@@ -2954,6 +2983,7 @@ class FileIdSelectComponent {
         this._privateFileService = _privateFileService;
         this._htmlSettingsService = _htmlSettingsService;
         this._options = _options;
+        this._cdr = inject(ChangeDetectorRef);
         this.labelText = "Поиск файлов";
         this.loading = false;
         this.files = [];
@@ -2979,11 +3009,13 @@ class FileIdSelectComponent {
             applicationId: isPrivate ? this.crocoHtmlEditorFileOptions.applicationId : null,
             q: this.q
         };
+        this._cdr.markForCheck();
         if (isPrivate) {
             this._privateFileService.search(searchParams)
                 .subscribe(data => {
                 this.files = data.list.map(el => ({ fileId: el.id, fileName: el.fileName }));
                 this.loading = false;
+                this._cdr.markForCheck();
             });
         }
         else {
@@ -2991,22 +3023,24 @@ class FileIdSelectComponent {
                 .subscribe(data => {
                 this.files = data.list.map(el => ({ fileId: el.fileId.toString(), fileName: el.fileName }));
                 this.loading = false;
+                this._cdr.markForCheck();
             });
         }
     }
     onSearchChanged(q) {
         this.q = q.term;
         this.loadFiles();
+        this._cdr.markForCheck();
     }
     ngOnChanges(changes) {
         this.loadFiles();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FileIdSelectComponent, deps: [{ token: PublicFilesQueryService }, { token: PrivateFilesQueryService }, { token: CrocoHtmlFileOptionsService }, { token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FileIdSelectComponent, isStandalone: true, selector: "croco-html-file-id-select", inputs: { labelText: "labelText", fileId: "fileId" }, outputs: { fileId: "fileId", onFileIdChanged: "onFileIdChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"file-id\">\n    <div class=\"form-group\">\n        <label for=\"fileName\">{{labelText}}</label>\n        <ng-select [(ngModel)]=\"fileId\" (ngModelChange)=\"onModelChanged($event)\" [items]=\"files\" #select\n            bindLabel=\"fileName\" (search)=\"onSearchChanged($event)\" [loading]=\"loading\" [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\n            dropdownPosition=\"auto\" [bindValue]=\"'fileId'\" labelForId=\"fileName\" placeholder=\"\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B\"\n            [virtualScroll]=\"true\">\n            <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n              <div class=\"file-id__container\">\n                <div class=\"file-id__text-container\">\n                  <div>\n                    <span class=\"h5\">\u0424\u0430\u0439\u043B: </span>\n                    <span class=\"h5\"><b>{{item.fileName}}</b></span>\n                  </div>\n                  <div>\n                    <small>\n                        <span>\n                            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: <b>{{item.fileId }}</b>\n                        </span>\n                    </small>\n                  </div>\n                </div>\n                <div class=\"file-id__img\">\n                  <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc(item.fileId)\" />\n                </div>\n              </div>\n\n            </ng-template>\n        </ng-select>\n    </div>\n</div>\n\n<div>\n    \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: {{fileId}}\n</div>\n", styles: [".file-id__container{display:flex;align-items:center;justify-content:space-between;gap:10px}@media (max-width: 768px){.file-id__container{align-items:unset;flex-direction:column}}.file-id__text-container{display:flex;flex-direction:column}.file-id__text-container b{word-break:break-word;white-space:normal}@media (max-width: 768px){.file-id__text-container b{font-size:14px}}@media (max-width: 768px){.file-id__text-container span{font-size:14px}}.file-id__img img{width:100px;height:100px}\n"], dependencies: [{ kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i6.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: i6.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "ngmodule", type: FormsModule }, { 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: "14.0.0", version: "20.3.15", type: FileIdSelectComponent, isStandalone: true, selector: "croco-html-file-id-select", inputs: { labelText: "labelText", fileId: "fileId" }, outputs: { fileId: "fileId", onFileIdChanged: "onFileIdChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"file-id\">\n    <div class=\"form-group\">\n        <label for=\"fileName\">{{labelText}}</label>\n        <ng-select [(ngModel)]=\"fileId\" (ngModelChange)=\"onModelChanged($event)\" [items]=\"files\" #select\n            bindLabel=\"fileName\" (search)=\"onSearchChanged($event)\" [loading]=\"loading\" [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\n            dropdownPosition=\"auto\" [bindValue]=\"'fileId'\" labelForId=\"fileName\" placeholder=\"\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B\"\n            [virtualScroll]=\"true\">\n            <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n              <div class=\"file-id__container\">\n                <div class=\"file-id__text-container\">\n                  <div>\n                    <span class=\"h5\">\u0424\u0430\u0439\u043B: </span>\n                    <span class=\"h5\"><b>{{item.fileName}}</b></span>\n                  </div>\n                  <div>\n                    <small>\n                        <span>\n                            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: <b>{{item.fileId }}</b>\n                        </span>\n                    </small>\n                  </div>\n                </div>\n                <div class=\"file-id__img\">\n                  <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc(item.fileId)\" />\n                </div>\n              </div>\n\n            </ng-template>\n        </ng-select>\n    </div>\n</div>\n\n<div>\n    \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: {{fileId}}\n</div>\n", styles: [".file-id__container{display:flex;align-items:center;justify-content:space-between;gap:10px}@media (max-width: 768px){.file-id__container{align-items:unset;flex-direction:column}}.file-id__text-container{display:flex;flex-direction:column}.file-id__text-container b{word-break:break-word;white-space:normal}@media (max-width: 768px){.file-id__text-container b{font-size:14px}}@media (max-width: 768px){.file-id__text-container span{font-size:14px}}.file-id__img img{width:100px;height:100px}\n"], dependencies: [{ kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i6.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: i6.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "ngmodule", type: FormsModule }, { 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: FileIdSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-file-id-select', standalone: true, imports: [NgSelectModule, FormsModule], template: "<div class=\"file-id\">\n    <div class=\"form-group\">\n        <label for=\"fileName\">{{labelText}}</label>\n        <ng-select [(ngModel)]=\"fileId\" (ngModelChange)=\"onModelChanged($event)\" [items]=\"files\" #select\n            bindLabel=\"fileName\" (search)=\"onSearchChanged($event)\" [loading]=\"loading\" [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\n            dropdownPosition=\"auto\" [bindValue]=\"'fileId'\" labelForId=\"fileName\" placeholder=\"\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B\"\n            [virtualScroll]=\"true\">\n            <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n              <div class=\"file-id__container\">\n                <div class=\"file-id__text-container\">\n                  <div>\n                    <span class=\"h5\">\u0424\u0430\u0439\u043B: </span>\n                    <span class=\"h5\"><b>{{item.fileName}}</b></span>\n                  </div>\n                  <div>\n                    <small>\n                        <span>\n                            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: <b>{{item.fileId }}</b>\n                        </span>\n                    </small>\n                  </div>\n                </div>\n                <div class=\"file-id__img\">\n                  <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc(item.fileId)\" />\n                </div>\n              </div>\n\n            </ng-template>\n        </ng-select>\n    </div>\n</div>\n\n<div>\n    \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: {{fileId}}\n</div>\n", styles: [".file-id__container{display:flex;align-items:center;justify-content:space-between;gap:10px}@media (max-width: 768px){.file-id__container{align-items:unset;flex-direction:column}}.file-id__text-container{display:flex;flex-direction:column}.file-id__text-container b{word-break:break-word;white-space:normal}@media (max-width: 768px){.file-id__text-container b{font-size:14px}}@media (max-width: 768px){.file-id__text-container span{font-size:14px}}.file-id__img img{width:100px;height:100px}\n"] }]
+            args: [{ selector: 'croco-html-file-id-select', standalone: true, imports: [NgSelectModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"file-id\">\n    <div class=\"form-group\">\n        <label for=\"fileName\">{{labelText}}</label>\n        <ng-select [(ngModel)]=\"fileId\" (ngModelChange)=\"onModelChanged($event)\" [items]=\"files\" #select\n            bindLabel=\"fileName\" (search)=\"onSearchChanged($event)\" [loading]=\"loading\" [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\n            dropdownPosition=\"auto\" [bindValue]=\"'fileId'\" labelForId=\"fileName\" placeholder=\"\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B\"\n            [virtualScroll]=\"true\">\n            <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n              <div class=\"file-id__container\">\n                <div class=\"file-id__text-container\">\n                  <div>\n                    <span class=\"h5\">\u0424\u0430\u0439\u043B: </span>\n                    <span class=\"h5\"><b>{{item.fileName}}</b></span>\n                  </div>\n                  <div>\n                    <small>\n                        <span>\n                            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: <b>{{item.fileId }}</b>\n                        </span>\n                    </small>\n                  </div>\n                </div>\n                <div class=\"file-id__img\">\n                  <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc(item.fileId)\" />\n                </div>\n              </div>\n\n            </ng-template>\n        </ng-select>\n    </div>\n</div>\n\n<div>\n    \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: {{fileId}}\n</div>\n", styles: [".file-id__container{display:flex;align-items:center;justify-content:space-between;gap:10px}@media (max-width: 768px){.file-id__container{align-items:unset;flex-direction:column}}.file-id__text-container{display:flex;flex-direction:column}.file-id__text-container b{word-break:break-word;white-space:normal}@media (max-width: 768px){.file-id__text-container b{font-size:14px}}@media (max-width: 768px){.file-id__text-container span{font-size:14px}}.file-id__img img{width:100px;height:100px}\n"] }]
         }], ctorParameters: () => [{ type: PublicFilesQueryService }, { type: PrivateFilesQueryService }, { type: CrocoHtmlFileOptionsService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [CrocoHtmlOptionsToken]
@@ -3133,6 +3167,7 @@ const AlignmentsData = [
 
 class DownloadFileButtonEditorComponent {
     constructor() {
+        this._cdr = inject(ChangeDetectorRef);
         this.presentOrEdit = true;
         this.tagData = {
             link: '',
@@ -3142,16 +3177,18 @@ class DownloadFileButtonEditorComponent {
     ngOnInit() {
         this.tagData.link = this.tag.attributes.link;
         this.tagData.title = this.tag.attributes.title;
+        this._cdr.markForCheck();
     }
     linkChanged() {
         this.tag.attributes = this.tagData;
+        this._cdr.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DownloadFileButtonEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DownloadFileButtonEditorComponent, isStandalone: true, selector: "croco-html-download-file-button-editor", inputs: { tag: "tag", presentOrEdit: "presentOrEdit" }, ngImport: i0, template: "@if (presentOrEdit) {\n  <div>\n    <div>\n      \u0421\u0441\u044B\u043B\u043A\u0430 \u0434\u043B\u044F \u0441\u043A\u0430\u0447\u0438\u0432\u0430\u043D\u0438\u044F: {{tagData.link}}\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <div>\n      \u0422\u0435\u043A\u0441\u0442 \u043A\u043D\u043E\u043F\u043A\u0438: {{tagData.title}}\n    </div>\n    <div style=\"height: 20px;\"></div>\n    <croco-html-xml-tag-download-file-button [tagData]=\"tagData\"></croco-html-xml-tag-download-file-button>\n  </div>\n}\n@else {\n      <div>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\n            \u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 \u0441\u043A\u0430\u0447\u0438\u0432\u0430\u043D\u0438\u0435\n          </mat-label>\n          <input matInput placeholder=\"\u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 \u0441\u043A\u0430\u0447\u0438\u0432\u0430\u043D\u0438\u0435\"\n                 autocomplete=\"off\"\n                 [(ngModel)]=\"tagData.link\"\n                 (ngModelChange)=\"linkChanged()\">\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>\n            \u0422\u0435\u043A\u0441\u0442 \u043D\u0430 \u043A\u043D\u043E\u043F\u043A\u0435\n          </mat-label>\n          <input matInput placeholder=\"\u0422\u0435\u043A\u0441\u0442 \u043D\u0430 \u043A\u043D\u043E\u043F\u043A\u0435\"\n                 autocomplete=\"off\"\n                 [(ngModel)]=\"tagData.title\"\n                 (ngModelChange)=\"linkChanged()\">\n        </mat-form-field>\n      </div>\n}\n", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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: "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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XmlTagDownloadFileButtonComponent, selector: "croco-html-xml-tag-download-file-button", inputs: ["data", "tagData"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i1$4.MatLabel, selector: "mat-label" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DownloadFileButtonEditorComponent, isStandalone: true, selector: "croco-html-download-file-button-editor", inputs: { tag: "tag", presentOrEdit: "presentOrEdit" }, ngImport: i0, template: "@if (presentOrEdit) {\n  <div>\n    <div>\n      \u0421\u0441\u044B\u043B\u043A\u0430 \u0434\u043B\u044F \u0441\u043A\u0430\u0447\u0438\u0432\u0430\u043D\u0438\u044F: {{tagData.link}}\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <div>\n      \u0422\u0435\u043A\u0441\u0442 \u043A\u043D\u043E\u043F\u043A\u0438: {{tagData.title}}\n    </div>\n    <div style=\"height: 20px;\"></div>\n    <croco-html-xml-tag-download-file-button [tagData]=\"tagData\"></croco-html-xml-tag-download-file-button>\n  </div>\n}\n@else {\n      <div>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\n            \u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 \u0441\u043A\u0430\u0447\u0438\u0432\u0430\u043D\u0438\u0435\n          </mat-label>\n          <input matInput placeholder=\"\u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 \u0441\u043A\u0430\u0447\u0438\u0432\u0430\u043D\u0438\u0435\"\n                 autocomplete=\"off\"\n                 [(ngModel)]=\"tagData.link\"\n                 (ngModelChange)=\"linkChanged()\">\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>\n            \u0422\u0435\u043A\u0441\u0442 \u043D\u0430 \u043A\u043D\u043E\u043F\u043A\u0435\n          </mat-label>\n          <input matInput placeholder=\"\u0422\u0435\u043A\u0441\u0442 \u043D\u0430 \u043A\u043D\u043E\u043F\u043A\u0435\"\n                 autocomplete=\"off\"\n                 [(ngModel)]=\"tagData.title\"\n                 (ngModelChange)=\"linkChanged()\">\n        </mat-form-field>\n      </div>\n}\n", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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: "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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XmlTagDownloadFileButtonComponent, selector: "croco-html-xml-tag-download-file-button", inputs: ["data", "tagData"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i1$4.MatLabel, selector: "mat-label" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DownloadFileButtonEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-download-file-button-editor', standalone: true, imports: [
+            args: [{ selector: 'croco-html-download-file-button-editor', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatFormField,
                         MatInput,
                         ReactiveFormsModule,
@@ -3228,6 +3265,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 
 class ButtonEditorComponent {
     constructor() {
+        this._cdr = inject(ChangeDetectorRef);
         this.presentOrEdit = true;
         this.tagData = {
             type: '',
@@ -3240,9 +3278,11 @@ class ButtonEditorComponent {
         this.tagData.type = data.type;
         this.tagData.text = data.text;
         this.tagData.click = data.click;
+        this._cdr.markForCheck();
     }
     linkChanged() {
         this.tag.attributes = this.tagData;
+        this._cdr.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ButtonEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ButtonEditorComponent, isStandalone: true, selector: "croco-html-button-editor", inputs: { tag: "tag", presentOrEdit: "presentOrEdit" }, ngImport: i0, template: "@if (presentOrEdit) {\n  <div>\n    <div>\n      \u0422\u0438\u043F: {{tagData.type}}\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <div>\n      \u0422\u0435\u043A\u0441\u0442: {{tagData.text}}\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <div>\n      \u041E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A \u043D\u0430\u0436\u0430\u0442\u0438\u044F: {{tagData.click}}\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <croco-html-xml-tag-button [tagData]=\"tagData\"></croco-html-xml-tag-button>\n  </div>\n} @else {\n  <div>\n    <mat-form-field class=\"w-100\">\n      <mat-label>\n        \u0422\u0438\u043F\n      </mat-label>\n      <input matInput placeholder=\"\u0422\u0438\u043F\"\n             autocomplete=\"off\"\n             [(ngModel)]=\"tagData.type\"\n             (ngModelChange)=\"linkChanged()\">\n    </mat-form-field>\n\n    <mat-form-field class=\"w-100\">\n      <mat-label>\n        \u0422\u0435\u043A\u0441\u0442\n      </mat-label>\n      <input matInput placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n             autocomplete=\"off\"\n             [(ngModel)]=\"tagData.text\"\n             (ngModelChange)=\"linkChanged()\">\n    </mat-form-field>\n\n    <mat-form-field class=\"w-100\">\n      <mat-label>\n        \u041E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A \u043D\u0430\u0436\u0430\u0442\u0438\u044F\n      </mat-label>\n      <input matInput placeholder=\"\u041E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A \u043D\u0430\u0436\u0430\u0442\u0438\u044F\"\n             autocomplete=\"off\"\n             [(ngModel)]=\"tagData.click\"\n             (ngModelChange)=\"linkChanged()\">\n    </mat-form-field>\n  </div>\n}\n", dependencies: [{ 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: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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: MatLabel, selector: "mat-label" }, { kind: "component", type: XmlTagButtonComponent, selector: "croco-html-xml-tag-button", inputs: ["data", "tagData"] }] }); }
@@ -3266,6 +3306,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 
 class CustomWidgetEditorComponent {
     constructor() {
+        this._cdr = inject(ChangeDetectorRef);
         this.presentOrEdit = false;
         this.tagData = {
             type: '',
@@ -3275,12 +3316,14 @@ class CustomWidgetEditorComponent {
     }
     ngOnInit() {
         this.tagData = CustomWidgetTagService.ExtractCustomWidgetTagData(this.tag.attributes);
+        this._cdr.markForCheck();
     }
     dataChanged() {
         this.tag.attributes = CustomWidgetTagService.ExtractCustomWidgetAttributes(this.tagData);
+        this._cdr.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CustomWidgetEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CustomWidgetEditorComponent, isStandalone: true, selector: "croco-html-custom-widget-editor", inputs: { tag: "tag", presentOrEdit: "presentOrEdit" }, ngImport: i0, template: "@if (presentOrEdit) {\n<div>\n  <div>\n    <b>type:</b> {{tagData.type}}\n  </div>\n  <div style=\"height: 10px;\"></div>\n  <div>\n    <b>data-id:</b> {{tagData.dataId}}\n  </div>\n  <div style=\"height: 10px;\"></div>\n  <div>\n    <b>widget-id:</b> {{tagData.widgetId}}\n  </div>\n  <div style=\"height: 10px;\"></div>\n  <croco-html-xml-tag-custom-widget [tagData]=\"tagData\"></croco-html-xml-tag-custom-widget>\n</div>\n} @else {\n<div>\n  <mat-form-field class=\"w-100\">\n    <mat-label>\n      type\n    </mat-label>\n    <input matInput placeholder=\"type\" autocomplete=\"off\" [(ngModel)]=\"tagData.type\" (ngModelChange)=\"dataChanged()\">\n  </mat-form-field>\n\n  <mat-form-field class=\"w-100\">\n    <mat-label>\n      data-id\n    </mat-label>\n    <input matInput placeholder=\"data-id\" autocomplete=\"off\" [(ngModel)]=\"tagData.dataId\"\n      (ngModelChange)=\"dataChanged()\">\n  </mat-form-field>\n\n  <mat-form-field class=\"w-100\">\n    <mat-label>\n      widget-id\n    </mat-label>\n    <input matInput placeholder=\"widget-id\" autocomplete=\"off\" [(ngModel)]=\"tagData.widgetId\"\n      (ngModelChange)=\"dataChanged()\">\n  </mat-form-field>\n</div>\n}", dependencies: [{ 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: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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: MatLabel, selector: "mat-label" }, { kind: "component", type: XmlTagCustomWidgetComponent, selector: "croco-html-xml-tag-custom-widget", inputs: ["tagData"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CustomWidgetEditorComponent, isStandalone: true, selector: "croco-html-custom-widget-editor", inputs: { tag: "tag", presentOrEdit: "presentOrEdit" }, ngImport: i0, template: "@if (presentOrEdit) {\n<div>\n  <div>\n    <b>type:</b> {{tagData.type}}\n  </div>\n  <div style=\"height: 10px;\"></div>\n  <div>\n    <b>data-id:</b> {{tagData.dataId}}\n  </div>\n  <div style=\"height: 10px;\"></div>\n  <div>\n    <b>widget-id:</b> {{tagData.widgetId}}\n  </div>\n  <div style=\"height: 10px;\"></div>\n  <croco-html-xml-tag-custom-widget [tagData]=\"tagData\"></croco-html-xml-tag-custom-widget>\n</div>\n} @else {\n<div>\n  <mat-form-field class=\"w-100\">\n    <mat-label>\n      type\n    </mat-label>\n    <input matInput placeholder=\"type\" autocomplete=\"off\" [(ngModel)]=\"tagData.type\" (ngModelChange)=\"dataChanged()\">\n  </mat-form-field>\n\n  <mat-form-field class=\"w-100\">\n    <mat-label>\n      data-id\n    </mat-label>\n    <input matInput placeholder=\"data-id\" autocomplete=\"off\" [(ngModel)]=\"tagData.dataId\"\n      (ngModelChange)=\"dataChanged()\">\n  </mat-form-field>\n\n  <mat-form-field class=\"w-100\">\n    <mat-label>\n      widget-id\n    </mat-label>\n    <input matInput placeholder=\"widget-id\" autocomplete=\"off\" [(ngModel)]=\"tagData.widgetId\"\n      (ngModelChange)=\"dataChanged()\">\n  </mat-form-field>\n</div>\n}", dependencies: [{ 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: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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: MatLabel, selector: "mat-label" }, { kind: "component", type: XmlTagCustomWidgetComponent, selector: "croco-html-xml-tag-custom-widget", inputs: ["tagData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CustomWidgetEditorComponent, decorators: [{
             type: Component,
@@ -3290,7 +3333,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatInput,
                         MatLabel,
                         XmlTagCustomWidgetComponent,
-                    ], template: "@if (presentOrEdit) {\n<div>\n  <div>\n    <b>type:</b> {{tagData.type}}\n  </div>\n  <div style=\"height: 10px;\"></div>\n  <div>\n    <b>data-id:</b> {{tagData.dataId}}\n  </div>\n  <div style=\"height: 10px;\"></div>\n  <div>\n    <b>widget-id:</b> {{tagData.widgetId}}\n  </div>\n  <div style=\"height: 10px;\"></div>\n  <croco-html-xml-tag-custom-widget [tagData]=\"tagData\"></croco-html-xml-tag-custom-widget>\n</div>\n} @else {\n<div>\n  <mat-form-field class=\"w-100\">\n    <mat-label>\n      type\n    </mat-label>\n    <input matInput placeholder=\"type\" autocomplete=\"off\" [(ngModel)]=\"tagData.type\" (ngModelChange)=\"dataChanged()\">\n  </mat-form-field>\n\n  <mat-form-field class=\"w-100\">\n    <mat-label>\n      data-id\n    </mat-label>\n    <input matInput placeholder=\"data-id\" autocomplete=\"off\" [(ngModel)]=\"tagData.dataId\"\n      (ngModelChange)=\"dataChanged()\">\n  </mat-form-field>\n\n  <mat-form-field class=\"w-100\">\n    <mat-label>\n      widget-id\n    </mat-label>\n    <input matInput placeholder=\"widget-id\" autocomplete=\"off\" [(ngModel)]=\"tagData.widgetId\"\n      (ngModelChange)=\"dataChanged()\">\n  </mat-form-field>\n</div>\n}" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (presentOrEdit) {\n<div>\n  <div>\n    <b>type:</b> {{tagData.type}}\n  </div>\n  <div style=\"height: 10px;\"></div>\n  <div>\n    <b>data-id:</b> {{tagData.dataId}}\n  </div>\n  <div style=\"height: 10px;\"></div>\n  <div>\n    <b>widget-id:</b> {{tagData.widgetId}}\n  </div>\n  <div style=\"height: 10px;\"></div>\n  <croco-html-xml-tag-custom-widget [tagData]=\"tagData\"></croco-html-xml-tag-custom-widget>\n</div>\n} @else {\n<div>\n  <mat-form-field class=\"w-100\">\n    <mat-label>\n      type\n    </mat-label>\n    <input matInput placeholder=\"type\" autocomplete=\"off\" [(ngModel)]=\"tagData.type\" (ngModelChange)=\"dataChanged()\">\n  </mat-form-field>\n\n  <mat-form-field class=\"w-100\">\n    <mat-label>\n      data-id\n    </mat-label>\n    <input matInput placeholder=\"data-id\" autocomplete=\"off\" [(ngModel)]=\"tagData.dataId\"\n      (ngModelChange)=\"dataChanged()\">\n  </mat-form-field>\n\n  <mat-form-field class=\"w-100\">\n    <mat-label>\n      widget-id\n    </mat-label>\n    <input matInput placeholder=\"widget-id\" autocomplete=\"off\" [(ngModel)]=\"tagData.widgetId\"\n      (ngModelChange)=\"dataChanged()\">\n  </mat-form-field>\n</div>\n}" }]
         }], propDecorators: { tag: [{
                 type: Input,
                 args: [{ required: true }]