@startinblox/components-ds4go 3.3.2 → 3.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.js +1418 -1898
  2. package/package.json +1 -1
  3. package/src/components/modal/ds4go-catalog-modal.ts +14 -561
  4. package/src/components/solid-dsp-catalog.ts +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@startinblox/components-ds4go",
3
- "version": "3.3.2",
3
+ "version": "3.3.3",
4
4
  "description": "Startin'blox DS4GO",
5
5
  "main": "dist/index.js",
6
6
  "type": "module",
package/src/components/modal/ds4go-catalog-modal.ts CHANGED
@@ -14,8 +14,6 @@ import { customElement, property, state } from "lit/decorators.js";
14
14
  import { ifDefined } from "lit/directives/if-defined.js";
15
15
  import { unsafeHTML } from "lit/directives/unsafe-html.js";
16
16
 
17
- export type Ds4goCatalogModalProps = rdf.ValidM18Object;
18
-
19
17
  @customElement("ds4go-catalog-modal")
20
18
  @localized()
21
19
  export class Ds4goCatalogModal extends TemsObjectHandler {
@@ -23,9 +21,6 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
23
21
  ${unsafeCSS(ModalStyle)}
24
22
  `;
25
23
 
26
- @property({ attribute: false, type: Object })
27
- object: Ds4goCatalogModalProps["object"] = { "@id": "" };
28
-
29
24
  @property({ attribute: false })
30
25
  dspStore?: any;
31
26
 
@@ -2175,547 +2170,10 @@ ${JSON.stringify(this.testResult, null, 2)}</pre
2175
2170
  `;
2176
2171
  }
2177
2172
 
