@startinblox/components-ds4go 3.3.8 → 4.1.0

package/src/components/cards/ds4go-card-fact.ts

@@ -0,0 +1,128 @@
+import Ds4goCardFactStyle from "@styles/cards/ds4go-card-fact.scss?inline";
+import { formatDate } from "@helpers";
+import type { Category, Fact } from "@src/ds4go";
+import { css, html, LitElement, nothing, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { msg, str } from "@lit/localize";
+
+@customElement("ds4go-card-fact")
+export class Ds4goCardFact extends LitElement {
+  static styles = css`
+    ${unsafeCSS(Ds4goCardFactStyle)};
+  `;
+
+  @property({ attribute: false })
+  object?: Fact;
+
+  private _getThumbnail(): string {
+    if (this.object?.enclosure) {
+      return String(this.object.enclosure);
+    }
+    // Default placeholder image
+    return "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='354' height='167' viewBox='0 0 354 167'%3E%3Crect width='354' height='167' fill='%23f0f0f0'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='sans-serif' font-size='14' fill='%23999'%3ENo Image%3C/text%3E%3C/svg%3E";
+  }
+
+  private _getFormattedDate(): string {
+    if (!this.object?.created_at) return "";
+    return formatDate(this.object.created_at, {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+  }
+
+  private _getTags() {
+    const tags: {
+      label: string;
+      type: string;
+      color?: string;
+    }[] = [];
+
+    // Add categories as tags (max 3, with overflow indicator)
+    (this.object?.categories || [])?.slice(0, 3).forEach((c: Category) => {
+      if (c.name) {
+        tags.push({
+          label: c.name,
+          type: "neutral",
+        });
+      }
+    });
+
+    const totalCategories = this.object?.categories?.length || 0;
+    if (totalCategories > 3) {
+      tags.push({
+        label: msg(str`+${totalCategories - 3} ${msg("more")}`),
+        type: "neutral",
+      });
+    }
+
+    // Add media count if available
+    const mediaCount = this.object?.medias?.length || 0;
+    if (mediaCount > 0) {
+      tags.push({
+        label: msg(
+          str`${mediaCount} ${mediaCount > 1 ? msg("medias") : msg("media")}`,
+        ),
+        type: "information",
+      });
+    }
+
+    return tags;
+  }
+
+  render() {
+    if (!this.object) return nothing;
+    const tags = this._getTags();
+    const formattedDate = this._getFormattedDate();
+
+    return html`<article class="vertical">
+      <header
+        class="image"
+        style='background-image: url("${this._getThumbnail()}")'
+      ></header>
+      <main>
+        ${formattedDate
+          ? html`<div class="meta-info">
+              <span class="date">${formattedDate}</span>
+            </div>`
+          : nothing}
+        <div class="content">
+          ${this.object?.name
+            ? html`<div class="card-header">
+                <tems-division
+                  label=${this.object?.name}
+                  type="h4"
+                ></tems-division>
+              </div>`
+            : nothing}
+          ${this.object?.description
+            ? html`<div class="card-content">
+                <tems-division
+                  label=${this.object?.description}
+                  type="body-m"
+                ></tems-division>
+              </div>`
+            : nothing}
+          ${tags.length > 0
+            ? html`<div class="tags">
+                ${tags.map(
+                  (tag) =>
+                    html`<tems-badge
+                      size="sm"
+                      label=${tag.label}
+                      type=${tag.type}
+                      color=${tag.color || nothing}
+                    ></tems-badge>`,
+                )}
+              </div>`
+            : nothing}
+          ${this.object.author
+            ? html`<div class="meta-info">
+                <span class="author">${msg("By")} ${this.object.author}</span>
+              </div>`
+            : nothing}
+        </div>
+      </main>
+    </article>`;
+  }
+}

package/src/components/catalog/ds4go-catalog-data-holder.ts

@@ -0,0 +1,158 @@
+import type { DSPOffer } from "@src/ds4go";
+import {
+  filterObjectByDateAfter,
+  filterObjectById,
+  filterObjectByInterval,
+  filterObjectByNamedValue,
+  filterObjectByType,
+  filterObjectByValue,
+} from "@helpers";
+import type { Resource } from "@src/component";
+import {
+  TemsObjectsHandler,
+  type TemsSearchObject,
+} from "@startinblox/solid-tems-shared";
+import { css, html, nothing, type PropertyValues } from "lit";
+import { customElement, state } from "lit/decorators.js";
+
+@customElement("ds4go-catalog-data-holder")
+export class Ds4goCatalogDataHolder extends TemsObjectsHandler {
+  static styles = css`
+    .card-grid {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 20px;
+    }
+    .card-grid-vertical {
+      justify-content: stretch;
+    }
+    .card-grid-vertical ds4go-card-dataspace-catalog {
+      width: 354px;
+      height: auto;
+    }
+    ds4go-card-dataspace-catalog {
+      cursor: pointer;
+    }
+  `;
+
+  @state()
+  view: "card" | "list" | "table" | "map" = "card";
+
+  @state()
+  search: TemsSearchObject[] = [];
+
+  objects: Resource[] = [];
+
+  @state()
+  protected _displayObjects: DSPOffer[] = [];
+
+  protected filter(objects: any[], filters: TemsSearchObject[] = []) {
+    if (!filters || filters.length === 0 || !objects || objects.length === 0) {
+      return objects;
+    }
+
+    const groupedFilters = new Map<string, TemsSearchObject[]>();
+    for (const filter of filters) {
+      const groupKey = filter.name;
+      const group = groupedFilters.get(groupKey) || [];
+      group.push(filter);
+      groupedFilters.set(groupKey, group);
+    }
+
+    let currentFilteredObjects = [...objects];
+
+    for (const filterGroup of groupedFilters.values()) {
+      if (currentFilteredObjects.length === 0) {
+        break;
+      }
+
+      const tempResults = [];
+      for (const filter of filterGroup) {
+        switch (filter.type) {
+          case "interval":
+            tempResults.push(
+              filterObjectByInterval(
+                currentFilteredObjects,
+                filter.name,
+                filter.value,
+              ),
+            );
+            break;
+          case "dateAfter":
+            tempResults.push(
+              filterObjectByDateAfter(
+                currentFilteredObjects,
+                filter.name,
+                filter.value,
+              ),
+            );
+            break;
+          case "matchId":
+            tempResults.push(
+              filterObjectById(
+                currentFilteredObjects,
+                filter.name,
+                filter.value,
+              ),
+            );
+            break;
+          case "matchType":
+            tempResults.push(
+              filterObjectByType(currentFilteredObjects, filter.value),
+            );
+            break;
+          case "exact":
+            tempResults.push(
+              filterObjectByNamedValue(
+                currentFilteredObjects,
+                filter.name,
+                filter.value,
+              ),
+            );
+            break;
+          default:
+            tempResults.push(
+              filterObjectByValue(currentFilteredObjects, filter.value),
+            );
+        }
+      }
+      currentFilteredObjects = [...tempResults.flat()];
+    }
+
+    return currentFilteredObjects;
+  }
+
+  protected _handleClickEvent(originalObj: Resource) {
+    this.dispatchEvent(new CustomEvent("clicked", { detail: originalObj }));
+  }
+
+  willUpdate(changedProperties: PropertyValues) {
+    if (changedProperties.has("objects") || changedProperties.has("search")) {
+      const filteredObjects = this.filter(this.objects, this.search);
+      this.dispatchEvent(
+        new CustomEvent("result-count", { detail: filteredObjects.length }),
+      );
+
+      this._displayObjects = filteredObjects as DSPOffer[];
+    }
+  }
+
+  render() {
+    if (!this._displayObjects || this._displayObjects.length === 0) {
+      return nothing;
+    }
+
+    return html`<div
+      class="card-grid${this.view === "card" ? " card-grid-vertical" : ""}"
+    >
+      ${this._displayObjects.map((dspOffer) => {
+        return html`<ds4go-card-dataspace-catalog
+          .object=${dspOffer}
+          type=${this.view === "card" ? "card" : "horizontal"}
+          @click=${() => this._handleClickEvent(dspOffer as Resource)}
+        ></ds4go-card-dataspace-catalog>`;
+      })}
+    </div>`;
+  }
+}

package/src/components/catalog/ds4go-fact-holder.ts

@@ -0,0 +1,149 @@
+import {
+  ComponentObjectsHandler,
+  filterObjectByDateAfter,
+  filterObjectById,
+  filterObjectByInterval,
+  filterObjectByNamedValue,
+  filterObjectByType,
+  filterObjectByValue,
+} from "@helpers";
+import type { Fact } from "@src/ds4go";
+import type { Resource, SearchObject, UnknownResource } from "@src/component";
+import { css, html, nothing, type PropertyValues } from "lit";
+import { customElement, state } from "lit/decorators.js";
+
+@customElement("ds4go-fact-holder")
+export class Ds4goFactHolder extends ComponentObjectsHandler {
+  static styles = css`
+    .card-grid {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 20px;
+    }
+    .card-grid-vertical {
+      justify-content: stretch;
+    }
+    .card-grid-vertical ds4go-card-fact {
+      width: 354px;
+      height: auto;
+    }
+  `;
+
+  @state()
+  search: SearchObject[] = [];
+
+  @state()
+  protected _displayObjects: Resource[] = [];
+
+  protected filter(objects: Resource[], filters: SearchObject[] = []) {
+    if (!filters || filters.length === 0 || !objects || objects.length === 0) {
+      return objects;
+    }
+
+    const groupedFilters = new Map<string, SearchObject[]>();
+    for (const filter of filters) {
+      const groupKey = filter.name;
+      const group = groupedFilters.get(groupKey) || [];
+      group.push(filter);
+      groupedFilters.set(groupKey, group);
+    }
+
+    let currentFilteredObjects = [...objects];
+
+    for (const filterGroup of groupedFilters.values()) {
+      if (currentFilteredObjects.length === 0) {
+        break;
+      }
+
+      const tempResults: UnknownResource[] = [];
+      for (const filter of filterGroup) {
+        switch (filter.type) {
+          case "interval":
+            tempResults.push(
+              filterObjectByInterval(
+                currentFilteredObjects,
+                filter.name,
+                filter.value,
+              ),
+            );
+            break;
+          case "dateAfter":
+            tempResults.push(
+              filterObjectByDateAfter(
+                currentFilteredObjects,
+                filter.name,
+                filter.value,
+              ),
+            );
+            break;
+          case "matchId":
+            tempResults.push(
+              filterObjectById(
+                currentFilteredObjects,
+                filter.name,
+                filter.value,
+              ),
+            );
+            break;
+          case "matchType":
+            tempResults.push(
+              filterObjectByType(currentFilteredObjects, filter.value),
+            );
+            break;
+          case "exact":
+            tempResults.push(
+              filterObjectByNamedValue(
+                currentFilteredObjects,
+                filter.name,
+                filter.value,
+              ),
+            );
+            break;
+          default:
+            tempResults.push(
+              filterObjectByValue(currentFilteredObjects, filter.value),
+            );
+        }
+      }
+      currentFilteredObjects = [...tempResults.flat()] as Resource[];
+    }
+
+    return currentFilteredObjects;
+  }
+
+  protected _handleClickEvent(originalObj: Resource) {
+    this.dispatchEvent(new CustomEvent("clicked", { detail: originalObj }));
+  }
+
+  willUpdate(changedProperties: PropertyValues) {
+    if (changedProperties.has("objects") || changedProperties.has("search")) {
+      if (this.objects) {
+        this._displayObjects = this.filter(this.objects, this.search);
+      } else {
+        this._displayObjects = [];
+      }
+      this.dispatchEvent(
+        new CustomEvent("result-count", {
+          detail: this._displayObjects.length,
+        }),
+      );
+    }
+  }
+
+  render() {
+    if (!this._displayObjects || this._displayObjects.length === 0) {
+      return nothing;
+    }
+
+    return html`<div class="card-grid card-grid-vertical">
+      ${this._displayObjects.map((displayObj) => {
+        const fact = displayObj as Fact;
+        return html`<ds4go-card-fact
+          .object=${import.meta.env.DEV ? fact : nothing}
+          @click=${() => this._handleClickEvent(fact)}
+        ></ds4go-card-fact>`;
+      })}
+    </div>`;
+  }
+}

package/src/components/modal/catalog-modal/agreement-info.ts

@@ -0,0 +1,110 @@
+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 type { DSPOffer, AgreementInfo } from "@src/ds4go";
+
+/**
+ * Agreement info component for displaying contract agreement details
+ */
+@customElement("catalog-modal-agreement-info")
+@localized()
+export class CatalogModalAgreementInfo extends LitElement {
+  @property({ attribute: false })
+  offer?: DSPOffer;
+
+  @property({ attribute: false })
+  agreementInfo?: AgreementInfo;
+
+  @property({ attribute: false })
+  contractId?: string;
+
+  private _handleRenewContract(): void {
+    this.dispatchEvent(
+      new CustomEvent("renew-contract", {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  render(): TemplateResult | typeof nothing {
+    // Only show if we have agreement info
+    if (!this.contractId || !this.agreementInfo) {
+      return nothing;
+    }
+
+    const agreementDate = this.agreementInfo.timestamp
+      ? new Date(this.agreementInfo.timestamp).toLocaleString()
+      : null;
+
+    // Get endpoint URL from asset
+    const endpointUrl = this.offer?.["dcat:endpointUrl"];
+
+    return html`<div
+      style="margin-top: 24px; padding: 16px; background: #e8f5e9; border-radius: 8px;"
+    >
+      <tems-division type="h4"
+        ><div>${msg("Contract Agreement")}</div></tems-division
+      >
+      <div style="font-size: 0.9em; margin-top: 12px;">
+        <div style="margin-bottom: 8px;">
+          <strong>✅ ${msg("Agreement ID:")}</strong>
+          <div
+            style="font-family: monospace; background: white; padding: 8px; border-radius: 4px; margin-top: 4px; word-break: break-all;"
+          >
+            ${this.contractId}
+          </div>
+        </div>
+
+        ${endpointUrl
+          ? html`
+              <div style="margin-bottom: 8px;">
+                <strong>🔗 ${msg("Endpoint URL:")}</strong>
+                <div
+                  style="font-family: monospace; background: white; padding: 8px; border-radius: 4px; margin-top: 4px; word-break: break-all;"
+                >
+                  ${endpointUrl}
+                </div>
+              </div>
+            `
+          : nothing}
+        ${agreementDate
+          ? html`
+              <div style="opacity: 0.8; font-size: 0.85em;">
+                <strong>${msg("Agreed on:")}</strong> ${agreementDate}
+              </div>
+            `
+          : nothing}
+      </div>
+
+      <div
+        style="margin-top: 12px; padding: 12px; background: rgba(0,0,0,0.05); border-radius: 4px; font-size: 0.85em;"
+      >
+        <div style="margin-bottom: 4px;">
+          <strong>ℹ️ ${msg("Note:")}</strong>
+        </div>
+        <div>
+          ${msg(
+            "You can now use this agreement ID to access the service through the provider's API or data gateway.",
+          )}
+        </div>
+      </div>
+
+      ${this.agreementInfo
+        ? html`
+            <div
+              style="margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.1);"
+            >
+              <button
+                @click=${this._handleRenewContract}
+                style="font-size: 0.85em; color: #666; background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0;"
+              >
+                🔄 ${msg("Renegotiate contract")}
+              </button>
+            </div>
+          `
+        : nothing}
+    </div>`;
+  }
+}

package/src/components/modal/catalog-modal/index.ts

@@ -0,0 +1,4 @@
+export { CatalogModalPolicySelection } from "./policy-selection";
+export { CatalogModalPolicyDisplay } from "./policy-display";
+export { CatalogModalAgreementInfo } from "./agreement-info";
+export { CatalogModalNegotiationButton } from "./negotiation-button";

package/src/components/modal/catalog-modal/negotiation-button.ts

@@ -0,0 +1,111 @@
+import { localized, msg } from "@lit/localize";
+import { html, type TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { LitElement } from "lit";
+
+/**
+ * Negotiation button component for handling DSP contract negotiation UI
+ */
+@customElement("catalog-modal-negotiation-button")
+@localized()
+export class CatalogModalNegotiationButton extends LitElement {
+  @property({ attribute: false })
+  dspStore?: any;
+
+  @property({ attribute: false })
+  showPolicySelection = false;
+
+  @property()
+  negotiationStatus:
+    | "idle"
+    | "negotiating"
+    | "pending"
+    | "granted"
+    | "failed"
+    | "transferring" = "idle";
+
+  @property()
+  currentState?: string;
+
+  @property()
+  attempt?: number;
+
+  @property()
+  maxAttempts?: number;
+
+  @property()
+  negotiationError?: string;
+
+  private _handleNegotiate(): void {
+    this.dispatchEvent(
+      new CustomEvent("negotiate", {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleRetry(): void {
+    this.dispatchEvent(
+      new CustomEvent("retry", {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  render(): TemplateResult {
+    const hasDspConnector =
+      this.dspStore !== undefined && this.dspStore !== null;
+
+    if (!hasDspConnector) {
+      return html`<tems-button disabled=""
+        >${msg("Activate this service")}</tems-button
+      >`;
+    }
+
+    switch (this.negotiationStatus) {
+      case "idle":
+        return html`<tems-button @click=${this._handleNegotiate}
+          >${msg("Negotiate access")}</tems-button
+        >`;
+
+      case "negotiating":
+        return html`<tems-button disabled="">
+          ${msg("Negotiating...")}
+        </tems-button>`;
+
+      case "pending":
+        return html`<tems-button disabled="">
+          ${this.currentState || msg("Pending")}
+          ${this.attempt ? `(${this.attempt}/${this.maxAttempts})` : ""}
+        </tems-button>`;
+
+      case "granted": {
+        return html`
+          <tems-button disabled="" type="success">
+            ✅ ${msg("Access Granted")}
+          </tems-button>
+        `;
+      }
+
+      case "failed":
+        return html`<div
+          style="display: flex; flex-direction: column; gap: 8px;"
+        >
+          <tems-button disabled="" type="error">
+            ❌ ${msg("Failed")}:
+            ${this.negotiationError || msg("Unknown error")}
+          </tems-button>
+          <tems-button @click=${this._handleRetry} type="outline-gray">
+            ${msg("Retry")}
+          </tems-button>
+        </div>`;
+
+      default:
+        return html`<tems-button disabled=""
+          >${msg("Activate this service")}</tems-button
+        >`;
+    }
+  }
+}