@salesforcedevs/dx-components 1.2.21 → 1.3.0

package/lwc.config.json

@@ -47,6 +47,7 @@
         "dx/iconBadge",
         "dx/imageAndLabel",
         "dx/input",
+        "dx/interactiveImage",
         "dx/logo",
         "dx/modal",
         "dx/metadataBadge",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.2.21",
+    "version": "1.3.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -28,5 +28,5 @@
         "@types/lodash.kebabcase": "^4.1.7",
         "@types/vimeo__player": "^2.16.2"
     },
-    "gitHead": "a2cdce2eb71710ffc534a3e01e74137f09cabc0a"
+    "gitHead": "b5d88aa134399d66a9f894d05ecec170843bc30f"
 }

package/src/modules/dx/interactiveImage/interactiveImage.css

@@ -0,0 +1,59 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+article {
+    border: 1px solid var(--dx-g-gray-90);
+    border-radius: 0.3125rem;
+}
+
+header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    border-radius: 0.3125rem 0.3125rem 0 0;
+    background-color: var(--dx-g-gray-95);
+    font-family: var(--dx-g-font-sans);
+    color: var(--dx-g-gray-10);
+    padding: var(--dx-g-spacing-sm);
+}
+
+header span {
+    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-md);
+    font-size: var(--dx-g-text-sm);
+}
+
+footer {
+    border-radius: 0 0 0.3125rem 0.3125rem;
+}
+
+.body {
+    margin: var(--dx-g-spacing-md);
+    overflow-x: auto;
+}
+
+.body img {
+    min-width: 650px;
+}
+
+.controls {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+/* Breakpoints for mobile */
+
+@media screen and (max-width: 640px) {
+    header {
+        flex-direction: column;
+        align-items: flex-end;
+    }
+}
+
+@media screen and (max-width: 320px) {
+    .controls,
+    .controls dx-dropdown,
+    .controls dx-button {
+        width: 100%;
+    }
+}

package/src/modules/dx/interactiveImage/interactiveImage.html

@@ -0,0 +1,32 @@
+<template>
+    <article>
+        <header>
+            <span>{title}</span>
+            <div class="controls">
+                <template if:true={isSingleDownload}>
+                    <dx-button
+                        icon-symbol="download"
+                        href={singleDownloadHref}
+                        download={singleDownloadFilename}
+                    >
+                        {downloadButtonLabel}
+                    </dx-button>
+                </template>
+                <template if:false={isSingleDownload}>
+                    <dx-dropdown
+                        options={urls}
+                        onchange={handleDownloadOptionChange}
+                        placement="bottom-end"
+                    >
+                        <dx-button variant="primary" icon-symbol="chevrondown">
+                            {downloadButtonLabel}
+                        </dx-button>
+                    </dx-dropdown>
+                </template>
+            </div>
+        </header>
+        <div class="body">
+            <img src={featuredSrc} alt={title} />
+        </div>
+    </article>
+</template>

package/src/modules/dx/interactiveImage/interactiveImage.ts

@@ -0,0 +1,71 @@
+import { LightningElement, api } from "lwc";
+
+// Extracts filename and extension from a file URL
+const FILENAME_FROM_URL_REGEX = /(?=\w+\.\w{3,4}$).+/;
+const EXTENSION_FROM_URL_REGEX = /\.([^.]*)$/;
+
+export default class InteractiveImage extends LightningElement {
+    @api title!: string;
+    @api featuredSrc!: string;
+
+    @api
+    set downloadUrls(values: any) {
+        // Normalize input values
+        let urls;
+        if (typeof values === "string") {
+            if (values.startsWith("[")) {
+                urls = JSON.parse(values);
+            } else {
+                urls = [values];
+            }
+        } else {
+            urls = values;
+        }
+        // Ensure that we have some URLs
+        if (!urls || urls.length === 0) {
+            throw new Error(
+                `No download url found for interactive image with title "${this.title}"`
+            );
+        }
+        // Prepare download options with labels
+        this.urls = urls.map((url: string) => {
+            return {
+                label: this.getDownloadLabelFromUrl(url),
+                id: url
+            };
+        });
+    }
+    get downloadUrls() {
+        return this.urls;
+    }
+
+    private urls: { label: string; id: string }[] = [];
+
+    private get isSingleDownload() {
+        return this.urls.length === 1;
+    }
+
+    private get singleDownloadHref() {
+        return this.urls[0].id;
+    }
+
+    private get singleDownloadFilename() {
+        const pathParts = this.urls[0].id.match(FILENAME_FROM_URL_REGEX);
+        return pathParts ? pathParts[0] : "";
+    }
+
+    private get downloadButtonLabel() {
+        return this.isSingleDownload ? this.urls[0].label : "Download as...";
+    }
+
+    private handleDownloadOptionChange(event: CustomEvent) {
+        window.open(event.detail, "_blank");
+    }
+
+    private getDownloadLabelFromUrl(url: string): string {
+        const urlParts = url.match(EXTENSION_FROM_URL_REGEX);
+        return urlParts
+            ? `Download as ${urlParts[1].toUpperCase()}`
+            : "Download";
+    }
+}