2178
- _renderModal(): TemplateResultOrSymbol {
2179
- if (!this.object || !this.object["@type"]) {
2180
- return nothing;
2181
- }
2182
-
2183
- return html`${this.renderTemplateWhenWith(
2184
- [rdf.RDFTYPE_OBJECT, "images"],
2185
- this._renderImageArray,
2186
- )}
2187
- <div class="modal-box">
2188
- <div class="modal-content">
2189
- ${this.renderTemplateWhenWith(
2190
- ["providers", rdf.RDFTYPE_OBJECT],
2191
- () => {
2192
- return html`<div class="provider-line">
2193
- ${this.object.providers.map(
2194
- (provider: rdf.Provider) =>
2195
- html`<div>
2196
- ${this._renderButton(
2197
- html`<icon-material-symbols-rss-feed-rounded></icon-material-symbols-rss-feed-rounded>`,
2198
- "sm",
2199
- provider.name || "",
2200
- "link-color",
2201
- )}
2202
- ${this._renderBgImg(
2203
- provider.image?.url || "",
2204
- "provider-logo",
2205
- )}
2206
- </div>`,
2207
- )}
2208
- </div>`;
2209
- },
2210
- )}
2211
- ${this.renderTemplateWhenWith(
2212
- [
2213
- [
2214
- rdf.RDFTYPE_PROVIDER,
2215
- rdf.RDFTYPE_SERVICE,
2216
- rdf.RDFTYPE_DATAOFFER,
2217
- ],
2218
- ],
2219
- () => this._renderDivision("h2", this.object.name),
2220
- )}
2221
- ${this.renderTemplateWhenWith([rdf.RDFTYPE_OBJECT, "title"], () =>
2222
- this._renderDivision("h2", this.object.title),
2223
- )}
2224
- ${this.renderTemplateWhenWith(
2225
- [rdf.RDFTYPE_DATAOFFER],
2226
- this._renderDataOfferBadgeRow,
2227
- )}
2228
- ${this.renderTemplateWhenWith(
2229
- [rdf.RDFTYPE_OBJECT, "keywords"],
2230
- () =>
2231
- html`<div class="badges">
2232
- ${this.object.keywords.map((keyword: rdf.NamedResource) =>
2233
- this._renderBadge("information", keyword.name ?? ""),
2234
- )}
2235
- </div>`,
2236
- )}
2237
- ${this.renderTemplateWhenWith(
2238
- ["description"],
2239
- this._renderDescription,
2240
- )}
2241
- ${this.isType(rdf.RDFTYPE_SERVICE)
2242
- ? this._renderServiceSpecificModal()
2243
- : this._renderColumns(
2244
- html`${this.renderTemplateWhenWith(
2245
- [rdf.RDFTYPE_3D_OBJECT],
2246
- () => {
2247
- return html`${this.renderTemplateWhenWith(
2248
- [["categories", "time_period"]],
2249
- () =>
2250
- html`<div
2251
- class="flex flex-row flex-1 align-items-flex-start justify-content-space-between full-width"
2252
- >
2253
- ${this.renderTemplateWhenWith(
2254
- ["categories[]"],
2255
- () =>
2256
- html`<div class="flex-1 half">
2257
- ${this._renderDivision("h3", msg("Category"))}
2258
- ${this._renderCategoryBadgeComponent()}
2259
- </div>`,
2260
- )}
2261
- ${this.renderTemplateWhenWith(["time_period"], () => {
2262
- return html`<div class="flex-1 half">
2263
- ${this._renderDivision("h3", msg("Time period"))}
2264
- <div class="badges">
2265
- ${this._renderBadge(
2266
- "information",
2267
- this.object.time_period,
2268
- )}
2269
- <div></div>
2270
- </div>
2271
- </div>`;
2272
- })}
2273
- </div>`,
2274
- )}
2275
- ${this.renderTemplateWhenWith(
2276
- [["country", "location"]],
2277
- () =>
2278
- html`<div
2279
- class="flex flex-row flex-1 align-items-flex-start justify-content-space-between full-width"
2280
- >
2281
- ${this.renderTemplateWhenWith(["country"], () => {
2282
- return html`<div class="flex-1 half">
2283
- ${this._renderDivision("h3", msg("Country"))}
2284
- ${this._renderDivision(
2285
- "body-m",
2286
- this.object.country,
2287
- )}
2288
- </div>`;
2289
- })}
2290
- ${this.renderTemplateWhenWith(["location"], () => {
2291
- return html`<div class="flex-1 half">
2292
- ${this._renderDivision("h3", msg("Location"))}
2293
- ${this._renderDivision(
2294
- "body-m",
2295
- `${this.object.location?.address} ${this.object.location?.city} ${this.object.location?.state}`,
2296
- )}
2297
- </div>`;
2298
- })}
2299
- </div>`,
2300
- )}
2301
- ${this.renderTemplateWhenWith(
2302
- ["actual_representation"],
2303
- () => {
2304
- return html`<div class="flex flex-1 flex-column">
2305
- ${this._renderDivision(
2306
- "h3",
2307
- msg("Actual representation"),
2308
- )}
2309
- ${this._renderDivision(
2310
- "body-m",
2311
- this.object.actual_representation,
2312
- )}
2313
- </div>`;
2314
- },
2315
- )}
2316
- ${this.renderTemplateWhenWith(
2317
- [
2318
- [
2319
- "format",
2320
- "file_size",
2321
- "year",
2322
- "texture",
2323
- "texture_formats",
2324
- "texture_resolution",
2325
- "is_low_polygons",
2326
- "polygons",
2327
- "ai",
2328
- "allow_ai",
2329
- ],
2330
- ],
2331
- () => {
2332
- return html`<div
2333
- class="metadata-section flex flex-column flex-1 align-items-flex-start justify-content-space-between"
2334
- >
2335
- ${this._renderDivision("h2", msg("Technical"))}
2336
- ${this.renderTemplateWhenWith(
2337
- [["format", "file_size"]],
2338
- () => {
2339
- return html`<div
2340
- class="flex flex-row flex-1 align-items-flex-start justify-content-space-between full-width"
2341
- >
2342
- ${this.renderTemplateWhenWith(
2343
- ["format"],
2344
- () =>
2345
- html`<div class="half">
2346
- ${this._renderTitleValueDivision(
2347
- msg("Format file"),
2348
- this.object.format.name,
2349
- )}
2350
- </div>`,
2351
- )}${this.renderTemplateWhenWith(
2352
- ["file_size"],
2353
- () =>
2354
- html`<div class="half">
2355
- ${this._renderTitleValueDivision(
2356
- msg("File size"),
2357
- this.object.file_size,
2358
- )}
2359
- </div>`,
2360
- )}
2361
- </div>`;
2362
- },
2363
- )}
2364
- ${this.renderTemplateWhenWith(["year"], () => {
2365
- return html`<div class="flex flex-1 flex-column">
2366
- ${this._renderTitleValueDivision(
2367
- msg("Year of creation"),
2368
- this.object.year,
2369
- )}
2370
- </div>`;
2371
- })}
2372
- ${this.renderTemplateWhenWith(["texture"], () => {
2373
- return html`<div class="flex flex-1 flex-column">
2374
- ${this._renderTitleValueDivision(
2375
- msg("Texture"),
2376
- this.object.texture,
2377
- )}
2378
- </div>`;
2379
- })}
2380
- ${this.renderTemplateWhenWith(
2381
- ["texture_formats"],
2382
- () => {
2383
- return html`<div class="flex flex-1 flex-column">
2384
- ${this._renderTitleValueDivision(
2385
- msg("Texture formats"),
2386
- this.object.texture_formats,
2387
- )}
2388
- </div>`;
2389
- },
2390
- )}
2391
- ${this.renderTemplateWhenWith(
2392
- ["texture_resolution"],
2393
- () => {
2394
- return html`<div class="flex flex-1 flex-column">
2395
- ${this._renderTitleValueDivision(
2396
- msg("Texture resolution"),
2397
- this.object.texture_resolution,
2398
- )}
2399
- </div>`;
2400
- },
2401
- )}
2402
- <div class="flex flex-1 flex-column">
2403
- ${this._renderDivision("h4", msg("Low-poly"))}
2404
- ${this._renderBoolean(this.object.is_low_polygons)}
2405
- </div>
2406
- <div
2407
- class="flex flex-row flex-1 align-items-flex-start justify-content-space-between full-width"
2408
- >
2409
- <div class="flex flex-column half">
2410
- ${this._renderDivision("h4", msg("AI-generated"))}
2411
- ${this._renderBoolean(this.object.ai)}
2412
- </div>
2413
- <div class="flex flex-column half">
2414
- ${this._renderDivision(
2415
- "h4",
2416
- msg("Allowed for AI"),
2417
- )}
2418
- ${this._renderBoolean(this.object.allow_ai)}
2419
- </div>
2420
- </div>
2421
- </div>`;
2422
- },
2423
- )}
2424
- ${this.renderTemplateWhenWith(
2425
- [["prices", "rights_holder", "creator", "licenses"]],
2426
- () => {
2427
- return html`<div
2428
- class="metadata-section flex flex-column flex-1 align-items-flex-start justify-content-space-between"
2429
- >
2430
- ${this._renderDivision("h2", msg("Informations"))}
2431
- ${this.renderTemplateWhenWith(["prices"], () =>
2432
- this._renderTitleValueDivision(
2433
- msg("Prices"),
2434
- this.object.prices,
2435
- ),
2436
- )}
2437
- ${this.renderTemplateWhenWith(["rights_holder"], () =>
2438
- this._renderTitleValueDivision(
2439
- msg("Rights holder"),
2440
- this.object.rights_holder,
2441
- ),
2442
- )}
2443
- ${this.renderTemplateWhenWith(["creator"], () =>
2444
- this._renderTitleValueDivision(
2445
- msg("Creator"),
2446
- this.object.creator,
2447
- ),
2448
- )}
2449
- ${this.renderTemplateWhenWith(
2450
- ["licences"],
2451
- this._renderLicences,
2452
- )}
2453
- </div>`;
2454
- },
2455
- )}
2456
- ${this.renderTemplateWhenWith([["providers"]], () => {
2457
- if (this.object.providers.length === 0) {
2458
- return nothing;
2459
- }
2460
- return html`<div
2461
- class="metadata-section flex flex-column flex-1 align-items-flex-start justify-content-space-between"
2462
- >
2463
- ${this._renderDivision(
2464
- "h2",
2465
- this.object.providers.length === 1
2466
- ? msg("Provider")
2467
- : msg("Providers"),
2468
- )}
2469
- ${this.object.providers.map(
2470
- (provider: rdf.Provider) => {
2471
- const serviceNames: string[] = [];
2472
- if (provider.services) {
2473
- provider.services.map((service: rdf.Service) => {
2474
- if (service.name)
2475
- serviceNames.push(service.name);
2476
- });
2477
- }
2478
- return html`<div class="flex flex-column metadata-provider">
2479
- <div class="flex flex-row flex-1 align-items-flex-start justify-content-space-between full-width">
2480
- ${
2481
- provider.image?.url
2482
- ? html`<img
2483
- src="${provider.image.url}"
2484
- alt=${provider.name}
2485
- class="default-img"
2486
- />`
2487
- : nothing
2488
- }
2489
- <div class="flex flex-column flex-1">
2490
- ${this._renderDivision(
2491
- "h4",
2492
- msg("Provider information"),
2493
- )}
2494
- ${this._renderDivision(
2495
- "body-m",
2496
- provider.name ?? "",
2497
- )}
2498
- </div>
2499
- </div>
2500
- ${
2501
- serviceNames.length !== 0
2502
- ? html`${this._renderDivision(
2503
- "h4",
2504
- this.object.providers.length === 1
2505
- ? msg("Service provided")
2506
- : msg("Services provided"),
2507
- )}
2508
- ${this._renderDivision(
2509
- "body-m",
2510
- this.object.providers.length === 1
2511
- ? serviceNames.toString()
2512
- : serviceNames.join(", "),
2513
- )}`
2514
- : nothing
2515
- }${
2516
- provider.contact_url
2517
- ? html`<div class="flex flex-column flex-1">
2518
- ${this._renderDivision(
2519
- "h4",
2520
- msg("Contact details"),
2521
- )}
2522
- ${this._renderDivision(
2523
- "body-m",
2524
- provider.contact_url,
2525
- )}
2526
- </div>`
2527
- : nothing
2528
- }
2529
- </div>
2530
- </div>`;
2531
- },
2532
- )}
2533
- </div>`;
2534
- })}`;
2535
- },
2536
- )}${this.renderTemplateWhenWith(
2537
- [rdf.RDFTYPE_MEDIA_OBJECT, "language"],
2538
- () =>
2539
- this._renderTitleValueDivision(
2540
- msg("Language"),
2541
- this.object.language.name,
2542
- ),
2543
- )}${this.renderTemplateWhenWith(
2544
- [rdf.RDFTYPE_MEDIA_OBJECT, "creation_date"],
2545
- () =>
2546
- this._renderTitleValueDivision(
2547
- msg("Published Date"),
2548
- formatDate(this.object.creation_date),
2549
- ),
2550
- )}${this.renderTemplateWhenWith(
2551
- [rdf.RDFTYPE_MEDIA_OBJECT, "update_date"],
2552
- () =>
2553
- this._renderTitleValueDivision(
2554
- msg("Update Date"),
2555
- formatDate(this.object.update_date),
2556
- ),
2557
- )}${this.renderTemplateWhenWith(
2558
- [rdf.RDFTYPE_MEDIA_OBJECT, "licences"],
2559
- this._renderLicences,
2560
- )}${this.renderTemplateWhenWith(
2561
- [rdf.RDFTYPE_MEDIA_OBJECT, "location"],
2562
- () =>
2563
- this._renderTitleValueDivision(
2564
- msg("Location"),
2565
- `${
2566
- this.object.location?.address
2567
- ? `${this.object.location.address}, `
2568
- : ""
2569
- }${this.object.location?.city ?? ""} ${
2570
- this.object.location?.country ?? ""
2571
- }`,
2572
- ),
2573
- )}${this.renderTemplateWhenWith(
2574
- [rdf.RDFTYPE_FACT_CHECKING_OBJECT, "organisation"],
2575
- () =>
2576
- this._renderTitleValueDivision(
2577
- msg("Organisation"),
2578
- this.object.organisation,
2579
- ),
2580
- )}${this.renderTemplateWhenWith(
2581
- [rdf.RDFTYPE_FACT_CHECKING_OBJECT, "person"],
2582
- () =>
2583
- this._renderTitleValueDivision(
2584
- msg("Person"),
2585
- this.object.person,
2586
- ),
2587
- )}${this.renderTemplateWhenWith(
2588
- [rdf.RDFTYPE_FACT_CHECKING_OBJECT, "version"],
2589
- () =>
2590
- this._renderTitleValueDivision(
2591
- msg("Version"),
2592
- this.object.version,
2593
- ),
2594
- )}${this.renderTemplateWhenWith(
2595
- [rdf.RDFTYPE_DATAOFFER, "providers"],
2596
- this._renderAboutProvider,
2597
- )}${this.renderTemplateWhenWith(
2598
- [rdf.RDFTYPE_DATAOFFER, "services"],
2599
- this._renderCompatibleServices,
2600
- )}${this.renderTemplateWhenWith(
2601
- [rdf.RDFTYPE_INTERACTIVE_INFOGRAPHICS_OBJECT, "instruction"],
2602
- () => {
2603
- return html`${this._renderDivision(
2604
- "h4",
2605
- msg("Instruction"),
2606
- )}
2607
- ${this._renderButton(
2608
- undefined,
2609
- "sm",
2610
- this.object.instruction,
2611
- "outline-gray",
2612
- )}`;
2613
- },
2614
- )}${this.renderTemplateWhenWith(
2615
- [rdf.RDFTYPE_MEDIA_OBJECT, "editor"],
2616
- () =>
2617
- this._renderTitleValueDivision(
2618
- msg("Editor"),
2619
- this.object.editor,
2620
- ),
2621
- )}${this.renderTemplateWhenWith(
2622
- [rdf.RDFTYPE_MEDIA_OBJECT, "original_language"],
2623
- () =>
2624
- this._renderTitleValueDivision(
2625
- msg("Original Language"),
2626
- this.object.original_language,
2627
- ),
2628
- )}${this.renderTemplateWhenWith(
2629
- [rdf.RDFTYPE_MEDIA_OBJECT, "contributors"],
2630
- () =>
2631
- this._renderTitleValueDivision(
2632
- msg("Contributors"),
2633
- this.object.contributors,
2634
- ),
2635
- )}${this.renderTemplateWhenWith(
2636
- [rdf.RDFTYPE_MEDIA_OBJECT, "publication_service"],
2637
- () =>
2638
- this._renderTitleValueDivision(
2639
- msg("Publication Service"),
2640
- this.object.publication_service,
2641
- ),
2642
- )}${this.renderTemplateWhenWith(
2643
- [rdf.RDFTYPE_OBJECT, "assets[]"],
2644
- () => {
2645
- return html`
2646
- ${this._renderDivision("h4", msg("Accessible Assets"))}
2647
- <div class="assets-rows">
2648
- ${this.object.assets.map((asset: rdf.Asset) => {
2649
- return html`
2650
- <div
2651
- class="asset-row flex flex-row align-items-center flex-1"
2652
- >
2653
- <div class="asset-format">
2654
- <p>
2655
- ${asset.format ? asset.format.name : nothing}
2656
- </p>
2657
- </div>
2658
- <div class="flex flex-column">
2659
- ${asset.name
2660
- ? html`<p>${asset.name}</p>`
2661
- : nothing}
2662
- ${asset.size
2663
- ? html`<p>${asset.size}</p>`
2664
- : nothing}
2665
- </div>
2666
- </div>
2667
- `;
2668
- })}
2669
- </div>
2670
- `;
2671
- },
2672
- )}`,
2673
- this.renderTemplateWhenWith(["offers"], this._renderOffers),
2674
- this.renderTemplateWhenWith(
2675
- [rdf.RDFTYPE_PROVIDER, "services"],
2676
- this._renderCompatibleServices,
2677
- ),
2678
- this.renderTemplateWhenWith(
2679
- [rdf.RDFTYPE_PROVIDER, "data_offers"],
2680
- this._renderCompatibleDataOffers,
2681
- ),
2682
- )}${this.renderTemplateWhenWith(
2683
- [rdf.RDFTYPE_PROVIDER, "contact_url"],
2684
- () =>
2685
- html`<div class="flex flex-column flex-1">
2686
- ${this._renderDivision("h4", msg("Contact"))}
2687
- ${this._renderDivision("body-m", this.object.contact_url)}
2688
- </div>`,
2689
- )}
2690
- </div>
2691
- </div> `;
2692
- }
2693
-
2694
2173
  _closeModal() {
2695
2174
  this.dispatchEvent(new CustomEvent("close"));
2696
2175
  }
