croco-html 2.0.9 → 2.1.1

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.
@@ -32,7 +32,7 @@ import { MatTabsModule } from '@angular/material/tabs';
32
32
  import * as i5$2 from '@angular/material/card';
33
33
  import { MatCardModule } from '@angular/material/card';
34
34
  import * as i1$2 from '@angular/platform-browser';
35
- import * as i10 from '@angular/cdk/drag-drop';
35
+ import * as i11 from '@angular/cdk/drag-drop';
36
36
  import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
37
37
  import * as i4$1 from '@angular/material/progress-spinner';
38
38
  import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@@ -40,8 +40,6 @@ import * as i6$1 from '@angular/material/select';
40
40
  import { MatSelectModule } from '@angular/material/select';
41
41
  import * as i7 from '@angular/material/core';
42
42
  import { MatNativeDateModule } from '@angular/material/core';
43
- import * as i8 from '@angular/material/chips';
44
- import { MatChipsModule } from '@angular/material/chips';
45
43
  import * as i2$4 from '@angular/material/table';
46
44
  import { MatTableModule } from '@angular/material/table';
47
45
  import * as i38 from '@angular/material/tooltip';
@@ -50,6 +48,8 @@ import * as i39 from '@angular/material/checkbox';
50
48
  import { MatCheckboxModule } from '@angular/material/checkbox';
51
49
  import * as i51 from '@angular/material/autocomplete';
52
50
  import { MatAutocompleteModule } from '@angular/material/autocomplete';
51
+ import * as i40 from '@angular/material/chips';
52
+ import { MatChipsModule } from '@angular/material/chips';
53
53
  import * as i46 from '@angular/material/datepicker';
54
54
  import { MatDatepickerModule } from '@angular/material/datepicker';
55
55
  import * as i44 from '@angular/material/dialog';
@@ -255,11 +255,11 @@ class AddFilesBtnComponent {
255
255
  ngOnInit() {
256
256
  }
257
257
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: AddFilesBtnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
258
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: AddFilesBtnComponent, selector: "croco-html-add-files-btn", outputs: { postFilesStarted: "postFilesStarted", filesTagsReady: "filesTagsReady" }, viewQueries: [{ propertyName: "fakeBtn", first: true, predicate: ["fakeBtn"], descendants: true }], ngImport: i0, template: "<div [hidden]=\"true\">\r\n <croco-app-upload-files-btn #fakeBtn \r\n (onFilesUploaded)=\"filesUploadedHandler($event)\" \r\n [btnText]=\"'\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F'\"\r\n [createLocalCopiesNow]=\"true\"\r\n (postFilesStarted)=\"postFilesStartedEventHandler($event)\" \r\n [extAccepts]=\"'image/*'\"></croco-app-upload-files-btn>\r\n</div>\r\n\r\n<div>\r\n <button class=\"w-100\" \r\n (click)=\"handleClick()\"\r\n mat-stroked-button>\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F</button>\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: UploadFilesBtnComponent, selector: "croco-app-upload-files-btn", inputs: ["extAccepts", "isMultiple", "btnText", "createLocalCopiesNow", "hidden"], outputs: ["postFilesStarted", "onFilesUploaded"] }] }); }
258
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: AddFilesBtnComponent, selector: "croco-html-add-files-btn", outputs: { postFilesStarted: "postFilesStarted", filesTagsReady: "filesTagsReady" }, viewQueries: [{ propertyName: "fakeBtn", first: true, predicate: ["fakeBtn"], descendants: true }], ngImport: i0, template: "<div [hidden]=\"true\">\r\n <croco-app-upload-files-btn #fakeBtn (onFilesUploaded)=\"filesUploadedHandler($event)\"\r\n [btnText]=\"'\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F'\" [createLocalCopiesNow]=\"true\"\r\n (postFilesStarted)=\"postFilesStartedEventHandler($event)\" [extAccepts]=\"'image/*'\"></croco-app-upload-files-btn>\r\n</div>\r\n\r\n<div>\r\n <button class=\"w-100\" (click)=\"handleClick()\" mat-stroked-button>\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F</button>\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: UploadFilesBtnComponent, selector: "croco-app-upload-files-btn", inputs: ["extAccepts", "isMultiple", "btnText", "createLocalCopiesNow", "hidden"], outputs: ["postFilesStarted", "onFilesUploaded"] }] }); }
259
259
  }
