croco-html 0.2.1 → 0.2.3
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.
- package/esm2020/lib/components/editor/external-video-block/external-video-block.component.mjs +3 -7
- package/esm2020/lib/components/editor/image-editor/image-editor.component.mjs +1 -1
- package/esm2020/lib/components/editor/main-editor/main-editor.component.mjs +3 -3
- package/esm2020/lib/components/editor/text-editor/text-editor.component.mjs +3 -7
- package/esm2020/lib/components/editor/visual-editor/visual-editor.component.mjs +1 -5
- package/esm2020/lib/components/file-id-select/file-id-select.component.mjs +8 -12
- package/esm2020/lib/components/xml-tags/xml-tag-html-view/xml-tag-html-view.component.mjs +3 -3
- package/fesm2015/croco-html.mjs +15 -28
- package/fesm2015/croco-html.mjs.map +1 -1
- package/fesm2020/croco-html.mjs +15 -28
- package/fesm2020/croco-html.mjs.map +1 -1
- package/lib/components/editor/external-video-block/external-video-block.component.d.ts +0 -2
- package/lib/components/editor/text-editor/text-editor.component.d.ts +0 -2
- package/lib/components/editor/visual-editor/visual-editor.component.d.ts +0 -2
- package/lib/components/file-id-select/file-id-select.component.d.ts +1 -4
- package/package.json +1 -1
package/fesm2015/croco-html.mjs
CHANGED
|
@@ -3,10 +3,10 @@ import { Injectable, Inject, EventEmitter, Component, ViewChild, Input, Output,
|
|
|
3
3
|
import * as i2 from '@angular/material/button';
|
|
4
4
|
import { MatButtonModule } from '@angular/material/button';
|
|
5
5
|
import * as i1 from '@angular/common/http';
|
|
6
|
-
import * as i2$1 from '@angular/forms';
|
|
7
|
-
import { UntypedFormGroup, UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
8
6
|
import * as i1$2 from '@angular/common';
|
|
9
7
|
import { CommonModule } from '@angular/common';
|
|
8
|
+
import * as i2$1 from '@angular/forms';
|
|
9
|
+
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
10
10
|
import * as i3 from '@angular/material/form-field';
|
|
11
11
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
12
12
|
import * as i4 from '@angular/material/input';
|
|
@@ -292,9 +292,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
292
292
|
class ExternalVideoBlockComponent {
|
|
293
293
|
constructor() {
|
|
294
294
|
this.onTagUpdated = new EventEmitter();
|
|
295
|
-
this.myForm = new UntypedFormGroup({
|
|
296
|
-
youtubeLink: new UntypedFormControl()
|
|
297
|
-
});
|
|
298
295
|
this.defaultLink = "https://youtu.be/jzBneaWSswY";
|
|
299
296
|
this.data = {
|
|
300
297
|
youtubeLink: this.defaultLink
|
|
@@ -315,10 +312,10 @@ class ExternalVideoBlockComponent {
|
|
|
315
312
|
}
|
|
316
313
|
}
|
|
317
314
|
ExternalVideoBlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ExternalVideoBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
318
|
-
ExternalVideoBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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 <
|
|
315
|
+
ExternalVideoBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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 <div>\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 [(ngModel)]=\"data.youtubeLink\"\r\n (ngModelChange)=\"linkChanged()\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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: 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: "component", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }] });
|
|
319
316
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ExternalVideoBlockComponent, decorators: [{
|
|
320
317
|
type: Component,
|
|
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 <
|
|
318
|
+
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 <div>\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 [(ngModel)]=\"data.youtubeLink\"\r\n (ngModelChange)=\"linkChanged()\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n" }]
|
|
322
319
|
}], propDecorators: { tag: [{
|
|
323
320
|
type: Input
|
|
324
321
|
}], onTagUpdated: [{
|
|
@@ -370,16 +367,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
370
367
|
} });
|
|
371
368
|
|
|
372
369
|
class FileIdSelectComponent {
|
|
373
|
-
constructor(
|
|
374
|
-
this.fb = fb;
|
|
370
|
+
constructor(_fileService) {
|
|
375
371
|
this._fileService = _fileService;
|
|
376
372
|
this.labelText = "Поиск файлов";
|
|
377
373
|
this.loading = false;
|
|
378
374
|
this.files = [];
|
|
379
375
|
this.onFileIdChanged = new EventEmitter();
|
|
380
|
-
this.form = this.fb.group({
|
|
381
|
-
fileName: '',
|
|
382
|
-
});
|
|
383
376
|
}
|
|
384
377
|
onModelChanged(fileId) {
|
|
385
378
|
this.onFileIdChanged.emit(fileId);
|
|
@@ -410,12 +403,12 @@ class FileIdSelectComponent {
|
|
|
410
403
|
this.loadFiles();
|
|
411
404
|
}
|
|
412
405
|
}
|
|
413
|
-
FileIdSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileIdSelectComponent, deps: [{ token:
|
|
414
|
-
FileIdSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FileIdSelectComponent, selector: "croco-html-file-id-select", inputs: { labelText: "labelText", fileId: "fileId" }, outputs: { fileId: "fileId", onFileIdChanged: "onFileIdChanged" }, usesOnChanges: true, ngImport: i0, template: "<
|
|
406
|
+
FileIdSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileIdSelectComponent, deps: [{ token: FilesQueryService }], target: i0.ɵɵFactoryTarget.Component });
|
|
407
|
+
FileIdSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FileIdSelectComponent, selector: "croco-html-file-id-select", inputs: { labelText: "labelText", fileId: "fileId" }, outputs: { fileId: "fileId", onFileIdChanged: "onFileIdChanged" }, usesOnChanges: true, ngImport: i0, template: "<div>\r\n <div class=\"form-group\">\r\n <label for=\"fileName\">{{labelText}}</label>\r\n <ng-select [(ngModel)]=\"fileId\" (ngModelChange)=\"onModelChanged($event)\"\r\n [items]=\"files\"\r\n #select\r\n bindLabel=\"fileName\"\r\n (search)=\"onSearchChanged($event)\"\r\n [loading]=\"loading\"\r\n [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\r\n dropdownPosition=\"auto\"\r\n bindValue=\"fileId\"\r\n labelForId=\"fileName\"\r\n placeholder=\"\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B\"\r\n [virtualScroll]=\"true\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n <div>\r\n <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc(item.fileId)\"/>\r\n </div>\r\n <div>\r\n <span class=\"h5\">\u0424\u0430\u0439\u043B: </span>\r\n <span class=\"h5\" [ngOptionHighlight]=\"search\"><b>{{item.fileName}}</b></span>\r\n </div>\r\n <div>\r\n <small>\r\n <span>\r\n \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: <b>{{item.fileId}}</b>\r\n </span>\r\n </small>\r\n </div>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n</div>\r\n\r\n<div>\r\n \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: {{fileId}}\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }] });
|
|
415
408
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileIdSelectComponent, decorators: [{
|
|
416
409
|
type: Component,
|
|
417
|
-
args: [{ selector: 'croco-html-file-id-select', template: "<
|
|
418
|
-
}], ctorParameters: function () { return [{ type:
|
|
410
|
+
args: [{ selector: 'croco-html-file-id-select', template: "<div>\r\n <div class=\"form-group\">\r\n <label for=\"fileName\">{{labelText}}</label>\r\n <ng-select [(ngModel)]=\"fileId\" (ngModelChange)=\"onModelChanged($event)\"\r\n [items]=\"files\"\r\n #select\r\n bindLabel=\"fileName\"\r\n (search)=\"onSearchChanged($event)\"\r\n [loading]=\"loading\"\r\n [loadingText]=\"'\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u044E \u0444\u0430\u0439\u043B\u044B'\"\r\n dropdownPosition=\"auto\"\r\n bindValue=\"fileId\"\r\n labelForId=\"fileName\"\r\n placeholder=\"\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B\"\r\n [virtualScroll]=\"true\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n <div>\r\n <img class=\"mx-auto d-block img-fluid\" [src]=\"getSrc(item.fileId)\"/>\r\n </div>\r\n <div>\r\n <span class=\"h5\">\u0424\u0430\u0439\u043B: </span>\r\n <span class=\"h5\" [ngOptionHighlight]=\"search\"><b>{{item.fileName}}</b></span>\r\n </div>\r\n <div>\r\n <small>\r\n <span>\r\n \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: <b>{{item.fileId}}</b>\r\n </span>\r\n </small>\r\n </div>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n</div>\r\n\r\n<div>\r\n \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430: {{fileId}}\r\n</div>\r\n" }]
|
|
411
|
+
}], ctorParameters: function () { return [{ type: FilesQueryService }]; }, propDecorators: { labelText: [{
|
|
419
412
|
type: Input
|
|
420
413
|
}], fileId: [{
|
|
421
414
|
type: Input
|
|
@@ -467,10 +460,10 @@ class XmlTagHtmlViewComponent {
|
|
|
467
460
|
}
|
|
468
461
|
}
|
|
469
462
|
XmlTagHtmlViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: XmlTagHtmlViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
470
|
-
XmlTagHtmlViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: XmlTagHtmlViewComponent, selector: "croco-html-xml-tag-html-view", inputs: { html: "html" }, ngImport: i0, template: "<div class=\"col\" [innerHTML]=\"html\">\r\n
|
|
463
|
+
XmlTagHtmlViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: XmlTagHtmlViewComponent, selector: "croco-html-xml-tag-html-view", inputs: { html: "html" }, ngImport: i0, template: "<div class=\"col\" [innerHTML]=\"html\">\r\n</div>", styles: [""] });
|
|
471
464
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: XmlTagHtmlViewComponent, decorators: [{
|
|
472
465
|
type: Component,
|
|
473
|
-
args: [{ selector: 'croco-html-xml-tag-html-view', template: "<div class=\"col\" [innerHTML]=\"html\">\r\n
|
|
466
|
+
args: [{ selector: 'croco-html-xml-tag-html-view', template: "<div class=\"col\" [innerHTML]=\"html\">\r\n</div>" }]
|
|
474
467
|
}], ctorParameters: function () { return []; }, propDecorators: { html: [{
|
|
475
468
|
type: Input
|
|
476
469
|
}] } });
|
|
@@ -1068,9 +1061,6 @@ class XmlExtensions {
|
|
|
1068
1061
|
|
|
1069
1062
|
class TextEditorComponent {
|
|
1070
1063
|
constructor() {
|
|
1071
|
-
this.myForm = new UntypedFormGroup({
|
|
1072
|
-
"innerHtml": new UntypedFormControl()
|
|
1073
|
-
});
|
|
1074
1064
|
this.onTagUpdated = new EventEmitter();
|
|
1075
1065
|
}
|
|
1076
1066
|
ngOnInit() {
|
|
@@ -1080,10 +1070,10 @@ class TextEditorComponent {
|
|
|
1080
1070
|
}
|
|
1081
1071
|
}
|
|
1082
1072
|
TextEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1083
|
-
TextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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 <
|
|
1073
|
+
TextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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 <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\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430\"\r\n [(ngModel)]=\"tag.innerHtml\"></textarea>\r\n </mat-form-field>\r\n </div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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: 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: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }] });
|
|
1084
1074
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextEditorComponent, decorators: [{
|
|
1085
1075
|
type: Component,
|
|
1086
|
-
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 <
|
|
1076
|
+
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 <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\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430\"\r\n [(ngModel)]=\"tag.innerHtml\"></textarea>\r\n </mat-form-field>\r\n </div>\r\n</div>" }]
|
|
1087
1077
|
}], ctorParameters: function () { return []; }, propDecorators: { tag: [{
|
|
1088
1078
|
type: Input
|
|
1089
1079
|
}], onTagUpdated: [{
|
|
@@ -1161,9 +1151,6 @@ class VisualEditorComponent {
|
|
|
1161
1151
|
this.isLoading = false;
|
|
1162
1152
|
this.loadingText = "Идёт загрузка";
|
|
1163
1153
|
this.showMarkUp = true;
|
|
1164
|
-
this.myForm = new UntypedFormGroup({
|
|
1165
|
-
"html": new UntypedFormControl(),
|
|
1166
|
-
});
|
|
1167
1154
|
this.tags = [];
|
|
1168
1155
|
this.useHtmlRaw = false;
|
|
1169
1156
|
this.html = "";
|
|
@@ -1312,10 +1299,10 @@ class MainEditorComponent {
|
|
|
1312
1299
|
}
|
|
1313
1300
|
}
|
|
1314
1301
|
MainEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MainEditorComponent, deps: [{ token: i1$3.ClipboardService }, { token: i2$2.MatSnackBar }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1315
|
-
MainEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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 <div *ngIf=\"visualEditorRendered\"
|
|
1302
|
+
MainEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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 <div *ngIf=\"visualEditorRendered\">\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\" [(ngModel)]=\"html\"\r\n (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\r\n </mat-form-field>\r\n </div>\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 class=\"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>\r\n", 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"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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: "component", type: i6$2.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i6$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: i5$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], 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: "component", type: XmlTagViewComponent, selector: "croco-html-xml-tag-view", inputs: ["data"] }, { kind: "component", type: VisualEditorComponent, selector: "croco-visual-editor", inputs: ["showMarkUp", "useHtmlRaw", "html"], outputs: ["html", "onHtmlChanged", "rendered"] }, { kind: "pipe", type: ToPreviewPipe, name: "topreview" }] });
|
|
1316
1303
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MainEditorComponent, decorators: [{
|
|
1317
1304
|
type: Component,
|
|
1318
|
-
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 <div *ngIf=\"visualEditorRendered\"
|
|
1305
|
+
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 <div *ngIf=\"visualEditorRendered\">\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\" [(ngModel)]=\"html\"\r\n (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\r\n </mat-form-field>\r\n </div>\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 class=\"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>\r\n", 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"] }]
|
|
1319
1306
|
}], ctorParameters: function () { return [{ type: i1$3.ClipboardService }, { type: i2$2.MatSnackBar }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { visualEditor: [{
|
|
1320
1307
|
type: ViewChild,
|
|
1321
1308
|
args: ["visualEditor"]
|