@praxisui/rich-content 0.0.1 → 7.0.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +63 -63
- package/fesm2022/praxisui-rich-content.mjs +224 -2
- package/index.d.ts +13 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,63 +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.
|
|
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.
|
|
@@ -130,6 +130,42 @@ class PraxisRichContent {
|
|
|
130
130
|
resolveCardSubtitle(node) {
|
|
131
131
|
return this.resolveValue(node.subtitleExpr) ?? node.subtitle ?? null;
|
|
132
132
|
}
|
|
133
|
+
resolveMediaBlockAvatarNodes(node) {
|
|
134
|
+
return node.avatar ? [node.avatar] : [];
|
|
135
|
+
}
|
|
136
|
+
resolveMediaBlockTitleNodes(node) {
|
|
137
|
+
return node.title ? [node.title] : [];
|
|
138
|
+
}
|
|
139
|
+
resolveMediaBlockSubtitleNodes(node) {
|
|
140
|
+
return node.subtitle ? [node.subtitle] : [];
|
|
141
|
+
}
|
|
142
|
+
resolveMediaBlockMetaNodes(node) {
|
|
143
|
+
return node.meta ? [node.meta] : [];
|
|
144
|
+
}
|
|
145
|
+
resolveMediaBlockTrailingNodes(node) {
|
|
146
|
+
return (node.trailing ?? []);
|
|
147
|
+
}
|
|
148
|
+
resolveTimelineTitle(node) {
|
|
149
|
+
return this.resolveValue(node.titleExpr) ?? node.title ?? null;
|
|
150
|
+
}
|
|
151
|
+
resolveTimelineItems(node) {
|
|
152
|
+
return Array.isArray(node.items) ? node.items : [];
|
|
153
|
+
}
|
|
154
|
+
resolveTimelineItemTitle(item) {
|
|
155
|
+
return this.resolveValue(item.titleExpr) ?? item.title ?? null;
|
|
156
|
+
}
|
|
157
|
+
resolveTimelineItemSubtitle(item) {
|
|
158
|
+
return this.resolveValue(item.subtitleExpr) ?? item.subtitle ?? null;
|
|
159
|
+
}
|
|
160
|
+
resolveTimelineItemMeta(item) {
|
|
161
|
+
return this.resolveValue(item.metaExpr) ?? item.meta ?? null;
|
|
162
|
+
}
|
|
163
|
+
resolveTimelineItemIcon(item) {
|
|
164
|
+
return this.resolveValue(item.iconExpr) ?? item.icon ?? null;
|
|
165
|
+
}
|
|
166
|
+
resolveTimelineItemBadge(item) {
|
|
167
|
+
return this.resolveValue(item.badgeExpr) ?? item.badge ?? null;
|
|
168
|
+
}
|
|
133
169
|
resolvePresetNodes(node) {
|
|
134
170
|
const localPreset = this.presetRegistry.get(node.ref);
|
|
135
171
|
if (localPreset) {
|
|
@@ -262,6 +298,99 @@ class PraxisRichContent {
|
|
|
262
298
|
></ng-container>
|
|
263
299
|
</div>
|
|
264
300
|
}
|
|
301
|
+
@case ('mediaBlock') {
|
|
302
|
+
<div class="prx-rich-media-block">
|
|
303
|
+
@if (resolveMediaBlockAvatarNodes(node); as avatarNodes) {
|
|
304
|
+
@if (avatarNodes.length) {
|
|
305
|
+
<div class="prx-rich-media-block__avatar">
|
|
306
|
+
<ng-container
|
|
307
|
+
*ngTemplateOutlet="renderNodes; context: { $implicit: avatarNodes }"
|
|
308
|
+
></ng-container>
|
|
309
|
+
</div>
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
<div class="prx-rich-media-block__body">
|
|
313
|
+
@if (resolveMediaBlockTitleNodes(node); as titleNodes) {
|
|
314
|
+
@if (titleNodes.length) {
|
|
315
|
+
<div class="prx-rich-media-block__title">
|
|
316
|
+
<ng-container
|
|
317
|
+
*ngTemplateOutlet="renderNodes; context: { $implicit: titleNodes }"
|
|
318
|
+
></ng-container>
|
|
319
|
+
</div>
|
|
320
|
+
}
|
|
321
|
+
}
|
|
322
|
+
@if (resolveMediaBlockSubtitleNodes(node); as subtitleNodes) {
|
|
323
|
+
@if (subtitleNodes.length) {
|
|
324
|
+
<div class="prx-rich-media-block__subtitle">
|
|
325
|
+
<ng-container
|
|
326
|
+
*ngTemplateOutlet="renderNodes; context: { $implicit: subtitleNodes }"
|
|
327
|
+
></ng-container>
|
|
328
|
+
</div>
|
|
329
|
+
}
|
|
330
|
+
}
|
|
331
|
+
@if (resolveMediaBlockMetaNodes(node); as metaNodes) {
|
|
332
|
+
@if (metaNodes.length) {
|
|
333
|
+
<div class="prx-rich-media-block__meta">
|
|
334
|
+
<ng-container
|
|
335
|
+
*ngTemplateOutlet="renderNodes; context: { $implicit: metaNodes }"
|
|
336
|
+
></ng-container>
|
|
337
|
+
</div>
|
|
338
|
+
}
|
|
339
|
+
}
|
|
340
|
+
</div>
|
|
341
|
+
@if (resolveMediaBlockTrailingNodes(node); as trailingNodes) {
|
|
342
|
+
@if (trailingNodes.length) {
|
|
343
|
+
<div class="prx-rich-media-block__trailing">
|
|
344
|
+
<ng-container
|
|
345
|
+
*ngTemplateOutlet="renderNodes; context: { $implicit: trailingNodes }"
|
|
346
|
+
></ng-container>
|
|
347
|
+
</div>
|
|
348
|
+
}
|
|
349
|
+
}
|
|
350
|
+
</div>
|
|
351
|
+
}
|
|
352
|
+
@case ('timeline') {
|
|
353
|
+
<div class="prx-rich-timeline">
|
|
354
|
+
@if (resolveTimelineTitle(node); as timelineTitle) {
|
|
355
|
+
<div class="prx-rich-timeline__title">{{ timelineTitle }}</div>
|
|
356
|
+
}
|
|
357
|
+
@if (resolveTimelineItems(node).length) {
|
|
358
|
+
<div class="prx-rich-timeline__items">
|
|
359
|
+
@for (item of resolveTimelineItems(node); track item.id ?? $index) {
|
|
360
|
+
<article class="prx-rich-timeline__item">
|
|
361
|
+
<div class="prx-rich-timeline__item-marker">
|
|
362
|
+
@if (resolveTimelineItemIcon(item); as icon) {
|
|
363
|
+
<span class="prx-rich-timeline__item-icon material-symbols-outlined">
|
|
364
|
+
{{ icon }}
|
|
365
|
+
</span>
|
|
366
|
+
} @else {
|
|
367
|
+
<span class="prx-rich-timeline__item-dot"></span>
|
|
368
|
+
}
|
|
369
|
+
</div>
|
|
370
|
+
<div class="prx-rich-timeline__item-body">
|
|
371
|
+
@if (resolveTimelineItemTitle(item); as itemTitle) {
|
|
372
|
+
<div class="prx-rich-timeline__item-title">{{ itemTitle }}</div>
|
|
373
|
+
}
|
|
374
|
+
@if (resolveTimelineItemSubtitle(item); as itemSubtitle) {
|
|
375
|
+
<div class="prx-rich-timeline__item-subtitle">{{ itemSubtitle }}</div>
|
|
376
|
+
}
|
|
377
|
+
@if (resolveTimelineItemMeta(item); as itemMeta) {
|
|
378
|
+
<div class="prx-rich-timeline__item-meta">{{ itemMeta }}</div>
|
|
379
|
+
}
|
|
380
|
+
</div>
|
|
381
|
+
@if (resolveTimelineItemBadge(item); as itemBadge) {
|
|
382
|
+
<div class="prx-rich-timeline__item-badge">
|
|
383
|
+
<span class="prx-rich-badge">{{ itemBadge }}</span>
|
|
384
|
+
</div>
|
|
385
|
+
}
|
|
386
|
+
</article>
|
|
387
|
+
}
|
|
388
|
+
</div>
|
|
389
|
+
} @else if (node.emptyText) {
|
|
390
|
+
<div class="prx-rich-timeline__empty">{{ node.emptyText }}</div>
|
|
391
|
+
}
|
|
392
|
+
</div>
|
|
393
|
+
}
|
|
265
394
|
@case ('preset') {
|
|
266
395
|
@if (resolvePresetNodes(node); as presetNodes) {
|
|
267
396
|
<ng-container
|
|
@@ -274,7 +403,7 @@ class PraxisRichContent {
|
|
|
274
403
|
}
|
|
275
404
|
}
|
|
276
405
|
</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 });
|
|
406
|
+
`, 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%}.prx-rich-media-block{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;min-width:0}.prx-rich-media-block__avatar,.prx-rich-media-block__body,.prx-rich-media-block__trailing{min-width:0}.prx-rich-media-block__body{display:flex;flex-direction:column;gap:6px}.prx-rich-media-block__title{font-weight:700}.prx-rich-media-block__subtitle{color:var(--md-sys-color-on-surface-variant, #49454f);font-size:13px}.prx-rich-media-block__meta{color:var(--md-sys-color-on-surface-variant, #49454f);font-size:12px}.prx-rich-media-block__trailing{display:flex;align-items:center;justify-content:flex-end}.prx-rich-timeline{display:flex;flex-direction:column;gap:12px;min-width:0}.prx-rich-timeline__title{font-weight:700}.prx-rich-timeline__items{display:flex;flex-direction:column;gap:12px}.prx-rich-timeline__item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:flex-start;min-width:0}.prx-rich-timeline__item-marker{display:inline-flex;align-items:center;justify-content:center;width:24px;min-height:24px}.prx-rich-timeline__item-icon{font-size:18px;line-height:18px;color:var(--md-sys-color-primary, #6750a4)}.prx-rich-timeline__item-dot{width:10px;height:10px;border-radius:50%;background:var(--md-sys-color-primary, #6750a4);display:inline-block;margin-top:4px}.prx-rich-timeline__item-body{display:flex;flex-direction:column;gap:4px;min-width:0}.prx-rich-timeline__item-title{font-weight:600}.prx-rich-timeline__item-subtitle,.prx-rich-timeline__item-meta,.prx-rich-timeline__empty{color:var(--md-sys-color-on-surface-variant, #49454f);font-size:12px}.prx-rich-timeline__item-badge{display:inline-flex;align-items:flex-start;justify-content:flex-end}\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
407
|
}
|
|
279
408
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisRichContent, decorators: [{
|
|
280
409
|
type: Component,
|
|
@@ -373,6 +502,99 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
373
502
|
></ng-container>
|
|
374
503
|
</div>
|
|
375
504
|
}
|
|
505
|
+
@case ('mediaBlock') {
|
|
506
|
+
<div class="prx-rich-media-block">
|
|
507
|
+
@if (resolveMediaBlockAvatarNodes(node); as avatarNodes) {
|
|
508
|
+
@if (avatarNodes.length) {
|
|
509
|
+
<div class="prx-rich-media-block__avatar">
|
|
510
|
+
<ng-container
|
|
511
|
+
*ngTemplateOutlet="renderNodes; context: { $implicit: avatarNodes }"
|
|
512
|
+
></ng-container>
|
|
513
|
+
</div>
|
|
514
|
+
}
|
|
515
|
+
}
|
|
516
|
+
<div class="prx-rich-media-block__body">
|
|
517
|
+
@if (resolveMediaBlockTitleNodes(node); as titleNodes) {
|
|
518
|
+
@if (titleNodes.length) {
|
|
519
|
+
<div class="prx-rich-media-block__title">
|
|
520
|
+
<ng-container
|
|
521
|
+
*ngTemplateOutlet="renderNodes; context: { $implicit: titleNodes }"
|
|
522
|
+
></ng-container>
|
|
523
|
+
</div>
|
|
524
|
+
}
|
|
525
|
+
}
|
|
526
|
+
@if (resolveMediaBlockSubtitleNodes(node); as subtitleNodes) {
|
|
527
|
+
@if (subtitleNodes.length) {
|
|
528
|
+
<div class="prx-rich-media-block__subtitle">
|
|
529
|
+
<ng-container
|
|
530
|
+
*ngTemplateOutlet="renderNodes; context: { $implicit: subtitleNodes }"
|
|
531
|
+
></ng-container>
|
|
532
|
+
</div>
|
|
533
|
+
}
|
|
534
|
+
}
|
|
535
|
+
@if (resolveMediaBlockMetaNodes(node); as metaNodes) {
|
|
536
|
+
@if (metaNodes.length) {
|
|
537
|
+
<div class="prx-rich-media-block__meta">
|
|
538
|
+
<ng-container
|
|
539
|
+
*ngTemplateOutlet="renderNodes; context: { $implicit: metaNodes }"
|
|
540
|
+
></ng-container>
|
|
541
|
+
</div>
|
|
542
|
+
}
|
|
543
|
+
}
|
|
544
|
+
</div>
|
|
545
|
+
@if (resolveMediaBlockTrailingNodes(node); as trailingNodes) {
|
|
546
|
+
@if (trailingNodes.length) {
|
|
547
|
+
<div class="prx-rich-media-block__trailing">
|
|
548
|
+
<ng-container
|
|
549
|
+
*ngTemplateOutlet="renderNodes; context: { $implicit: trailingNodes }"
|
|
550
|
+
></ng-container>
|
|
551
|
+
</div>
|
|
552
|
+
}
|
|
553
|
+
}
|
|
554
|
+
</div>
|
|
555
|
+
}
|
|
556
|
+
@case ('timeline') {
|
|
557
|
+
<div class="prx-rich-timeline">
|
|
558
|
+
@if (resolveTimelineTitle(node); as timelineTitle) {
|
|
559
|
+
<div class="prx-rich-timeline__title">{{ timelineTitle }}</div>
|
|
560
|
+
}
|
|
561
|
+
@if (resolveTimelineItems(node).length) {
|
|
562
|
+
<div class="prx-rich-timeline__items">
|
|
563
|
+
@for (item of resolveTimelineItems(node); track item.id ?? $index) {
|
|
564
|
+
<article class="prx-rich-timeline__item">
|
|
565
|
+
<div class="prx-rich-timeline__item-marker">
|
|
566
|
+
@if (resolveTimelineItemIcon(item); as icon) {
|
|
567
|
+
<span class="prx-rich-timeline__item-icon material-symbols-outlined">
|
|
568
|
+
{{ icon }}
|
|
569
|
+
</span>
|
|
570
|
+
} @else {
|
|
571
|
+
<span class="prx-rich-timeline__item-dot"></span>
|
|
572
|
+
}
|
|
573
|
+
</div>
|
|
574
|
+
<div class="prx-rich-timeline__item-body">
|
|
575
|
+
@if (resolveTimelineItemTitle(item); as itemTitle) {
|
|
576
|
+
<div class="prx-rich-timeline__item-title">{{ itemTitle }}</div>
|
|
577
|
+
}
|
|
578
|
+
@if (resolveTimelineItemSubtitle(item); as itemSubtitle) {
|
|
579
|
+
<div class="prx-rich-timeline__item-subtitle">{{ itemSubtitle }}</div>
|
|
580
|
+
}
|
|
581
|
+
@if (resolveTimelineItemMeta(item); as itemMeta) {
|
|
582
|
+
<div class="prx-rich-timeline__item-meta">{{ itemMeta }}</div>
|
|
583
|
+
}
|
|
584
|
+
</div>
|
|
585
|
+
@if (resolveTimelineItemBadge(item); as itemBadge) {
|
|
586
|
+
<div class="prx-rich-timeline__item-badge">
|
|
587
|
+
<span class="prx-rich-badge">{{ itemBadge }}</span>
|
|
588
|
+
</div>
|
|
589
|
+
}
|
|
590
|
+
</article>
|
|
591
|
+
}
|
|
592
|
+
</div>
|
|
593
|
+
} @else if (node.emptyText) {
|
|
594
|
+
<div class="prx-rich-timeline__empty">{{ node.emptyText }}</div>
|
|
595
|
+
}
|
|
596
|
+
</div>
|
|
597
|
+
}
|
|
376
598
|
@case ('preset') {
|
|
377
599
|
@if (resolvePresetNodes(node); as presetNodes) {
|
|
378
600
|
<ng-container
|
|
@@ -385,7 +607,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
385
607
|
}
|
|
386
608
|
}
|
|
387
609
|
</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"] }]
|
|
610
|
+
`, 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%}.prx-rich-media-block{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;min-width:0}.prx-rich-media-block__avatar,.prx-rich-media-block__body,.prx-rich-media-block__trailing{min-width:0}.prx-rich-media-block__body{display:flex;flex-direction:column;gap:6px}.prx-rich-media-block__title{font-weight:700}.prx-rich-media-block__subtitle{color:var(--md-sys-color-on-surface-variant, #49454f);font-size:13px}.prx-rich-media-block__meta{color:var(--md-sys-color-on-surface-variant, #49454f);font-size:12px}.prx-rich-media-block__trailing{display:flex;align-items:center;justify-content:flex-end}.prx-rich-timeline{display:flex;flex-direction:column;gap:12px;min-width:0}.prx-rich-timeline__title{font-weight:700}.prx-rich-timeline__items{display:flex;flex-direction:column;gap:12px}.prx-rich-timeline__item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:flex-start;min-width:0}.prx-rich-timeline__item-marker{display:inline-flex;align-items:center;justify-content:center;width:24px;min-height:24px}.prx-rich-timeline__item-icon{font-size:18px;line-height:18px;color:var(--md-sys-color-primary, #6750a4)}.prx-rich-timeline__item-dot{width:10px;height:10px;border-radius:50%;background:var(--md-sys-color-primary, #6750a4);display:inline-block;margin-top:4px}.prx-rich-timeline__item-body{display:flex;flex-direction:column;gap:4px;min-width:0}.prx-rich-timeline__item-title{font-weight:600}.prx-rich-timeline__item-subtitle,.prx-rich-timeline__item-meta,.prx-rich-timeline__empty{color:var(--md-sys-color-on-surface-variant, #49454f);font-size:12px}.prx-rich-timeline__item-badge{display:inline-flex;align-items:flex-start;justify-content:flex-end}\n"] }]
|
|
389
611
|
}], 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
612
|
type: Input
|
|
391
613
|
}] } });
|
package/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
2
|
import { InjectionToken } from '@angular/core';
|
|
3
|
-
import { RichContentDocument, RichPrimitiveNode, RichPresetReferenceNode, JsonLogicRecord, RichBlockHostCapabilities, RichBlockNode, RichPresenterNode, RichComposeNode, RichCardNode, CorePresetDescriptor, CorePresetRef } from '@praxisui/core';
|
|
3
|
+
import { RichContentDocument, RichPrimitiveNode, RichPresetReferenceNode, JsonLogicRecord, RichBlockHostCapabilities, RichBlockNode, RichPresenterNode, RichComposeNode, RichCardNode, RichMediaBlockNode, RichTimelineNode, RichTimelineItem, CorePresetDescriptor, CorePresetRef } from '@praxisui/core';
|
|
4
4
|
|
|
5
5
|
type RenderableNode = RichPrimitiveNode | RichPresetReferenceNode;
|
|
6
6
|
declare class PraxisRichContent {
|
|
@@ -51,6 +51,18 @@ declare class PraxisRichContent {
|
|
|
51
51
|
resolveComposeGap(node: RichComposeNode): string;
|
|
52
52
|
resolveCardTitle(node: RichCardNode): string | null;
|
|
53
53
|
resolveCardSubtitle(node: RichCardNode): string | null;
|
|
54
|
+
resolveMediaBlockAvatarNodes(node: RichMediaBlockNode): RenderableNode[];
|
|
55
|
+
resolveMediaBlockTitleNodes(node: RichMediaBlockNode): RenderableNode[];
|
|
56
|
+
resolveMediaBlockSubtitleNodes(node: RichMediaBlockNode): RenderableNode[];
|
|
57
|
+
resolveMediaBlockMetaNodes(node: RichMediaBlockNode): RenderableNode[];
|
|
58
|
+
resolveMediaBlockTrailingNodes(node: RichMediaBlockNode): RenderableNode[];
|
|
59
|
+
resolveTimelineTitle(node: RichTimelineNode): string | null;
|
|
60
|
+
resolveTimelineItems(node: RichTimelineNode): RichTimelineItem[];
|
|
61
|
+
resolveTimelineItemTitle(item: RichTimelineItem): string | null;
|
|
62
|
+
resolveTimelineItemSubtitle(item: RichTimelineItem): string | null;
|
|
63
|
+
resolveTimelineItemMeta(item: RichTimelineItem): string | null;
|
|
64
|
+
resolveTimelineItemIcon(item: RichTimelineItem): string | null;
|
|
65
|
+
resolveTimelineItemBadge(item: RichTimelineItem): string | null;
|
|
54
66
|
resolvePresetNodes(node: RichPresetReferenceNode): RenderableNode[] | null;
|
|
55
67
|
private buildEvaluationContext;
|
|
56
68
|
private resolveValue;
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@praxisui/rich-content",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "7.0.0-beta.0",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": "^20.3.0",
|
|
6
6
|
"@angular/core": "^20.3.0",
|
|
7
|
-
"@praxisui/core": "
|
|
7
|
+
"@praxisui/core": "^7.0.0-beta.0"
|
|
8
8
|
},
|
|
9
9
|
"dependencies": {
|
|
10
10
|
"tslib": "^2.3.0"
|