@startinblox/components-ds4go 3.3.3 → 3.3.5
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/dist/index.js +3392 -2885
- package/package.json +1 -1
- package/src/components/modal/ds4go-catalog-modal.ts +0 -10
- package/src/components/odrl-policy-viewer.ts +179 -0
package/package.json
CHANGED
|
@@ -1531,16 +1531,6 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
|
|
|
1531
1531
|
})}`;
|
|
1532
1532
|
}
|
|
1533
1533
|
|
|
1534
|
-
_renderDataOfferBadgeRow(): TemplateResult {
|
|
1535
|
-
return html`<div class="badge-row flex flex-row">
|
|
1536
|
-
${this.renderTemplateWhenWith(["offers"], this._renderKindBadgeComponent)}
|
|
1537
|
-
${this.renderTemplateWhenWith(
|
|
1538
|
-
["categories"],
|
|
1539
|
-
this._renderCategoryBadgeComponent,
|
|
1540
|
-
)}
|
|
1541
|
-
</div>`;
|
|
1542
|
-
}
|
|
1543
|
-
|
|
1544
1534
|
_renderColumns(...columns: TemplateResultOrSymbol[]): TemplateResultOrSymbol {
|
|
1545
1535
|
const filteredColumns = columns.filter((col) => col !== nothing);
|
|
1546
1536
|
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* ODRL Policy Viewer Component
|
|
3
|
+
*
|
|
4
|
+
* A Lit web component for displaying ODRL policies in a user-friendly format.
|
|
5
|
+
*
|
|
6
|
+
* Usage:
|
|
7
|
+
* ```html
|
|
8
|
+
* <odrl-policy-viewer .policy=${policyObject}></odrl-policy-viewer>
|
|
9
|
+
* ```
|
|
10
|
+
*
|
|
11
|
+
* Attributes:
|
|
12
|
+
* - policy: OdrlPolicy object to display
|
|
13
|
+
* - compact: boolean (optional) - Show compact view
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
import {
|
|
17
|
+
type OdrlPolicy,
|
|
18
|
+
OdrlPolicyRenderer,
|
|
19
|
+
} from "@startinblox/solid-tems-shared";
|
|
20
|
+
import { css, html, LitElement } from "lit";
|
|
21
|
+
import { customElement, property } from "lit/decorators.js";
|
|
22
|
+
import { unsafeHTML } from "lit/directives/unsafe-html.js";
|
|
23
|
+
|
|
24
|
+
@customElement("odrl-policy-viewer")
|
|
25
|
+
export class OdrlPolicyViewer extends LitElement {
|
|
26
|
+
@property({ type: Object })
|
|
27
|
+
policy?: OdrlPolicy;
|
|
28
|
+
|
|
29
|
+
@property({ type: Boolean })
|
|
30
|
+
compact = false;
|
|
31
|
+
|
|
32
|
+
static styles = css`
|
|
33
|
+
:host {
|
|
34
|
+
display: block;
|
|
35
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.odrl-policy {
|
|
39
|
+
font-size: 0.9em;
|
|
40
|
+
line-height: 1.5;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.odrl-header {
|
|
44
|
+
margin-bottom: 1rem;
|
|
45
|
+
padding-bottom: 0.5rem;
|
|
46
|
+
border-bottom: 1px solid #e0e0e0;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.odrl-type {
|
|
50
|
+
font-weight: bold;
|
|
51
|
+
font-size: 1.1em;
|
|
52
|
+
color: #1976d2;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.odrl-id {
|
|
56
|
+
font-size: 0.85em;
|
|
57
|
+
color: #666;
|
|
58
|
+
font-family: monospace;
|
|
59
|
+
margin-top: 0.25rem;
|
|
60
|
+
word-break: break-all;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.odrl-section {
|
|
64
|
+
margin-bottom: 1.5rem;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.odrl-section h4 {
|
|
68
|
+
margin: 0 0 0.5rem 0;
|
|
69
|
+
font-size: 1em;
|
|
70
|
+
display: flex;
|
|
71
|
+
align-items: center;
|
|
72
|
+
gap: 0.5rem;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.odrl-permissions h4 {
|
|
76
|
+
color: #2e7d32;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.odrl-prohibitions h4 {
|
|
80
|
+
color: #d32f2f;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.odrl-obligations h4 {
|
|
84
|
+
color: #f57c00;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.odrl-section ul {
|
|
88
|
+
margin: 0;
|
|
89
|
+
padding-left: 1.5rem;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.odrl-section li {
|
|
93
|
+
margin-bottom: 0.5rem;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.odrl-constraints {
|
|
97
|
+
font-size: 0.9em;
|
|
98
|
+
color: #555;
|
|
99
|
+
margin-top: 0.25rem;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.odrl-constraints li {
|
|
103
|
+
margin-bottom: 0.25rem;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.odrl-duties {
|
|
107
|
+
font-size: 0.9em;
|
|
108
|
+
color: #f57c00;
|
|
109
|
+
margin-top: 0.5rem;
|
|
110
|
+
font-weight: 500;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.odrl-duties-list {
|
|
114
|
+
font-size: 0.95em;
|
|
115
|
+
color: #666;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.odrl-duties-list li {
|
|
119
|
+
margin-bottom: 0.25rem;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.compact {
|
|
123
|
+
font-size: 0.85em;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.compact .odrl-section {
|
|
127
|
+
margin-bottom: 1rem;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.compact .odrl-section h4 {
|
|
131
|
+
font-size: 0.95em;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.no-policy {
|
|
135
|
+
color: #999;
|
|
136
|
+
font-style: italic;
|
|
137
|
+
padding: 1rem;
|
|
138
|
+
text-align: center;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.error {
|
|
142
|
+
color: #d32f2f;
|
|
143
|
+
padding: 1rem;
|
|
144
|
+
background: #ffebee;
|
|
145
|
+
border-radius: 4px;
|
|
146
|
+
font-size: 0.9em;
|
|
147
|
+
}
|
|
148
|
+
`;
|
|
149
|
+
|
|
150
|
+
render() {
|
|
151
|
+
if (!this.policy) {
|
|
152
|
+
return html`<div class="no-policy">No policy available</div>`;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
try {
|
|
156
|
+
const renderer = new OdrlPolicyRenderer(this.policy);
|
|
157
|
+
const htmlContent = renderer.renderAsHtml();
|
|
158
|
+
|
|
159
|
+
return html`
|
|
160
|
+
<div class="${this.compact ? "compact" : ""}">
|
|
161
|
+
${unsafeHTML(htmlContent)}
|
|
162
|
+
</div>
|
|
163
|
+
`;
|
|
164
|
+
} catch (error) {
|
|
165
|
+
console.error("Error rendering ODRL policy:", error);
|
|
166
|
+
return html`
|
|
167
|
+
<div class="error">
|
|
168
|
+
Error rendering policy: ${(error as Error).message}
|
|
169
|
+
</div>
|
|
170
|
+
`;
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
declare global {
|
|
176
|
+
interface HTMLElementTagNameMap {
|
|
177
|
+
"odrl-policy-viewer": OdrlPolicyViewer;
|
|
178
|
+
}
|
|
179
|
+
}
|