@startinblox/components-ds4go 4.1.8 → 4.1.9
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/package.json
CHANGED
|
@@ -0,0 +1,240 @@
|
|
|
1
|
+
import { localized, msg, str } from "@lit/localize";
|
|
2
|
+
import type {
|
|
3
|
+
Constraint,
|
|
4
|
+
Duty,
|
|
5
|
+
OdrlPermission,
|
|
6
|
+
PolicyDefinition,
|
|
7
|
+
PolicyTemplate,
|
|
8
|
+
Prohibition,
|
|
9
|
+
} from "@src/component";
|
|
10
|
+
import { html, LitElement, nothing, unsafeCSS } from "lit";
|
|
11
|
+
import { customElement, property } from "lit/decorators.js";
|
|
12
|
+
import ComponentStyles from "@styles/odrl/policy-composer.scss?inline";
|
|
13
|
+
|
|
14
|
+
@customElement("policy-composer-simple")
|
|
15
|
+
@localized()
|
|
16
|
+
export class PolicyComposerSimple extends LitElement {
|
|
17
|
+
static styles = [unsafeCSS(ComponentStyles)];
|
|
18
|
+
|
|
19
|
+
@property({ attribute: false })
|
|
20
|
+
template?: PolicyTemplate;
|
|
21
|
+
|
|
22
|
+
@property({ attribute: false })
|
|
23
|
+
policy?: PolicyDefinition;
|
|
24
|
+
|
|
25
|
+
_emitPolicyChange() {
|
|
26
|
+
if (!this.policy) return;
|
|
27
|
+
this.dispatchEvent(
|
|
28
|
+
new CustomEvent("policy-changed", {
|
|
29
|
+
detail: this.policy,
|
|
30
|
+
bubbles: true,
|
|
31
|
+
composed: true,
|
|
32
|
+
}),
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
_updateConstraintRightOperand(
|
|
37
|
+
policyField: "permission" | "prohibition" | "obligation",
|
|
38
|
+
itemIndex: number,
|
|
39
|
+
constraintIndex: number,
|
|
40
|
+
value: any,
|
|
41
|
+
dutyIndex?: number,
|
|
42
|
+
) {
|
|
43
|
+
if (!this.policy) return;
|
|
44
|
+
|
|
45
|
+
if (policyField === "permission" && dutyIndex !== undefined) {
|
|
46
|
+
// Update constraint in duty within permission
|
|
47
|
+
const permissions = [...(this.policy.policy.permission || [])];
|
|
48
|
+
const duties = [...(permissions[itemIndex].duty || [])];
|
|
49
|
+
const constraints = [...(duties[dutyIndex].constraint || [])];
|
|
50
|
+
constraints[constraintIndex] = {
|
|
51
|
+
...constraints[constraintIndex],
|
|
52
|
+
rightOperand: value,
|
|
53
|
+
};
|
|
54
|
+
duties[dutyIndex] = { ...duties[dutyIndex], constraint: constraints };
|
|
55
|
+
permissions[itemIndex] = { ...permissions[itemIndex], duty: duties };
|
|
56
|
+
|
|
57
|
+
this.policy = {
|
|
58
|
+
...this.policy,
|
|
59
|
+
policy: {
|
|
60
|
+
...this.policy.policy,
|
|
61
|
+
permission: permissions,
|
|
62
|
+
},
|
|
63
|
+
};
|
|
64
|
+
} else {
|
|
65
|
+
// Update constraint directly in permission, prohibition, or obligation
|
|
66
|
+
const items = [...(this.policy.policy[policyField] || [])];
|
|
67
|
+
const constraints = [...(items[itemIndex].constraint || [])];
|
|
68
|
+
constraints[constraintIndex] = {
|
|
69
|
+
...constraints[constraintIndex],
|
|
70
|
+
rightOperand: value,
|
|
71
|
+
};
|
|
72
|
+
items[itemIndex] = { ...items[itemIndex], constraint: constraints };
|
|
73
|
+
|
|
74
|
+
this.policy = {
|
|
75
|
+
...this.policy,
|
|
76
|
+
policy: {
|
|
77
|
+
...this.policy.policy,
|
|
78
|
+
[policyField]: items,
|
|
79
|
+
},
|
|
80
|
+
};
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
this._emitPolicyChange();
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
_getConstraintLabel(leftOperand: string, operator: string): string {
|
|
87
|
+
return `${leftOperand} ${operator}`;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
_renderConstraint(
|
|
91
|
+
constraint: Constraint,
|
|
92
|
+
policyField: "permission" | "prohibition" | "obligation",
|
|
93
|
+
itemIndex: number,
|
|
94
|
+
constraintIndex: number,
|
|
95
|
+
dutyIndex?: number,
|
|
96
|
+
) {
|
|
97
|
+
const label = this._getConstraintLabel(
|
|
98
|
+
constraint.leftOperand || "",
|
|
99
|
+
constraint.operator || "eq",
|
|
100
|
+
);
|
|
101
|
+
|
|
102
|
+
return html`<div class="flex flex-column spacer-auto">
|
|
103
|
+
<tems-input
|
|
104
|
+
type="text"
|
|
105
|
+
label="${msg(str`${label}`)}"
|
|
106
|
+
.value=${String(constraint.rightOperand || "")}
|
|
107
|
+
@change=${(e: Event) => {
|
|
108
|
+
this._updateConstraintRightOperand(
|
|
109
|
+
policyField,
|
|
110
|
+
itemIndex,
|
|
111
|
+
constraintIndex,
|
|
112
|
+
(e as CustomEvent).detail.value,
|
|
113
|
+
dutyIndex,
|
|
114
|
+
);
|
|
115
|
+
}}
|
|
116
|
+
></tems-input>
|
|
117
|
+
</div>`;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
_renderConstraintsFromItems<T extends OdrlPermission | Prohibition | Duty>(
|
|
121
|
+
items: T[] | undefined,
|
|
122
|
+
policyField: "permission" | "prohibition" | "obligation",
|
|
123
|
+
) {
|
|
124
|
+
if (!items || items.length === 0) return nothing;
|
|
125
|
+
|
|
126
|
+
return html`${items.map((item, itemIndex) => {
|
|
127
|
+
return html`${item.constraint && item.constraint.length > 0
|
|
128
|
+
? html`${item.constraint.map((constraint, constraintIndex) =>
|
|
129
|
+
this._renderConstraint(
|
|
130
|
+
constraint,
|
|
131
|
+
policyField,
|
|
132
|
+
itemIndex,
|
|
133
|
+
constraintIndex,
|
|
134
|
+
),
|
|
135
|
+
)}`
|
|
136
|
+
: nothing}
|
|
137
|
+
${policyField === "permission" && (item as OdrlPermission).duty
|
|
138
|
+
? html`${(item as OdrlPermission).duty?.map((duty, dutyIndex) => {
|
|
139
|
+
return html`${(duty.constraint || []).map(
|
|
140
|
+
(constraint, constraintIndex) =>
|
|
141
|
+
this._renderConstraint(
|
|
142
|
+
constraint,
|
|
143
|
+
policyField,
|
|
144
|
+
itemIndex,
|
|
145
|
+
constraintIndex,
|
|
146
|
+
dutyIndex,
|
|
147
|
+
),
|
|
148
|
+
)}`;
|
|
149
|
+
})}`
|
|
150
|
+
: nothing}`;
|
|
151
|
+
})}`;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
_cancelCustomization() {
|
|
155
|
+
this.dispatchEvent(
|
|
156
|
+
new CustomEvent("cancel-policy-customization", {
|
|
157
|
+
bubbles: true,
|
|
158
|
+
composed: true,
|
|
159
|
+
}),
|
|
160
|
+
);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
_resetPolicy() {
|
|
164
|
+
if (!this.template) return;
|
|
165
|
+
const templateId = this.template["id"] as string;
|
|
166
|
+
this.policy = {
|
|
167
|
+
"@id": templateId,
|
|
168
|
+
policy: {
|
|
169
|
+
...this.template.policy,
|
|
170
|
+
"@type": "Set",
|
|
171
|
+
},
|
|
172
|
+
};
|
|
173
|
+
this._emitPolicyChange();
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
render() {
|
|
177
|
+
if (!this.template) {
|
|
178
|
+
return html`<p>${msg("No policy template provided")}</p>`;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
if (!this.policy) {
|
|
182
|
+
this.policy = {
|
|
183
|
+
"@id": this.template["id"],
|
|
184
|
+
policy: {
|
|
185
|
+
...this.template.policy,
|
|
186
|
+
"@type": "Set",
|
|
187
|
+
},
|
|
188
|
+
};
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
const hasConstraints =
|
|
192
|
+
(this.policy.policy.permission &&
|
|
193
|
+
this.policy.policy.permission.some((p) => p.constraint?.length)) ||
|
|
194
|
+
(this.policy.policy.prohibition &&
|
|
195
|
+
this.policy.policy.prohibition.some((p) => p.constraint?.length)) ||
|
|
196
|
+
(this.policy.policy.obligation &&
|
|
197
|
+
this.policy.policy.obligation.some((o) => o.constraint?.length));
|
|
198
|
+
|
|
199
|
+
return html`<form @submit=${(e: Event) => e.preventDefault()}>
|
|
200
|
+
<div class="flex">
|
|
201
|
+
<tems-label
|
|
202
|
+
class="flex-1"
|
|
203
|
+
label=${msg(str`Custom ${this.template.name} policy`)}
|
|
204
|
+
></tems-label>
|
|
205
|
+
<tems-button
|
|
206
|
+
type="outline-gray"
|
|
207
|
+
label=${msg("Cancel policy customization")}
|
|
208
|
+
size="sm"
|
|
209
|
+
@click=${this._cancelCustomization}
|
|
210
|
+
></tems-button>
|
|
211
|
+
</div>
|
|
212
|
+
|
|
213
|
+
${!hasConstraints
|
|
214
|
+
? html`<p>${msg("No constraints available to edit")}</p>`
|
|
215
|
+
: html`
|
|
216
|
+
<fieldset>
|
|
217
|
+
<legend>${msg("Policy Customization")}</legend>
|
|
218
|
+
${this._renderConstraintsFromItems(
|
|
219
|
+
this.policy.policy.permission,
|
|
220
|
+
"permission",
|
|
221
|
+
)}
|
|
222
|
+
${this._renderConstraintsFromItems(
|
|
223
|
+
this.policy.policy.prohibition,
|
|
224
|
+
"prohibition",
|
|
225
|
+
)}
|
|
226
|
+
${this._renderConstraintsFromItems(
|
|
227
|
+
this.policy.policy.obligation,
|
|
228
|
+
"obligation",
|
|
229
|
+
)}
|
|
230
|
+
</fieldset>
|
|
231
|
+
`}
|
|
232
|
+
|
|
233
|
+
<div class="flex align-right spacer-top">
|
|
234
|
+
<tems-button type="outline-gray" size="sm" @click=${this._resetPolicy}>
|
|
235
|
+
${msg(str`Reset to ${this.template.name} default`)}
|
|
236
|
+
</tems-button>
|
|
237
|
+
</div>
|
|
238
|
+
</form>`;
|
|
239
|
+
}
|
|
240
|
+
}
|
|
@@ -736,7 +736,7 @@ export class SolidFactBundle extends OrbitComponent {
|
|
|
736
736
|
</div>
|
|
737
737
|
</div>`
|
|
738
738
|
: html`<div>
|
|
739
|
-
<policy-composer
|
|
739
|
+
<policy-composer-simple
|
|
740
740
|
.template=${this.policyTemplates.find(
|
|
741
741
|
(policy) =>
|
|
742
742
|
policy.id === this.bundleAccessPolicy,
|
|
@@ -746,7 +746,7 @@ export class SolidFactBundle extends OrbitComponent {
|
|
|
746
746
|
._updateBundleAccessPolicyDefinition}
|
|
747
747
|
@cancel-policy-customization=${this
|
|
748
748
|
._resetBundleAccessPolicy}
|
|
749
|
-
></policy-composer>
|
|
749
|
+
></policy-composer-simple>
|
|
750
750
|
</div>`}
|
|
751
751
|
${!this.displayContractPolicyCustomization
|
|
752
752
|
? html`<div class="select">
|
|
@@ -777,7 +777,7 @@ export class SolidFactBundle extends OrbitComponent {
|
|
|
777
777
|
</div>
|
|
778
778
|
</div>`
|
|
779
779
|
: html`<div>
|
|
780
|
-
<policy-composer
|
|
780
|
+
<policy-composer-simple
|
|
781
781
|
.template=${this.policyTemplates.find(
|
|
782
782
|
(policy) =>
|
|
783
783
|
policy.id === this.bundleContractPolicy,
|
|
@@ -787,7 +787,7 @@ export class SolidFactBundle extends OrbitComponent {
|
|
|
787
787
|
._updateBundleContractPolicyDefinition}
|
|
788
788
|
@cancel-policy-customization=${this
|
|
789
789
|
._resetBundleContractPolicy}
|
|
790
|
-
></policy-composer>
|
|
790
|
+
></policy-composer-simple>
|
|
791
791
|
</div>`}
|
|
792
792
|
</div>`}
|
|
793
793
|
</section>
|