croco-html 2.20.0 → 2.23.0
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/esm2022/lib/components/editor/button-editor/button-editor.component.mjs +1 -1
- package/esm2022/lib/components/editor/main-editor/main-editor.component.mjs +21 -7
- package/esm2022/lib/components/html-view/html-view.component.mjs +3 -7
- package/esm2022/lib/components/xml-tags/xml-tag-custom-button/xml-tag-button.component.mjs +14 -16
- package/esm2022/lib/components/xml-tags/xml-tag-view/xml-tag-view.component.mjs +3 -7
- package/esm2022/lib/services/HtmlViewController.mjs +11 -1
- package/fesm2022/croco-html.mjs +55 -43
- package/fesm2022/croco-html.mjs.map +1 -1
- package/lib/components/html-view/html-view.component.d.ts +1 -3
- package/lib/components/xml-tags/xml-tag-custom-button/xml-tag-button.component.d.ts +3 -2
- package/lib/components/xml-tags/xml-tag-view/xml-tag-view.component.d.ts +1 -3
- package/lib/index.d.ts +5 -5
- package/lib/services/HtmlViewController.d.ts +3 -0
- package/package.json +1 -1
package/fesm2022/croco-html.mjs
CHANGED
|
@@ -33,8 +33,8 @@ import * as i11 from '@angular/material/select';
|
|
|
33
33
|
import { MatSelect, MatSelectModule } from '@angular/material/select';
|
|
34
34
|
import * as i7 from '@angular/material/progress-spinner';
|
|
35
35
|
import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
36
|
-
import * as
|
|
37
|
-
import {
|
|
36
|
+
import * as i3 from '@angular/material/tabs';
|
|
37
|
+
import { MatTabsModule } from '@angular/material/tabs';
|
|
38
38
|
import * as i1$5 from 'ngx-clipboard';
|
|
39
39
|
import * as i2$3 from '@angular/material/snack-bar';
|
|
40
40
|
import { MatSnackBarModule } from '@angular/material/snack-bar';
|
|
@@ -50,7 +50,7 @@ import * as i20 from '@angular/material/datepicker';
|
|
|
50
50
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
51
51
|
import * as i18 from '@angular/material/dialog';
|
|
52
52
|
import { MatDialogModule } from '@angular/material/dialog';
|
|
53
|
-
import * as i3 from '@angular/material/expansion';
|
|
53
|
+
import * as i3$1 from '@angular/material/expansion';
|
|
54
54
|
import { MatExpansionModule } from '@angular/material/expansion';
|
|
55
55
|
import * as i21 from '@angular/material/grid-list';
|
|
56
56
|
import { MatGridListModule } from '@angular/material/grid-list';
|
|
@@ -1318,17 +1318,17 @@ class HtmlViewController {
|
|
|
1318
1318
|
onScriptCalled(script) {
|
|
1319
1319
|
this.scriptCalled.next(script);
|
|
1320
1320
|
}
|
|
1321
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: HtmlViewController, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1322
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: HtmlViewController, providedIn: 'root' }); }
|
|
1321
1323
|
}
|
|
1324
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: HtmlViewController, decorators: [{
|
|
1325
|
+
type: Injectable,
|
|
1326
|
+
args: [{
|
|
1327
|
+
providedIn: 'root'
|
|
1328
|
+
}]
|
|
1329
|
+
}] });
|
|
1322
1330
|
|
|
1323
1331
|
class XmlTagButtonComponent {
|
|
1324
|
-
constructor() {
|
|
1325
|
-
this.controller = new HtmlViewController();
|
|
1326
|
-
this._block = {
|
|
1327
|
-
text: '',
|
|
1328
|
-
type: '',
|
|
1329
|
-
click: ''
|
|
1330
|
-
};
|
|
1331
|
-
}
|
|
1332
1332
|
set data(value) {
|
|
1333
1333
|
this.tagData = value.data;
|
|
1334
1334
|
}
|
|
@@ -1341,11 +1341,19 @@ class XmlTagButtonComponent {
|
|
|
1341
1341
|
};
|
|
1342
1342
|
}
|
|
1343
1343
|
;
|
|
1344
|
+
constructor(_controller) {
|
|
1345
|
+
this._controller = _controller;
|
|
1346
|
+
this._block = {
|
|
1347
|
+
text: '',
|
|
1348
|
+
type: '',
|
|
1349
|
+
click: ''
|
|
1350
|
+
};
|
|
1351
|
+
}
|
|
1344
1352
|
clickHandler() {
|
|
1345
|
-
this.
|
|
1353
|
+
this._controller.onScriptCalled(this._block.click);
|
|
1346
1354
|
}
|
|
1347
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1348
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: XmlTagButtonComponent, isStandalone: true, selector: "croco-html-xml-tag-button", inputs: { data: "data", tagData: "tagData"
|
|
1355
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagButtonComponent, deps: [{ token: HtmlViewController }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1356
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: XmlTagButtonComponent, isStandalone: true, selector: "croco-html-xml-tag-button", inputs: { data: "data", tagData: "tagData" }, ngImport: i0, template: "<button mat-stroked-button color=\"primary\" (click)=\"clickHandler()\">{{_block.text}}</button>\n", styles: [""], dependencies: [{ kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
1349
1357
|
}
|
|
1350
1358
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagButtonComponent, decorators: [{
|
|
1351
1359
|
type: Component,
|
|
@@ -1353,12 +1361,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
1353
1361
|
MatIcon,
|
|
1354
1362
|
MatButton
|
|
1355
1363
|
], template: "<button mat-stroked-button color=\"primary\" (click)=\"clickHandler()\">{{_block.text}}</button>\n" }]
|
|
1356
|
-
}], propDecorators: { data: [{
|
|
1364
|
+
}], ctorParameters: () => [{ type: HtmlViewController }], propDecorators: { data: [{
|
|
1357
1365
|
type: Input
|
|
1358
1366
|
}], tagData: [{
|
|
1359
1367
|
type: Input
|
|
1360
|
-
}], controller: [{
|
|
1361
|
-
type: Input
|
|
1362
1368
|
}] } });
|
|
1363
1369
|
|
|
1364
1370
|
class ButtonEditorComponent {
|
|
@@ -1380,7 +1386,7 @@ class ButtonEditorComponent {
|
|
|
1380
1386
|
this.tag.attributes = this.tagData;
|
|
1381
1387
|
}
|
|
1382
1388
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ButtonEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1383
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: ButtonEditorComponent, isStandalone: true, selector: "croco-html-button-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "@if (tag.presentOrEdit) {\n <div>\n <div>\n \u0422\u0438\u043F: {{tagData.type}}\n </div>\n <div style=\"height: 10px;\"></div>\n <div>\n \u0422\u0435\u043A\u0441\u0442: {{tagData.text}}\n </div>\n <div style=\"height: 10px;\"></div>\n <div>\n \u041E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A \u043D\u0430\u0436\u0430\u0442\u0438\u044F: {{tagData.click}}\n </div>\n <div style=\"height: 10px;\"></div>\n <croco-html-xml-tag-button [tagData]=\"tagData\"></croco-html-xml-tag-button>\n </div>\n} @else {\n <div>\n <mat-form-field class=\"w-100\">\n <mat-label>\n \u0422\u0438\u043F\n </mat-label>\n <input matInput placeholder=\"\u0422\u0438\u043F\"\n autocomplete=\"off\"\n [(ngModel)]=\"tagData.type\"\n (ngModelChange)=\"linkChanged()\">\n </mat-form-field>\n\n <mat-form-field class=\"w-100\">\n <mat-label>\n \u0422\u0435\u043A\u0441\u0442\n </mat-label>\n <input matInput placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n autocomplete=\"off\"\n [(ngModel)]=\"tagData.text\"\n (ngModelChange)=\"linkChanged()\">\n </mat-form-field>\n\n <mat-form-field class=\"w-100\">\n <mat-label>\n \u041E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A \u043D\u0430\u0436\u0430\u0442\u0438\u044F\n </mat-label>\n <input matInput placeholder=\"\u041E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A \u043D\u0430\u0436\u0430\u0442\u0438\u044F\"\n autocomplete=\"off\"\n [(ngModel)]=\"tagData.click\"\n (ngModelChange)=\"linkChanged()\">\n </mat-form-field>\n </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: XmlTagButtonComponent, selector: "croco-html-xml-tag-button", inputs: ["data", "tagData"
|
|
1389
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: ButtonEditorComponent, isStandalone: true, selector: "croco-html-button-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "@if (tag.presentOrEdit) {\n <div>\n <div>\n \u0422\u0438\u043F: {{tagData.type}}\n </div>\n <div style=\"height: 10px;\"></div>\n <div>\n \u0422\u0435\u043A\u0441\u0442: {{tagData.text}}\n </div>\n <div style=\"height: 10px;\"></div>\n <div>\n \u041E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A \u043D\u0430\u0436\u0430\u0442\u0438\u044F: {{tagData.click}}\n </div>\n <div style=\"height: 10px;\"></div>\n <croco-html-xml-tag-button [tagData]=\"tagData\"></croco-html-xml-tag-button>\n </div>\n} @else {\n <div>\n <mat-form-field class=\"w-100\">\n <mat-label>\n \u0422\u0438\u043F\n </mat-label>\n <input matInput placeholder=\"\u0422\u0438\u043F\"\n autocomplete=\"off\"\n [(ngModel)]=\"tagData.type\"\n (ngModelChange)=\"linkChanged()\">\n </mat-form-field>\n\n <mat-form-field class=\"w-100\">\n <mat-label>\n \u0422\u0435\u043A\u0441\u0442\n </mat-label>\n <input matInput placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n autocomplete=\"off\"\n [(ngModel)]=\"tagData.text\"\n (ngModelChange)=\"linkChanged()\">\n </mat-form-field>\n\n <mat-form-field class=\"w-100\">\n <mat-label>\n \u041E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A \u043D\u0430\u0436\u0430\u0442\u0438\u044F\n </mat-label>\n <input matInput placeholder=\"\u041E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A \u043D\u0430\u0436\u0430\u0442\u0438\u044F\"\n autocomplete=\"off\"\n [(ngModel)]=\"tagData.click\"\n (ngModelChange)=\"linkChanged()\">\n </mat-form-field>\n </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: XmlTagButtonComponent, selector: "croco-html-xml-tag-button", inputs: ["data", "tagData"] }] }); }
|
|
1384
1390
|
}
|
|
1385
1391
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ButtonEditorComponent, decorators: [{
|
|
1386
1392
|
type: Component,
|
|
@@ -1401,13 +1407,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
1401
1407
|
class XmlTagViewComponent {
|
|
1402
1408
|
constructor() {
|
|
1403
1409
|
this.data = [];
|
|
1404
|
-
this.controller = new HtmlViewController();
|
|
1405
1410
|
}
|
|
1406
1411
|
isHeaderTextTag(item) {
|
|
1407
1412
|
return TextTags.headerTextTags.includes(item.type);
|
|
1408
1413
|
}
|
|
1409
1414
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1410
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: XmlTagViewComponent, isStandalone: true, selector: "croco-html-xml-tag-view", inputs: { data: "data"
|
|
1415
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: XmlTagViewComponent, isStandalone: true, selector: "croco-html-xml-tag-view", inputs: { data: "data" }, ngImport: i0, template: "<div>\n @for (item of data; track $index) {\n <div class=\"row\">\n\n @if (item.type === 'text') {\n <div>\n <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\n </div>\n }\n\n @if (item.type === 'html-raw') {\n <div>\n <croco-html-raw-view [rawHtml]=\"item.data.innerHTML\">\n </croco-html-raw-view>\n </div>\n }\n\n @if (isHeaderTextTag(item)) {\n <div>\n <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\n </div>\n }\n\n @if (item.type === 'file-image') {\n <div>\n <croco-html-file-image-tag-view [item]=\"item\"></croco-html-file-image-tag-view>\n </div>\n }\n\n @if (item.type === 'table' && item.validationResult) {\n\n @if (item.validationResult.isSucceeded){\n <croco-html-xml-tag-html-view [html]=\"item.bootstrapHtml\">\n </croco-html-xml-tag-html-view>\n }\n @else {\n <croco-html-error-banner [message]=\"item.validationResult.message\">\n </croco-html-error-banner>\n }\n }\n\n @if (item.type === 'rich-text') {\n <div>\n <croco-html-xml-tag-text-view></croco-html-xml-tag-text-view>\n </div>\n }\n\n @if (item.type === 'external-video') {\n <div>\n <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\n </div>\n }\n\n @if (item.type === 'download-file-button') {\n <div>\n <croco-html-xml-tag-download-file-button [data]=\"item\"></croco-html-xml-tag-download-file-button>\n </div>\n }\n\n @if (item.type === 'button') {\n <div>\n <croco-html-xml-tag-button [data]=\"item\"></croco-html-xml-tag-button>\n </div>\n }\n @if (item.type === 'unsupported-tag') {\n <div class=\"red\" style=\"margin-top: 10px;\">\n <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\n <span>\n {{item.data.tagString}}\n </span>\n </div>\n }\n </div>\n }\n</div>", styles: [".red{background-color:#c94444;color:#fff}\n"], dependencies: [{ kind: "component", type: XmlTagTextViewComponent, selector: "croco-html-xml-tag-text-view", inputs: ["item"] }, { kind: "component", type: HtmlRawViewComponent, selector: "croco-html-raw-view", inputs: ["rawHtml"] }, { kind: "component", type: XmlTagHeaderTextViewComponent, selector: "croco-html-xml-tag-header-text-view", inputs: ["item"] }, { kind: "component", type: FileImageTagViewComponent, selector: "croco-html-file-image-tag-view", inputs: ["item"] }, { kind: "component", type: XmlTagHtmlViewComponent, selector: "croco-html-xml-tag-html-view", inputs: ["html"] }, { kind: "component", type: ErrorBannerComponent, selector: "croco-html-error-banner", inputs: ["message"] }, { kind: "component", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }, { kind: "component", type: XmlTagDownloadFileButtonComponent, selector: "croco-html-xml-tag-download-file-button", inputs: ["data", "tagData"] }, { kind: "component", type: XmlTagButtonComponent, selector: "croco-html-xml-tag-button", inputs: ["data", "tagData"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1411
1416
|
}
|
|
1412
1417
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagViewComponent, decorators: [{
|
|
1413
1418
|
type: Component,
|
|
@@ -1422,11 +1427,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
1422
1427
|
XmlTagDownloadFileButtonComponent,
|
|
1423
1428
|
ButtonEditorComponent,
|
|
1424
1429
|
XmlTagButtonComponent,
|
|
1425
|
-
], template: "<div>\n @for (item of data; track $index) {\n <div class=\"row\">\n\n @if (item.type === 'text') {\n
|
|
1430
|
+
], template: "<div>\n @for (item of data; track $index) {\n <div class=\"row\">\n\n @if (item.type === 'text') {\n <div>\n <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\n </div>\n }\n\n @if (item.type === 'html-raw') {\n <div>\n <croco-html-raw-view [rawHtml]=\"item.data.innerHTML\">\n </croco-html-raw-view>\n </div>\n }\n\n @if (isHeaderTextTag(item)) {\n <div>\n <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\n </div>\n }\n\n @if (item.type === 'file-image') {\n <div>\n <croco-html-file-image-tag-view [item]=\"item\"></croco-html-file-image-tag-view>\n </div>\n }\n\n @if (item.type === 'table' && item.validationResult) {\n\n @if (item.validationResult.isSucceeded){\n <croco-html-xml-tag-html-view [html]=\"item.bootstrapHtml\">\n </croco-html-xml-tag-html-view>\n }\n @else {\n <croco-html-error-banner [message]=\"item.validationResult.message\">\n </croco-html-error-banner>\n }\n }\n\n @if (item.type === 'rich-text') {\n <div>\n <croco-html-xml-tag-text-view></croco-html-xml-tag-text-view>\n </div>\n }\n\n @if (item.type === 'external-video') {\n <div>\n <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\n </div>\n }\n\n @if (item.type === 'download-file-button') {\n <div>\n <croco-html-xml-tag-download-file-button [data]=\"item\"></croco-html-xml-tag-download-file-button>\n </div>\n }\n\n @if (item.type === 'button') {\n <div>\n <croco-html-xml-tag-button [data]=\"item\"></croco-html-xml-tag-button>\n </div>\n }\n @if (item.type === 'unsupported-tag') {\n <div class=\"red\" style=\"margin-top: 10px;\">\n <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\n <span>\n {{item.data.tagString}}\n </span>\n </div>\n }\n </div>\n }\n</div>", styles: [".red{background-color:#c94444;color:#fff}\n"] }]
|
|
1426
1431
|
}], propDecorators: { data: [{
|
|
1427
1432
|
type: Input
|
|
1428
|
-
}], controller: [{
|
|
1429
|
-
type: Input
|
|
1430
1433
|
}] } });
|
|
1431
1434
|
|
|
1432
1435
|
class ExternalVideoEditorComponent {
|
|
@@ -1985,6 +1988,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
1985
1988
|
args: [CrocoHtmlOptionsToken]
|
|
1986
1989
|
}] }] });
|
|
1987
1990
|
|
|
1991
|
+
class HtmlViewComponent {
|
|
1992
|
+
constructor() {
|
|
1993
|
+
this.html = "<body></body>";
|
|
1994
|
+
}
|
|
1995
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: HtmlViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1996
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: HtmlViewComponent, isStandalone: true, selector: "croco-html-view", inputs: { html: "html" }, ngImport: i0, template: "<croco-html-xml-tag-view [data]=\"html | topreview\"></croco-html-xml-tag-view>", styles: [""], dependencies: [{ kind: "component", type: XmlTagViewComponent, selector: "croco-html-xml-tag-view", inputs: ["data"] }, { kind: "pipe", type: ToPreviewPipe, name: "topreview" }] }); }
|
|
1997
|
+
}
|
|
1998
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: HtmlViewComponent, decorators: [{
|
|
1999
|
+
type: Component,
|
|
2000
|
+
args: [{ selector: 'croco-html-view', standalone: true, imports: [XmlTagViewComponent, ToPreviewPipe], template: "<croco-html-xml-tag-view [data]=\"html | topreview\"></croco-html-xml-tag-view>" }]
|
|
2001
|
+
}], propDecorators: { html: [{
|
|
2002
|
+
type: Input
|
|
2003
|
+
}] } });
|
|
2004
|
+
|
|
1988
2005
|
class MainEditorComponent {
|
|
1989
2006
|
constructor(_clipboardService, _snackBar, _cdref) {
|
|
1990
2007
|
this._clipboardService = _clipboardService;
|
|
@@ -2026,11 +2043,23 @@ class MainEditorComponent {
|
|
|
2026
2043
|
this.visualEditor.recalculateBodyTags();
|
|
2027
2044
|
}
|
|
2028
2045
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MainEditorComponent, deps: [{ token: i1$5.ClipboardService }, { token: i2$3.MatSnackBar }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2029
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: MainEditorComponent, isStandalone: true, selector: "croco-html-main-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged" }, viewQueries: [{ propertyName: "visualEditor", first: true, predicate: ["visualEditor"], descendants: true, static: true }], ngImport: i0, template: "<mat-tab-group>\n <mat-tab label=\"\u0412\u0438\u0437\u0443\u0430\u043B\u044C\u043D\u044B\u0439 \u0440\u0435\u0434\u0430\u043A\u0442\u043E\u0440\">\n\n <div style=\"height: 20px;\"></div>\n\n <croco-visual-editor #visualEditor\n [useHtmlRaw]=\"useHtmlRaw\"\n [html]=\"html\"\n (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n (rendered)=\"visualEditorRenderedHandler()\">\n </croco-visual-editor>\n\n <div style=\"height: 20px;\"></div>\n\n </mat-tab>\n\n <mat-tab label=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\">\n <div style=\"height: 10px;\"></div>\n @if (visualEditorRendered) {\n <div>\n <mat-form-field class=\"w-100\">\n <mat-label>\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434</mat-label>\n <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n cdkAutosizeMinRows=\"1\"\n placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\"\n (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n </mat-form-field>\n </div>\n }\n\n <button (click)=\"copyMarkUp()\"\n mat-raised-button color=\"primary\">\n \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n </button>\n </mat-tab>\n <mat-tab label=\"\u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\">\n <mat-card style=\"padding: 2px;\" class=\"mat-card\">\n <mat-card-content>\n <croco-html-
|
|
2046
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: MainEditorComponent, isStandalone: true, selector: "croco-html-main-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged" }, viewQueries: [{ propertyName: "visualEditor", first: true, predicate: ["visualEditor"], descendants: true, static: true }], ngImport: i0, template: "<mat-tab-group>\n <mat-tab label=\"\u0412\u0438\u0437\u0443\u0430\u043B\u044C\u043D\u044B\u0439 \u0440\u0435\u0434\u0430\u043A\u0442\u043E\u0440\">\n\n <div style=\"height: 20px;\"></div>\n\n <croco-visual-editor #visualEditor\n [useHtmlRaw]=\"useHtmlRaw\"\n [html]=\"html\"\n (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n (rendered)=\"visualEditorRenderedHandler()\">\n </croco-visual-editor>\n\n <div style=\"height: 20px;\"></div>\n\n </mat-tab>\n\n <mat-tab label=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\">\n <div style=\"height: 10px;\"></div>\n @if (visualEditorRendered) {\n <div>\n <mat-form-field class=\"w-100\">\n <mat-label>\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434</mat-label>\n <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n cdkAutosizeMinRows=\"1\"\n placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\"\n (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n </mat-form-field>\n </div>\n }\n\n <button (click)=\"copyMarkUp()\"\n mat-raised-button color=\"primary\">\n \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n </button>\n </mat-tab>\n <mat-tab label=\"\u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\">\n <mat-card style=\"padding: 2px;\" class=\"mat-card\">\n <mat-card-content>\n <croco-html-view [html]=\"html\">\n </croco-html-view>\n </mat-card-content>\n </mat-card>\n </mat-tab>\n</mat-tab-group>\n", styles: [".example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: VisualEditorComponent, selector: "croco-visual-editor", inputs: ["showMarkUp", "useHtmlRaw", "html"], outputs: ["html", "onHtmlChanged", "rendered"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: HtmlViewComponent, selector: "croco-html-view", inputs: ["html"] }] }); }
|
|
2030
2047
|
}
|
|
2031
2048
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MainEditorComponent, decorators: [{
|
|
2032
2049
|
type: Component,
|
|
2033
|
-
args: [{ selector: 'croco-html-main-editor', standalone: true, imports: [
|
|
2050
|
+
args: [{ selector: 'croco-html-main-editor', standalone: true, imports: [
|
|
2051
|
+
MatTabsModule,
|
|
2052
|
+
VisualEditorComponent,
|
|
2053
|
+
MatFormField,
|
|
2054
|
+
MatLabel,
|
|
2055
|
+
MatInput,
|
|
2056
|
+
CdkTextareaAutosize,
|
|
2057
|
+
FormsModule,
|
|
2058
|
+
MatButton,
|
|
2059
|
+
MatCardModule,
|
|
2060
|
+
XmlTagViewComponent,
|
|
2061
|
+
HtmlViewComponent
|
|
2062
|
+
], template: "<mat-tab-group>\n <mat-tab label=\"\u0412\u0438\u0437\u0443\u0430\u043B\u044C\u043D\u044B\u0439 \u0440\u0435\u0434\u0430\u043A\u0442\u043E\u0440\">\n\n <div style=\"height: 20px;\"></div>\n\n <croco-visual-editor #visualEditor\n [useHtmlRaw]=\"useHtmlRaw\"\n [html]=\"html\"\n (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n (rendered)=\"visualEditorRenderedHandler()\">\n </croco-visual-editor>\n\n <div style=\"height: 20px;\"></div>\n\n </mat-tab>\n\n <mat-tab label=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\">\n <div style=\"height: 10px;\"></div>\n @if (visualEditorRendered) {\n <div>\n <mat-form-field class=\"w-100\">\n <mat-label>\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434</mat-label>\n <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n cdkAutosizeMinRows=\"1\"\n placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\"\n (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n </mat-form-field>\n </div>\n }\n\n <button (click)=\"copyMarkUp()\"\n mat-raised-button color=\"primary\">\n \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n </button>\n </mat-tab>\n <mat-tab label=\"\u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\">\n <mat-card style=\"padding: 2px;\" class=\"mat-card\">\n <mat-card-content>\n <croco-html-view [html]=\"html\">\n </croco-html-view>\n </mat-card-content>\n </mat-card>\n </mat-tab>\n</mat-tab-group>\n", styles: [".example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
|
|
2034
2063
|
}], ctorParameters: () => [{ type: i1$5.ClipboardService }, { type: i2$3.MatSnackBar }, { type: i0.ChangeDetectorRef }], propDecorators: { visualEditor: [{
|
|
2035
2064
|
type: ViewChild,
|
|
2036
2065
|
args: ["visualEditor", { static: true }]
|
|
@@ -2046,23 +2075,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
2046
2075
|
type: Output
|
|
2047
2076
|
}] } });
|
|
2048
2077
|
|
|
2049
|
-
class HtmlViewComponent {
|
|
2050
|
-
constructor() {
|
|
2051
|
-
this.html = "<body></body>";
|
|
2052
|
-
this.controller = new HtmlViewController();
|
|
2053
|
-
}
|
|
2054
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: HtmlViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2055
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: HtmlViewComponent, isStandalone: true, selector: "croco-html-view", inputs: { html: "html", controller: "controller" }, ngImport: i0, template: "<croco-html-xml-tag-view [controller]=\"controller\" [data]=\"html | topreview\"></croco-html-xml-tag-view>", styles: [""], dependencies: [{ kind: "component", type: XmlTagViewComponent, selector: "croco-html-xml-tag-view", inputs: ["data", "controller"] }, { kind: "pipe", type: ToPreviewPipe, name: "topreview" }] }); }
|
|
2056
|
-
}
|
|
2057
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: HtmlViewComponent, decorators: [{
|
|
2058
|
-
type: Component,
|
|
2059
|
-
args: [{ selector: 'croco-html-view', standalone: true, imports: [XmlTagViewComponent, ToPreviewPipe], template: "<croco-html-xml-tag-view [controller]=\"controller\" [data]=\"html | topreview\"></croco-html-xml-tag-view>" }]
|
|
2060
|
-
}], propDecorators: { html: [{
|
|
2061
|
-
type: Input
|
|
2062
|
-
}], controller: [{
|
|
2063
|
-
type: Input
|
|
2064
|
-
}] } });
|
|
2065
|
-
|
|
2066
2078
|
class TagToSpanPipe {
|
|
2067
2079
|
transform(value) {
|
|
2068
2080
|
return value.map(x => (`<b>${x}</b>`)).join(' | ');
|
|
@@ -2194,7 +2206,7 @@ class CrocoHtmlModule {
|
|
|
2194
2206
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: CrocoHtmlModule, imports: [CommonModule,
|
|
2195
2207
|
FormsModule,
|
|
2196
2208
|
ReactiveFormsModule,
|
|
2197
|
-
NgSelectModule, i1$6.MatBadgeModule, i2$4.MatTableModule, i3.MatExpansionModule, i1$4.MatFormFieldModule, i2$3.MatSnackBarModule, i6.MatProgressBarModule, i7.MatProgressSpinnerModule,
|
|
2209
|
+
NgSelectModule, i1$6.MatBadgeModule, i2$4.MatTableModule, i3$1.MatExpansionModule, i1$4.MatFormFieldModule, i2$3.MatSnackBarModule, i6.MatProgressBarModule, i7.MatProgressSpinnerModule, i3.MatTabsModule, i9.MatMenuModule, i1$2.MatCardModule, i11.MatSelectModule, i12.MatTooltipModule, i13.MatCheckboxModule, i14.MatChipsModule, i15.MatListModule, i2.MatButtonModule, i2$1.MatInputModule, i18.MatDialogModule, i19.MatPaginatorModule, i20.MatDatepickerModule, i21.MatGridListModule, i22.MatSlideToggleModule, i23.MatTreeModule, i24.MatNativeDateModule, i25.MatAutocompleteModule, i26.MatSidenavModule, i27.MatIconModule, i28.DragDropModule, i29.MatButtonToggleModule, ErrorBannerComponent,
|
|
2198
2210
|
VkVideoPlayerComponent,
|
|
2199
2211
|
YoutubeVideoPlayerComponent,
|
|
2200
2212
|
DownloadFileButtonEditorComponent,
|