npm - croco-html - Versions diffs - 4.9.1 → 4.9.2 - Mend

croco-html 4.9.1 → 4.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/fesm2022/croco-html.mjs CHANGED Viewed

@@ -136,6 +136,7 @@ class AngularMaterialTableMethods {
 class FileAudioTagDataConsts {
     static { this.TagName = "audio-player"; }
     static { this.FileIdAttrName = "file-id"; }
+    static { this.TitleAttrName = "title"; }
 }
 class AudioMethods {
     static buildUrl(fileId, fileName) {
@@ -745,18 +746,25 @@ class FileAudioTagService {
     }
     bodyTagToHtmlStringConverter(bodyTag) {
         let fileIdAttr = "";
+        let titleAttr = "";
         if (bodyTag.attributes.hasOwnProperty(FileAudioTagDataConsts.FileIdAttrName) &&
             bodyTag.attributes[FileAudioTagDataConsts.FileIdAttrName]) {
             fileIdAttr = `${FileAudioTagDataConsts.FileIdAttrName}="${bodyTag.attributes[FileAudioTagDataConsts.FileIdAttrName]}"`;
         }
-        return `<${FileAudioTagDataConsts.TagName} ${fileIdAttr}></${FileAudioTagDataConsts.TagName}>`;
+        if (bodyTag.attributes.hasOwnProperty(FileAudioTagDataConsts.TitleAttrName) &&
+            bodyTag.attributes[FileAudioTagDataConsts.TitleAttrName]) {
+            titleAttr = `${FileAudioTagDataConsts.TitleAttrName}="${bodyTag.attributes[FileAudioTagDataConsts.TitleAttrName]}"`;
+        }
+        return `<${FileAudioTagDataConsts.TagName} ${fileIdAttr} ${titleAttr}></${FileAudioTagDataConsts.TagName}>`;
     }
     extractBlockFromHtmlElement(elem, options) {
         let fileId = elem.getAttribute(FileAudioTagDataConsts.FileIdAttrName);
+        let title = elem.getAttribute(FileAudioTagDataConsts.TitleAttrName);
         return {
             tagName: FileAudioTagDataConsts.TagName,
             data: {
-                fileId: fileId
+                fileId: fileId,
+                title: title
             }
         };
     }
@@ -766,6 +774,9 @@ class FileAudioTagService {
         if (fileData.fileId) {
             attrs[FileAudioTagDataConsts.FileIdAttrName] = fileData.fileId;
         }
+        if (fileData.title) {
+            attrs[FileAudioTagDataConsts.TitleAttrName] = fileData.title;
+        }
         return {
             tagDescription: {
                 tag: FileAudioTagDataConsts.TagName,
@@ -784,7 +795,8 @@ class FileAudioTagService {
                 isCustom: false
             },
             attributes: {
-                [FileAudioTagDataConsts.FileIdAttrName]: ''
+                [FileAudioTagDataConsts.FileIdAttrName]: '',
+                [FileAudioTagDataConsts.TitleAttrName]: ''
             },
             innerHtml: "",
         };
@@ -1519,6 +1531,12 @@ class AudioEditorComponent {
     set fileId(value) {
         this.tag.attributes[FileAudioTagDataConsts.FileIdAttrName] = value;
     }
+    get title() {
+        return this.tag.attributes[FileAudioTagDataConsts.TitleAttrName] || '';
+    }
+    set title(value) {
+        this.tag.attributes[FileAudioTagDataConsts.TitleAttrName] = value;
+    }
     hasFileId() {
         return this.tag.attributes.hasOwnProperty(FileAudioTagDataConsts.FileIdAttrName) && this.fileId && this.fileId !== '';
     }
@@ -1727,6 +1745,7 @@ class AudioEditorComponent {
     }
     removeAudio() {
         this.fileId = '';
+        this.title = '';
         this.audioSrc = '';
         this.isPlaying = false;
         this.currentTime = 0;
@@ -1748,7 +1767,7 @@ class AudioEditorComponent {
         this.unsubscribe.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", 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: "19.2.14", 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=\"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        </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", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i6.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i6.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AudioEditorComponent, decorators: [{
             type: Component,
@@ -1763,7 +1782,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", 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=\"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        </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"] }]
+                    ], 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 }]
@@ -1795,6 +1814,9 @@ class AudioPlayerTagViewComponent {
     get fileId() {
         return this.data.data.fileId;
     }
+    get title() {
+        return this.data.data.title || 'Аудио-файл';
+    }
     get audioElement() {
         return this.audioPlayer?.nativeElement || null;
     }
@@ -1968,14 +1990,14 @@ class AudioPlayerTagViewComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AudioPlayerTagViewComponent, deps: [{ token: CrocoHtmlOptionsToken }, { token: CommonFileInfoQueryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: AudioPlayerTagViewComponent, isStandalone: true, selector: "croco-html-audio-player-tag-view", inputs: { data: "data" }, viewQueries: [{ propertyName: "audioPlayer", first: true, predicate: ["audioPlayer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"audio-view\">\n  @if (hasAudioError) {\n    <div class=\"error-block\">\n      <mat-icon>error</mat-icon>\n      <span>{{ errorMessage }}</span>\n    </div>\n  }\n\n  @if (hasFileId() && !hasAudioError) {\n    <div class=\"audio-player-container\">\n      <audio\n        #audioPlayer\n        [src]=\"audioSrc\"\n        (error)=\"onErrorHandler()\"\n        (loadedmetadata)=\"onLoadedMetadata()\"\n        (timeupdate)=\"onTimeUpdate()\"\n        (ended)=\"onEnded()\"\n        (canplay)=\"onCanPlay()\"\n        preload=\"metadata\">\n      </audio>\n\n      @if (isLoading) {\n        <div class=\"loading-indicator\">\n          <div class=\"progress-bar\">\n            <div class=\"progress-bar-fill\"></div>\n          </div>\n          <span>\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0430\u0443\u0434\u0438\u043E...</span>\n        </div>\n      }\n\n      <div class=\"file-info\">\n        <mat-icon>audiotrack</mat-icon>\n        <span class=\"file-name\">\u0410\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B</span>\n      </div>\n\n      <div class=\"player-controls\">\n        <div class=\"control-buttons\">\n          <button (click)=\"restart()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>replay</mat-icon>\n          </button>\n\n          <button (click)=\"rewind()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>replay_10</mat-icon>\n          </button>\n\n          <button\n            (click)=\"togglePlayPause()\"\n            [disabled]=\"!hasFileId() || isLoading\"\n            class=\"play-pause-btn\" mat-icon-button>\n            <mat-icon>{{ isPlaying ? 'pause' : 'play_arrow' }}</mat-icon>\n          </button>\n\n          <button (click)=\"forward()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>forward_10</mat-icon>\n          </button>\n        </div>\n\n        <div class=\"progress-section\">\n          <span class=\"time-display\">{{ formatTime(currentTime) }}</span>\n\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"getProgress()\"\n            (input)=\"onSeekChange($event)\"\n            [disabled]=\"!hasFileId() || duration === 0\"\n            class=\"progress-slider\">\n\n          <span class=\"time-display\">{{ formatTime(duration) }}</span>\n        </div>\n\n        <div class=\"volume-controls\">\n          <button (click)=\"toggleMute()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>{{ isMuted ? 'volume_off' : 'volume_up' }}</mat-icon>\n          </button>\n\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"volume * 100\"\n            (input)=\"onVolumeChange($event)\"\n            [disabled]=\"!hasFileId()\"\n            class=\"volume-slider\">\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- \u0421\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435 \u043E\u0431 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 \u0444\u0430\u0439\u043B\u0430 -->\n  @if (!hasFileId()) {\n    <div class=\"no-file-message\">\n      <mat-icon>music_off</mat-icon>\n      <h5>\u0410\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D</h5>\n    </div>\n  }\n</div>\n", styles: [".audio-view{width:100%;max-width:500px;margin:0 auto}.error-block{display:flex;align-items:center;gap:8px;background-color:#ffebee;color:#c62828;padding:12px;border-radius:8px;border:1px solid #ffcdd2;margin-bottom:16px}.error-block mat-icon{color:#c62828}.audio-player-container{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 8px #0000001a;margin-bottom:16px}.loading-indicator{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;color:#666}.loading-indicator .progress-bar{width:200px;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden}.loading-indicator .progress-bar .progress-bar-fill{height:100%;background-color:#1976d2;animation:loading 1.5s ease-in-out infinite}@keyframes loading{0%{transform:translate(-100%)}50%{transform:translate(0)}to{transform:translate(100%)}}.file-info{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:12px;background:#f5f5f5;border-radius:8px}.file-info mat-icon{color:#1976d2}.file-info .file-name{font-weight:500;flex:1}.player-controls{display:flex;flex-direction:column;gap:16px}.control-buttons{display:flex;justify-content:center;align-items:center;gap:8px}.control-buttons .play-pause-btn{background-color:#1976d2;color:#fff;width:48px;height:48px}.control-buttons .play-pause-btn:hover{background-color:#1565c0}.control-buttons .play-pause-btn mat-icon{font-size:24px}.control-buttons mat-icon-button{width:40px;height:40px}.control-buttons mat-icon-button:disabled{color:#ccc}.progress-section{display:flex;align-items:center;gap:12px}.progress-section .time-display{font-family:Roboto Mono,monospace;font-size:14px;color:#666;min-width:40px;text-align:center}.progress-section .progress-slider{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:#e0e0e0;outline:none;border-radius:3px}.progress-section .progress-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.progress-section .progress-slider::-moz-range-thumb{width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.progress-section .progress-slider:hover::-webkit-slider-thumb{background:#1565c0}.progress-section .progress-slider:hover::-moz-range-thumb{background:#1565c0}.volume-controls{display:flex;align-items:center;gap:8px;justify-content:center}.volume-controls .volume-slider{width:100px;height:6px;-webkit-appearance:none;appearance:none;background:#e0e0e0;outline:none;border-radius:3px}.volume-controls .volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.volume-controls .volume-slider::-moz-range-thumb{width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.volume-controls .volume-slider:hover::-webkit-slider-thumb{background:#1565c0}.volume-controls .volume-slider:hover::-moz-range-thumb{background:#1565c0}.no-file-message{text-align:center;padding:40px 20px;color:#666}.no-file-message mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:16px;color:#ccc}.no-file-message h5{margin:0;color:#999}@media screen and (max-width: 768px){.audio-view{padding:0 12px}.audio-player-container{padding:16px}.control-buttons{flex-wrap:wrap;gap:4px}.progress-section{flex-direction:column;gap:8px}.progress-section .progress-slider{width:100%}.volume-controls{justify-content:flex-start}.volume-controls .volume-slider{width:80px}}input[type=range].progress-slider:disabled,input[type=range].volume-slider:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: AudioPlayerTagViewComponent, isStandalone: true, selector: "croco-html-audio-player-tag-view", inputs: { data: "data" }, viewQueries: [{ propertyName: "audioPlayer", first: true, predicate: ["audioPlayer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"audio-view\">\n  @if (hasAudioError) {\n    <div class=\"error-block\">\n      <mat-icon>error</mat-icon>\n      <span>{{ errorMessage }}</span>\n    </div>\n  }\n\n  @if (hasFileId() && !hasAudioError) {\n    <div class=\"audio-player-container\">\n      <audio\n        #audioPlayer\n        [src]=\"audioSrc\"\n        (error)=\"onErrorHandler()\"\n        (loadedmetadata)=\"onLoadedMetadata()\"\n        (timeupdate)=\"onTimeUpdate()\"\n        (ended)=\"onEnded()\"\n        (canplay)=\"onCanPlay()\"\n        preload=\"metadata\">\n      </audio>\n\n      @if (isLoading) {\n        <div class=\"loading-indicator\">\n          <div class=\"progress-bar\">\n            <div class=\"progress-bar-fill\"></div>\n          </div>\n          <span>\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0430\u0443\u0434\u0438\u043E...</span>\n        </div>\n      }\n\n      <div class=\"file-info\">\n        <mat-icon>audiotrack</mat-icon>\n        <span class=\"file-name\">{{ title }}</span>\n      </div>\n\n      <div class=\"player-controls\">\n        <div class=\"control-buttons\">\n          <button (click)=\"restart()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>replay</mat-icon>\n          </button>\n\n          <button (click)=\"rewind()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>replay_10</mat-icon>\n          </button>\n\n          <button\n            (click)=\"togglePlayPause()\"\n            [disabled]=\"!hasFileId() || isLoading\"\n            class=\"play-pause-btn\" mat-icon-button>\n            <mat-icon>{{ isPlaying ? 'pause' : 'play_arrow' }}</mat-icon>\n          </button>\n\n          <button (click)=\"forward()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>forward_10</mat-icon>\n          </button>\n        </div>\n\n        <div class=\"progress-section\">\n          <span class=\"time-display\">{{ formatTime(currentTime) }}</span>\n\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"getProgress()\"\n            (input)=\"onSeekChange($event)\"\n            [disabled]=\"!hasFileId() || duration === 0\"\n            class=\"progress-slider\">\n\n          <span class=\"time-display\">{{ formatTime(duration) }}</span>\n        </div>\n\n        <div class=\"volume-controls\">\n          <button (click)=\"toggleMute()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>{{ isMuted ? 'volume_off' : 'volume_up' }}</mat-icon>\n          </button>\n\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"volume * 100\"\n            (input)=\"onVolumeChange($event)\"\n            [disabled]=\"!hasFileId()\"\n            class=\"volume-slider\">\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- \u0421\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435 \u043E\u0431 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 \u0444\u0430\u0439\u043B\u0430 -->\n  @if (!hasFileId()) {\n    <div class=\"no-file-message\">\n      <mat-icon>music_off</mat-icon>\n      <h5>\u0410\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D</h5>\n    </div>\n  }\n</div>\n", styles: [".audio-view{width:100%;max-width:500px;margin:0 auto}.error-block{display:flex;align-items:center;gap:8px;background-color:#ffebee;color:#c62828;padding:12px;border-radius:8px;border:1px solid #ffcdd2;margin-bottom:16px}.error-block mat-icon{color:#c62828}.audio-player-container{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 8px #0000001a;margin-bottom:16px}.loading-indicator{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;color:#666}.loading-indicator .progress-bar{width:200px;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden}.loading-indicator .progress-bar .progress-bar-fill{height:100%;background-color:#1976d2;animation:loading 1.5s ease-in-out infinite}@keyframes loading{0%{transform:translate(-100%)}50%{transform:translate(0)}to{transform:translate(100%)}}.file-info{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:12px;background:#f5f5f5;border-radius:8px}.file-info mat-icon{color:#1976d2}.file-info .file-name{font-weight:500;flex:1}.player-controls{display:flex;flex-direction:column;gap:16px}.control-buttons{display:flex;justify-content:center;align-items:center;gap:8px}.control-buttons .play-pause-btn{background-color:#1976d2;color:#fff;width:48px;height:48px}.control-buttons .play-pause-btn:hover{background-color:#1565c0}.control-buttons .play-pause-btn mat-icon{font-size:24px}.control-buttons mat-icon-button{width:40px;height:40px}.control-buttons mat-icon-button:disabled{color:#ccc}.progress-section{display:flex;align-items:center;gap:12px}.progress-section .time-display{font-family:Roboto Mono,monospace;font-size:14px;color:#666;min-width:40px;text-align:center}.progress-section .progress-slider{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:#e0e0e0;outline:none;border-radius:3px}.progress-section .progress-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.progress-section .progress-slider::-moz-range-thumb{width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.progress-section .progress-slider:hover::-webkit-slider-thumb{background:#1565c0}.progress-section .progress-slider:hover::-moz-range-thumb{background:#1565c0}.volume-controls{display:flex;align-items:center;gap:8px;justify-content:center}.volume-controls .volume-slider{width:100px;height:6px;-webkit-appearance:none;appearance:none;background:#e0e0e0;outline:none;border-radius:3px}.volume-controls .volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.volume-controls .volume-slider::-moz-range-thumb{width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.volume-controls .volume-slider:hover::-webkit-slider-thumb{background:#1565c0}.volume-controls .volume-slider:hover::-moz-range-thumb{background:#1565c0}.no-file-message{text-align:center;padding:40px 20px;color:#666}.no-file-message mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:16px;color:#ccc}.no-file-message h5{margin:0;color:#999}@media screen and (max-width: 768px){.audio-view{padding:0 12px}.audio-player-container{padding:16px}.control-buttons{flex-wrap:wrap;gap:4px}.progress-section{flex-direction:column;gap:8px}.progress-section .progress-slider{width:100%}.volume-controls{justify-content:flex-start}.volume-controls .volume-slider{width:80px}}input[type=range].progress-slider:disabled,input[type=range].volume-slider:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AudioPlayerTagViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'croco-html-audio-player-tag-view', standalone: true, imports: [
                         MatIcon,
                         MatIconButton
-                    ], template: "<div class=\"audio-view\">\n  @if (hasAudioError) {\n    <div class=\"error-block\">\n      <mat-icon>error</mat-icon>\n      <span>{{ errorMessage }}</span>\n    </div>\n  }\n\n  @if (hasFileId() && !hasAudioError) {\n    <div class=\"audio-player-container\">\n      <audio\n        #audioPlayer\n        [src]=\"audioSrc\"\n        (error)=\"onErrorHandler()\"\n        (loadedmetadata)=\"onLoadedMetadata()\"\n        (timeupdate)=\"onTimeUpdate()\"\n        (ended)=\"onEnded()\"\n        (canplay)=\"onCanPlay()\"\n        preload=\"metadata\">\n      </audio>\n\n      @if (isLoading) {\n        <div class=\"loading-indicator\">\n          <div class=\"progress-bar\">\n            <div class=\"progress-bar-fill\"></div>\n          </div>\n          <span>\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0430\u0443\u0434\u0438\u043E...</span>\n        </div>\n      }\n\n      <div class=\"file-info\">\n        <mat-icon>audiotrack</mat-icon>\n        <span class=\"file-name\">\u0410\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B</span>\n      </div>\n\n      <div class=\"player-controls\">\n        <div class=\"control-buttons\">\n          <button (click)=\"restart()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>replay</mat-icon>\n          </button>\n\n          <button (click)=\"rewind()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>replay_10</mat-icon>\n          </button>\n\n          <button\n            (click)=\"togglePlayPause()\"\n            [disabled]=\"!hasFileId() || isLoading\"\n            class=\"play-pause-btn\" mat-icon-button>\n            <mat-icon>{{ isPlaying ? 'pause' : 'play_arrow' }}</mat-icon>\n          </button>\n\n          <button (click)=\"forward()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>forward_10</mat-icon>\n          </button>\n        </div>\n\n        <div class=\"progress-section\">\n          <span class=\"time-display\">{{ formatTime(currentTime) }}</span>\n\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"getProgress()\"\n            (input)=\"onSeekChange($event)\"\n            [disabled]=\"!hasFileId() || duration === 0\"\n            class=\"progress-slider\">\n\n          <span class=\"time-display\">{{ formatTime(duration) }}</span>\n        </div>\n\n        <div class=\"volume-controls\">\n          <button (click)=\"toggleMute()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>{{ isMuted ? 'volume_off' : 'volume_up' }}</mat-icon>\n          </button>\n\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"volume * 100\"\n            (input)=\"onVolumeChange($event)\"\n            [disabled]=\"!hasFileId()\"\n            class=\"volume-slider\">\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- \u0421\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435 \u043E\u0431 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 \u0444\u0430\u0439\u043B\u0430 -->\n  @if (!hasFileId()) {\n    <div class=\"no-file-message\">\n      <mat-icon>music_off</mat-icon>\n      <h5>\u0410\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D</h5>\n    </div>\n  }\n</div>\n", styles: [".audio-view{width:100%;max-width:500px;margin:0 auto}.error-block{display:flex;align-items:center;gap:8px;background-color:#ffebee;color:#c62828;padding:12px;border-radius:8px;border:1px solid #ffcdd2;margin-bottom:16px}.error-block mat-icon{color:#c62828}.audio-player-container{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 8px #0000001a;margin-bottom:16px}.loading-indicator{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;color:#666}.loading-indicator .progress-bar{width:200px;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden}.loading-indicator .progress-bar .progress-bar-fill{height:100%;background-color:#1976d2;animation:loading 1.5s ease-in-out infinite}@keyframes loading{0%{transform:translate(-100%)}50%{transform:translate(0)}to{transform:translate(100%)}}.file-info{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:12px;background:#f5f5f5;border-radius:8px}.file-info mat-icon{color:#1976d2}.file-info .file-name{font-weight:500;flex:1}.player-controls{display:flex;flex-direction:column;gap:16px}.control-buttons{display:flex;justify-content:center;align-items:center;gap:8px}.control-buttons .play-pause-btn{background-color:#1976d2;color:#fff;width:48px;height:48px}.control-buttons .play-pause-btn:hover{background-color:#1565c0}.control-buttons .play-pause-btn mat-icon{font-size:24px}.control-buttons mat-icon-button{width:40px;height:40px}.control-buttons mat-icon-button:disabled{color:#ccc}.progress-section{display:flex;align-items:center;gap:12px}.progress-section .time-display{font-family:Roboto Mono,monospace;font-size:14px;color:#666;min-width:40px;text-align:center}.progress-section .progress-slider{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:#e0e0e0;outline:none;border-radius:3px}.progress-section .progress-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.progress-section .progress-slider::-moz-range-thumb{width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.progress-section .progress-slider:hover::-webkit-slider-thumb{background:#1565c0}.progress-section .progress-slider:hover::-moz-range-thumb{background:#1565c0}.volume-controls{display:flex;align-items:center;gap:8px;justify-content:center}.volume-controls .volume-slider{width:100px;height:6px;-webkit-appearance:none;appearance:none;background:#e0e0e0;outline:none;border-radius:3px}.volume-controls .volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.volume-controls .volume-slider::-moz-range-thumb{width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.volume-controls .volume-slider:hover::-webkit-slider-thumb{background:#1565c0}.volume-controls .volume-slider:hover::-moz-range-thumb{background:#1565c0}.no-file-message{text-align:center;padding:40px 20px;color:#666}.no-file-message mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:16px;color:#ccc}.no-file-message h5{margin:0;color:#999}@media screen and (max-width: 768px){.audio-view{padding:0 12px}.audio-player-container{padding:16px}.control-buttons{flex-wrap:wrap;gap:4px}.progress-section{flex-direction:column;gap:8px}.progress-section .progress-slider{width:100%}.volume-controls{justify-content:flex-start}.volume-controls .volume-slider{width:80px}}input[type=range].progress-slider:disabled,input[type=range].volume-slider:disabled{opacity:.5;cursor:not-allowed}\n"] }]
+                    ], template: "<div class=\"audio-view\">\n  @if (hasAudioError) {\n    <div class=\"error-block\">\n      <mat-icon>error</mat-icon>\n      <span>{{ errorMessage }}</span>\n    </div>\n  }\n\n  @if (hasFileId() && !hasAudioError) {\n    <div class=\"audio-player-container\">\n      <audio\n        #audioPlayer\n        [src]=\"audioSrc\"\n        (error)=\"onErrorHandler()\"\n        (loadedmetadata)=\"onLoadedMetadata()\"\n        (timeupdate)=\"onTimeUpdate()\"\n        (ended)=\"onEnded()\"\n        (canplay)=\"onCanPlay()\"\n        preload=\"metadata\">\n      </audio>\n\n      @if (isLoading) {\n        <div class=\"loading-indicator\">\n          <div class=\"progress-bar\">\n            <div class=\"progress-bar-fill\"></div>\n          </div>\n          <span>\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0430\u0443\u0434\u0438\u043E...</span>\n        </div>\n      }\n\n      <div class=\"file-info\">\n        <mat-icon>audiotrack</mat-icon>\n        <span class=\"file-name\">{{ title }}</span>\n      </div>\n\n      <div class=\"player-controls\">\n        <div class=\"control-buttons\">\n          <button (click)=\"restart()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>replay</mat-icon>\n          </button>\n\n          <button (click)=\"rewind()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>replay_10</mat-icon>\n          </button>\n\n          <button\n            (click)=\"togglePlayPause()\"\n            [disabled]=\"!hasFileId() || isLoading\"\n            class=\"play-pause-btn\" mat-icon-button>\n            <mat-icon>{{ isPlaying ? 'pause' : 'play_arrow' }}</mat-icon>\n          </button>\n\n          <button (click)=\"forward()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>forward_10</mat-icon>\n          </button>\n        </div>\n\n        <div class=\"progress-section\">\n          <span class=\"time-display\">{{ formatTime(currentTime) }}</span>\n\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"getProgress()\"\n            (input)=\"onSeekChange($event)\"\n            [disabled]=\"!hasFileId() || duration === 0\"\n            class=\"progress-slider\">\n\n          <span class=\"time-display\">{{ formatTime(duration) }}</span>\n        </div>\n\n        <div class=\"volume-controls\">\n          <button (click)=\"toggleMute()\" [disabled]=\"!hasFileId()\" mat-icon-button>\n            <mat-icon>{{ isMuted ? 'volume_off' : 'volume_up' }}</mat-icon>\n          </button>\n\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"volume * 100\"\n            (input)=\"onVolumeChange($event)\"\n            [disabled]=\"!hasFileId()\"\n            class=\"volume-slider\">\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- \u0421\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435 \u043E\u0431 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 \u0444\u0430\u0439\u043B\u0430 -->\n  @if (!hasFileId()) {\n    <div class=\"no-file-message\">\n      <mat-icon>music_off</mat-icon>\n      <h5>\u0410\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D</h5>\n    </div>\n  }\n</div>\n", styles: [".audio-view{width:100%;max-width:500px;margin:0 auto}.error-block{display:flex;align-items:center;gap:8px;background-color:#ffebee;color:#c62828;padding:12px;border-radius:8px;border:1px solid #ffcdd2;margin-bottom:16px}.error-block mat-icon{color:#c62828}.audio-player-container{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 8px #0000001a;margin-bottom:16px}.loading-indicator{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;color:#666}.loading-indicator .progress-bar{width:200px;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden}.loading-indicator .progress-bar .progress-bar-fill{height:100%;background-color:#1976d2;animation:loading 1.5s ease-in-out infinite}@keyframes loading{0%{transform:translate(-100%)}50%{transform:translate(0)}to{transform:translate(100%)}}.file-info{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:12px;background:#f5f5f5;border-radius:8px}.file-info mat-icon{color:#1976d2}.file-info .file-name{font-weight:500;flex:1}.player-controls{display:flex;flex-direction:column;gap:16px}.control-buttons{display:flex;justify-content:center;align-items:center;gap:8px}.control-buttons .play-pause-btn{background-color:#1976d2;color:#fff;width:48px;height:48px}.control-buttons .play-pause-btn:hover{background-color:#1565c0}.control-buttons .play-pause-btn mat-icon{font-size:24px}.control-buttons mat-icon-button{width:40px;height:40px}.control-buttons mat-icon-button:disabled{color:#ccc}.progress-section{display:flex;align-items:center;gap:12px}.progress-section .time-display{font-family:Roboto Mono,monospace;font-size:14px;color:#666;min-width:40px;text-align:center}.progress-section .progress-slider{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:#e0e0e0;outline:none;border-radius:3px}.progress-section .progress-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.progress-section .progress-slider::-moz-range-thumb{width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.progress-section .progress-slider:hover::-webkit-slider-thumb{background:#1565c0}.progress-section .progress-slider:hover::-moz-range-thumb{background:#1565c0}.volume-controls{display:flex;align-items:center;gap:8px;justify-content:center}.volume-controls .volume-slider{width:100px;height:6px;-webkit-appearance:none;appearance:none;background:#e0e0e0;outline:none;border-radius:3px}.volume-controls .volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.volume-controls .volume-slider::-moz-range-thumb{width:20px;height:20px;background:#1976d2;border-radius:50%;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.volume-controls .volume-slider:hover::-webkit-slider-thumb{background:#1565c0}.volume-controls .volume-slider:hover::-moz-range-thumb{background:#1565c0}.no-file-message{text-align:center;padding:40px 20px;color:#666}.no-file-message mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:16px;color:#ccc}.no-file-message h5{margin:0;color:#999}@media screen and (max-width: 768px){.audio-view{padding:0 12px}.audio-player-container{padding:16px}.control-buttons{flex-wrap:wrap;gap:4px}.progress-section{flex-direction:column;gap:8px}.progress-section .progress-slider{width:100%}.volume-controls{justify-content:flex-start}.volume-controls .volume-slider{width:80px}}input[type=range].progress-slider:disabled,input[type=range].volume-slider:disabled{opacity:.5;cursor:not-allowed}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [CrocoHtmlOptionsToken]
@@ -2111,11 +2133,11 @@ class XmlTagHtmlViewComponent {
         this.html = "";
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: XmlTagHtmlViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: XmlTagHtmlViewComponent, isStandalone: true, selector: "croco-html-xml-tag-html-view", inputs: { html: "html" }, ngImport: i0, template: "<div class=\"col\" [innerHTML]=\"html\">\n</div>" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: XmlTagHtmlViewComponent, isStandalone: true, selector: "croco-html-xml-tag-html-view", inputs: { html: "html" }, ngImport: i0, template: "<div class=\"col\" [innerHTML]=\"html\">\n</div>", styles: [".col{width:100%;overflow-x:auto}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: XmlTagHtmlViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-xml-tag-html-view', standalone: true, template: "<div class=\"col\" [innerHTML]=\"html\">\n</div>" }]
+            args: [{ selector: 'croco-html-xml-tag-html-view', standalone: true, template: "<div class=\"col\" [innerHTML]=\"html\">\n</div>", styles: [".col{width:100%;overflow-x:auto}\n"] }]
         }], ctorParameters: () => [], propDecorators: { html: [{
                 type: Input
             }] } });
@@ -2235,6 +2257,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class FileImageTagViewComponent {
     set item(item) {
         let data = item.data;
+        this.imageData = data;
         this.imageSrc = data.src;
         this.requests = this.getMediaRequests(data.screenMediaRequest);
     }
@@ -2242,6 +2265,7 @@ class FileImageTagViewComponent {
         this.screenWidthService = screenWidthService;
         this._options = _options;
         this.imageSrc = "";
+        this.imageData = null;
         this.requests = [];
         this.unsubscribe = new Subject();
         this.imageMaxHeight = null;
@@ -2267,14 +2291,19 @@ class FileImageTagViewComponent {
         this.unsubscribe.next();
         this.unsubscribe.complete();
     }
+    onImageClick() {
+        if (this.imageData && this._options.imageOptions.onImageClick) {
+            this._options.imageOptions.onImageClick(this.imageData);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FileImageTagViewComponent, deps: [{ token: ScreenWidthService }, { token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FileImageTagViewComponent, isStandalone: true, selector: "croco-html-file-image-tag-view", inputs: { item: "item" }, ngImport: i0, template: "<img\n  [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%', 'max-width': imageMaxWidth ? imageMaxWidth + 'px' : '100%', }\"\n  class=\"mx-auto d-block img-fluid\"\n  [src]=\"imageSrc\"\n  alt=\"\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043E\"\n/>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FileImageTagViewComponent, isStandalone: true, selector: "croco-html-file-image-tag-view", inputs: { item: "item" }, ngImport: i0, template: "<img\n  [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%', 'max-width': imageMaxWidth ? imageMaxWidth + 'px' : '100%', }\"\n  class=\"mx-auto d-block img-fluid\"\n  [src]=\"imageSrc\"\n  alt=\"\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043E\"\n  (click)=\"onImageClick()\"\n  style=\"cursor: pointer;\"\n/>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FileImageTagViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'croco-html-file-image-tag-view', imports: [
                         NgStyle
-                    ], standalone: true, template: "<img\n  [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%', 'max-width': imageMaxWidth ? imageMaxWidth + 'px' : '100%', }\"\n  class=\"mx-auto d-block img-fluid\"\n  [src]=\"imageSrc\"\n  alt=\"\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043E\"\n/>\n" }]
+                    ], standalone: true, template: "<img\n  [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%', 'max-width': imageMaxWidth ? imageMaxWidth + 'px' : '100%', }\"\n  class=\"mx-auto d-block img-fluid\"\n  [src]=\"imageSrc\"\n  alt=\"\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043E\"\n  (click)=\"onImageClick()\"\n  style=\"cursor: pointer;\"\n/>\n" }]
         }], ctorParameters: () => [{ type: ScreenWidthService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [CrocoHtmlOptionsToken]
@@ -3342,7 +3371,7 @@ class VisualEditorComponent {
         return `align-${type}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VisualEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: VisualEditorComponent, isStandalone: true, selector: "croco-visual-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged", rendered: "rendered" }, viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }], ngImport: i0, template: "@if (isLoading) {\n  <div>\n    <div>\n      <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\n      <div style=\"text-align: center;\">{{loadingText}}</div>\n    </div>\n    <div style=\"height: 10px;\"></div>\n  </div>\n}\n<div [hidden]=\"isLoading\">\n  <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n    <mat-card-content>\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-12\">\n          <div class=\"w-100\" style=\"margin-bottom: 22px\">\n            <div class=\"tags\">\n              @for (tag of tags; track tag.displayValue) {\n                <div class=\"tag-item\"\n                     (click)=\"selectTag(tag)\"\n                     [class.active]=\"selectedValue === tag.tag\"\n                >\n                  <div class=\"tag-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: tag.tag}\">\n                    </ng-container>\n                  </div>\n                  <div class=\"tag-text\">{{tag.displayValue}}</div>\n                </div>\n              }\n\n              @if (useCustomWidgetsButton) {\n                <div class=\"tag-item\"\n                     (click)=\"customWidgetsClickHandler()\"\n                >\n                  <div class=\"tag-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: 'custom-widget'}\">\n                    </ng-container>\n                  </div>\n                  <div class=\"tag-text\">\u0414\u0440\u0443\u0433\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044B</div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n        @if (selectedValue === ExternalVideoTagDataConsts.TagName) {\n          <div class=\"col-12\">\n            <mat-form-field class=\"w-100\" appearance=\"outline\">\n              <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0438\u0434\u0435\u043E\u043F\u043B\u0435\u0435\u0440</mat-label>\n              <mat-select [(ngModel)]=\"selectedVideoPlayer\">\n                @for (videoPlayer of videoPlayers; track videoPlayer.type) {\n                  <mat-option [value]=\"videoPlayer.type\">\n                    {{videoPlayer.displayValue}}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </div>\n          @if (selectedVideoPlayer === ExternalVideoSupportedTypes.Code) {\n            <div class=\"col-12\">\n              <mat-form-field class=\"w-100\" appearance=\"outline\">\n                <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n                <input\n                  matInput\n                  placeholder=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\"\n                  [(ngModel)]=\"htmlRaw\"\n                >\n              </mat-form-field>\n            </div>\n          }\n        }\n        @if (selectedValue === HtmlRawTagDataConsts.TagName) {\n          <div class=\"col-12\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n                <textarea\n                  #autosize=\"cdkTextareaAutosize\"\n                  matInput\n                  cdkTextareaAutosize\n                  cdkAutosizeMinRows=\"1\"\n                  cdkAutosizeMaxRows=\"5\"\n                  placeholder=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\"\n                  #textArea\n                  [(ngModel)]=\"htmlRaw\"\n                ></textarea>\n            </mat-form-field>\n          </div>\n        }\n        @if (selectedValue === 'text') {\n          <div style=\"display: flex; justify-content: space-between; flex-wrap: wrap\">\n            <div style=\"margin-bottom: 22px; overflow-x: auto;\">\n              <mat-button-toggle-group\n                [(ngModel)]=\"textTag\"\n                [hideSingleSelectionIndicator]=\"true\"\n              >\n                @for (option of textTagOptions; track option) {\n                  <mat-button-toggle value=\"{{ option.tag }}\">\n                    {{ option.displayValue }}\n                  </mat-button-toggle>\n                }\n              </mat-button-toggle-group>\n            </div>\n\n            <div style=\"margin-bottom: 22px\">\n              <mat-button-toggle-group\n                [(ngModel)]=\"alignment\"\n                [hideSingleSelectionIndicator]=\"true\"\n              >\n                @for (option of alignmentOptions; track option) {\n                  <mat-button-toggle value=\"{{ option.value }}\">\n                    <span class=\"text-align-icon\">\n                      <ng-container [ngTemplateOutlet]=\"textAlignToggleIcons\"\n                                    [ngTemplateOutletContext]=\"{icon: option.value}\">\n                      </ng-container>\n                    </span>\n                  </mat-button-toggle>\n                }\n              </mat-button-toggle-group>\n            </div>\n          </div>\n          <mat-form-field class=\"w-100\">\n            <mat-label>\u0422\u0435\u043A\u0441\u0442</mat-label>\n            <textarea\n              #autosize=\"cdkTextareaAutosize\"\n              matInput\n              cdkTextareaAutosize\n              cdkAutosizeMinRows=\"1\"\n              cdkAutosizeMaxRows=\"5\"\n              placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n              #textArea\n              [(ngModel)]=\"text\"\n            ></textarea>\n          </mat-form-field>\n        }\n\n        <div class=\"col-12\">\n          <button (click)=\"addTagClickHandler()\" class=\"w-100\" mat-stroked-button>\n            \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433\n          </button>\n        </div>\n      </div>\n    </mat-card-content>\n  </mat-card>\n\n  <div style=\"height: 10px;\">\n  </div>\n</div>\n<div [hidden]=\"isLoading\">\n  <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n    <mat-card-content>\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-12\">\n          <croco-html-add-files-btn (filesTagsReady)=\"filesTagsReadyHandler($event)\"\n            (postFilesStarted)=\"postFilesStartedEventHandler()\" class=\"w-100\">\n          </croco-html-add-files-btn>\n        </div>\n      </div>\n    </mat-card-content>\n  </mat-card>\n\n  <div style=\"height: 10px;\">\n  </div>\n</div>\n<div [hidden]=\"isLoading\">\n  <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    @for (tag of bodyTags; track tag; let i = $index) {\n      <div cdkDrag>\n        <mat-card style=\"margin: 2px;\" class=\"mat-card special\">\n          <mat-card-content>\n            <div class=\"d-flex justify-content-between\">\n              <div class=\"example-handle\" cdkDragHandle>\n                <svg width=\"24\" height=\"24\" class=\"move-icon\">\n                  <use [attr.xlink:href]=\"'move-icon' | spriteIconPath\"></use>\n                </svg>\n              </div>\n              <div>\n                <div class=\"badge\" [matTooltip]=\"tag.tagDescription.displayValue\">\n                  <span class=\"text-align-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: tag.tagDescription.tag}\">\n                  </ng-container>\n                  </span>\n                </div>\n              </div>\n            </div>\n            <div style=\"height: 15px;\"></div>\n            <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagChangedHandler($event, i)\"\n              (onTagRemoved)=\"onTagRemovedHandler(i)\">\n            </croco-html-main-editor-block>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template #textAlignToggleIcons let-icon=\"icon\">\n  <svg width=\"20\" height=\"20\">\n    <use [attr.xlink:href]=\"setAlignButton(icon) | spriteIconPath\"></use>\n  </svg>\n</ng-template>\n\n<ng-template #tagButtonIcons let-icon=\"icon\">\n  @if (isDefinedCustomWidget(icon)) {\n    <croco-html-custom-widget-icon [tagName]=\"icon\"></croco-html-custom-widget-icon>\n  }\n  @else if (icon.indexOf('h') === 0 && icon.length === 2) {\n    {{icon.toUpperCase()}}\n  }\n  @else {\n    <svg width=\"20\" height=\"20\">\n      <use [attr.xlink:href]=\"setTagButton(icon) | spriteIconPath\"></use>\n    </svg>\n  }\n</ng-template>\n", styles: [":host{--mat-standard-button-toggle-selected-state-background-color: #323E8B;--mat-standard-button-toggle-text-color: #323E8B;--mat-standard-button-toggle-selected-state-text-color: white;--mat-standard-button-toggle-height: 36px;--mat-standard-button-toggle-divider-color: #323E8B;--mdc-outlined-button-label-text-weight: 400;--mdc-outlined-button-label-text-color: #333333 !important;--mdc-outlined-button-container-shape: 30px;--mdc-outlined-button-outline-width: 2px;--mdc-outlined-button-container-height: 44px}:host ::ng-deep .mat-button-toggle-appearance-standard span.mat-button-toggle-label-content{padding:0 8px;min-width:36px}.text-align-icon,.mat-button-toggle .text-align-icon{color:#323e8b}.mat-button-toggle:hover,.mat-button-toggle:hover .text-align-icon{color:#747ebf}.mat-button-toggle-checked .text-align-icon{color:#fff}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.badge{width:44px;height:44px;border-radius:50%;border:1px solid #323E8B;display:flex;align-items:center;justify-content:center;color:#323e8b}.mat-card.special{border:1px solid #747EBF;border-radius:8px;box-shadow:none;margin:2px 2px 10px}.tags{display:flex;gap:10px;flex-wrap:wrap}@media (max-width: 768px){.tags{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;background-color:#f5f5f5;border-radius:12px}}@media (max-width: 575px){.tags{grid-template-columns:repeat(2,1fr);gap:10px;padding:12px}}.tag-item{display:flex;align-items:center;gap:5px;cursor:pointer;padding:10px 20px;border:1px solid #323E8B;border-radius:30px;background-color:#fff;color:#23262a;transition:.2s ease-in-out}@media (max-width: 768px){.tag-item{flex-direction:column;justify-content:center;padding:16px 8px;border-radius:12px;min-height:80px;gap:8px}}.tag-icon{color:#323e8b;display:flex;align-items:center;justify-content:center}.tag-icon svg{width:20px;height:20px}@media (max-width: 768px){.tag-icon{font-size:24px;margin-bottom:0}.tag-icon svg{width:24px;height:24px}}.tag-text{color:#323e8b}@media (max-width: 768px){.tag-text{font-size:12px;font-weight:500;text-align:center;line-height:1.2}}.text-align-icon{color:#323e8b}.tag-item.active{background-color:#323e8b;color:#fff}.tag-item.active .tag-icon,.tag-item.active .tag-text{color:#fff}.tag-item.active svg{color:#fff}.tag-item:hover{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:hover .tag-icon,.tag-item:hover .tag-text{color:#747ebf}.tag-item:hover svg{color:#747ebf}@media (max-width: 768px){.tag-item:hover{color:inherit;box-shadow:none}.tag-item:hover svg{color:inherit}.tag-item:active{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:active svg{color:#747ebf}}.move-icon:hover{cursor:pointer;opacity:.7}.cdk-drag.cdk-drag-placeholder,.cdk-drag-preview{opacity:.5;transition:opacity .2s}.example-handle{color:#323e8b}\n"], dependencies: [{ kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: AddFilesBtnComponent, selector: "croco-html-add-files-btn", outputs: ["postFilesStarted", "filesTagsReady"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MainEditorBlockComponent, selector: "croco-html-main-editor-block", inputs: ["tag"], outputs: ["onTagSaved", "onTagRemoved"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: SpriteIconPathPipe, name: "spriteIconPath" }, { kind: "component", type: CustomWidgetIconComponent, selector: "croco-html-custom-widget-icon", inputs: ["tagName"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: VisualEditorComponent, isStandalone: true, selector: "croco-visual-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged", rendered: "rendered" }, viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }], ngImport: i0, template: "@if (isLoading) {\n  <div>\n    <div>\n      <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\n      <div style=\"text-align: center;\">{{loadingText}}</div>\n    </div>\n    <div style=\"height: 10px;\"></div>\n  </div>\n}\n<div [hidden]=\"isLoading\">\n  <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    @for (tag of bodyTags; track tag; let i = $index) {\n      <div cdkDrag>\n        <mat-card style=\"margin: 2px;\" class=\"mat-card special\">\n          <mat-card-content>\n            <div class=\"d-flex justify-content-between\">\n              <div class=\"example-handle\" cdkDragHandle>\n                <svg width=\"24\" height=\"24\" class=\"move-icon\">\n                  <use [attr.xlink:href]=\"'move-icon' | spriteIconPath\"></use>\n                </svg>\n              </div>\n              <div>\n                <div class=\"badge\" [matTooltip]=\"tag.tagDescription.displayValue\">\n                  <span class=\"text-align-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: tag.tagDescription.tag}\">\n                  </ng-container>\n                  </span>\n                </div>\n              </div>\n            </div>\n            <div style=\"height: 15px;\"></div>\n            <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagChangedHandler($event, i)\"\n              (onTagRemoved)=\"onTagRemovedHandler(i)\">\n            </croco-html-main-editor-block>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n  </div>\n</div>\n<div style=\"height: 10px;\"></div>\n<div [hidden]=\"isLoading\">\n  <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n    <mat-card-content>\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-12\">\n          <div class=\"w-100\" style=\"margin-bottom: 22px\">\n            <div class=\"tags\">\n              @for (tag of tags; track tag.displayValue) {\n                <div class=\"tag-item\"\n                     (click)=\"selectTag(tag)\"\n                     [class.active]=\"selectedValue === tag.tag\"\n                >\n                  <div class=\"tag-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: tag.tag}\">\n                    </ng-container>\n                  </div>\n                  <div class=\"tag-text\">{{tag.displayValue}}</div>\n                </div>\n              }\n\n              @if (useCustomWidgetsButton) {\n                <div class=\"tag-item\"\n                     (click)=\"customWidgetsClickHandler()\"\n                >\n                  <div class=\"tag-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: 'custom-widget'}\">\n                    </ng-container>\n                  </div>\n                  <div class=\"tag-text\">\u0414\u0440\u0443\u0433\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044B</div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n        @if (selectedValue === ExternalVideoTagDataConsts.TagName) {\n          <div class=\"col-12\">\n            <mat-form-field class=\"w-100\" appearance=\"outline\">\n              <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0438\u0434\u0435\u043E\u043F\u043B\u0435\u0435\u0440</mat-label>\n              <mat-select [(ngModel)]=\"selectedVideoPlayer\">\n                @for (videoPlayer of videoPlayers; track videoPlayer.type) {\n                  <mat-option [value]=\"videoPlayer.type\">\n                    {{videoPlayer.displayValue}}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </div>\n          @if (selectedVideoPlayer === ExternalVideoSupportedTypes.Code) {\n            <div class=\"col-12\">\n              <mat-form-field class=\"w-100\" appearance=\"outline\">\n                <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n                <input\n                  matInput\n                  placeholder=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\"\n                  [(ngModel)]=\"htmlRaw\"\n                >\n              </mat-form-field>\n            </div>\n          }\n        }\n        @if (selectedValue === HtmlRawTagDataConsts.TagName) {\n          <div class=\"col-12\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n              <textarea\n                #autosize=\"cdkTextareaAutosize\"\n                matInput\n                cdkTextareaAutosize\n                cdkAutosizeMinRows=\"1\"\n                cdkAutosizeMaxRows=\"5\"\n                placeholder=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\"\n                #textArea\n                [(ngModel)]=\"htmlRaw\"\n              ></textarea>\n            </mat-form-field>\n          </div>\n        }\n        @if (selectedValue === 'text') {\n          <div style=\"display: flex; justify-content: space-between; flex-wrap: wrap\">\n            <div style=\"margin-bottom: 22px; overflow-x: auto;\">\n              <mat-button-toggle-group\n                [(ngModel)]=\"textTag\"\n                [hideSingleSelectionIndicator]=\"true\"\n              >\n                @for (option of textTagOptions; track option) {\n                  <mat-button-toggle value=\"{{ option.tag }}\">\n                    {{ option.displayValue }}\n                  </mat-button-toggle>\n                }\n              </mat-button-toggle-group>\n            </div>\n\n            <div style=\"margin-bottom: 22px\">\n              <mat-button-toggle-group\n                [(ngModel)]=\"alignment\"\n                [hideSingleSelectionIndicator]=\"true\"\n              >\n                @for (option of alignmentOptions; track option) {\n                  <mat-button-toggle value=\"{{ option.value }}\">\n                    <span class=\"text-align-icon\">\n                      <ng-container [ngTemplateOutlet]=\"textAlignToggleIcons\"\n                                    [ngTemplateOutletContext]=\"{icon: option.value}\">\n                      </ng-container>\n                    </span>\n                  </mat-button-toggle>\n                }\n              </mat-button-toggle-group>\n            </div>\n          </div>\n          <mat-form-field class=\"w-100\">\n            <mat-label>\u0422\u0435\u043A\u0441\u0442</mat-label>\n            <textarea\n              #autosize=\"cdkTextareaAutosize\"\n              matInput\n              cdkTextareaAutosize\n              cdkAutosizeMinRows=\"1\"\n              cdkAutosizeMaxRows=\"5\"\n              placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n              #textArea\n              [(ngModel)]=\"text\"\n            ></textarea>\n          </mat-form-field>\n        }\n\n        <div class=\"col-12\">\n          <button (click)=\"addTagClickHandler()\" class=\"w-100\" mat-stroked-button>\n            \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C\n          </button>\n        </div>\n      </div>\n    </mat-card-content>\n  </mat-card>\n\n  <div style=\"height: 10px;\"></div>\n</div>\n<div [hidden]=\"isLoading\">\n  <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n    <mat-card-content>\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-12\">\n          <croco-html-add-files-btn (filesTagsReady)=\"filesTagsReadyHandler($event)\"\n                                    (postFilesStarted)=\"postFilesStartedEventHandler()\" class=\"w-100\">\n          </croco-html-add-files-btn>\n        </div>\n      </div>\n    </mat-card-content>\n  </mat-card>\n\n  <div style=\"height: 10px;\">\n  </div>\n</div>\n\n<ng-template #textAlignToggleIcons let-icon=\"icon\">\n  <svg width=\"20\" height=\"20\">\n    <use [attr.xlink:href]=\"setAlignButton(icon) | spriteIconPath\"></use>\n  </svg>\n</ng-template>\n\n<ng-template #tagButtonIcons let-icon=\"icon\">\n  @if (isDefinedCustomWidget(icon)) {\n    <croco-html-custom-widget-icon [tagName]=\"icon\"></croco-html-custom-widget-icon>\n  }\n  @else if (icon.indexOf('h') === 0 && icon.length === 2) {\n    {{icon.toUpperCase()}}\n  }\n  @else {\n    <svg width=\"20\" height=\"20\">\n      <use [attr.xlink:href]=\"setTagButton(icon) | spriteIconPath\"></use>\n    </svg>\n  }\n</ng-template>\n", styles: [":host{--mat-standard-button-toggle-selected-state-background-color: #323E8B;--mat-standard-button-toggle-text-color: #323E8B;--mat-standard-button-toggle-selected-state-text-color: white;--mat-standard-button-toggle-height: 36px;--mat-standard-button-toggle-divider-color: #323E8B;--mdc-outlined-button-label-text-weight: 400;--mdc-outlined-button-label-text-color: #333333 !important;--mdc-outlined-button-container-shape: 30px;--mdc-outlined-button-outline-width: 2px;--mdc-outlined-button-container-height: 44px}:host ::ng-deep .mat-button-toggle-appearance-standard span.mat-button-toggle-label-content{padding:0 8px;min-width:36px}.text-align-icon,.mat-button-toggle .text-align-icon{color:#323e8b}.mat-button-toggle:hover,.mat-button-toggle:hover .text-align-icon{color:#747ebf}.mat-button-toggle-checked .text-align-icon{color:#fff}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.badge{width:44px;height:44px;border-radius:50%;border:1px solid #323E8B;display:flex;align-items:center;justify-content:center;color:#323e8b}.mat-card.special{border:1px solid #747EBF;border-radius:8px;box-shadow:none;margin:2px 2px 10px}.tags{display:flex;gap:10px;flex-wrap:wrap}@media (max-width: 768px){.tags{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;background-color:#f5f5f5;border-radius:12px}}@media (max-width: 575px){.tags{grid-template-columns:repeat(2,1fr);gap:10px;padding:12px}}.tag-item{display:flex;align-items:center;gap:5px;cursor:pointer;padding:10px 20px;border:1px solid #323E8B;border-radius:30px;background-color:#fff;color:#23262a;transition:.2s ease-in-out}@media (max-width: 768px){.tag-item{flex-direction:column;justify-content:center;padding:16px 8px;border-radius:12px;min-height:80px;gap:8px}}.tag-icon{color:#323e8b;display:flex;align-items:center;justify-content:center}.tag-icon svg{width:20px;height:20px}@media (max-width: 768px){.tag-icon{font-size:24px;margin-bottom:0}.tag-icon svg{width:24px;height:24px}}.tag-text{color:#323e8b}@media (max-width: 768px){.tag-text{font-size:12px;font-weight:500;text-align:center;line-height:1.2}}.text-align-icon{color:#323e8b}.tag-item.active{background-color:#323e8b;color:#fff}.tag-item.active .tag-icon,.tag-item.active .tag-text{color:#fff}.tag-item.active svg{color:#fff}.tag-item:hover{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:hover .tag-icon,.tag-item:hover .tag-text{color:#747ebf}.tag-item:hover svg{color:#747ebf}@media (max-width: 768px){.tag-item:hover{color:inherit;box-shadow:none}.tag-item:hover svg{color:inherit}.tag-item:active{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:active svg{color:#747ebf}}.move-icon:hover{cursor:pointer;opacity:.7}.cdk-drag.cdk-drag-placeholder,.cdk-drag-preview{opacity:.5;transition:opacity .2s}.example-handle{color:#323e8b}\n"], dependencies: [{ kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: AddFilesBtnComponent, selector: "croco-html-add-files-btn", outputs: ["postFilesStarted", "filesTagsReady"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MainEditorBlockComponent, selector: "croco-html-main-editor-block", inputs: ["tag"], outputs: ["onTagSaved", "onTagRemoved"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: SpriteIconPathPipe, name: "spriteIconPath" }, { kind: "component", type: CustomWidgetIconComponent, selector: "croco-html-custom-widget-icon", inputs: ["tagName"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VisualEditorComponent, decorators: [{
             type: Component,
@@ -3369,7 +3398,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         MatTooltip,
                         SpriteIconPathPipe,
                         CustomWidgetIconComponent
-                    ], template: "@if (isLoading) {\n  <div>\n    <div>\n      <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\n      <div style=\"text-align: center;\">{{loadingText}}</div>\n    </div>\n    <div style=\"height: 10px;\"></div>\n  </div>\n}\n<div [hidden]=\"isLoading\">\n  <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n    <mat-card-content>\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-12\">\n          <div class=\"w-100\" style=\"margin-bottom: 22px\">\n            <div class=\"tags\">\n              @for (tag of tags; track tag.displayValue) {\n                <div class=\"tag-item\"\n                     (click)=\"selectTag(tag)\"\n                     [class.active]=\"selectedValue === tag.tag\"\n                >\n                  <div class=\"tag-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: tag.tag}\">\n                    </ng-container>\n                  </div>\n                  <div class=\"tag-text\">{{tag.displayValue}}</div>\n                </div>\n              }\n\n              @if (useCustomWidgetsButton) {\n                <div class=\"tag-item\"\n                     (click)=\"customWidgetsClickHandler()\"\n                >\n                  <div class=\"tag-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: 'custom-widget'}\">\n                    </ng-container>\n                  </div>\n                  <div class=\"tag-text\">\u0414\u0440\u0443\u0433\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044B</div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n        @if (selectedValue === ExternalVideoTagDataConsts.TagName) {\n          <div class=\"col-12\">\n            <mat-form-field class=\"w-100\" appearance=\"outline\">\n              <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0438\u0434\u0435\u043E\u043F\u043B\u0435\u0435\u0440</mat-label>\n              <mat-select [(ngModel)]=\"selectedVideoPlayer\">\n                @for (videoPlayer of videoPlayers; track videoPlayer.type) {\n                  <mat-option [value]=\"videoPlayer.type\">\n                    {{videoPlayer.displayValue}}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </div>\n          @if (selectedVideoPlayer === ExternalVideoSupportedTypes.Code) {\n            <div class=\"col-12\">\n              <mat-form-field class=\"w-100\" appearance=\"outline\">\n                <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n                <input\n                  matInput\n                  placeholder=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\"\n                  [(ngModel)]=\"htmlRaw\"\n                >\n              </mat-form-field>\n            </div>\n          }\n        }\n        @if (selectedValue === HtmlRawTagDataConsts.TagName) {\n          <div class=\"col-12\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n                <textarea\n                  #autosize=\"cdkTextareaAutosize\"\n                  matInput\n                  cdkTextareaAutosize\n                  cdkAutosizeMinRows=\"1\"\n                  cdkAutosizeMaxRows=\"5\"\n                  placeholder=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\"\n                  #textArea\n                  [(ngModel)]=\"htmlRaw\"\n                ></textarea>\n            </mat-form-field>\n          </div>\n        }\n        @if (selectedValue === 'text') {\n          <div style=\"display: flex; justify-content: space-between; flex-wrap: wrap\">\n            <div style=\"margin-bottom: 22px; overflow-x: auto;\">\n              <mat-button-toggle-group\n                [(ngModel)]=\"textTag\"\n                [hideSingleSelectionIndicator]=\"true\"\n              >\n                @for (option of textTagOptions; track option) {\n                  <mat-button-toggle value=\"{{ option.tag }}\">\n                    {{ option.displayValue }}\n                  </mat-button-toggle>\n                }\n              </mat-button-toggle-group>\n            </div>\n\n            <div style=\"margin-bottom: 22px\">\n              <mat-button-toggle-group\n                [(ngModel)]=\"alignment\"\n                [hideSingleSelectionIndicator]=\"true\"\n              >\n                @for (option of alignmentOptions; track option) {\n                  <mat-button-toggle value=\"{{ option.value }}\">\n                    <span class=\"text-align-icon\">\n                      <ng-container [ngTemplateOutlet]=\"textAlignToggleIcons\"\n                                    [ngTemplateOutletContext]=\"{icon: option.value}\">\n                      </ng-container>\n                    </span>\n                  </mat-button-toggle>\n                }\n              </mat-button-toggle-group>\n            </div>\n          </div>\n          <mat-form-field class=\"w-100\">\n            <mat-label>\u0422\u0435\u043A\u0441\u0442</mat-label>\n            <textarea\n              #autosize=\"cdkTextareaAutosize\"\n              matInput\n              cdkTextareaAutosize\n              cdkAutosizeMinRows=\"1\"\n              cdkAutosizeMaxRows=\"5\"\n              placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n              #textArea\n              [(ngModel)]=\"text\"\n            ></textarea>\n          </mat-form-field>\n        }\n\n        <div class=\"col-12\">\n          <button (click)=\"addTagClickHandler()\" class=\"w-100\" mat-stroked-button>\n            \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433\n          </button>\n        </div>\n      </div>\n    </mat-card-content>\n  </mat-card>\n\n  <div style=\"height: 10px;\">\n  </div>\n</div>\n<div [hidden]=\"isLoading\">\n  <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n    <mat-card-content>\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-12\">\n          <croco-html-add-files-btn (filesTagsReady)=\"filesTagsReadyHandler($event)\"\n            (postFilesStarted)=\"postFilesStartedEventHandler()\" class=\"w-100\">\n          </croco-html-add-files-btn>\n        </div>\n      </div>\n    </mat-card-content>\n  </mat-card>\n\n  <div style=\"height: 10px;\">\n  </div>\n</div>\n<div [hidden]=\"isLoading\">\n  <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    @for (tag of bodyTags; track tag; let i = $index) {\n      <div cdkDrag>\n        <mat-card style=\"margin: 2px;\" class=\"mat-card special\">\n          <mat-card-content>\n            <div class=\"d-flex justify-content-between\">\n              <div class=\"example-handle\" cdkDragHandle>\n                <svg width=\"24\" height=\"24\" class=\"move-icon\">\n                  <use [attr.xlink:href]=\"'move-icon' | spriteIconPath\"></use>\n                </svg>\n              </div>\n              <div>\n                <div class=\"badge\" [matTooltip]=\"tag.tagDescription.displayValue\">\n                  <span class=\"text-align-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: tag.tagDescription.tag}\">\n                  </ng-container>\n                  </span>\n                </div>\n              </div>\n            </div>\n            <div style=\"height: 15px;\"></div>\n            <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagChangedHandler($event, i)\"\n              (onTagRemoved)=\"onTagRemovedHandler(i)\">\n            </croco-html-main-editor-block>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template #textAlignToggleIcons let-icon=\"icon\">\n  <svg width=\"20\" height=\"20\">\n    <use [attr.xlink:href]=\"setAlignButton(icon) | spriteIconPath\"></use>\n  </svg>\n</ng-template>\n\n<ng-template #tagButtonIcons let-icon=\"icon\">\n  @if (isDefinedCustomWidget(icon)) {\n    <croco-html-custom-widget-icon [tagName]=\"icon\"></croco-html-custom-widget-icon>\n  }\n  @else if (icon.indexOf('h') === 0 && icon.length === 2) {\n    {{icon.toUpperCase()}}\n  }\n  @else {\n    <svg width=\"20\" height=\"20\">\n      <use [attr.xlink:href]=\"setTagButton(icon) | spriteIconPath\"></use>\n    </svg>\n  }\n</ng-template>\n", styles: [":host{--mat-standard-button-toggle-selected-state-background-color: #323E8B;--mat-standard-button-toggle-text-color: #323E8B;--mat-standard-button-toggle-selected-state-text-color: white;--mat-standard-button-toggle-height: 36px;--mat-standard-button-toggle-divider-color: #323E8B;--mdc-outlined-button-label-text-weight: 400;--mdc-outlined-button-label-text-color: #333333 !important;--mdc-outlined-button-container-shape: 30px;--mdc-outlined-button-outline-width: 2px;--mdc-outlined-button-container-height: 44px}:host ::ng-deep .mat-button-toggle-appearance-standard span.mat-button-toggle-label-content{padding:0 8px;min-width:36px}.text-align-icon,.mat-button-toggle .text-align-icon{color:#323e8b}.mat-button-toggle:hover,.mat-button-toggle:hover .text-align-icon{color:#747ebf}.mat-button-toggle-checked .text-align-icon{color:#fff}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.badge{width:44px;height:44px;border-radius:50%;border:1px solid #323E8B;display:flex;align-items:center;justify-content:center;color:#323e8b}.mat-card.special{border:1px solid #747EBF;border-radius:8px;box-shadow:none;margin:2px 2px 10px}.tags{display:flex;gap:10px;flex-wrap:wrap}@media (max-width: 768px){.tags{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;background-color:#f5f5f5;border-radius:12px}}@media (max-width: 575px){.tags{grid-template-columns:repeat(2,1fr);gap:10px;padding:12px}}.tag-item{display:flex;align-items:center;gap:5px;cursor:pointer;padding:10px 20px;border:1px solid #323E8B;border-radius:30px;background-color:#fff;color:#23262a;transition:.2s ease-in-out}@media (max-width: 768px){.tag-item{flex-direction:column;justify-content:center;padding:16px 8px;border-radius:12px;min-height:80px;gap:8px}}.tag-icon{color:#323e8b;display:flex;align-items:center;justify-content:center}.tag-icon svg{width:20px;height:20px}@media (max-width: 768px){.tag-icon{font-size:24px;margin-bottom:0}.tag-icon svg{width:24px;height:24px}}.tag-text{color:#323e8b}@media (max-width: 768px){.tag-text{font-size:12px;font-weight:500;text-align:center;line-height:1.2}}.text-align-icon{color:#323e8b}.tag-item.active{background-color:#323e8b;color:#fff}.tag-item.active .tag-icon,.tag-item.active .tag-text{color:#fff}.tag-item.active svg{color:#fff}.tag-item:hover{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:hover .tag-icon,.tag-item:hover .tag-text{color:#747ebf}.tag-item:hover svg{color:#747ebf}@media (max-width: 768px){.tag-item:hover{color:inherit;box-shadow:none}.tag-item:hover svg{color:inherit}.tag-item:active{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:active svg{color:#747ebf}}.move-icon:hover{cursor:pointer;opacity:.7}.cdk-drag.cdk-drag-placeholder,.cdk-drag-preview{opacity:.5;transition:opacity .2s}.example-handle{color:#323e8b}\n"] }]
+                    ], template: "@if (isLoading) {\n  <div>\n    <div>\n      <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\n      <div style=\"text-align: center;\">{{loadingText}}</div>\n    </div>\n    <div style=\"height: 10px;\"></div>\n  </div>\n}\n<div [hidden]=\"isLoading\">\n  <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    @for (tag of bodyTags; track tag; let i = $index) {\n      <div cdkDrag>\n        <mat-card style=\"margin: 2px;\" class=\"mat-card special\">\n          <mat-card-content>\n            <div class=\"d-flex justify-content-between\">\n              <div class=\"example-handle\" cdkDragHandle>\n                <svg width=\"24\" height=\"24\" class=\"move-icon\">\n                  <use [attr.xlink:href]=\"'move-icon' | spriteIconPath\"></use>\n                </svg>\n              </div>\n              <div>\n                <div class=\"badge\" [matTooltip]=\"tag.tagDescription.displayValue\">\n                  <span class=\"text-align-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: tag.tagDescription.tag}\">\n                  </ng-container>\n                  </span>\n                </div>\n              </div>\n            </div>\n            <div style=\"height: 15px;\"></div>\n            <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagChangedHandler($event, i)\"\n              (onTagRemoved)=\"onTagRemovedHandler(i)\">\n            </croco-html-main-editor-block>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n  </div>\n</div>\n<div style=\"height: 10px;\"></div>\n<div [hidden]=\"isLoading\">\n  <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n    <mat-card-content>\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-12\">\n          <div class=\"w-100\" style=\"margin-bottom: 22px\">\n            <div class=\"tags\">\n              @for (tag of tags; track tag.displayValue) {\n                <div class=\"tag-item\"\n                     (click)=\"selectTag(tag)\"\n                     [class.active]=\"selectedValue === tag.tag\"\n                >\n                  <div class=\"tag-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: tag.tag}\">\n                    </ng-container>\n                  </div>\n                  <div class=\"tag-text\">{{tag.displayValue}}</div>\n                </div>\n              }\n\n              @if (useCustomWidgetsButton) {\n                <div class=\"tag-item\"\n                     (click)=\"customWidgetsClickHandler()\"\n                >\n                  <div class=\"tag-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: 'custom-widget'}\">\n                    </ng-container>\n                  </div>\n                  <div class=\"tag-text\">\u0414\u0440\u0443\u0433\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044B</div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n        @if (selectedValue === ExternalVideoTagDataConsts.TagName) {\n          <div class=\"col-12\">\n            <mat-form-field class=\"w-100\" appearance=\"outline\">\n              <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0438\u0434\u0435\u043E\u043F\u043B\u0435\u0435\u0440</mat-label>\n              <mat-select [(ngModel)]=\"selectedVideoPlayer\">\n                @for (videoPlayer of videoPlayers; track videoPlayer.type) {\n                  <mat-option [value]=\"videoPlayer.type\">\n                    {{videoPlayer.displayValue}}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </div>\n          @if (selectedVideoPlayer === ExternalVideoSupportedTypes.Code) {\n            <div class=\"col-12\">\n              <mat-form-field class=\"w-100\" appearance=\"outline\">\n                <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n                <input\n                  matInput\n                  placeholder=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\"\n                  [(ngModel)]=\"htmlRaw\"\n                >\n              </mat-form-field>\n            </div>\n          }\n        }\n        @if (selectedValue === HtmlRawTagDataConsts.TagName) {\n          <div class=\"col-12\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n              <textarea\n                #autosize=\"cdkTextareaAutosize\"\n                matInput\n                cdkTextareaAutosize\n                cdkAutosizeMinRows=\"1\"\n                cdkAutosizeMaxRows=\"5\"\n                placeholder=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\"\n                #textArea\n                [(ngModel)]=\"htmlRaw\"\n              ></textarea>\n            </mat-form-field>\n          </div>\n        }\n        @if (selectedValue === 'text') {\n          <div style=\"display: flex; justify-content: space-between; flex-wrap: wrap\">\n            <div style=\"margin-bottom: 22px; overflow-x: auto;\">\n              <mat-button-toggle-group\n                [(ngModel)]=\"textTag\"\n                [hideSingleSelectionIndicator]=\"true\"\n              >\n                @for (option of textTagOptions; track option) {\n                  <mat-button-toggle value=\"{{ option.tag }}\">\n                    {{ option.displayValue }}\n                  </mat-button-toggle>\n                }\n              </mat-button-toggle-group>\n            </div>\n\n            <div style=\"margin-bottom: 22px\">\n              <mat-button-toggle-group\n                [(ngModel)]=\"alignment\"\n                [hideSingleSelectionIndicator]=\"true\"\n              >\n                @for (option of alignmentOptions; track option) {\n                  <mat-button-toggle value=\"{{ option.value }}\">\n                    <span class=\"text-align-icon\">\n                      <ng-container [ngTemplateOutlet]=\"textAlignToggleIcons\"\n                                    [ngTemplateOutletContext]=\"{icon: option.value}\">\n                      </ng-container>\n                    </span>\n                  </mat-button-toggle>\n                }\n              </mat-button-toggle-group>\n            </div>\n          </div>\n          <mat-form-field class=\"w-100\">\n            <mat-label>\u0422\u0435\u043A\u0441\u0442</mat-label>\n            <textarea\n              #autosize=\"cdkTextareaAutosize\"\n              matInput\n              cdkTextareaAutosize\n              cdkAutosizeMinRows=\"1\"\n              cdkAutosizeMaxRows=\"5\"\n              placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n              #textArea\n              [(ngModel)]=\"text\"\n            ></textarea>\n          </mat-form-field>\n        }\n\n        <div class=\"col-12\">\n          <button (click)=\"addTagClickHandler()\" class=\"w-100\" mat-stroked-button>\n            \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C\n          </button>\n        </div>\n      </div>\n    </mat-card-content>\n  </mat-card>\n\n  <div style=\"height: 10px;\"></div>\n</div>\n<div [hidden]=\"isLoading\">\n  <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n    <mat-card-content>\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-12\">\n          <croco-html-add-files-btn (filesTagsReady)=\"filesTagsReadyHandler($event)\"\n                                    (postFilesStarted)=\"postFilesStartedEventHandler()\" class=\"w-100\">\n          </croco-html-add-files-btn>\n        </div>\n      </div>\n    </mat-card-content>\n  </mat-card>\n\n  <div style=\"height: 10px;\">\n  </div>\n</div>\n\n<ng-template #textAlignToggleIcons let-icon=\"icon\">\n  <svg width=\"20\" height=\"20\">\n    <use [attr.xlink:href]=\"setAlignButton(icon) | spriteIconPath\"></use>\n  </svg>\n</ng-template>\n\n<ng-template #tagButtonIcons let-icon=\"icon\">\n  @if (isDefinedCustomWidget(icon)) {\n    <croco-html-custom-widget-icon [tagName]=\"icon\"></croco-html-custom-widget-icon>\n  }\n  @else if (icon.indexOf('h') === 0 && icon.length === 2) {\n    {{icon.toUpperCase()}}\n  }\n  @else {\n    <svg width=\"20\" height=\"20\">\n      <use [attr.xlink:href]=\"setTagButton(icon) | spriteIconPath\"></use>\n    </svg>\n  }\n</ng-template>\n", styles: [":host{--mat-standard-button-toggle-selected-state-background-color: #323E8B;--mat-standard-button-toggle-text-color: #323E8B;--mat-standard-button-toggle-selected-state-text-color: white;--mat-standard-button-toggle-height: 36px;--mat-standard-button-toggle-divider-color: #323E8B;--mdc-outlined-button-label-text-weight: 400;--mdc-outlined-button-label-text-color: #333333 !important;--mdc-outlined-button-container-shape: 30px;--mdc-outlined-button-outline-width: 2px;--mdc-outlined-button-container-height: 44px}:host ::ng-deep .mat-button-toggle-appearance-standard span.mat-button-toggle-label-content{padding:0 8px;min-width:36px}.text-align-icon,.mat-button-toggle .text-align-icon{color:#323e8b}.mat-button-toggle:hover,.mat-button-toggle:hover .text-align-icon{color:#747ebf}.mat-button-toggle-checked .text-align-icon{color:#fff}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.badge{width:44px;height:44px;border-radius:50%;border:1px solid #323E8B;display:flex;align-items:center;justify-content:center;color:#323e8b}.mat-card.special{border:1px solid #747EBF;border-radius:8px;box-shadow:none;margin:2px 2px 10px}.tags{display:flex;gap:10px;flex-wrap:wrap}@media (max-width: 768px){.tags{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;background-color:#f5f5f5;border-radius:12px}}@media (max-width: 575px){.tags{grid-template-columns:repeat(2,1fr);gap:10px;padding:12px}}.tag-item{display:flex;align-items:center;gap:5px;cursor:pointer;padding:10px 20px;border:1px solid #323E8B;border-radius:30px;background-color:#fff;color:#23262a;transition:.2s ease-in-out}@media (max-width: 768px){.tag-item{flex-direction:column;justify-content:center;padding:16px 8px;border-radius:12px;min-height:80px;gap:8px}}.tag-icon{color:#323e8b;display:flex;align-items:center;justify-content:center}.tag-icon svg{width:20px;height:20px}@media (max-width: 768px){.tag-icon{font-size:24px;margin-bottom:0}.tag-icon svg{width:24px;height:24px}}.tag-text{color:#323e8b}@media (max-width: 768px){.tag-text{font-size:12px;font-weight:500;text-align:center;line-height:1.2}}.text-align-icon{color:#323e8b}.tag-item.active{background-color:#323e8b;color:#fff}.tag-item.active .tag-icon,.tag-item.active .tag-text{color:#fff}.tag-item.active svg{color:#fff}.tag-item:hover{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:hover .tag-icon,.tag-item:hover .tag-text{color:#747ebf}.tag-item:hover svg{color:#747ebf}@media (max-width: 768px){.tag-item:hover{color:inherit;box-shadow:none}.tag-item:hover svg{color:inherit}.tag-item:active{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:active svg{color:#747ebf}}.move-icon:hover{cursor:pointer;opacity:.7}.cdk-drag.cdk-drag-placeholder,.cdk-drag-preview{opacity:.5;transition:opacity .2s}.example-handle{color:#323e8b}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [CrocoHtmlOptionsToken]