@praxisui/rich-content 8.0.0-beta.12 → 8.0.0-beta.13
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.
|
@@ -2333,7 +2333,7 @@ class PraxisRichContentConfigEditor {
|
|
|
2333
2333
|
|
|
2334
2334
|
@if (parsedDocument?.nodes?.length) {
|
|
2335
2335
|
<div class="prx-rich-editor__node-list">
|
|
2336
|
-
@for (node of parsedDocument?.nodes ?? []; track node.id ?? $index) {
|
|
2336
|
+
@for (node of parsedDocument?.nodes ?? []; track node.id ?? $index; let nodeIndex = $index) {
|
|
2337
2337
|
<article
|
|
2338
2338
|
class="prx-rich-editor__node-card"
|
|
2339
2339
|
[attr.data-rich-editor-node-type]="node.type"
|
|
@@ -2573,15 +2573,15 @@ class PraxisRichContentConfigEditor {
|
|
|
2573
2573
|
<div class="prx-rich-editor__nested-node">
|
|
2574
2574
|
<div class="prx-rich-editor__nested-actions">
|
|
2575
2575
|
<strong>{{ tx('editor.item', 'Item') }} {{ itemIndex + 1 }}</strong>
|
|
2576
|
-
@if (isRemovalPending('nodes.' +
|
|
2577
|
-
<button type="button" (click)="confirmComposeItemRemoval(
|
|
2576
|
+
@if (isRemovalPending('nodes.' + nodeIndex + '.items', itemIndex)) {
|
|
2577
|
+
<button type="button" (click)="confirmComposeItemRemoval(nodeIndex, itemIndex)">
|
|
2578
2578
|
{{ tx('editor.confirmRemove', 'Confirm remove') }}
|
|
2579
2579
|
</button>
|
|
2580
2580
|
<button type="button" (click)="cancelRemoval()">
|
|
2581
2581
|
{{ tx('editor.cancelRemove', 'Cancel') }}
|
|
2582
2582
|
</button>
|
|
2583
2583
|
} @else {
|
|
2584
|
-
<button type="button" (click)="requestNestedRemoval('nodes.' +
|
|
2584
|
+
<button type="button" (click)="requestNestedRemoval('nodes.' + nodeIndex + '.items', itemIndex)">
|
|
2585
2585
|
{{ tx('editor.removeBlock', 'Remove') }}
|
|
2586
2586
|
</button>
|
|
2587
2587
|
}
|
|
@@ -2591,7 +2591,7 @@ class PraxisRichContentConfigEditor {
|
|
|
2591
2591
|
<span>{{ tx('editor.blockType', 'Block type') }}</span>
|
|
2592
2592
|
<select
|
|
2593
2593
|
[ngModel]="item.type"
|
|
2594
|
-
(ngModelChange)="changeComposeItemType(
|
|
2594
|
+
(ngModelChange)="changeComposeItemType(nodeIndex, itemIndex, $event)"
|
|
2595
2595
|
>
|
|
2596
2596
|
@for (type of presenterNodeTypes; track type) {
|
|
2597
2597
|
<option [value]="type">{{ tx('editor.nodeType.' + type, type) }}</option>
|
|
@@ -2601,9 +2601,9 @@ class PraxisRichContentConfigEditor {
|
|
|
2601
2601
|
<ng-container
|
|
2602
2602
|
*ngTemplateOutlet="presenterFields; context: {
|
|
2603
2603
|
node: item,
|
|
2604
|
-
path: '$.nodes[' +
|
|
2605
|
-
setString: setComposeItemStringField.bind(this,
|
|
2606
|
-
setNumber: setComposeItemNumberField.bind(this,
|
|
2604
|
+
path: '$.nodes[' + nodeIndex + '].items[' + itemIndex + ']',
|
|
2605
|
+
setString: setComposeItemStringField.bind(this, nodeIndex, itemIndex),
|
|
2606
|
+
setNumber: setComposeItemNumberField.bind(this, nodeIndex, itemIndex)
|
|
2607
2607
|
}"
|
|
2608
2608
|
></ng-container>
|
|
2609
2609
|
</div>
|
|
@@ -2637,15 +2637,15 @@ class PraxisRichContentConfigEditor {
|
|
|
2637
2637
|
<div class="prx-rich-editor__nested-node">
|
|
2638
2638
|
<div class="prx-rich-editor__nested-actions">
|
|
2639
2639
|
<strong>{{ tx('editor.item', 'Item') }} {{ itemIndex + 1 }}</strong>
|
|
2640
|
-
@if (isRemovalPending('nodes.' +
|
|
2641
|
-
<button type="button" (click)="confirmCardContentRemoval(
|
|
2640
|
+
@if (isRemovalPending('nodes.' + nodeIndex + '.content', itemIndex)) {
|
|
2641
|
+
<button type="button" (click)="confirmCardContentRemoval(nodeIndex, itemIndex)">
|
|
2642
2642
|
{{ tx('editor.confirmRemove', 'Confirm remove') }}
|
|
2643
2643
|
</button>
|
|
2644
2644
|
<button type="button" (click)="cancelRemoval()">
|
|
2645
2645
|
{{ tx('editor.cancelRemove', 'Cancel') }}
|
|
2646
2646
|
</button>
|
|
2647
2647
|
} @else {
|
|
2648
|
-
<button type="button" (click)="requestNestedRemoval('nodes.' +
|
|
2648
|
+
<button type="button" (click)="requestNestedRemoval('nodes.' + nodeIndex + '.content', itemIndex)">
|
|
2649
2649
|
{{ tx('editor.removeBlock', 'Remove') }}
|
|
2650
2650
|
</button>
|
|
2651
2651
|
}
|
|
@@ -2655,7 +2655,7 @@ class PraxisRichContentConfigEditor {
|
|
|
2655
2655
|
<span>{{ tx('editor.blockType', 'Block type') }}</span>
|
|
2656
2656
|
<select
|
|
2657
2657
|
[ngModel]="isCardContentEditable(item.type) ? item.type : 'text'"
|
|
2658
|
-
(ngModelChange)="changeCardContentType(
|
|
2658
|
+
(ngModelChange)="changeCardContentType(nodeIndex, itemIndex, $event)"
|
|
2659
2659
|
[disabled]="!isCardContentEditable(item.type)"
|
|
2660
2660
|
>
|
|
2661
2661
|
@for (type of cardContentNodeTypes; track type) {
|
|
@@ -2667,9 +2667,9 @@ class PraxisRichContentConfigEditor {
|
|
|
2667
2667
|
<ng-container
|
|
2668
2668
|
*ngTemplateOutlet="presenterFields; context: {
|
|
2669
2669
|
node: item,
|
|
2670
|
-
path: '$.nodes[' +
|
|
2671
|
-
setString: setCardContentStringField.bind(this,
|
|
2672
|
-
setNumber: setCardContentNumberField.bind(this,
|
|
2670
|
+
path: '$.nodes[' + nodeIndex + '].content[' + itemIndex + ']',
|
|
2671
|
+
setString: setCardContentStringField.bind(this, nodeIndex, itemIndex),
|
|
2672
|
+
setNumber: setCardContentNumberField.bind(this, nodeIndex, itemIndex)
|
|
2673
2673
|
}"
|
|
2674
2674
|
></ng-container>
|
|
2675
2675
|
} @else {
|
|
@@ -2734,15 +2734,15 @@ class PraxisRichContentConfigEditor {
|
|
|
2734
2734
|
<div class="prx-rich-editor__nested-node">
|
|
2735
2735
|
<div class="prx-rich-editor__nested-actions">
|
|
2736
2736
|
<strong>{{ tx('editor.item', 'Item') }} {{ itemIndex + 1 }}</strong>
|
|
2737
|
-
@if (isRemovalPending('nodes.' +
|
|
2738
|
-
<button type="button" (click)="confirmTimelineItemRemoval(
|
|
2737
|
+
@if (isRemovalPending('nodes.' + nodeIndex + '.timelineItems', itemIndex)) {
|
|
2738
|
+
<button type="button" (click)="confirmTimelineItemRemoval(nodeIndex, itemIndex)">
|
|
2739
2739
|
{{ tx('editor.confirmRemove', 'Confirm remove') }}
|
|
2740
2740
|
</button>
|
|
2741
2741
|
<button type="button" (click)="cancelRemoval()">
|
|
2742
2742
|
{{ tx('editor.cancelRemove', 'Cancel') }}
|
|
2743
2743
|
</button>
|
|
2744
2744
|
} @else {
|
|
2745
|
-
<button type="button" (click)="requestNestedRemoval('nodes.' +
|
|
2745
|
+
<button type="button" (click)="requestNestedRemoval('nodes.' + nodeIndex + '.timelineItems', itemIndex)">
|
|
2746
2746
|
{{ tx('editor.removeBlock', 'Remove') }}
|
|
2747
2747
|
</button>
|
|
2748
2748
|
}
|
|
@@ -2751,29 +2751,29 @@ class PraxisRichContentConfigEditor {
|
|
|
2751
2751
|
<label>
|
|
2752
2752
|
<span>{{ tx('editor.field.title', 'Title') }}</span>
|
|
2753
2753
|
<input
|
|
2754
|
-
[ngModel]="getTimelineItemField(
|
|
2755
|
-
(ngModelChange)="setTimelineItemField(
|
|
2754
|
+
[ngModel]="getTimelineItemField(nodeIndex, itemIndex, 'title')"
|
|
2755
|
+
(ngModelChange)="setTimelineItemField(nodeIndex, itemIndex, 'title', $event)"
|
|
2756
2756
|
/>
|
|
2757
2757
|
</label>
|
|
2758
2758
|
<label>
|
|
2759
2759
|
<span>{{ tx('editor.field.subtitle', 'Subtitle') }}</span>
|
|
2760
2760
|
<input
|
|
2761
|
-
[ngModel]="getTimelineItemField(
|
|
2762
|
-
(ngModelChange)="setTimelineItemField(
|
|
2761
|
+
[ngModel]="getTimelineItemField(nodeIndex, itemIndex, 'subtitle')"
|
|
2762
|
+
(ngModelChange)="setTimelineItemField(nodeIndex, itemIndex, 'subtitle', $event)"
|
|
2763
2763
|
/>
|
|
2764
2764
|
</label>
|
|
2765
2765
|
<label>
|
|
2766
2766
|
<span>{{ tx('editor.field.badge', 'Badge') }}</span>
|
|
2767
2767
|
<input
|
|
2768
|
-
[ngModel]="getTimelineItemField(
|
|
2769
|
-
(ngModelChange)="setTimelineItemField(
|
|
2768
|
+
[ngModel]="getTimelineItemField(nodeIndex, itemIndex, 'badge')"
|
|
2769
|
+
(ngModelChange)="setTimelineItemField(nodeIndex, itemIndex, 'badge', $event)"
|
|
2770
2770
|
/>
|
|
2771
2771
|
</label>
|
|
2772
2772
|
<label>
|
|
2773
2773
|
<span>{{ tx('editor.field.icon', 'Icon') }}</span>
|
|
2774
2774
|
<input
|
|
2775
|
-
[ngModel]="getTimelineItemField(
|
|
2776
|
-
(ngModelChange)="setTimelineItemField(
|
|
2775
|
+
[ngModel]="getTimelineItemField(nodeIndex, itemIndex, 'icon')"
|
|
2776
|
+
(ngModelChange)="setTimelineItemField(nodeIndex, itemIndex, 'icon', $event)"
|
|
2777
2777
|
[placeholder]="tx('editor.placeholder.icon', 'check_circle')"
|
|
2778
2778
|
/>
|
|
2779
2779
|
</label>
|
|
@@ -3188,7 +3188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
3188
3188
|
|
|
3189
3189
|
@if (parsedDocument?.nodes?.length) {
|
|
3190
3190
|
<div class="prx-rich-editor__node-list">
|
|
3191
|
-
@for (node of parsedDocument?.nodes ?? []; track node.id ?? $index) {
|
|
3191
|
+
@for (node of parsedDocument?.nodes ?? []; track node.id ?? $index; let nodeIndex = $index) {
|
|
3192
3192
|
<article
|
|
3193
3193
|
class="prx-rich-editor__node-card"
|
|
3194
3194
|
[attr.data-rich-editor-node-type]="node.type"
|
|
@@ -3428,15 +3428,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
3428
3428
|
<div class="prx-rich-editor__nested-node">
|
|
3429
3429
|
<div class="prx-rich-editor__nested-actions">
|
|
3430
3430
|
<strong>{{ tx('editor.item', 'Item') }} {{ itemIndex + 1 }}</strong>
|
|
3431
|
-
@if (isRemovalPending('nodes.' +
|
|
3432
|
-
<button type="button" (click)="confirmComposeItemRemoval(
|
|
3431
|
+
@if (isRemovalPending('nodes.' + nodeIndex + '.items', itemIndex)) {
|
|
3432
|
+
<button type="button" (click)="confirmComposeItemRemoval(nodeIndex, itemIndex)">
|
|
3433
3433
|
{{ tx('editor.confirmRemove', 'Confirm remove') }}
|
|
3434
3434
|
</button>
|
|
3435
3435
|
<button type="button" (click)="cancelRemoval()">
|
|
3436
3436
|
{{ tx('editor.cancelRemove', 'Cancel') }}
|
|
3437
3437
|
</button>
|
|
3438
3438
|
} @else {
|
|
3439
|
-
<button type="button" (click)="requestNestedRemoval('nodes.' +
|
|
3439
|
+
<button type="button" (click)="requestNestedRemoval('nodes.' + nodeIndex + '.items', itemIndex)">
|
|
3440
3440
|
{{ tx('editor.removeBlock', 'Remove') }}
|
|
3441
3441
|
</button>
|
|
3442
3442
|
}
|
|
@@ -3446,7 +3446,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
3446
3446
|
<span>{{ tx('editor.blockType', 'Block type') }}</span>
|
|
3447
3447
|
<select
|
|
3448
3448
|
[ngModel]="item.type"
|
|
3449
|
-
(ngModelChange)="changeComposeItemType(
|
|
3449
|
+
(ngModelChange)="changeComposeItemType(nodeIndex, itemIndex, $event)"
|
|
3450
3450
|
>
|
|
3451
3451
|
@for (type of presenterNodeTypes; track type) {
|
|
3452
3452
|
<option [value]="type">{{ tx('editor.nodeType.' + type, type) }}</option>
|
|
@@ -3456,9 +3456,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
3456
3456
|
<ng-container
|
|
3457
3457
|
*ngTemplateOutlet="presenterFields; context: {
|
|
3458
3458
|
node: item,
|
|
3459
|
-
path: '$.nodes[' +
|
|
3460
|
-
setString: setComposeItemStringField.bind(this,
|
|
3461
|
-
setNumber: setComposeItemNumberField.bind(this,
|
|
3459
|
+
path: '$.nodes[' + nodeIndex + '].items[' + itemIndex + ']',
|
|
3460
|
+
setString: setComposeItemStringField.bind(this, nodeIndex, itemIndex),
|
|
3461
|
+
setNumber: setComposeItemNumberField.bind(this, nodeIndex, itemIndex)
|
|
3462
3462
|
}"
|
|
3463
3463
|
></ng-container>
|
|
3464
3464
|
</div>
|
|
@@ -3492,15 +3492,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
3492
3492
|
<div class="prx-rich-editor__nested-node">
|
|
3493
3493
|
<div class="prx-rich-editor__nested-actions">
|
|
3494
3494
|
<strong>{{ tx('editor.item', 'Item') }} {{ itemIndex + 1 }}</strong>
|
|
3495
|
-
@if (isRemovalPending('nodes.' +
|
|
3496
|
-
<button type="button" (click)="confirmCardContentRemoval(
|
|
3495
|
+
@if (isRemovalPending('nodes.' + nodeIndex + '.content', itemIndex)) {
|
|
3496
|
+
<button type="button" (click)="confirmCardContentRemoval(nodeIndex, itemIndex)">
|
|
3497
3497
|
{{ tx('editor.confirmRemove', 'Confirm remove') }}
|
|
3498
3498
|
</button>
|
|
3499
3499
|
<button type="button" (click)="cancelRemoval()">
|
|
3500
3500
|
{{ tx('editor.cancelRemove', 'Cancel') }}
|
|
3501
3501
|
</button>
|
|
3502
3502
|
} @else {
|
|
3503
|
-
<button type="button" (click)="requestNestedRemoval('nodes.' +
|
|
3503
|
+
<button type="button" (click)="requestNestedRemoval('nodes.' + nodeIndex + '.content', itemIndex)">
|
|
3504
3504
|
{{ tx('editor.removeBlock', 'Remove') }}
|
|
3505
3505
|
</button>
|
|
3506
3506
|
}
|
|
@@ -3510,7 +3510,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
3510
3510
|
<span>{{ tx('editor.blockType', 'Block type') }}</span>
|
|
3511
3511
|
<select
|
|
3512
3512
|
[ngModel]="isCardContentEditable(item.type) ? item.type : 'text'"
|
|
3513
|
-
(ngModelChange)="changeCardContentType(
|
|
3513
|
+
(ngModelChange)="changeCardContentType(nodeIndex, itemIndex, $event)"
|
|
3514
3514
|
[disabled]="!isCardContentEditable(item.type)"
|
|
3515
3515
|
>
|
|
3516
3516
|
@for (type of cardContentNodeTypes; track type) {
|
|
@@ -3522,9 +3522,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
3522
3522
|
<ng-container
|
|
3523
3523
|
*ngTemplateOutlet="presenterFields; context: {
|
|
3524
3524
|
node: item,
|
|
3525
|
-
path: '$.nodes[' +
|
|
3526
|
-
setString: setCardContentStringField.bind(this,
|
|
3527
|
-
setNumber: setCardContentNumberField.bind(this,
|
|
3525
|
+
path: '$.nodes[' + nodeIndex + '].content[' + itemIndex + ']',
|
|
3526
|
+
setString: setCardContentStringField.bind(this, nodeIndex, itemIndex),
|
|
3527
|
+
setNumber: setCardContentNumberField.bind(this, nodeIndex, itemIndex)
|
|
3528
3528
|
}"
|
|
3529
3529
|
></ng-container>
|
|
3530
3530
|
} @else {
|
|
@@ -3589,15 +3589,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
3589
3589
|
<div class="prx-rich-editor__nested-node">
|
|
3590
3590
|
<div class="prx-rich-editor__nested-actions">
|
|
3591
3591
|
<strong>{{ tx('editor.item', 'Item') }} {{ itemIndex + 1 }}</strong>
|
|
3592
|
-
@if (isRemovalPending('nodes.' +
|
|
3593
|
-
<button type="button" (click)="confirmTimelineItemRemoval(
|
|
3592
|
+
@if (isRemovalPending('nodes.' + nodeIndex + '.timelineItems', itemIndex)) {
|
|
3593
|
+
<button type="button" (click)="confirmTimelineItemRemoval(nodeIndex, itemIndex)">
|
|
3594
3594
|
{{ tx('editor.confirmRemove', 'Confirm remove') }}
|
|
3595
3595
|
</button>
|
|
3596
3596
|
<button type="button" (click)="cancelRemoval()">
|
|
3597
3597
|
{{ tx('editor.cancelRemove', 'Cancel') }}
|
|
3598
3598
|
</button>
|
|
3599
3599
|
} @else {
|
|
3600
|
-
<button type="button" (click)="requestNestedRemoval('nodes.' +
|
|
3600
|
+
<button type="button" (click)="requestNestedRemoval('nodes.' + nodeIndex + '.timelineItems', itemIndex)">
|
|
3601
3601
|
{{ tx('editor.removeBlock', 'Remove') }}
|
|
3602
3602
|
</button>
|
|
3603
3603
|
}
|
|
@@ -3606,29 +3606,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
3606
3606
|
<label>
|
|
3607
3607
|
<span>{{ tx('editor.field.title', 'Title') }}</span>
|
|
3608
3608
|
<input
|
|
3609
|
-
[ngModel]="getTimelineItemField(
|
|
3610
|
-
(ngModelChange)="setTimelineItemField(
|
|
3609
|
+
[ngModel]="getTimelineItemField(nodeIndex, itemIndex, 'title')"
|
|
3610
|
+
(ngModelChange)="setTimelineItemField(nodeIndex, itemIndex, 'title', $event)"
|
|
3611
3611
|
/>
|
|
3612
3612
|
</label>
|
|
3613
3613
|
<label>
|
|
3614
3614
|
<span>{{ tx('editor.field.subtitle', 'Subtitle') }}</span>
|
|
3615
3615
|
<input
|
|
3616
|
-
[ngModel]="getTimelineItemField(
|
|
3617
|
-
(ngModelChange)="setTimelineItemField(
|
|
3616
|
+
[ngModel]="getTimelineItemField(nodeIndex, itemIndex, 'subtitle')"
|
|
3617
|
+
(ngModelChange)="setTimelineItemField(nodeIndex, itemIndex, 'subtitle', $event)"
|
|
3618
3618
|
/>
|
|
3619
3619
|
</label>
|
|
3620
3620
|
<label>
|
|
3621
3621
|
<span>{{ tx('editor.field.badge', 'Badge') }}</span>
|
|
3622
3622
|
<input
|
|
3623
|
-
[ngModel]="getTimelineItemField(
|
|
3624
|
-
(ngModelChange)="setTimelineItemField(
|
|
3623
|
+
[ngModel]="getTimelineItemField(nodeIndex, itemIndex, 'badge')"
|
|
3624
|
+
(ngModelChange)="setTimelineItemField(nodeIndex, itemIndex, 'badge', $event)"
|
|
3625
3625
|
/>
|
|
3626
3626
|
</label>
|
|
3627
3627
|
<label>
|
|
3628
3628
|
<span>{{ tx('editor.field.icon', 'Icon') }}</span>
|
|
3629
3629
|
<input
|
|
3630
|
-
[ngModel]="getTimelineItemField(
|
|
3631
|
-
(ngModelChange)="setTimelineItemField(
|
|
3630
|
+
[ngModel]="getTimelineItemField(nodeIndex, itemIndex, 'icon')"
|
|
3631
|
+
(ngModelChange)="setTimelineItemField(nodeIndex, itemIndex, 'icon', $event)"
|
|
3632
3632
|
[placeholder]="tx('editor.placeholder.icon', 'check_circle')"
|
|
3633
3633
|
/>
|
|
3634
3634
|
</label>
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@praxisui/rich-content",
|
|
3
|
-
"version": "8.0.0-beta.
|
|
3
|
+
"version": "8.0.0-beta.13",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": "^20.3.0",
|
|
6
6
|
"@angular/core": "^20.3.0",
|
|
7
|
-
"@praxisui/core": "^8.0.0-beta.
|
|
7
|
+
"@praxisui/core": "^8.0.0-beta.13"
|
|
8
8
|
},
|
|
9
9
|
"dependencies": {
|
|
10
10
|
"tslib": "^2.3.0"
|