@praxisui/rich-content 0.0.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/README.md +63 -0
- package/fesm2022/praxisui-rich-content.mjs +401 -0
- package/index.d.ts +79 -0
- package/package.json +24 -0
package/README.md
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
# PraxisRichContent
|
|
2
|
+
|
|
3
|
+
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
|
|
4
|
+
|
|
5
|
+
## Code scaffolding
|
|
6
|
+
|
|
7
|
+
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
ng generate component component-name
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
ng generate --help
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Building
|
|
20
|
+
|
|
21
|
+
To build the library, run:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
ng build praxis-rich-content
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
|
|
28
|
+
|
|
29
|
+
### Publishing the Library
|
|
30
|
+
|
|
31
|
+
Once the project is built, you can publish your library by following these steps:
|
|
32
|
+
|
|
33
|
+
1. Navigate to the `dist` directory:
|
|
34
|
+
```bash
|
|
35
|
+
cd dist/praxis-rich-content
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
2. Run the `npm publish` command to publish your library to the npm registry:
|
|
39
|
+
```bash
|
|
40
|
+
npm publish
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Running unit tests
|
|
44
|
+
|
|
45
|
+
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
ng test
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Running end-to-end tests
|
|
52
|
+
|
|
53
|
+
For end-to-end (e2e) testing, run:
|
|
54
|
+
|
|
55
|
+
```bash
|
|
56
|
+
ng e2e
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
|
60
|
+
|
|
61
|
+
## Additional Resources
|
|
62
|
+
|
|
63
|
+
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
|
@@ -0,0 +1,401 @@
|
|
|
1
|
+
import * as i1 from '@angular/common';
|
|
2
|
+
import { CommonModule } from '@angular/common';
|
|
3
|
+
import * as i0 from '@angular/core';
|
|
4
|
+
import { InjectionToken, inject, Injectable, input, computed, Input, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
5
|
+
import { PraxisJsonLogicService } from '@praxisui/core';
|
|
6
|
+
|
|
7
|
+
const PRAXIS_RICH_BLOCK_PRESETS = new InjectionToken('PRAXIS_RICH_BLOCK_PRESETS');
|
|
8
|
+
class RichContentPresetRegistryService {
|
|
9
|
+
presetDefinitions = inject(PRAXIS_RICH_BLOCK_PRESETS, { optional: true }) ?? [];
|
|
10
|
+
list() {
|
|
11
|
+
return this.presetDefinitions.slice();
|
|
12
|
+
}
|
|
13
|
+
get(ref) {
|
|
14
|
+
return (this.presetDefinitions.find((preset) => preset.ref.kind === ref.kind &&
|
|
15
|
+
preset.ref.namespace === ref.namespace &&
|
|
16
|
+
preset.ref.presetId === ref.presetId &&
|
|
17
|
+
(preset.ref.version ?? null) === (ref.version ?? null)) ?? null);
|
|
18
|
+
}
|
|
19
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: RichContentPresetRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
20
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: RichContentPresetRegistryService, providedIn: 'root' });
|
|
21
|
+
}
|
|
22
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: RichContentPresetRegistryService, decorators: [{
|
|
23
|
+
type: Injectable,
|
|
24
|
+
args: [{ providedIn: 'root' }]
|
|
25
|
+
}] });
|
|
26
|
+
|
|
27
|
+
class PraxisRichContent {
|
|
28
|
+
jsonLogic = inject(PraxisJsonLogicService);
|
|
29
|
+
presetRegistry = inject(RichContentPresetRegistryService);
|
|
30
|
+
document = input(null, ...(ngDevMode ? [{ debugName: "document" }] : []));
|
|
31
|
+
nodes = input(null, ...(ngDevMode ? [{ debugName: "nodes" }] : []));
|
|
32
|
+
context = input(null, ...(ngDevMode ? [{ debugName: "context" }] : []));
|
|
33
|
+
hostCapabilities = input(null, ...(ngDevMode ? [{ debugName: "hostCapabilities" }] : []));
|
|
34
|
+
rootClassName = '';
|
|
35
|
+
renderableNodes = computed(() => {
|
|
36
|
+
const explicitNodes = this.nodes();
|
|
37
|
+
if (explicitNodes) {
|
|
38
|
+
return explicitNodes;
|
|
39
|
+
}
|
|
40
|
+
return (this.document()?.nodes ?? []);
|
|
41
|
+
}, ...(ngDevMode ? [{ debugName: "renderableNodes" }] : []));
|
|
42
|
+
isNodeVisible(node) {
|
|
43
|
+
if (!node.visibleWhen) {
|
|
44
|
+
return true;
|
|
45
|
+
}
|
|
46
|
+
return !!this.jsonLogic.evaluate(node.visibleWhen, this.buildEvaluationContext());
|
|
47
|
+
}
|
|
48
|
+
resolveNodeClasses(node) {
|
|
49
|
+
const classes = new Set();
|
|
50
|
+
if (node.className) {
|
|
51
|
+
classes.add(node.className);
|
|
52
|
+
}
|
|
53
|
+
for (const rule of node.classWhen ?? []) {
|
|
54
|
+
if (this.jsonLogic.evaluate(rule.expr, this.buildEvaluationContext())) {
|
|
55
|
+
classes.add(rule.className);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
return Array.from(classes);
|
|
59
|
+
}
|
|
60
|
+
resolveNodeStyles(node) {
|
|
61
|
+
const styles = { ...(node.style ?? {}) };
|
|
62
|
+
for (const rule of node.styleWhen ?? []) {
|
|
63
|
+
if (this.jsonLogic.evaluate(rule.expr, this.buildEvaluationContext())) {
|
|
64
|
+
Object.assign(styles, rule.style);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
return styles;
|
|
68
|
+
}
|
|
69
|
+
resolveText(node) {
|
|
70
|
+
return this.resolveValue(node.textExpr) ?? node.text ?? '';
|
|
71
|
+
}
|
|
72
|
+
resolveImageSrc(node) {
|
|
73
|
+
return this.resolveValue(node.srcExpr) ?? node.src ?? '';
|
|
74
|
+
}
|
|
75
|
+
resolveImageAlt(node) {
|
|
76
|
+
return this.resolveValue(node.altExpr) ?? node.alt ?? '';
|
|
77
|
+
}
|
|
78
|
+
resolveBadgeLabel(node) {
|
|
79
|
+
return this.resolveValue(node.labelExpr) ?? node.label ?? '';
|
|
80
|
+
}
|
|
81
|
+
resolveAvatarLabel(node) {
|
|
82
|
+
return (this.resolveValue(node.nameExpr) ??
|
|
83
|
+
node.name ??
|
|
84
|
+
this.resolveValue(node.initialsExpr) ??
|
|
85
|
+
node.initials ??
|
|
86
|
+
'');
|
|
87
|
+
}
|
|
88
|
+
resolveAvatarImage(node) {
|
|
89
|
+
return this.resolveValue(node.imageSrcExpr) ?? node.imageSrc ?? null;
|
|
90
|
+
}
|
|
91
|
+
resolveAvatarFallback(node) {
|
|
92
|
+
const explicitFallback = this.resolveValue(node.initialsExpr) ?? node.initials ?? '';
|
|
93
|
+
if (explicitFallback) {
|
|
94
|
+
return explicitFallback;
|
|
95
|
+
}
|
|
96
|
+
return this.resolveInitials(this.resolveAvatarLabel(node));
|
|
97
|
+
}
|
|
98
|
+
resolveMetricValue(node) {
|
|
99
|
+
const value = this.resolveValue(node.valueExpr);
|
|
100
|
+
return value == null ? '' : String(value);
|
|
101
|
+
}
|
|
102
|
+
resolveMetricCaption(node) {
|
|
103
|
+
return this.resolveValue(node.captionExpr) ?? null;
|
|
104
|
+
}
|
|
105
|
+
resolveProgressValue(node) {
|
|
106
|
+
const value = this.resolveValue(node.valueExpr);
|
|
107
|
+
return typeof value === 'number' ? value : Number(value ?? 0);
|
|
108
|
+
}
|
|
109
|
+
resolveProgressLabel(node) {
|
|
110
|
+
return this.resolveValue(node.labelExpr) ?? node.label ?? null;
|
|
111
|
+
}
|
|
112
|
+
resolveComposeGap(node) {
|
|
113
|
+
switch (node.gap) {
|
|
114
|
+
case 'xs':
|
|
115
|
+
return '4px';
|
|
116
|
+
case 'sm':
|
|
117
|
+
return '8px';
|
|
118
|
+
case 'lg':
|
|
119
|
+
return '16px';
|
|
120
|
+
case 'xl':
|
|
121
|
+
return '20px';
|
|
122
|
+
case 'md':
|
|
123
|
+
default:
|
|
124
|
+
return '12px';
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
resolveCardTitle(node) {
|
|
128
|
+
return this.resolveValue(node.titleExpr) ?? node.title ?? null;
|
|
129
|
+
}
|
|
130
|
+
resolveCardSubtitle(node) {
|
|
131
|
+
return this.resolveValue(node.subtitleExpr) ?? node.subtitle ?? null;
|
|
132
|
+
}
|
|
133
|
+
resolvePresetNodes(node) {
|
|
134
|
+
const localPreset = this.presetRegistry.get(node.ref);
|
|
135
|
+
if (localPreset) {
|
|
136
|
+
return localPreset.document.nodes;
|
|
137
|
+
}
|
|
138
|
+
const hostResolved = this.hostCapabilities()?.resolvePreset?.(node.ref);
|
|
139
|
+
return hostResolved?.nodes;
|
|
140
|
+
}
|
|
141
|
+
buildEvaluationContext() {
|
|
142
|
+
return this.context() ?? {};
|
|
143
|
+
}
|
|
144
|
+
resolveValue(expression) {
|
|
145
|
+
if (!expression) {
|
|
146
|
+
return null;
|
|
147
|
+
}
|
|
148
|
+
const templateMatch = /^\$\{(.+)\}$/.exec(expression.trim());
|
|
149
|
+
const path = templateMatch?.[1]?.trim() ?? expression.trim();
|
|
150
|
+
const value = this.getByPath(this.buildEvaluationContext(), path);
|
|
151
|
+
return value == null ? null : String(value);
|
|
152
|
+
}
|
|
153
|
+
getByPath(source, path) {
|
|
154
|
+
return path.split('.').reduce((acc, segment) => {
|
|
155
|
+
if (acc == null || typeof acc !== 'object') {
|
|
156
|
+
return undefined;
|
|
157
|
+
}
|
|
158
|
+
return acc[segment];
|
|
159
|
+
}, source);
|
|
160
|
+
}
|
|
161
|
+
resolveInitials(label) {
|
|
162
|
+
return label
|
|
163
|
+
.split(/\s+/)
|
|
164
|
+
.filter(Boolean)
|
|
165
|
+
.slice(0, 2)
|
|
166
|
+
.map((part) => part[0]?.toUpperCase() ?? '')
|
|
167
|
+
.join('');
|
|
168
|
+
}
|
|
169
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisRichContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
170
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisRichContent, isStandalone: true, selector: "praxis-rich-content", inputs: { document: { classPropertyName: "document", publicName: "document", isSignal: true, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, hostCapabilities: { classPropertyName: "hostCapabilities", publicName: "hostCapabilities", isSignal: true, isRequired: false, transformFunction: null }, rootClassName: { classPropertyName: "rootClassName", publicName: "rootClassName", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
171
|
+
<div class="prx-rich-content-root" [ngClass]="rootClassName">
|
|
172
|
+
<ng-container
|
|
173
|
+
*ngTemplateOutlet="renderNodes; context: { $implicit: renderableNodes() }"
|
|
174
|
+
></ng-container>
|
|
175
|
+
</div>
|
|
176
|
+
|
|
177
|
+
<ng-template #renderNodes let-nodes>
|
|
178
|
+
@for (node of nodes; track node.id ?? $index) {
|
|
179
|
+
@if (isNodeVisible(node)) {
|
|
180
|
+
<div
|
|
181
|
+
class="prx-rich-node"
|
|
182
|
+
[attr.data-rich-node-type]="node.type"
|
|
183
|
+
[attr.data-rich-node-id]="node.id || null"
|
|
184
|
+
[attr.data-testid]="node.testId || null"
|
|
185
|
+
[ngClass]="resolveNodeClasses(node)"
|
|
186
|
+
[ngStyle]="resolveNodeStyles(node)"
|
|
187
|
+
>
|
|
188
|
+
@switch (node.type) {
|
|
189
|
+
@case ('text') {
|
|
190
|
+
<span class="prx-rich-text">{{ resolveText(node) }}</span>
|
|
191
|
+
}
|
|
192
|
+
@case ('icon') {
|
|
193
|
+
<span
|
|
194
|
+
class="prx-rich-icon material-symbols-outlined"
|
|
195
|
+
[attr.aria-label]="node.ariaLabel || null"
|
|
196
|
+
>
|
|
197
|
+
{{ node.icon }}
|
|
198
|
+
</span>
|
|
199
|
+
}
|
|
200
|
+
@case ('image') {
|
|
201
|
+
<img
|
|
202
|
+
class="prx-rich-image"
|
|
203
|
+
[src]="resolveImageSrc(node)"
|
|
204
|
+
[alt]="resolveImageAlt(node)"
|
|
205
|
+
/>
|
|
206
|
+
}
|
|
207
|
+
@case ('badge') {
|
|
208
|
+
<span class="prx-rich-badge">{{ resolveBadgeLabel(node) }}</span>
|
|
209
|
+
}
|
|
210
|
+
@case ('avatar') {
|
|
211
|
+
<div class="prx-rich-avatar">
|
|
212
|
+
@if (resolveAvatarImage(node); as avatarImage) {
|
|
213
|
+
<img class="prx-rich-avatar-image" [src]="avatarImage" [alt]="resolveAvatarLabel(node)" />
|
|
214
|
+
} @else {
|
|
215
|
+
<span class="prx-rich-avatar-fallback">{{ resolveAvatarFallback(node) }}</span>
|
|
216
|
+
}
|
|
217
|
+
</div>
|
|
218
|
+
}
|
|
219
|
+
@case ('metric') {
|
|
220
|
+
<div class="prx-rich-metric">
|
|
221
|
+
<div class="prx-rich-metric-label">{{ node.label }}</div>
|
|
222
|
+
<div class="prx-rich-metric-value">{{ resolveMetricValue(node) }}</div>
|
|
223
|
+
@if (resolveMetricCaption(node); as caption) {
|
|
224
|
+
<div class="prx-rich-metric-caption">{{ caption }}</div>
|
|
225
|
+
}
|
|
226
|
+
</div>
|
|
227
|
+
}
|
|
228
|
+
@case ('progress') {
|
|
229
|
+
<div class="prx-rich-progress">
|
|
230
|
+
@if (resolveProgressLabel(node); as progressLabel) {
|
|
231
|
+
<div class="prx-rich-progress-label">{{ progressLabel }}</div>
|
|
232
|
+
}
|
|
233
|
+
<progress
|
|
234
|
+
class="prx-rich-progress-bar"
|
|
235
|
+
[value]="resolveProgressValue(node)"
|
|
236
|
+
[max]="node.max ?? 100"
|
|
237
|
+
></progress>
|
|
238
|
+
</div>
|
|
239
|
+
}
|
|
240
|
+
@case ('compose') {
|
|
241
|
+
<div
|
|
242
|
+
class="prx-rich-compose"
|
|
243
|
+
[class.direction-column]="node.direction === 'column'"
|
|
244
|
+
[style.gap]="resolveComposeGap(node)"
|
|
245
|
+
[class.wrap]="node.wrap === true"
|
|
246
|
+
>
|
|
247
|
+
<ng-container
|
|
248
|
+
*ngTemplateOutlet="renderNodes; context: { $implicit: node.items }"
|
|
249
|
+
></ng-container>
|
|
250
|
+
</div>
|
|
251
|
+
}
|
|
252
|
+
@case ('card') {
|
|
253
|
+
<div class="prx-rich-card">
|
|
254
|
+
@if (resolveCardTitle(node); as title) {
|
|
255
|
+
<div class="prx-rich-card-title">{{ title }}</div>
|
|
256
|
+
}
|
|
257
|
+
@if (resolveCardSubtitle(node); as subtitle) {
|
|
258
|
+
<div class="prx-rich-card-subtitle">{{ subtitle }}</div>
|
|
259
|
+
}
|
|
260
|
+
<ng-container
|
|
261
|
+
*ngTemplateOutlet="renderNodes; context: { $implicit: node.content }"
|
|
262
|
+
></ng-container>
|
|
263
|
+
</div>
|
|
264
|
+
}
|
|
265
|
+
@case ('preset') {
|
|
266
|
+
@if (resolvePresetNodes(node); as presetNodes) {
|
|
267
|
+
<ng-container
|
|
268
|
+
*ngTemplateOutlet="renderNodes; context: { $implicit: presetNodes }"
|
|
269
|
+
></ng-container>
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
</div>
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
</ng-template>
|
|
277
|
+
`, isInline: true, styles: [".prx-rich-content-root{display:block}.prx-rich-node{min-width:0}.prx-rich-compose{display:flex;align-items:center;gap:8px}.prx-rich-compose.direction-column{flex-direction:column;align-items:stretch}.prx-rich-compose.wrap{flex-wrap:wrap}.prx-rich-badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;background:var(--md-sys-color-primary-container, #e8def8);color:var(--md-sys-color-on-primary-container, #21005d);font-size:12px;line-height:20px}.prx-rich-avatar{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--md-sys-color-surface-container-high, #ece6f0);overflow:hidden}.prx-rich-avatar-image{width:100%;height:100%;object-fit:cover}.prx-rich-avatar-fallback{font-weight:600}.prx-rich-card{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--md-sys-color-outline-variant, #cac4d0);border-radius:16px;background:var(--md-sys-color-surface, #fff)}.prx-rich-card-title{font-weight:600}.prx-rich-card-subtitle,.prx-rich-metric-caption{color:var(--md-sys-color-on-surface-variant, #49454f);font-size:12px}.prx-rich-metric{display:flex;flex-direction:column;gap:4px}.prx-rich-metric-value{font-size:20px;font-weight:700}.prx-rich-progress{display:flex;flex-direction:column;gap:4px}.prx-rich-progress-bar{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
278
|
+
}
|
|
279
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisRichContent, decorators: [{
|
|
280
|
+
type: Component,
|
|
281
|
+
args: [{ selector: 'praxis-rich-content', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
282
|
+
<div class="prx-rich-content-root" [ngClass]="rootClassName">
|
|
283
|
+
<ng-container
|
|
284
|
+
*ngTemplateOutlet="renderNodes; context: { $implicit: renderableNodes() }"
|
|
285
|
+
></ng-container>
|
|
286
|
+
</div>
|
|
287
|
+
|
|
288
|
+
<ng-template #renderNodes let-nodes>
|
|
289
|
+
@for (node of nodes; track node.id ?? $index) {
|
|
290
|
+
@if (isNodeVisible(node)) {
|
|
291
|
+
<div
|
|
292
|
+
class="prx-rich-node"
|
|
293
|
+
[attr.data-rich-node-type]="node.type"
|
|
294
|
+
[attr.data-rich-node-id]="node.id || null"
|
|
295
|
+
[attr.data-testid]="node.testId || null"
|
|
296
|
+
[ngClass]="resolveNodeClasses(node)"
|
|
297
|
+
[ngStyle]="resolveNodeStyles(node)"
|
|
298
|
+
>
|
|
299
|
+
@switch (node.type) {
|
|
300
|
+
@case ('text') {
|
|
301
|
+
<span class="prx-rich-text">{{ resolveText(node) }}</span>
|
|
302
|
+
}
|
|
303
|
+
@case ('icon') {
|
|
304
|
+
<span
|
|
305
|
+
class="prx-rich-icon material-symbols-outlined"
|
|
306
|
+
[attr.aria-label]="node.ariaLabel || null"
|
|
307
|
+
>
|
|
308
|
+
{{ node.icon }}
|
|
309
|
+
</span>
|
|
310
|
+
}
|
|
311
|
+
@case ('image') {
|
|
312
|
+
<img
|
|
313
|
+
class="prx-rich-image"
|
|
314
|
+
[src]="resolveImageSrc(node)"
|
|
315
|
+
[alt]="resolveImageAlt(node)"
|
|
316
|
+
/>
|
|
317
|
+
}
|
|
318
|
+
@case ('badge') {
|
|
319
|
+
<span class="prx-rich-badge">{{ resolveBadgeLabel(node) }}</span>
|
|
320
|
+
}
|
|
321
|
+
@case ('avatar') {
|
|
322
|
+
<div class="prx-rich-avatar">
|
|
323
|
+
@if (resolveAvatarImage(node); as avatarImage) {
|
|
324
|
+
<img class="prx-rich-avatar-image" [src]="avatarImage" [alt]="resolveAvatarLabel(node)" />
|
|
325
|
+
} @else {
|
|
326
|
+
<span class="prx-rich-avatar-fallback">{{ resolveAvatarFallback(node) }}</span>
|
|
327
|
+
}
|
|
328
|
+
</div>
|
|
329
|
+
}
|
|
330
|
+
@case ('metric') {
|
|
331
|
+
<div class="prx-rich-metric">
|
|
332
|
+
<div class="prx-rich-metric-label">{{ node.label }}</div>
|
|
333
|
+
<div class="prx-rich-metric-value">{{ resolveMetricValue(node) }}</div>
|
|
334
|
+
@if (resolveMetricCaption(node); as caption) {
|
|
335
|
+
<div class="prx-rich-metric-caption">{{ caption }}</div>
|
|
336
|
+
}
|
|
337
|
+
</div>
|
|
338
|
+
}
|
|
339
|
+
@case ('progress') {
|
|
340
|
+
<div class="prx-rich-progress">
|
|
341
|
+
@if (resolveProgressLabel(node); as progressLabel) {
|
|
342
|
+
<div class="prx-rich-progress-label">{{ progressLabel }}</div>
|
|
343
|
+
}
|
|
344
|
+
<progress
|
|
345
|
+
class="prx-rich-progress-bar"
|
|
346
|
+
[value]="resolveProgressValue(node)"
|
|
347
|
+
[max]="node.max ?? 100"
|
|
348
|
+
></progress>
|
|
349
|
+
</div>
|
|
350
|
+
}
|
|
351
|
+
@case ('compose') {
|
|
352
|
+
<div
|
|
353
|
+
class="prx-rich-compose"
|
|
354
|
+
[class.direction-column]="node.direction === 'column'"
|
|
355
|
+
[style.gap]="resolveComposeGap(node)"
|
|
356
|
+
[class.wrap]="node.wrap === true"
|
|
357
|
+
>
|
|
358
|
+
<ng-container
|
|
359
|
+
*ngTemplateOutlet="renderNodes; context: { $implicit: node.items }"
|
|
360
|
+
></ng-container>
|
|
361
|
+
</div>
|
|
362
|
+
}
|
|
363
|
+
@case ('card') {
|
|
364
|
+
<div class="prx-rich-card">
|
|
365
|
+
@if (resolveCardTitle(node); as title) {
|
|
366
|
+
<div class="prx-rich-card-title">{{ title }}</div>
|
|
367
|
+
}
|
|
368
|
+
@if (resolveCardSubtitle(node); as subtitle) {
|
|
369
|
+
<div class="prx-rich-card-subtitle">{{ subtitle }}</div>
|
|
370
|
+
}
|
|
371
|
+
<ng-container
|
|
372
|
+
*ngTemplateOutlet="renderNodes; context: { $implicit: node.content }"
|
|
373
|
+
></ng-container>
|
|
374
|
+
</div>
|
|
375
|
+
}
|
|
376
|
+
@case ('preset') {
|
|
377
|
+
@if (resolvePresetNodes(node); as presetNodes) {
|
|
378
|
+
<ng-container
|
|
379
|
+
*ngTemplateOutlet="renderNodes; context: { $implicit: presetNodes }"
|
|
380
|
+
></ng-container>
|
|
381
|
+
}
|
|
382
|
+
}
|
|
383
|
+
}
|
|
384
|
+
</div>
|
|
385
|
+
}
|
|
386
|
+
}
|
|
387
|
+
</ng-template>
|
|
388
|
+
`, styles: [".prx-rich-content-root{display:block}.prx-rich-node{min-width:0}.prx-rich-compose{display:flex;align-items:center;gap:8px}.prx-rich-compose.direction-column{flex-direction:column;align-items:stretch}.prx-rich-compose.wrap{flex-wrap:wrap}.prx-rich-badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;background:var(--md-sys-color-primary-container, #e8def8);color:var(--md-sys-color-on-primary-container, #21005d);font-size:12px;line-height:20px}.prx-rich-avatar{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--md-sys-color-surface-container-high, #ece6f0);overflow:hidden}.prx-rich-avatar-image{width:100%;height:100%;object-fit:cover}.prx-rich-avatar-fallback{font-weight:600}.prx-rich-card{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--md-sys-color-outline-variant, #cac4d0);border-radius:16px;background:var(--md-sys-color-surface, #fff)}.prx-rich-card-title{font-weight:600}.prx-rich-card-subtitle,.prx-rich-metric-caption{color:var(--md-sys-color-on-surface-variant, #49454f);font-size:12px}.prx-rich-metric{display:flex;flex-direction:column;gap:4px}.prx-rich-metric-value{font-size:20px;font-weight:700}.prx-rich-progress{display:flex;flex-direction:column;gap:4px}.prx-rich-progress-bar{width:100%}\n"] }]
|
|
389
|
+
}], propDecorators: { document: [{ type: i0.Input, args: [{ isSignal: true, alias: "document", required: false }] }], nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], hostCapabilities: [{ type: i0.Input, args: [{ isSignal: true, alias: "hostCapabilities", required: false }] }], rootClassName: [{
|
|
390
|
+
type: Input
|
|
391
|
+
}] } });
|
|
392
|
+
|
|
393
|
+
/*
|
|
394
|
+
* Public API Surface of praxis-rich-content
|
|
395
|
+
*/
|
|
396
|
+
|
|
397
|
+
/**
|
|
398
|
+
* Generated bundle index. Do not edit.
|
|
399
|
+
*/
|
|
400
|
+
|
|
401
|
+
export { PRAXIS_RICH_BLOCK_PRESETS, PraxisRichContent, RichContentPresetRegistryService };
|
package/index.d.ts
ADDED
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { InjectionToken } from '@angular/core';
|
|
3
|
+
import { RichContentDocument, RichPrimitiveNode, RichPresetReferenceNode, JsonLogicRecord, RichBlockHostCapabilities, RichBlockNode, RichPresenterNode, RichComposeNode, RichCardNode, CorePresetDescriptor, CorePresetRef } from '@praxisui/core';
|
|
4
|
+
|
|
5
|
+
type RenderableNode = RichPrimitiveNode | RichPresetReferenceNode;
|
|
6
|
+
declare class PraxisRichContent {
|
|
7
|
+
private readonly jsonLogic;
|
|
8
|
+
private readonly presetRegistry;
|
|
9
|
+
readonly document: _angular_core.InputSignal<RichContentDocument>;
|
|
10
|
+
readonly nodes: _angular_core.InputSignal<RenderableNode[]>;
|
|
11
|
+
readonly context: _angular_core.InputSignal<JsonLogicRecord>;
|
|
12
|
+
readonly hostCapabilities: _angular_core.InputSignal<RichBlockHostCapabilities>;
|
|
13
|
+
rootClassName: string;
|
|
14
|
+
readonly renderableNodes: _angular_core.Signal<RenderableNode[]>;
|
|
15
|
+
isNodeVisible(node: RichBlockNode): boolean;
|
|
16
|
+
resolveNodeClasses(node: RichBlockNode): string[];
|
|
17
|
+
resolveNodeStyles(node: RichBlockNode): Record<string, string | number>;
|
|
18
|
+
resolveText(node: Extract<RichPresenterNode, {
|
|
19
|
+
type: 'text';
|
|
20
|
+
}>): string;
|
|
21
|
+
resolveImageSrc(node: Extract<RichPresenterNode, {
|
|
22
|
+
type: 'image';
|
|
23
|
+
}>): string;
|
|
24
|
+
resolveImageAlt(node: Extract<RichPresenterNode, {
|
|
25
|
+
type: 'image';
|
|
26
|
+
}>): string;
|
|
27
|
+
resolveBadgeLabel(node: Extract<RichPresenterNode, {
|
|
28
|
+
type: 'badge';
|
|
29
|
+
}>): string;
|
|
30
|
+
resolveAvatarLabel(node: Extract<RichPresenterNode, {
|
|
31
|
+
type: 'avatar';
|
|
32
|
+
}>): string;
|
|
33
|
+
resolveAvatarImage(node: Extract<RichPresenterNode, {
|
|
34
|
+
type: 'avatar';
|
|
35
|
+
}>): string | null;
|
|
36
|
+
resolveAvatarFallback(node: Extract<RichPresenterNode, {
|
|
37
|
+
type: 'avatar';
|
|
38
|
+
}>): string;
|
|
39
|
+
resolveMetricValue(node: Extract<RichPresenterNode, {
|
|
40
|
+
type: 'metric';
|
|
41
|
+
}>): string;
|
|
42
|
+
resolveMetricCaption(node: Extract<RichPresenterNode, {
|
|
43
|
+
type: 'metric';
|
|
44
|
+
}>): string | null;
|
|
45
|
+
resolveProgressValue(node: Extract<RichPresenterNode, {
|
|
46
|
+
type: 'progress';
|
|
47
|
+
}>): number;
|
|
48
|
+
resolveProgressLabel(node: Extract<RichPresenterNode, {
|
|
49
|
+
type: 'progress';
|
|
50
|
+
}>): string | null;
|
|
51
|
+
resolveComposeGap(node: RichComposeNode): string;
|
|
52
|
+
resolveCardTitle(node: RichCardNode): string | null;
|
|
53
|
+
resolveCardSubtitle(node: RichCardNode): string | null;
|
|
54
|
+
resolvePresetNodes(node: RichPresetReferenceNode): RenderableNode[] | null;
|
|
55
|
+
private buildEvaluationContext;
|
|
56
|
+
private resolveValue;
|
|
57
|
+
private getByPath;
|
|
58
|
+
private resolveInitials;
|
|
59
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<PraxisRichContent, never>;
|
|
60
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<PraxisRichContent, "praxis-rich-content", never, { "document": { "alias": "document"; "required": false; "isSignal": true; }; "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "context": { "alias": "context"; "required": false; "isSignal": true; }; "hostCapabilities": { "alias": "hostCapabilities"; "required": false; "isSignal": true; }; "rootClassName": { "alias": "rootClassName"; "required": false; }; }, {}, never, never, true, never>;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
interface RichBlockPresetDefinition extends CorePresetDescriptor {
|
|
64
|
+
ref: CorePresetRef & {
|
|
65
|
+
kind: 'rich-block';
|
|
66
|
+
};
|
|
67
|
+
document: RichContentDocument;
|
|
68
|
+
}
|
|
69
|
+
declare const PRAXIS_RICH_BLOCK_PRESETS: InjectionToken<RichBlockPresetDefinition[]>;
|
|
70
|
+
declare class RichContentPresetRegistryService {
|
|
71
|
+
private readonly presetDefinitions;
|
|
72
|
+
list(): RichBlockPresetDefinition[];
|
|
73
|
+
get(ref: CorePresetRef): RichBlockPresetDefinition | null;
|
|
74
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RichContentPresetRegistryService, never>;
|
|
75
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<RichContentPresetRegistryService>;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
export { PRAXIS_RICH_BLOCK_PRESETS, PraxisRichContent, RichContentPresetRegistryService };
|
|
79
|
+
export type { RichBlockPresetDefinition };
|
package/package.json
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@praxisui/rich-content",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"peerDependencies": {
|
|
5
|
+
"@angular/common": "^20.3.0",
|
|
6
|
+
"@angular/core": "^20.3.0",
|
|
7
|
+
"@praxisui/core": "*"
|
|
8
|
+
},
|
|
9
|
+
"dependencies": {
|
|
10
|
+
"tslib": "^2.3.0"
|
|
11
|
+
},
|
|
12
|
+
"sideEffects": false,
|
|
13
|
+
"module": "fesm2022/praxisui-rich-content.mjs",
|
|
14
|
+
"typings": "index.d.ts",
|
|
15
|
+
"exports": {
|
|
16
|
+
"./package.json": {
|
|
17
|
+
"default": "./package.json"
|
|
18
|
+
},
|
|
19
|
+
".": {
|
|
20
|
+
"types": "./index.d.ts",
|
|
21
|
+
"default": "./fesm2022/praxisui-rich-content.mjs"
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|