@startinblox/components-ds4go 3.3.8 → 4.1.0

package/src/components/modal/catalog-modal/policy-display.ts

@@ -0,0 +1,66 @@
+import { localized, msg } from "@lit/localize";
+import { html, nothing, type TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { LitElement } from "lit";
+import { hasMultiplePolicies } from "@helpers/dsp/policyHelpers";
+import type { ODRLPolicy } from "@src/ds4go";
+
+/**
+ * Policy display component for showing access policy information
+ */
+@customElement("catalog-modal-policy-display")
+@localized()
+export class CatalogModalPolicyDisplay extends LitElement {
+  @property({ attribute: false })
+  policy?: ODRLPolicy;
+
+  @property({ attribute: false })
+  policies?: ODRLPolicy[];
+
+  render(): TemplateResult | typeof nothing {
+    const hasMultiple = hasMultiplePolicies(this.policies || []);
+    const policies = this.policies || [];
+
+    // Only show if there's a policy
+    if (!this.policy && (!this.policies || this.policies.length === 0)) {
+      return nothing;
+    }
+
+    return html`<div
+      style="margin-top: 24px; padding: 16px; background: #f0f7ff; border-radius: 8px; border: 1px solid #d0e7ff;"
+    >
+      ${hasMultiple
+        ? html`<tems-division type="h4"
+              ><div>${msg("Access Policies")}</div></tems-division
+            >
+            <div style="margin-bottom: 12px; color: #0066cc; font-size: 0.9em;">
+              ${msg("Multiple contract policies available for this asset")}
+              (${policies.length})
+            </div>
+            ${policies.map(
+              (p: ODRLPolicy, index: number) =>
+                html`<div
+                  style="margin-bottom: 16px; padding: 12px; background: white; border-radius: 6px; border-left: 4px solid #0066cc;"
+                >
+                  <div
+                    style="font-weight: 600; margin-bottom: 8px; color: #333;"
+                  >
+                    ${msg("Policy")} ${index + 1}
+                    ${p["@id"]
+                      ? html`<span
+                          style="font-weight: normal; font-size: 0.85em; color: #666; display: block; margin-top: 4px; word-break: break-all; font-family: monospace;"
+                        >
+                          ${p["@id"]}
+                        </span>`
+                      : nothing}
+                  </div>
+                  <odrl-policy-viewer .policy=${p}></odrl-policy-viewer>
+                </div>`,
+            )}`
+        : html`<tems-division type="h4"
+              ><div>${msg("Access Policy")}</div></tems-division
+            >
+            <odrl-policy-viewer .policy=${this.policy}></odrl-policy-viewer>`}
+    </div>`;
+  }
+}

package/src/components/modal/catalog-modal/policy-selection.ts

@@ -0,0 +1,71 @@
+import { localized, msg } from "@lit/localize";
+import { html, nothing, type TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { LitElement } from "lit";
+import { formatPolicyDetails } from "@helpers/dsp/policyHelpers";
+import type { ODRLPolicy } from "@src/ds4go";
+
+/**
+ * Policy selection component for choosing from multiple available policies
+ */
+@customElement("catalog-modal-policy-selection")
+@localized()
+export class CatalogModalPolicySelection extends LitElement {
+  @property({ attribute: false })
+  policies: ODRLPolicy[] = [];
+
+  private _handlePolicySelect(index: number): void {
+    this.dispatchEvent(
+      new CustomEvent("policy-selected", {
+        detail: { index },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleCancel(): void {
+    this.dispatchEvent(
+      new CustomEvent("policy-cancel", {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  render(): TemplateResult {
+    return html`<div class="policy-selection-modal">
+      <div class="policy-selection-header">
+        <h3>${msg("Select a Policy")}</h3>
+        <p>
+          ${msg(
+            "Multiple policies are available for this dataset. Please select one to proceed with the negotiation.",
+          )}
+        </p>
+      </div>
+      <div class="policy-selection-list">
+        ${this.policies.map(
+          (policy: ODRLPolicy, index: number) =>
+            html`<div
+              class="policy-option"
+              @click=${() => this._handlePolicySelect(index)}
+            >
+              <div class="policy-option-header">
+                <strong>${msg("Policy")} ${index + 1}</strong>
+                ${policy["@id"] ? html`<code>${policy["@id"]}</code>` : nothing}
+              </div>
+              <div class="policy-option-details">
+                ${formatPolicyDetails(policy)}
+              </div>
+            </div>`,
+        )}
+      </div>
+      <div class="policy-selection-actions">
+        <tems-button type="outline-gray" @click=${this._handleCancel}>
+          ${msg("Cancel")}
+        </tems-button>
+      </div>
+    </div>`;
+  }
+}