@startinblox/components-ds4go 3.3.8 → 4.0.0

package/locales/en.xlf

@@ -245,9 +245,6 @@
 <trans-unit id="s628bb01dd2b078ad">
   <source>No policy template provided</source>
 </trans-unit>
-<trans-unit id="sa37b24eee1d1bc2b">
-  <source>Policy Composer</source>
-</trans-unit>
 <trans-unit id="s23cd949fc2aa86a8">
   <source>Policy Definition</source>
 </trans-unit>
@@ -278,6 +275,135 @@
 <trans-unit id="sef1b3d1d31326b46">
   <source>No category</source>
 </trans-unit>
+<trans-unit id="s971c62c3e06f9d82">
+  <source><x id="0" equiv-text="${previewLinks.length}"/> previews</source>
+</trans-unit>
+<trans-unit id="sf530358a9bd19cee">
+  <source>Agreement ID:</source>
+</trans-unit>
+<trans-unit id="sb4425c5c4fac54b5">
+  <source>Endpoint URL:</source>
+</trans-unit>
+<trans-unit id="s2848302a2185c3c0">
+  <source>Agreed on:</source>
+</trans-unit>
+<trans-unit id="s00500cd82b70b565">
+  <source>Note:</source>
+</trans-unit>
+<trans-unit id="sf37d51d16fb8905b">
+  <source>You can now use this agreement ID to access the service through the provider's API or data gateway.</source>
+</trans-unit>
+<trans-unit id="s0d0e208e36652416">
+  <source>Renegotiate contract</source>
+</trans-unit>
+<trans-unit id="s49bca1b76261f3ff">
+  <source>Activate this service</source>
+</trans-unit>
+<trans-unit id="sb332ee61b882e577">
+  <source>Negotiate access</source>
+</trans-unit>
+<trans-unit id="s500790e7856278ea">
+  <source>Negotiating...</source>
+</trans-unit>
+<trans-unit id="s78636b92c1a3909c">
+  <source>Pending</source>
+</trans-unit>
+<trans-unit id="s745c3700113d0690">
+  <source>Access Granted</source>
+</trans-unit>
+<trans-unit id="sbf9c5c5a8e5efad4">
+  <source>Failed</source>
+</trans-unit>
+<trans-unit id="s5787e20cab57b383">
+  <source>Unknown error</source>
+</trans-unit>
+<trans-unit id="s95b064f1a3d622cb">
+  <source>Access Policies</source>
+</trans-unit>
+<trans-unit id="sdf84f71cdbae4127">
+  <source>Multiple contract policies available for this asset</source>
+</trans-unit>
+<trans-unit id="sb932583a436a894b">
+  <source>Access Policy</source>
+</trans-unit>
+<trans-unit id="s4a41dc01589d8c48">
+  <source>Select a Policy</source>
+</trans-unit>
+<trans-unit id="s169eedc6d5d9d506">
+  <source>Multiple policies are available for this dataset. Please select one to proceed with the negotiation.</source>
+</trans-unit>
+<trans-unit id="s2ceb11be2290bb1b">
+  <source>Cancel</source>
+</trans-unit>
+<trans-unit id="sc7331901134c794b">
+  <source>This will delete the current contract and start a fresh negotiation. Continue?</source>
+</trans-unit>
+<trans-unit id="s070a952dbfc8cc6d">
+  <source>Duties</source>
+</trans-unit>
+<trans-unit id="sdf761eb7ad16410b">
+  <source>Remove Duty</source>
+</trans-unit>
+<trans-unit id="s1718e3c349bc1d30">
+  <source>Add Duty</source>
+</trans-unit>
+<trans-unit id="s9ffd7cfd1c88fd4e">
+  <source>Custom <x id="0" equiv-text="${this.template.name}"/> policy</source>
+</trans-unit>
+<trans-unit id="s2bed402279cceb12">
+  <source>Cancel policy customization</source>
+</trans-unit>
+<trans-unit id="sb59dc090f2be3796">
+  <source>Reset to <x id="0" equiv-text="${this.template.name}"/> default</source>
+</trans-unit>
+<trans-unit id="sddd8862fc1bdf610">
+  <source>Customize access policy</source>
+</trans-unit>
+<trans-unit id="s9e1971000a6a2270">
+  <source>Customize contract policy</source>
+</trans-unit>
+<trans-unit id="s0865e5a38e856821">
+  <source>No policy details available</source>
+</trans-unit>
+<trans-unit id="s70a26f677dc46e06">
+  <source>Policy ID:</source>
+</trans-unit>
+<trans-unit id="s7b3a70561cec8d75">
+  <source>Type:</source>
+</trans-unit>
+<trans-unit id="s15923994727a0adb">
+  <source>Permissions:</source>
+</trans-unit>
+<trans-unit id="s0772542b009a8be9">
+  <source>Action: <x id="0" equiv-text="${perm[&quot;odrl:action&quot;]?.[&quot;@id&quot;] || perm[&quot;odrl:action&quot;] || msg(&quot;use&quot;)}"/></source>
+</trans-unit>
+<trans-unit id="s4c52b0193dcce634">
+  <source>use</source>
+</trans-unit>
+<trans-unit id="s723a09cb247483aa">
+  <source>Constraint: <x id="0" equiv-text="${c[&quot;odrl:leftOperand&quot;]} ${c[&quot;odrl:operator&quot;]} ${c[&quot;odrl:rightOperand&quot;]}"/></source>
+</trans-unit>
+<trans-unit id="s0885bc9622c48b61">
+  <source>Prohibitions:</source>
+</trans-unit>
+<trans-unit id="s498865c7bd1f3959">
+  <source>unknown</source>
+</trans-unit>
+<trans-unit id="sbde02617664d091c">
+  <source>Obligations:</source>
+</trans-unit>
+<trans-unit id="s5ea7f731936859c6">
+  <source>Target Asset:</source>
+</trans-unit>
+<trans-unit id="s3fca726cbe9998b3">
+  <source>Assigner:</source>
+</trans-unit>
+<trans-unit id="se6f9192c93e67e2f">
+  <source>No redistribution, no commercial use</source>
+</trans-unit>
+<trans-unit id="sc01b3f089359860d">
+  <source>Premium tier (40 calls/month)</source>
+</trans-unit>
 </body>
 </file>
 </xliff>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startinblox/components-ds4go",
