@salesforcedevs/dx-components 0.26.1-alpha0.6 → 0.27.0

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";
+    }
+}

package/src/modules/dx/lazy/lazy.html

@@ -0,0 +1,5 @@
+<template>
+    <template if:true={renderSlot}>
+        <slot></slot>
+    </template>
+</template>

package/src/modules/dx/lazy/lazy.ts

@@ -0,0 +1,163 @@
+import { LightningElement, api } from "lwc";
+
+import { LazyMode } from "typings/custom";
+
+/**
+ * Defines a fallback for BackgroundTasksAPI for browsers that doesn't support it.
+ * Currently BackgroundTasksAPI is supported by all major browsers
+ * except in Safari where it can be enabled in Experimental (WebKit) Features.
+ * See also: https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API
+ */
+function defineBackgroundTasksAPI() {
+    // Fallback to using setTimeout
+    window.requestIdleCallback =
+        window.requestIdleCallback ||
+        function (handler: any) {
+            const startTime = Date.now();
+
+            return setTimeout(function () {
+                handler({
+                    didTimeout: false,
+                    timeRemaining: function () {
+                        return Math.max(0, 50.0 - (Date.now() - startTime));
+                    }
+                });
+            }, 1);
+        };
+    window.cancelIdleCallback =
+        window.cancelIdleCallback ||
+        function (id: any) {
+            clearTimeout(id);
+        };
+}
+
+export default class Lazy extends LightningElement {
+    @api mode: LazyMode = "idle";
+
+    // intersection mode api
+    @api rootId: string | undefined;
+    @api rootMargin: string = "0px";
+    @api threshold: number = 0;
+
+    @api
+    get placeholderSize() {
+        return this._placeholderSize;
+    }
+
+    set placeholderSize(value) {
+        this._placeholderSize = value;
+    }
+
+    /**
+     * 'rendered' marks the first call made to renderedCallback()
+     */
+    private rendered: boolean = false;
+    /**
+     * 'renderSlot' controls whether the dx-lazy slot contents get rendered
+     */
+    private renderSlot: boolean = false;
+    /**
+     * 'connectedCallbackCalled' marks the first call made to connectedCallback()
+     */
+    private connectedCallbackCalled: boolean = false;
+    /**
+     * The handle as returned by calling window.requestIdleCallback()
+     */
+    private idleCallbackHandle: any;
+    /**
+     * The Intersection Observer if instantiated, else undefined
+     */
+    private observer: IntersectionObserver | undefined;
+    /**
+     * The size of the placeholder for the lazy container in pixels
+     */
+    private _placeholderSize: number = 200;
+
+    constructor() {
+        super();
+        this.updateHostStyle();
+    }
+
+    connectedCallback() {
+        if (!this.connectedCallbackCalled) {
+            this.connectedCallbackCalled = true;
+            if (this.mode === "idle") {
+                defineBackgroundTasksAPI();
+                this.waitForIdle();
+            }
+        }
+    }
+
+    renderedCallback() {
+        if (!this.rendered) {
+            this.rendered = true;
+            if (this.mode === "intersection") {
+                this.observeIntersection();
+            }
+        }
+    }
+
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        if (this.idleCallbackHandle) {
+            window.cancelIdleCallback(this.idleCallbackHandle);
+        }
+    }
+
+    private waitForIdle() {
+        this.idleCallbackHandle = window.requestIdleCallback(
+            this.idleCallback.bind(this),
+            { timeout: 1000 }
+        );
+    }
+
+    private idleCallback() {
+        this.doRender();
+        window.cancelIdleCallback(this.idleCallbackHandle);
+    }
+
+    private observeIntersection() {
+        let root = null; // root with a value of null means to use the viewport
+        if (this.rootId && typeof this.rootId === "string") {
+            root = document.querySelector(`#${this.rootId}`);
+        }
+        this.observer = new IntersectionObserver(
+            this.intersectionCallback.bind(this),
+            {
+                root,
+                rootMargin: this.rootMargin,
+                threshold: this.threshold
+            }
+        );
+        this.observer.observe(this.template.host);
+    }
+
+    private intersectionCallback(
+        entries: IntersectionObserverEntry[],
+        observer: IntersectionObserver
+    ) {
+        entries.forEach((entry: IntersectionObserverEntry) => {
+            if (entry.isIntersecting) {
+                this.doRender();
+                observer.disconnect();
+            }
+        });
+    }
+
+    private updateHostStyle() {
+        if (this.renderSlot) {
+            this.template.host.style.display = "";
+            this.template.host.style.minHeight = "";
+        } else {
+            this.template.host.style.display = "block";
+            this.template.host.style.minHeight = `${this._placeholderSize}px`;
+        }
+    }
+
+    private doRender() {
+        this.renderSlot = true;
+        this.updateHostStyle();
+    }
+}

