@salesforcedevs/dx-components 0.43.3-tree-selected-scroll-9 → 0.45.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.43.3-tree-selected-scroll-9",
+    "version": "0.45.0-alpha1",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/{cardGrid/cardGrid.css → cardGridDocs/cardGridDocs.css}

@@ -16,27 +16,15 @@
     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 {
+dx-search-input {
     margin-left: var(--dx-g-spacing-sm);
 }
 
-.docs-search-input {
+dx-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;
@@ -56,7 +44,7 @@
         padding: 0;
     }
 
-    .docs-search-input {
+    dx-search-input {
         --dx-c-input-width: 100%;
 
         width: 100%;

package/src/modules/dx/cardGridDocs/cardGridDocs.html

@@ -0,0 +1,67 @@
+<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={onSearchChange}
+                value={value}
+            ></dx-input>
+        </div>
+        <dx-grid columns="four">
+            <template for:each={currentPageCards} for:item="card">
+                <dx-card-docs
+                    key={card.title}
+                    body={card.body}
+                    href={card.href}
+                    img-alt={card.imgAlt}
+                    img-src={card.imgSrc}
+                    label={card.label}
+                    title={card.title}
+                    target={card.target}
+                    show-mobile-img={card.showMobileImg}
+                >
+                    <template
+                        if:true={card.links}
+                        for:each={card.links}
+                        for:item="link"
+                    >
+                        <dx-button
+                            key={link.title}
+                            href={link.href}
+                            variant="inline"
+                        >
+                            { link.title }
+                        </dx-button>
+                    </template>
+                </dx-card-docs>
+            </template>
+        </dx-grid>
+        <div class="pagination-container" if:false={showEmptyState}>
+            <dx-pagination
+                current-page={page}
+                total-pages={totalPages}
+                pages-to-show="5"
+                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/cardGridDocs/cardGridDocs.ts

@@ -0,0 +1,73 @@
+import { LightningElement, api, track } from "lwc";
+import { toJson } from "utils/normalizers";
+import { DocsCard } from "typings/custom";
+
+export default class CardGridDocs extends LightningElement {
+    @api pageSize = 24;
+    @api
+    get cards(): DocsCard[] {
+        return this.value
+            ? this._cards.filter((card: DocsCard) =>
+                  Object.values(card).some(
+                      (val) =>
+                          typeof val === "string" &&
+                          val.includes(this.value || "")
+                  )
+              )
+            : this._cards;
+    }
+    set cards(value) {
+        this._cards = toJson(value);
+    }
+
+    private page: number = 1;
+    private _cards: DocsCard[] = [];
+    @track
+    private value?: string;
+
+    private get currentPageCards() {
+        return this.cards.slice(this.startingRecord - 1, this.endingRecord);
+    }
+
+    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.value !== "" ? ` for "${this.value}"` : "");
+    }
+
+    private get showEmptyState() {
+        return !this.cards.length;
+    }
+
+    private onSearchChange(e: InputEvent): void {
+        const detail = `${e.detail}`;
+        this.value = detail === "" ? undefined : detail;
+
+        if (this.startingRecord > this.cards.length) {
+            this.page = 1;
+        }
+    }
+
+    private goToPage(e: CustomEvent) {
+        this.page = e.detail;
+    }
+}

package/src/modules/dx/dropdownOption/dropdownOption.ts

@@ -31,11 +31,16 @@ export default class DropdownOption extends LightningElement {
         const navSubHeading =
             (this.navItemLabel ? this.option.label : undefined) || undefined;
 
-        const payload = {
+        const payload: any = {
             navHeading,
             navSubHeading,
             clickText: this.keyValue || undefined,
-            pageLocation: window.location.pathname || undefined
+            pageLocation: window.location.pathname || undefined,
+            elementType: "dropdown",
+            destinationType: "internal",
+            ctaClick: true,
+            itemTitle: this.option.label || undefined,
+            clickUrl: e.target?.href || undefined
         };
 
         if (this.analyticsEvent && e.currentTarget) {

package/src/modules/dx/grid/grid.ts

@@ -67,6 +67,8 @@ export default class Grid extends LightningElement {
     }
 
     onSlotChange(e: Event) {
-        this._itemCount = (e.target as LightningSlotElement).assignedElements().length;
+        this._itemCount = (
+            e.target as LightningSlotElement
+        ).assignedElements().length;
     }
 }

package/src/modules/dx/pagination/pagination.ts

@@ -93,12 +93,15 @@ export default class Pagination extends LightningElement {
         const page = this.calculatePage(e);
         const clickType = this.getPaginationClickType(e);
 
+        const clickText =
+            clickType === PaginationClickType.Number
+                ? page
+                : (e.target as HTMLElement).dataset.partId;
+
         track(e.currentTarget!, "custEv_pagination", {
             ...ANALYTICS_INFO,
-            clickText:
-                clickType === PaginationClickType.Number
-                    ? page
-                    : (e.target as HTMLElement).dataset.partId
+            clickText,
+            itemTitle: clickText
         });
 
         this.dispatchEvent(new CustomEvent("pagechange", { detail: page }));

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