@startinblox/components-ds4go 4.0.0 → 4.1.0

package/locales/en.xlf

@@ -404,6 +404,64 @@
 <trans-unit id="sc01b3f089359860d">
   <source>Premium tier (40 calls/month)</source>
 </trans-unit>
+<trans-unit id="s43d205c00fad9f7e">
+  <source>+<x id="0" equiv-text="${totalCategories - 3} ${msg(&quot;more&quot;)}"/></source>
+</trans-unit>
+<trans-unit id="s984a5e18d85b6d57">
+  <source><x id="0" equiv-text="${mediaCount} ${mediaCount &gt; 1 ? msg(&quot;medias&quot;) : msg(&quot;media&quot;)}"/></source>
+</trans-unit>
+<trans-unit id="sc792eb5e201cf4d0">
+  <source>medias</source>
+</trans-unit>
+<trans-unit id="sb333b8c7b846af83">
+  <source>media</source>
+</trans-unit>
+<trans-unit id="s09134b07b5aacab4">
+  <source>By</source>
+</trans-unit>
+<trans-unit id="sa5a5964988fb72cf">
+  <source>Yes, generate it!</source>
+</trans-unit>
+<trans-unit id="s06444a51bc5db27f">
+  <source>AI-Video generated!</source>
+</trans-unit>
+<trans-unit id="s11a98d9043541ac5">
+  <source>Your AI-Generated video has been generated and is available in your Tralalère space.</source>
+</trans-unit>
+<trans-unit id="s59faae16854d9291">
+  <source>Video already generated</source>
+</trans-unit>
+<trans-unit id="sb0bf78dc704ac07e">
+  <source>Generate an AI-Video with Tralalère (5€)</source>
+</trans-unit>
+<trans-unit id="sbe35fa6868f5d8c6">
+  <source>Published on</source>
+</trans-unit>
+<trans-unit id="s2a1231c2978c689e">
+  <source>Open link on a new tab</source>
+</trans-unit>
+<trans-unit id="s7d83729075105484">
+  <source>Media files</source>
+</trans-unit>
+<trans-unit id="s2cc7cd11d9b856cd">
+  <source>Categories</source>
+</trans-unit>
+<trans-unit id="s53cbe88b59dd0d59">
+  <source>Updated on</source>
+</trans-unit>
+<trans-unit id="s32375c74e64909b5">
+  <source>Generate with Tralalère</source>
+</trans-unit>
+<trans-unit id="s428d999c913eaca6">
+  <source>This will create an AI-Generated video of this fact.
+You will be charged 5€ on your account.</source>
+</trans-unit>
+<trans-unit id="s8bf481a0b5d8a689">
+  <source>Generating...</source>
+</trans-unit>
+<trans-unit id="s638b60dba93b07ef">
+  <source>Please wait while Tralalère generates your AI-Video...</source>
+</trans-unit>
 </body>
 </file>
 </xliff>

package/package.json

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

package/src/component.d.ts

@@ -317,11 +317,6 @@ export interface PolicyDefinition {
   policy?: OdrlPolicy;
 }
 