package/src/modules/dx/logo/logo.css

@@ -0,0 +1,33 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+:host {
+    --dx-c-logo-label-color: var(--dx-g-blue-vibrant-20);
+
+    flex-shrink: 0;
+}
+
+a {
+    transition: var(--dx-g-transition-hue-1x);
+    display: flex;
+    align-items: center;
+}
+
+a:hover {
+    color: var(--dx-g-blue-vibrant-40);
+}
+
+.logo-link {
+    flex-shrink: 0;
+    margin-right: var(--dx-g-spacing-xs);
+}
+
+.logo-link > span {
+    margin-top: 3px;
+    color: var(--dx-c-logo-label-color);
+}
+
+.logo-link > img {
+    margin-right: var(--dx-g-spacing-sm);
+    width: 28px;
+}

package/src/modules/dx/logo/logo.html

@@ -0,0 +1,6 @@
+<template>
+    <a href={href} class="logo-link">
+        <img src={imgSrc} alt={imgAlt} />
+        <span class="dx-text-heading-7">{label}</span>
+    </a>
+</template>

package/src/modules/dx/logo/logo.ts

@@ -0,0 +1,8 @@
+import { LightningElement, api } from "lwc";
+
+export default class Logo extends LightningElement {
+    @api href: string = "/";
+    @api imgSrc: string = "/assets/svg/salesforce-cloud.svg";
+    @api imgAlt: string = "Salesforce log";
+    @api label!: string;
+}

package/src/modules/dx/modalDrawer/modalDrawer.css

@@ -0,0 +1,40 @@
+:host {
+    --dx-c-modal-drawer-z-index: 5000;
+    --dx-c-modal-padding-around: var(--dx-g-spacing-smd);
+    --dx-c-modal-height: calc(100vh - var(--dx-c-modal-padding-around) * 2);
+}
+
+dx-button {
+    display: block;
+    margin-left: auto;
+}
+
+.modal-drawer_container {
+    background-color: white;
+    height: var(--dx-c-modal-height);
+    left: 0;
+    padding: var(--dx-c-modal-padding-around);
+    position: fixed;
+    transform: translateX(-100%);
+    transition: transform 0.4s ease;
+    top: 0;
+    width: inherit;
+    z-index: var(--dx-c-modal-drawer-z-index);
+}
+
+.modal-drawer_container.modal-drawer_active {
+    transform: translateX(0);
+}
+
+.modal-drawer_overlay {
+    background-color: #195594;
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    opacity: 0.62;
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 100%;
+    z-index: calc(var(--dx-c-modal-drawer-z-index) - 1);
+}

package/src/modules/dx/modalDrawer/modalDrawer.html

@@ -0,0 +1,11 @@
+<template>
+    <div class={containerClass}>
+        <slot></slot>
+        <dx-button onclick={handleCloseModal}>Done</dx-button>
+    </div>
+    <div
+        if:true={open}
+        class="modal-drawer_overlay"
+        onclick={handleCloseModal}
+    ></div>
+</template>

package/src/modules/dx/modalDrawer/modalDrawer.ts

@@ -0,0 +1,27 @@
+import cx from "classnames";
+import { LightningElement, api } from "lwc";
+import { normalizeBoolean } from "utils/normalizers";
+
+export default class ModalDrawer extends LightningElement {
+    private _open = false;
+
+    @api get open() {
+        return this._open;
+    }
+
+    set open(value) {
+        this._open = normalizeBoolean(value);
+    }
+
+    get containerClass(): string {
+        return cx(
+            "modal-drawer_container",
+            this._open && "modal-drawer_active"
+        );
+    }
+
+    handleCloseModal() {
+        this._open = !this._open;
+        this.dispatchEvent(new CustomEvent("clickclose"));
+    }
+}

