@salesforcedevs/dx-components 1.11.0 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.11.0",
+    "version": "1.12.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -46,5 +46,5 @@
     "volta": {
         "node": "18.18.0"
     },
-    "gitHead": "1a385f93ac43999ab58f5f373d05653f732ca217"
+    "gitHead": "1c9e6eb2ccd22598e23eaa1f8388a61a2f784394"
 }

package/src/modules/dx/grid/grid.css

@@ -14,6 +14,11 @@
     /* This class intentionally left blank. */
 }
 
+.search-input {
+    margin-bottom: var(--dx-g-spacing-md);
+    width: 250px;
+}
+
 @media (min-width: 640px) {
     .col-two,
     .col-three,

package/src/modules/dx/grid/grid.html

@@ -1,3 +1,18 @@
 <template>
+    <div class="search-input" lwc:if={isSearchable}>
+        <dx-input
+            class="search-box"
+            type="search"
+            placeholder={getSearchPlaceholder}
+            role="search"
+            aria-label="Search the below items"
+            icon-symbol="search"
+            size="small"
+            value={searchValue}
+            onchange={onInputChange}
+            shortcut-key="j"
+            clearable
+        ></dx-input>
+    </div>
     <div class={className}><slot onslotchange={onSlotChange}></slot></div>
 </template>

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

@@ -4,6 +4,11 @@ import { GridVariant, LightningSlotElement } from "typings/custom";
 
 const DEFAULT_COLUMNS = "three";
 
+interface SlottedItem {
+    originalDiplayValue: string;
+    htmlElement: HTMLElement;
+}
+
 export default class Grid extends LightningElement {
     @api
     get columns() {
@@ -16,8 +21,69 @@ export default class Grid extends LightningElement {
         this._columns = value;
     }
 
+    @api searchPlaceholder?: string;
+
+    /*
+        The data passed in must be an array of elements equal to the number of items 
+        slotted into this grid. Each item in the array can either be a string, or an object.
+        In the second case, we will search on all the string values of these objects.
+    */
+    @api
+    set searchData(value: string) {
+        const data = JSON.parse(value);
+        this._searchData = data.map((item: any) =>
+            typeof item === "string"
+                ? item.toLowerCase()
+                : Object.values(item)
+                      .filter((e) => typeof e === "string")
+                      .join("")
+                      .toLowerCase()
+        );
+    }
+    get searchData(): string[] {
+        return this._searchData;
+    }
+    searchValue: string = "";
+
+    private get isSearchable(): boolean {
+        return (
+            Boolean(this.searchData) &&
+            this._itemCount > 1 &&
+            this.searchData.length === this._itemCount
+        );
+    }
+
+    private get getSearchPlaceholder(): string {
+        return this.searchPlaceholder ? this.searchPlaceholder : "Search";
+    }
+
+    private onInputChange(e: CustomEvent) {
+        this.searchValue = e.detail.toLowerCase();
+        this.displaySearchResults();
+    }
+
+    private displaySearchResults() {
+        if (this.searchValue) {
+            this._slottedItems?.forEach((item, index) => {
+                const searchDatum = this._searchData[index];
+                if (searchDatum && searchDatum.indexOf(this.searchValue) > -1) {
+                    item.htmlElement.style.display = item.originalDiplayValue;
+                } else {
+                    item.htmlElement.style.display = "none";
+                }
+            });
+        } else {
+            // show all items
+            this._slottedItems?.forEach((item) => {
+                item.htmlElement.style.display = item.originalDiplayValue;
+            });
+        }
+    }
+
     _columns!: GridVariant;
-    _itemCount: number | null = null;
+    _itemCount: number = 0;
+    _slottedItems?: SlottedItem[];
+    _searchData: string[] = [];
 
     private get className(): string {
         return cx("container", `col-${this.columns}`);
@@ -67,6 +133,16 @@ export default class Grid extends LightningElement {
     }
 
     onSlotChange(e: Event) {
-        this._itemCount = (e.target as LightningSlotElement).assignedElements().length;
+        const slottedItems = (
+            e.target as LightningSlotElement
+        ).assignedElements();
+        this._itemCount = slottedItems.length;
+        this._slottedItems = slottedItems.map((item) => {
+            const htmlElement = item as HTMLElement;
+            return {
+                originalDiplayValue: htmlElement.style.display,
+                htmlElement: htmlElement
+            };
+        });
     }
 }

package/src/modules/dx/podcastHost/podcastHost.css

@@ -37,7 +37,7 @@ dx-icon {
 
 .host-bio > p {
     margin: 16px 0;
-    color: var(--dx-g-blog-post-hr-color);
+    color: var(--dx-g-text-body-color);
 }
 
 .dx-text-label-2 {