2697
2176
 
2698
- _addBookmark() {
2699
- this.dispatchEvent(
2700
- new CustomEvent("bookmark", {
2701
- detail: { add: true, object: this.object },
2702
- }),
2703
- );
2704
- }
2705
-
2706
- _removeBookmark() {
2707
- this.dispatchEvent(
2708
- new CustomEvent("bookmark", {
2709
- detail: { add: false, object: this.object },
2710
- }),
2711
- );
2712
- }
2713
-
2714
- _purchase() {
2715
- console.warn(msg("Disabled for POC"));
2716
- this.dispatchEvent(new CustomEvent("purchase"));
2717
- }
2718
-
2719
2177
  _renderPolicySelection(): TemplateResult {
2720
2178
  const policies = this.availablePolicies || [];
2721
2179
 
@@ -2831,26 +2289,21 @@ ${JSON.stringify(this.testResult, null, 2)}</pre
2831
2289
  type="outline-gray"
2832
2290
  .iconLeft=${html`<icon-material-symbols-close-rounded></icon-material-symbols-close-rounded>`}
2833
2291
  ></tems-button>
2834
- ${this.isType(rdf.RDFTYPE_OBJECT)
2835
- ? html`${this.object.owned
2836
- ? html`<tems-button @click=${this._removeBookmark}
2837
- >${msg("Remove from my bookmarks")}</tems-button
2838
- >`
2839
- : html`<tems-button @click=${this._addBookmark}
2840
- >${msg("Add to my bookmarks")}</tems-button
2841
- >`}
2842
- <tems-button @click=${this._purchase} disabled=""
2843
- >${msg("Purchase")}</tems-button
2844
- >`
2845
- : nothing}
2846
- ${this.isType(rdf.RDFTYPE_SERVICE)
2847
- ? html`<tems-button disabled=""
2848
- >${msg("Integrate Externally")}</tems-button
2849
- >
2850
- ${this._renderNegotiationButton()}`
2851
- : nothing}
2292
+ <tems-button disabled="">${msg("Integrate Externally")}</tems-button>
2293
+ ${this._renderNegotiationButton()}
2294
+ </div>
2295
+ <div class="modal-content-wrapper">
2296
+ <div class="modal-box">
2297
+ <div class="modal-content">
2298
+ ${this._renderDivision("h2", this.object.name)}
2299
+ ${this.renderTemplateWhenWith(
2300
+ ["description"],
2301
+ this._renderDescription,
2302
+ )}
2303
+ ${this._renderServiceSpecificModal()}
2304
+ </div>
2305
+ </div>
2852
2306
  </div>
2853
- <div class="modal-content-wrapper">${this._renderModal()}</div>
2854
2307
  </div>`;
2855
2308
  }
2856
2309
  }
package/src/components/solid-dsp-catalog.ts CHANGED
@@ -231,6 +231,7 @@ export class DSPCatalog extends OrbitDSPComponent {
231
231
  >
232
232
  <ds4go-catalog-modal
233
233
  .object=${this.object}
234
+ .dspStore=${window.dspStore}
234
235
  @close=${this._closeModal}
235
236
  ></ds4go-catalog-modal>
236
237
  </div>`