croco-html 4.6.5 → 4.7.1

package/fesm2022/croco-html.mjs

@@ -1,31 +1,31 @@
 import * as i0 from '@angular/core';
 import { Inject, Injectable, EventEmitter, Output, Input, ViewChild, Component, ChangeDetectionStrategy, ViewContainerRef, ViewEncapsulation, Pipe, NgModule } from '@angular/core';
 import * as i2 from '@angular/material/button';
-import { MatButton, MatButtonModule, MatIconButton } from '@angular/material/button';
+import { MatButton, MatIconButton, MatButtonModule } from '@angular/material/button';
 import * as i1 from '@angular/common/http';
-import * as i1$3 from '@angular/material/form-field';
-import { MatFormFieldModule, MatFormField, MatLabel } from '@angular/material/form-field';
-import * as i1$4 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i1$1 from '@angular/platform-browser';
+import * as i2$1 from '@angular/material/input';
+import { MatInput, MatInputModule, MatFormField as MatFormField$1, MatLabel as MatLabel$1 } from '@angular/material/input';
+import * as i1$4 from '@angular/material/form-field';
+import { MatFormField, MatLabel, MatFormFieldModule } from '@angular/material/form-field';
 import * as i27 from '@angular/material/icon';
 import { MatIcon, MatIconModule } from '@angular/material/icon';
-import * as i1$2 from '@angular/material/card';
+import * as i1$1 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i29 from '@angular/material/button-toggle';
+import { MatButtonToggleGroup, MatButtonToggle, MatButtonToggleModule } from '@angular/material/button-toggle';
+import { Subject, takeUntil, BehaviorSubject } from 'rxjs';
+import * as i5 from '@ng-select/ng-select';
+import { NgSelectModule } from '@ng-select/ng-select';
+import * as i1$2 from '@angular/platform-browser';
+import * as i1$3 from '@angular/material/card';
 import { MatCardModule, MatCard, MatCardContent } from '@angular/material/card';
-import { BehaviorSubject, Subject, takeUntil } from 'rxjs';
 import { NgStyle, JsonPipe, NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i12 from '@angular/material/tooltip';
 import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
-import * as i2$1 from '@angular/material/input';
-import { MatInputModule, MatInput, MatFormField as MatFormField$1, MatLabel as MatLabel$1 } from '@angular/material/input';
 import * as i13 from '@angular/material/checkbox';
 import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
 import * as i3 from '@angular/cdk/text-field';
 import { CdkTextareaAutosize } from '@angular/cdk/text-field';
-import * as i4 from '@ng-select/ng-select';
-import { NgSelectModule } from '@ng-select/ng-select';
-import * as i29 from '@angular/material/button-toggle';
-import { MatButtonToggleGroup, MatButtonToggle, MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i22 from '@angular/material/slide-toggle';
 import { MatSlideToggle, MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i28 from '@angular/cdk/drag-drop';
@@ -36,7 +36,7 @@ import * as i11 from '@angular/material/select';
 import { MatSelect, MatSelectModule } from '@angular/material/select';
 import * as i7 from '@angular/material/progress-spinner';
 import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i5 from '@angular/material/tabs';
+import * as i5$1 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import * as i2$2 from '@angular/material/dialog';
 import { MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogModule } from '@angular/material/dialog';
@@ -133,6 +133,46 @@ class AngularMaterialTableMethods {
     }
 }
 
+class FileAudioTagDataConsts {
+    static { this.TagName = "audio-player"; }
+    static { this.FileIdAttrName = "file-id"; }
+    static { this.FileNameAttrName = "file-name"; }
+}
+class AudioMethods {
+    static buildUrl(fileId, fileName) {
+        //TODO заглушка, пока юзаем статичный фапйл
+        if (fileId && fileId !== '') {
+            if (!isNaN(Number(fileId))) {
+                return `/api/PrivateFiles/GetFile?fileId=${fileId}`;
+            }
+            else {
+                return `/api/PublicFiles/GetFile?fileId=${fileId}`;
+            }
+        }
+        if (fileName && fileName !== '') {
+            return fileName;
+        }
+        return null;
+    }
+    static isPrivateFileId(fileId) {
+        return !isNaN(Number(fileId));
+    }
+    static formatTime(seconds) {
+        if (isNaN(seconds) || seconds < 0) {
+            return '0:00';
+        }
+        const minutes = Math.floor(seconds / 60);
+        const remainingSeconds = Math.floor(seconds % 60);
+        return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+    }
+    static calculateProgress(currentTime, duration) {
+        if (duration === 0 || isNaN(duration) || isNaN(currentTime)) {
+            return 0;
+        }
+        return Math.min(100, Math.max(0, (currentTime / duration) * 100));
+    }
+}
+
 class HtmlExtractionMethods {
     static transformHtmlElementToBlocks(element, options) {
         const data = [];
@@ -702,6 +742,72 @@ class Tags {
     static { this.CustomWidget = CustomWidgetTagDataConsts.TagName; }
 }
 
+class FileAudioTagService {
+    constructor() {
+        this.tagName = FileAudioTagDataConsts.TagName;
+        this.shortDescription = "Аудио";
+    }
+    bodyTagToHtmlStringConverter(bodyTag) {
+        let fileIdAttr = "";
+        let fileNameAttr = "";
+        if (bodyTag.attributes.hasOwnProperty(FileAudioTagDataConsts.FileIdAttrName) &&
+            bodyTag.attributes[FileAudioTagDataConsts.FileIdAttrName]) {
+            fileIdAttr = `${FileAudioTagDataConsts.FileIdAttrName}="${bodyTag.attributes[FileAudioTagDataConsts.FileIdAttrName]}"`;
+        }
+        if (bodyTag.attributes.hasOwnProperty(FileAudioTagDataConsts.FileNameAttrName) &&
+            bodyTag.attributes[FileAudioTagDataConsts.FileNameAttrName]) {
+            fileNameAttr = ` ${FileAudioTagDataConsts.FileNameAttrName}="${bodyTag.attributes[FileAudioTagDataConsts.FileNameAttrName]}"`;
+        }
+        return `<${FileAudioTagDataConsts.TagName} ${fileIdAttr}${fileNameAttr}></${FileAudioTagDataConsts.TagName}>`;
+    }
+    extractBlockFromHtmlElement(elem, options) {
+        let fileId = elem.getAttribute(FileAudioTagDataConsts.FileIdAttrName);
+        let fileName = elem.getAttribute(FileAudioTagDataConsts.FileNameAttrName);
+        let src = AudioMethods.buildUrl(fileId, fileName);
+        return {
+            tagName: FileAudioTagDataConsts.TagName,
+            data: {
+                src,
+                fileId: fileId,
+                fileName: fileName
+            }
+        };
+    }
+    toBodyTag(data) {
+        let fileData = data.data;
+        let attrs = {};
+        if (fileData.fileId) {
+            attrs[FileAudioTagDataConsts.FileIdAttrName] = fileData.fileId;
+        }
+        if (fileData.fileName) {
+            attrs[FileAudioTagDataConsts.FileNameAttrName] = fileData.fileName;
+        }
+        return {
+            tagDescription: {
+                tag: FileAudioTagDataConsts.TagName,
+                displayValue: this.shortDescription,
+                isCustom: false
+            },
+            attributes: attrs,
+            innerHtml: ""
+        };
+    }
+    getDefaultValue() {
+        return {
+            tagDescription: {
+                tag: this.tagName,
+                displayValue: this.shortDescription,
+                isCustom: false
+            },
+            attributes: {
+                [FileAudioTagDataConsts.FileIdAttrName]: '',
+                [FileAudioTagDataConsts.FileNameAttrName]: ''
+            },
+            innerHtml: "",
+        };
+    }
+}
+
 const TextTag = "text";
 class TextSimpleMethods {
     static { this.supportedTags = ["sup", "sub", "strong", "b", "i", "u"]; }
@@ -995,6 +1101,7 @@ class BodyTagsExtensions {
         [TextTags.h5]: new TextTagHtmlMarkupTagService("h5", "H5"),
         [TextTags.h6]: new TextTagHtmlMarkupTagService("h6", "H6"),
         [FileImageTagDataConsts.TagName]: new FileImageTagService(),
+        [FileAudioTagDataConsts.TagName]: new FileAudioTagService(),
         [ExternalVideoTagDataConsts.TagName]: new ExternalVideoTagService(),
         [HtmlRawTagDataConsts.TagName]: new HtmlRawTagService(),
         [DownloadButtonTagDataConsts.TagName]: new DownloadButtonTagService(),
@@ -1322,6 +1429,483 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }] } });
 
+var FileType;
+(function (FileType) {
+    FileType["Undefined"] = "Undefined";
+    FileType["Unknown"] = "Unknown";
+    FileType["Image"] = "Image";
+    FileType["Audio"] = "Audio";
+    FileType["Video"] = "Video";
+    FileType["Document"] = "Document";
+    FileType["Archive"] = "Archive";
+})(FileType || (FileType = {}));
+
+class PublicFilesQueryService {
+    constructor(_httpClient, baseUrl) {
+        this._httpClient = _httpClient;
+        this._baseControllerUrl = `${baseUrl}Api/Files`;
+    }
+    search(model) {
+        return this._httpClient.post(`${this._baseControllerUrl}/GetFiles`, model);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PublicFilesQueryService, deps: [{ token: i1.HttpClient }, { token: 'BASE_URL' }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PublicFilesQueryService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PublicFilesQueryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['BASE_URL']
+                }] }] });
+
+class PrivateFilesQueryService {
+    constructor(_httpClient, baseUrl) {
+        this._httpClient = _httpClient;
+        this._baseControllerUrl = `${baseUrl}api/private-files/query`;
+    }
+    search(model) {
+        return this._httpClient.post(`${this._baseControllerUrl}/search`, model);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PrivateFilesQueryService, deps: [{ token: i1.HttpClient }, { token: 'BASE_URL' }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PrivateFilesQueryService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PrivateFilesQueryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['BASE_URL']
+                }] }] });
+
+class AudioEditorComponent {
+    constructor(_publicFileService, _privateFileService, _htmlSettingsService) {
+        this._publicFileService = _publicFileService;
+        this._privateFileService = _privateFileService;
+        this._htmlSettingsService = _htmlSettingsService;
+        this.hasAudioError = false;
+        this.isPlaying = false;
+        this.isLoading = false;
+        this.currentTime = 0;
+        this.duration = 0;
+        this.volume = 1;
+        this.isMuted = false;
+        this.searchOrEdit = "search";
+        this.fileName = '';
+        this.files = [];
+        this.loading = false;
+        this.q = '';
+        this.unsubscribe = new Subject();
+        this.presentOrEdit = true;
+    }
+    get fileId() {
+        return this.tag.attributes[FileAudioTagDataConsts.FileIdAttrName];
+    }
+    set fileId(value) {
+        this.tag.attributes[FileAudioTagDataConsts.FileIdAttrName] = value;
+    }
+    get fileNameAttr() {
+        return this.tag.attributes[FileAudioTagDataConsts.FileNameAttrName];
+    }
+    set fileNameAttr(value) {
+        this.tag.attributes[FileAudioTagDataConsts.FileNameAttrName] = value;
+    }
+    hasFileId() {
+        return this.tag.attributes.hasOwnProperty(FileAudioTagDataConsts.FileIdAttrName) && this.fileId && this.fileId !== '';
+    }
+    getSrc() {
+        // return AudioMethods.buildUrl(this.fileId, this.fileNameAttr);
+        return this.fileId;
+    }
+    get audioElement() {
+        return this.audioPlayer?.nativeElement || null;
+    }
+    onErrorHandler() {
+        this.hasAudioError = true;
+        this.isLoading = false;
+    }
+    removeAudioError() {
+        this.hasAudioError = false;
+    }
+    onFileIdChanged(fileId) {
+        this.fileId = fileId;
+        this.removeAudioError();
+        this.loadAudioFile();
+    }
+    onFileNameChanged(fileName) {
+        this.fileNameAttr = fileName;
+    }
+    loadAudioFile() {
+        if (!this.hasFileId()) {
+            return;
+        }
+        this.isLoading = true;
+        this.hasAudioError = false;
+        const audio = this.audioElement;
+        if (audio) {
+            audio.load();
+        }
+    }
+    onLoadedMetadata() {
+        const audio = this.audioElement;
+        if (audio) {
+            this.duration = audio.duration;
+            this.isLoading = false;
+        }
+    }
+    onTimeUpdate() {
+        const audio = this.audioElement;
+        if (audio) {
+            this.currentTime = audio.currentTime;
+            this.duration = audio.duration;
+        }
+    }
+    onEnded() {
+        this.isPlaying = false;
+        this.currentTime = 0;
+    }
+    onCanPlay() {
+        this.isLoading = false;
+    }
+    togglePlayPause() {
+        const audio = this.audioElement;
+        if (!audio)
+            return;
+        if (this.isPlaying) {
+            audio.pause();
+            this.isPlaying = false;
+        }
+        else {
+            audio.play().then(() => {
+                this.isPlaying = true;
+            }).catch(() => {
+                this.hasAudioError = true;
+            });
+        }
+    }
+    restart() {
+        const audio = this.audioElement;
+        if (audio) {
+            audio.currentTime = 0;
+            this.currentTime = 0;
+        }
+    }
+    rewind() {
+        const audio = this.audioElement;
+        if (audio) {
+            audio.currentTime = Math.max(0, audio.currentTime - 10);
+        }
+    }
+    forward() {
+        const audio = this.audioElement;
+        if (audio) {
+            audio.currentTime = Math.min(audio.duration, audio.currentTime + 10);
+        }
+    }
+    onVolumeChange(event) {
+        const target = event.target;
+        const value = parseFloat(target.value) / 100;
+        this.volume = value;
+        const audio = this.audioElement;
+        if (audio) {
+            audio.volume = value;
+        }
+        this.isMuted = value === 0;
+    }
+    toggleMute() {
+        const audio = this.audioElement;
+        if (!audio)
+            return;
+        if (this.isMuted) {
+            audio.volume = this.volume;
+            this.isMuted = false;
+        }
+        else {
+            audio.volume = 0;
+            this.isMuted = true;
+        }
+    }
+    onSeekChange(event) {
+        const target = event.target;
+        const value = parseFloat(target.value);
+        const audio = this.audioElement;
+        if (audio) {
+            audio.currentTime = (value / 100) * audio.duration;
+        }
+    }
+    formatTime(seconds) {
+        return AudioMethods.formatTime(seconds);
+    }
+    getProgress() {
+        return AudioMethods.calculateProgress(this.currentTime, this.duration);
+    }
+    loadFiles() {
+        this.loading = true;
+        const isPrivate = this._htmlSettingsService.get().usePrivateFiles;
+        const searchParams = {
+            count: 50,
+            offSet: 0,
+            fileName: null,
+            fileTypes: [FileType.Audio],
+            applicationId: isPrivate ? this._htmlSettingsService.get().applicationId : null,
+            q: this.q
+        };
+        if (isPrivate) {
+            this._privateFileService.search(searchParams)
+                .pipe(takeUntil(this.unsubscribe))
+                .subscribe(data => {
+                this.files = data.list.map(el => ({ fileId: el.id, fileName: el.fileName }));
+                this.loading = false;
+            });
+        }
+        else {
+            this._publicFileService.search(searchParams)
+                .pipe(takeUntil(this.unsubscribe))
+                .subscribe(data => {
+                this.files = data.list.map(el => ({ fileId: el.fileId.toString(), fileName: el.fileName }));
+                this.loading = false;
+            });
+        }
+    }
+    onSearchChanged(q) {
+        this.q = q.term;
+        this.loadFiles();
+    }
+    onFileSelected(fileId) {
+        const selectedFile = this.files.find(f => f.fileId === fileId);
+        if (selectedFile) {
+            //TODO заглушка
+            this.fileId = "./ona_ne_tvoya.mp3";
+            this.fileNameAttr = selectedFile.fileName;
+            this.loadAudioFile();
+        }
+    }
+    onFilesUploaded(fileIds) {
+        if (fileIds && fileIds.length > 0) {
+            //TODO заглушка
+            this.fileId = '"./ona_ne_tvoya.mp3"';
+            this.loadFiles();
+        }
+    }
+    removeAudio() {
+        this.fileId = '';
+        this.fileNameAttr = '';
+        this.isPlaying = false;
+        this.currentTime = 0;
+        this.duration = 0;
+        this.removeAudioError();
+    }
+    ngOnInit() {
+        if (this.audioPlayer?.nativeElement) {
+            const audio = this.audioPlayer.nativeElement;
+            audio.volume = this.volume;
+            if (this.hasFileId()) {
+                this.loadAudioFile();
+            }
+        }
+        this.loadFiles();
+    }
+    ngOnDestroy() {
+        this.unsubscribe.next();
+        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 }], 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>\u0410\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D \u043F\u043E \u0443\u043A\u0430\u0437\u0430\u043D\u043D\u043E\u043C\u0443 \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E \u0444\u0430\u0439\u043B \u043D\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u043B\u0438 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043D\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.</span>\n    </div>\n  }\n\n  @if (hasFileId() && !hasAudioError) {\n    <div class=\"audio-player-container\">\n      <audio\n        #audioPlayer\n        [src]=\"getSrc()\"\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\n          <mat-form-field class=\"w-100\">\n            <mat-label>\u0418\u043C\u044F \u0444\u0430\u0439\u043B\u0430</mat-label>\n            <input\n              matInput\n              placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0438\u043C\u044F \u0444\u0430\u0439\u043B\u0430\"\n              autocomplete=\"off\"\n              [(ngModel)]=\"fileNameAttr\"\n              (ngModelChange)=\"onFileNameChanged($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: i5.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: i5.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,
+            args: [{ selector: 'croco-html-audio-editor', standalone: true, imports: [
+                        MatButtonToggleGroup,
+                        FormsModule,
+                        MatButtonToggle,
+                        MatIcon,
+                        MatFormField,
+                        MatLabel,
+                        MatInput,
+                        UploadFilesBtnComponent,
+                        NgSelectModule,
+                        MatIconButton
+                    ], template: "<div class=\"audio-editor\">\n  @if (hasAudioError) {\n    <div class=\"error-block\">\n      <mat-icon>error</mat-icon>\n      <span>\u0410\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D \u043F\u043E \u0443\u043A\u0430\u0437\u0430\u043D\u043D\u043E\u043C\u0443 \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E \u0444\u0430\u0439\u043B \u043D\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u043B\u0438 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043D\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.</span>\n    </div>\n  }\n\n  @if (hasFileId() && !hasAudioError) {\n    <div class=\"audio-player-container\">\n      <audio\n        #audioPlayer\n        [src]=\"getSrc()\"\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\n          <mat-form-field class=\"w-100\">\n            <mat-label>\u0418\u043C\u044F \u0444\u0430\u0439\u043B\u0430</mat-label>\n            <input\n              matInput\n              placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0438\u043C\u044F \u0444\u0430\u0439\u043B\u0430\"\n              autocomplete=\"off\"\n              [(ngModel)]=\"fileNameAttr\"\n              (ngModelChange)=\"onFileNameChanged($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"] }]
+        }], ctorParameters: () => [{ type: PublicFilesQueryService }, { type: PrivateFilesQueryService }, { type: CrocoHtmlFileOptionsService }], propDecorators: { audioPlayer: [{
+                type: ViewChild,
+                args: ['audioPlayer', { static: false }]
+            }], tag: [{
+                type: Input,
+                args: [{ required: true }]
+            }], presentOrEdit: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+const CrocoHtmlOptionsToken = "croco-html-options";
+
+class AudioPlayerTagViewComponent {
+    constructor(_options) {
+        this._options = _options;
+        this.hasAudioError = false;
+        this.isPlaying = false;
+        this.isLoading = false;
+        this.currentTime = 0;
+        this.duration = 0;
+        this.volume = 1;
+        this.isMuted = false;
+        this.unsubscribe = new Subject();
+    }
+    get fileId() {
+        return this.data.data.fileId;
+    }
+    get fileName() {
+        return this.data.data.fileName;
+    }
+    getSrc() {
+        //this._options.fileIdAndNamePathUrlFormat;
+        // TODO если fileId указан то нужно
+        // return AudioMethods.buildUrl(this.fileId, this.fileName);
+        return this.fileId;
+    }
+    get audioElement() {
+        return this.audioPlayer?.nativeElement || null;
+    }
+    hasFileId() {
+        return this.fileId && this.fileId !== '';
+    }
+    onErrorHandler() {
+        this.hasAudioError = true;
+        this.isLoading = false;
+    }
+    onLoadedMetadata() {
+        const audio = this.audioElement;
+        if (audio) {
+            this.duration = audio.duration;
+            this.isLoading = false;
+        }
+    }
+    onTimeUpdate() {
+        const audio = this.audioElement;
+        if (audio) {
+            this.currentTime = audio.currentTime;
+            this.duration = audio.duration;
+        }
+    }
+    onEnded() {
+        this.isPlaying = false;
+        this.currentTime = 0;
+    }
+    onCanPlay() {
+        this.isLoading = false;
+    }
+    togglePlayPause() {
+        const audio = this.audioElement;
+        if (!audio)
+            return;
+        if (this.isPlaying) {
+            audio.pause();
+            this.isPlaying = false;
+        }
+        else {
+            audio.play().then(() => {
+                this.isPlaying = true;
+            }).catch(() => {
+                this.hasAudioError = true;
+            });
+        }
+    }
+    restart() {
+        const audio = this.audioElement;
+        if (audio) {
+            audio.currentTime = 0;
+            this.currentTime = 0;
+        }
+    }
+    rewind() {
+        const audio = this.audioElement;
+        if (audio) {
+            audio.currentTime = Math.max(0, audio.currentTime - 10);
+        }
+    }
+    forward() {
+        const audio = this.audioElement;
+        if (audio) {
+            audio.currentTime = Math.min(audio.duration, audio.currentTime + 10);
+        }
+    }
+    onVolumeChange(event) {
+        const target = event.target;
+        const value = parseFloat(target.value) / 100;
+        this.volume = value;
+        const audio = this.audioElement;
+        if (audio) {
+            audio.volume = value;
+        }
+        this.isMuted = value === 0;
+    }
+    toggleMute() {
+        const audio = this.audioElement;
+        if (!audio)
+            return;
+        if (this.isMuted) {
+            audio.volume = this.volume;
+            this.isMuted = false;
+        }
+        else {
+            audio.volume = 0;
+            this.isMuted = true;
+        }
+    }
+    onSeekChange(event) {
+        const target = event.target;
+        const value = parseFloat(target.value);
+        const audio = this.audioElement;
+        if (audio) {
+            audio.currentTime = (value / 100) * audio.duration;
+        }
+    }
+    formatTime(seconds) {
+        return AudioMethods.formatTime(seconds);
+    }
+    getProgress() {
+        return AudioMethods.calculateProgress(this.currentTime, this.duration);
+    }
+    ngOnInit() {
+        if (this.audioPlayer?.nativeElement) {
+            const audio = this.audioElement;
+            if (audio) {
+                audio.volume = this.volume;
+                if (this.hasFileId()) {
+                    this.isLoading = true;
+                    audio.load();
+                }
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.unsubscribe.next();
+        this.unsubscribe.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AudioPlayerTagViewComponent, deps: [{ token: CrocoHtmlOptionsToken }], 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 }], ngImport: i0, template: "<div class=\"audio-view\">\n  @if (hasAudioError) {\n    <div class=\"error-block\">\n      <mat-icon>error</mat-icon>\n      <span>\u0410\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D \u043F\u043E \u0443\u043A\u0430\u0437\u0430\u043D\u043D\u043E\u043C\u0443 \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443</span>\n    </div>\n  }\n\n  @if (hasFileId() && !hasAudioError) {\n    <div class=\"audio-player-container\">\n      <audio\n        #audioPlayer\n        [src]=\"getSrc()\"\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\">{{ fileName || '\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"] }] }); }
+}
+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>\u0410\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D \u043F\u043E \u0443\u043A\u0430\u0437\u0430\u043D\u043D\u043E\u043C\u0443 \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443</span>\n    </div>\n  }\n\n  @if (hasFileId() && !hasAudioError) {\n    <div class=\"audio-player-container\">\n      <audio\n        #audioPlayer\n        [src]=\"getSrc()\"\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\">{{ fileName || '\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"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [CrocoHtmlOptionsToken]
+                }] }], propDecorators: { audioPlayer: [{
+                type: ViewChild,
+                args: ['audioPlayer', { static: false }]
+            }], data: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
 class YoutubeVideoPlayerComponent {
     set link(link) {
         this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(link);
@@ -1329,13 +1913,13 @@ class YoutubeVideoPlayerComponent {
     constructor(sanitizer) {
         this.sanitizer = sanitizer;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YoutubeVideoPlayerComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YoutubeVideoPlayerComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: YoutubeVideoPlayerComponent, isStandalone: true, selector: "youtube-video-player", inputs: { link: "link" }, ngImport: i0, template: "<div class=\"code-view video-player use-responsive\">\n    <iframe\n      [src]=\"safeUrl\"\n      title=\"YouTube video player\"\n      frameborder=\"0\"\n      allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n      referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>\n</div>\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 768px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 575px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 480px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YoutubeVideoPlayerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'youtube-video-player', standalone: true, imports: [], template: "<div class=\"code-view video-player use-responsive\">\n    <iframe\n      [src]=\"safeUrl\"\n      title=\"YouTube video player\"\n      frameborder=\"0\"\n      allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n      referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>\n</div>\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 768px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 575px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 480px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { link: [{
+        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }], propDecorators: { link: [{
                 type: Input
             }] } });
 
@@ -1346,13 +1930,13 @@ class VkVideoPlayerComponent {
     constructor(sanitizer) {
         this.sanitizer = sanitizer;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VkVideoPlayerComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VkVideoPlayerComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: VkVideoPlayerComponent, isStandalone: true, selector: "vk-video-player", inputs: { link: "link" }, ngImport: i0, template: "<div class=\"code-view video-player use-responsive\">\n  <iframe\n    [src]=\"safeUrl\"\n    allow=\"autoplay; encrypted-media; fullscreen; picture-in-picture;\"\n    frameborder=\"0\"\n    allowfullscreen></iframe>\n</div>\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 768px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 575px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 480px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VkVideoPlayerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vk-video-player', standalone: true, imports: [], template: "<div class=\"code-view video-player use-responsive\">\n  <iframe\n    [src]=\"safeUrl\"\n    allow=\"autoplay; encrypted-media; fullscreen; picture-in-picture;\"\n    frameborder=\"0\"\n    allowfullscreen></iframe>\n</div>\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 768px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 575px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 480px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { link: [{
+        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }], propDecorators: { link: [{
                 type: Input
             }] } });
 
