@startinblox/components-ds4go 3.3.7 → 4.0.0

package/src/styles/cards/ds4go-card-dataspace-catalog.scss

@@ -19,197 +19,54 @@ article {
   width: 100%;
   display: flex;
   font-family: var(--font-family-body);
-  &.vertical {
-    min-width: 295px;
-    .card-content {
-      max-height: 180px;
-      tems-division {
-        max-height: 180px;
-      }
-    }
-  }
-  &.horizontal,
-  &.billImage {
-    header {
-      width: auto;
-      border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
-    }
-    header.image {
-      flex-shrink: 0;
-      width: 33%;
-      height: 100%;
-    }
-    main {
-      flex-grow: 1;
-      .card-content {
-        max-height: 78px;
-        tems-division {
-          max-height: 78px;
-        }
-      }
-    }
-  }
-  &.billImage {
-    header.image {
-      width: 50%;
-    }
-    .card-content {
-      max-height: 206px;
-      tems-division {
-        max-height: 206px;
-      }
-    }
-  }
+  min-width: 295px;
+  flex-direction: column;
+
   header {
     display: flex;
     background-repeat: no-repeat;
-    background-size: cover;
+    background-size: contain;
     background-position: center center;
     box-sizing: border-box;
+    padding: var(--scale-400);
     width: 100%;
-    padding: 16px;
+    border-bottom: var(--border-width-sm) solid var(--color-border-primary);
+    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
+    height: 167px;
+  }
+
+  .card-content {
+    max-height: 180px;
+    tems-division {
+      max-height: 180px;
+    }
   }
+
   main {
     display: flex;
     flex-direction: column;
     gap: var(--scale-400);
     flex: 1;
+    padding: var(--scale-600);
+    padding-bottom: var(--scale-800);
+
     .content {
       flex: 1;
     }
-    .orgLogo {
-      background-repeat: no-repeat;
-      background-size: contain;
-      background-position: center center;
-      width: 48px;
-      height: 48px;
-    }
+
     .card-content {
       flex-grow: 1;
       overflow: hidden;
       text-overflow: ellipsis;
       width: 100%;
     }
-    .address-line {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: end;
-      width: 100%;
-      > div:first-child {
-        flex: 1;
-        display: flex;
-        gap: 16px;
-        flex-direction: column;
-      }
-    }
-    .lang-date {
-      width: fit-content;
-      display: flex;
-      gap: 24px;
-      flex-direction: row;
-      color: var(--color-text-disabled-on);
-      font-size: var(--typography-size-body-sm);
-
-      font-weight: var(--font-weight-regular);
-      line-height: var(--line-height-body-sm);
-      text-transform: uppercase;
-    }
-    .address,
-    .source-logo {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: var(--scale-200);
-      color: var(--color-text-information);
-      font-size: var(--typography-size-body-sm);
-      font-style: normal;
-      font-weight: var(--font-weight-regular);
-      line-height: var(--line-height-body-sm);
-      text-decoration: underline;
-      a {
-        color: var(--color-text-information);
-      }
-      svg {
-        color: var(--color-text-information);
-        width: var(--icon-size-sm);
-        height: var(--icon-size-sm);
-        display: flex;
-      }
-      .source,
-      .logo {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: var(--scale-200);
-      }
-      // logo image in source block
-      .logo {
-        margin-left: auto;
-        background-repeat: no-repeat;
-        background-size: contain;
-        background-position: center center;
-        width: 76px;
-        height: 24px;
-      }
-    }
   }
-  .tags,
-  .action {
+
+  .tags {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     align-items: flex-start;
     gap: var(--scale-200);
   }
-  .action ::slotted(*) {
-    width: 100%;
-    padding: var(--scale-400);
-    border-top: var(--border-width-sm) solid var(--color-border-primary);
-  }
-  .action slot:not(:has-slotted) {
-    display: none;
-  }
-
-  &.vertical {
-    flex-direction: column;
-    header {
-      width: 100%;
-      border-bottom: var(--border-width-sm) solid var(--color-border-primary);
-      border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
-      &.image {
-        height: 167px;
-      }
-    }
-    main {
-      padding: var(--scale-600);
-      padding-bottom: var(--scale-800);
-    }
-    
-  }
-
-  &.vertical,
-  &.billImage {
-    .lang-date {
-      width: 100%;
-      justify-content: space-between;
-    }
-  }
-
-  &.horizontal,
-  &.billImage {
-    
-    main {
-      padding: var(--scale-600);
-      padding-bottom: var(--scale-800);
-      
-
-      .source-logo .logo {
-        margin-left: 0px;
-      }
-    }
-  }
-  div:has(slot:not(:has-slotted)) {
-    display: none;
-  }
 }

package/src/styles/modal/ds4go-catalog-modal.scss

@@ -38,7 +38,7 @@ svg {
     flex-direction: row;
     gap: var(--scale-400);
 
-    tems-button:nth-child(2) {
+    catalog-modal-negotiation-button {
       margin-left: auto;
     }
   }

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

@@ -1,349 +0,0 @@
-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>`;
-  }
-}