-  "version": "3.3.8",
+  "version": "4.0.0",
   "description": "Startin'blox DS4GO",
   "main": "dist/index.js",
   "type": "module",
@@ -69,7 +69,7 @@
     "@inquirer/prompts": "^8.3.0",
     "@lit/localize": "^0.12.2",
     "@lit/task": "^1.0.3",
-    "@startinblox/solid-tems-shared": "^2.1.0",
+    "@startinblox/solid-tems-shared": "^2.1.1",
     "autoprefixer": "^10.4.27",
     "cssnano": "^7.1.3",
     "lit": "^3.3.2",

package/src/components/cards/ds4go-card-dataspace-catalog.ts

@@ -1,25 +1,8 @@
 import Ds4goCardCatalogStyle from "@styles/cards/ds4go-card-dataspace-catalog.scss?inline";
+import type { DSPOffer } from "@src/ds4go";
 import { css, html, LitElement, nothing, unsafeCSS } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-
-export type Ds4goCardCatalogProps = {
-  cardType?: string;
-  isFullSize: boolean;
-  logoOnTop: boolean;
-
-  backgroundImg?: string;
-  orgLogo?: string;
-  address?: string;
-  language?: string;
-  date?: string;
-  source?: string;
-  header?: string;
-  content?: string;
-  badge?: string;
-  tags: string[] | { name: string; type?: string }[];
-};
+import { msg, str } from "@lit/localize";
 
 @customElement("ds4go-card-dataspace-catalog")
 export class Ds4goCardCatalog extends LitElement {
@@ -27,230 +10,102 @@ export class Ds4goCardCatalog extends LitElement {
     ${unsafeCSS(Ds4goCardCatalogStyle)};
   `;
 
-  @property({ attribute: "type", type: String, reflect: true })
-  cardType: Ds4goCardCatalogProps["cardType"] = "vertical";
-
-  @property({ attribute: "address", type: String })
-  address: Ds4goCardCatalogProps["address"];
-
-  @property({ attribute: "language", type: String })
-  language: Ds4goCardCatalogProps["language"];
-
-  @property({ attribute: "date", type: String })
-  date: Ds4goCardCatalogProps["date"];
-
-  @property({ attribute: "source", type: String })
-  source: Ds4goCardCatalogProps["source"];
-
-  @property({ attribute: "background-img", type: String })
-  backgroundImg: Ds4goCardCatalogProps["backgroundImg"];
-
-  @property({ attribute: "org-logo", type: String })
-  orgLogo: Ds4goCardCatalogProps["orgLogo"];
-
-  @property({ attribute: "display-logo", type: Boolean })
-  logoOnTop: Ds4goCardCatalogProps["logoOnTop"] = false;
-
-  @property({ attribute: "full-size", type: Boolean })
-  isFullSize: Ds4goCardCatalogProps["isFullSize"] = false;
-
-  @property({ attribute: "header", type: String })
-  header: Ds4goCardCatalogProps["header"];
-
-  @property({ attribute: "content", type: String })
-  content: Ds4goCardCatalogProps["content"];
-
-  @property({ attribute: "badge", type: String })
-  badge: Ds4goCardCatalogProps["badge"];
-
   @property({ attribute: false })
-  tags: Ds4goCardCatalogProps["tags"] = [];
+  object?: DSPOffer;
 
-  private _getType() {
-    const allowedTypes = ["vertical", "horizontal", "bill-image"];
-    if (!allowedTypes.includes(String(this.cardType))) {
-      this.cardType = "vertical";
-    }
-    return {
-      vertical: this.cardType === "vertical",
-      horizontal: this.cardType === "horizontal",
-      billImage: this.cardType === "bill-image",
-    };
+  private _getThumbnail(): string {
+    // Missing foaf:thumbnail outside of DSIF
+    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 Thumbnail%3C/text%3E%3C/svg%3E";
   }
 
-  private renderImageHeader() {
-    if (this.isFullSize && (this.backgroundImg || this.badge)) {
-      if (this.backgroundImg) {
-        return html`<header
-          class="image"
-          style="background-image: url(${this.backgroundImg})"
-        >
-          ${
-            this.badge
-              ? html`<tems-badge label=${this.badge}></tems-badge>`
-              : nothing
-          }
-        </header>`;
-      }
-      return html`<header>
-        ${
-          this.badge
-            ? html`<tems-badge label=${this.badge}></tems-badge>`
-            : nothing
-        }
-      </header>`;
+  private _getTags() {
+    const tags: {
+      label: string;
+      type: string;
+      color?: string;
+    }[] = [];
+
+    if (this.object?._provider?.name) {
+      tags.push({
+        label: this.object._provider.name,
+        type: "information",
+      });
     }
-    return nothing;
-  }
 
-  private renderLogo() {
-    if (this.logoOnTop && this.orgLogo) {
-      return html`<div
-        class="orgLogo"
-        style="background-image: url(${this.orgLogo})"
-      ></div>`;
+    if (this.object?.category) {
+      tags.push({ label: this.object.category, type: "neutral" });
     }
-    return nothing;
-  }
 
-  private renderTags() {
-    if (!this.tags || this.tags.length === 0) return nothing;
-
-    return html`<div class="tags">
-      ${this.tags
-        .filter((t) => typeof t === "string" || t.name)
-        .map(
-          (tag: string | { name: string; type?: string; color?: string }) =>
-            html`<tems-badge
-              size="sm"
-              label=${typeof tag === "string" ? tag : tag.name}
-              type=${typeof tag !== "string" && ifDefined(tag.type)}
-              color=${typeof tag !== "string" && ifDefined(tag.color)}
-            ></tems-badge>`,
-        )}
-    </div>`;
-  }
-
-  private renderContent() {
-    if (this.header || this.content) {
-      return html`<div class="content">
-        ${
-          this.header
-            ? html`<div class="card-header">
-              <tems-division label=${this.header} type="h4"></tems-division>
-            </div>`
-            : nothing
-        }
-        ${
-          this.content
-            ? html`<div class="card-content">
-              <tems-division
-                label=${this.content}
-                type="body-m"
-              ></tems-division>
-            </div>`
-            : nothing
-        }
-      </div>`;
+    const previewLinks = (this.object?.previewLinks || "").split(" ");
+    if (previewLinks.length > 0) {
+      tags.push({
+        label: msg(str`${previewLinks.length} previews`),
+        type: "information",
+      });
     }
-    return nothing;
-  }
 
-  private renderLangDate() {
-    if (!this.date && !this.language) return nothing;
+    // if (this.object?.contenttype) {
+    //   tags.push({ label: this.object.contenttype, type: "default" });
+    // }
 
-    const date = this.date ? html`<span>${this.date}</span>` : nothing;
-    const language = this.language
-      ? html`<span>${this.language}</span>`
-      : nothing;
-
-    return html`<div class="lang-date">
-      ${
-        this.cardType === "bill-image"
-          ? html`${language}${date}`
-          : html`${date}${language}`
-      }
-    </div>`;
-  }
-
-  private renderSource() {
-    if (!this.source) return nothing;
-
-    return html`<div class="source-logo">
-      <div class="source">
-        <icon-material-symbols-rss-feed-rounded></icon-material-symbols-rss-feed-rounded>
-        ${this.source}
-      </div>
-      ${
-        this.orgLogo && !this.logoOnTop
-          ? html`<div
-            class="logo"
-            style="background-image: url(${this.orgLogo})"
-          ></div>`
-          : nothing
-      }
-    </div>`;
-  }
-
-  private renderAddressAndSource() {
-    if (!this.address && !this.source) return nothing;
-
-    if (this.cardType === "vertical" || this.cardType === "bill-image") {
-      if (!this.address) return nothing;
-      return html`<div class="address">
-        <icon-ic-outline-place></icon-ic-outline-place> ${this.address}
-      </div>`;
-    }
-
-    return html`<div class="address-line">
-      <div>
-        ${
-          this.address
-            ? html`<div class="address">
-              <icon-ic-outline-place></icon-ic-outline-place> ${this.address}
-            </div>`
-            : nothing
-        }
-        ${this.renderSource()}
-      </div>
-      ${this.renderLangDate()}
-    </div>`;
+    return tags;
   }
 
   render() {
-    const classes = {
-      ...this._getType(),
-    };
-
-    if (this.cardType === "horizontal") {
-      return html`<article class=${classMap(classes)}>
-        ${this.renderImageHeader()}
-        <main>
-          ${this.renderLogo()} ${this.renderTags()} ${this.renderContent()}
-          ${this.renderAddressAndSource()}
-        </main>
-      </article>`;
-    }
-
-    if (this.cardType === "bill-image") {
-      return html`<article class=${classMap(classes)}>
-        ${this.renderImageHeader()}
-        <main>
-          ${this.renderLogo()} ${this.renderTags()} ${this.renderSource()}
-          ${this.renderContent()} ${this.renderAddressAndSource()}
-          ${this.renderLangDate()}
-        </main>
-      </article>`;
-    }
-
-    return html`<article class=${classMap(classes)}>
-      ${this.renderImageHeader()}
+    if (!this.object) return nothing;
+    const tags = this._getTags();
+
+    return html`<article class="vertical">
+      <header
+        class="image"
+        style='background-image: url("${this._getThumbnail()}")'
+      ></header>
       <main>
-        ${this.renderLogo()} ${this.renderLangDate()} ${this.renderContent()}
-        ${this.renderAddressAndSource()} ${this.renderSource()}
-        ${this.renderTags()}
+        <div class="tags">
+          <tems-badge
+            type="success"
+            size="sm"
+            label=${this.object.pricingTier}
+          ></tems-badge>
+          <tems-badge
+            type="information"
+            size="sm"
+            label=${`${this.object.bundleSize || 0}
+        ${(this.object.bundleSize || 0) > 1 ? msg("facts") : msg("fact")}`}
+          ></tems-badge>
+        </div>
+        <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}
+        </div>
+        ${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}
       </main>
-      <div class="action"><slot></slot></div>
     </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>`;
+  }
+}