@@ -1370,13 +1954,13 @@ class CodeVideoComponent {
             this.safeHtml = this._sanitizer.bypassSecurityTrustHtml(this.code);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CodeVideoComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CodeVideoComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CodeVideoComponent, isStandalone: true, selector: "code-video", inputs: { code: "code", _useResponsiveWrapper: "_useResponsiveWrapper" }, usesOnChanges: true, ngImport: i0, template: "@if (code) {\n  <div class=\"code-view video-player\" [class.use-responsive]=\"useResponsiveWrapper\" [innerHTML]=\"safeHtml\"></div>\n}\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 768px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 575px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 480px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CodeVideoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'code-video', standalone: true, imports: [], template: "@if (code) {\n  <div class=\"code-view video-player\" [class.use-responsive]=\"useResponsiveWrapper\" [innerHTML]=\"safeHtml\"></div>\n}\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 768px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 575px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 480px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { code: [{
+        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }], propDecorators: { code: [{
                 type: Input
             }], _useResponsiveWrapper: [{
                 type: Input
@@ -1533,7 +2117,7 @@ class ErrorBannerComponent {
         this.message = "";
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ErrorBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ErrorBannerComponent, isStandalone: true, selector: "croco-html-error-banner", inputs: { message: "message" }, ngImport: i0, template: "@if (message) {\n    <mat-card class=\"red\">\n      <mat-card-content>\n        <p>\n          {{ message }}\n        </p>\n      </mat-card-content>\n      <mat-card-actions>\n        <button mat-button (click)=\"message = null\">\u0417\u0410\u041A\u0420\u042B\u0422\u042C</button>\n      </mat-card-actions>\n    </mat-card>\n  }\n  ", styles: [".red{background-color:#c94444;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1$2.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ErrorBannerComponent, isStandalone: true, selector: "croco-html-error-banner", inputs: { message: "message" }, ngImport: i0, template: "@if (message) {\n    <mat-card class=\"red\">\n      <mat-card-content>\n        <p>\n          {{ message }}\n        </p>\n      </mat-card-content>\n      <mat-card-actions>\n        <button mat-button (click)=\"message = null\">\u0417\u0410\u041A\u0420\u042B\u0422\u042C</button>\n      </mat-card-actions>\n    </mat-card>\n  }\n  ", styles: [".red{background-color:#c94444;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1$3.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ErrorBannerComponent, decorators: [{
             type: Component,
@@ -1546,8 +2130,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: [{ required: true }]
             }] } });
 
-const CrocoHtmlOptionsToken = "croco-html-options";
-
 class ScreenWidthService {
     constructor() {
         this.screenWidth = new BehaviorSubject(window.innerWidth);
@@ -1630,13 +2212,13 @@ class HtmlRawViewComponent {
             this.safeHtml = this._sanitizer.bypassSecurityTrustHtml(this.rawHtml);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HtmlRawViewComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HtmlRawViewComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: HtmlRawViewComponent, isStandalone: true, selector: "croco-html-raw-view", inputs: { rawHtml: "rawHtml" }, usesOnChanges: true, ngImport: i0, template: "@if (rawHtml) {\n  <div [innerHTML]=\"safeHtml\"></div>\n}\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HtmlRawViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'croco-html-raw-view', standalone: true, template: "@if (rawHtml) {\n  <div [innerHTML]=\"safeHtml\"></div>\n}\n" }]
-        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { rawHtml: [{
+        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }], propDecorators: { rawHtml: [{
                 type: Input
             }] } });
 
@@ -1796,17 +2378,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: [{ required: true }]
             }] } });
 
