@startinblox/components-ds4go 3.2.1 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startinblox/components-ds4go",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "description": "Startin'blox DS4GO",
   "main": "dist/index.js",
   "type": "module",

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

@@ -0,0 +1,256 @@
+import Ds4goCardCatalogStyle from "@styles/cards/ds4go-card-dataspace-catalog.scss?inline";
+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 }[];
+};
+
+@customElement("ds4go-card-dataspace-catalog")
+export class Ds4goCardCatalog extends LitElement {
+  static styles = css`
+    ${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"] = [];
+
+  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 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>`;
+    }
+    return nothing;
+  }
+
+  private renderLogo() {
+    if (this.logoOnTop && this.orgLogo) {
+      return html`<div
+        class="orgLogo"
+        style="background-image: url(${this.orgLogo})"
+      ></div>`;
+    }
+    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>`;
+    }
+    return nothing;
+  }
+
+  private renderLangDate() {
+    if (!this.date && !this.language) return nothing;
+
+    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>`;
+  }
+
+  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()}
+      <main>
+        ${this.renderLogo()} ${this.renderLangDate()} ${this.renderContent()}
+        ${this.renderAddressAndSource()} ${this.renderSource()}
+        ${this.renderTags()}
+      </main>
+      <div class="action"><slot></slot></div>
+    </article>`;
+  }
+}

package/src/components/catalog/ds4go-dsif-explorer-poc-holder.ts

@@ -199,10 +199,12 @@ export class Ds4goDsifExplorerPocHolder extends LitElement {
     }
 
     if (dataset["dspace:assetId"]) {
+      let assetId = dataset["dspace:assetId"].split(":").pop() || dataset["dspace:assetId"];
+      if(assetId.length > 10) {
+        assetId = assetId.substring(0, 7) + "...";
+      }
       tags.push({
-        name:
-          dataset["dspace:assetId"].split(":").pop() ||
-          dataset["dspace:assetId"],
+        name: assetId,
         type: "neutral",
       });
     }

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

@@ -0,0 +1,349 @@
+import type { Ds4goCardCatalogProps } from "@components/cards/ds4go-card-dataspace-catalog";
+import {
+  filterObjectByDateAfter,
+  filterObjectById,
+  filterObjectByInterval,
+  filterObjectByNamedValue,
+  filterObjectByType,
+  filterObjectByValue,
+} from "@helpers";
+import { msg } from "@lit/localize";
+import type { Resource } from "@src/component";
+import {
+  rdf,
+  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: (
+    | rdf.Object_3DObject
+    | rdf.Object_MediaObject_CivilSociety
+    | rdf.Object_MediaObject_FactChecking
+    | rdf.Object_MediaObject_InteractiveInfographics
+    | rdf.Object_MediaObject_Stories
+    | rdf.Provider
+    | rdf.Service
+    | rdf.DataOffer
+  )[] = [];
+
+  @state()
+  protected _displayObjects: (Ds4goCardCatalogProps & { original: Resource })[] =
+    [];
+
+  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 _getProp(obj: Resource, ...names: string[]) {
+    if (!obj) return undefined;
+    for (const name of names) {
+      if (name in obj) {
+        return obj[name];
+      }
+    }
+    return undefined;
+  }
+
+  protected _areSameType(objects: Resource[] = this.objects): boolean {
+    if (!objects || objects.length === 0) {
+      return true;
+    }
+
+    const firstType = objects[0]["@type"];
+    for (const obj of objects) {
+      const objType = obj["@type"];
+
+      if (Array.isArray(firstType) && Array.isArray(objType)) {
+        if (
+          firstType.length !== objType.length ||
+          !firstType.every((val, index) => val === objType[index])
+        ) {
+          return false;
+        }
+      } else if (Array.isArray(firstType) && !Array.isArray(objType)) {
+        return false;
+      } else if (!Array.isArray(firstType) && Array.isArray(objType)) {
+        return false;
+      } else if (objType !== firstType) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  protected _typeToString(types: string[]) {
+    return types
+      .map((type) => rdf.typeMap[type])
+      .filter(String)
+      .join("");
+  }
+
+  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 }),
+      );
+      const objectsAreSameType = this._areSameType(filteredObjects);
+
+      this._displayObjects = filteredObjects.map((obj) => {
+        const getter = (propName: string, ...fallbackNames: string[]) =>
+          this._getProp(obj, propName, ...fallbackNames);
+
+        const tags: (
+          | string
+          | { name: string; type?: string; color?: string }
+        )[] = [];
+
+        // Add provider badge for DSP datasets (provider discrimination)
+        const providerName = getter("_provider");
+        const providerColor = getter("_providerColor");
+        if (providerName) {
+          tags.push({
+            name: providerName,
+            type: "provider",
+            color: providerColor,
+          });
+        }
+
+        let categories = getter("categories", "keywords");
+        let firstCategory = "";
+        if (categories) {
+          if (!Array.isArray(categories)) categories = [categories];
+
+          if (
+            !(!objectsAreSameType && this.hasType(rdf.RDFTYPE_OBJECT, [obj])) &&
+            categories.length > 0 &&
+            !this.hasType(rdf.RDFTYPE_PROVIDER, [obj]) &&
+            !this.hasType(rdf.RDFTYPE_DATAOFFER, [obj])
+          ) {
+            firstCategory = categories[0]?.name;
+            tags.push(
+              ...categories.slice(1).map((c: rdf.NamedResource) => c.name),
+            );
+          } else {
+            tags.push(...categories.map((c: rdf.NamedResource) => c.name));
+          }
+        }
+
+        let location = "";
+        if (this.hasType(rdf.RDFTYPE_3D_OBJECT, [obj])) {
+          if (getter("is_low_polygons")) {
+            tags.push(msg("Low-poly (<10k polygones)"));
+          }
+          if (getter("ai")) {
+            tags.push(msg("AI-generated"));
+          }
+          if (getter("texture")) {
+            tags.push(getter("texture"));
+          }
+          location = getter("location")?.country;
+        }
+
+        let images = getter("images", "image");
+        if (!Array.isArray(images)) images = [images];
+        images = images.filter((p: rdf.Image) => p?.url && !p?.iframe);
+
+        let language = getter("language", "original_languages", "prices");
+        if (typeof language !== "string") {
+          language = language?.name || "";
+        }
+
+        // Get endpoint URL and content type for DSP assets
+        const endpointUrl = getter("endpointUrl", "url");
+        const contentType = getter("contentType", "contenttype");
+
+        // Add content type as tag if available
+        if (
+          contentType &&
+          !tags.some((t) =>
+            typeof t === "string" ? t === contentType : t.name === contentType,
+          )
+        ) {
+          tags.push({
+            name: contentType,
+            type: "contentType",
+            color: "#607d8b",
+          });
+        }
+
+        // Build description with endpoint URL for DSP assets
+        let description = getter("description") || "";
+        if (endpointUrl && !description) {
+          description = endpointUrl;
+        }
+
+        const cardProps: Ds4goCardCatalogProps = {
+          backgroundImg: this.hasType(rdf.RDFTYPE_PROVIDER, [obj])
+            ? false
+            : images?.filter((p: rdf.Image) => p?.url && !p?.iframe)?.[0]?.url,
+          orgLogo: this.hasType(rdf.RDFTYPE_PROVIDER, [obj])
+            ? images?.filter((p: rdf.Image) => p?.url && !p?.iframe)?.[0]?.url
+            : getter("providers")?.filter(
+                (p: rdf.Provider) => p.image?.url && !p.image?.iframe,
+              )?.[0]?.image?.url,
+          logoOnTop: !this.hasType(rdf.RDFTYPE_OBJECT, [obj]),
+          badge:
+            !objectsAreSameType && this.hasType(rdf.RDFTYPE_OBJECT, [obj])
+              ? this._typeToString([getter("@type")].flat())
+              : firstCategory,
+          tags: tags.filter((t) => t) as string[],
+          header: getter("name", "title"),
+          content: description,
+          isFullSize: true,
+          date: this.hasType(rdf.RDFTYPE_3D_OBJECT, [obj])
+            ? getter("licences")
+                ?.map((l: rdf.Licence) => l.name)
+                .join(", ")
+            : getter("publication_date", "release_date", "creation_date"),
+          language: language,
+          address: endpointUrl || location,
+          source: this.hasType(rdf.RDFTYPE_OBJECT, [obj])
+            ? getter("affiliation")?.name ||
+              getter("providers")
+                ?.map((p: rdf.Provider) => p.name)
+                .join(", ")
+            : "",
+        };
+
+        return { ...cardProps, original: obj };
+      });
+    }
+  }
+
+  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((displayObj) => {
+        return html`<ds4go-card-dataspace-catalog
+          .object=${import.meta.env.DEV ? displayObj.original : nothing}
+          type=${this.view === "card" ? "card" : "horizontal"}
+          background-img=${displayObj.backgroundImg || nothing}
+          org-logo=${displayObj.orgLogo || nothing}
+          .logoOnTop=${displayObj.logoOnTop || nothing}
+          .badge=${displayObj.badge || nothing}
+          .tags=${displayObj.tags || nothing}
+          .header=${displayObj.header || nothing}
+          .content=${displayObj.content || nothing}
+          .isFullSize=${displayObj.isFullSize || nothing}
+          date=${displayObj.date || nothing}
+          language=${displayObj.language || nothing}
+          address=${displayObj.address || nothing}
+          source=${displayObj.source || nothing}
+          @click=${() => this._handleClickEvent(displayObj.original)}
+        ></ds4go-card-dataspace-catalog>`;
+      })}
+    </div>`;
+  }
+}