package/src/modules/dx/newsletterForm/newsletterForm.css

@@ -0,0 +1,73 @@
+@import "helpers/text";
+@import "helpers/button";
+
+:host {
+    --dx-g-text-base: 20px;
+    --dx-c-checkbox-text-line-height: 20px;
+    --dx-c-checkbox-align-label: flex-start;
+    --dx-c-checkbox-font-size: 14px;
+    --dx-c-checkbox-text-transform: none;
+}
+
+h4 {
+    font-size: 20px;
+    margin: 0 0 28px 0;
+    text-align: center;
+}
+
+dx-input,
+dx-select {
+    display: block;
+    margin-top: 12px;
+    height: 77px;
+}
+
+dx-input {
+    --dx-c-input-width: 100%;
+}
+
+dx-checkbox:not(:first-child) {
+    margin-top: 12px;
+}
+
+dx-checkbox:last-of-type {
+    margin-bottom: 16px;
+}
+
+.form-submit {
+    background-color: var(--dx-g-blue-vibrant-50);
+    border: 2px solid var(--dx-g-blue-vibrant-50);
+    border-radius: 4px;
+    font-family: var(--dx-g-font-display);
+    font-size: 14px;
+    color: white;
+    height: 44px;
+    width: 100%;
+    margin-top: 20px;
+}
+
+.form-submit:hover {
+    background-color: var(--dx-g-blue-vibrant-40);
+    border-color: var(--dx-g-blue-vibrant-40);
+    cursor: pointer;
+}
+
+.legal-text {
+    font-size: 14px;
+    margin: 0 0 16px 0;
+}
+
+@media screen and (max-width: 360px) {
+    :host {
+        --dx-g-text-base: 16px;
+        --dx-c-checkbox-display: inline-block;
+    }
+
+    h4 {
+        font-size: 16px;
+    }
+
+    .form-submit {
+        margin-top: 0;
+    }
+}

package/src/modules/dx/newsletterForm/newsletterForm.html

@@ -0,0 +1,73 @@
+<template>
+    <form
+        onsubmit={handleSubmit}
+        onchange={handleChange}
+        onkeydown={handleKeyDown}
+    >
+        <slot name="form-heading">
+            <h4 class="newsletter-form-heading dx-text-heading-8">
+                Sign up now to receive the newsletter.
+            </h4>
+        </slot>
+        <dx-input
+            name="fname"
+            value={firstName}
+            placeholder="Your first name"
+            label="First Name"
+            onchange={handleChange}
+            missing-error-message="Enter your first name"
+            validity-on-blur="true"
+            required="true"
+        ></dx-input>
+        <dx-input
+            name="lname"
+            value={lastName}
+            placeholder="Your last name"
+            label="Last Name"
+            onchange={handleChange}
+            missing-error-message="Enter your last name"
+            validity-on-blur="true"
+            required="true"
+        ></dx-input>
+        <dx-input
+            name="email"
+            type="email"
+            value={email}
+            placeholder="Your email address"
+            label="Email"
+            onchange={handleChange}
+            missing-error-message="Enter your email address"
+            validity-on-blur="true"
+            required="true"
+        ></dx-input>
+        <dx-select
+            name="country"
+            class="country-select"
+            label="Country"
+            onchange={handleChange}
+            placeholder="Select your Country"
+            message-when-value-missing="Select your country"
+            json-options={countries}
+            value={country}
+            required="true"
+        ></dx-select>
+        <template if:true={checkboxTextSet}>
+            <template if:true={showMarketingCheckbox}>
+                <dx-checkbox
+                    class="marketing-checkbox"
+                    value={marketingText}
+                    label={marketingText}
+                ></dx-checkbox>
+            </template>
+            <p class="legal-text" lwc:dom="manual"></p>
+            <template if:true={showLegalCheckbox}>
+                <dx-checkbox
+                    class="legal-checkbox"
+                    value={legalText}
+                    required="true"
+                ></dx-checkbox>
+            </template>
+        </template>
+        <button class="form-submit" type="submit">Subscribe Now</button>
+    </form>
+</template>