@salesforcedevs/dx-components 0.53.0 → 0.53.5

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright (c) 2020, Salesforce.com, Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/lwc.config.json

@@ -29,7 +29,6 @@
         "dx/emptyState",
         "dx/feature",
         "dx/featuredContentHeader",
-        "dx/featureGrid",
         "dx/featuresList",
         "dx/filterMenu",
         "dx/banner",
@@ -37,13 +36,11 @@
         "dx/newsletterForm",
         "dx/formattedDateTime",
         "dx/grid",
-        "dx/groupBio",
         "dx/groupText",
         "dx/header",
         "dx/headerMobileNavMenu",
         "dx/headerNav",
         "dx/headerSearch",
-        "dx/headTags",
         "dx/helmet",
         "dx/hr",
         "dx/icon",
@@ -51,8 +48,6 @@
         "dx/imageAndLabel",
         "dx/input",
         "dx/instrumentation",
-        "dx/interactiveImage",
-        "dx/lazy",
         "dx/logo",
         "dx/modalDrawer",
         "dx/pagination",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.53.0",
+    "version": "0.53.5",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -27,5 +27,6 @@
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6",
         "@types/vimeo__player": "^2.16.2"
-    }
+    },
+    "gitHead": "57c0600131ffd0be710b781c677bef1b093dc9d8"
 }

package/src/modules/dx/cardBlogPost/cardBlogPost.css

