@salesforcedevs/dx-components 0.53.1 → 0.53.2

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.1",
+    "version": "0.53.2",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -28,5 +28,5 @@
         "@types/lodash.get": "^4.4.6",
         "@types/vimeo__player": "^2.16.2"
     },
-    "gitHead": "d0ec69fdb1483f7061ef4deeddc583c0ec3a11d5"
+    "gitHead": "37bfd27f1580498841761daaeb7da20f5a539d3e"
 }

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/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();
-    }
-}