-export interface Asset {
-  "@id": string;
-  properties?: Record<string, any>;
-}
-
 // DSIF-specific types
 export interface DSIFRootAuthoritySector {
   sectorName: string;

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-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/ds4go-fact-modal.ts

@@ -0,0 +1,217 @@
+import { formatDate, formatCase, OrbitComponent } from "@helpers";
+import { localized, msg } from "@lit/localize";
+import { Task } from "@lit/task";
+import { PropertiesPicker } from "@src/component";
+import type { Category, Fact } from "@src/ds4go";
+
+import ModalStyle from "@styles/modal/ds4go-fact-modal.scss?inline";
+import { css, html, nothing, unsafeCSS } from "lit";
+import { customElement, state } from "lit/decorators.js";
+
+@customElement("ds4go-fact-modal")
+@localized()
+export class Ds4goFactModal extends OrbitComponent {
+  constructor() {
+    super({ setupSubscriptions: false, ignoreRouter: true });
+  }
+
+  static styles = css`
+    ${unsafeCSS(ModalStyle)}
+  `;
+
+  cherryPickedProperties: PropertiesPicker[] = [
+    { key: "created_at", value: "created_at" },
+    { key: "updated_at", value: "updated_at", cast: formatDate },
+    { key: "name", value: "name" },
+    { key: "description", value: "description" },
+    { key: "author", value: "author" },
+    { key: "link", value: "link" },
+    { key: "enclosure", value: "enclosure" },
+    { key: "categories", value: "categories", expand: true },
+    { key: "medias", value: "medias", expand: true },
+    { key: "url", value: "url" },
+    // { key: "file_size", value: "file_size" },
+    // { key: "file_type", value: "file_type" },
+    // { key: "width", value: "width" },
+    // { key: "height", value: "height" },
+    // Can't get raw review json, as store does not support datas without ids
+    // { key: "review", value: "review" },
+  ];
+
+  @state()
+  disableButton = false;
+
+  _generateVideo() {
+    this.orbit?.Swal.fire({
+      title: msg("Generate with Tralalère"),
+      text: msg(
+        "This will create an AI-Generated video of this fact.\nYou will be charged 5€ on your account.",
+      ),
+      icon: "warning",
+      position: "center",
+      backdrop: true,
+      showCancelButton: true,
+      confirmButtonText: msg("Yes, generate it!"),
+      cancelButtonText: msg("Cancel"),
+      customClass: {
+        confirmButton:
+          "button text-xsmall text-bold text-center reversed color-secondary bordered icon icon-check icon-margin-right-xsmall no-background-image",
+        cancelButton:
+          "button text-xsmall text-bold text-center reversed color-primary bordered icon icon-exclamation icon-margin-right-xsmall no-background-image",
+      },
+    }).then((result: any) => {
+      if (result.isConfirmed) {
+        this.orbit?.Swal.fire({
+          title: msg("Generating..."),
+          text: msg("Please wait while Tralalère generates your AI-Video..."),
+          icon: "info",
+          showConfirmButton: false,
+          allowOutsideClick: false,
+          allowEscapeKey: false,
+          allowEnterKey: false,
+        });
+        setTimeout(() => {
+          this.orbit?.Swal.fire({
+            title: msg("AI-Video generated!"),
+            text: msg(
+              "Your AI-Generated video has been generated and is available in your Tralalère space.",
+            ),
+            icon: "success",
+          });
+          this.disableButton = true;
+        }, 2500);
+      }
+    });
+  }
+
+  _closeModal() {
+    this.dispatchEvent(new CustomEvent("close"));
+  }
+
+  _getResource = new Task(this, {
+    task: async () => {
+      if (!this.object) return;
+
+      this.object = await this._getProxyValue(this.object["@id"]);
+
+      return this.object;
+    },
+    args: () => [this.caching, this.currentRoute],
+  });
+
+  render() {
+    return this._getResource.render({
+      pending: () => html`<solid-loader></solid-loader>`,
+      complete: (obj?: Fact) => {
+        if (!obj) {
+          this._closeModal();
+          return nothing;
+        }
+
+        const formattedDate = formatDate(obj.created_at, {
+          year: "numeric",
+          month: "long",
+          day: "numeric",
+          hour: "2-digit",
+          minute: "2-digit",
+          hour12: false,
+        });
+
+        return html`<div class="modal">
+          <div class="topbar">
+            <tems-button
+              @click=${this._closeModal}
+              type="outline-gray"
+              .iconLeft=${html`<icon-material-symbols-close-rounded></icon-material-symbols-close-rounded>`}
+            ></tems-button>
+            <tems-button
+              @click=${this._generateVideo}
+              disabled=${this.disableButton || nothing}
+              >${this.disableButton
+                ? msg("Video already generated")
+                : msg("Generate an AI-Video with Tralalère (5€)")}</tems-button
+            >
+          </div>
+          <div class="modal-content-wrapper">
+            <div class="modal-box">
+              <div class="modal-content">
+                ${obj.enclosure
+                  ? html`<div class="cover-image">
+                      <img src=${String(obj.enclosure)} alt="Cover image" />
+                    </div>`
+                  : nothing}
+                ${obj.author
+                  ? html`<tems-division type="body-sm" class="author-section">
+                      <div>
+                        ${msg("Published on")} ${formattedDate} | ${msg("By")}
+                        ${String(obj.author)}
+                      </div>
+                    </tems-division>`
+                  : nothing}
+                <tems-division type="h3"
+                  ><div>${String(obj.name || "")}</div></tems-division
+                >
+                <tems-division type="body-m"
+                  ><div>${String(obj.description || "")}</div></tems-division
+                >
+                ${obj.link
+                  ? html`<tems-division type="body-sm">
+                      <tems-button
+                        type="outline-color"
+                        .label=${msg("Open link on a new tab")}
+                        @click=${() => window.open(String(obj.link), "_blank")}
+                      ></tems-button>
+                    </tems-division>`
+                  : nothing}
+                ${(obj.medias || []).length > 0
+                  ? html`<tems-division type="h4"
+                        >${msg("Media files")}</tems-division
+                      >
+                      <div class="medias-gallery">
+                        ${(obj.medias || []).map(
+                          (media: any) =>
+                            html`<div class="media-item">
+                              ${media.url
+                                ? html`<img
+                                    src=${String(media.url)}
+                                    alt=${media.description || "Media"}
+                                    @click=${() =>
+                                      window.open(String(media.url), "_blank")}
+                                  />`
+                                : nothing}
+                            </div>`,
+                        )}
+                      </div>`
+                  : nothing}
+                ${(obj.categories || []).length > 0
+                  ? html`<tems-division type="h4"
+                        >${msg("Categories")}</tems-division
+                      >
+                      <div class="categories-list">
+                        ${(obj.categories || []).map(
+                          (c: Category) =>
+                            html`<tems-badge type="neutral" size="sm"
+                              >${formatCase(String(c.name))}</tems-badge
+                            >`,
+                        )}
+                      </div>`
+                  : nothing}
+                <tems-division type="body-sm"
+                  ><div>
+                    <div>${msg("Updated on")} ${String(obj.updated_at)}</div>
+                  </div></tems-division
+                >
+              </div>
+            </div>
+          </div>
+        </div>`;
+      },
+      error: (e) => {
+        if (import.meta.env.DEV) {
+          console.error(e, this);
+        }
+        return nothing;
+      },
+    });
+  }
+}