croco-html 20.1.1 → 20.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/croco-html.mjs +140 -50
- package/fesm2022/croco-html.mjs.map +1 -1
- package/index.d.ts +47 -14
- package/package.json +1 -1
package/fesm2022/croco-html.mjs
CHANGED
|
@@ -684,6 +684,77 @@ class CustomWidgetTagService {
|
|
|
684
684
|
}
|
|
685
685
|
}
|
|
686
686
|
|
|
687
|
+
class LinkTagConsts {
|
|
688
|
+
static { this.TagName = "croco-link"; }
|
|
689
|
+
}
|
|
690
|
+
class LinkTagAttrs {
|
|
691
|
+
static { this.FileId = "file-id"; }
|
|
692
|
+
static { this.Url = "url"; }
|
|
693
|
+
static { this.Title = "title"; }
|
|
694
|
+
static { this.Type = "type"; }
|
|
695
|
+
}
|
|
696
|
+
class LinkTagService {
|
|
697
|
+
constructor() {
|
|
698
|
+
this.tagName = LinkTagConsts.TagName;
|
|
699
|
+
this.shortDescription = "Ссылка";
|
|
700
|
+
}
|
|
701
|
+
bodyTagToHtmlStringConverter(bodyTag) {
|
|
702
|
+
const urlVal = bodyTag.attributes[LinkTagAttrs.Url] ?? "";
|
|
703
|
+
const urlValStr = `${LinkTagAttrs.Url}="${urlVal}"`;
|
|
704
|
+
const titleVal = bodyTag.attributes[LinkTagAttrs.Title] ?? "";
|
|
705
|
+
const titleValStr = `${LinkTagAttrs.Title}="${titleVal}"`;
|
|
706
|
+
const typeVal = bodyTag.attributes[LinkTagAttrs.Type] ?? "";
|
|
707
|
+
const typeValStr = typeVal.length > 0 ? `${LinkTagAttrs.Type}="${typeVal}"` : "";
|
|
708
|
+
const attrStr = [urlValStr, titleValStr, typeValStr].join(" ");
|
|
709
|
+
return `<${this.tagName} ${attrStr}></${this.tagName}>`;
|
|
710
|
+
}
|
|
711
|
+
extractBlockFromHtmlElement(elem, _) {
|
|
712
|
+
const data = {
|
|
713
|
+
url: elem.getAttribute(LinkTagAttrs.Url),
|
|
714
|
+
title: elem.getAttribute(LinkTagAttrs.Title),
|
|
715
|
+
type: elem.getAttribute(LinkTagAttrs.Type),
|
|
716
|
+
fileId: elem.getAttribute(LinkTagAttrs.FileId),
|
|
717
|
+
};
|
|
718
|
+
return {
|
|
719
|
+
tagName: this.tagName,
|
|
720
|
+
data
|
|
721
|
+
};
|
|
722
|
+
}
|
|
723
|
+
toBodyTag(data) {
|
|
724
|
+
let tagData = data.data;
|
|
725
|
+
const attrs = {
|
|
726
|
+
[LinkTagAttrs.Url]: tagData.url,
|
|
727
|
+
[LinkTagAttrs.Type]: tagData.type,
|
|
728
|
+
[LinkTagAttrs.FileId]: tagData.fileId,
|
|
729
|
+
[LinkTagAttrs.Title]: tagData.title
|
|
730
|
+
};
|
|
731
|
+
return {
|
|
732
|
+
tagDescription: {
|
|
733
|
+
tag: data.tagName,
|
|
734
|
+
displayValue: this.shortDescription,
|
|
735
|
+
isCustom: false
|
|
736
|
+
},
|
|
737
|
+
attributes: attrs,
|
|
738
|
+
innerHtml: ""
|
|
739
|
+
};
|
|
740
|
+
}
|
|
741
|
+
getDefaultValue(props) {
|
|
742
|
+
return {
|
|
743
|
+
tagDescription: {
|
|
744
|
+
tag: this.tagName,
|
|
745
|
+
displayValue: this.shortDescription,
|
|
746
|
+
isCustom: false
|
|
747
|
+
},
|
|
748
|
+
attributes: {
|
|
749
|
+
[LinkTagAttrs.Title]: 'Презентация',
|
|
750
|
+
[LinkTagAttrs.Url]: 'https://storage.yandexcloud.net/mega-academy/presentation.pdf',
|
|
751
|
+
[LinkTagAttrs.Type]: 'pdf'
|
|
752
|
+
},
|
|
753
|
+
innerHtml: props.htmlRaw,
|
|
754
|
+
};
|
|
755
|
+
}
|
|
756
|
+
}
|
|
757
|
+
|
|
687
758
|
class TextTags {
|
|
688
759
|
static { this.text = "text"; }
|
|
689
760
|
static { this.h1 = "h1"; }
|
|
@@ -1102,7 +1173,8 @@ class BodyTagsExtensions {
|
|
|
1102
1173
|
[HtmlRawTagDataConsts.TagName]: new HtmlRawTagService(),
|
|
1103
1174
|
[DownloadButtonTagDataConsts.TagName]: new DownloadButtonTagService(),
|
|
1104
1175
|
[ButtonTagDataConsts.TagName]: new ButtonTagService(),
|
|
1105
|
-
[TableTypes.Table]: new TableTagService()
|
|
1176
|
+
[TableTypes.Table]: new TableTagService(),
|
|
1177
|
+
[LinkTagConsts.TagName]: new LinkTagService()
|
|
1106
1178
|
}; }
|
|
1107
1179
|
static hasTagService(tagName, options) {
|
|
1108
1180
|
if (this._tagServices.hasOwnProperty(tagName)) {
|
|
@@ -2331,17 +2403,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2331
2403
|
args: [{ required: true }]
|
|
2332
2404
|
}] } });
|
|
2333
2405
|
|
|
2334
|
-
;
|
|
2335
2406
|
class HtmlRawViewComponent {
|
|
2407
|
+
set data(item) {
|
|
2408
|
+
const data = item.data;
|
|
2409
|
+
this.safeHtml = this._sanitizer.bypassSecurityTrustHtml(data.innerHTML);
|
|
2410
|
+
this._cdr.markForCheck();
|
|
2411
|
+
}
|
|
2336
2412
|
constructor(_sanitizer, router) {
|
|
2337
2413
|
this._sanitizer = _sanitizer;
|
|
2338
2414
|
this.router = router;
|
|
2339
|
-
this.
|
|
2340
|
-
|
|
2341
|
-
ngOnChanges(changes) {
|
|
2342
|
-
if (changes['rawHtml'] && changes['rawHtml'].currentValue !== changes['rawHtml'].previousValue) {
|
|
2343
|
-
this.safeHtml = this._sanitizer.bypassSecurityTrustHtml(this.rawHtml);
|
|
2344
|
-
}
|
|
2415
|
+
this._cdr = inject(ChangeDetectorRef);
|
|
2416
|
+
this.safeHtml = null;
|
|
2345
2417
|
}
|
|
2346
2418
|
handleLink(event) {
|
|
2347
2419
|
const target = event.target.closest('a');
|
|
@@ -2368,13 +2440,14 @@ class HtmlRawViewComponent {
|
|
|
2368
2440
|
this.router.navigate([path]);
|
|
2369
2441
|
}
|
|
2370
2442
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlRawViewComponent, deps: [{ token: i1$2.DomSanitizer }, { token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2371
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: HtmlRawViewComponent, isStandalone: true, selector: "croco-html-raw-view", inputs: {
|
|
2443
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: HtmlRawViewComponent, isStandalone: true, selector: "croco-html-raw-view", inputs: { data: "data" }, ngImport: i0, template: "@if (safeHtml) {\n <div [innerHTML]=\"safeHtml\" (click)=\"handleLink($event)\"></div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2372
2444
|
}
|
|
2373
2445
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlRawViewComponent, decorators: [{
|
|
2374
2446
|
type: Component,
|
|
2375
|
-
args: [{ selector: 'croco-html-raw-view', standalone: true, template: "@if (
|
|
2376
|
-
}], ctorParameters: () => [{ type: i1$2.DomSanitizer }, { type: i2$1.Router }], propDecorators: {
|
|
2377
|
-
type: Input
|
|
2447
|
+
args: [{ selector: 'croco-html-raw-view', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (safeHtml) {\n <div [innerHTML]=\"safeHtml\" (click)=\"handleLink($event)\"></div>\n}\n" }]
|
|
2448
|
+
}], ctorParameters: () => [{ type: i1$2.DomSanitizer }, { type: i2$1.Router }], propDecorators: { data: [{
|
|
2449
|
+
type: Input,
|
|
2450
|
+
args: [{ required: true }]
|
|
2378
2451
|
}] } });
|
|
2379
2452
|
|
|
2380
2453
|
/**
|
|
@@ -2481,6 +2554,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2481
2554
|
type: Input
|
|
2482
2555
|
}] } });
|
|
2483
2556
|
|
|
2557
|
+
class DefaultTags {
|
|
2558
|
+
static { this.textTags = [
|
|
2559
|
+
{ tag: 'text', displayValue: 'T', isCustom: false },
|
|
2560
|
+
{ tag: 'h1', displayValue: 'H1', isCustom: false },
|
|
2561
|
+
{ tag: 'h2', displayValue: 'H2', isCustom: false },
|
|
2562
|
+
{ tag: 'h3', displayValue: 'H3', isCustom: false },
|
|
2563
|
+
{ tag: 'h4', displayValue: 'H4', isCustom: false },
|
|
2564
|
+
{ tag: 'h5', displayValue: 'H5', isCustom: false },
|
|
2565
|
+
{ tag: 'h6', displayValue: 'H6', isCustom: false },
|
|
2566
|
+
]; }
|
|
2567
|
+
static { this.tags = [
|
|
2568
|
+
{ tag: FileImageTagDataConsts.TagName, displayValue: 'Изображение', isCustom: false },
|
|
2569
|
+
{ tag: FileAudioTagDataConsts.TagName, displayValue: 'Аудио', isCustom: false },
|
|
2570
|
+
{ tag: ExternalVideoTagDataConsts.TagName, displayValue: 'Видео', isCustom: false },
|
|
2571
|
+
{ tag: LinkTagConsts.TagName, displayValue: 'Ссылка', isCustom: false },
|
|
2572
|
+
{ tag: DownloadButtonTagDataConsts.TagName, displayValue: 'Кнопка для скачивания', isCustom: false },
|
|
2573
|
+
{ tag: ButtonTagDataConsts.TagName, displayValue: 'Кнопка', isCustom: false },
|
|
2574
|
+
{ tag: HtmlRawTagDataConsts.TagName, displayValue: 'Разметка', isCustom: false },
|
|
2575
|
+
{ tag: 'text', displayValue: 'Текст', isCustom: false },
|
|
2576
|
+
]; }
|
|
2577
|
+
static { this.tagRenderers = {
|
|
2578
|
+
[HtmlRawTagDataConsts.TagName]: { viewComponent: HtmlRawViewComponent }
|
|
2579
|
+
}; }
|
|
2580
|
+
static isViewDefined(item, options) {
|
|
2581
|
+
const tagName = item.tagName;
|
|
2582
|
+
if (options.definedViewRenderers.hasOwnProperty(tagName)) {
|
|
2583
|
+
return true;
|
|
2584
|
+
}
|
|
2585
|
+
return DefaultTags.tagRenderers.hasOwnProperty(item.tagName);
|
|
2586
|
+
}
|
|
2587
|
+
static getTags(options) {
|
|
2588
|
+
if (options.editorCustomAddTagButtons) {
|
|
2589
|
+
return [...options.editorCustomAddTagButtons];
|
|
2590
|
+
}
|
|
2591
|
+
return [...DefaultTags.tags];
|
|
2592
|
+
}
|
|
2593
|
+
}
|
|
2594
|
+
|
|
2484
2595
|
class DefinedCustomTagViewComponent {
|
|
2485
2596
|
set data(value) {
|
|
2486
2597
|
this._data = value;
|
|
@@ -2495,8 +2606,11 @@ class DefinedCustomTagViewComponent {
|
|
|
2495
2606
|
}
|
|
2496
2607
|
getCustomComponent() {
|
|
2497
2608
|
const tagName = this._data.tagName;
|
|
2498
|
-
if (this._options.
|
|
2499
|
-
return this._options.
|
|
2609
|
+
if (this._options.definedViewRenderers.hasOwnProperty(tagName)) {
|
|
2610
|
+
return this._options.definedViewRenderers[tagName].viewComponent;
|
|
2611
|
+
}
|
|
2612
|
+
if (DefaultTags.tagRenderers.hasOwnProperty(tagName)) {
|
|
2613
|
+
return DefaultTags.tagRenderers[tagName].viewComponent;
|
|
2500
2614
|
}
|
|
2501
2615
|
return null;
|
|
2502
2616
|
}
|
|
@@ -2514,11 +2628,11 @@ class DefinedCustomTagViewComponent {
|
|
|
2514
2628
|
this.dynamicContainerRef.destroy();
|
|
2515
2629
|
}
|
|
2516
2630
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DefinedCustomTagViewComponent, deps: [{ token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2517
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DefinedCustomTagViewComponent, isStandalone: true, selector: "croco-html-defined-custom-tag-view", inputs: { data: "data", dataController: "dataController" }, viewQueries: [{ propertyName: "viewContainerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #container>\n @if (!useDynamicComponent) {\n <div>\n {{data | json}}\n </div>\n }\n</ng-container>", dependencies: [{ kind: "pipe", type: JsonPipe, name: "json" }] }); }
|
|
2631
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DefinedCustomTagViewComponent, isStandalone: true, selector: "croco-html-defined-custom-tag-view", inputs: { data: "data", dataController: "dataController" }, viewQueries: [{ propertyName: "viewContainerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #container>\n @if (!useDynamicComponent) {\n <div>\n <div>\n \u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0442\u0435\u0433\u0430: {{data.tagName}}\n </div>\n <div>\n \u0414\u0430\u043D\u043D\u044B\u0435:\n </div>\n <div>\n {{data.data | json}}\n </div>\n </div>\n }\n</ng-container>", dependencies: [{ kind: "pipe", type: JsonPipe, name: "json" }] }); }
|
|
2518
2632
|
}
|
|
2519
2633
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DefinedCustomTagViewComponent, decorators: [{
|
|
2520
2634
|
type: Component,
|
|
2521
|
-
args: [{ selector: 'croco-html-defined-custom-tag-view', imports: [JsonPipe], standalone: true, template: "<ng-container #container>\n @if (!useDynamicComponent) {\n <div>\n {{data | json}}\n </div>\n }\n</ng-container>" }]
|
|
2635
|
+
args: [{ selector: 'croco-html-defined-custom-tag-view', imports: [JsonPipe], standalone: true, template: "<ng-container #container>\n @if (!useDynamicComponent) {\n <div>\n <div>\n \u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0442\u0435\u0433\u0430: {{data.tagName}}\n </div>\n <div>\n \u0414\u0430\u043D\u043D\u044B\u0435:\n </div>\n <div>\n {{data.data | json}}\n </div>\n </div>\n }\n</ng-container>" }]
|
|
2522
2636
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
2523
2637
|
type: Inject,
|
|
2524
2638
|
args: [CrocoHtmlOptionsToken]
|
|
@@ -2570,11 +2684,14 @@ class XmlTagViewComponent {
|
|
|
2570
2684
|
isHeaderTextTag(item) {
|
|
2571
2685
|
return TextTags.headerTextTags.includes(item.tagName);
|
|
2572
2686
|
}
|
|
2687
|
+
isViewDefined(item) {
|
|
2688
|
+
return DefaultTags.isViewDefined(item, this._options);
|
|
2689
|
+
}
|
|
2573
2690
|
isDefinedCustomTag(item) {
|
|
2574
2691
|
return this._options.definedCustomTags.hasOwnProperty(item.tagName);
|
|
2575
2692
|
}
|
|
2576
2693
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: XmlTagViewComponent, deps: [{ token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2577
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: XmlTagViewComponent, isStandalone: true, selector: "croco-html-xml-tag-view", inputs: { data: "data", dataController: "dataController", isEditor: "isEditor" }, ngImport: i0, template: "<div>\n @for (item of data; track $index) {\n <div class=\"row\">\n\n @if (item.tagName === 'text') {\n <div>\n <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\n </div>\n }\n @else if (
|
|
2694
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: XmlTagViewComponent, isStandalone: true, selector: "croco-html-xml-tag-view", inputs: { data: "data", dataController: "dataController", isEditor: "isEditor" }, ngImport: i0, template: "<div>\n @for (item of data; track $index) {\n <div class=\"row\">\n\n @if (item.tagName === 'text') {\n <div>\n <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\n </div>\n }\n @else 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 @else if (item.tagName === 'file-image') {\n <div>\n <croco-html-file-image-tag-view [item]=\"item\" [isEditor]=\"isEditor\"></croco-html-file-image-tag-view>\n </div>\n }\n @else if (item.tagName === 'audio-player') {\n <div>\n <croco-html-audio-player-tag-view [data]=\"item\"></croco-html-audio-player-tag-view>\n </div>\n }\n @else if (item.tagName === 'custom-widget') {\n <div>\n <croco-html-xml-tag-custom-widget [tagData]=\"item.data\"></croco-html-xml-tag-custom-widget>\n </div>\n }\n @else if (item.tagName === 'table' && item.validationResult) {\n\n @if (item.validationResult.isSucceeded){\n <div class=\"table-container\">\n <croco-html-xml-tag-html-view [html]=\"item.data.bootstrapHtml\">\n </croco-html-xml-tag-html-view>\n </div>\n }\n @else {\n <croco-html-error-banner [message]=\"item.validationResult.message\">\n </croco-html-error-banner>\n }\n }\n @else if (item.tagName === 'external-video') {\n <div>\n <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\n </div>\n }\n @else if (item.tagName === '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 @else if (item.tagName === 'button') {\n <div>\n <croco-html-xml-tag-button [data]=\"item\"></croco-html-xml-tag-button>\n </div>\n }\n @else if (item.tagName === 'unsupported-tag') {\n <div class=\"red\" style=\"margin-top: 10px;padding: 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 @else if (isViewDefined(item)){\n <div>\n <croco-html-defined-custom-tag-view [data]=\"item\"\n [dataController]=\"dataController\"></croco-html-defined-custom-tag-view>\n </div>\n }\n @else if (isDefinedCustomTag(item)) {\n <div>\n <croco-html-defined-custom-tag-view [data]=\"item\"\n [dataController]=\"dataController\"></croco-html-defined-custom-tag-view>\n </div>\n }\n\n </div>\n }\n</div>\n", styles: [".red{background-color:#c94444;color:#fff}.table-container{width:100%;overflow-x:auto}\n"], dependencies: [{ kind: "component", type: XmlTagTextViewComponent, selector: "croco-html-xml-tag-text-view", inputs: ["item"] }, { 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", "isEditor"] }, { kind: "component", type: AudioPlayerTagViewComponent, selector: "croco-html-audio-player-tag-view", inputs: ["data"] }, { 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"] }, { kind: "component", type: XmlTagCustomWidgetComponent, selector: "croco-html-xml-tag-custom-widget", inputs: ["tagData"] }, { kind: "component", type: DefinedCustomTagViewComponent, selector: "croco-html-defined-custom-tag-view", inputs: ["data", "dataController"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2578
2695
|
}
|
|
2579
2696
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: XmlTagViewComponent, decorators: [{
|
|
2580
2697
|
type: Component,
|
|
@@ -2591,7 +2708,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2591
2708
|
XmlTagButtonComponent,
|
|
2592
2709
|
XmlTagCustomWidgetComponent,
|
|
2593
2710
|
DefinedCustomTagViewComponent
|
|
2594
|
-
], template: "<div>\n @for (item of data; track $index) {\n <div class=\"row\">\n\n @if (item.tagName === 'text') {\n <div>\n <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\n </div>\n }\n @else if (
|
|
2711
|
+
], template: "<div>\n @for (item of data; track $index) {\n <div class=\"row\">\n\n @if (item.tagName === 'text') {\n <div>\n <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\n </div>\n }\n @else 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 @else if (item.tagName === 'file-image') {\n <div>\n <croco-html-file-image-tag-view [item]=\"item\" [isEditor]=\"isEditor\"></croco-html-file-image-tag-view>\n </div>\n }\n @else if (item.tagName === 'audio-player') {\n <div>\n <croco-html-audio-player-tag-view [data]=\"item\"></croco-html-audio-player-tag-view>\n </div>\n }\n @else if (item.tagName === 'custom-widget') {\n <div>\n <croco-html-xml-tag-custom-widget [tagData]=\"item.data\"></croco-html-xml-tag-custom-widget>\n </div>\n }\n @else if (item.tagName === 'table' && item.validationResult) {\n\n @if (item.validationResult.isSucceeded){\n <div class=\"table-container\">\n <croco-html-xml-tag-html-view [html]=\"item.data.bootstrapHtml\">\n </croco-html-xml-tag-html-view>\n </div>\n }\n @else {\n <croco-html-error-banner [message]=\"item.validationResult.message\">\n </croco-html-error-banner>\n }\n }\n @else if (item.tagName === 'external-video') {\n <div>\n <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\n </div>\n }\n @else if (item.tagName === '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 @else if (item.tagName === 'button') {\n <div>\n <croco-html-xml-tag-button [data]=\"item\"></croco-html-xml-tag-button>\n </div>\n }\n @else if (item.tagName === 'unsupported-tag') {\n <div class=\"red\" style=\"margin-top: 10px;padding: 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 @else if (isViewDefined(item)){\n <div>\n <croco-html-defined-custom-tag-view [data]=\"item\"\n [dataController]=\"dataController\"></croco-html-defined-custom-tag-view>\n </div>\n }\n @else if (isDefinedCustomTag(item)) {\n <div>\n <croco-html-defined-custom-tag-view [data]=\"item\"\n [dataController]=\"dataController\"></croco-html-defined-custom-tag-view>\n </div>\n }\n\n </div>\n }\n</div>\n", styles: [".red{background-color:#c94444;color:#fff}.table-container{width:100%;overflow-x:auto}\n"] }]
|
|
2595
2712
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
2596
2713
|
type: Inject,
|
|
2597
2714
|
args: [CrocoHtmlOptionsToken]
|
|
@@ -2894,33 +3011,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2894
3011
|
args: [{ required: true }]
|
|
2895
3012
|
}] } });
|
|
2896
3013
|
|
|
2897
|
-
class DefaultTags {
|
|
2898
|
-
static { this.textTags = [
|
|
2899
|
-
{ tag: 'text', displayValue: 'T', isCustom: false },
|
|
2900
|
-
{ tag: 'h1', displayValue: 'H1', isCustom: false },
|
|
2901
|
-
{ tag: 'h2', displayValue: 'H2', isCustom: false },
|
|
2902
|
-
{ tag: 'h3', displayValue: 'H3', isCustom: false },
|
|
2903
|
-
{ tag: 'h4', displayValue: 'H4', isCustom: false },
|
|
2904
|
-
{ tag: 'h5', displayValue: 'H5', isCustom: false },
|
|
2905
|
-
{ tag: 'h6', displayValue: 'H6', isCustom: false },
|
|
2906
|
-
]; }
|
|
2907
|
-
static { this.tags = [
|
|
2908
|
-
{ tag: FileImageTagDataConsts.TagName, displayValue: 'Изображение', isCustom: false },
|
|
2909
|
-
{ tag: FileAudioTagDataConsts.TagName, displayValue: 'Аудио', isCustom: false },
|
|
2910
|
-
{ tag: ExternalVideoTagDataConsts.TagName, displayValue: 'Видео', isCustom: false },
|
|
2911
|
-
{ tag: DownloadButtonTagDataConsts.TagName, displayValue: 'Кнопка для скачивания', isCustom: false },
|
|
2912
|
-
{ tag: ButtonTagDataConsts.TagName, displayValue: 'Кнопка', isCustom: false },
|
|
2913
|
-
{ tag: HtmlRawTagDataConsts.TagName, displayValue: 'Разметка', isCustom: false },
|
|
2914
|
-
{ tag: 'text', displayValue: 'Текст', isCustom: false },
|
|
2915
|
-
]; }
|
|
2916
|
-
static getTags(options) {
|
|
2917
|
-
if (options.editorCustomAddTagButtons) {
|
|
2918
|
-
return [...options.editorCustomAddTagButtons];
|
|
2919
|
-
}
|
|
2920
|
-
return [...DefaultTags.tags];
|
|
2921
|
-
}
|
|
2922
|
-
}
|
|
2923
|
-
|
|
2924
3014
|
const AlignmentsData = [
|
|
2925
3015
|
{ value: TextAlignment.Left, text: 'Слева' },
|
|
2926
3016
|
{ value: TextAlignment.Center, text: 'По центру' },
|
|
@@ -3118,8 +3208,8 @@ class DefinedCustomEditorBlockComponent {
|
|
|
3118
3208
|
}
|
|
3119
3209
|
getCustomComponent() {
|
|
3120
3210
|
const tagName = this._tag.tagDescription.tag;
|
|
3121
|
-
if (this._options.
|
|
3122
|
-
return this._options.
|
|
3211
|
+
if (this._options.definedEditorViewRenderers.hasOwnProperty(tagName)) {
|
|
3212
|
+
return this._options.definedEditorViewRenderers[tagName].editorComponent;
|
|
3123
3213
|
}
|
|
3124
3214
|
return null;
|
|
3125
3215
|
}
|
|
@@ -3256,8 +3346,8 @@ class CustomWidgetIconComponent {
|
|
|
3256
3346
|
this._shortTagName = "";
|
|
3257
3347
|
}
|
|
3258
3348
|
getIconComponent() {
|
|
3259
|
-
if (this._options.
|
|
3260
|
-
return this._options.
|
|
3349
|
+
if (this._options.definedEditorViewRenderers.hasOwnProperty(this._tagName)) {
|
|
3350
|
+
return this._options.definedEditorViewRenderers[this._tagName].iconComponent;
|
|
3261
3351
|
}
|
|
3262
3352
|
return null;
|
|
3263
3353
|
}
|
|
@@ -3959,5 +4049,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3959
4049
|
* Generated bundle index. Do not edit.
|
|
3960
4050
|
*/
|
|
3961
4051
|
|
|
3962
|
-
export { AddFilesBtnComponent, AngularMaterialTableMethods, AudioEditorComponent, AudioMethods, AudioPlayerTagViewComponent, BodyTagsExtensions, BootstrapTableMethods, ButtonTagDataConsts, ButtonTagService, CrocoHtmlFileOptionsService, CrocoHtmlModule, CrocoHtmlOptionsToken, CustomWidgetEditorComponent, CustomWidgetIconComponent, CustomWidgetTagDataConsts, CustomWidgetTagService, DefinedCustomEditorBlockComponent, DefinedCustomTagViewComponent, DownloadButtonTagDataConsts, DownloadButtonTagService, ExternalVideoEditorComponent, ExternalVideoPlayers, ExternalVideoSupportedTypes, ExternalVideoTagDataConsts, ExternalVideoTagService, FileAudioTagDataConsts, FileIdSelectComponent, FileImageTagDataConsts, FileImageTagService, FileImageTagViewComponent, FileType, HtmlPageDataController, HtmlRawEditorComponent, HtmlRawTagDataConsts, HtmlRawTagService, HtmlRawViewComponent, HtmlViewComponent, HtmlViewController, ImageEditorComponent, ImageMethods, MainEditorBlockComponent, MainEditorComponent, TableBuilder, TableMethods, TableTypes, TagEditorService, TagToSpanPipe, TextAlignment, TextEditorComponent, TextSimpleMethods, TextTag, TextTagDataConsts, TextTagHtmlMarkupTagService, TextTags, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe, ToPreviewPipe, UploadFilesBtnComponent, VisualEditorComponent, XmlExtensions, XmlTagCustomWidgetComponent, XmlTagExternalVideoComponent, XmlTagHeaderInnerTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHtmlViewComponent, XmlTagTextViewComponent, XmlTagViewComponent };
|
|
4052
|
+
export { AddFilesBtnComponent, AngularMaterialTableMethods, AudioEditorComponent, AudioMethods, AudioPlayerTagViewComponent, BodyTagsExtensions, BootstrapTableMethods, ButtonTagDataConsts, ButtonTagService, CrocoHtmlFileOptionsService, CrocoHtmlModule, CrocoHtmlOptionsToken, CustomWidgetEditorComponent, CustomWidgetIconComponent, CustomWidgetTagDataConsts, CustomWidgetTagService, DefinedCustomEditorBlockComponent, DefinedCustomTagViewComponent, DownloadButtonTagDataConsts, DownloadButtonTagService, ExternalVideoEditorComponent, ExternalVideoPlayers, ExternalVideoSupportedTypes, ExternalVideoTagDataConsts, ExternalVideoTagService, FileAudioTagDataConsts, FileIdSelectComponent, FileImageTagDataConsts, FileImageTagService, FileImageTagViewComponent, FileType, HtmlPageDataController, HtmlRawEditorComponent, HtmlRawTagDataConsts, HtmlRawTagService, HtmlRawViewComponent, HtmlViewComponent, HtmlViewController, ImageEditorComponent, ImageMethods, LinkTagAttrs, LinkTagConsts, LinkTagService, MainEditorBlockComponent, MainEditorComponent, TableBuilder, TableMethods, TableTypes, TagEditorService, TagToSpanPipe, TextAlignment, TextEditorComponent, TextSimpleMethods, TextTag, TextTagDataConsts, TextTagHtmlMarkupTagService, TextTags, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe, ToPreviewPipe, UploadFilesBtnComponent, VisualEditorComponent, XmlExtensions, XmlTagCustomWidgetComponent, XmlTagExternalVideoComponent, XmlTagHeaderInnerTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHtmlViewComponent, XmlTagTextViewComponent, XmlTagViewComponent };
|
|
3963
4053
|
//# sourceMappingURL=croco-html.mjs.map
|