croco-html 0.1.5 → 0.1.7

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.
@@ -159,10 +159,10 @@ class UploadFilesBtnComponent {
159
159
  }
160
160
  }
161
161
  UploadFilesBtnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadFilesBtnComponent, deps: [{ token: FileUploadService }], target: i0.ɵɵFactoryTarget.Component });
162
- UploadFilesBtnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: UploadFilesBtnComponent, selector: "app-upload-files-btn", inputs: { extAccepts: "extAccepts", isMultiple: "isMultiple", btnText: "btnText", createLocalCopiesNow: "createLocalCopiesNow", hidden: "hidden" }, outputs: { postFilesStarted: "postFilesStarted", onFilesUploaded: "onFilesUploaded" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["filesInput"], descendants: true }], ngImport: i0, template: "<button [hidden]=\"hidden\" mat-raised-button color=\"primary\" (click)=\"filesInput.click()\">{{btnText}}</button>\r\n<input [hidden]=\"true\" [accept]=\"extAccepts\" [multiple]=\"isMultiple\" type=\"file\" #filesInput (change)=\"handleFileInput($event.target.files)\" />", styles: [""], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
162
+ UploadFilesBtnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: UploadFilesBtnComponent, selector: "croco-app-upload-files-btn", inputs: { extAccepts: "extAccepts", isMultiple: "isMultiple", btnText: "btnText", createLocalCopiesNow: "createLocalCopiesNow", hidden: "hidden" }, outputs: { postFilesStarted: "postFilesStarted", onFilesUploaded: "onFilesUploaded" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["filesInput"], descendants: true }], ngImport: i0, template: "<button [hidden]=\"hidden\" mat-raised-button color=\"primary\" (click)=\"filesInput.click()\">{{btnText}}</button>\r\n<input [hidden]=\"true\" [accept]=\"extAccepts\" [multiple]=\"isMultiple\" type=\"file\" #filesInput (change)=\"handleFileInput($event.target.files)\" />", styles: [""], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
163
163
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadFilesBtnComponent, decorators: [{
164
164
  type: Component,
165
- args: [{ selector: 'app-upload-files-btn', template: "<button [hidden]=\"hidden\" mat-raised-button color=\"primary\" (click)=\"filesInput.click()\">{{btnText}}</button>\r\n<input [hidden]=\"true\" [accept]=\"extAccepts\" [multiple]=\"isMultiple\" type=\"file\" #filesInput (change)=\"handleFileInput($event.target.files)\" />", styles: [""] }]
165
+ args: [{ selector: 'croco-app-upload-files-btn', template: "<button [hidden]=\"hidden\" mat-raised-button color=\"primary\" (click)=\"filesInput.click()\">{{btnText}}</button>\r\n<input [hidden]=\"true\" [accept]=\"extAccepts\" [multiple]=\"isMultiple\" type=\"file\" #filesInput (change)=\"handleFileInput($event.target.files)\" />", styles: [""] }]
166
166
  }], ctorParameters: function () { return [{ type: FileUploadService }]; }, propDecorators: { fileInput: [{
167
167
  type: ViewChild,
168
168
  args: ['filesInput']
@@ -217,10 +217,10 @@ class AddFilesBtnComponent {
217
217
  }
218
218
  }
219
219
  AddFilesBtnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AddFilesBtnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
220
- AddFilesBtnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AddFilesBtnComponent, selector: "croco-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 <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/*'\"></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: [""], components: [{ type: UploadFilesBtnComponent, selector: "app-upload-files-btn", inputs: ["extAccepts", "isMultiple", "btnText", "createLocalCopiesNow", "hidden"], outputs: ["postFilesStarted", "onFilesUploaded"] }, { type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
220
+ AddFilesBtnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AddFilesBtnComponent, selector: "croco-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: [""], components: [{ type: UploadFilesBtnComponent, selector: "croco-app-upload-files-btn", inputs: ["extAccepts", "isMultiple", "btnText", "createLocalCopiesNow", "hidden"], outputs: ["postFilesStarted", "onFilesUploaded"] }, { type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
221
221
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AddFilesBtnComponent, decorators: [{
222
222
  type: Component,
223
- args: [{ selector: 'croco-add-files-btn', template: "<div [hidden]=\"true\">\r\n <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/*'\"></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: [""] }]
223
+ args: [{ selector: 'croco-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>", styles: [""] }]
224
224
  }], ctorParameters: function () { return []; }, propDecorators: { postFilesStarted: [{
225
225
  type: Output
226
226
  }], fakeBtn: [{
@@ -315,7 +315,7 @@ class ExternalVideoBlockComponent {
315
315
  }
316
316
  }
317
317
  ExternalVideoBlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExternalVideoBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
318
- ExternalVideoBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ExternalVideoBlockComponent, selector: "croco-html-external-video-block", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "<div *ngIf=\"tag.presentOrEdit\">\r\n \r\n <div>\r\n \u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 YouTube: {{data.youtubeLink}}\r\n </div>\r\n\r\n <div style=\"height: 10px;\"></div>\r\n\r\n <croco-html-xml-tag-external-video [tagData]=\"tagData\">\r\n </croco-html-xml-tag-external-video>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n <div>\r\n <form [formGroup]=\"myForm\">\r\n <mat-form-field class=\"w-100\">\r\n <input matInput placeholder=\"\u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 YouTube\"\r\n new-autocomplete=\"off\"\r\n autocomplete=\"off\"\r\n formControlName=\"youtubeLink\"\r\n [(ngModel)]=\"data.youtubeLink\"\r\n (ngModelChange)=\"linkChanged()\">\r\n </mat-form-field>\r\n </form>\r\n </div>\r\n</div>\r\n\r\n", styles: [""], components: [{ type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }, { type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
318
+ ExternalVideoBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ExternalVideoBlockComponent, selector: "croco-html-external-video-block", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "<div *ngIf=\"tag.presentOrEdit\">\r\n \r\n <div>\r\n \u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 YouTube: {{data.youtubeLink}}\r\n </div>\r\n\r\n <div style=\"height: 10px;\"></div>\r\n\r\n <croco-html-xml-tag-external-video [tagData]=\"tagData\">\r\n </croco-html-xml-tag-external-video>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n <div>\r\n <form [formGroup]=\"myForm\">\r\n <mat-form-field class=\"w-100\">\r\n <input matInput placeholder=\"\u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 YouTube\"\r\n new-autocomplete=\"off\"\r\n autocomplete=\"off\"\r\n formControlName=\"youtubeLink\"\r\n [(ngModel)]=\"data.youtubeLink\"\r\n (ngModelChange)=\"linkChanged()\">\r\n </mat-form-field>\r\n </form>\r\n </div>\r\n</div>\r\n\r\n", styles: [""], components: [{ type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }, { type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$2.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"] }, { type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
319
319
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExternalVideoBlockComponent, decorators: [{
320
320
  type: Component,
321
321
  args: [{ selector: 'croco-html-external-video-block', template: "<div *ngIf=\"tag.presentOrEdit\">\r\n \r\n <div>\r\n \u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 YouTube: {{data.youtubeLink}}\r\n </div>\r\n\r\n <div style=\"height: 10px;\"></div>\r\n\r\n <croco-html-xml-tag-external-video [tagData]=\"tagData\">\r\n </croco-html-xml-tag-external-video>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n <div>\r\n <form [formGroup]=\"myForm\">\r\n <mat-form-field class=\"w-100\">\r\n <input matInput placeholder=\"\u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 YouTube\"\r\n new-autocomplete=\"off\"\r\n autocomplete=\"off\"\r\n formControlName=\"youtubeLink\"\r\n [(ngModel)]=\"data.youtubeLink\"\r\n (ngModelChange)=\"linkChanged()\">\r\n </mat-form-field>\r\n </form>\r\n </div>\r\n</div>\r\n\r\n", styles: [""] }]
@@ -333,7 +333,7 @@ class HtmlRawEditorComponent {
333
333
  }
334
334
  }
335
335
  HtmlRawEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HtmlRawEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
336
- HtmlRawEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: HtmlRawEditorComponent, selector: "croco-html-html-raw-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "<div *ngIf=\"tag.presentOrEdit\">\r\n <div [innerHTML]=\"tag.innerHtml\"></div>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n <div style=\"height: 10px;\">\r\n </div>\r\n <div>\r\n <mat-form-field class=\"w-100\">\r\n <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\r\n cdkAutosizeMinRows=\"1\"\r\n placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\"\r\n [(ngModel)]=\"tag.innerHtml\"></textarea>\r\n </mat-form-field>\r\n </div>\r\n</div>\r\n\r\n", styles: [""], components: [{ type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
336
+ HtmlRawEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: HtmlRawEditorComponent, selector: "croco-html-html-raw-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "<div *ngIf=\"tag.presentOrEdit\">\r\n <div [innerHTML]=\"tag.innerHtml\"></div>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n <div style=\"height: 10px;\">\r\n </div>\r\n <div>\r\n <mat-form-field class=\"w-100\">\r\n <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\r\n cdkAutosizeMinRows=\"1\"\r\n placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\"\r\n [(ngModel)]=\"tag.innerHtml\"></textarea>\r\n </mat-form-field>\r\n </div>\r\n</div>\r\n\r\n", styles: [""], components: [{ type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.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"] }, { type: i4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
337
337
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HtmlRawEditorComponent, decorators: [{
338
338
  type: Component,
339
339
  args: [{ selector: 'croco-html-html-raw-editor', template: "<div *ngIf=\"tag.presentOrEdit\">\r\n <div [innerHTML]=\"tag.innerHtml\"></div>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n <div style=\"height: 10px;\">\r\n </div>\r\n <div>\r\n <mat-form-field class=\"w-100\">\r\n <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\r\n cdkAutosizeMinRows=\"1\"\r\n placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\"\r\n [(ngModel)]=\"tag.innerHtml\"></textarea>\r\n </mat-form-field>\r\n </div>\r\n</div>\r\n\r\n", styles: [""] }]
@@ -454,7 +454,7 @@ class ImageEditorComponent {
454
454
  }
455
455
  }
456
456
  ImageEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ImageEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
457
- ImageEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ImageEditorComponent, selector: "croco-html-image-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "<div>\r\n <div style=\"height: 10px;\">\r\n </div>\r\n \r\n <div *ngIf=\"hasImageError\" class=\"error-block\">\r\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.\r\n </div>\r\n\r\n <div *ngIf=\"hasFileId() && !hasImageError\">\r\n <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc()\" (error)=\"onErrorHandler()\"/>\r\n </div>\r\n\r\n <div *ngIf=\"!hasFileId()\">\r\n <h5>[\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E]</h5>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n <div style=\"height: 10px;\"></div>\r\n\r\n <div style=\"overflow-x:auto;\">\r\n <mat-button-toggle-group [(ngModel)]=\"searchOrEdit\">\r\n <mat-button-toggle value=\"search\">\r\n \u0418\u0441\u043A\u0430\u0442\u044C \u0444\u0430\u0439\u043B <mat-icon>search</mat-icon>\r\n </mat-button-toggle>\r\n <mat-button-toggle value=\"edit\">\r\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>\r\n </mat-button-toggle>\r\n </mat-button-toggle-group>\r\n </div>\r\n \r\n\r\n <div style=\"height: 10px;\"></div>\r\n\r\n <div [hidden]=\"searchOrEdit !== 'search'\">\r\n <croco-html-file-id-select\r\n [labelText]=\"'\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B'\"\r\n [(fileId)]=\"tag.attributes['file-id']\"\r\n (onFileIdChanged)=\"onFileIdChanged($event)\">\r\n </croco-html-file-id-select>\r\n </div>\r\n\r\n <div [hidden]=\"searchOrEdit !== 'edit'\">\r\n <form [formGroup]=\"myForm\">\r\n <mat-form-field class=\"w-100\">\r\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\"\r\n formControlName=\"fileId\" \r\n type=\"number\"\r\n [(ngModel)]=\"tag.attributes['file-id']\"\r\n (ngModelChange)=\"removeImageError()\">\r\n </mat-form-field>\r\n </form>\r\n </div>\r\n</div>", styles: [".error-block{background-color:#f32323;color:#fff;text-align:center;border-radius:10px;padding:10px}\n"], components: [{ type: i1$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: FileIdSelectComponent, selector: "croco-html-file-id-select", inputs: ["labelText", "fileId"], outputs: ["fileId", "onFileIdChanged"] }, { type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i5$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
457
+ ImageEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ImageEditorComponent, selector: "croco-html-image-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "<div>\r\n <div style=\"height: 10px;\">\r\n </div>\r\n \r\n <div *ngIf=\"hasImageError\" class=\"error-block\">\r\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.\r\n </div>\r\n\r\n <div *ngIf=\"hasFileId() && !hasImageError\">\r\n <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc()\" (error)=\"onErrorHandler()\"/>\r\n </div>\r\n\r\n <div *ngIf=\"!hasFileId()\">\r\n <h5>[\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E]</h5>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n <div style=\"height: 10px;\"></div>\r\n\r\n <div style=\"overflow-x:auto;\">\r\n <mat-button-toggle-group [(ngModel)]=\"searchOrEdit\">\r\n <mat-button-toggle value=\"search\">\r\n \u0418\u0441\u043A\u0430\u0442\u044C \u0444\u0430\u0439\u043B <mat-icon>search</mat-icon>\r\n </mat-button-toggle>\r\n <mat-button-toggle value=\"edit\">\r\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>\r\n </mat-button-toggle>\r\n </mat-button-toggle-group>\r\n </div>\r\n \r\n\r\n <div style=\"height: 10px;\"></div>\r\n\r\n <div [hidden]=\"searchOrEdit !== 'search'\">\r\n <croco-html-file-id-select\r\n [labelText]=\"'\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B'\"\r\n [(fileId)]=\"tag.attributes['file-id']\"\r\n (onFileIdChanged)=\"onFileIdChanged($event)\">\r\n </croco-html-file-id-select>\r\n </div>\r\n\r\n <div [hidden]=\"searchOrEdit !== 'edit'\">\r\n <form [formGroup]=\"myForm\">\r\n <mat-form-field class=\"w-100\">\r\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\"\r\n formControlName=\"fileId\" \r\n type=\"number\"\r\n [(ngModel)]=\"tag.attributes['file-id']\"\r\n (ngModelChange)=\"removeImageError()\">\r\n </mat-form-field>\r\n </form>\r\n </div>\r\n</div>", styles: [".error-block{background-color:#f32323;color:#fff;text-align:center;border-radius:10px;padding:10px}\n"], components: [{ type: i1$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: FileIdSelectComponent, selector: "croco-html-file-id-select", inputs: ["labelText", "fileId"], outputs: ["fileId", "onFileIdChanged"] }, { type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$2.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"] }, { type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i5$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
458
458
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ImageEditorComponent, decorators: [{
459
459
  type: Component,
460
460
  args: [{ selector: 'croco-html-image-editor', template: "<div>\r\n <div style=\"height: 10px;\">\r\n </div>\r\n \r\n <div *ngIf=\"hasImageError\" class=\"error-block\">\r\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.\r\n </div>\r\n\r\n <div *ngIf=\"hasFileId() && !hasImageError\">\r\n <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc()\" (error)=\"onErrorHandler()\"/>\r\n </div>\r\n\r\n <div *ngIf=\"!hasFileId()\">\r\n <h5>[\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E]</h5>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n <div style=\"height: 10px;\"></div>\r\n\r\n <div style=\"overflow-x:auto;\">\r\n <mat-button-toggle-group [(ngModel)]=\"searchOrEdit\">\r\n <mat-button-toggle value=\"search\">\r\n \u0418\u0441\u043A\u0430\u0442\u044C \u0444\u0430\u0439\u043B <mat-icon>search</mat-icon>\r\n </mat-button-toggle>\r\n <mat-button-toggle value=\"edit\">\r\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>\r\n </mat-button-toggle>\r\n </mat-button-toggle-group>\r\n </div>\r\n \r\n\r\n <div style=\"height: 10px;\"></div>\r\n\r\n <div [hidden]=\"searchOrEdit !== 'search'\">\r\n <croco-html-file-id-select\r\n [labelText]=\"'\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B'\"\r\n [(fileId)]=\"tag.attributes['file-id']\"\r\n (onFileIdChanged)=\"onFileIdChanged($event)\">\r\n </croco-html-file-id-select>\r\n </div>\r\n\r\n <div [hidden]=\"searchOrEdit !== 'edit'\">\r\n <form [formGroup]=\"myForm\">\r\n <mat-form-field class=\"w-100\">\r\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\"\r\n formControlName=\"fileId\" \r\n type=\"number\"\r\n [(ngModel)]=\"tag.attributes['file-id']\"\r\n (ngModelChange)=\"removeImageError()\">\r\n </mat-form-field>\r\n </form>\r\n </div>\r\n</div>", styles: [".error-block{background-color:#f32323;color:#fff;text-align:center;border-radius:10px;padding:10px}\n"] }]
@@ -604,7 +604,7 @@ class TextSimpleMethods {
604
604
  };
605
605
  }
606
606
  }
607
- TextSimpleMethods.supportedTags = ["sup", "sub", "strong", "b", "i"];
607
+ TextSimpleMethods.supportedTags = ["sup", "sub", "strong", "b", "i", "u"];
608
608
 
609
609
  class BootstrapTableMethods {
610
610
  static BuildTable(data) {
@@ -1013,7 +1013,7 @@ class TextEditorComponent {
1013
1013
  }
1014
1014
  }
1015
1015
  TextEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1016
- TextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TextEditorComponent, selector: "croco-html-text-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "<div *ngIf=\"tag.presentOrEdit\">\r\n <div style=\"height: 10px;\">\r\n </div>\r\n\r\n <div style=\"text-align: left;\" *ngIf=\"tag.attributes['h-align'] === 'left'\" [innerHtml]=\"getInnerHtml()\">\r\n </div>\r\n <div style=\"text-align: right;\" *ngIf=\"tag.attributes['h-align'] === 'right'\" [innerHtml]=\"getInnerHtml()\">\r\n </div>\r\n <div style=\"text-align: center;\" *ngIf=\"tag.attributes['h-align'] === 'center'\" [innerHtml]=\"getInnerHtml()\">\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n <div style=\"overflow-x: auto;\">\r\n <mat-button-toggle-group [(ngModel)]=\"tag.attributes['h-align']\">\r\n <mat-button-toggle value=\"center\">\r\n \u041F\u043E \u0446\u0435\u043D\u0442\u0440\u0443 <mat-icon>format_align_center</mat-icon>\r\n </mat-button-toggle>\r\n <mat-button-toggle value=\"left\">\r\n \u0421\u043B\u0435\u0432\u0430 <mat-icon>format_align_left</mat-icon>\r\n </mat-button-toggle>\r\n <mat-button-toggle value=\"right\">\r\n \u0421\u043F\u0440\u0430\u0432\u0430 <mat-icon> format_align_right</mat-icon>\r\n </mat-button-toggle>\r\n </mat-button-toggle-group>\r\n </div>\r\n\r\n <div style=\"height: 10px;\">\r\n </div>\r\n <form [formGroup]=\"myForm\">\r\n <mat-form-field class=\"w-100\">\r\n <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\r\n cdkAutosizeMinRows=\"1\"\r\n placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430\"\r\n formControlName=\"innerHtml\"\r\n [(ngModel)]=\"tag.innerHtml\"></textarea>\r\n </mat-form-field>\r\n </form>\r\n</div>", styles: [""], components: [{ type: i1$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
1016
+ TextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TextEditorComponent, selector: "croco-html-text-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "<div *ngIf=\"tag.presentOrEdit\">\r\n <div style=\"height: 10px;\">\r\n </div>\r\n\r\n <div style=\"text-align: left;\" *ngIf=\"tag.attributes['h-align'] === 'left'\" [innerHtml]=\"getInnerHtml()\">\r\n </div>\r\n <div style=\"text-align: right;\" *ngIf=\"tag.attributes['h-align'] === 'right'\" [innerHtml]=\"getInnerHtml()\">\r\n </div>\r\n <div style=\"text-align: center;\" *ngIf=\"tag.attributes['h-align'] === 'center'\" [innerHtml]=\"getInnerHtml()\">\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n <div style=\"overflow-x: auto;\">\r\n <mat-button-toggle-group [(ngModel)]=\"tag.attributes['h-align']\">\r\n <mat-button-toggle value=\"center\">\r\n \u041F\u043E \u0446\u0435\u043D\u0442\u0440\u0443 <mat-icon>format_align_center</mat-icon>\r\n </mat-button-toggle>\r\n <mat-button-toggle value=\"left\">\r\n \u0421\u043B\u0435\u0432\u0430 <mat-icon>format_align_left</mat-icon>\r\n </mat-button-toggle>\r\n <mat-button-toggle value=\"right\">\r\n \u0421\u043F\u0440\u0430\u0432\u0430 <mat-icon> format_align_right</mat-icon>\r\n </mat-button-toggle>\r\n </mat-button-toggle-group>\r\n </div>\r\n\r\n <div style=\"height: 10px;\">\r\n </div>\r\n <form [formGroup]=\"myForm\">\r\n <mat-form-field class=\"w-100\">\r\n <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\r\n cdkAutosizeMinRows=\"1\"\r\n placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430\"\r\n formControlName=\"innerHtml\"\r\n [(ngModel)]=\"tag.innerHtml\"></textarea>\r\n </mat-form-field>\r\n </form>\r\n</div>", styles: [""], components: [{ type: i1$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$2.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"] }, { type: i4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
1017
1017
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextEditorComponent, decorators: [{
1018
1018
  type: Component,
1019
1019
  args: [{ selector: 'croco-html-text-editor', template: "<div *ngIf=\"tag.presentOrEdit\">\r\n <div style=\"height: 10px;\">\r\n </div>\r\n\r\n <div style=\"text-align: left;\" *ngIf=\"tag.attributes['h-align'] === 'left'\" [innerHtml]=\"getInnerHtml()\">\r\n </div>\r\n <div style=\"text-align: right;\" *ngIf=\"tag.attributes['h-align'] === 'right'\" [innerHtml]=\"getInnerHtml()\">\r\n </div>\r\n <div style=\"text-align: center;\" *ngIf=\"tag.attributes['h-align'] === 'center'\" [innerHtml]=\"getInnerHtml()\">\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"!tag.presentOrEdit\">\r\n <div style=\"overflow-x: auto;\">\r\n <mat-button-toggle-group [(ngModel)]=\"tag.attributes['h-align']\">\r\n <mat-button-toggle value=\"center\">\r\n \u041F\u043E \u0446\u0435\u043D\u0442\u0440\u0443 <mat-icon>format_align_center</mat-icon>\r\n </mat-button-toggle>\r\n <mat-button-toggle value=\"left\">\r\n \u0421\u043B\u0435\u0432\u0430 <mat-icon>format_align_left</mat-icon>\r\n </mat-button-toggle>\r\n <mat-button-toggle value=\"right\">\r\n \u0421\u043F\u0440\u0430\u0432\u0430 <mat-icon> format_align_right</mat-icon>\r\n </mat-button-toggle>\r\n </mat-button-toggle-group>\r\n </div>\r\n\r\n <div style=\"height: 10px;\">\r\n </div>\r\n <form [formGroup]=\"myForm\">\r\n <mat-form-field class=\"w-100\">\r\n <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\r\n cdkAutosizeMinRows=\"1\"\r\n placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430\"\r\n formControlName=\"innerHtml\"\r\n [(ngModel)]=\"tag.innerHtml\"></textarea>\r\n </mat-form-field>\r\n </form>\r\n</div>", styles: [""] }]
@@ -1175,7 +1175,7 @@ class VisualEditorComponent {
1175
1175
  }
1176
1176
  }
1177
1177
  VisualEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: VisualEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1178
- VisualEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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>\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-list aria-label=\"Tag display value\">\r\n <mat-chip color=\"primary\" selected>{{tag.tagDescription.displayValue}}</mat-chip>\r\n </mat-chip-list>\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\" \r\n (onTagSaved)=\"onTagSavedHandler($event)\"\r\n (onTagRemoved)=\"onTagRemovedHandler(i)\">\r\n </croco-html-main-editor-block>\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>\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=\"fill\">\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>\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>\r\n <div class=\"row d-flex align-items-center\">\r\n <div class=\"col-12\">\r\n <croco-add-files-btn \r\n (filesTagsReady)=\"filesTagsReadyHandler($event)\"\r\n (postFilesStarted)=\"postFilesStartedEventHandler($event)\"\r\n class=\"w-100\">\r\n </croco-add-files-btn>\r\n </div>\r\n </div>\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:white;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:white;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"], components: [{ type: i1$3.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: i2$3.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i3$1.MatChipList, selector: "mat-chip-list", inputs: ["aria-orientation", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "selectable", "tabIndex", "errorStateMatcher"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: MainEditorBlockComponent, selector: "croco-html-main-editor-block", inputs: ["tag"], outputs: ["onTagSaved", "onTagRemoved"] }, { type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: AddFilesBtnComponent, selector: "croco-add-files-btn", outputs: ["postFilesStarted", "filesTagsReady"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }, { type: i11.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i3$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i5.MatLabel, selector: "mat-label" }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
1178
+ VisualEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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>\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-list aria-label=\"Tag display value\">\r\n <mat-chip color=\"primary\" selected>{{tag.tagDescription.displayValue}}</mat-chip>\r\n </mat-chip-list>\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\" \r\n (onTagSaved)=\"onTagSavedHandler($event)\"\r\n (onTagRemoved)=\"onTagRemovedHandler(i)\">\r\n </croco-html-main-editor-block>\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>\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=\"fill\">\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>\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>\r\n <div class=\"row d-flex align-items-center\">\r\n <div class=\"col-12\">\r\n <croco-add-files-btn \r\n (filesTagsReady)=\"filesTagsReadyHandler($event)\"\r\n (postFilesStarted)=\"postFilesStartedEventHandler($event)\"\r\n class=\"w-100\">\r\n </croco-add-files-btn>\r\n </div>\r\n </div>\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:white;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:white;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"], components: [{ type: i1$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i2$3.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i3$1.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: MainEditorBlockComponent, selector: "croco-html-main-editor-block", inputs: ["tag"], outputs: ["onTagSaved", "onTagRemoved"] }, { type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: AddFilesBtnComponent, selector: "croco-add-files-btn", outputs: ["postFilesStarted", "filesTagsReady"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }, { type: i11.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i3$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i5.MatLabel, selector: "mat-label" }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
1179
1179
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: VisualEditorComponent, decorators: [{
1180
1180
  type: Component,
1181
1181
  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>\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-list aria-label=\"Tag display value\">\r\n <mat-chip color=\"primary\" selected>{{tag.tagDescription.displayValue}}</mat-chip>\r\n </mat-chip-list>\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\" \r\n (onTagSaved)=\"onTagSavedHandler($event)\"\r\n (onTagRemoved)=\"onTagRemovedHandler(i)\">\r\n </croco-html-main-editor-block>\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>\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=\"fill\">\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>\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>\r\n <div class=\"row d-flex align-items-center\">\r\n <div class=\"col-12\">\r\n <croco-add-files-btn \r\n (filesTagsReady)=\"filesTagsReadyHandler($event)\"\r\n (postFilesStarted)=\"postFilesStartedEventHandler($event)\"\r\n class=\"w-100\">\r\n </croco-add-files-btn>\r\n </div>\r\n </div>\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:white;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:white;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"] }]
@@ -1318,7 +1318,7 @@ class MainEditorComponent {
1318
1318
  }
1319
1319
  }
1320
1320
  MainEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MainEditorComponent, deps: [{ token: i1$4.ClipboardService }, { token: i2$4.MatSnackBar }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1321
- MainEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MainEditorComponent, selector: "croco-html-main-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged" }, viewQueries: [{ propertyName: "visualEditor", first: true, predicate: ["visualEditor"], descendants: true }], ngImport: i0, template: "<mat-tab-group>\r\n <mat-tab label=\"\u0412\u0438\u0437\u0443\u0430\u043B\u044C\u043D\u044B\u0439 \u0440\u0435\u0434\u0430\u043A\u0442\u043E\u0440\">\r\n\r\n <div style=\"height: 20px;\"></div>\r\n\r\n <croco-visual-editor #visualEditor\r\n [useHtmlRaw]=\"useHtmlRaw\"\r\n [html]=\"html\"\r\n (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\r\n (rendered)=\"visualEditorRenderedHandler()\">\r\n </croco-visual-editor>\r\n\r\n <div style=\"height: 20px;\"></div>\r\n\r\n </mat-tab>\r\n\r\n <mat-tab label=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\">\r\n <div style=\"height: 10px;\"></div>\r\n <form *ngIf=\"visualEditorRendered\" [formGroup]=\"myForm\">\r\n <mat-form-field class=\"w-100\">\r\n <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\r\n cdkAutosizeMinRows=\"1\"\r\n placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" formControlName=\"html\" [(ngModel)]=\"html\"\r\n (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\r\n </mat-form-field>\r\n </form>\r\n\r\n <button (click)=\"copyMarkUp()\" \r\n mat-raised-button color=\"primary\">\r\n \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\r\n </button>\r\n </mat-tab>\r\n <mat-tab label=\"\u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\">\r\n <mat-card>\r\n <croco-html-xml-tag-view [data]=\"html | topreview\">\r\n </croco-html-xml-tag-view>\r\n </mat-card>\r\n </mat-tab>\r\n</mat-tab-group>", styles: [".example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:white;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:white;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"], components: [{ type: i3$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i3$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: VisualEditorComponent, selector: "croco-visual-editor", inputs: ["showMarkUp", "useHtmlRaw", "html"], outputs: ["html", "onHtmlChanged", "rendered"] }, { type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$3.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: XmlTagViewComponent, selector: "croco-html-xml-tag-view", inputs: ["data"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "topreview": ToPreviewPipe } });
1321
+ MainEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MainEditorComponent, selector: "croco-html-main-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged" }, viewQueries: [{ propertyName: "visualEditor", first: true, predicate: ["visualEditor"], descendants: true }], ngImport: i0, template: "<mat-tab-group>\r\n <mat-tab label=\"\u0412\u0438\u0437\u0443\u0430\u043B\u044C\u043D\u044B\u0439 \u0440\u0435\u0434\u0430\u043A\u0442\u043E\u0440\">\r\n\r\n <div style=\"height: 20px;\"></div>\r\n\r\n <croco-visual-editor #visualEditor\r\n [useHtmlRaw]=\"useHtmlRaw\"\r\n [html]=\"html\"\r\n (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\r\n (rendered)=\"visualEditorRenderedHandler()\">\r\n </croco-visual-editor>\r\n\r\n <div style=\"height: 20px;\"></div>\r\n\r\n </mat-tab>\r\n\r\n <mat-tab label=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\">\r\n <div style=\"height: 10px;\"></div>\r\n <form *ngIf=\"visualEditorRendered\" [formGroup]=\"myForm\">\r\n <mat-form-field class=\"w-100\">\r\n <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\r\n cdkAutosizeMinRows=\"1\"\r\n placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" formControlName=\"html\" [(ngModel)]=\"html\"\r\n (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\r\n </mat-form-field>\r\n </form>\r\n\r\n <button (click)=\"copyMarkUp()\" \r\n mat-raised-button color=\"primary\">\r\n \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\r\n </button>\r\n </mat-tab>\r\n <mat-tab label=\"\u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\">\r\n <mat-card>\r\n <croco-html-xml-tag-view [data]=\"html | topreview\">\r\n </croco-html-xml-tag-view>\r\n </mat-card>\r\n </mat-tab>\r\n</mat-tab-group>", styles: [".example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:white;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:white;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"], components: [{ type: i3$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i3$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { type: VisualEditorComponent, selector: "croco-visual-editor", inputs: ["showMarkUp", "useHtmlRaw", "html"], outputs: ["html", "onHtmlChanged", "rendered"] }, { type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$3.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: XmlTagViewComponent, selector: "croco-html-xml-tag-view", inputs: ["data"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$2.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"] }, { type: i4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "topreview": ToPreviewPipe } });
1322
1322
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MainEditorComponent, decorators: [{
1323
1323
  type: Component,
1324
1324
  args: [{ selector: 'croco-html-main-editor', template: "<mat-tab-group>\r\n <mat-tab label=\"\u0412\u0438\u0437\u0443\u0430\u043B\u044C\u043D\u044B\u0439 \u0440\u0435\u0434\u0430\u043A\u0442\u043E\u0440\">\r\n\r\n <div style=\"height: 20px;\"></div>\r\n\r\n <croco-visual-editor #visualEditor\r\n [useHtmlRaw]=\"useHtmlRaw\"\r\n [html]=\"html\"\r\n (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\r\n (rendered)=\"visualEditorRenderedHandler()\">\r\n </croco-visual-editor>\r\n\r\n <div style=\"height: 20px;\"></div>\r\n\r\n </mat-tab>\r\n\r\n <mat-tab label=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\">\r\n <div style=\"height: 10px;\"></div>\r\n <form *ngIf=\"visualEditorRendered\" [formGroup]=\"myForm\">\r\n <mat-form-field class=\"w-100\">\r\n <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\r\n cdkAutosizeMinRows=\"1\"\r\n placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" formControlName=\"html\" [(ngModel)]=\"html\"\r\n (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\r\n </mat-form-field>\r\n </form>\r\n\r\n <button (click)=\"copyMarkUp()\" \r\n mat-raised-button color=\"primary\">\r\n \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\r\n </button>\r\n </mat-tab>\r\n <mat-tab label=\"\u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\">\r\n <mat-card>\r\n <croco-html-xml-tag-view [data]=\"html | topreview\">\r\n </croco-html-xml-tag-view>\r\n </mat-card>\r\n </mat-tab>\r\n</mat-tab-group>", styles: [".example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:white;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:white;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"] }]