@@ -4,7 +4,7 @@ dx-card-content {
     --dx-c-body-max-lines: 3;
 }
 
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: 768px) {
     dx-card-content::part(body),
     dx-card-content::part(datetime) {
         display: none;

package/src/modules/dx/cardContent/cardContent.css

@@ -26,7 +26,7 @@
 
 /* mobile responsiveness */
 
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: 768px) {
     .card-content:not(.dx-card-base_featured) {
         flex-direction: row;
     }

package/src/modules/dx/cardTrailheadModule/cardTrailheadModule.css

@@ -12,7 +12,7 @@
     z-index: 1;
 }
 
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: 768px) {
     .badge {
         --badge-size: 56px;
     }

package/src/modules/dx/cardVideoPreview/cardVideoPreview.css

@@ -7,7 +7,7 @@
     z-index: 1;
 }
 
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: 768px) {
     dx-card-content::part(datetime) {
         display: block;
     }

package/src/modules/dx/cardVideoPreview/cardVideoPreview.html

@@ -16,6 +16,7 @@
             slot="image-badge"
         ></dx-icon-badge>
         <dx-formatted-date-time
+            if:true={datetime}
             slot="datetime"
             day="2-digit"
             month="long"

package/src/modules/dx/cardVideoPreview/cardVideoPreview.ts

@@ -2,7 +2,7 @@ import { LightningElement, api } from "lwc";
 
 export default class CardVideoPreview extends LightningElement {
     @api body?: string | null = null;
-    @api datetime!: string;
+    @api datetime?: string;
     @api featured?: boolean = false;
     @api href!: string;
     @api imgAlt?: string;

package/src/modules/dx/contentArchive/contentArchive.ts

@@ -306,6 +306,7 @@ export default class ContentArchive extends LightningElement {
 
         this.updateCheckedStatus();
         this.fetchPostsByCardType();
+        QueryCoordinator.setUrlParamValue(QUERY_SITE_FILTER, null);
     }
 
     private goToPage(e: CustomEvent) {

package/src/modules/dx/podcastSubscription/podcastSubscription.ts

@@ -3,14 +3,12 @@ import { LightningElement } from "lwc";
 export default class PodcastSubscription extends LightningElement {
     badgeLinks = [
         {
-            href:
-                "https://podcasts.apple.com/us/podcast/salesforce-developer-podcast/id1482325260",
+            href: "https://podcasts.apple.com/us/podcast/salesforce-developer-podcast/id1482325260",
             imgAlt: "Listen on Apple Podcasts",
             imgSrc: "/assets/svg/podcasts-subscription-apple.svg"
         },
         {
-            href:
-                "https://www.google.com/podcasts?feed=aHR0cHM6Ly9zYWxlc2ZvcmNlZGV2cG9kY2FzdC5saWJzeW4uY29tL3Jzcw%3D%3D",
+            href: "https://www.google.com/podcasts?feed=aHR0cHM6Ly9zYWxlc2ZvcmNlZGV2cG9kY2FzdC5saWJzeW4uY29tL3Jzcw%3D%3D",
             imgAlt: "Listen on Google Podcasts",
             imgSrc: "/assets/svg/podcasts-subscription-google.svg"
         },
@@ -27,28 +25,24 @@ export default class PodcastSubscription extends LightningElement {
             text: "Stitcher"
         },
         {
-            href:
-                "https://www.amazon.com/Emerald-City-Productions-Salesforce-Developer/dp/B082PPXMLN/",
+            href: "https://www.amazon.com/Emerald-City-Productions-Salesforce-Developer/dp/B082PPXMLN/",
             text: "Alexa"
         },
         {
-            href:
-                "https://www.pandora.com/podcast/salesforce-developer-podcast/PC:34746",
+            href: "https://www.pandora.com/podcast/salesforce-developer-podcast/PC:34746",
             text: "Pandora"
         },
         {
-            href:
-                "https://www.iheart.com/podcast/263-salesforce-developer-podca-56252827",
+            href: "https://www.iheart.com/podcast/263-salesforce-developer-podca-56252827",
             text: "iHeartRadio"
         },
         {
-            href:
-                "https://tunein.com/podcasts/Technology-Podcasts/Salesforce-Developer-Podcast-p1255006/",
+            href: "https://tunein.com/podcasts/Technology-Podcasts/Salesforce-Developer-Podcast-p1255006/",
             text: "Tune-in"
         },
         {
-            href: "https://www.breaker.audio/salesforce-developer-podcast",
-            text: "Breaker"
+            href: "https://player.fm/series/salesforce-developer-podcast",
+            text: "PlayerFM"
         },
         {
             href: "https://dev.to/salesforce_developers_podcast",

package/src/modules/dx/section/section.css

@@ -69,7 +69,7 @@
     margin-bottom: var(--dx-g-spacing-md);
 }
 
-.text > .label {
+.text > .label:not(:last-child) {
     margin-bottom: var(--dx-g-spacing-lg);
 }
 

package/src/modules/dx/section/section.ts

@@ -3,16 +3,16 @@ import cx from "classnames";
 import { toDxColor } from "utils/css";
 
 export default class Section extends LightningElement {
-    @api backgroundColor?: string | null = "transparent";
-    @api dark?: boolean = false;
+    @api backgroundColor: string = "transparent";
+    @api dark: boolean = false;
     @api headingLevel: "1" | "2" | "3" | "4" | "5" = "3";
-    @api label?: string | null = null;
-    @api subtitle?: string | null = null;
-    @api textAlign?: "center" | "left" = "left";
-    @api title?: string | null = null;
-    @api topGraphic?: boolean = false;
-    @api graphicOverlap?: boolean = false;
-    @api bottomGraphic?: boolean = false;
+    @api label?: string;
+    @api subtitle?: string;
+    @api textAlign: "center" | "left" = "left";
+    @api title?: string;
+    @api topGraphic: boolean = false;
+    @api graphicOverlap: boolean = false;
+    @api bottomGraphic: boolean = false;
 
     private get style(): string {
         return `--dx-c-section-background-color: ${toDxColor(

package/src/modules/dx/vimeoPlayer/vimeoPlayer.html

@@ -1,3 +1,3 @@
 <template>
-    <div class="video-container"></div>
+    <div class="video-container" lwc:dom="manual"></div>
 </template>

package/src/modules/helpers/card/card.css

@@ -184,18 +184,6 @@ a.dx-card-base:hover dx-card-title {
 
 /* Desktop Only */
 @media screen and (min-width: 1024px) {
-    .dx-card-base_layout-horizontal .dx-card-base_borderless-image_link {
-        align-self: flex-start;
-        flex-shrink: 0;
-        width: 0;
-        height: unset;
-        margin-right: var(--dx-g-card-img-spacing);
-        margin-bottom: unset;
-        padding-top: unset;
-        padding-right: 45%;
-        padding-bottom: 22.5%;
-    }
-
     .dx-card-base_featured dx-card-title {
         --dx-c-card-title-letter-spacing: -0.6px;
         --dx-c-card-title-font-size: 32px;
@@ -216,6 +204,21 @@ a.dx-card-base:hover dx-card-title {
     }
 }
 
+/* Tablet + Desktop Only */
+@media screen and (min-width: 764px) {
+    .dx-card-base_layout-horizontal .dx-card-base_borderless-image_link {
+        align-self: flex-start;
+        flex-shrink: 0;
+        width: 0;
+        height: unset;
+        margin-right: var(--dx-g-card-img-spacing);
+        margin-bottom: unset;
+        padding-top: unset;
+        padding-right: 45%;
+        padding-bottom: 22.5%;
+    }
+}
+
 /* Tablet */
 @media screen and (max-width: 1024px) {
     :host {
@@ -223,10 +226,6 @@ a.dx-card-base:hover dx-card-title {
         --dx-g-card-img-spacing: 16px;
     }
 
-    .dx-card-base_borderless-image {
-        min-height: unset;
-    }
-
     /* text resp */
     .dx-text-body-2,
     .dx-text-body-3 {
@@ -256,3 +255,9 @@ a.dx-card-base:hover dx-card-title {
         font-size: var(--dx-g-text-sm);
     }
 }
+
+@media screen and (max-width: 764px) {
+    .dx-card-base_borderless-image {
+        min-height: unset;
+    }
+}

package/src/modules/dx/cardGrid/cardGrid.css

@@ -1,89 +0,0 @@
-@import "helpers/reset";
-@import "helpers/text";
-
-.docs-action-bar {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    padding: var(--dx-g-spacing-md) 0 var(--dx-g-spacing-lg);
-}
-
-.docs-action-bar > .records-container {
-    margin-right: auto;
-}
-
-.docs-action-bar .filters-container {
-    display: flex;
-}
-
-.filter-checkbox-group,
-.filter-button::part(container) {
-    --dx-c-checkbox-text-transform: capitalize;
-
-    text-transform: var(--dx-c-checkbox-text-transform);
-}
-
-.docs-action-bar .filters-container > *:not(:first-child),
-.docs-search-input {
-    margin-left: var(--dx-g-spacing-sm);
-}
-
-.docs-search-input {
-    --dx-c-input-width: 285px;
-}
-
-.docs-card {
-    --dx-c-body-max-lines: 4;
-    --dx-c-heading-max-lines: 2;
-}
-
-.pagination-container {
-    max-width: fit-content;
-    max-width: -moz-fit-content;
-    margin: var(--dx-g-spacing-lg) auto;
-}
-
-@media screen and (max-width: 1024px) {
-    .docs-card {
-        --dx-c-body-max-lines: 3;
-    }
-}
-
-@media screen and (max-width: 768px) {
-    .docs-action-bar {
-        flex-direction: column-reverse;
-        width: 100%;
-        padding: 0;
-    }
-
-    .docs-search-input {
-        --dx-c-input-width: 100%;
-
-        width: 100%;
-        margin-bottom: var(--dx-g-spacing-md);
-    }
-
-    .docs-action-bar .records-container {
-        transform: translateY(-100%);
-    }
-}
-
-@media screen and (max-width: 600px) {
-    .pagination-container {
-        width: 100%;
-        overflow: hidden;
-    }
-
-    .pagination-container > * {
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-    }
-}
-
-@media screen and (max-width: 460px) {
-    .docs-action-bar .records-container {
-        transform: initial;
-        padding: var(--dx-g-spacing-md) 0;
-    }
-}

package/src/modules/dx/cardGrid/cardGrid.html

@@ -1,46 +0,0 @@
-<template>
-    <div class="card-grid">
-        <div class="docs-action-bar">
-            <div class="records-container">
-                <span if:true={endingRecord}>
-                    Showing { startingRecord } to { endingRecord } of {
-                    cards.length }
-                </span>
-            </div>
-            <div class="filters-container">
-                <slot name="filters"></slot>
-            </div>
-            <dx-input
-                size="small"
-                placeholder="Search..."
-                icon-symbol="search"
-                shortcut-key="j"
-                class="docs-search-input"
-                onchange={handleSearchChange}
-                value={searchTerm}
-            ></dx-input>
-        </div>
-        <dx-grid
-            columns={tileColumns}
-            if:false={showEmptyState}
-            class="card-container"
-        ></dx-grid>
-        <div style="display: none">
-            <slot name="cards" onslotchange={onSlotChange}></slot>
-        </div>
-        <div class="pagination-container" if:false={showEmptyState}>
-            <dx-pagination
-                current-page={page}
-                total-pages={totalPages}
-                pages-to-show={pagesToShow}
-                onpagechange={goToPage}
-                if:false={hidePagination}
-            ></dx-pagination>
-        </div>
-    </div>
-    <dx-empty-state
-        title="Beep boop. That did not compute."
-        subtitle={emptyStateSubtitle}
-        if:true={showEmptyState}
-    ></dx-empty-state>
-</template>

package/src/modules/dx/cardGrid/cardGrid.ts

@@ -1,140 +0,0 @@
-import { LightningElement, api } from "lwc";
-
-export default class CardGrid extends LightningElement {
-    @api pageSize = 24;
-    @api searchDebounce = 500;
-    page = 1;
-
-    private searchTerm = "";
-    private matchDesktop!: MediaQueryList;
-    private matchMobile!: MediaQueryList;
-    private matchMobileSmall!: MediaQueryList;
-    private deviceType: "desktop" | "mobile" | "mobile-small" = "desktop";
-    private searchTimeout?: number;
-    private cards: any[] = [];
-
-    private get startingRecord() {
-        return this.page === 1
-            ? this.page
-            : (this.page - 1) * this.pageSize + 1;
-    }
-
-    private get endingRecord() {
-        const defaultEndingRecord = this.pageSize * this.page;
-        return defaultEndingRecord > this.cards.length
-            ? this.cards.length
-            : defaultEndingRecord;
-    }
-
-    private get totalPages() {
-        return Math.ceil(this.cards.length / this.pageSize);
-    }
-
-    private get hidePagination() {
-        return this.totalPages < 2;
-    }
-
-    private get emptyStateSubtitle() {
-        return (
-            "No results" +
-            (this.searchTerm !== "" ? ` for "${this.searchTerm}"` : "")
-        );
-    }
-
-    private get showEmptyState() {
-        return !this.cards.length;
-    }
-
-    private get tileColumns() {
-        return this.deviceType === "desktop" ? "three" : "two";
-    }
-
-    private get pagesToShow() {
-        return this.deviceType === "mobile-small" ? 3 : 5;
-    }
-
-    connectedCallback(): void {
-        this.matchDesktop = window.matchMedia("(min-width: 1024px)");
-        this.matchDesktop.addEventListener("change", this.handleDesktopView);
-
-        this.matchMobile = window.matchMedia(
-            "(min-width: 401px) and (max-width: 1023px)"
-        );
-        this.matchMobile.addEventListener("change", this.handleMobileView);
-
-        this.matchMobileSmall = window.matchMedia("(max-width: 340px)");
-        this.matchMobileSmall.addEventListener(
-            "change",
-            this.handleMobileSmallView
-        );
-
-        if (this.matchMobile.matches) {
-            this.deviceType = "mobile";
-        }
-        if (this.matchMobileSmall.matches) {
-            this.deviceType = "mobile-small";
-        }
-    }
-
-    disconnectedCallback(): void {
-        this.matchDesktop.removeEventListener("change", this.handleDesktopView);
-        this.matchMobile.removeEventListener("change", this.handleMobileView);
-        this.matchMobileSmall.removeEventListener(
-            "change",
-            this.handleMobileSmallView
-        );
-    }
-
-    renderedCallback(): void {
-        this.displayCurrentPage();
-    }
-
-    onSlotChange() {
-        const slots = Array.from(
-            this.template.querySelectorAll("slot")
-        ) as HTMLSlotElement[];
-        this.cards = Array.from(slots[1].assignedElements()[0].children);
-    }
-
-    handleDesktopView = (e: MediaQueryListEvent | MediaQueryList) => {
-        if (e.matches) {
-            this.deviceType = "desktop";
-        }
-    };
-
-    handleMobileView = (e: MediaQueryListEvent | MediaQueryList) => {
-        if (e.matches) {
-            this.deviceType = "mobile";
-        }
-    };
-
-    handleMobileSmallView = (e: MediaQueryListEvent | MediaQueryList) => {
-        if (e.matches) {
-            this.deviceType = "mobile-small";
-        }
-    };
-
-    handleSearchChange(event: InputEvent): void {
-        window.clearTimeout(this.searchTimeout);
-        this.searchTimeout = window.setTimeout(() => {
-            this.dispatchEvent(
-                new CustomEvent("searchchange", { detail: event.detail })
-            );
-        }, this.searchDebounce);
-    }
-
-    goToPage(e: CustomEvent) {
-        this.page = e.detail;
-        this.displayCurrentPage();
-    }
-
-    displayCurrentPage() {
-        const cardContainer = this.template.querySelector(".card-container");
-        if (cardContainer) {
-            cardContainer.innerHTML = "";
-            this.cards
-                .slice(this.startingRecord - 1, this.endingRecord)
-                .map((node) => cardContainer?.appendChild(node));
-        }
-    }
-}

package/src/modules/dx/featureGrid/featureGrid.html

@@ -1,3 +0,0 @@
-<template>
-    <slot onslotchange={onSlotChange}></slot>
-</template>

package/src/modules/dx/featureGrid/featureGrid.ts

@@ -1,15 +0,0 @@
-import { LightningElement } from "lwc";
-import { LightningSlotElement } from "typings/custom";
-
-export default class FeatureGrid extends LightningElement {
-    private onSlotChange(e: LightningSlotElement) {
-        // @ts-ignore
-        const slot = e.target;
-        slot.assignedElements().forEach(
-            (featureElement: any, index: number) => {
-                featureElement.descriptionPosition =
-                    index % 2 === 0 ? "left" : "right";
-            }
-        );
-    }
-}

package/src/modules/dx/groupBio/groupBio.css

@@ -1,49 +0,0 @@
-@import "helpers/reset";
-@import "helpers/text";
-
-.container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.avatar {
-    border-radius: 9999px;
-    margin-bottom: var(--dx-g-spacing-md);
-}
-
-.name {
-    margin-bottom: var(--dx-g-spacing-sm);
-}
-
-.avatar.size-small {
-    width: 50px;
-}
-
-.avatar.size-medium {
-    width: 100px;
-}
-
-.avatar.size-large {
-    width: 200px;
-}
-
-.body {
-    text-align: center;
-}
-
-.position {
-    color: var(--dx-g-blue-vibrant-50);
-}
-
-.position.condensed {
-    color: inherit;
-}
-
-.descriptors {
-    margin-top: var(--dx-g-spacing-sm);
-}
-
-.descriptors > *:not(:last-child) {
-    margin-bottom: var(--dx-g-spacing-xs);
-}

package/src/modules/dx/groupBio/groupBio.html

@@ -1,29 +0,0 @@
-<template>
-    <div class="container">
-        <div if:true={imgSrc}>
-            <img class={imgClass} src={imgSrc} alt={imgAlt} />
-        </div>
-        <div class="body">
-            <p if:true={name} class={nameClass}>{name}</p>
-            <p if:true={position} class={positionClass}>{position}</p>
-            <div
-                if:false={isCondensedVariant}
-                class="descriptors dx-text-body-2"
-            >
-                <p if:true={descriptor1}>{descriptor1}</p>
-                <p if:true={descriptor2}>{descriptor2}</p>
-                <p if:true={descriptor3}>{descriptor3}</p>
-                <p if:true={profileHref}>
-                    <dx-button
-                        href={profileHref}
-                        target={profileTarget}
-                        rel={profileRel}
-                        variant="inline-inherit"
-                    >
-                        {profileText}
-                    </dx-button>
-                </p>
-            </div>
-        </div>
-    </div>
-</template>

package/src/modules/dx/groupBio/groupBio.ts

@@ -1,41 +0,0 @@
-import { LightningElement, api } from "lwc";
-
-export default class GroupBio extends LightningElement {
-    @api imgSrc: string = "";
-    @api imgAlt: string = "";
-    @api imgSize: "small" | "medium" | "large" = "large";
-    @api variant: "condensed" | "default" = "default";
-    @api name: string = "";
-    @api position: string = "";
-    @api descriptor1: string = "";
-    @api descriptor2: string = "";
-    @api descriptor3: string = "";
-    @api profileHref: string = "";
-    @api profileText: string = "";
-    @api profileTarget: string = "_blank";
-    @api profileRel: string = "noopener";
-
-    private get imgClass(): string {
-        return `avatar size-${this.imgSize}`;
-    }
-
-    private get nameClass(): string {
-        return `name ${
-            this.variant === "condensed"
-                ? "condensed dx-text-label-1"
-                : "dx-text-heading-4"
-        }`;
-    }
-
-    private get positionClass(): string {
-        return `position ${
-            this.variant === "condensed"
-                ? "condensed dx-text-body-3"
-                : "dx-text-heading-5"
-        }`;
-    }
-
-    private get isCondensedVariant(): boolean {
-        return this.variant === "condensed";
-    }
-}

package/src/modules/dx/headTags/headTags.html

@@ -1,3 +0,0 @@
-<template>
-    <slot></slot>
-</template>

package/src/modules/dx/headTags/headTags.ts

@@ -1,39 +0,0 @@
-import { LightningElement } from "lwc";
-
-const syncElementAttributes = (elementA: Element, elementB: Element) => {
-    if (elementB.textContent) {
-        elementA.textContent = elementB.textContent;
-    }
-    const names = elementB.getAttributeNames();
-    names.forEach((name: string) => {
-        const val = elementB.getAttribute(name);
-        if (val) {
-            elementA.setAttribute(name, val);
-        }
-    });
-};
-
-export default class HeadTags extends LightningElement {
-    connectedCallback() {
-        const innerElements = this.querySelectorAll("*");
-        if (innerElements) {
-            Array.from(innerElements).forEach((innerElement) => {
-                const elementName = innerElement.getAttribute("name");
-                let existingElement = null;
-                if (elementName) {
-                    existingElement = document.head.querySelector(
-                        `meta[name="${elementName}"]`
-                    );
-                }
-                if (innerElement.tagName === "TITLE") {
-                    existingElement = document.head.querySelector("title");
-                }
-                if (existingElement) {
-                    syncElementAttributes(existingElement, innerElement);
-                    return;
-                }
-                document.head.appendChild(innerElement);
-            });
-        }
-    }
-}

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

@@ -1,59 +0,0 @@
-@import "helpers/reset";
-@import "helpers/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

@@ -1,32 +0,0 @@
-<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

@@ -1,71 +0,0 @@
-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

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

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

@@ -1,163 +0,0 @@
-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();
-    }
-}