@dotcms/angular 0.0.1-beta.30 → 0.0.1-beta.31
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/next/components/dotcms-block-editor-renderer/blocks/dot-contentlet.component.mjs +125 -0
- package/esm2022/next/components/dotcms-block-editor-renderer/blocks/unknown.component.mjs +65 -0
- package/esm2022/next/components/dotcms-block-editor-renderer/dotcms-block-editor-renderer.component.mjs +7 -3
- package/esm2022/next/components/dotcms-block-editor-renderer/item/dotcms-block-editor-item.component.mjs +7 -5
- package/fesm2022/dotcms-angular-next.mjs +159 -29
- package/fesm2022/dotcms-angular-next.mjs.map +1 -1
- package/next/components/dotcms-block-editor-renderer/blocks/dot-contentlet.component.d.ts +34 -0
- package/next/components/dotcms-block-editor-renderer/blocks/dot-contentlet.component.d.ts.map +1 -0
- package/next/components/dotcms-block-editor-renderer/blocks/unknown.component.d.ts +18 -0
- package/next/components/dotcms-block-editor-renderer/blocks/unknown.component.d.ts.map +1 -0
- package/next/components/dotcms-block-editor-renderer/dotcms-block-editor-renderer.component.d.ts +3 -1
- package/next/components/dotcms-block-editor-renderer/dotcms-block-editor-renderer.component.d.ts.map +1 -1
- package/next/components/dotcms-block-editor-renderer/item/dotcms-block-editor-item.component.d.ts.map +1 -1
- package/package.json +3 -3
- package/esm2022/next/components/dotcms-block-editor-renderer/blocks/contentlet.component.mjs +0 -53
- package/next/components/dotcms-block-editor-renderer/blocks/contentlet.component.d.ts +0 -25
- package/next/components/dotcms-block-editor-renderer/blocks/contentlet.component.d.ts.map +0 -1
|
@@ -431,21 +431,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
|
|
|
431
431
|
}]
|
|
432
432
|
}] });
|
|
433
433
|
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
434
|
+
class NoComponentProvided {
|
|
435
|
+
constructor() {
|
|
436
|
+
this.style = {
|
|
437
|
+
backgroundColor: '#fffaf0',
|
|
438
|
+
color: '#333',
|
|
439
|
+
padding: '1rem',
|
|
440
|
+
borderRadius: '0.5rem',
|
|
441
|
+
marginBottom: '1rem',
|
|
442
|
+
marginTop: '1rem',
|
|
443
|
+
border: '1px solid #ed8936'
|
|
444
|
+
};
|
|
445
|
+
}
|
|
446
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NoComponentProvided, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
447
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: NoComponentProvided, isStandalone: true, selector: "dotcms-no-component-provided", inputs: { contentType: "contentType" }, ngImport: i0, template: `
|
|
448
|
+
<div data-testid="no-component-provided" [style]="style">
|
|
449
|
+
<strong style="color: #c05621">Dev Warning</strong>
|
|
450
|
+
: No component or custom renderer provided for content type
|
|
451
|
+
<strong style="color: #c05621">{{ contentType || 'Unknown' }}</strong>
|
|
452
|
+
.
|
|
453
|
+
<br />
|
|
454
|
+
Please refer to the
|
|
455
|
+
<a
|
|
456
|
+
href="https://dev.dotcms.com/docs/block-editor"
|
|
457
|
+
target="_blank"
|
|
458
|
+
rel="noopener noreferrer"
|
|
459
|
+
style="color: #c05621">
|
|
460
|
+
Block Editor Custom Renderers Documentation
|
|
461
|
+
</a>
|
|
462
|
+
for guidance.
|
|
463
|
+
</div>
|
|
464
|
+
`, isInline: true }); }
|
|
440
465
|
}
|
|
441
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type:
|
|
466
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NoComponentProvided, decorators: [{
|
|
442
467
|
type: Component,
|
|
443
468
|
args: [{
|
|
444
|
-
selector: '
|
|
445
|
-
|
|
446
|
-
|
|
469
|
+
selector: 'dotcms-no-component-provided',
|
|
470
|
+
standalone: true,
|
|
471
|
+
template: `
|
|
472
|
+
<div data-testid="no-component-provided" [style]="style">
|
|
473
|
+
<strong style="color: #c05621">Dev Warning</strong>
|
|
474
|
+
: No component or custom renderer provided for content type
|
|
475
|
+
<strong style="color: #c05621">{{ contentType || 'Unknown' }}</strong>
|
|
476
|
+
.
|
|
477
|
+
<br />
|
|
478
|
+
Please refer to the
|
|
479
|
+
<a
|
|
480
|
+
href="https://dev.dotcms.com/docs/block-editor"
|
|
481
|
+
target="_blank"
|
|
482
|
+
rel="noopener noreferrer"
|
|
483
|
+
style="color: #c05621">
|
|
484
|
+
Block Editor Custom Renderers Documentation
|
|
485
|
+
</a>
|
|
486
|
+
for guidance.
|
|
487
|
+
</div>
|
|
488
|
+
`
|
|
447
489
|
}]
|
|
448
|
-
}], propDecorators: {
|
|
490
|
+
}], propDecorators: { contentType: [{
|
|
449
491
|
type: Input
|
|
450
492
|
}] } });
|
|
451
493
|
/**
|
|
@@ -454,26 +496,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
|
|
|
454
496
|
class DotContentletBlock {
|
|
455
497
|
constructor() {
|
|
456
498
|
this.$data = computed(() => this.attrs?.['data']);
|
|
499
|
+
this.DOT_CONTENT_NO_DATA_MESSAGE = '[DotCMSBlockEditorRenderer]: No data provided for Contentlet Block. Try to add a contentlet to the block editor. If the error persists, please contact the DotCMS support team.';
|
|
500
|
+
this.DOT_CONTENT_NO_MATCHING_COMPONENT_MESSAGE = (contentType) => `[DotCMSBlockEditorRenderer]: No matching component found for content type: ${contentType}. Provide a custom renderer for this content type to fix this error.`;
|
|
501
|
+
}
|
|
502
|
+
get isDevMode() {
|
|
503
|
+
return getUVEState()?.mode === UVE_MODE.EDIT;
|
|
457
504
|
}
|
|
458
505
|
ngOnInit() {
|
|
459
506
|
if (!this.$data()) {
|
|
460
|
-
console.error(
|
|
507
|
+
console.error(this.DOT_CONTENT_NO_DATA_MESSAGE);
|
|
508
|
+
return;
|
|
509
|
+
}
|
|
510
|
+
const contentType = this.$data()?.contentType || '';
|
|
511
|
+
this.contentComponent = this.customRenderers?.[contentType];
|
|
512
|
+
if (!this.contentComponent) {
|
|
513
|
+
console.warn(this.DOT_CONTENT_NO_MATCHING_COMPONENT_MESSAGE(contentType));
|
|
461
514
|
}
|
|
462
|
-
this.contentComponent =
|
|
463
|
-
this.customRenderers?.[this.$data()?.contentType] ??
|
|
464
|
-
Promise.resolve().then(function () { return contentlet_component; }).then((m) => m.DotDefaultContentBlock);
|
|
465
515
|
}
|
|
466
516
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotContentletBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
467
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
517
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: DotContentletBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-contentlet", inputs: { customRenderers: "customRenderers", attrs: "attrs" }, ngImport: i0, template: `
|
|
518
|
+
@if (contentComponent) {
|
|
519
|
+
<ng-container
|
|
520
|
+
*ngComponentOutlet="
|
|
521
|
+
contentComponent | async;
|
|
522
|
+
inputs: { contentlet: $data() }
|
|
523
|
+
"></ng-container>
|
|
524
|
+
} @else if (isDevMode) {
|
|
525
|
+
<dotcms-no-component-provided [contentType]="$data()?.contentType" />
|
|
526
|
+
}
|
|
527
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: NoComponentProvided, selector: "dotcms-no-component-provided", inputs: ["contentType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
468
528
|
}
|
|
469
529
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotContentletBlock, decorators: [{
|
|
470
530
|
type: Component,
|
|
471
531
|
args: [{
|
|
472
532
|
selector: 'dotcms-block-editor-renderer-contentlet',
|
|
473
533
|
standalone: true,
|
|
474
|
-
imports: [NgComponentOutlet, AsyncPipe],
|
|
534
|
+
imports: [NgComponentOutlet, AsyncPipe, NoComponentProvided],
|
|
475
535
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
476
|
-
template:
|
|
536
|
+
template: `
|
|
537
|
+
@if (contentComponent) {
|
|
538
|
+
<ng-container
|
|
539
|
+
*ngComponentOutlet="
|
|
540
|
+
contentComponent | async;
|
|
541
|
+
inputs: { contentlet: $data() }
|
|
542
|
+
"></ng-container>
|
|
543
|
+
} @else if (isDevMode) {
|
|
544
|
+
<dotcms-no-component-provided [contentType]="$data()?.contentType" />
|
|
545
|
+
}
|
|
546
|
+
`
|
|
477
547
|
}]
|
|
478
548
|
}], propDecorators: { customRenderers: [{
|
|
479
549
|
type: Input
|
|
@@ -481,12 +551,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
|
|
|
481
551
|
type: Input
|
|
482
552
|
}] } });
|
|
483
553
|
|
|
484
|
-
var contentlet_component = /*#__PURE__*/Object.freeze({
|
|
485
|
-
__proto__: null,
|
|
486
|
-
DotContentletBlock: DotContentletBlock,
|
|
487
|
-
DotDefaultContentBlock: DotDefaultContentBlock
|
|
488
|
-
});
|
|
489
|
-
|
|
490
554
|
class DotImageBlock {
|
|
491
555
|
constructor() {
|
|
492
556
|
this.$srcURL = computed(() => this.attrs?.['src']);
|
|
@@ -896,6 +960,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
|
|
|
896
960
|
type: Input
|
|
897
961
|
}] } });
|
|
898
962
|
|
|
963
|
+
class DotUnknownBlockComponent {
|
|
964
|
+
constructor() {
|
|
965
|
+
this.style = {
|
|
966
|
+
backgroundColor: '#fff5f5',
|
|
967
|
+
color: '#333',
|
|
968
|
+
padding: '1rem',
|
|
969
|
+
borderRadius: '0.5rem',
|
|
970
|
+
marginBottom: '1rem',
|
|
971
|
+
marginTop: '1rem',
|
|
972
|
+
border: '1px solid #fc8181'
|
|
973
|
+
};
|
|
974
|
+
}
|
|
975
|
+
get isEditMode() {
|
|
976
|
+
return getUVEState()?.mode === UVE_MODE.EDIT;
|
|
977
|
+
}
|
|
978
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotUnknownBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
979
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: DotUnknownBlockComponent, isStandalone: true, selector: "dotcms-block-editor-renderer-unknown", inputs: { node: "node" }, ngImport: i0, template: `
|
|
980
|
+
@if (isEditMode) {
|
|
981
|
+
<div [style]="style" data-testid="unknown-block-type">
|
|
982
|
+
<strong style="color: #c53030">Warning:</strong>
|
|
983
|
+
The block type
|
|
984
|
+
<strong>{{ node.type }}</strong>
|
|
985
|
+
is not recognized. Please check your
|
|
986
|
+
<a
|
|
987
|
+
href="https://dev.dotcms.com/docs/block-editor"
|
|
988
|
+
target="_blank"
|
|
989
|
+
rel="noopener noreferrer">
|
|
990
|
+
configuration
|
|
991
|
+
</a>
|
|
992
|
+
or contact support for assistance.
|
|
993
|
+
</div>
|
|
994
|
+
}
|
|
995
|
+
`, isInline: true }); }
|
|
996
|
+
}
|
|
997
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotUnknownBlockComponent, decorators: [{
|
|
998
|
+
type: Component,
|
|
999
|
+
args: [{
|
|
1000
|
+
selector: 'dotcms-block-editor-renderer-unknown',
|
|
1001
|
+
standalone: true,
|
|
1002
|
+
template: `
|
|
1003
|
+
@if (isEditMode) {
|
|
1004
|
+
<div [style]="style" data-testid="unknown-block-type">
|
|
1005
|
+
<strong style="color: #c53030">Warning:</strong>
|
|
1006
|
+
The block type
|
|
1007
|
+
<strong>{{ node.type }}</strong>
|
|
1008
|
+
is not recognized. Please check your
|
|
1009
|
+
<a
|
|
1010
|
+
href="https://dev.dotcms.com/docs/block-editor"
|
|
1011
|
+
target="_blank"
|
|
1012
|
+
rel="noopener noreferrer">
|
|
1013
|
+
configuration
|
|
1014
|
+
</a>
|
|
1015
|
+
or contact support for assistance.
|
|
1016
|
+
</div>
|
|
1017
|
+
}
|
|
1018
|
+
`
|
|
1019
|
+
}]
|
|
1020
|
+
}], propDecorators: { node: [{
|
|
1021
|
+
type: Input
|
|
1022
|
+
}] } });
|
|
1023
|
+
|
|
899
1024
|
class DotVideoBlock {
|
|
900
1025
|
constructor() {
|
|
901
1026
|
this.$srcURL = computed(() => this.attrs?.['src']);
|
|
@@ -947,7 +1072,7 @@ class DotCMSBlockEditorItemComponent {
|
|
|
947
1072
|
this.BLOCKS = BlockEditorDefaultBlocks;
|
|
948
1073
|
}
|
|
949
1074
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSBlockEditorItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
950
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: DotCMSBlockEditorItemComponent, isStandalone: true, selector: "dotcms-block-editor-renderer-block", inputs: { content: "content", customRenderers: "customRenderers" }, ngImport: i0, template: "@for (node of content; track node) {\n @if (customRenderers?.[node.type]) {\n <ng-container\n *ngTemplateOutlet=\"\n customRender;\n context: { customRender: customRenderers?.[node.type], node: node }\n \"></ng-container>\n } @else {\n @switch (node.type) {\n @case (BLOCKS.PARAGRAPH) {\n <dotcms-block-editor-renderer-paragraph [style]=\"node.attrs\">\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-paragraph>\n }\n\n @case (BLOCKS.TEXT) {\n <dotcms-block-editor-renderer-text [marks]=\"node.marks\" [text]=\"node.text || ''\" />\n }\n\n @case (BLOCKS.HEADING) {\n <dotcms-block-editor-renderer-heading\n [style]=\"node.attrs || {}\"\n [level]=\"node.attrs?.['level'] || '1'\">\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-heading>\n }\n\n @case (BLOCKS.BULLET_LIST) {\n <dotcms-block-editor-renderer-bullet-list>\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-bullet-list>\n }\n\n @case (BLOCKS.ORDERED_LIST) {\n <dotcms-block-editor-renderer-ordered-list>\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-ordered-list>\n }\n\n @case (BLOCKS.LIST_ITEM) {\n <dotcms-block-editor-renderer-list-item>\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-list-item>\n }\n\n @case (BLOCKS.BLOCK_QUOTE) {\n <dotcms-block-editor-renderer-block-quote>\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-block-quote>\n }\n\n @case (BLOCKS.CODE_BLOCK) {\n <dotcms-block-editor-renderer-code-block>\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-code-block>\n }\n\n @case (BLOCKS.HARDBREAK) {\n <br />\n }\n\n @case (BLOCKS.HORIZONTAL_RULE) {\n <hr />\n }\n\n @case (BLOCKS.DOT_IMAGE) {\n <dotcms-block-editor-renderer-image [attrs]=\"node.attrs || {}\" />\n }\n\n @case (BLOCKS.DOT_VIDEO) {\n <dotcms-block-editor-renderer-video [attrs]=\"node.attrs || {}\" />\n }\n\n @case (BLOCKS.TABLE) {\n <dotcms-block-editor-renderer-table [content]=\"node.content\" />\n }\n\n @case (BLOCKS.DOT_CONTENT) {\n <dotcms-block-editor-renderer-contentlet\n [attrs]=\"node.attrs || {}\"\n [customRenderers]=\"customRenderers\" />\n }\n\n @default {\n <
|
|
1075
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: DotCMSBlockEditorItemComponent, isStandalone: true, selector: "dotcms-block-editor-renderer-block", inputs: { content: "content", customRenderers: "customRenderers" }, ngImport: i0, template: "@for (node of content; track node) {\n @if (customRenderers?.[node.type]) {\n <ng-container\n *ngTemplateOutlet=\"\n customRender;\n context: { customRender: customRenderers?.[node.type], node: node }\n \"></ng-container>\n } @else {\n @switch (node.type) {\n @case (BLOCKS.PARAGRAPH) {\n <dotcms-block-editor-renderer-paragraph [style]=\"node.attrs\">\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-paragraph>\n }\n\n @case (BLOCKS.TEXT) {\n <dotcms-block-editor-renderer-text [marks]=\"node.marks\" [text]=\"node.text || ''\" />\n }\n\n @case (BLOCKS.HEADING) {\n <dotcms-block-editor-renderer-heading\n [style]=\"node.attrs || {}\"\n [level]=\"node.attrs?.['level'] || '1'\">\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-heading>\n }\n\n @case (BLOCKS.BULLET_LIST) {\n <dotcms-block-editor-renderer-bullet-list>\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-bullet-list>\n }\n\n @case (BLOCKS.ORDERED_LIST) {\n <dotcms-block-editor-renderer-ordered-list>\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-ordered-list>\n }\n\n @case (BLOCKS.LIST_ITEM) {\n <dotcms-block-editor-renderer-list-item>\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-list-item>\n }\n\n @case (BLOCKS.BLOCK_QUOTE) {\n <dotcms-block-editor-renderer-block-quote>\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-block-quote>\n }\n\n @case (BLOCKS.CODE_BLOCK) {\n <dotcms-block-editor-renderer-code-block>\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-code-block>\n }\n\n @case (BLOCKS.HARDBREAK) {\n <br />\n }\n\n @case (BLOCKS.HORIZONTAL_RULE) {\n <hr />\n }\n\n @case (BLOCKS.DOT_IMAGE) {\n <dotcms-block-editor-renderer-image [attrs]=\"node.attrs || {}\" />\n }\n\n @case (BLOCKS.DOT_VIDEO) {\n <dotcms-block-editor-renderer-video [attrs]=\"node.attrs || {}\" />\n }\n\n @case (BLOCKS.TABLE) {\n <dotcms-block-editor-renderer-table [content]=\"node.content\" />\n }\n\n @case (BLOCKS.DOT_CONTENT) {\n <dotcms-block-editor-renderer-contentlet\n [attrs]=\"node.attrs || {}\"\n [customRenderers]=\"customRenderers\" />\n }\n\n @default {\n <dotcms-block-editor-renderer-unknown [node]=\"node\" />\n }\n }\n }\n}\n\n<ng-template #customRender let-customRender=\"customRender\" let-node=\"node\">\n <ng-container\n *ngComponentOutlet=\"customRender | async; inputs: { content: node }\"></ng-container>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: DotCMSBlockEditorItemComponent, selector: "dotcms-block-editor-renderer-block", inputs: ["content", "customRenderers"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: DotParagraphBlock, selector: "dotcms-block-editor-renderer-paragraph" }, { kind: "component", type: DotTextBlock, selector: "dotcms-block-editor-renderer-text", inputs: ["marks", "text"] }, { kind: "component", type: DotHeadingBlock, selector: "dotcms-block-editor-renderer-heading", inputs: ["level"] }, { kind: "component", type: DotBulletList, selector: "dotcms-block-editor-renderer-bullet-list" }, { kind: "component", type: DotOrdererList, selector: "dotcms-block-editor-renderer-ordered-list" }, { kind: "component", type: DotListItem, selector: "dotcms-block-editor-renderer-list-item" }, { kind: "component", type: DotCodeBlock, selector: "dotcms-block-editor-renderer-code-block" }, { kind: "component", type: DotBlockQuote, selector: "dotcms-block-editor-renderer-block-quote" }, { kind: "component", type: DotImageBlock, selector: "dotcms-block-editor-renderer-image", inputs: ["attrs"] }, { kind: "component", type: DotVideoBlock, selector: "dotcms-block-editor-renderer-video", inputs: ["attrs"] }, { kind: "component", type: DotTableBlock, selector: "dotcms-block-editor-renderer-table", inputs: ["content"] }, { kind: "component", type: DotContentletBlock, selector: "dotcms-block-editor-renderer-contentlet", inputs: ["customRenderers", "attrs"] }, { kind: "component", type: DotUnknownBlockComponent, selector: "dotcms-block-editor-renderer-unknown", inputs: ["node"] }] }); }
|
|
951
1076
|
}
|
|
952
1077
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSBlockEditorItemComponent, decorators: [{
|
|
953
1078
|
type: Component,
|
|
@@ -966,8 +1091,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
|
|
|
966
1091
|
DotImageBlock,
|
|
967
1092
|
DotVideoBlock,
|
|
968
1093
|
DotTableBlock,
|
|
969
|
-
DotContentletBlock
|
|
970
|
-
|
|
1094
|
+
DotContentletBlock,
|
|
1095
|
+
DotUnknownBlockComponent
|
|
1096
|
+
], template: "@for (node of content; track node) {\n @if (customRenderers?.[node.type]) {\n <ng-container\n *ngTemplateOutlet=\"\n customRender;\n context: { customRender: customRenderers?.[node.type], node: node }\n \"></ng-container>\n } @else {\n @switch (node.type) {\n @case (BLOCKS.PARAGRAPH) {\n <dotcms-block-editor-renderer-paragraph [style]=\"node.attrs\">\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-paragraph>\n }\n\n @case (BLOCKS.TEXT) {\n <dotcms-block-editor-renderer-text [marks]=\"node.marks\" [text]=\"node.text || ''\" />\n }\n\n @case (BLOCKS.HEADING) {\n <dotcms-block-editor-renderer-heading\n [style]=\"node.attrs || {}\"\n [level]=\"node.attrs?.['level'] || '1'\">\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-heading>\n }\n\n @case (BLOCKS.BULLET_LIST) {\n <dotcms-block-editor-renderer-bullet-list>\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-bullet-list>\n }\n\n @case (BLOCKS.ORDERED_LIST) {\n <dotcms-block-editor-renderer-ordered-list>\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-ordered-list>\n }\n\n @case (BLOCKS.LIST_ITEM) {\n <dotcms-block-editor-renderer-list-item>\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-list-item>\n }\n\n @case (BLOCKS.BLOCK_QUOTE) {\n <dotcms-block-editor-renderer-block-quote>\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-block-quote>\n }\n\n @case (BLOCKS.CODE_BLOCK) {\n <dotcms-block-editor-renderer-code-block>\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-code-block>\n }\n\n @case (BLOCKS.HARDBREAK) {\n <br />\n }\n\n @case (BLOCKS.HORIZONTAL_RULE) {\n <hr />\n }\n\n @case (BLOCKS.DOT_IMAGE) {\n <dotcms-block-editor-renderer-image [attrs]=\"node.attrs || {}\" />\n }\n\n @case (BLOCKS.DOT_VIDEO) {\n <dotcms-block-editor-renderer-video [attrs]=\"node.attrs || {}\" />\n }\n\n @case (BLOCKS.TABLE) {\n <dotcms-block-editor-renderer-table [content]=\"node.content\" />\n }\n\n @case (BLOCKS.DOT_CONTENT) {\n <dotcms-block-editor-renderer-contentlet\n [attrs]=\"node.attrs || {}\"\n [customRenderers]=\"customRenderers\" />\n }\n\n @default {\n <dotcms-block-editor-renderer-unknown [node]=\"node\" />\n }\n }\n }\n}\n\n<ng-template #customRender let-customRender=\"customRender\" let-node=\"node\">\n <ng-container\n *ngComponentOutlet=\"customRender | async; inputs: { content: node }\"></ng-container>\n</ng-template>\n" }]
|
|
971
1097
|
}], propDecorators: { content: [{
|
|
972
1098
|
type: Input
|
|
973
1099
|
}], customRenderers: [{
|
|
@@ -1003,15 +1129,19 @@ class DotCMSBlockEditorRendererComponent {
|
|
|
1003
1129
|
this.$blockEditorState.set(isValidBlocks(this.blocks));
|
|
1004
1130
|
}
|
|
1005
1131
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSBlockEditorRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1006
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: DotCMSBlockEditorRendererComponent, isStandalone: true, selector: "dotcms-block-editor-renderer", inputs: { blocks: "blocks", customRenderers: "customRenderers" }, ngImport: i0, template: "@if ($blockEditorState().error && $isInEditMode()) {\n <div data-testid=\"invalid-blocks-message\">\n {{ $blockEditorState().error }}\n </div>\n} @else if (!$blockEditorState().error) {\n <dotcms-block-editor-renderer-block\n
|
|
1132
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: DotCMSBlockEditorRendererComponent, isStandalone: true, selector: "dotcms-block-editor-renderer", inputs: { blocks: "blocks", customRenderers: "customRenderers", class: "class", style: "style" }, ngImport: i0, template: "@if ($blockEditorState().error && $isInEditMode()) {\n <div data-testid=\"invalid-blocks-message\">\n {{ $blockEditorState().error }}\n </div>\n} @else if (!$blockEditorState().error) {\n <div [class]=\"class\" [style]=\"style\">\n <dotcms-block-editor-renderer-block\n [content]=\"blocks.content\"\n [customRenderers]=\"customRenderers\" />\n </div>\n}\n", styles: [""], dependencies: [{ kind: "component", type: DotCMSBlockEditorItemComponent, selector: "dotcms-block-editor-renderer-block", inputs: ["content", "customRenderers"] }] }); }
|
|
1007
1133
|
}
|
|
1008
1134
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSBlockEditorRendererComponent, decorators: [{
|
|
1009
1135
|
type: Component,
|
|
1010
|
-
args: [{ selector: 'dotcms-block-editor-renderer', standalone: true, imports: [DotCMSBlockEditorItemComponent], template: "@if ($blockEditorState().error && $isInEditMode()) {\n <div data-testid=\"invalid-blocks-message\">\n {{ $blockEditorState().error }}\n </div>\n} @else if (!$blockEditorState().error) {\n <dotcms-block-editor-renderer-block\n
|
|
1136
|
+
args: [{ selector: 'dotcms-block-editor-renderer', standalone: true, imports: [DotCMSBlockEditorItemComponent], template: "@if ($blockEditorState().error && $isInEditMode()) {\n <div data-testid=\"invalid-blocks-message\">\n {{ $blockEditorState().error }}\n </div>\n} @else if (!$blockEditorState().error) {\n <div [class]=\"class\" [style]=\"style\">\n <dotcms-block-editor-renderer-block\n [content]=\"blocks.content\"\n [customRenderers]=\"customRenderers\" />\n </div>\n}\n" }]
|
|
1011
1137
|
}], propDecorators: { blocks: [{
|
|
1012
1138
|
type: Input
|
|
1013
1139
|
}], customRenderers: [{
|
|
1014
1140
|
type: Input
|
|
1141
|
+
}], class: [{
|
|
1142
|
+
type: Input
|
|
1143
|
+
}], style: [{
|
|
1144
|
+
type: Input
|
|
1015
1145
|
}] } });
|
|
1016
1146
|
|
|
1017
1147
|
/**
|