260
260
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: AddFilesBtnComponent, decorators: [{
261
261
  type: Component,
262
- args: [{ selector: 'croco-html-add-files-btn', template: "<div [hidden]=\"true\">\r\n <croco-app-upload-files-btn #fakeBtn \r\n (onFilesUploaded)=\"filesUploadedHandler($event)\" \r\n [btnText]=\"'\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F'\"\r\n [createLocalCopiesNow]=\"true\"\r\n (postFilesStarted)=\"postFilesStartedEventHandler($event)\" \r\n [extAccepts]=\"'image/*'\"></croco-app-upload-files-btn>\r\n</div>\r\n\r\n<div>\r\n <button class=\"w-100\" \r\n (click)=\"handleClick()\"\r\n mat-stroked-button>\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F</button>\r\n</div>" }]
262
+ args: [{ selector: 'croco-html-add-files-btn', template: "<div [hidden]=\"true\">\r\n <croco-app-upload-files-btn #fakeBtn (onFilesUploaded)=\"filesUploadedHandler($event)\"\r\n [btnText]=\"'\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F'\" [createLocalCopiesNow]=\"true\"\r\n (postFilesStarted)=\"postFilesStartedEventHandler($event)\" [extAccepts]=\"'image/*'\"></croco-app-upload-files-btn>\r\n</div>\r\n\r\n<div>\r\n <button class=\"w-100\" (click)=\"handleClick()\" mat-stroked-button>\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F</button>\r\n</div>" }]
263
263
  }], ctorParameters: () => [], propDecorators: { postFilesStarted: [{
264
264
  type: Output
265
265
  }], fakeBtn: [{
@@ -715,11 +715,23 @@ class AngularMaterialTableMethods {
715
715
  }
716
716
  }
717
717
 
718
+ var EAlignments;
719
+ (function (EAlignments) {
720
+ EAlignments["Left"] = "left";
721
+ EAlignments["Center"] = "center";
722
+ EAlignments["Right"] = "right";
723
+ })(EAlignments || (EAlignments = {}));
724
+ const AlignmentsData = [
725
+ { value: EAlignments.Left, text: 'Слева' },
726
+ { value: EAlignments.Center, text: 'По центру' },
727
+ { value: EAlignments.Right, text: 'Справа' },
728
+ ];
729
+
718
730
  const TextTag = "text";
719
731
  class TextSimpleMethods {
720
732
  static { this.supportedTags = ["sup", "sub", "strong", "b", "i", "u"]; }
721
733
  static ExtractTextTag(elem) {
722
- var hAlignValue = elem.getAttribute("h-align") ?? "left";
734
+ var hAlignValue = elem.getAttribute("h-align") ?? EAlignments.Left;
723
735
  var data = {
724
736
  textTagName: elem.tagName.toLowerCase(),
725
737
  text: elem.innerText.trim().replace('\n\t', ''),
@@ -740,7 +752,7 @@ class TextSimpleMethods {
740
752
  if (result.data.html === '\n') {
741
753
  result.data.html = '';
742
754
  }
743
- var alignmentVals = ["left", "right", "center"];
755
+ var alignmentVals = [EAlignments.Left, EAlignments.Right, EAlignments.Center];
744
756
  if (alignmentVals.indexOf(hAlignValue) < 0) {
745
757
  result.data.validationResult = {
746
758
  isSucceeded: false,
@@ -1194,9 +1206,7 @@ class XmlExtensions {
1194
1206
  }
1195
1207
 
1196
1208
  class DefaultTags {
1197
- static { this.tags = [
1198
- { tag: FileImageTagDataConsts.TagName, displayValue: 'Изображение' },
1199
- { tag: ExternalVideoTagDataConsts.TagName, displayValue: 'Внешнее видео Youtube' },
1209
+ static { this.textTags = [
1200
1210
  { tag: 'text', displayValue: 'Текст' },
1201
1211
  { tag: 'h1', displayValue: 'Заголовок 1 уровня' },
1202
1212
  { tag: 'h2', displayValue: 'Заголовок 2 уровня' },
@@ -1205,6 +1215,11 @@ class DefaultTags {
1205
1215
  { tag: 'h5', displayValue: 'Заголовок 5 уровня' },
1206
1216
  { tag: 'h6', displayValue: 'Заголовок 6 уровня' },
1207
1217
  ]; }
1218
+ static { this.tags = [
1219
+ { tag: FileImageTagDataConsts.TagName, displayValue: 'Изображение' },
1220
+ { tag: ExternalVideoTagDataConsts.TagName, displayValue: 'Внешнее видео Youtube' },
1221
+ ...DefaultTags.textTags
1222
+ ]; }
1208
1223
  static { this.htmlRawTag = {
1209
1224
  tag: HtmlRawTagDataConsts.TagName, displayValue: 'Html разметка'
1210
1225
  }; }
@@ -1285,6 +1300,12 @@ class VisualEditorComponent {
1285
1300
  this._cdref = _cdref;
1286
1301
  this.isLoading = false;
1287
1302
  this.loadingText = "Идёт загрузка";
1303
+ this.isActiveAddText = false;
1304
+ this.text = '';
1305
+ this.alignment = EAlignments.Left;
1306
+ this.textTag = DefaultTags.textTags[0].tag;
1307
+ this.textTagOptions = DefaultTags.textTags;
1308
+ this.alignmentOptions = AlignmentsData;
1288
1309
  this.showMarkUp = true;
1289
1310
  this.tags = [];
1290
1311
  this.useHtmlRaw = false;
@@ -1292,6 +1313,7 @@ class VisualEditorComponent {
1292
1313
  this.onHtmlChanged = new EventEmitter();
1293
1314
  this.rendered = new EventEmitter();
1294
1315
  this.bodyTags = [];
1316
+ this.saveBodyTags = [];
1295
1317
  }
1296
1318
  ngAfterViewInit() {
1297
1319
  this.rendered.emit(true);
@@ -1305,7 +1327,7 @@ class VisualEditorComponent {
1305
1327
  let attrs = {};
1306
1328
  let innerHtml = "";
1307
1329
  if (TextMethods.textTags.includes(tagDescription.tag)) {
1308
- attrs["h-align"] = "left";
1330
+ attrs["h-align"] = EAlignments.Left;
1309
1331
  innerHtml = "Введите ваш текст";
1310
1332
  }
1311
1333
  else if (tagDescription.tag == ExternalVideoTagDataConsts.TagName) {
@@ -1323,6 +1345,45 @@ class VisualEditorComponent {
1323
1345
  });
1324
1346
  this.recalculateHtml();
1325
1347
  }
1348
+ addText() {
1349
+ this.isActiveAddText = !this.isActiveAddText;
1350
+ this.saveBodyTags = JSON.parse(JSON.stringify(this.bodyTags));
1351
+ if (this.isActiveAddText) {
1352
+ setTimeout(() => {
1353
+ this.textArea.nativeElement.focus();
1354
+ });
1355
+ }
1356
+ this.resetTextStyle();
1357
+ }
1358
+ closeText() {
1359
+ this.isActiveAddText = !this.isActiveAddText;
1360
+ this.bodyTags = JSON.parse(JSON.stringify(this.saveBodyTags));
1361
+ this.resetTextStyle();
1362
+ }
1363
+ resetTextStyle() {
1364
+ this.text = '';
1365
+ this.alignment = EAlignments.Left;
1366
+ this.textTag = DefaultTags.textTags[0].tag;
1367
+ }
1368
+ modelChanged() {
1369
+ let lines = this.text.split('\n');
1370
+ this.bodyTags = JSON.parse(JSON.stringify(this.saveBodyTags));
1371
+ let tagDescription = this.tags
1372
+ .find(x => x.tag === this.textTag);
1373
+ for (let i = 0; i < lines.length; i++) {
1374
+ if (lines[i].length > 0) {
1375
+ this.bodyTags.push({
1376
+ tagDescription,
1377
+ innerHtml: lines[i],
1378
+ attributes: {
1379
+ "h-align": `${this.alignment}`
1380
+ },
1381
+ presentOrEdit: true
1382
+ });
1383
+ this.recalculateHtml();
1384
+ }
1385
+ }
1386
+ }
1326
1387
  postFilesStartedEventHandler(model) {
1327
1388
  this.loadingText = "Файлы загружаются на сервер";
1328
1389
  this.isLoading = true;
@@ -1363,12 +1424,15 @@ class VisualEditorComponent {
1363
1424
  this.selectedValue = this.tags[0].tag;
1364
1425
  }
1365
1426
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: VisualEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
1366
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: VisualEditorComponent, selector: "croco-visual-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged", rendered: "rendered" }, ngImport: i0, template: "<div *ngIf=\"isLoading\">\r\n <div>\r\n <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\r\n <div style=\"text-align: center;\">{{loadingText}}</div>\r\n </div>\r\n <div style=\"height: 10px;\"></div>\r\n</div>\r\n\r\n<div [hidden]=\"isLoading\">\r\n <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n <div *ngFor=\"let tag of bodyTags; let i = index\" cdkDrag>\r\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n <mat-card-content>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"example-handle\" cdkDragHandle>\r\n <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\">\r\n </path>\r\n <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n </svg>\r\n </div>\r\n <div>\r\n <mat-chip-listbox aria-label=\"Tag display value\">\r\n <mat-chip-option color=\"primary\"\r\n selected>{{tag.tagDescription.displayValue}}</mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n </div>\r\n\r\n <div style=\"height: 15px;\"></div>\r\n\r\n <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagSavedHandler($event)\"\r\n (onTagRemoved)=\"onTagRemovedHandler(i)\">\r\n </croco-html-main-editor-block>\r\n </mat-card-content>\r\n </mat-card>\r\n\r\n <div style=\"height: 10px;\">\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<div [hidden]=\"isLoading\">\r\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n <mat-card-content>\r\n <div class=\"row d-flex align-items-center\">\r\n <div class=\"col-12\">\r\n <mat-form-field class=\"w-100\" appearance=\"outline\">\r\n <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0435\u0433</mat-label>\r\n <mat-select [(ngModel)]=\"selectedValue\">\r\n <mat-option *ngFor=\"let tag of tags\" [value]=\"tag.tag\">\r\n {{tag.displayValue}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-12\">\r\n <button (click)=\"addTag()\" class=\"w-100\" mat-stroked-button>\r\n \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433\r\n </button>\r\n </div>\r\n </div>\r\n </mat-card-content>\r\n </mat-card>\r\n\r\n <div style=\"height: 10px;\">\r\n </div>\r\n</div>\r\n\r\n<div [hidden]=\"isLoading\">\r\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n <mat-card-content>\r\n <div class=\"row d-flex align-items-center\">\r\n <div class=\"col-12\">\r\n <croco-html-add-files-btn (filesTagsReady)=\"filesTagsReadyHandler($event)\"\r\n (postFilesStarted)=\"postFilesStartedEventHandler($event)\" class=\"w-100\">\r\n </croco-html-add-files-btn>\r\n </div>\r\n </div>\r\n </mat-card-content>\r\n </mat-card>\r\n\r\n <div style=\"height: 10px;\">\r\n </div>\r\n</div>", styles: [".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)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i4$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i5$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i5$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6$1.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: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i8.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i8.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: i10.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: i10.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: i10.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MainEditorBlockComponent, selector: "croco-html-main-editor-block", inputs: ["tag"], outputs: ["onTagSaved", "onTagRemoved"] }, { kind: "component", type: AddFilesBtnComponent, selector: "croco-html-add-files-btn", outputs: ["postFilesStarted", "filesTagsReady"] }] }); }
1427
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: VisualEditorComponent, 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: "<div *ngIf=\"isLoading\">\r\n <div>\r\n <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\r\n <div style=\"text-align: center;\">{{loadingText}}</div>\r\n </div>\r\n <div style=\"height: 10px;\"></div>\r\n</div>\r\n<div [hidden]=\"isLoading\">\r\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n <mat-card-content>\r\n <div class=\"row d-flex align-items-center\">\r\n <div class=\"col-12\">\r\n <button (click)=\"addText()\" class=\"w-100\" mat-stroked-button *ngIf=\"!isActiveAddText\">\r\n \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u043A\u0441\u0442\r\n </button>\r\n <ng-container *ngIf=\"isActiveAddText\">\r\n <mat-form-field class=\"w-100\" >\r\n <textarea\r\n #autosize=\"cdkTextareaAutosize\"\r\n matInput\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"1\"\r\n cdkAutosizeMaxRows=\"5\"\r\n placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\r\n #textArea\r\n [(ngModel)]=\"text\"\r\n (ngModelChange)=\"modelChanged()\"\r\n ></textarea>\r\n </mat-form-field>\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-label>\u0422\u0435\u0433 \u0434\u043B\u044F \u0442\u0435\u043A\u0441\u0442\u0430</mat-label>\r\n <mat-select [(ngModel)]=\"textTag\" (ngModelChange)=\"modelChanged()\">\r\n <mat-option *ngFor=\"let option of textTagOptions\" value=\"{{ option.tag }}\">\r\n {{ option.displayValue }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-label>\u0413\u043E\u0440\u0438\u0437\u043E\u043D\u0442\u0430\u043B\u044C\u043D\u043E\u0435 \u0432\u044B\u0440\u0430\u0432\u043D\u0438\u0432\u0430\u043D\u0438\u0435</mat-label>\r\n <mat-select [(ngModel)]=\"alignment\" (ngModelChange)=\"modelChanged()\">\r\n <mat-option *ngFor=\"let option of alignmentOptions\" value=\"{{ option.value }}\">\r\n {{ option.text }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </ng-container>\r\n <div class=\"d-flex flex-nowrap justify-content-end w-100\">\r\n <button (click)=\"addText()\" class=\"w-20\" style=\"margin-right: 10px\" mat-flat-button color=\"primary\" *ngIf=\"isActiveAddText\">\r\n \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C\r\n </button>\r\n <button (click)=\"closeText()\" class=\"w-20\" mat-flat-button color=\"warn\" *ngIf=\"isActiveAddText\">\r\n \u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </mat-card-content>\r\n </mat-card>\r\n\r\n <div style=\"height: 10px;\">\r\n </div>\r\n</div>\r\n<div [hidden]=\"isLoading\">\r\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n <mat-card-content>\r\n <div class=\"row d-flex align-items-center\">\r\n <div class=\"col-12\">\r\n <mat-form-field class=\"w-100\" appearance=\"outline\">\r\n <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0435\u0433</mat-label>\r\n <mat-select [(ngModel)]=\"selectedValue\">\r\n <mat-option *ngFor=\"let tag of tags\" [value]=\"tag.tag\">\r\n {{tag.displayValue}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-12\">\r\n <button (click)=\"addTag()\" class=\"w-100\" mat-stroked-button>\r\n \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433\r\n </button>\r\n </div>\r\n </div>\r\n </mat-card-content>\r\n </mat-card>\r\n\r\n <div style=\"height: 10px;\">\r\n </div>\r\n</div>\r\n<div [hidden]=\"isLoading\">\r\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n <mat-card-content>\r\n <div class=\"row d-flex align-items-center\">\r\n <div class=\"col-12\">\r\n <croco-html-add-files-btn (filesTagsReady)=\"filesTagsReadyHandler($event)\"\r\n (postFilesStarted)=\"postFilesStartedEventHandler($event)\" class=\"w-100\">\r\n </croco-html-add-files-btn>\r\n </div>\r\n </div>\r\n </mat-card-content>\r\n </mat-card>\r\n\r\n <div style=\"height: 10px;\">\r\n </div>\r\n</div>\r\n<div [hidden]=\"isLoading\">\r\n <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n <div *ngFor=\"let tag of bodyTags; let i = index\" cdkDrag>\r\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n <mat-card-content>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"example-handle\" cdkDragHandle>\r\n <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\">\r\n </path>\r\n <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n </svg>\r\n </div>\r\n <div>\r\n <div class=\"badge\">\r\n {{tag.tagDescription.displayValue}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div style=\"height: 15px;\"></div>\r\n\r\n <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagSavedHandler($event)\"\r\n (onTagRemoved)=\"onTagRemovedHandler(i)\">\r\n </croco-html-main-editor-block>\r\n </mat-card-content>\r\n </mat-card>\r\n\r\n <div style=\"height: 10px;\">\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".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{background-color:#50a450;color:#fff;min-width:55px;height:25px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i4$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i5$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i5$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6$1.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: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: i4.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: i5.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i11.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: i11.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: i11.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MainEditorBlockComponent, selector: "croco-html-main-editor-block", inputs: ["tag"], outputs: ["onTagSaved", "onTagRemoved"] }, { kind: "component", type: AddFilesBtnComponent, selector: "croco-html-add-files-btn", outputs: ["postFilesStarted", "filesTagsReady"] }] }); }
1367
1428
  }
1368
1429
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: VisualEditorComponent, decorators: [{
1369
1430
  type: Component,
1370
- args: [{ selector: 'croco-visual-editor', template: "<div *ngIf=\"isLoading\">\r\n <div>\r\n <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\r\n <div style=\"text-align: center;\">{{loadingText}}</div>\r\n </div>\r\n <div style=\"height: 10px;\"></div>\r\n</div>\r\n\r\n<div [hidden]=\"isLoading\">\r\n <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n <div *ngFor=\"let tag of bodyTags; let i = index\" cdkDrag>\r\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n <mat-card-content>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"example-handle\" cdkDragHandle>\r\n <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\">\r\n </path>\r\n <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n </svg>\r\n </div>\r\n <div>\r\n <mat-chip-listbox aria-label=\"Tag display value\">\r\n <mat-chip-option color=\"primary\"\r\n selected>{{tag.tagDescription.displayValue}}</mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n </div>\r\n\r\n <div style=\"height: 15px;\"></div>\r\n\r\n <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagSavedHandler($event)\"\r\n (onTagRemoved)=\"onTagRemovedHandler(i)\">\r\n </croco-html-main-editor-block>\r\n </mat-card-content>\r\n </mat-card>\r\n\r\n <div style=\"height: 10px;\">\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<div [hidden]=\"isLoading\">\r\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n <mat-card-content>\r\n <div class=\"row d-flex align-items-center\">\r\n <div class=\"col-12\">\r\n <mat-form-field class=\"w-100\" appearance=\"outline\">\r\n <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0435\u0433</mat-label>\r\n <mat-select [(ngModel)]=\"selectedValue\">\r\n <mat-option *ngFor=\"let tag of tags\" [value]=\"tag.tag\">\r\n {{tag.displayValue}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-12\">\r\n <button (click)=\"addTag()\" class=\"w-100\" mat-stroked-button>\r\n \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433\r\n </button>\r\n </div>\r\n </div>\r\n </mat-card-content>\r\n </mat-card>\r\n\r\n <div style=\"height: 10px;\">\r\n </div>\r\n</div>\r\n\r\n<div [hidden]=\"isLoading\">\r\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n <mat-card-content>\r\n <div class=\"row d-flex align-items-center\">\r\n <div class=\"col-12\">\r\n <croco-html-add-files-btn (filesTagsReady)=\"filesTagsReadyHandler($event)\"\r\n (postFilesStarted)=\"postFilesStartedEventHandler($event)\" class=\"w-100\">\r\n </croco-html-add-files-btn>\r\n </div>\r\n </div>\r\n </mat-card-content>\r\n </mat-card>\r\n\r\n <div style=\"height: 10px;\">\r\n </div>\r\n</div>", styles: [".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)}\n"] }]
1371
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { showMarkUp: [{
1431
+ args: [{ selector: 'croco-visual-editor', template: "<div *ngIf=\"isLoading\">\r\n <div>\r\n <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\r\n <div style=\"text-align: center;\">{{loadingText}}</div>\r\n </div>\r\n <div style=\"height: 10px;\"></div>\r\n</div>\r\n<div [hidden]=\"isLoading\">\r\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n <mat-card-content>\r\n <div class=\"row d-flex align-items-center\">\r\n <div class=\"col-12\">\r\n <button (click)=\"addText()\" class=\"w-100\" mat-stroked-button *ngIf=\"!isActiveAddText\">\r\n \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u043A\u0441\u0442\r\n </button>\r\n <ng-container *ngIf=\"isActiveAddText\">\r\n <mat-form-field class=\"w-100\" >\r\n <textarea\r\n #autosize=\"cdkTextareaAutosize\"\r\n matInput\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"1\"\r\n cdkAutosizeMaxRows=\"5\"\r\n placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\r\n #textArea\r\n [(ngModel)]=\"text\"\r\n (ngModelChange)=\"modelChanged()\"\r\n ></textarea>\r\n </mat-form-field>\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-label>\u0422\u0435\u0433 \u0434\u043B\u044F \u0442\u0435\u043A\u0441\u0442\u0430</mat-label>\r\n <mat-select [(ngModel)]=\"textTag\" (ngModelChange)=\"modelChanged()\">\r\n <mat-option *ngFor=\"let option of textTagOptions\" value=\"{{ option.tag }}\">\r\n {{ option.displayValue }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-label>\u0413\u043E\u0440\u0438\u0437\u043E\u043D\u0442\u0430\u043B\u044C\u043D\u043E\u0435 \u0432\u044B\u0440\u0430\u0432\u043D\u0438\u0432\u0430\u043D\u0438\u0435</mat-label>\r\n <mat-select [(ngModel)]=\"alignment\" (ngModelChange)=\"modelChanged()\">\r\n <mat-option *ngFor=\"let option of alignmentOptions\" value=\"{{ option.value }}\">\r\n {{ option.text }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </ng-container>\r\n <div class=\"d-flex flex-nowrap justify-content-end w-100\">\r\n <button (click)=\"addText()\" class=\"w-20\" style=\"margin-right: 10px\" mat-flat-button color=\"primary\" *ngIf=\"isActiveAddText\">\r\n \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C\r\n </button>\r\n <button (click)=\"closeText()\" class=\"w-20\" mat-flat-button color=\"warn\" *ngIf=\"isActiveAddText\">\r\n \u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </mat-card-content>\r\n </mat-card>\r\n\r\n <div style=\"height: 10px;\">\r\n </div>\r\n</div>\r\n<div [hidden]=\"isLoading\">\r\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n <mat-card-content>\r\n <div class=\"row d-flex align-items-center\">\r\n <div class=\"col-12\">\r\n <mat-form-field class=\"w-100\" appearance=\"outline\">\r\n <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0435\u0433</mat-label>\r\n <mat-select [(ngModel)]=\"selectedValue\">\r\n <mat-option *ngFor=\"let tag of tags\" [value]=\"tag.tag\">\r\n {{tag.displayValue}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-12\">\r\n <button (click)=\"addTag()\" class=\"w-100\" mat-stroked-button>\r\n \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433\r\n </button>\r\n </div>\r\n </div>\r\n </mat-card-content>\r\n </mat-card>\r\n\r\n <div style=\"height: 10px;\">\r\n </div>\r\n</div>\r\n<div [hidden]=\"isLoading\">\r\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n <mat-card-content>\r\n <div class=\"row d-flex align-items-center\">\r\n <div class=\"col-12\">\r\n <croco-html-add-files-btn (filesTagsReady)=\"filesTagsReadyHandler($event)\"\r\n (postFilesStarted)=\"postFilesStartedEventHandler($event)\" class=\"w-100\">\r\n </croco-html-add-files-btn>\r\n </div>\r\n </div>\r\n </mat-card-content>\r\n </mat-card>\r\n\r\n <div style=\"height: 10px;\">\r\n </div>\r\n</div>\r\n<div [hidden]=\"isLoading\">\r\n <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n <div *ngFor=\"let tag of bodyTags; let i = index\" cdkDrag>\r\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n <mat-card-content>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"example-handle\" cdkDragHandle>\r\n <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\">\r\n </path>\r\n <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n </svg>\r\n </div>\r\n <div>\r\n <div class=\"badge\">\r\n {{tag.tagDescription.displayValue}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div style=\"height: 15px;\"></div>\r\n\r\n <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagSavedHandler($event)\"\r\n (onTagRemoved)=\"onTagRemovedHandler(i)\">\r\n </croco-html-main-editor-block>\r\n </mat-card-content>\r\n </mat-card>\r\n\r\n <div style=\"height: 10px;\">\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".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{background-color:#50a450;color:#fff;min-width:55px;height:25px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-weight:400}\n"] }]
1432
+ }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { textArea: [{
1433
+ type: ViewChild,
1434
+ args: ['textArea']
1435
+ }], showMarkUp: [{
1372
1436
  type: Input
1373
1437
  }], useHtmlRaw: [{
1374
1438
  type: Input
@@ -1689,7 +1753,7 @@ class CrocoHtmlModule {
1689
1753
  static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: CrocoHtmlModule, declarations: [UploadFilesBtnComponent, HtmlViewComponent, XmlTagTableViewComponent, XmlTagViewComponent, XmlTagRichTextViewComponent, XmlTagHtmlViewComponent, XmlTagTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHeaderInnerTextViewComponent, XmlTagExternalVideoComponent, HtmlRawViewComponent, FileImageTagViewComponent, HtmlViewComponent, MainEditorComponent, FileIdSelectComponent, TextEditorComponent, ExternalVideoBlockComponent, ImageEditorComponent, MainEditorBlockComponent, VisualEditorComponent, AddFilesBtnComponent, HtmlRawEditorComponent, RichTextToHtmlPipe, TagToSpanPipe, ToPreviewPipe, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe], imports: [CommonModule,
1690
1754
  FormsModule,
1691
1755
  ReactiveFormsModule,
1692
- NgSelectModule, i27.MatBadgeModule, i2$4.MatTableModule, i29.MatExpansionModule, i3.MatFormFieldModule, i2$3.MatSnackBarModule, i32.MatProgressBarModule, i4$1.MatProgressSpinnerModule, i6$2.MatTabsModule, i35.MatMenuModule, i5$2.MatCardModule, i6$1.MatSelectModule, i38.MatTooltipModule, i39.MatCheckboxModule, i8.MatChipsModule, i41.MatListModule, i2.MatButtonModule, i4.MatInputModule, i44.MatDialogModule, i45.MatPaginatorModule, i46.MatDatepickerModule, i47.MatGridListModule, i48.MatSlideToggleModule, i49.MatTreeModule, i7.MatNativeDateModule, i51.MatAutocompleteModule, i52.MatSidenavModule, i5$1.MatIconModule, i10.DragDropModule, i6.MatButtonToggleModule, YouTubePlayerModule], exports: [UploadFilesBtnComponent, HtmlViewComponent, XmlTagTableViewComponent, XmlTagViewComponent, XmlTagRichTextViewComponent, XmlTagHtmlViewComponent, XmlTagTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHeaderInnerTextViewComponent, XmlTagExternalVideoComponent, HtmlRawViewComponent, FileImageTagViewComponent, HtmlViewComponent, MainEditorComponent, FileIdSelectComponent, TextEditorComponent, ExternalVideoBlockComponent, ImageEditorComponent, MainEditorBlockComponent, VisualEditorComponent, AddFilesBtnComponent, HtmlRawEditorComponent, RichTextToHtmlPipe, TagToSpanPipe, ToPreviewPipe, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe] }); }
1756
+ NgSelectModule, i27.MatBadgeModule, i2$4.MatTableModule, i29.MatExpansionModule, i3.MatFormFieldModule, i2$3.MatSnackBarModule, i32.MatProgressBarModule, i4$1.MatProgressSpinnerModule, i6$2.MatTabsModule, i35.MatMenuModule, i5$2.MatCardModule, i6$1.MatSelectModule, i38.MatTooltipModule, i39.MatCheckboxModule, i40.MatChipsModule, i41.MatListModule, i2.MatButtonModule, i4.MatInputModule, i44.MatDialogModule, i45.MatPaginatorModule, i46.MatDatepickerModule, i47.MatGridListModule, i48.MatSlideToggleModule, i49.MatTreeModule, i7.MatNativeDateModule, i51.MatAutocompleteModule, i52.MatSidenavModule, i5$1.MatIconModule, i11.DragDropModule, i6.MatButtonToggleModule, YouTubePlayerModule], exports: [UploadFilesBtnComponent, HtmlViewComponent, XmlTagTableViewComponent, XmlTagViewComponent, XmlTagRichTextViewComponent, XmlTagHtmlViewComponent, XmlTagTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHeaderInnerTextViewComponent, XmlTagExternalVideoComponent, HtmlRawViewComponent, FileImageTagViewComponent, HtmlViewComponent, MainEditorComponent, FileIdSelectComponent, TextEditorComponent, ExternalVideoBlockComponent, ImageEditorComponent, MainEditorBlockComponent, VisualEditorComponent, AddFilesBtnComponent, HtmlRawEditorComponent, RichTextToHtmlPipe, TagToSpanPipe, ToPreviewPipe, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe] }); }
1693
1757
  static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: CrocoHtmlModule, imports: [CommonModule,
1694
1758
  FormsModule,
1695
1759
  ReactiveFormsModule,