npm - croco-html - Versions diffs - 3.0.0 → 3.0.2 - Mend

croco-html 3.0.0 → 3.0.2

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

Files changed (7) hide show

package/fesm2022/croco-html.mjs CHANGED Viewed

@@ -1815,7 +1815,7 @@ class ImageEditorComponent {
         this.unsubscribe.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ImageEditorComponent, deps: [{ token: CrocoHtmlOptionsToken }, { token: ScreenWidthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: ImageEditorComponent, isStandalone: true, selector: "croco-html-image-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, 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(!tag.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 (!tag.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 (tag.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\n          @if (!tag.presentOrEdit) {\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 (!tag.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            type=\"number\"\n            [(ngModel)]=\"fileId\"\n            (ngModelChange)=\"removeImageError()\">\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}\n"], dependencies: [{ kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], 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"], 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"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: ImageEditorComponent, isStandalone: true, selector: "croco-html-image-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, 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(!tag.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 (!tag.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 (tag.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\n          @if (!tag.presentOrEdit) {\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 (!tag.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            type=\"number\"\n            [(ngModel)]=\"fileId\"\n            (ngModelChange)=\"removeImageError()\">\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: 700px){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", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], 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"], 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"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ImageEditorComponent, decorators: [{
             type: Component,
@@ -1836,7 +1836,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                         MatButton,
                         MatIconButton,
                         MatSlideToggle
-                    ], template: "<div>\n  <div style=\"height: 10px;\">\n  </div>\n\n  @if (hasImageError) {\n    <div class=\"error-block\">\n      \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E \u043F\u043E \u0443\u043A\u0430\u0437\u0430\u043D\u043D\u043E\u043C\u0443 \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E \u0444\u0430\u0439\u043B \u043D\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u043B\u0438 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043D\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.\n    </div>\n  }\n\n  @if (hasFileId() && !hasImageError) {\n    <div>\n      <img\n        [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%', 'max-width': imageMaxWidth ? imageMaxWidth + 'px' : '100%', }\"\n        class=\"mx-auto d-block img-fluid\" [src]=\"getSrc()\" (error)=\"onErrorHandler()\" alt=\"photo\"/>\n    </div>\n  }\n\n  @if (!hasFileId()) {\n    <div>\n      <h5>[\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E]</h5>\n    </div>\n  }\n\n  @if(!tag.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 (!tag.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 (tag.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\n          @if (!tag.presentOrEdit) {\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 (!tag.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            type=\"number\"\n            [(ngModel)]=\"fileId\"\n            (ngModelChange)=\"removeImageError()\">\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}\n"] }]
+                    ], 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(!tag.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 (!tag.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 (tag.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\n          @if (!tag.presentOrEdit) {\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 (!tag.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            type=\"number\"\n            [(ngModel)]=\"fileId\"\n            (ngModelChange)=\"removeImageError()\">\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: 700px){mat-button-toggle-group{display:flex;flex-direction:column}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [CrocoHtmlOptionsToken]
@@ -1982,7 +1982,7 @@ class MainEditorBlockComponent {
     ngOnInit() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MainEditorBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", 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 (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-text-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'file-image') {\n      <div>\n        <croco-html-image-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-image-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'custom-widget') {\n      <div>\n        <croco-html-custom-widget-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-custom-widget-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'external-video') {\n      <div>\n        <croco-html-external-video-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-external-video-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'download-file-button') {\n      <div>\n        <croco-html-download-file-button-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-download-file-button-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'button') {\n      <div>\n        <croco-html-button-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-button-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'html-raw') {\n      <div>\n        <croco-html-html-raw-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-html-raw-editor>\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 (tag.presentOrEdit) {\n          <button (click)=\"tag.presentOrEdit = false\" 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\" 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\" fill=\"#323E8B\"/>\n            </svg>\n          </button>\n        }\n        @if (!tag.presentOrEdit) {\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\"><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\" 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\" 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}\n"], dependencies: [{ kind: "component", type: TextEditorComponent, selector: "croco-html-text-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: ImageEditorComponent, selector: "croco-html-image-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: DownloadFileButtonEditorComponent, selector: "croco-html-download-file-button-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: HtmlRawEditorComponent, selector: "croco-html-html-raw-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: ExternalVideoEditorComponent, selector: "croco-html-external-video-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: ButtonEditorComponent, selector: "croco-html-button-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: CustomWidgetEditorComponent, selector: "croco-html-custom-widget-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", 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 (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-text-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'file-image') {\n      <div>\n        <croco-html-image-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-image-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'custom-widget') {\n      <div>\n        <croco-html-custom-widget-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-custom-widget-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'external-video') {\n      <div>\n        <croco-html-external-video-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-external-video-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'download-file-button') {\n      <div>\n        <croco-html-download-file-button-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-download-file-button-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'button') {\n      <div>\n        <croco-html-button-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-button-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'html-raw') {\n      <div>\n        <croco-html-html-raw-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-html-raw-editor>\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 (tag.presentOrEdit) {\n          <button (click)=\"tag.presentOrEdit = false\" 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\" 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\" fill=\"#323E8B\"/>\n            </svg>\n          </button>\n        }\n        @if (!tag.presentOrEdit) {\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\"><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\" 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\" 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: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: ImageEditorComponent, selector: "croco-html-image-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: DownloadFileButtonEditorComponent, selector: "croco-html-download-file-button-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: HtmlRawEditorComponent, selector: "croco-html-html-raw-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: ExternalVideoEditorComponent, selector: "croco-html-external-video-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: ButtonEditorComponent, selector: "croco-html-button-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: CustomWidgetEditorComponent, selector: "croco-html-custom-widget-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MainEditorBlockComponent, decorators: [{
             type: Component,
@@ -1996,7 +1996,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                         ExternalVideoEditorComponent,
                         ButtonEditorComponent,
                         CustomWidgetEditorComponent
-                    ], 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 (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-text-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'file-image') {\n      <div>\n        <croco-html-image-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-image-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'custom-widget') {\n      <div>\n        <croco-html-custom-widget-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-custom-widget-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'external-video') {\n      <div>\n        <croco-html-external-video-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-external-video-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'download-file-button') {\n      <div>\n        <croco-html-download-file-button-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-download-file-button-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'button') {\n      <div>\n        <croco-html-button-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-button-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'html-raw') {\n      <div>\n        <croco-html-html-raw-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-html-raw-editor>\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 (tag.presentOrEdit) {\n          <button (click)=\"tag.presentOrEdit = false\" 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\" 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\" fill=\"#323E8B\"/>\n            </svg>\n          </button>\n        }\n        @if (!tag.presentOrEdit) {\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\"><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\" 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\" 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}\n"] }]
+                    ], 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 (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-text-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'file-image') {\n      <div>\n        <croco-html-image-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-image-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'custom-widget') {\n      <div>\n        <croco-html-custom-widget-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-custom-widget-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'external-video') {\n      <div>\n        <croco-html-external-video-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-external-video-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'download-file-button') {\n      <div>\n        <croco-html-download-file-button-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-download-file-button-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'button') {\n      <div>\n        <croco-html-button-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-button-editor>\n      </div>\n    }\n\n    @if (tag.tagDescription.tag === 'html-raw') {\n      <div>\n        <croco-html-html-raw-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n        </croco-html-html-raw-editor>\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 (tag.presentOrEdit) {\n          <button (click)=\"tag.presentOrEdit = false\" 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\" 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\" fill=\"#323E8B\"/>\n            </svg>\n          </button>\n        }\n        @if (!tag.presentOrEdit) {\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\"><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\" 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\" 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"] }]
         }], propDecorators: { tag: [{
                 type: Input
             }], onTagSaved: [{
@@ -2166,7 +2166,7 @@ class VisualEditorComponent {
         this.selectedVideoPlayer = this.videoPlayers[0].type;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: VisualEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", 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                  <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                [ngTemplateOutletContext]=\"{icon: tag.tag}\">\n                  </ng-container>\n                  {{tag.displayValue}}\n                </span>\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        }\n        @if (selectedValue === 'text') {\n          <div style=\"display: flex; justify-content: space-between\">\n            <div style=\"margin-bottom: 22px\">\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                    <ng-container [ngTemplateOutlet]=\"textAlignToggleIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: option.value}\">\n                    </ng-container>\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        <div class=\"col-12\">\n          <button (click)=\"addTag()\" 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($event)\" 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 class=\"move-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"cursor: pointer\">\n                  <path\n                    d=\"M14.6516 19.0984L12 21.75M12 21.75L9.34838 19.0984M12 21.75V15M4.90163 14.6516L2.25 12M2.25 12L4.90163 9.34838M2.25 12H9M19.0984 9.34838L21.75 12M21.75 12L19.0984 14.6516M21.75 12H15M9.34838 4.90163L12 2.25M12 2.25L14.6516 4.90163M12 2.25V9\"\n                    stroke=\"#323E8B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </div>\n              <div>\n                <div class=\"badge\" style=\"color:#323E8B\">\n                  <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                [ngTemplateOutletContext]=\"{icon: tag.tagDescription.tag}\">\n                  </ng-container>\n                </div>\n              </div>\n            </div>\n            <div style=\"height: 15px;\"></div>\n            <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagSavedHandler($event)\"\n              (onTagRemoved)=\"onTagRemovedHandler(i)\">\n            </croco-html-main-editor-block>\n          </mat-card-content>\n        </mat-card>\n        <div style=\"height: 10px;\">\n        </div>\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template #textAlignToggleIcons let-icon=\"icon\">\n  @if (icon === 'left') {\n    <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M3.12548 14.6875H13.125M3.12548 11.5625H16.875M3.125 8.4375H13.125M3.125 5.3125H16.875\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @if (icon === 'center') {\n    <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M5.00024 14.6875H14.9998M3.12524 11.5625H16.8748M5 8.4375H15M3.125 5.3125H16.875\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @if (icon === 'right') {\n    <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M6.87548 14.6875H16.875M3.12548 11.5625H16.875M6.875 8.4375H16.875M3.125 5.3125H16.875\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n</ng-template>\n\n<ng-template #tagButtonIcons let-icon=\"icon\">\n  @if (icon === 'text') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M7.49952 15.6246H12.4995M9.99952 4.37459V15.6246M3.74951 6.87459V4.37459H16.2495V6.87459\"\n            stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @if (icon === 'html-raw') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M15 6.875L18.75 10L15 13.125M5 6.875L1.25 10L5 13.125M12.5 3.125L7.5 16.875\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @if (icon === 'external-video') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M14.375 8.75L18.75 6.25V13.75L14.375 11.25M1.875 4.6875H11.875C12.538 4.6875 13.1739 4.95089 13.6428 5.41973C14.1116 5.88857 14.375 6.52446 14.375 7.1875V14.6875C14.375 14.8533 14.3092 15.0122 14.1919 15.1294C14.0747 15.2467 13.9158 15.3125 13.75 15.3125H3.75C3.08696 15.3125 2.45107 15.0491 1.98223 14.5803C1.51339 14.1114 1.25 13.4755 1.25 12.8125V5.3125C1.25 5.14674 1.31585 4.98777 1.43306 4.87056C1.55027 4.75335 1.70924 4.6875 1.875 4.6875Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @if (icon === 'file-image') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M2.5 13.125L6.43305 9.19194C6.49108 9.1339 6.55998 9.08787 6.63581 9.05646C6.71164 9.02505 6.79291 9.00888 6.87499 9.00888C6.95706 9.00888 7.03834 9.02505 7.11417 9.05646C7.18999 9.08787 7.25889 9.1339 7.31693 9.19194L10.808 12.6831C10.8661 12.7411 10.935 12.7871 11.0108 12.8185C11.0866 12.8499 11.1679 12.8661 11.25 12.8661C11.3321 12.8661 11.4133 12.8499 11.4892 12.8185C11.565 12.7871 11.6339 12.7411 11.6919 12.6831L13.308 11.0669C13.3661 11.0089 13.435 10.9629 13.5108 10.9315C13.5866 10.9 13.6679 10.8839 13.75 10.8839C13.8321 10.8839 13.9133 10.9 13.9892 10.9315C14.065 10.9629 14.1339 11.0089 14.1919 11.0669L17.5 14.375M3.125 3.75H16.875C17.2202 3.75 17.5 4.02982 17.5 4.375V15.625C17.5 15.9702 17.2202 16.25 16.875 16.25H3.125C2.77982 16.25 2.5 15.9702 2.5 15.625V4.375C2.5 4.02982 2.77982 3.75 3.125 3.75ZM13.125 7.8125C13.125 8.33027 12.7053 8.75 12.1875 8.75C11.6697 8.75 11.25 8.33027 11.25 7.8125C11.25 7.29473 11.6697 6.875 12.1875 6.875C12.7053 6.875 13.125 7.29473 13.125 7.8125Z\"\n        stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @if (icon === 'custom-widget') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M16.25 15V16.25M13.75 12.5H16.25M11.25 16.25H13.75V11.25M11.25 11.25V13.75M4.375 11.25H8.125C8.47018 11.25 8.75 11.5298 8.75 11.875V15.625C8.75 15.9702 8.47018 16.25 8.125 16.25H4.375C4.02982 16.25 3.75 15.9702 3.75 15.625V11.875C3.75 11.5298 4.02982 11.25 4.375 11.25ZM11.875 3.75H15.625C15.9702 3.75 16.25 4.02982 16.25 4.375V8.125C16.25 8.47018 15.9702 8.75 15.625 8.75H11.875C11.5298 8.75 11.25 8.47018 11.25 8.125V4.375C11.25 4.02982 11.5298 3.75 11.875 3.75ZM4.375 3.75H8.125C8.47018 3.75 8.75 4.02982 8.75 4.375V8.125C8.75 8.47018 8.47018 8.75 8.125 8.75H4.375C4.02982 8.75 3.75 8.47018 3.75 8.125V4.375C3.75 4.02982 4.02982 3.75 4.375 3.75Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @if (icon === 'button') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M9.99939 3.75024V9.68775M13.7501 4.23695C14.9923 5.04536 15.9399 6.23353 16.4518 7.62435C16.9638 9.01517 17.0125 10.5342 16.5909 11.955C16.1693 13.3758 15.2998 14.6223 14.1121 15.5087C12.9244 16.3952 11.482 16.8741 9.99998 16.8741C8.51795 16.8741 7.07559 16.3951 5.88788 15.5087C4.70017 14.6223 3.83071 13.3757 3.40908 11.9549C2.98746 10.5341 3.03624 9.01513 3.54816 7.62432C4.06009 6.2335 5.00774 5.04534 6.24988 4.23693\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @if (icon === 'download-file-button') {\n    <svg style=\"fill:currentColor\"  width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.42424 9.41667C3.49967 9.41667 2.75 10.1663 2.75 11.0909V19.5758C2.75 20.5003 3.49967 21.25 4.42424 21.25H19.5758C20.5003 21.25 21.25 20.5003 21.25 19.5758V11.0909C21.25 10.1663 20.5003 9.41667 19.5758 9.41667H15.9394C15.5252 9.41667 15.1894 9.08088 15.1894 8.66667C15.1894 8.25245 15.5252 7.91667 15.9394 7.91667H19.5758C21.3288 7.91667 22.75 9.33791 22.75 11.0909V19.5758C22.75 21.3288 21.3288 22.75 19.5758 22.75H4.42424C2.67124 22.75 1.25 21.3288 1.25 19.5758V11.0909C1.25 9.33791 2.67124 7.91667 4.42424 7.91667H8.06061C8.47482 7.91667 8.81061 8.25245 8.81061 8.66667C8.81061 9.08088 8.47482 9.41667 8.06061 9.41667H4.42424Z\"/>\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 1.25C12.4142 1.25 12.75 1.58579 12.75 2V15.9394C12.75 16.3536 12.4142 16.6894 12 16.6894C11.5858 16.6894 11.25 16.3536 11.25 15.9394V2C11.25 1.58579 11.5858 1.25 12 1.25Z\"/>\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.83331 12.9848C8.1262 12.6919 8.60107 12.6919 8.89397 12.9848L12 16.0909L15.106 12.9848C15.3989 12.6919 15.8738 12.6919 16.1667 12.9848C16.4596 13.2777 16.4596 13.7526 16.1667 14.0455L12.5303 17.6818C12.2374 17.9747 11.7626 17.9747 11.4697 17.6818L7.83331 14.0455C7.54041 13.7526 7.54041 13.2777 7.83331 12.9848Z\"/>\n    </svg>\n  }\n</ng-template>\n\n\n\n\n\n\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}.mat-button-toggle .text-align-icon{stroke:#323e8b}.mat-button-toggle:hover{color:#747ebf}.mat-button-toggle:hover .text-align-icon{stroke:#747ebf}.mat-button-toggle-checked .text-align-icon{stroke:#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}.mat-card.special{border:1px solid #747EBF;border-radius:8px;box-shadow:none}.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}.tag-item svg{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}.move-icon:hover{opacity:.7}\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"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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"], 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"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], 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", "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"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", 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                  <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                [ngTemplateOutletContext]=\"{icon: tag.tag}\">\n                  </ng-container>\n                  {{tag.displayValue}}\n                </span>\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        }\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                    <ng-container [ngTemplateOutlet]=\"textAlignToggleIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: option.value}\">\n                    </ng-container>\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        <div class=\"col-12\">\n          <button (click)=\"addTag()\" 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($event)\" 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 class=\"move-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"cursor: pointer\">\n                  <path\n                    d=\"M14.6516 19.0984L12 21.75M12 21.75L9.34838 19.0984M12 21.75V15M4.90163 14.6516L2.25 12M2.25 12L4.90163 9.34838M2.25 12H9M19.0984 9.34838L21.75 12M21.75 12L19.0984 14.6516M21.75 12H15M9.34838 4.90163L12 2.25M12 2.25L14.6516 4.90163M12 2.25V9\"\n                    stroke=\"#323E8B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </div>\n              <div>\n                <div class=\"badge\" style=\"color:#323E8B\">\n                  <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                [ngTemplateOutletContext]=\"{icon: tag.tagDescription.tag}\">\n                  </ng-container>\n                </div>\n              </div>\n            </div>\n            <div style=\"height: 15px;\"></div>\n            <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagSavedHandler($event)\"\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  @if (icon === 'left') {\n    <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M3.12548 14.6875H13.125M3.12548 11.5625H16.875M3.125 8.4375H13.125M3.125 5.3125H16.875\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @if (icon === 'center') {\n    <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M5.00024 14.6875H14.9998M3.12524 11.5625H16.8748M5 8.4375H15M3.125 5.3125H16.875\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @if (icon === 'right') {\n    <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M6.87548 14.6875H16.875M3.12548 11.5625H16.875M6.875 8.4375H16.875M3.125 5.3125H16.875\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n</ng-template>\n\n<ng-template #tagButtonIcons let-icon=\"icon\">\n  @if (icon === 'text') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M7.49952 15.6246H12.4995M9.99952 4.37459V15.6246M3.74951 6.87459V4.37459H16.2495V6.87459\"\n            stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'html-raw') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M15 6.875L18.75 10L15 13.125M5 6.875L1.25 10L5 13.125M12.5 3.125L7.5 16.875\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon.indexOf('h') === 0) {\n    {{icon.toUpperCase()}}\n  }\n  @else if (icon === 'external-video') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M14.375 8.75L18.75 6.25V13.75L14.375 11.25M1.875 4.6875H11.875C12.538 4.6875 13.1739 4.95089 13.6428 5.41973C14.1116 5.88857 14.375 6.52446 14.375 7.1875V14.6875C14.375 14.8533 14.3092 15.0122 14.1919 15.1294C14.0747 15.2467 13.9158 15.3125 13.75 15.3125H3.75C3.08696 15.3125 2.45107 15.0491 1.98223 14.5803C1.51339 14.1114 1.25 13.4755 1.25 12.8125V5.3125C1.25 5.14674 1.31585 4.98777 1.43306 4.87056C1.55027 4.75335 1.70924 4.6875 1.875 4.6875Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'file-image') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M2.5 13.125L6.43305 9.19194C6.49108 9.1339 6.55998 9.08787 6.63581 9.05646C6.71164 9.02505 6.79291 9.00888 6.87499 9.00888C6.95706 9.00888 7.03834 9.02505 7.11417 9.05646C7.18999 9.08787 7.25889 9.1339 7.31693 9.19194L10.808 12.6831C10.8661 12.7411 10.935 12.7871 11.0108 12.8185C11.0866 12.8499 11.1679 12.8661 11.25 12.8661C11.3321 12.8661 11.4133 12.8499 11.4892 12.8185C11.565 12.7871 11.6339 12.7411 11.6919 12.6831L13.308 11.0669C13.3661 11.0089 13.435 10.9629 13.5108 10.9315C13.5866 10.9 13.6679 10.8839 13.75 10.8839C13.8321 10.8839 13.9133 10.9 13.9892 10.9315C14.065 10.9629 14.1339 11.0089 14.1919 11.0669L17.5 14.375M3.125 3.75H16.875C17.2202 3.75 17.5 4.02982 17.5 4.375V15.625C17.5 15.9702 17.2202 16.25 16.875 16.25H3.125C2.77982 16.25 2.5 15.9702 2.5 15.625V4.375C2.5 4.02982 2.77982 3.75 3.125 3.75ZM13.125 7.8125C13.125 8.33027 12.7053 8.75 12.1875 8.75C11.6697 8.75 11.25 8.33027 11.25 7.8125C11.25 7.29473 11.6697 6.875 12.1875 6.875C12.7053 6.875 13.125 7.29473 13.125 7.8125Z\"\n        stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'custom-widget') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M16.25 15V16.25M13.75 12.5H16.25M11.25 16.25H13.75V11.25M11.25 11.25V13.75M4.375 11.25H8.125C8.47018 11.25 8.75 11.5298 8.75 11.875V15.625C8.75 15.9702 8.47018 16.25 8.125 16.25H4.375C4.02982 16.25 3.75 15.9702 3.75 15.625V11.875C3.75 11.5298 4.02982 11.25 4.375 11.25ZM11.875 3.75H15.625C15.9702 3.75 16.25 4.02982 16.25 4.375V8.125C16.25 8.47018 15.9702 8.75 15.625 8.75H11.875C11.5298 8.75 11.25 8.47018 11.25 8.125V4.375C11.25 4.02982 11.5298 3.75 11.875 3.75ZM4.375 3.75H8.125C8.47018 3.75 8.75 4.02982 8.75 4.375V8.125C8.75 8.47018 8.47018 8.75 8.125 8.75H4.375C4.02982 8.75 3.75 8.47018 3.75 8.125V4.375C3.75 4.02982 4.02982 3.75 4.375 3.75Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'button') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M9.99939 3.75024V9.68775M13.7501 4.23695C14.9923 5.04536 15.9399 6.23353 16.4518 7.62435C16.9638 9.01517 17.0125 10.5342 16.5909 11.955C16.1693 13.3758 15.2998 14.6223 14.1121 15.5087C12.9244 16.3952 11.482 16.8741 9.99998 16.8741C8.51795 16.8741 7.07559 16.3951 5.88788 15.5087C4.70017 14.6223 3.83071 13.3757 3.40908 11.9549C2.98746 10.5341 3.03624 9.01513 3.54816 7.62432C4.06009 6.2335 5.00774 5.04534 6.24988 4.23693\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'download-file-button') {\n    <svg style=\"fill:currentColor\"  width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.42424 9.41667C3.49967 9.41667 2.75 10.1663 2.75 11.0909V19.5758C2.75 20.5003 3.49967 21.25 4.42424 21.25H19.5758C20.5003 21.25 21.25 20.5003 21.25 19.5758V11.0909C21.25 10.1663 20.5003 9.41667 19.5758 9.41667H15.9394C15.5252 9.41667 15.1894 9.08088 15.1894 8.66667C15.1894 8.25245 15.5252 7.91667 15.9394 7.91667H19.5758C21.3288 7.91667 22.75 9.33791 22.75 11.0909V19.5758C22.75 21.3288 21.3288 22.75 19.5758 22.75H4.42424C2.67124 22.75 1.25 21.3288 1.25 19.5758V11.0909C1.25 9.33791 2.67124 7.91667 4.42424 7.91667H8.06061C8.47482 7.91667 8.81061 8.25245 8.81061 8.66667C8.81061 9.08088 8.47482 9.41667 8.06061 9.41667H4.42424Z\"/>\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 1.25C12.4142 1.25 12.75 1.58579 12.75 2V15.9394C12.75 16.3536 12.4142 16.6894 12 16.6894C11.5858 16.6894 11.25 16.3536 11.25 15.9394V2C11.25 1.58579 11.5858 1.25 12 1.25Z\"/>\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.83331 12.9848C8.1262 12.6919 8.60107 12.6919 8.89397 12.9848L12 16.0909L15.106 12.9848C15.3989 12.6919 15.8738 12.6919 16.1667 12.9848C16.4596 13.2777 16.4596 13.7526 16.1667 14.0455L12.5303 17.6818C12.2374 17.9747 11.7626 17.9747 11.4697 17.6818L7.83331 14.0455C7.54041 13.7526 7.54041 13.2777 7.83331 12.9848Z\"/>\n    </svg>\n  }\n</ng-template>\n\n\n\n\n\n\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}.mat-button-toggle .text-align-icon{stroke:#323e8b}.mat-button-toggle:hover{color:#747ebf}.mat-button-toggle:hover .text-align-icon{stroke:#747ebf}.mat-button-toggle-checked .text-align-icon{stroke:#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}.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}.tag-item svg{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}.move-icon:hover{opacity:.7}\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"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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"], 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"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], 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", "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"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: VisualEditorComponent, decorators: [{
             type: Component,
@@ -2191,7 +2191,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                         MatButtonToggle,
                         NgTemplateOutlet,
                         UpperCasePipe,
-                    ], 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                  <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                [ngTemplateOutletContext]=\"{icon: tag.tag}\">\n                  </ng-container>\n                  {{tag.displayValue}}\n                </span>\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        }\n        @if (selectedValue === 'text') {\n          <div style=\"display: flex; justify-content: space-between\">\n            <div style=\"margin-bottom: 22px\">\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                    <ng-container [ngTemplateOutlet]=\"textAlignToggleIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: option.value}\">\n                    </ng-container>\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        <div class=\"col-12\">\n          <button (click)=\"addTag()\" 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($event)\" 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 class=\"move-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"cursor: pointer\">\n                  <path\n                    d=\"M14.6516 19.0984L12 21.75M12 21.75L9.34838 19.0984M12 21.75V15M4.90163 14.6516L2.25 12M2.25 12L4.90163 9.34838M2.25 12H9M19.0984 9.34838L21.75 12M21.75 12L19.0984 14.6516M21.75 12H15M9.34838 4.90163L12 2.25M12 2.25L14.6516 4.90163M12 2.25V9\"\n                    stroke=\"#323E8B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </div>\n              <div>\n                <div class=\"badge\" style=\"color:#323E8B\">\n                  <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                [ngTemplateOutletContext]=\"{icon: tag.tagDescription.tag}\">\n                  </ng-container>\n                </div>\n              </div>\n            </div>\n            <div style=\"height: 15px;\"></div>\n            <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagSavedHandler($event)\"\n              (onTagRemoved)=\"onTagRemovedHandler(i)\">\n            </croco-html-main-editor-block>\n          </mat-card-content>\n        </mat-card>\n        <div style=\"height: 10px;\">\n        </div>\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template #textAlignToggleIcons let-icon=\"icon\">\n  @if (icon === 'left') {\n    <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M3.12548 14.6875H13.125M3.12548 11.5625H16.875M3.125 8.4375H13.125M3.125 5.3125H16.875\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @if (icon === 'center') {\n    <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M5.00024 14.6875H14.9998M3.12524 11.5625H16.8748M5 8.4375H15M3.125 5.3125H16.875\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @if (icon === 'right') {\n    <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M6.87548 14.6875H16.875M3.12548 11.5625H16.875M6.875 8.4375H16.875M3.125 5.3125H16.875\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n</ng-template>\n\n<ng-template #tagButtonIcons let-icon=\"icon\">\n  @if (icon === 'text') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M7.49952 15.6246H12.4995M9.99952 4.37459V15.6246M3.74951 6.87459V4.37459H16.2495V6.87459\"\n            stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @if (icon === 'html-raw') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M15 6.875L18.75 10L15 13.125M5 6.875L1.25 10L5 13.125M12.5 3.125L7.5 16.875\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @if (icon === 'external-video') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M14.375 8.75L18.75 6.25V13.75L14.375 11.25M1.875 4.6875H11.875C12.538 4.6875 13.1739 4.95089 13.6428 5.41973C14.1116 5.88857 14.375 6.52446 14.375 7.1875V14.6875C14.375 14.8533 14.3092 15.0122 14.1919 15.1294C14.0747 15.2467 13.9158 15.3125 13.75 15.3125H3.75C3.08696 15.3125 2.45107 15.0491 1.98223 14.5803C1.51339 14.1114 1.25 13.4755 1.25 12.8125V5.3125C1.25 5.14674 1.31585 4.98777 1.43306 4.87056C1.55027 4.75335 1.70924 4.6875 1.875 4.6875Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @if (icon === 'file-image') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M2.5 13.125L6.43305 9.19194C6.49108 9.1339 6.55998 9.08787 6.63581 9.05646C6.71164 9.02505 6.79291 9.00888 6.87499 9.00888C6.95706 9.00888 7.03834 9.02505 7.11417 9.05646C7.18999 9.08787 7.25889 9.1339 7.31693 9.19194L10.808 12.6831C10.8661 12.7411 10.935 12.7871 11.0108 12.8185C11.0866 12.8499 11.1679 12.8661 11.25 12.8661C11.3321 12.8661 11.4133 12.8499 11.4892 12.8185C11.565 12.7871 11.6339 12.7411 11.6919 12.6831L13.308 11.0669C13.3661 11.0089 13.435 10.9629 13.5108 10.9315C13.5866 10.9 13.6679 10.8839 13.75 10.8839C13.8321 10.8839 13.9133 10.9 13.9892 10.9315C14.065 10.9629 14.1339 11.0089 14.1919 11.0669L17.5 14.375M3.125 3.75H16.875C17.2202 3.75 17.5 4.02982 17.5 4.375V15.625C17.5 15.9702 17.2202 16.25 16.875 16.25H3.125C2.77982 16.25 2.5 15.9702 2.5 15.625V4.375C2.5 4.02982 2.77982 3.75 3.125 3.75ZM13.125 7.8125C13.125 8.33027 12.7053 8.75 12.1875 8.75C11.6697 8.75 11.25 8.33027 11.25 7.8125C11.25 7.29473 11.6697 6.875 12.1875 6.875C12.7053 6.875 13.125 7.29473 13.125 7.8125Z\"\n        stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @if (icon === 'custom-widget') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M16.25 15V16.25M13.75 12.5H16.25M11.25 16.25H13.75V11.25M11.25 11.25V13.75M4.375 11.25H8.125C8.47018 11.25 8.75 11.5298 8.75 11.875V15.625C8.75 15.9702 8.47018 16.25 8.125 16.25H4.375C4.02982 16.25 3.75 15.9702 3.75 15.625V11.875C3.75 11.5298 4.02982 11.25 4.375 11.25ZM11.875 3.75H15.625C15.9702 3.75 16.25 4.02982 16.25 4.375V8.125C16.25 8.47018 15.9702 8.75 15.625 8.75H11.875C11.5298 8.75 11.25 8.47018 11.25 8.125V4.375C11.25 4.02982 11.5298 3.75 11.875 3.75ZM4.375 3.75H8.125C8.47018 3.75 8.75 4.02982 8.75 4.375V8.125C8.75 8.47018 8.47018 8.75 8.125 8.75H4.375C4.02982 8.75 3.75 8.47018 3.75 8.125V4.375C3.75 4.02982 4.02982 3.75 4.375 3.75Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @if (icon === 'button') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M9.99939 3.75024V9.68775M13.7501 4.23695C14.9923 5.04536 15.9399 6.23353 16.4518 7.62435C16.9638 9.01517 17.0125 10.5342 16.5909 11.955C16.1693 13.3758 15.2998 14.6223 14.1121 15.5087C12.9244 16.3952 11.482 16.8741 9.99998 16.8741C8.51795 16.8741 7.07559 16.3951 5.88788 15.5087C4.70017 14.6223 3.83071 13.3757 3.40908 11.9549C2.98746 10.5341 3.03624 9.01513 3.54816 7.62432C4.06009 6.2335 5.00774 5.04534 6.24988 4.23693\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @if (icon === 'download-file-button') {\n    <svg style=\"fill:currentColor\"  width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.42424 9.41667C3.49967 9.41667 2.75 10.1663 2.75 11.0909V19.5758C2.75 20.5003 3.49967 21.25 4.42424 21.25H19.5758C20.5003 21.25 21.25 20.5003 21.25 19.5758V11.0909C21.25 10.1663 20.5003 9.41667 19.5758 9.41667H15.9394C15.5252 9.41667 15.1894 9.08088 15.1894 8.66667C15.1894 8.25245 15.5252 7.91667 15.9394 7.91667H19.5758C21.3288 7.91667 22.75 9.33791 22.75 11.0909V19.5758C22.75 21.3288 21.3288 22.75 19.5758 22.75H4.42424C2.67124 22.75 1.25 21.3288 1.25 19.5758V11.0909C1.25 9.33791 2.67124 7.91667 4.42424 7.91667H8.06061C8.47482 7.91667 8.81061 8.25245 8.81061 8.66667C8.81061 9.08088 8.47482 9.41667 8.06061 9.41667H4.42424Z\"/>\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 1.25C12.4142 1.25 12.75 1.58579 12.75 2V15.9394C12.75 16.3536 12.4142 16.6894 12 16.6894C11.5858 16.6894 11.25 16.3536 11.25 15.9394V2C11.25 1.58579 11.5858 1.25 12 1.25Z\"/>\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.83331 12.9848C8.1262 12.6919 8.60107 12.6919 8.89397 12.9848L12 16.0909L15.106 12.9848C15.3989 12.6919 15.8738 12.6919 16.1667 12.9848C16.4596 13.2777 16.4596 13.7526 16.1667 14.0455L12.5303 17.6818C12.2374 17.9747 11.7626 17.9747 11.4697 17.6818L7.83331 14.0455C7.54041 13.7526 7.54041 13.2777 7.83331 12.9848Z\"/>\n    </svg>\n  }\n</ng-template>\n\n\n\n\n\n\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}.mat-button-toggle .text-align-icon{stroke:#323e8b}.mat-button-toggle:hover{color:#747ebf}.mat-button-toggle:hover .text-align-icon{stroke:#747ebf}.mat-button-toggle-checked .text-align-icon{stroke:#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}.mat-card.special{border:1px solid #747EBF;border-radius:8px;box-shadow:none}.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}.tag-item svg{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}.move-icon:hover{opacity:.7}\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) {\n                <span class=\"tag-item\" (click)=\"selectTag(tag)\" [class.active]=\"selectedValue === tag.tag\">\n                  <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                [ngTemplateOutletContext]=\"{icon: tag.tag}\">\n                  </ng-container>\n                  {{tag.displayValue}}\n                </span>\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        }\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                    <ng-container [ngTemplateOutlet]=\"textAlignToggleIcons\"\n                                  [ngTemplateOutletContext]=\"{icon: option.value}\">\n                    </ng-container>\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        <div class=\"col-12\">\n          <button (click)=\"addTag()\" 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($event)\" 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 class=\"move-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"cursor: pointer\">\n                  <path\n                    d=\"M14.6516 19.0984L12 21.75M12 21.75L9.34838 19.0984M12 21.75V15M4.90163 14.6516L2.25 12M2.25 12L4.90163 9.34838M2.25 12H9M19.0984 9.34838L21.75 12M21.75 12L19.0984 14.6516M21.75 12H15M9.34838 4.90163L12 2.25M12 2.25L14.6516 4.90163M12 2.25V9\"\n                    stroke=\"#323E8B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </div>\n              <div>\n                <div class=\"badge\" style=\"color:#323E8B\">\n                  <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n                                [ngTemplateOutletContext]=\"{icon: tag.tagDescription.tag}\">\n                  </ng-container>\n                </div>\n              </div>\n            </div>\n            <div style=\"height: 15px;\"></div>\n            <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagSavedHandler($event)\"\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  @if (icon === 'left') {\n    <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M3.12548 14.6875H13.125M3.12548 11.5625H16.875M3.125 8.4375H13.125M3.125 5.3125H16.875\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @if (icon === 'center') {\n    <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M5.00024 14.6875H14.9998M3.12524 11.5625H16.8748M5 8.4375H15M3.125 5.3125H16.875\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @if (icon === 'right') {\n    <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M6.87548 14.6875H16.875M3.12548 11.5625H16.875M6.875 8.4375H16.875M3.125 5.3125H16.875\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n</ng-template>\n\n<ng-template #tagButtonIcons let-icon=\"icon\">\n  @if (icon === 'text') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M7.49952 15.6246H12.4995M9.99952 4.37459V15.6246M3.74951 6.87459V4.37459H16.2495V6.87459\"\n            stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'html-raw') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M15 6.875L18.75 10L15 13.125M5 6.875L1.25 10L5 13.125M12.5 3.125L7.5 16.875\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon.indexOf('h') === 0) {\n    {{icon.toUpperCase()}}\n  }\n  @else if (icon === 'external-video') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M14.375 8.75L18.75 6.25V13.75L14.375 11.25M1.875 4.6875H11.875C12.538 4.6875 13.1739 4.95089 13.6428 5.41973C14.1116 5.88857 14.375 6.52446 14.375 7.1875V14.6875C14.375 14.8533 14.3092 15.0122 14.1919 15.1294C14.0747 15.2467 13.9158 15.3125 13.75 15.3125H3.75C3.08696 15.3125 2.45107 15.0491 1.98223 14.5803C1.51339 14.1114 1.25 13.4755 1.25 12.8125V5.3125C1.25 5.14674 1.31585 4.98777 1.43306 4.87056C1.55027 4.75335 1.70924 4.6875 1.875 4.6875Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'file-image') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M2.5 13.125L6.43305 9.19194C6.49108 9.1339 6.55998 9.08787 6.63581 9.05646C6.71164 9.02505 6.79291 9.00888 6.87499 9.00888C6.95706 9.00888 7.03834 9.02505 7.11417 9.05646C7.18999 9.08787 7.25889 9.1339 7.31693 9.19194L10.808 12.6831C10.8661 12.7411 10.935 12.7871 11.0108 12.8185C11.0866 12.8499 11.1679 12.8661 11.25 12.8661C11.3321 12.8661 11.4133 12.8499 11.4892 12.8185C11.565 12.7871 11.6339 12.7411 11.6919 12.6831L13.308 11.0669C13.3661 11.0089 13.435 10.9629 13.5108 10.9315C13.5866 10.9 13.6679 10.8839 13.75 10.8839C13.8321 10.8839 13.9133 10.9 13.9892 10.9315C14.065 10.9629 14.1339 11.0089 14.1919 11.0669L17.5 14.375M3.125 3.75H16.875C17.2202 3.75 17.5 4.02982 17.5 4.375V15.625C17.5 15.9702 17.2202 16.25 16.875 16.25H3.125C2.77982 16.25 2.5 15.9702 2.5 15.625V4.375C2.5 4.02982 2.77982 3.75 3.125 3.75ZM13.125 7.8125C13.125 8.33027 12.7053 8.75 12.1875 8.75C11.6697 8.75 11.25 8.33027 11.25 7.8125C11.25 7.29473 11.6697 6.875 12.1875 6.875C12.7053 6.875 13.125 7.29473 13.125 7.8125Z\"\n        stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'custom-widget') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M16.25 15V16.25M13.75 12.5H16.25M11.25 16.25H13.75V11.25M11.25 11.25V13.75M4.375 11.25H8.125C8.47018 11.25 8.75 11.5298 8.75 11.875V15.625C8.75 15.9702 8.47018 16.25 8.125 16.25H4.375C4.02982 16.25 3.75 15.9702 3.75 15.625V11.875C3.75 11.5298 4.02982 11.25 4.375 11.25ZM11.875 3.75H15.625C15.9702 3.75 16.25 4.02982 16.25 4.375V8.125C16.25 8.47018 15.9702 8.75 15.625 8.75H11.875C11.5298 8.75 11.25 8.47018 11.25 8.125V4.375C11.25 4.02982 11.5298 3.75 11.875 3.75ZM4.375 3.75H8.125C8.47018 3.75 8.75 4.02982 8.75 4.375V8.125C8.75 8.47018 8.47018 8.75 8.125 8.75H4.375C4.02982 8.75 3.75 8.47018 3.75 8.125V4.375C3.75 4.02982 4.02982 3.75 4.375 3.75Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'button') {\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M9.99939 3.75024V9.68775M13.7501 4.23695C14.9923 5.04536 15.9399 6.23353 16.4518 7.62435C16.9638 9.01517 17.0125 10.5342 16.5909 11.955C16.1693 13.3758 15.2998 14.6223 14.1121 15.5087C12.9244 16.3952 11.482 16.8741 9.99998 16.8741C8.51795 16.8741 7.07559 16.3951 5.88788 15.5087C4.70017 14.6223 3.83071 13.3757 3.40908 11.9549C2.98746 10.5341 3.03624 9.01513 3.54816 7.62432C4.06009 6.2335 5.00774 5.04534 6.24988 4.23693\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  }\n  @else if (icon === 'download-file-button') {\n    <svg style=\"fill:currentColor\"  width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.42424 9.41667C3.49967 9.41667 2.75 10.1663 2.75 11.0909V19.5758C2.75 20.5003 3.49967 21.25 4.42424 21.25H19.5758C20.5003 21.25 21.25 20.5003 21.25 19.5758V11.0909C21.25 10.1663 20.5003 9.41667 19.5758 9.41667H15.9394C15.5252 9.41667 15.1894 9.08088 15.1894 8.66667C15.1894 8.25245 15.5252 7.91667 15.9394 7.91667H19.5758C21.3288 7.91667 22.75 9.33791 22.75 11.0909V19.5758C22.75 21.3288 21.3288 22.75 19.5758 22.75H4.42424C2.67124 22.75 1.25 21.3288 1.25 19.5758V11.0909C1.25 9.33791 2.67124 7.91667 4.42424 7.91667H8.06061C8.47482 7.91667 8.81061 8.25245 8.81061 8.66667C8.81061 9.08088 8.47482 9.41667 8.06061 9.41667H4.42424Z\"/>\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 1.25C12.4142 1.25 12.75 1.58579 12.75 2V15.9394C12.75 16.3536 12.4142 16.6894 12 16.6894C11.5858 16.6894 11.25 16.3536 11.25 15.9394V2C11.25 1.58579 11.5858 1.25 12 1.25Z\"/>\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.83331 12.9848C8.1262 12.6919 8.60107 12.6919 8.89397 12.9848L12 16.0909L15.106 12.9848C15.3989 12.6919 15.8738 12.6919 16.1667 12.9848C16.4596 13.2777 16.4596 13.7526 16.1667 14.0455L12.5303 17.6818C12.2374 17.9747 11.7626 17.9747 11.4697 17.6818L7.83331 14.0455C7.54041 13.7526 7.54041 13.2777 7.83331 12.9848Z\"/>\n    </svg>\n  }\n</ng-template>\n\n\n\n\n\n\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}.mat-button-toggle .text-align-icon{stroke:#323e8b}.mat-button-toggle:hover{color:#747ebf}.mat-button-toggle:hover .text-align-icon{stroke:#747ebf}.mat-button-toggle-checked .text-align-icon{stroke:#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}.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}.tag-item svg{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}.move-icon:hover{opacity:.7}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [CrocoHtmlOptionsToken]