@startinblox/components-ds4go 3.3.3 → 3.3.4
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 -2876
- package/package.json +1 -1
- package/src/components/odrl-policy-viewer.ts +179 -0
package/package.json
CHANGED
|
@@ -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
|
+
}
|