@salesforcedevs/dw-components 1.3.256 → 1.3.261

package/lwc.config.json

@@ -5,6 +5,7 @@
     ],
     "expose": [
         "dw/blogsGrid",
+        "dw/videoGrid",
         "dw/browseTrials",
         "dw/cardBlogPostProvider",
         "dw/cardPodcastEpisodeProvider",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dw-components",
-    "version": "1.3.256",
+    "version": "1.3.261",
     "description": "Lightning web components for https://developer.salesforce.com",
     "license": "MIT",
     "engines": {
@@ -24,5 +24,5 @@
         "@types/setimmediate": "^1.0.2",
         "setimmediate": "^1.0.5"
     },
-    "gitHead": "c0afc0d0174da7941a7955691f2cc0c0efe69620"
+    "gitHead": "8f326de081fbbef38ac44074ed4f54190e6416c1"
 }

package/src/modules/dw/videoGrid/types.ts

@@ -0,0 +1,12 @@
+export type VideoCardsData = {
+    type: "twitter" | "linkedin";
+    title: string;
+    body: string;
+    hasSocial: boolean;
+    socialName: string;
+    socialJobTitle: string;
+    socialProfileImgSrc: "string";
+    isLinkedin: boolean | undefined;
+    isTwitter: boolean | undefined;
+    videoId: string;
+};

package/src/modules/dw/videoGrid/videoGrid.css

@@ -0,0 +1,24 @@
+.container {
+    display: grid;
+    grid-template-columns: 382px;
+    gap: 27px;
+    justify-content: center;
+}
+
+.pagination-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 36px;
+}
+
+@media (min-width: 790px) {
+    .container {
+        grid-template-columns: repeat(2, 382px);
+    }
+}
+
+@media (min-width: 1200px) {
+    .container {
+        grid-template-columns: repeat(3, 382px);
+    }
+}

package/src/modules/dw/videoGrid/videoGrid.html

@@ -0,0 +1,41 @@
+<template>
+    <div class="container">
+        <template for:each={currentPageData} for:item="cardData">
+            <template lwc:if={cardData.isTwitter}>
+                <dx-embedded-video
+                    key={cardData.id}
+                    type="twitter"
+                    video-id={cardData.videoId}
+                    title={cardData.title}
+                    body={cardData.body}
+                    has-social={cardData.hasSocial}
+                    social-name={cardData.socialName}
+                    social-job-title={cardData.socialJobTitle}
+                    social-profile-img-src={cardData.socialProfileImgSrc}
+                    href={cardData.href}
+                ></dx-embedded-video>
+            </template>
+            <template lwc:elseif={cardData.isLinkedin}>
+                <dx-embedded-video
+                    key={cardData.id}
+                    type="linkedin"
+                    video-id={cardData.videoId}
+                    title={cardData.title}
+                    body={cardData.body}
+                    has-social={cardData.hasSocial}
+                    social-name={cardData.socialName}
+                    social-job-title={cardData.socialJobTitle}
+                    social-profile-img-src={cardData.socialProfileImgSrc}
+                    href={cardData.href}
+                ></dx-embedded-video>
+            </template>
+        </template>
+    </div>
+    <div class="pagination-container">
+        <dx-pagination
+            current-page={page}
+            total-pages={totalPages}
+            onpagechange={handlePageChange}
+        ></dx-pagination>
+    </div>
+</template>

package/src/modules/dw/videoGrid/videoGrid.ts

@@ -0,0 +1,41 @@
+import { LightningElement, api } from "lwc";
+import { VideoCardsData } from "./types";
+
+export default class VideoGrid extends LightningElement {
+    @api cardLimit = 6;
+
+    @api
+    get cardsData(): Array<VideoCardsData> {
+        return this._cardsData;
+    }
+    set cardsData(value: string | Array<VideoCardsData>) {
+        if (typeof value === "string") {
+            try {
+                this._cardsData = JSON.parse(value) as Array<VideoCardsData>;
+            } catch (error) {
+                console.error("Error parsing cards data:", error);
+                this._cardsData = [];
+            }
+        } else {
+            this._cardsData = value;
+        }
+    }
+
+    private _cardsData: Array<VideoCardsData> = [];
+    private page = "1";
+
+    get totalPages(): string {
+        return String(Math.ceil(this.cardsData.length / this.cardLimit));
+    }
+
+    get currentPageData() {
+        return this.cardsData.slice(
+            this.page === "1" ? 0 : this.cardLimit * (Number(this.page) - 1),
+            this.cardLimit * Number(this.page)
+        );
+    }
+
+    private handlePageChange(e: CustomEvent): void {
+        this.page = String(e.detail);
+    }
+}