-var FileType;
-(function (FileType) {
-    FileType["Undefined"] = "Undefined";
-    FileType["Unknown"] = "Unknown";
-    FileType["Image"] = "Image";
-    FileType["Audio"] = "Audio";
-    FileType["Video"] = "Video";
-    FileType["Document"] = "Document";
-    FileType["Archive"] = "Archive";
-})(FileType || (FileType = {}));
-
 /**
  * Сервис для прокидывания предрасчитанных данных для виджетов Html разметки.
  * Используется для оптимизации Http запросов за данными.
@@ -1847,7 +2418,7 @@ class XmlTagViewComponent {
         return this._options.definedCustomTags.hasOwnProperty(item.tagName);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: XmlTagViewComponent, deps: [{ token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: XmlTagViewComponent, isStandalone: true, selector: "croco-html-xml-tag-view", inputs: { data: "data", dataController: "dataController" }, ngImport: i0, template: "<div>\n  @for (item of data; track $index) {\n  <div class=\"row\">\n\n    @if (item.tagName === 'text') {\n    <div>\n      <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\n    </div>\n    }\n    @else if (item.tagName === 'html-raw') {\n    <div>\n      <croco-html-raw-view [rawHtml]=\"item.data.innerHTML\"></croco-html-raw-view>\n    </div>\n    }\n    @else if (isHeaderTextTag(item)) {\n    <div>\n      <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\n    </div>\n    }\n    @else if (item.tagName === 'file-image') {\n    <div>\n      <croco-html-file-image-tag-view [item]=\"item\"></croco-html-file-image-tag-view>\n    </div>\n    }\n    @else if (item.tagName === 'custom-widget') {\n    <div>\n      <croco-html-xml-tag-custom-widget [tagData]=\"item.data\"></croco-html-xml-tag-custom-widget>\n    </div>\n    }\n    @else if (item.tagName === 'table' && item.validationResult) {\n\n    @if (item.validationResult.isSucceeded){\n    <croco-html-xml-tag-html-view [html]=\"item.data.bootstrapHtml\">\n    </croco-html-xml-tag-html-view>\n    }\n    @else {\n    <croco-html-error-banner [message]=\"item.validationResult.message\">\n    </croco-html-error-banner>\n    }\n    }\n    @else if (item.tagName === 'external-video') {\n    <div>\n      <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\n    </div>\n    }\n    @else if (item.tagName === 'download-file-button') {\n    <div>\n      <croco-html-xml-tag-download-file-button [data]=\"item\"></croco-html-xml-tag-download-file-button>\n    </div>\n    }\n    @else if (item.tagName === 'button') {\n    <div>\n      <croco-html-xml-tag-button [data]=\"item\"></croco-html-xml-tag-button>\n    </div>\n    }\n    @else if (item.tagName === 'unsupported-tag') {\n    <div class=\"red\" style=\"margin-top: 10px;\">\n      <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\n      <span>\n        {{item.data.tagString}}\n      </span>\n    </div>\n    }\n    @else if (isDefinedCustomTag(item)) {\n    <div>\n      <croco-html-defined-custom-tag-view [data]=\"item\"\n        [dataController]=\"dataController\"></croco-html-defined-custom-tag-view>\n    </div>\n    }\n\n  </div>\n  }\n</div>", styles: [".red{background-color:#c94444;color:#fff}\n"], dependencies: [{ kind: "component", type: XmlTagTextViewComponent, selector: "croco-html-xml-tag-text-view", inputs: ["item"] }, { kind: "component", type: HtmlRawViewComponent, selector: "croco-html-raw-view", inputs: ["rawHtml"] }, { kind: "component", type: XmlTagHeaderTextViewComponent, selector: "croco-html-xml-tag-header-text-view", inputs: ["item"] }, { kind: "component", type: FileImageTagViewComponent, selector: "croco-html-file-image-tag-view", inputs: ["item"] }, { kind: "component", type: XmlTagHtmlViewComponent, selector: "croco-html-xml-tag-html-view", inputs: ["html"] }, { kind: "component", type: ErrorBannerComponent, selector: "croco-html-error-banner", inputs: ["message"] }, { kind: "component", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }, { kind: "component", type: XmlTagDownloadFileButtonComponent, selector: "croco-html-xml-tag-download-file-button", inputs: ["data", "tagData"] }, { kind: "component", type: XmlTagButtonComponent, selector: "croco-html-xml-tag-button", inputs: ["data", "tagData"] }, { kind: "component", type: XmlTagCustomWidgetComponent, selector: "croco-html-xml-tag-custom-widget", inputs: ["tagData"] }, { kind: "component", type: DefinedCustomTagViewComponent, selector: "croco-html-defined-custom-tag-view", inputs: ["data", "dataController"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: XmlTagViewComponent, isStandalone: true, selector: "croco-html-xml-tag-view", inputs: { data: "data", dataController: "dataController" }, ngImport: i0, template: "<div>\n  @for (item of data; track $index) {\n  <div class=\"row\">\n\n    @if (item.tagName === 'text') {\n    <div>\n      <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\n    </div>\n    }\n    @else if (item.tagName === 'html-raw') {\n    <div>\n      <croco-html-raw-view [rawHtml]=\"item.data.innerHTML\"></croco-html-raw-view>\n    </div>\n    }\n    @else if (isHeaderTextTag(item)) {\n    <div>\n      <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\n    </div>\n    }\n    @else if (item.tagName === 'file-image') {\n    <div>\n      <croco-html-file-image-tag-view [item]=\"item\"></croco-html-file-image-tag-view>\n    </div>\n    }\n    @else if (item.tagName === 'audio-player') {\n    <div>\n      <croco-html-audio-player-tag-view [data]=\"item\"></croco-html-audio-player-tag-view>\n    </div>\n    }\n    @else if (item.tagName === 'custom-widget') {\n    <div>\n      <croco-html-xml-tag-custom-widget [tagData]=\"item.data\"></croco-html-xml-tag-custom-widget>\n    </div>\n    }\n    @else if (item.tagName === 'table' && item.validationResult) {\n\n    @if (item.validationResult.isSucceeded){\n    <croco-html-xml-tag-html-view [html]=\"item.data.bootstrapHtml\">\n    </croco-html-xml-tag-html-view>\n    }\n    @else {\n    <croco-html-error-banner [message]=\"item.validationResult.message\">\n    </croco-html-error-banner>\n    }\n    }\n    @else if (item.tagName === 'external-video') {\n    <div>\n      <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\n    </div>\n    }\n    @else if (item.tagName === 'download-file-button') {\n    <div>\n      <croco-html-xml-tag-download-file-button [data]=\"item\"></croco-html-xml-tag-download-file-button>\n    </div>\n    }\n    @else if (item.tagName === 'button') {\n    <div>\n      <croco-html-xml-tag-button [data]=\"item\"></croco-html-xml-tag-button>\n    </div>\n    }\n    @else if (item.tagName === 'unsupported-tag') {\n    <div class=\"red\" style=\"margin-top: 10px;\">\n      <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\n      <span>\n        {{item.data.tagString}}\n      </span>\n    </div>\n    }\n    @else if (isDefinedCustomTag(item)) {\n    <div>\n      <croco-html-defined-custom-tag-view [data]=\"item\"\n        [dataController]=\"dataController\"></croco-html-defined-custom-tag-view>\n    </div>\n    }\n\n  </div>\n  }\n</div>", styles: [".red{background-color:#c94444;color:#fff}\n"], dependencies: [{ kind: "component", type: XmlTagTextViewComponent, selector: "croco-html-xml-tag-text-view", inputs: ["item"] }, { kind: "component", type: HtmlRawViewComponent, selector: "croco-html-raw-view", inputs: ["rawHtml"] }, { kind: "component", type: XmlTagHeaderTextViewComponent, selector: "croco-html-xml-tag-header-text-view", inputs: ["item"] }, { kind: "component", type: FileImageTagViewComponent, selector: "croco-html-file-image-tag-view", inputs: ["item"] }, { kind: "component", type: AudioPlayerTagViewComponent, selector: "croco-html-audio-player-tag-view", inputs: ["data"] }, { kind: "component", type: XmlTagHtmlViewComponent, selector: "croco-html-xml-tag-html-view", inputs: ["html"] }, { kind: "component", type: ErrorBannerComponent, selector: "croco-html-error-banner", inputs: ["message"] }, { kind: "component", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }, { kind: "component", type: XmlTagDownloadFileButtonComponent, selector: "croco-html-xml-tag-download-file-button", inputs: ["data", "tagData"] }, { kind: "component", type: XmlTagButtonComponent, selector: "croco-html-xml-tag-button", inputs: ["data", "tagData"] }, { kind: "component", type: XmlTagCustomWidgetComponent, selector: "croco-html-xml-tag-custom-widget", inputs: ["tagData"] }, { kind: "component", type: DefinedCustomTagViewComponent, selector: "croco-html-defined-custom-tag-view", inputs: ["data", "dataController"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: XmlTagViewComponent, decorators: [{
             type: Component,
@@ -1856,6 +2427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         HtmlRawViewComponent,
                         XmlTagHeaderTextViewComponent,
                         FileImageTagViewComponent,
+                        AudioPlayerTagViewComponent,
                         XmlTagHtmlViewComponent,
                         ErrorBannerComponent,
                         XmlTagExternalVideoComponent,
@@ -1863,7 +2435,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         XmlTagButtonComponent,
                         XmlTagCustomWidgetComponent,
                         DefinedCustomTagViewComponent
-                    ], template: "<div>\n  @for (item of data; track $index) {\n  <div class=\"row\">\n\n    @if (item.tagName === 'text') {\n    <div>\n      <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\n    </div>\n    }\n    @else if (item.tagName === 'html-raw') {\n    <div>\n      <croco-html-raw-view [rawHtml]=\"item.data.innerHTML\"></croco-html-raw-view>\n    </div>\n    }\n    @else if (isHeaderTextTag(item)) {\n    <div>\n      <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\n    </div>\n    }\n    @else if (item.tagName === 'file-image') {\n    <div>\n      <croco-html-file-image-tag-view [item]=\"item\"></croco-html-file-image-tag-view>\n    </div>\n    }\n    @else if (item.tagName === 'custom-widget') {\n    <div>\n      <croco-html-xml-tag-custom-widget [tagData]=\"item.data\"></croco-html-xml-tag-custom-widget>\n    </div>\n    }\n    @else if (item.tagName === 'table' && item.validationResult) {\n\n    @if (item.validationResult.isSucceeded){\n    <croco-html-xml-tag-html-view [html]=\"item.data.bootstrapHtml\">\n    </croco-html-xml-tag-html-view>\n    }\n    @else {\n    <croco-html-error-banner [message]=\"item.validationResult.message\">\n    </croco-html-error-banner>\n    }\n    }\n    @else if (item.tagName === 'external-video') {\n    <div>\n      <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\n    </div>\n    }\n    @else if (item.tagName === 'download-file-button') {\n    <div>\n      <croco-html-xml-tag-download-file-button [data]=\"item\"></croco-html-xml-tag-download-file-button>\n    </div>\n    }\n    @else if (item.tagName === 'button') {\n    <div>\n      <croco-html-xml-tag-button [data]=\"item\"></croco-html-xml-tag-button>\n    </div>\n    }\n    @else if (item.tagName === 'unsupported-tag') {\n    <div class=\"red\" style=\"margin-top: 10px;\">\n      <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\n      <span>\n        {{item.data.tagString}}\n      </span>\n    </div>\n    }\n    @else if (isDefinedCustomTag(item)) {\n    <div>\n      <croco-html-defined-custom-tag-view [data]=\"item\"\n        [dataController]=\"dataController\"></croco-html-defined-custom-tag-view>\n    </div>\n    }\n\n  </div>\n  }\n</div>", styles: [".red{background-color:#c94444;color:#fff}\n"] }]
+                    ], template: "<div>\n  @for (item of data; track $index) {\n  <div class=\"row\">\n\n    @if (item.tagName === 'text') {\n    <div>\n      <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\n    </div>\n    }\n    @else if (item.tagName === 'html-raw') {\n    <div>\n      <croco-html-raw-view [rawHtml]=\"item.data.innerHTML\"></croco-html-raw-view>\n    </div>\n    }\n    @else if (isHeaderTextTag(item)) {\n    <div>\n      <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\n    </div>\n    }\n    @else if (item.tagName === 'file-image') {\n    <div>\n      <croco-html-file-image-tag-view [item]=\"item\"></croco-html-file-image-tag-view>\n    </div>\n    }\n    @else if (item.tagName === 'audio-player') {\n    <div>\n      <croco-html-audio-player-tag-view [data]=\"item\"></croco-html-audio-player-tag-view>\n    </div>\n    }\n    @else if (item.tagName === 'custom-widget') {\n    <div>\n      <croco-html-xml-tag-custom-widget [tagData]=\"item.data\"></croco-html-xml-tag-custom-widget>\n    </div>\n    }\n    @else if (item.tagName === 'table' && item.validationResult) {\n\n    @if (item.validationResult.isSucceeded){\n    <croco-html-xml-tag-html-view [html]=\"item.data.bootstrapHtml\">\n    </croco-html-xml-tag-html-view>\n    }\n    @else {\n    <croco-html-error-banner [message]=\"item.validationResult.message\">\n    </croco-html-error-banner>\n    }\n    }\n    @else if (item.tagName === 'external-video') {\n    <div>\n      <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\n    </div>\n    }\n    @else if (item.tagName === 'download-file-button') {\n    <div>\n      <croco-html-xml-tag-download-file-button [data]=\"item\"></croco-html-xml-tag-download-file-button>\n    </div>\n    }\n    @else if (item.tagName === 'button') {\n    <div>\n      <croco-html-xml-tag-button [data]=\"item\"></croco-html-xml-tag-button>\n    </div>\n    }\n    @else if (item.tagName === 'unsupported-tag') {\n    <div class=\"red\" style=\"margin-top: 10px;\">\n      <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\n      <span>\n        {{item.data.tagString}}\n      </span>\n    </div>\n    }\n    @else if (isDefinedCustomTag(item)) {\n    <div>\n      <croco-html-defined-custom-tag-view [data]=\"item\"\n        [dataController]=\"dataController\"></croco-html-defined-custom-tag-view>\n    </div>\n    }\n\n  </div>\n  }\n</div>", styles: [".red{background-color:#c94444;color:#fff}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [CrocoHtmlOptionsToken]
@@ -1930,7 +2502,7 @@ class ExternalVideoEditorComponent {
         this.tagData.link = src;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ExternalVideoEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ExternalVideoEditorComponent, isStandalone: true, selector: "croco-html-external-video-editor", inputs: { tag: "tag", presentOrEdit: "presentOrEdit" }, ngImport: i0, template: "@if (presentOrEdit) {\n  <div>\n    <div style=\"word-break: break-all\">\n      @switch (tagData.type) {\n        @case (ExternalVideoSupportedTypes.VkVideo) {\n          {{linkText}}: {{tagData.link}}\n        }\n        @case (ExternalVideoSupportedTypes.Youtube) {\n          {{linkText}}: {{tagData.link}}\n        }\n        @case (ExternalVideoSupportedTypes.Code) {\n          <div>\n            \u0412\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043C\u044B\u0439 \u043A\u043E\u0434 \u043F\u043B\u0435\u0435\u0440\u0430.\n          </div>\n        }\n      }\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <croco-html-xml-tag-external-video [tagData]=\"tagData\"></croco-html-xml-tag-external-video>\n  </div>\n}\n@else {\n  @if(tagData.type !== ExternalVideoSupportedTypes.Code) {\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\n          {{linkText}}\n        </mat-label>\n        <input matInput placeholder=\"{{linkText}}\"\n               autocomplete=\"off\"\n               [(ngModel)]=\"tagData.link\"\n               (ngModelChange)=\"linkChanged()\">\n      </mat-form-field>\n    </div>\n  } @else {\n    <div>\n        <mat-label>\n          {{linkText}}\n        </mat-label>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n          <textarea\n            #autosize=\"cdkTextareaAutosize\"\n            matInput\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"1\"\n            cdkAutosizeMaxRows=\"5\"\n            placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n            #textArea\n            [(ngModel)]=\"tagData.innerHtml\"\n            (ngModelChange)=\"linkChanged()\"\n          ></textarea>\n        </mat-form-field>\n\n        <mat-checkbox\n          [checked]=\"tagData.useResponsiveWrapper\"\n          (change)=\"onCheck($event.checked)\"\n        >\n          \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0430\u0434\u0430\u043F\u0442\u0438\u0432?\n        </mat-checkbox>\n    </div>\n  }\n}\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 768px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 575px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 480px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ExternalVideoEditorComponent, isStandalone: true, selector: "croco-html-external-video-editor", inputs: { tag: "tag", presentOrEdit: "presentOrEdit" }, ngImport: i0, template: "@if (presentOrEdit) {\n  <div>\n    <div style=\"word-break: break-all\">\n      @switch (tagData.type) {\n        @case (ExternalVideoSupportedTypes.VkVideo) {\n          {{linkText}}: {{tagData.link}}\n        }\n        @case (ExternalVideoSupportedTypes.Youtube) {\n          {{linkText}}: {{tagData.link}}\n        }\n        @case (ExternalVideoSupportedTypes.Code) {\n          <div>\n            \u0412\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043C\u044B\u0439 \u043A\u043E\u0434 \u043F\u043B\u0435\u0435\u0440\u0430.\n          </div>\n        }\n      }\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <croco-html-xml-tag-external-video [tagData]=\"tagData\"></croco-html-xml-tag-external-video>\n  </div>\n}\n@else {\n  @if(tagData.type !== ExternalVideoSupportedTypes.Code) {\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\n          {{linkText}}\n        </mat-label>\n        <input matInput placeholder=\"{{linkText}}\"\n               autocomplete=\"off\"\n               [(ngModel)]=\"tagData.link\"\n               (ngModelChange)=\"linkChanged()\">\n      </mat-form-field>\n    </div>\n  } @else {\n    <div>\n        <mat-label>\n          {{linkText}}\n        </mat-label>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n          <textarea\n            #autosize=\"cdkTextareaAutosize\"\n            matInput\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"1\"\n            cdkAutosizeMaxRows=\"5\"\n            placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n            #textArea\n            [(ngModel)]=\"tagData.innerHtml\"\n            (ngModelChange)=\"linkChanged()\"\n          ></textarea>\n        </mat-form-field>\n\n        <mat-checkbox\n          [checked]=\"tagData.useResponsiveWrapper\"\n          (change)=\"onCheck($event.checked)\"\n        >\n          \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0430\u0434\u0430\u043F\u0442\u0438\u0432?\n        </mat-checkbox>\n    </div>\n  }\n}\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 768px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 575px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 480px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ExternalVideoEditorComponent, decorators: [{
             type: Component,
@@ -1962,13 +2534,13 @@ class HtmlRawEditorComponent {
     onSafeHtmlChange() {
         this.safeHtml = this._sanitizer.bypassSecurityTrustHtml(this.tag.innerHtml);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HtmlRawEditorComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: HtmlRawEditorComponent, isStandalone: true, selector: "croco-html-html-raw-editor", inputs: { tag: "tag", presentOrEdit: "presentOrEdit" }, usesOnChanges: true, ngImport: i0, template: "@if (presentOrEdit) {\n    <div [innerHTML]=\"safeHtml\">\n    </div>\n}\n@else {\n  <div>\n    <div style=\"height: 10px;\">\n    </div>\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\n          \u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\n        </mat-label>\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n          cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\"\n          [(ngModel)]=\"tag.innerHtml\"\n          (ngModelChange)=\"onSafeHtmlChange()\"\n        ></textarea>\n      </mat-form-field>\n    </div>\n  </div>\n}\n\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 768px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 575px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 480px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HtmlRawEditorComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: HtmlRawEditorComponent, isStandalone: true, selector: "croco-html-html-raw-editor", inputs: { tag: "tag", presentOrEdit: "presentOrEdit" }, usesOnChanges: true, ngImport: i0, template: "@if (presentOrEdit) {\n    <div [innerHTML]=\"safeHtml\">\n    </div>\n}\n@else {\n  <div>\n    <div style=\"height: 10px;\">\n    </div>\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\n          \u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\n        </mat-label>\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n          cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\"\n          [(ngModel)]=\"tag.innerHtml\"\n          (ngModelChange)=\"onSafeHtmlChange()\"\n        ></textarea>\n      </mat-form-field>\n    </div>\n  </div>\n}\n\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 768px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 575px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 480px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HtmlRawEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'croco-html-html-raw-editor', standalone: true, imports: [MatFormField, MatLabel, MatInput, CdkTextareaAutosize, FormsModule], template: "@if (presentOrEdit) {\n    <div [innerHTML]=\"safeHtml\">\n    </div>\n}\n@else {\n  <div>\n    <div style=\"height: 10px;\">\n    </div>\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\n          \u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\n        </mat-label>\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n          cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\"\n          [(ngModel)]=\"tag.innerHtml\"\n          (ngModelChange)=\"onSafeHtmlChange()\"\n        ></textarea>\n      </mat-form-field>\n    </div>\n  </div>\n}\n\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 768px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 575px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 480px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { tag: [{
+        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }], propDecorators: { tag: [{
                 type: Input,
                 args: [{ required: true }]
             }], presentOrEdit: [{
@@ -1976,48 +2548,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: [{ required: true }]
             }] } });
 
-class PublicFilesQueryService {
-    constructor(_httpClient, baseUrl) {
-        this._httpClient = _httpClient;
-        this._baseControllerUrl = `${baseUrl}Api/Files`;
-    }
-    search(model) {
-        return this._httpClient.post(`${this._baseControllerUrl}/GetFiles`, model);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PublicFilesQueryService, deps: [{ token: i1.HttpClient }, { token: 'BASE_URL' }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PublicFilesQueryService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PublicFilesQueryService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['BASE_URL']
-                }] }] });
-
-class PrivateFilesQueryService {
-    constructor(_httpClient, baseUrl) {
-        this._httpClient = _httpClient;
-        this._baseControllerUrl = `${baseUrl}api/private-files/query`;
-    }
-    search(model) {
-        return this._httpClient.post(`${this._baseControllerUrl}/search`, model);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PrivateFilesQueryService, deps: [{ token: i1.HttpClient }, { token: 'BASE_URL' }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PrivateFilesQueryService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PrivateFilesQueryService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['BASE_URL']
-                }] }] });
-
 class FileIdSelectComponent {
     get crocoHtmlEditorFileOptions() {
         return this._htmlSettingsService.get();
@@ -2075,7 +2605,7 @@ class FileIdSelectComponent {
         this.loadFiles();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FileIdSelectComponent, deps: [{ token: PublicFilesQueryService }, { token: PrivateFilesQueryService }, { token: CrocoHtmlFileOptionsService }, { token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FileIdSelectComponent, isStandalone: true, selector: "croco-html-file-id-select", inputs: { labelText: "labelText", fileId: "fileId" }, outputs: { fileId: "fileId", onFileIdChanged: "onFileIdChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"file-id\">\n    <div class=\"form-group\">\n        <label for=\"fileName\">{{labelText}}</label>\n        <ng-select [(ngModel)]=\"fileId\" (ngModelChange)=\"onModelChanged($event)\" [items]=\"files\" #select\n            bindLabel=\"fileName\" (search)=\"onSearchChanged($event)\" [loading]=\"loading\" [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\n            dropdownPosition=\"auto\" [bindValue]=\"'fileId'\" labelForId=\"fileName\" placeholder=\"\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B\"\n            [virtualScroll]=\"true\">\n            <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n              <div class=\"file-id__container\">\n                <div class=\"file-id__text-container\">\n                  <div>\n                    <span class=\"h5\">\u0424\u0430\u0439\u043B: </span>\n                    <span class=\"h5\"><b>{{item.fileName}}</b></span>\n                  </div>\n                  <div>\n                    <small>\n                        <span>\n                            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: <b>{{item.fileId }}</b>\n                        </span>\n                    </small>\n                  </div>\n                </div>\n                <div class=\"file-id__img\">\n                  <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc(item.fileId)\" />\n                </div>\n              </div>\n\n            </ng-template>\n        </ng-select>\n    </div>\n</div>\n\n<div>\n    \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: {{fileId}}\n</div>\n", styles: [".file-id__container{display:flex;align-items:center;justify-content:space-between;gap:10px}@media (max-width: 768px){.file-id__container{align-items:unset;flex-direction:column}}.file-id__text-container{display:flex;flex-direction:column}.file-id__text-container b{word-break:break-word;white-space:normal}@media (max-width: 768px){.file-id__text-container b{font-size:14px}}@media (max-width: 768px){.file-id__text-container span{font-size:14px}}.file-id__img img{width:100px;height:100px}\n"], dependencies: [{ kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i4.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: i4.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FileIdSelectComponent, isStandalone: true, selector: "croco-html-file-id-select", inputs: { labelText: "labelText", fileId: "fileId" }, outputs: { fileId: "fileId", onFileIdChanged: "onFileIdChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"file-id\">\n    <div class=\"form-group\">\n        <label for=\"fileName\">{{labelText}}</label>\n        <ng-select [(ngModel)]=\"fileId\" (ngModelChange)=\"onModelChanged($event)\" [items]=\"files\" #select\n            bindLabel=\"fileName\" (search)=\"onSearchChanged($event)\" [loading]=\"loading\" [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\n            dropdownPosition=\"auto\" [bindValue]=\"'fileId'\" labelForId=\"fileName\" placeholder=\"\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B\"\n            [virtualScroll]=\"true\">\n            <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n              <div class=\"file-id__container\">\n                <div class=\"file-id__text-container\">\n                  <div>\n                    <span class=\"h5\">\u0424\u0430\u0439\u043B: </span>\n                    <span class=\"h5\"><b>{{item.fileName}}</b></span>\n                  </div>\n                  <div>\n                    <small>\n                        <span>\n                            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: <b>{{item.fileId }}</b>\n                        </span>\n                    </small>\n                  </div>\n                </div>\n                <div class=\"file-id__img\">\n                  <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc(item.fileId)\" />\n                </div>\n              </div>\n\n            </ng-template>\n        </ng-select>\n    </div>\n</div>\n\n<div>\n    \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: {{fileId}}\n</div>\n", styles: [".file-id__container{display:flex;align-items:center;justify-content:space-between;gap:10px}@media (max-width: 768px){.file-id__container{align-items:unset;flex-direction:column}}.file-id__text-container{display:flex;flex-direction:column}.file-id__text-container b{word-break:break-word;white-space:normal}@media (max-width: 768px){.file-id__text-container b{font-size:14px}}@media (max-width: 768px){.file-id__text-container span{font-size:14px}}.file-id__img img{width:100px;height:100px}\n"], dependencies: [{ kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i5.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: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FileIdSelectComponent, decorators: [{
             type: Component,
@@ -2159,7 +2689,7 @@ class ImageEditorComponent {
         this.unsubscribe.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ImageEditorComponent, deps: [{ token: CrocoHtmlOptionsToken }, { token: ScreenWidthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ImageEditorComponent, isStandalone: true, selector: "croco-html-image-editor", inputs: { tag: "tag", presentOrEdit: "presentOrEdit" }, ngImport: i0, template: "<div>\n  <div style=\"height: 10px;\">\n  </div>\n\n  @if (hasImageError) {\n    <div class=\"error-block\">\n      \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E \u043F\u043E \u0443\u043A\u0430\u0437\u0430\u043D\u043D\u043E\u043C\u0443 \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E \u0444\u0430\u0439\u043B \u043D\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u043B\u0438 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043D\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.\n    </div>\n  }\n\n  @if (hasFileId() && !hasImageError) {\n    <div>\n      <img\n        [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%', 'max-width': imageMaxWidth ? imageMaxWidth + 'px' : '100%', }\"\n        class=\"mx-auto d-block img-fluid\" [src]=\"getSrc()\" (error)=\"onErrorHandler()\" alt=\"photo\"/>\n    </div>\n  }\n\n  @if (!hasFileId()) {\n    <div>\n      <h5>[\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E]</h5>\n    </div>\n  }\n\n  @if(!presentOrEdit) {\n    <mat-slide-toggle style=\"padding: 10px 0\" [(ngModel)]=\"isShowMediaRequest\">\u041F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C \u043C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B</mat-slide-toggle>\n  }\n\n  @if(isShowMediaRequest) {\n    <div style=\"display: flex; flex-direction: column; gap: 20px\">\n      <div class=\"media-request__header\">\n        <span>\u041C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B:</span>\n        @if (!presentOrEdit) {\n          <button (click)=\"addNewMediaRequest()\" class=\"w-30\" mat-icon-button color=\"primary\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n      </div>\n      @for (request of requests; track $index) {\n        <div class=\"media-request__container\">\n          @if (presentOrEdit) {\n            <div style=\"display: flex; flex-direction: column; gap: 5px\">\n              <span class=\"w-100\">\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.minScreenWidth}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.maxScreenWidth}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageHeight}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageWidth}}</span>\n            </div>\n          }\n          @else {\n            <div style=\"width: 100%\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.minScreenWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxScreenWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxImageHeight\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxImageWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n            </div>\n\n            <button (click)=\"deleteMediaRequest($index)\" class=\"w-30\" mat-icon-button color=\"warn\">\n              <mat-icon>delete</mat-icon>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n\n@if (!presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\"></div>\n    <div style=\"overflow-x:auto;\">\n      <mat-button-toggle-group [(ngModel)]=\"searchOrEdit\">\n        <mat-button-toggle value=\"search\">\n          \u0418\u0441\u043A\u0430\u0442\u044C \u0444\u0430\u0439\u043B <mat-icon>search</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"edit\">\n          \u0423\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u043E \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443 <mat-icon>settings</mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <div [hidden]=\"searchOrEdit !== 'search'\">\n      <croco-html-file-id-select\n        [labelText]=\"'\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B'\"\n        [fileId]=\"fileId\"\n        (onFileIdChanged)=\"onFileIdChanged($event)\">\n      </croco-html-file-id-select>\n    </div>\n    <div [hidden]=\"searchOrEdit !== 'edit'\">\n      <div>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\n            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\n          </mat-label>\n          <input matInput placeholder=\"\u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\" new-autocomplete=\"off\" autocomplete=\"off\"\n            [(ngModel)]=\"fileId\"\n            (ngModelChange)=\"onFileIdChanged($event)\">\n        </mat-form-field>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".error-block{background-color:#f32323;color:#fff;text-align:center;border-radius:10px;padding:10px}.media-request__header{align-items:center;display:flex;width:100%;justify-content:space-between}.media-request__container{display:flex;align-items:center;border-bottom:1px solid rgba(128,128,128,.7);padding-bottom:10px}@media screen and (max-width: 768px){mat-button-toggle-group{display:flex;flex-direction:column}}\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$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FileIdSelectComponent, selector: "croco-html-file-id-select", inputs: ["labelText", "fileId"], outputs: ["fileId", "onFileIdChanged"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ImageEditorComponent, isStandalone: true, selector: "croco-html-image-editor", inputs: { tag: "tag", presentOrEdit: "presentOrEdit" }, ngImport: i0, template: "<div>\n  <div style=\"height: 10px;\">\n  </div>\n\n  @if (hasImageError) {\n    <div class=\"error-block\">\n      \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E \u043F\u043E \u0443\u043A\u0430\u0437\u0430\u043D\u043D\u043E\u043C\u0443 \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E \u0444\u0430\u0439\u043B \u043D\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u043B\u0438 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043D\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.\n    </div>\n  }\n\n  @if (hasFileId() && !hasImageError) {\n    <div>\n      <img\n        [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%', 'max-width': imageMaxWidth ? imageMaxWidth + 'px' : '100%', }\"\n        class=\"mx-auto d-block img-fluid\" [src]=\"getSrc()\" (error)=\"onErrorHandler()\" alt=\"photo\"/>\n    </div>\n  }\n\n  @if (!hasFileId()) {\n    <div>\n      <h5>[\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E]</h5>\n    </div>\n  }\n\n  @if(!presentOrEdit) {\n    <mat-slide-toggle style=\"padding: 10px 0\" [(ngModel)]=\"isShowMediaRequest\">\u041F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C \u043C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B</mat-slide-toggle>\n  }\n\n  @if(isShowMediaRequest) {\n    <div style=\"display: flex; flex-direction: column; gap: 20px\">\n      <div class=\"media-request__header\">\n        <span>\u041C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B:</span>\n        @if (!presentOrEdit) {\n          <button (click)=\"addNewMediaRequest()\" class=\"w-30\" mat-icon-button color=\"primary\">\n            <mat-icon>add</mat-icon>\n          </button>\n        }\n      </div>\n      @for (request of requests; track $index) {\n        <div class=\"media-request__container\">\n          @if (presentOrEdit) {\n            <div style=\"display: flex; flex-direction: column; gap: 5px\">\n              <span class=\"w-100\">\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.minScreenWidth}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.maxScreenWidth}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageHeight}}</span>\n              <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageWidth}}</span>\n            </div>\n          }\n          @else {\n            <div style=\"width: 100%\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.minScreenWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxScreenWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxImageHeight\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n\n              <mat-form-field class=\"w-100\">\n                <mat-label>\n                  \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n                </mat-label>\n                <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n                       autocomplete=\"off\"\n                       [(ngModel)]=\"request.maxImageWidth\"\n                       (ngModelChange)=\"requestChanged()\">\n              </mat-form-field>\n            </div>\n\n            <button (click)=\"deleteMediaRequest($index)\" class=\"w-30\" mat-icon-button color=\"warn\">\n              <mat-icon>delete</mat-icon>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n\n@if (!presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\"></div>\n    <div style=\"overflow-x:auto;\">\n      <mat-button-toggle-group [(ngModel)]=\"searchOrEdit\">\n        <mat-button-toggle value=\"search\">\n          \u0418\u0441\u043A\u0430\u0442\u044C \u0444\u0430\u0439\u043B <mat-icon>search</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"edit\">\n          \u0423\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u043E \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443 <mat-icon>settings</mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <div [hidden]=\"searchOrEdit !== 'search'\">\n      <croco-html-file-id-select\n        [labelText]=\"'\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B'\"\n        [fileId]=\"fileId\"\n        (onFileIdChanged)=\"onFileIdChanged($event)\">\n      </croco-html-file-id-select>\n    </div>\n    <div [hidden]=\"searchOrEdit !== 'edit'\">\n      <div>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\n            \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\n          </mat-label>\n          <input matInput placeholder=\"\u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\" new-autocomplete=\"off\" autocomplete=\"off\"\n            [(ngModel)]=\"fileId\"\n            (ngModelChange)=\"onFileIdChanged($event)\">\n        </mat-form-field>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".error-block{background-color:#f32323;color:#fff;text-align:center;border-radius:10px;padding:10px}.media-request__header{align-items:center;display:flex;width:100%;justify-content:space-between}.media-request__container{display:flex;align-items:center;border-bottom:1px solid rgba(128,128,128,.7);padding-bottom:10px}@media screen and (max-width: 768px){mat-button-toggle-group{display:flex;flex-direction:column}}\n"], dependencies: [{ kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FileIdSelectComponent, selector: "croco-html-file-id-select", inputs: ["labelText", "fileId"], outputs: ["fileId", "onFileIdChanged"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ImageEditorComponent, decorators: [{
             type: Component,
@@ -2199,6 +2729,7 @@ class DefaultTags {
     ]; }
     static { this.tags = [
         { tag: FileImageTagDataConsts.TagName, displayValue: 'Изображение', isCustom: false },
+        { tag: FileAudioTagDataConsts.TagName, displayValue: 'Аудио', isCustom: false },
         { tag: ExternalVideoTagDataConsts.TagName, displayValue: 'Видео', isCustom: false },
         { tag: DownloadButtonTagDataConsts.TagName, displayValue: 'Кнопка для скачивания', isCustom: false },
         { tag: ButtonTagDataConsts.TagName, displayValue: 'Кнопка', isCustom: false },
@@ -2233,7 +2764,7 @@ class DownloadFileButtonEditorComponent {
         this.tag.attributes = this.tagData;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DownloadFileButtonEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DownloadFileButtonEditorComponent, isStandalone: true, selector: "croco-html-download-file-button-editor", inputs: { tag: "tag", presentOrEdit: "presentOrEdit" }, ngImport: i0, template: "@if (presentOrEdit) {\n  <div>\n    <div>\n      \u0421\u0441\u044B\u043B\u043A\u0430 \u0434\u043B\u044F \u0441\u043A\u0430\u0447\u0438\u0432\u0430\u043D\u0438\u044F: {{tagData.link}}\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <div>\n      \u0422\u0435\u043A\u0441\u0442 \u043A\u043D\u043E\u043F\u043A\u0438: {{tagData.title}}\n    </div>\n    <div style=\"height: 20px;\"></div>\n    <croco-html-xml-tag-download-file-button [tagData]=\"tagData\"></croco-html-xml-tag-download-file-button>\n  </div>\n}\n@else {\n      <div>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\n            \u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 \u0441\u043A\u0430\u0447\u0438\u0432\u0430\u043D\u0438\u0435\n          </mat-label>\n          <input matInput placeholder=\"\u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 \u0441\u043A\u0430\u0447\u0438\u0432\u0430\u043D\u0438\u0435\"\n                 autocomplete=\"off\"\n                 [(ngModel)]=\"tagData.link\"\n                 (ngModelChange)=\"linkChanged()\">\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>\n            \u0422\u0435\u043A\u0441\u0442 \u043D\u0430 \u043A\u043D\u043E\u043F\u043A\u0435\n          </mat-label>\n          <input matInput placeholder=\"\u0422\u0435\u043A\u0441\u0442 \u043D\u0430 \u043A\u043D\u043E\u043F\u043A\u0435\"\n                 autocomplete=\"off\"\n                 [(ngModel)]=\"tagData.title\"\n                 (ngModelChange)=\"linkChanged()\">\n        </mat-form-field>\n      </div>\n}\n", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XmlTagDownloadFileButtonComponent, selector: "croco-html-xml-tag-download-file-button", inputs: ["data", "tagData"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DownloadFileButtonEditorComponent, isStandalone: true, selector: "croco-html-download-file-button-editor", inputs: { tag: "tag", presentOrEdit: "presentOrEdit" }, ngImport: i0, template: "@if (presentOrEdit) {\n  <div>\n    <div>\n      \u0421\u0441\u044B\u043B\u043A\u0430 \u0434\u043B\u044F \u0441\u043A\u0430\u0447\u0438\u0432\u0430\u043D\u0438\u044F: {{tagData.link}}\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <div>\n      \u0422\u0435\u043A\u0441\u0442 \u043A\u043D\u043E\u043F\u043A\u0438: {{tagData.title}}\n    </div>\n    <div style=\"height: 20px;\"></div>\n    <croco-html-xml-tag-download-file-button [tagData]=\"tagData\"></croco-html-xml-tag-download-file-button>\n  </div>\n}\n@else {\n      <div>\n        <mat-form-field class=\"w-100\">\n          <mat-label>\n            \u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 \u0441\u043A\u0430\u0447\u0438\u0432\u0430\u043D\u0438\u0435\n          </mat-label>\n          <input matInput placeholder=\"\u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 \u0441\u043A\u0430\u0447\u0438\u0432\u0430\u043D\u0438\u0435\"\n                 autocomplete=\"off\"\n                 [(ngModel)]=\"tagData.link\"\n                 (ngModelChange)=\"linkChanged()\">\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>\n            \u0422\u0435\u043A\u0441\u0442 \u043D\u0430 \u043A\u043D\u043E\u043F\u043A\u0435\n          </mat-label>\n          <input matInput placeholder=\"\u0422\u0435\u043A\u0441\u0442 \u043D\u0430 \u043A\u043D\u043E\u043F\u043A\u0435\"\n                 autocomplete=\"off\"\n                 [(ngModel)]=\"tagData.title\"\n                 (ngModelChange)=\"linkChanged()\">\n        </mat-form-field>\n      </div>\n}\n", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XmlTagDownloadFileButtonComponent, selector: "croco-html-xml-tag-download-file-button", inputs: ["data", "tagData"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i1$4.MatLabel, selector: "mat-label" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DownloadFileButtonEditorComponent, decorators: [{
             type: Component,
@@ -2288,7 +2819,7 @@ class TextEditorComponent {
         this.unsubscribe.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TextEditorComponent, isStandalone: true, selector: "croco-html-text-editor", inputs: { tagService: "tagService" }, ngImport: i0, template: "@if (presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\">\n    </div>\n    @if (_horizontalAlignment === TextAlignment.Left) {\n      <div style=\"text-align: left;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n    @else if (_horizontalAlignment === TextAlignment.Right) {\n      <div style=\"text-align: right;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n    @else if (_horizontalAlignment === TextAlignment.Center) {\n      <div style=\"text-align: center;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n  </div>\n}\n@else {\n  <div>\n    <div style=\"overflow-x: auto;\">\n      <mat-button-toggle-group [(ngModel)]=\"_horizontalAlignment\" (ngModelChange)=\"changeData()\">\n        <mat-button-toggle value=\"center\">\n          \u041F\u043E \u0446\u0435\u043D\u0442\u0440\u0443 <mat-icon>format_align_center</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"left\">\n          \u0421\u043B\u0435\u0432\u0430 <mat-icon>format_align_left</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"right\">\n          \u0421\u043F\u0440\u0430\u0432\u0430 <mat-icon> format_align_right</mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"height: 10px;\">\n    </div>\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430</mat-label>\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n          cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430\"\n        [(ngModel)]=\"_tag.innerHtml\" (ngModelChange)=\"changeData()\"></textarea>\n      </mat-form-field>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TextEditorComponent, isStandalone: true, selector: "croco-html-text-editor", inputs: { tagService: "tagService" }, ngImport: i0, template: "@if (presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\">\n    </div>\n    @if (_horizontalAlignment === TextAlignment.Left) {\n      <div style=\"text-align: left;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n    @else if (_horizontalAlignment === TextAlignment.Right) {\n      <div style=\"text-align: right;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n    @else if (_horizontalAlignment === TextAlignment.Center) {\n      <div style=\"text-align: center;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n  </div>\n}\n@else {\n  <div>\n    <div style=\"overflow-x: auto;\">\n      <mat-button-toggle-group [(ngModel)]=\"_horizontalAlignment\" (ngModelChange)=\"changeData()\">\n        <mat-button-toggle value=\"center\">\n          \u041F\u043E \u0446\u0435\u043D\u0442\u0440\u0443 <mat-icon>format_align_center</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"left\">\n          \u0421\u043B\u0435\u0432\u0430 <mat-icon>format_align_left</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"right\">\n          \u0421\u043F\u0440\u0430\u0432\u0430 <mat-icon> format_align_right</mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"height: 10px;\">\n    </div>\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430</mat-label>\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n          cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430\"\n        [(ngModel)]=\"_tag.innerHtml\" (ngModelChange)=\"changeData()\"></textarea>\n      </mat-form-field>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TextEditorComponent, decorators: [{
             type: Component,
@@ -2326,7 +2857,7 @@ class ButtonEditorComponent {
         this.tag.attributes = this.tagData;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ButtonEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ButtonEditorComponent, isStandalone: true, selector: "croco-html-button-editor", inputs: { tag: "tag", presentOrEdit: "presentOrEdit" }, ngImport: i0, template: "@if (presentOrEdit) {\n  <div>\n    <div>\n      \u0422\u0438\u043F: {{tagData.type}}\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <div>\n      \u0422\u0435\u043A\u0441\u0442: {{tagData.text}}\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <div>\n      \u041E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A \u043D\u0430\u0436\u0430\u0442\u0438\u044F: {{tagData.click}}\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <croco-html-xml-tag-button [tagData]=\"tagData\"></croco-html-xml-tag-button>\n  </div>\n} @else {\n  <div>\n    <mat-form-field class=\"w-100\">\n      <mat-label>\n        \u0422\u0438\u043F\n      </mat-label>\n      <input matInput placeholder=\"\u0422\u0438\u043F\"\n             autocomplete=\"off\"\n             [(ngModel)]=\"tagData.type\"\n             (ngModelChange)=\"linkChanged()\">\n    </mat-form-field>\n\n    <mat-form-field class=\"w-100\">\n      <mat-label>\n        \u0422\u0435\u043A\u0441\u0442\n      </mat-label>\n      <input matInput placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n             autocomplete=\"off\"\n             [(ngModel)]=\"tagData.text\"\n             (ngModelChange)=\"linkChanged()\">\n    </mat-form-field>\n\n    <mat-form-field class=\"w-100\">\n      <mat-label>\n        \u041E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A \u043D\u0430\u0436\u0430\u0442\u0438\u044F\n      </mat-label>\n      <input matInput placeholder=\"\u041E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A \u043D\u0430\u0436\u0430\u0442\u0438\u044F\"\n             autocomplete=\"off\"\n             [(ngModel)]=\"tagData.click\"\n             (ngModelChange)=\"linkChanged()\">\n    </mat-form-field>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: XmlTagButtonComponent, selector: "croco-html-xml-tag-button", inputs: ["data", "tagData"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ButtonEditorComponent, isStandalone: true, selector: "croco-html-button-editor", inputs: { tag: "tag", presentOrEdit: "presentOrEdit" }, ngImport: i0, template: "@if (presentOrEdit) {\n  <div>\n    <div>\n      \u0422\u0438\u043F: {{tagData.type}}\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <div>\n      \u0422\u0435\u043A\u0441\u0442: {{tagData.text}}\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <div>\n      \u041E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A \u043D\u0430\u0436\u0430\u0442\u0438\u044F: {{tagData.click}}\n    </div>\n    <div style=\"height: 10px;\"></div>\n    <croco-html-xml-tag-button [tagData]=\"tagData\"></croco-html-xml-tag-button>\n  </div>\n} @else {\n  <div>\n    <mat-form-field class=\"w-100\">\n      <mat-label>\n        \u0422\u0438\u043F\n      </mat-label>\n      <input matInput placeholder=\"\u0422\u0438\u043F\"\n             autocomplete=\"off\"\n             [(ngModel)]=\"tagData.type\"\n             (ngModelChange)=\"linkChanged()\">\n    </mat-form-field>\n\n    <mat-form-field class=\"w-100\">\n      <mat-label>\n        \u0422\u0435\u043A\u0441\u0442\n      </mat-label>\n      <input matInput placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n             autocomplete=\"off\"\n             [(ngModel)]=\"tagData.text\"\n             (ngModelChange)=\"linkChanged()\">\n    </mat-form-field>\n\n    <mat-form-field class=\"w-100\">\n      <mat-label>\n        \u041E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A \u043D\u0430\u0436\u0430\u0442\u0438\u044F\n      </mat-label>\n      <input matInput placeholder=\"\u041E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A \u043D\u0430\u0436\u0430\u0442\u0438\u044F\"\n             autocomplete=\"off\"\n             [(ngModel)]=\"tagData.click\"\n             (ngModelChange)=\"linkChanged()\">\n    </mat-form-field>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: XmlTagButtonComponent, selector: "croco-html-xml-tag-button", inputs: ["data", "tagData"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ButtonEditorComponent, decorators: [{
             type: Component,
@@ -2361,7 +2892,7 @@ class CustomWidgetEditorComponent {
         this.tag.attributes = CustomWidgetTagService.ExtractCustomWidgetAttributes(this.tagData);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CustomWidgetEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CustomWidgetEditorComponent, isStandalone: true, selector: "croco-html-custom-widget-editor", inputs: { tag: "tag", presentOrEdit: "presentOrEdit" }, ngImport: i0, template: "@if (presentOrEdit) {\n<div>\n  <div>\n    <b>type:</b> {{tagData.type}}\n  </div>\n  <div style=\"height: 10px;\"></div>\n  <div>\n    <b>data-id:</b> {{tagData.dataId}}\n  </div>\n  <div style=\"height: 10px;\"></div>\n  <div>\n    <b>widget-id:</b> {{tagData.widgetId}}\n  </div>\n  <div style=\"height: 10px;\"></div>\n  <croco-html-xml-tag-custom-widget [tagData]=\"tagData\"></croco-html-xml-tag-custom-widget>\n</div>\n} @else {\n<div>\n  <mat-form-field class=\"w-100\">\n    <mat-label>\n      type\n    </mat-label>\n    <input matInput placeholder=\"type\" autocomplete=\"off\" [(ngModel)]=\"tagData.type\" (ngModelChange)=\"dataChanged()\">\n  </mat-form-field>\n\n  <mat-form-field class=\"w-100\">\n    <mat-label>\n      data-id\n    </mat-label>\n    <input matInput placeholder=\"data-id\" autocomplete=\"off\" [(ngModel)]=\"tagData.dataId\"\n      (ngModelChange)=\"dataChanged()\">\n  </mat-form-field>\n\n  <mat-form-field class=\"w-100\">\n    <mat-label>\n      widget-id\n    </mat-label>\n    <input matInput placeholder=\"widget-id\" autocomplete=\"off\" [(ngModel)]=\"tagData.widgetId\"\n      (ngModelChange)=\"dataChanged()\">\n  </mat-form-field>\n</div>\n}", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: XmlTagCustomWidgetComponent, selector: "croco-html-xml-tag-custom-widget", inputs: ["tagData"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CustomWidgetEditorComponent, isStandalone: true, selector: "croco-html-custom-widget-editor", inputs: { tag: "tag", presentOrEdit: "presentOrEdit" }, ngImport: i0, template: "@if (presentOrEdit) {\n<div>\n  <div>\n    <b>type:</b> {{tagData.type}}\n  </div>\n  <div style=\"height: 10px;\"></div>\n  <div>\n    <b>data-id:</b> {{tagData.dataId}}\n  </div>\n  <div style=\"height: 10px;\"></div>\n  <div>\n    <b>widget-id:</b> {{tagData.widgetId}}\n  </div>\n  <div style=\"height: 10px;\"></div>\n  <croco-html-xml-tag-custom-widget [tagData]=\"tagData\"></croco-html-xml-tag-custom-widget>\n</div>\n} @else {\n<div>\n  <mat-form-field class=\"w-100\">\n    <mat-label>\n      type\n    </mat-label>\n    <input matInput placeholder=\"type\" autocomplete=\"off\" [(ngModel)]=\"tagData.type\" (ngModelChange)=\"dataChanged()\">\n  </mat-form-field>\n\n  <mat-form-field class=\"w-100\">\n    <mat-label>\n      data-id\n    </mat-label>\n    <input matInput placeholder=\"data-id\" autocomplete=\"off\" [(ngModel)]=\"tagData.dataId\"\n      (ngModelChange)=\"dataChanged()\">\n  </mat-form-field>\n\n  <mat-form-field class=\"w-100\">\n    <mat-label>\n      widget-id\n    </mat-label>\n    <input matInput placeholder=\"widget-id\" autocomplete=\"off\" [(ngModel)]=\"tagData.widgetId\"\n      (ngModelChange)=\"dataChanged()\">\n  </mat-form-field>\n</div>\n}", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: XmlTagCustomWidgetComponent, selector: "croco-html-xml-tag-custom-widget", inputs: ["tagData"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CustomWidgetEditorComponent, decorators: [{
             type: Component,
@@ -2380,6 +2911,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: [{ required: true }]
             }] } });
 
+class TagEditorService {
+    constructor() {
+        this.tag$ = new BehaviorSubject(null);
+        this.presentOrEdit$ = new BehaviorSubject(true);
+    }
+}
+
 class DefinedCustomEditorBlockComponent {
     set tagService(data) {
         this._tagService = data;
@@ -2420,7 +2958,7 @@ class DefinedCustomEditorBlockComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DefinedCustomEditorBlockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-defined-custom-editor-block', imports: [], template: "<ng-container #container>\n    @if (!useDynamicComponent) {\n    <div>\n        \u0420\u0435\u0434\u0430\u043A\u0442\u043E\u0440 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0438 \u0434\u043B\u044F {{_tag.tagDescription.tag}} \u043D\u0435 \u043E\u043F\u0438\u0441\u0430\u043D.\n    </div>\n    <div>\n        \u0423\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u0435 CrocoHtmlOptions.definedCustomTagViewRenderers[{{_tag.tagDescription.tag}}].editorComponent\n    </div>\n    }\n</ng-container>" }]
+            args: [{ selector: 'croco-html-defined-custom-editor-block', imports: [], standalone: true, template: "<ng-container #container>\n    @if (!useDynamicComponent) {\n    <div>\n        \u0420\u0435\u0434\u0430\u043A\u0442\u043E\u0440 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0438 \u0434\u043B\u044F {{_tag.tagDescription.tag}} \u043D\u0435 \u043E\u043F\u0438\u0441\u0430\u043D.\n    </div>\n    <div>\n        \u0423\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u0435 CrocoHtmlOptions.definedCustomTagViewRenderers[{{_tag.tagDescription.tag}}].editorComponent\n    </div>\n    }\n</ng-container>" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [CrocoHtmlOptionsToken]
@@ -2432,13 +2970,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: [{ required: true }]
             }] } });
 
-class TagEditorService {
-    constructor() {
-        this.tag$ = new BehaviorSubject(null);
-        this.presentOrEdit$ = new BehaviorSubject(true);
-    }
-}
-
 class MainEditorBlockComponent {
     set tag(data) {
         this._tag = data;
@@ -2481,13 +3012,14 @@ class MainEditorBlockComponent {
         this.unsubscribe.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MainEditorBlockComponent, deps: [{ token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MainEditorBlockComponent, isStandalone: true, selector: "croco-html-main-editor-block", inputs: { tag: "tag" }, outputs: { onTagSaved: "onTagSaved", onTagRemoved: "onTagRemoved" }, ngImport: i0, template: "<div class=\"main-editor-block\">\n  <div class=\"editor-container\">\n    @if (textTags.includes(_tag.tagDescription.tag)) {\n    <div>\n      <croco-html-text-editor [tagService]=\"_tagService\">\n      </croco-html-text-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'file-image') {\n    <div>\n      <croco-html-image-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-image-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'custom-widget') {\n    <div>\n      <croco-html-custom-widget-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-custom-widget-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'external-video') {\n    <div>\n      <croco-html-external-video-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-external-video-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'download-file-button') {\n    <div>\n      <croco-html-download-file-button-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-download-file-button-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'button') {\n    <div>\n      <croco-html-button-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-button-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'html-raw') {\n    <div>\n      <croco-html-html-raw-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-html-raw-editor>\n    </div>\n    }\n    @else if (isDefinedCustomTag()) {\n    <div>\n      <croco-html-defined-custom-editor-block [tagService]=\"_tagService\"></croco-html-defined-custom-editor-block>\n    </div>\n    }\n    @else {\n    <div>\n      {{_tag.tagDescription.tag}} \u043D\u0435 \u043F\u043E\u043A\u0430\u0437\u0430\u043D\n    </div>\n    <div>\n      {{_tag | json}}\n    </div>\n    }\n\n  </div>\n\n  <div class=\"d-flex justify-content-between\">\n    <div class=\"d-flex justify-content-end align-self-center\">\n      <div style=\"margin-left: 16px;min-width: 96px\">\n        @if (presentOrEdit) {\n        <button (click)=\"cancelSave()\" mat-icon-button>\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M14.4374 0C15.0921 0 15.7197 0.261421 16.1781 0.723424L19.279 3.82432C19.7407 4.286 20.0001 4.91217 20.0001 5.56508C20.0001 6.21799 19.7407 6.84416 19.279 7.30584L7.95751 18.6238C7.25903 19.4295 6.2689 19.9245 5.1346 20.0023H0V19.0023L0.00324754 14.7873C0.0884381 13.7328 0.578667 12.7523 1.3265 12.0934L12.6954 0.72463C13.1564 0.260831 13.7834 0 14.4374 0ZM5.06401 18.0048C5.59823 17.967 6.09551 17.7184 6.49482 17.2616L14.0567 9.69971L10.3024 5.94518L2.69613 13.5496C2.29098 13.9079 2.04034 14.4092 2.00003 14.8678V18.0029L5.06401 18.0048ZM11.7167 4.53114L15.471 8.28549L17.8648 5.89162C17.9514 5.80502 18.0001 5.68756 18.0001 5.56508C18.0001 5.4426 17.9514 5.32514 17.8648 5.23854L14.7612 2.13486C14.6755 2.04855 14.559 2 14.4374 2C14.3158 2 14.1992 2.04855 14.1136 2.13486L11.7167 4.53114Z\"\n              fill=\"#323E8B\" />\n          </svg>\n        </button>\n        }\n        @else {\n        <button (click)=\"save()\" mat-icon-button>\n          <svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\"\n            aria-labelledby=\"saveIconTitle\" stroke=\"#000000\" stroke-width=\"1\" stroke-linecap=\"square\"\n            stroke-linejoin=\"miter\" fill=\"none\" color=\"#000000\">\n            <title id=\"saveIconTitle\">Save</title>\n            <path\n              d=\"M17.2928932,3.29289322 L21,7 L21,20 C21,20.5522847 20.5522847,21 20,21 L4,21 C3.44771525,21 3,20.5522847 3,20 L3,4 C3,3.44771525 3.44771525,3 4,3 L16.5857864,3 C16.8510029,3 17.1053568,3.10535684 17.2928932,3.29289322 Z\" />\n            <rect width=\"10\" height=\"8\" x=\"7\" y=\"13\" />\n            <rect width=\"8\" height=\"5\" x=\"8\" y=\"3\" />\n          </svg>\n        </button>\n        }\n        <button (click)=\"deleteItem()\" mat-icon-button color=\"warn\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M7.49988 0.833332H12.4999C13.4204 0.833332 14.1665 1.57952 14.1665 2.5V3.33333H16.6665C17.587 3.33333 18.3332 4.07952 18.3332 4.99999V6.66666C18.3332 7.58714 17.587 8.33333 16.6665 8.33333H16.5998L15.8332 17.5C15.8332 18.4205 15.087 19.1667 14.1665 19.1667H5.8332C4.91272 19.1667 4.16653 18.4205 4.16941 17.5692L3.39975 8.33333H3.33317C2.4127 8.33333 1.6665 7.58714 1.6665 6.66666V4.99999C1.6665 4.07952 2.4127 3.33333 3.33317 3.33333H5.83321V2.5C5.83321 1.57952 6.5794 0.833332 7.49988 0.833332ZM5.83321 5V4.99999H3.33317V6.66666H16.6665V4.99999L14.1665 5H5.83321ZM5.83324 17.5L5.07198 8.33333H14.9276L14.1695 17.4308L14.1666 17.5H5.83324ZM12.4999 2.5V3.33334H7.49992V2.5H12.4999Z\"\n              fill=\"#F96666\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n\n  </div>\n</div>", styles: [".main-editor-block{display:flex;justify-content:space-between}.editor-container{flex-grow:1}@media screen and (max-width: 700px){.main-editor-block{display:flex;flex-direction:column}}\n"], dependencies: [{ kind: "component", type: TextEditorComponent, selector: "croco-html-text-editor", inputs: ["tagService"] }, { kind: "component", type: ImageEditorComponent, selector: "croco-html-image-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: DownloadFileButtonEditorComponent, selector: "croco-html-download-file-button-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: HtmlRawEditorComponent, selector: "croco-html-html-raw-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: ExternalVideoEditorComponent, selector: "croco-html-external-video-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: ButtonEditorComponent, selector: "croco-html-button-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: CustomWidgetEditorComponent, selector: "croco-html-custom-widget-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "component", type: DefinedCustomEditorBlockComponent, selector: "croco-html-defined-custom-editor-block", inputs: ["tagService"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MainEditorBlockComponent, isStandalone: true, selector: "croco-html-main-editor-block", inputs: { tag: "tag" }, outputs: { onTagSaved: "onTagSaved", onTagRemoved: "onTagRemoved" }, ngImport: i0, template: "<div class=\"main-editor-block\">\n  <div class=\"editor-container\">\n    @if (textTags.includes(_tag.tagDescription.tag)) {\n    <div>\n      <croco-html-text-editor [tagService]=\"_tagService\">\n      </croco-html-text-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'file-image') {\n    <div>\n      <croco-html-image-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-image-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'audio-player') {\n    <div>\n      <croco-html-audio-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-audio-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'custom-widget') {\n    <div>\n      <croco-html-custom-widget-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-custom-widget-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'external-video') {\n    <div>\n      <croco-html-external-video-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-external-video-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'download-file-button') {\n    <div>\n      <croco-html-download-file-button-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-download-file-button-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'button') {\n    <div>\n      <croco-html-button-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-button-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'html-raw') {\n    <div>\n      <croco-html-html-raw-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-html-raw-editor>\n    </div>\n    }\n    @else if (isDefinedCustomTag()) {\n    <div>\n      <croco-html-defined-custom-editor-block [tagService]=\"_tagService\"></croco-html-defined-custom-editor-block>\n    </div>\n    }\n    @else {\n    <div>\n      {{_tag.tagDescription.tag}} \u043D\u0435 \u043F\u043E\u043A\u0430\u0437\u0430\u043D\n    </div>\n    <div>\n      {{_tag | json}}\n    </div>\n    }\n\n  </div>\n\n  <div class=\"d-flex justify-content-between\">\n    <div class=\"d-flex justify-content-end align-self-center\">\n      <div style=\"margin-left: 16px;min-width: 96px\">\n        @if (presentOrEdit) {\n        <button (click)=\"cancelSave()\" mat-icon-button>\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M14.4374 0C15.0921 0 15.7197 0.261421 16.1781 0.723424L19.279 3.82432C19.7407 4.286 20.0001 4.91217 20.0001 5.56508C20.0001 6.21799 19.7407 6.84416 19.279 7.30584L7.95751 18.6238C7.25903 19.4295 6.2689 19.9245 5.1346 20.0023H0V19.0023L0.00324754 14.7873C0.0884381 13.7328 0.578667 12.7523 1.3265 12.0934L12.6954 0.72463C13.1564 0.260831 13.7834 0 14.4374 0ZM5.06401 18.0048C5.59823 17.967 6.09551 17.7184 6.49482 17.2616L14.0567 9.69971L10.3024 5.94518L2.69613 13.5496C2.29098 13.9079 2.04034 14.4092 2.00003 14.8678V18.0029L5.06401 18.0048ZM11.7167 4.53114L15.471 8.28549L17.8648 5.89162C17.9514 5.80502 18.0001 5.68756 18.0001 5.56508C18.0001 5.4426 17.9514 5.32514 17.8648 5.23854L14.7612 2.13486C14.6755 2.04855 14.559 2 14.4374 2C14.3158 2 14.1992 2.04855 14.1136 2.13486L11.7167 4.53114Z\"\n              fill=\"#323E8B\" />\n          </svg>\n        </button>\n        }\n        @else {\n        <button (click)=\"save()\" mat-icon-button>\n          <svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\"\n            aria-labelledby=\"saveIconTitle\" stroke=\"#000000\" stroke-width=\"1\" stroke-linecap=\"square\"\n            stroke-linejoin=\"miter\" fill=\"none\" color=\"#000000\">\n            <title id=\"saveIconTitle\">Save</title>\n            <path\n              d=\"M17.2928932,3.29289322 L21,7 L21,20 C21,20.5522847 20.5522847,21 20,21 L4,21 C3.44771525,21 3,20.5522847 3,20 L3,4 C3,3.44771525 3.44771525,3 4,3 L16.5857864,3 C16.8510029,3 17.1053568,3.10535684 17.2928932,3.29289322 Z\" />\n            <rect width=\"10\" height=\"8\" x=\"7\" y=\"13\" />\n            <rect width=\"8\" height=\"5\" x=\"8\" y=\"3\" />\n          </svg>\n        </button>\n        }\n        <button (click)=\"deleteItem()\" mat-icon-button color=\"warn\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M7.49988 0.833332H12.4999C13.4204 0.833332 14.1665 1.57952 14.1665 2.5V3.33333H16.6665C17.587 3.33333 18.3332 4.07952 18.3332 4.99999V6.66666C18.3332 7.58714 17.587 8.33333 16.6665 8.33333H16.5998L15.8332 17.5C15.8332 18.4205 15.087 19.1667 14.1665 19.1667H5.8332C4.91272 19.1667 4.16653 18.4205 4.16941 17.5692L3.39975 8.33333H3.33317C2.4127 8.33333 1.6665 7.58714 1.6665 6.66666V4.99999C1.6665 4.07952 2.4127 3.33333 3.33317 3.33333H5.83321V2.5C5.83321 1.57952 6.5794 0.833332 7.49988 0.833332ZM5.83321 5V4.99999H3.33317V6.66666H16.6665V4.99999L14.1665 5H5.83321ZM5.83324 17.5L5.07198 8.33333H14.9276L14.1695 17.4308L14.1666 17.5H5.83324ZM12.4999 2.5V3.33334H7.49992V2.5H12.4999Z\"\n              fill=\"#F96666\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n\n  </div>\n</div>\n", styles: [".main-editor-block{display:flex;justify-content:space-between}.editor-container{flex-grow:1}@media screen and (max-width: 700px){.main-editor-block{display:flex;flex-direction:column}}\n"], dependencies: [{ kind: "component", type: TextEditorComponent, selector: "croco-html-text-editor", inputs: ["tagService"] }, { kind: "component", type: ImageEditorComponent, selector: "croco-html-image-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: AudioEditorComponent, selector: "croco-html-audio-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: DownloadFileButtonEditorComponent, selector: "croco-html-download-file-button-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: HtmlRawEditorComponent, selector: "croco-html-html-raw-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: ExternalVideoEditorComponent, selector: "croco-html-external-video-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: ButtonEditorComponent, selector: "croco-html-button-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: CustomWidgetEditorComponent, selector: "croco-html-custom-widget-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "component", type: DefinedCustomEditorBlockComponent, selector: "croco-html-defined-custom-editor-block", inputs: ["tagService"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MainEditorBlockComponent, decorators: [{
             type: Component,
             args: [{ selector: 'croco-html-main-editor-block', standalone: true, imports: [
                         TextEditorComponent,
                         ImageEditorComponent,
+                        AudioEditorComponent,
                         DownloadFileButtonEditorComponent,
                         HtmlRawEditorComponent,
                         MatIconButton,
@@ -2495,8 +3027,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         ButtonEditorComponent,
                         CustomWidgetEditorComponent,
                         JsonPipe,
-                        DefinedCustomEditorBlockComponent
-                    ], template: "<div class=\"main-editor-block\">\n  <div class=\"editor-container\">\n    @if (textTags.includes(_tag.tagDescription.tag)) {\n    <div>\n      <croco-html-text-editor [tagService]=\"_tagService\">\n      </croco-html-text-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'file-image') {\n    <div>\n      <croco-html-image-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-image-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'custom-widget') {\n    <div>\n      <croco-html-custom-widget-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-custom-widget-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'external-video') {\n    <div>\n      <croco-html-external-video-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-external-video-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'download-file-button') {\n    <div>\n      <croco-html-download-file-button-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-download-file-button-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'button') {\n    <div>\n      <croco-html-button-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-button-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'html-raw') {\n    <div>\n      <croco-html-html-raw-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-html-raw-editor>\n    </div>\n    }\n    @else if (isDefinedCustomTag()) {\n    <div>\n      <croco-html-defined-custom-editor-block [tagService]=\"_tagService\"></croco-html-defined-custom-editor-block>\n    </div>\n    }\n    @else {\n    <div>\n      {{_tag.tagDescription.tag}} \u043D\u0435 \u043F\u043E\u043A\u0430\u0437\u0430\u043D\n    </div>\n    <div>\n      {{_tag | json}}\n    </div>\n    }\n\n  </div>\n\n  <div class=\"d-flex justify-content-between\">\n    <div class=\"d-flex justify-content-end align-self-center\">\n      <div style=\"margin-left: 16px;min-width: 96px\">\n        @if (presentOrEdit) {\n        <button (click)=\"cancelSave()\" mat-icon-button>\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M14.4374 0C15.0921 0 15.7197 0.261421 16.1781 0.723424L19.279 3.82432C19.7407 4.286 20.0001 4.91217 20.0001 5.56508C20.0001 6.21799 19.7407 6.84416 19.279 7.30584L7.95751 18.6238C7.25903 19.4295 6.2689 19.9245 5.1346 20.0023H0V19.0023L0.00324754 14.7873C0.0884381 13.7328 0.578667 12.7523 1.3265 12.0934L12.6954 0.72463C13.1564 0.260831 13.7834 0 14.4374 0ZM5.06401 18.0048C5.59823 17.967 6.09551 17.7184 6.49482 17.2616L14.0567 9.69971L10.3024 5.94518L2.69613 13.5496C2.29098 13.9079 2.04034 14.4092 2.00003 14.8678V18.0029L5.06401 18.0048ZM11.7167 4.53114L15.471 8.28549L17.8648 5.89162C17.9514 5.80502 18.0001 5.68756 18.0001 5.56508C18.0001 5.4426 17.9514 5.32514 17.8648 5.23854L14.7612 2.13486C14.6755 2.04855 14.559 2 14.4374 2C14.3158 2 14.1992 2.04855 14.1136 2.13486L11.7167 4.53114Z\"\n              fill=\"#323E8B\" />\n          </svg>\n        </button>\n        }\n        @else {\n        <button (click)=\"save()\" mat-icon-button>\n          <svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\"\n            aria-labelledby=\"saveIconTitle\" stroke=\"#000000\" stroke-width=\"1\" stroke-linecap=\"square\"\n            stroke-linejoin=\"miter\" fill=\"none\" color=\"#000000\">\n            <title id=\"saveIconTitle\">Save</title>\n            <path\n              d=\"M17.2928932,3.29289322 L21,7 L21,20 C21,20.5522847 20.5522847,21 20,21 L4,21 C3.44771525,21 3,20.5522847 3,20 L3,4 C3,3.44771525 3.44771525,3 4,3 L16.5857864,3 C16.8510029,3 17.1053568,3.10535684 17.2928932,3.29289322 Z\" />\n            <rect width=\"10\" height=\"8\" x=\"7\" y=\"13\" />\n            <rect width=\"8\" height=\"5\" x=\"8\" y=\"3\" />\n          </svg>\n        </button>\n        }\n        <button (click)=\"deleteItem()\" mat-icon-button color=\"warn\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M7.49988 0.833332H12.4999C13.4204 0.833332 14.1665 1.57952 14.1665 2.5V3.33333H16.6665C17.587 3.33333 18.3332 4.07952 18.3332 4.99999V6.66666C18.3332 7.58714 17.587 8.33333 16.6665 8.33333H16.5998L15.8332 17.5C15.8332 18.4205 15.087 19.1667 14.1665 19.1667H5.8332C4.91272 19.1667 4.16653 18.4205 4.16941 17.5692L3.39975 8.33333H3.33317C2.4127 8.33333 1.6665 7.58714 1.6665 6.66666V4.99999C1.6665 4.07952 2.4127 3.33333 3.33317 3.33333H5.83321V2.5C5.83321 1.57952 6.5794 0.833332 7.49988 0.833332ZM5.83321 5V4.99999H3.33317V6.66666H16.6665V4.99999L14.1665 5H5.83321ZM5.83324 17.5L5.07198 8.33333H14.9276L14.1695 17.4308L14.1666 17.5H5.83324ZM12.4999 2.5V3.33334H7.49992V2.5H12.4999Z\"\n              fill=\"#F96666\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n\n  </div>\n</div>", styles: [".main-editor-block{display:flex;justify-content:space-between}.editor-container{flex-grow:1}@media screen and (max-width: 700px){.main-editor-block{display:flex;flex-direction:column}}\n"] }]
+                        DefinedCustomEditorBlockComponent,
+                    ], template: "<div class=\"main-editor-block\">\n  <div class=\"editor-container\">\n    @if (textTags.includes(_tag.tagDescription.tag)) {\n    <div>\n      <croco-html-text-editor [tagService]=\"_tagService\">\n      </croco-html-text-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'file-image') {\n    <div>\n      <croco-html-image-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-image-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'audio-player') {\n    <div>\n      <croco-html-audio-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-audio-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'custom-widget') {\n    <div>\n      <croco-html-custom-widget-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-custom-widget-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'external-video') {\n    <div>\n      <croco-html-external-video-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-external-video-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'download-file-button') {\n    <div>\n      <croco-html-download-file-button-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-download-file-button-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'button') {\n    <div>\n      <croco-html-button-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-button-editor>\n    </div>\n    }\n    @else if (_tag.tagDescription.tag === 'html-raw') {\n    <div>\n      <croco-html-html-raw-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n      </croco-html-html-raw-editor>\n    </div>\n    }\n    @else if (isDefinedCustomTag()) {\n    <div>\n      <croco-html-defined-custom-editor-block [tagService]=\"_tagService\"></croco-html-defined-custom-editor-block>\n    </div>\n    }\n    @else {\n    <div>\n      {{_tag.tagDescription.tag}} \u043D\u0435 \u043F\u043E\u043A\u0430\u0437\u0430\u043D\n    </div>\n    <div>\n      {{_tag | json}}\n    </div>\n    }\n\n  </div>\n\n  <div class=\"d-flex justify-content-between\">\n    <div class=\"d-flex justify-content-end align-self-center\">\n      <div style=\"margin-left: 16px;min-width: 96px\">\n        @if (presentOrEdit) {\n        <button (click)=\"cancelSave()\" mat-icon-button>\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M14.4374 0C15.0921 0 15.7197 0.261421 16.1781 0.723424L19.279 3.82432C19.7407 4.286 20.0001 4.91217 20.0001 5.56508C20.0001 6.21799 19.7407 6.84416 19.279 7.30584L7.95751 18.6238C7.25903 19.4295 6.2689 19.9245 5.1346 20.0023H0V19.0023L0.00324754 14.7873C0.0884381 13.7328 0.578667 12.7523 1.3265 12.0934L12.6954 0.72463C13.1564 0.260831 13.7834 0 14.4374 0ZM5.06401 18.0048C5.59823 17.967 6.09551 17.7184 6.49482 17.2616L14.0567 9.69971L10.3024 5.94518L2.69613 13.5496C2.29098 13.9079 2.04034 14.4092 2.00003 14.8678V18.0029L5.06401 18.0048ZM11.7167 4.53114L15.471 8.28549L17.8648 5.89162C17.9514 5.80502 18.0001 5.68756 18.0001 5.56508C18.0001 5.4426 17.9514 5.32514 17.8648 5.23854L14.7612 2.13486C14.6755 2.04855 14.559 2 14.4374 2C14.3158 2 14.1992 2.04855 14.1136 2.13486L11.7167 4.53114Z\"\n              fill=\"#323E8B\" />\n          </svg>\n        </button>\n        }\n        @else {\n        <button (click)=\"save()\" mat-icon-button>\n          <svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\"\n            aria-labelledby=\"saveIconTitle\" stroke=\"#000000\" stroke-width=\"1\" stroke-linecap=\"square\"\n            stroke-linejoin=\"miter\" fill=\"none\" color=\"#000000\">\n            <title id=\"saveIconTitle\">Save</title>\n            <path\n              d=\"M17.2928932,3.29289322 L21,7 L21,20 C21,20.5522847 20.5522847,21 20,21 L4,21 C3.44771525,21 3,20.5522847 3,20 L3,4 C3,3.44771525 3.44771525,3 4,3 L16.5857864,3 C16.8510029,3 17.1053568,3.10535684 17.2928932,3.29289322 Z\" />\n            <rect width=\"10\" height=\"8\" x=\"7\" y=\"13\" />\n            <rect width=\"8\" height=\"5\" x=\"8\" y=\"3\" />\n          </svg>\n        </button>\n        }\n        <button (click)=\"deleteItem()\" mat-icon-button color=\"warn\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M7.49988 0.833332H12.4999C13.4204 0.833332 14.1665 1.57952 14.1665 2.5V3.33333H16.6665C17.587 3.33333 18.3332 4.07952 18.3332 4.99999V6.66666C18.3332 7.58714 17.587 8.33333 16.6665 8.33333H16.5998L15.8332 17.5C15.8332 18.4205 15.087 19.1667 14.1665 19.1667H5.8332C4.91272 19.1667 4.16653 18.4205 4.16941 17.5692L3.39975 8.33333H3.33317C2.4127 8.33333 1.6665 7.58714 1.6665 6.66666V4.99999C1.6665 4.07952 2.4127 3.33333 3.33317 3.33333H5.83321V2.5C5.83321 1.57952 6.5794 0.833332 7.49988 0.833332ZM5.83321 5V4.99999H3.33317V6.66666H16.6665V4.99999L14.1665 5H5.83321ZM5.83324 17.5L5.07198 8.33333H14.9276L14.1695 17.4308L14.1666 17.5H5.83324ZM12.4999 2.5V3.33334H7.49992V2.5H12.4999Z\"\n              fill=\"#F96666\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n\n  </div>\n</div>\n", styles: [".main-editor-block{display:flex;justify-content:space-between}.editor-container{flex-grow:1}@media screen and (max-width: 700px){.main-editor-block{display:flex;flex-direction:column}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [CrocoHtmlOptionsToken]
@@ -2554,7 +3086,7 @@ class CustomWidgetIconComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CustomWidgetIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-custom-widget-icon', imports: [], template: "<ng-container #container>\n    @if (!useDynamicComponent) {\n    <span>\n        {{_shortTagName}}\n    </span>\n    }\n</ng-container>" }]
+            args: [{ selector: 'croco-html-custom-widget-icon', imports: [], standalone: true, template: "<ng-container #container>\n    @if (!useDynamicComponent) {\n    <span>\n        {{_shortTagName}}\n    </span>\n    }\n</ng-container>" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [CrocoHtmlOptionsToken]
@@ -2729,7 +3261,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) {\n                <span class=\"tag-item\" (click)=\"selectTag(tag)\" [class.active]=\"selectedValue === tag.tag\">\n                  <span class=\"text-align-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: tag.tag}\">\n                    </ng-container>\n                  </span>\n                  {{tag.displayValue}}\n                </span>\n              }\n\n              @if (useCustomWidgetsButton) {\n                <span class=\"tag-item\" (click)=\"customWidgetsClickHandler()\">\n                  <span class=\"text-align-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: 'custom-widget'}\">\n                    </ng-container>\n                  </span>\n                  \u0414\u0440\u0443\u0433\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044B\n                </span>\n              }\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>", 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}.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}.text-align-icon{color:#323e8b}.tag-item.active{background-color:#323e8b;color:#fff}.tag-item.active svg{color:#fff}.tag-item:hover{color:#747ebf;box-shadow:0 0 4px #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$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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  <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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VisualEditorComponent, decorators: [{
             type: Component,
@@ -2756,7 +3288,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) {\n                <span class=\"tag-item\" (click)=\"selectTag(tag)\" [class.active]=\"selectedValue === tag.tag\">\n                  <span class=\"text-align-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: tag.tag}\">\n                    </ng-container>\n                  </span>\n                  {{tag.displayValue}}\n                </span>\n              }\n\n              @if (useCustomWidgetsButton) {\n                <span class=\"tag-item\" (click)=\"customWidgetsClickHandler()\">\n                  <span class=\"text-align-icon\">\n                    <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: 'custom-widget'}\">\n                    </ng-container>\n                  </span>\n                  \u0414\u0440\u0443\u0433\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044B\n                </span>\n              }\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>", 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}.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}.text-align-icon{color:#323e8b}.tag-item.active{background-color:#323e8b;color:#fff}.tag-item.active svg{color:#fff}.tag-item:hover{color:#747ebf;box-shadow:0 0 4px #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  <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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [CrocoHtmlOptionsToken]
@@ -2836,8 +3368,8 @@ class HtmlEditorSettingsModalComponent {
     setSettings() {
         this.dialogRef.close(this.form.getRawValue());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HtmlEditorSettingsModalComponent, deps: [{ token: i1$4.FormBuilder }, { token: i2$2.MatDialogRef }, { token: CrocoHtmlFileOptionsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: HtmlEditorSettingsModalComponent, isStandalone: true, selector: "croco-html-html-editor-settings-modal", ngImport: i0, template: "<div mat-dialog-title>\u041D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 \u0440\u0435\u0434\u0430\u043A\u0442\u043E\u0440\u0430</div>\n<div mat-dialog-content class=\"editor-settings\" [formGroup]=\"form\">\n  <mat-form-field style=\"margin-top: 20px\">\n    <mat-label>\n      \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F\n    </mat-label>\n    <input matInput formControlName=\"applicationId\">\n  </mat-form-field>\n\n  <div>\n    <mat-label>\n      \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u043F\u0440\u0438\u0432\u0430\u0442\u043D\u044B\u0435 \u0444\u0430\u0439\u043B\u044B\n    </mat-label>\n    <mat-checkbox\n      formControlName=\"usePrivateFiles\">\n    </mat-checkbox>\n  </div>\n\n</div>\n<div mat-dialog-actions style=\"display: flex; justify-content: flex-end\">\n  <button mat-raised-button color=\"warn\" (click)=\"cancel()\" >\u041E\u0442\u043C\u0435\u043D\u0430</button>\n  <button mat-raised-button color=\"primary\" (click)=\"setSettings()\">\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C</button>\n</div>\n", styles: [".editor-settings{padding:20px;display:flex;gap:10px;flex-direction:column;width:360px}\n"], dependencies: [{ kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatFormField$1, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel$1, selector: "mat-label" }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HtmlEditorSettingsModalComponent, deps: [{ token: i1$1.FormBuilder }, { token: i2$2.MatDialogRef }, { token: CrocoHtmlFileOptionsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: HtmlEditorSettingsModalComponent, isStandalone: true, selector: "croco-html-html-editor-settings-modal", ngImport: i0, template: "<div mat-dialog-title>\u041D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 \u0440\u0435\u0434\u0430\u043A\u0442\u043E\u0440\u0430</div>\n<div mat-dialog-content class=\"editor-settings\" [formGroup]=\"form\">\n  <mat-form-field style=\"margin-top: 20px\">\n    <mat-label>\n      \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F\n    </mat-label>\n    <input matInput formControlName=\"applicationId\">\n  </mat-form-field>\n\n  <div>\n    <mat-label>\n      \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u043F\u0440\u0438\u0432\u0430\u0442\u043D\u044B\u0435 \u0444\u0430\u0439\u043B\u044B\n    </mat-label>\n    <mat-checkbox\n      formControlName=\"usePrivateFiles\">\n    </mat-checkbox>\n  </div>\n\n</div>\n<div mat-dialog-actions style=\"display: flex; justify-content: flex-end\">\n  <button mat-raised-button color=\"warn\" (click)=\"cancel()\" >\u041E\u0442\u043C\u0435\u043D\u0430</button>\n  <button mat-raised-button color=\"primary\" (click)=\"setSettings()\">\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C</button>\n</div>\n", styles: [".editor-settings{padding:20px;display:flex;gap:10px;flex-direction:column;width:360px}\n"], dependencies: [{ kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatFormField$1, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel$1, selector: "mat-label" }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HtmlEditorSettingsModalComponent, decorators: [{
             type: Component,
@@ -2852,7 +3384,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         MatDialogActions,
                         MatButton
                     ], template: "<div mat-dialog-title>\u041D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 \u0440\u0435\u0434\u0430\u043A\u0442\u043E\u0440\u0430</div>\n<div mat-dialog-content class=\"editor-settings\" [formGroup]=\"form\">\n  <mat-form-field style=\"margin-top: 20px\">\n    <mat-label>\n      \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F\n    </mat-label>\n    <input matInput formControlName=\"applicationId\">\n  </mat-form-field>\n\n  <div>\n    <mat-label>\n      \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u043F\u0440\u0438\u0432\u0430\u0442\u043D\u044B\u0435 \u0444\u0430\u0439\u043B\u044B\n    </mat-label>\n    <mat-checkbox\n      formControlName=\"usePrivateFiles\">\n    </mat-checkbox>\n  </div>\n\n</div>\n<div mat-dialog-actions style=\"display: flex; justify-content: flex-end\">\n  <button mat-raised-button color=\"warn\" (click)=\"cancel()\" >\u041E\u0442\u043C\u0435\u043D\u0430</button>\n  <button mat-raised-button color=\"primary\" (click)=\"setSettings()\">\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C</button>\n</div>\n", styles: [".editor-settings{padding:20px;display:flex;gap:10px;flex-direction:column;width:360px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$4.FormBuilder }, { type: i2$2.MatDialogRef }, { type: CrocoHtmlFileOptionsService }] });
+        }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: i2$2.MatDialogRef }, { type: CrocoHtmlFileOptionsService }] });
 
 class MainEditorComponent {
     constructor(_clipboardService, _snackBar, _cdref, _dialog, _htmlSettingsService, options) {
@@ -2921,7 +3453,7 @@ class MainEditorComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MainEditorComponent, deps: [{ token: i1$5.ClipboardService }, { token: i2$3.MatSnackBar }, { token: i0.ChangeDetectorRef }, { token: i2$2.MatDialog }, { token: CrocoHtmlFileOptionsService }, { token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MainEditorComponent, isStandalone: true, selector: "croco-html-main-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged" }, viewQueries: [{ propertyName: "visualEditor", first: true, predicate: ["visualEditor"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-tab-group mat-stretch-tabs=\"false\" mat-align-tabs=\"start\" style=\"position: relative\">\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'visual-editor-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 20px;\"></div>\n\n    <croco-visual-editor #visualEditor [useHtmlRaw]=\"true\" [html]=\"html\" (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n      (rendered)=\"visualEditorRenderedHandler()\">\n    </croco-visual-editor>\n\n    <div style=\"height: 20px;\"></div>\n  </mat-tab>\n\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'source-code-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 10px;\"></div>\n    @if (visualEditorRendered) {\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434</mat-label>\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\" cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\" (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n      </mat-form-field>\n    </div>\n    }\n\n    <button (click)=\"copyMarkUp()\" mat-raised-button color=\"primary\">\n      \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n    </button>\n  </mat-tab>\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"30\">\n        <use [attr.xlink:href]=\"'viewer-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n\n    <mat-card style=\"padding: 2px;\" class=\"mat-card\">\n      <mat-card-content>\n        <croco-html-view [html]=\"html\">\n        </croco-html-view>\n      </mat-card-content>\n    </mat-card>\n  </mat-tab>\n</mat-tab-group>\n\n<div [hidden]=\"!showSettingsButton\">\n  <mat-icon class=\"settings\" (click)=\"openSettingsModal()\">settings</mat-icon>\n</div>\n", styles: [":host ::ng-deep .mdc-tab.mat-mdc-tab{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab .custom-icon{fill:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover .custom-icon{fill:#747ebf}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active{background-color:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active svg.custom-icon{fill:#fff}:host ::ng-deep div.mat-mdc-tab-labels{justify-content:center}:host{position:relative;width:100%;display:block;overflow-x:hidden}:host ::ng-deep .mat-expansion-panel,:host ::ng-deep .mat-mdc-tab-body-content,:host ::ng-deep .mat-mdc-tab-body,:host ::ng-deep .mat-mdc-tab-body-wrapper{overflow:visible}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.settings{position:absolute;top:20px;right:20px;cursor:pointer;z-index:1000}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i5.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: VisualEditorComponent, selector: "croco-visual-editor", inputs: ["showMarkUp", "useHtmlRaw", "html"], outputs: ["html", "onHtmlChanged", "rendered"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: HtmlViewComponent, selector: "croco-html-view", inputs: ["html", "dataController"] }, { kind: "pipe", type: SpriteIconPathPipe, name: "spriteIconPath" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MainEditorComponent, isStandalone: true, selector: "croco-html-main-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged" }, viewQueries: [{ propertyName: "visualEditor", first: true, predicate: ["visualEditor"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-tab-group mat-stretch-tabs=\"false\" mat-align-tabs=\"start\" style=\"position: relative\">\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'visual-editor-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 20px;\"></div>\n\n    <croco-visual-editor #visualEditor [useHtmlRaw]=\"true\" [html]=\"html\" (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n      (rendered)=\"visualEditorRenderedHandler()\">\n    </croco-visual-editor>\n\n    <div style=\"height: 20px;\"></div>\n  </mat-tab>\n\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n        <use [attr.xlink:href]=\"'source-code-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n    <div style=\"height: 10px;\"></div>\n    @if (visualEditorRendered) {\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434</mat-label>\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\" cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\" (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n      </mat-form-field>\n    </div>\n    }\n\n    <button (click)=\"copyMarkUp()\" mat-raised-button color=\"primary\">\n      \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n    </button>\n  </mat-tab>\n  <mat-tab>\n    <ng-template mat-tab-label>\n      <svg class=\"custom-icon\" width=\"32\" height=\"30\">\n        <use [attr.xlink:href]=\"'viewer-tab' | spriteIconPath\"></use>\n      </svg>\n    </ng-template>\n\n\n    <mat-card style=\"padding: 2px;\" class=\"mat-card\">\n      <mat-card-content>\n        <croco-html-view [html]=\"html\">\n        </croco-html-view>\n      </mat-card-content>\n    </mat-card>\n  </mat-tab>\n</mat-tab-group>\n\n<div [hidden]=\"!showSettingsButton\">\n  <mat-icon class=\"settings\" (click)=\"openSettingsModal()\">settings</mat-icon>\n</div>\n", styles: [":host ::ng-deep .mdc-tab.mat-mdc-tab{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab .custom-icon{fill:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover .custom-icon{fill:#747ebf}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active{background-color:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active svg.custom-icon{fill:#fff}:host ::ng-deep div.mat-mdc-tab-labels{justify-content:center}:host{position:relative;width:100%;display:block;overflow-x:hidden}:host ::ng-deep .mat-expansion-panel,:host ::ng-deep .mat-mdc-tab-body-content,:host ::ng-deep .mat-mdc-tab-body,:host ::ng-deep .mat-mdc-tab-body-wrapper{overflow:visible}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.settings{position:absolute;top:20px;right:20px;cursor:pointer;z-index:1000}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i5$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i5$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i5$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: VisualEditorComponent, selector: "croco-visual-editor", inputs: ["showMarkUp", "useHtmlRaw", "html"], outputs: ["html", "onHtmlChanged", "rendered"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: HtmlViewComponent, selector: "croco-html-view", inputs: ["html", "dataController"] }, { kind: "pipe", type: SpriteIconPathPipe, name: "spriteIconPath" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MainEditorComponent, decorators: [{
             type: Component,
@@ -3036,6 +3568,7 @@ const XmlComponents = [
     XmlTagExternalVideoComponent,
     HtmlRawViewComponent,
     FileImageTagViewComponent,
+    AudioPlayerTagViewComponent,
     XmlTagCustomWidgetComponent,
     HtmlViewComponent,
     DefinedCustomTagViewComponent
@@ -3090,17 +3623,17 @@ class CrocoHtmlModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: CrocoHtmlModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
-            NgSelectModule, i1$6.MatBadgeModule, i2$4.MatTableModule, i3$1.MatExpansionModule, i1$3.MatFormFieldModule, i2$3.MatSnackBarModule, i6.MatProgressBarModule, i7.MatProgressSpinnerModule, i5.MatTabsModule, i9.MatMenuModule, i1$2.MatCardModule, i11.MatSelectModule, i12.MatTooltipModule, i13.MatCheckboxModule, i14.MatChipsModule, i15.MatListModule, i2.MatButtonModule, i2$1.MatInputModule, i2$2.MatDialogModule, i19.MatPaginatorModule, i20.MatDatepickerModule, i21.MatGridListModule, i22.MatSlideToggleModule, i23.MatTreeModule, i24.MatNativeDateModule, i25.MatAutocompleteModule, i26.MatSidenavModule, i27.MatIconModule, i28.DragDropModule, i29.MatButtonToggleModule, ErrorBannerComponent,
+            NgSelectModule, i1$6.MatBadgeModule, i2$4.MatTableModule, i3$1.MatExpansionModule, i1$4.MatFormFieldModule, i2$3.MatSnackBarModule, i6.MatProgressBarModule, i7.MatProgressSpinnerModule, i5$1.MatTabsModule, i9.MatMenuModule, i1$3.MatCardModule, i11.MatSelectModule, i12.MatTooltipModule, i13.MatCheckboxModule, i14.MatChipsModule, i15.MatListModule, i2.MatButtonModule, i2$1.MatInputModule, i2$2.MatDialogModule, i19.MatPaginatorModule, i20.MatDatepickerModule, i21.MatGridListModule, i22.MatSlideToggleModule, i23.MatTreeModule, i24.MatNativeDateModule, i25.MatAutocompleteModule, i26.MatSidenavModule, i27.MatIconModule, i28.DragDropModule, i29.MatButtonToggleModule, ErrorBannerComponent,
             VkVideoPlayerComponent,
             YoutubeVideoPlayerComponent,
             DownloadFileButtonEditorComponent,
-            XmlTagDownloadFileButtonComponent, UploadFilesBtnComponent, HtmlViewComponent, XmlTagViewComponent, XmlTagHtmlViewComponent, XmlTagTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHeaderInnerTextViewComponent, XmlTagExternalVideoComponent, HtmlRawViewComponent, FileImageTagViewComponent, XmlTagCustomWidgetComponent, HtmlViewComponent, DefinedCustomTagViewComponent, MainEditorComponent, FileIdSelectComponent, TextEditorComponent, ImageEditorComponent, MainEditorBlockComponent, VisualEditorComponent, AddFilesBtnComponent, HtmlRawEditorComponent, CustomWidgetEditorComponent, DefinedCustomEditorBlockComponent, CustomWidgetIconComponent, TagToSpanPipe, ToPreviewPipe, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe], exports: [UploadFilesBtnComponent, HtmlViewComponent, XmlTagViewComponent, XmlTagHtmlViewComponent, XmlTagTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHeaderInnerTextViewComponent, XmlTagExternalVideoComponent, HtmlRawViewComponent, FileImageTagViewComponent, XmlTagCustomWidgetComponent, HtmlViewComponent, DefinedCustomTagViewComponent, MainEditorComponent, FileIdSelectComponent, TextEditorComponent, ImageEditorComponent, MainEditorBlockComponent, VisualEditorComponent, AddFilesBtnComponent, HtmlRawEditorComponent, CustomWidgetEditorComponent, DefinedCustomEditorBlockComponent, CustomWidgetIconComponent, TagToSpanPipe, ToPreviewPipe, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe] }); }
+            XmlTagDownloadFileButtonComponent, UploadFilesBtnComponent, HtmlViewComponent, XmlTagViewComponent, XmlTagHtmlViewComponent, XmlTagTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHeaderInnerTextViewComponent, XmlTagExternalVideoComponent, HtmlRawViewComponent, FileImageTagViewComponent, AudioPlayerTagViewComponent, XmlTagCustomWidgetComponent, HtmlViewComponent, DefinedCustomTagViewComponent, MainEditorComponent, FileIdSelectComponent, TextEditorComponent, ImageEditorComponent, MainEditorBlockComponent, VisualEditorComponent, AddFilesBtnComponent, HtmlRawEditorComponent, CustomWidgetEditorComponent, DefinedCustomEditorBlockComponent, CustomWidgetIconComponent, TagToSpanPipe, ToPreviewPipe, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe], exports: [UploadFilesBtnComponent, HtmlViewComponent, XmlTagViewComponent, XmlTagHtmlViewComponent, XmlTagTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHeaderInnerTextViewComponent, XmlTagExternalVideoComponent, HtmlRawViewComponent, FileImageTagViewComponent, AudioPlayerTagViewComponent, XmlTagCustomWidgetComponent, HtmlViewComponent, DefinedCustomTagViewComponent, MainEditorComponent, FileIdSelectComponent, TextEditorComponent, ImageEditorComponent, MainEditorBlockComponent, VisualEditorComponent, AddFilesBtnComponent, HtmlRawEditorComponent, CustomWidgetEditorComponent, DefinedCustomEditorBlockComponent, CustomWidgetIconComponent, TagToSpanPipe, ToPreviewPipe, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CrocoHtmlModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             NgSelectModule, MaterialModules, ErrorBannerComponent,
             DownloadFileButtonEditorComponent,
-            XmlTagDownloadFileButtonComponent, UploadFilesBtnComponent, HtmlViewComponent, XmlTagViewComponent, HtmlViewComponent, MainEditorComponent, FileIdSelectComponent, TextEditorComponent, ImageEditorComponent, MainEditorBlockComponent, VisualEditorComponent, AddFilesBtnComponent, HtmlRawEditorComponent, CustomWidgetEditorComponent] }); }
+            XmlTagDownloadFileButtonComponent, UploadFilesBtnComponent, HtmlViewComponent, XmlTagViewComponent, AudioPlayerTagViewComponent, HtmlViewComponent, MainEditorComponent, FileIdSelectComponent, TextEditorComponent, ImageEditorComponent, MainEditorBlockComponent, VisualEditorComponent, AddFilesBtnComponent, HtmlRawEditorComponent, CustomWidgetEditorComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CrocoHtmlModule, decorators: [{
             type: NgModule,
@@ -3132,5 +3665,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddFilesBtnComponent, AngularMaterialTableMethods, BodyTagsExtensions, BootstrapTableMethods, ButtonTagDataConsts, ButtonTagService, CrocoHtmlFileOptionsService, CrocoHtmlModule, CrocoHtmlOptionsToken, CustomWidgetEditorComponent, CustomWidgetIconComponent, CustomWidgetTagDataConsts, CustomWidgetTagService, DefinedCustomEditorBlockComponent, DefinedCustomTagViewComponent, DownloadButtonTagDataConsts, DownloadButtonTagService, ExternalVideoEditorComponent, ExternalVideoPlayers, ExternalVideoSupportedTypes, ExternalVideoTagDataConsts, ExternalVideoTagService, FileIdSelectComponent, FileImageTagDataConsts, FileImageTagService, FileImageTagViewComponent, FileType, HtmlPageDataController, HtmlRawEditorComponent, HtmlRawTagDataConsts, HtmlRawTagService, HtmlRawViewComponent, HtmlViewComponent, HtmlViewController, ImageEditorComponent, ImageMethods, MainEditorBlockComponent, MainEditorComponent, TableBuilder, TableMethods, TableTypes, TagEditorService, TagToSpanPipe, TextAlignment, TextEditorComponent, TextSimpleMethods, TextTag, TextTagDataConsts, TextTagHtmlMarkupTagService, TextTags, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe, ToPreviewPipe, UploadFilesBtnComponent, VisualEditorComponent, XmlExtensions, XmlTagCustomWidgetComponent, XmlTagExternalVideoComponent, XmlTagHeaderInnerTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHtmlViewComponent, XmlTagTextViewComponent, XmlTagViewComponent };
+export { AddFilesBtnComponent, AngularMaterialTableMethods, AudioEditorComponent, AudioMethods, AudioPlayerTagViewComponent, BodyTagsExtensions, BootstrapTableMethods, ButtonTagDataConsts, ButtonTagService, CrocoHtmlFileOptionsService, CrocoHtmlModule, CrocoHtmlOptionsToken, CustomWidgetEditorComponent, CustomWidgetIconComponent, CustomWidgetTagDataConsts, CustomWidgetTagService, DefinedCustomEditorBlockComponent, DefinedCustomTagViewComponent, DownloadButtonTagDataConsts, DownloadButtonTagService, ExternalVideoEditorComponent, ExternalVideoPlayers, ExternalVideoSupportedTypes, ExternalVideoTagDataConsts, ExternalVideoTagService, FileAudioTagDataConsts, FileIdSelectComponent, FileImageTagDataConsts, FileImageTagService, FileImageTagViewComponent, FileType, HtmlPageDataController, HtmlRawEditorComponent, HtmlRawTagDataConsts, HtmlRawTagService, HtmlRawViewComponent, HtmlViewComponent, HtmlViewController, ImageEditorComponent, ImageMethods, MainEditorBlockComponent, MainEditorComponent, TableBuilder, TableMethods, TableTypes, TagEditorService, TagToSpanPipe, TextAlignment, TextEditorComponent, TextSimpleMethods, TextTag, TextTagDataConsts, TextTagHtmlMarkupTagService, TextTags, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe, ToPreviewPipe, UploadFilesBtnComponent, VisualEditorComponent, XmlExtensions, XmlTagCustomWidgetComponent, XmlTagExternalVideoComponent, XmlTagHeaderInnerTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHtmlViewComponent, XmlTagTextViewComponent, XmlTagViewComponent };
 //# sourceMappingURL=croco-html.mjs.map