@salesforcedevs/dx-components 1.17.14-alpha → 1.18.0-alpha

package/lwc.config.json

@@ -28,6 +28,7 @@
         "dx/cardPodcastEpisode",
         "dx/cardSmall",
         "dx/cardStep",
+        "dx/cardTitle",
         "dx/cardTrailheadModule",
         "dx/cardTestimonial",
         "dx/cardTrial",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.17.14-alpha",
+    "version": "1.18.0-alpha",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

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

@@ -14,5 +14,7 @@
             clearable
         ></dx-input>
     </div>
-    <div class={className}><slot onslotchange={onSlotChange}></slot></div>
+    <div class={className} part="container">
+        <slot onslotchange={onSlotChange}></slot>
+    </div>
 </template>

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

@@ -123,13 +123,10 @@ export default class Grid extends LightningElement {
             }
         }
 
-        // @ts-ignore (no clue why "two" isn't being seen as a GridVariant type)
-        return (
-            {
-                4: "four",
-                3: "three"
-            }[ideal] || DEFAULT_COLUMNS
-        );
+        return ({
+            4: "four",
+            3: "three"
+        }[ideal] || DEFAULT_COLUMNS) as GridVariant;
     }
 
     onSlotChange(e: Event) {

package/src/modules/dx/tree/tree.ts

@@ -45,15 +45,17 @@ export default class Tree extends LightningElement {
         event.stopPropagation();
 
         const { key, name, isExternalLink } = event.detail;
-        this._value = name;
-        this.selectedKey = isExternalLink ? this.selectedKey : key;
-        this.dispatchEvent(
-            new CustomEvent("select", {
-                detail: { name },
-                composed: true,
-                bubbles: true
-            })
-        );
+        if (!isExternalLink) {
+            this._value = name;
+            this.selectedKey = key;
+            this.dispatchEvent(
+                new CustomEvent("select", {
+                    detail: { name },
+                    composed: true,
+                    bubbles: true
+                })
+            );
+        }
     }
 
     onExpandCollapse(event: CustomEvent) {

package/src/modules/dx/treeItem/treeItem.ts

@@ -25,8 +25,8 @@ export default class TreeItem extends LightningElement {
     private isChildrenLoading: boolean = false;
     private rootParentLabel: string = "";
 
-    private get isExternalLink() {
-        return (
+    private get isExternalLink(): boolean {
+        return !!(
             this._treeNode.link &&
             this._treeNode.link.target &&
             this._treeNode.link.target === "_blank"

package/src/modules/dx/treeTile/treeTile.html

@@ -11,29 +11,24 @@
                 ></dx-icon>
             </div>
             <span
-                if:true={isExternalLink}
                 class="tile-label sidebar-item-truncate-text"
                 title={treeNode.label}
             >
-                <span if:true={getModifiedLabel.restOfLabelWithSpace.length}>
-                    {getModifiedLabel.restOfLabelWithSpace}
-                </span>
-                <span class="whitespace-nowrap">
-                    {getModifiedLabel.lastWord}
-                    <dx-icon
-                        class="flex tile-icon tile-external-link-icon"
-                        symbol="new_window"
-                        sprite="utility"
-                        size="xsmall"
-                    ></dx-icon>
-                </span>
-            </span>
-            <span
-                if:false={isExternalLink}
-                class="tile-label sidebar-item-truncate-text"
-                title={treeNode.label}
-            >
-                {treeNode.label}
+                <template lwc:if={isExternalLink}>
+                    <span if:true={getModifiedLabel.restOfLabel.length}>
+                        {getModifiedLabel.restOfLabel}
+                    </span>
+                    <span class="whitespace-nowrap">
+                        {getModifiedLabel.lastWord}
+                        <dx-icon
+                            class="flex tile-icon tile-external-link-icon"
+                            symbol="new_window"
+                            sprite="utility"
+                            size="xsmall"
+                        ></dx-icon>
+                    </span>
+                </template>
+                <template lwc:else>{treeNode.label}</template>
             </span>
             <dx-metadata-badge
                 if:true={showMethod}

package/src/modules/dx/treeTile/treeTile.ts

@@ -61,17 +61,12 @@ export default class TreeTile extends LightningElement {
 
     // in case of multiline label, external link icon should not leave alone.
     private get getModifiedLabel() {
-        const label = this.treeNode.label;
-        const labelArr = label.trim().split(" ");
-        const lastWord = labelArr.pop();
-        const restOfLabel = labelArr.join(" ");
-        const restOfLabelWithSpace = restOfLabel.length
-            ? `${restOfLabel} `
-            : "";
+        const label = this.treeNode.label.trim().split(" ");
+        const lastWord = label.pop();
 
         return {
             lastWord,
-            restOfLabelWithSpace
+            restOfLabel: label.length ? `${label.join(" ")} ` : ""
         };
     }