@salesforcedevs/dx-components 0.45.0 → 0.46.0-tree-loading

package/package.json

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

package/src/assets/svg/sidebar-item-loading.svg

@@ -0,0 +1,9 @@
+<svg width="100%" height="128" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <mask id="mask0_581_15739" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="16" y="8" width="267" height="112">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M24 8C19.5817 8 16 11.5817 16 16C16 20.4183 19.5817 24 24 24H252C256.418 24 260 20.4183 260 16C260 11.5817 256.418 8 252 8H24ZM24 40C19.5817 40 16 43.5817 16 48C16 52.4183 19.5817 56 24 56H213C217.418 56 221 52.4183 221 48C221 43.5817 217.418 40 213 40H24ZM16 80C16 75.5817 19.5817 72 24 72H275C279.418 72 283 75.5817 283 80C283 84.4183 279.418 88 275 88H24C19.5817 88 16 84.4183 16 80ZM24 104C19.5817 104 16 107.582 16 112C16 116.418 19.5817 120 24 120H175C179.418 120 183 116.418 183 112C183 107.582 179.418 104 175 104H24Z" fill="#E5E5E5"/>
+    </mask>
+    <g mask="url(#mask0_581_15739)">
+        <rect width="100%" height="128" fill="#E5E5E5"/>
+    </g>
+</svg>

package/src/modules/dx/button/button.css

@@ -116,7 +116,8 @@
     border: 1px solid var(--dx-c-button-primary-color);
 }
 
-.button.variant_primary:hover {
+.button.variant_primary:hover,
+:host([aria-expanded="true"]) .button.variant_primary {
     background: var(--dx-c-button-primary-color-hover);
     border-color: var(--dx-c-button-primary-color-hover);
 }
@@ -129,7 +130,8 @@
     border: 1px solid var(--dx-c-button-primary-color);
 }
 
-.button.variant_secondary:hover {
+.button.variant_secondary:hover,
+:host([aria-expanded="true"]) .button.variant_secondary {
     background: var(--dx-c-button-secondary-color-hover);
 }
 
@@ -146,7 +148,8 @@
     color: white;
 }
 
-.button.variant_tertiary:hover {
+.button.variant_tertiary:hover,
+:host([aria-expanded="true"]) .button.variant_tertiary {
     background: var(--dx-c-button-secondary-color-hover);
     border-color: var(--dx-c-button-secondary-color-hover);
 }
@@ -161,7 +164,9 @@
 }
 
 .button.variant_inline:hover,
-.button.variant_inline-inherit:hover {
+.button.variant_inline-inherit:hover,
+:host([aria-expanded="true"])
+    :is(.button.variant_inline, .button.variant_inline-inherit) {
     color: var(--dx-c-button-inline-color-hover);
 }
 
@@ -176,7 +181,8 @@
     border: 1px solid var(--dx-c-button-custom-border);
 }
 
-.button.variant_custom:hover {
+.button.variant_custom:hover,
+:host([aria-expanded="true"]) .button.variant_custom {
     color: var(--dx-c-button-custom-color-hover);
     background: var(--dx-c-button-custom-background-hover);
     border-color: var(--dx-c-button-custom-border-hover);

package/src/modules/dx/sidebar/sidebar.ts

@@ -145,7 +145,7 @@ export default class Sidebar extends SidebarBase {
     }
 
     renderedCallback() {
-        super.renderedCallback()
+        super.renderedCallback();
         this.initializeSearchScrollPosition();
     }
 
@@ -160,7 +160,7 @@ export default class Sidebar extends SidebarBase {
     }
 
     disconnectedCallback() {
-        super.disconnectedCallback()
+        super.disconnectedCallback();
         this.matchMedia.removeEventListener("change", this.onMediaChange);
     }
 

package/src/modules/dx/sidebarOld/sidebarOld.html

@@ -49,7 +49,10 @@
                     ></dx-input>
                 </div>
             </div>
-            <div class="sidebar-content sidebar-content-tree" if:true={anyResultMatch}>
+            <div
+                class="sidebar-content sidebar-content-tree"
+                if:true={anyResultMatch}
+            >
                 <dx-tree
                     for:each={filteredTrees}
                     for:item="tree"

package/src/modules/dx/sidebarOld/sidebarOld.ts

@@ -86,7 +86,7 @@ export default class Sidebar extends SidebarBase {
     }
 
     disconnectedCallback() {
-        super.disconnectedCallback()
+        super.disconnectedCallback();
         this.matchMedia.removeEventListener("change", this.onMediaChange);
     }
 
@@ -160,8 +160,9 @@ export default class Sidebar extends SidebarBase {
         valuePattern: RegExp,
         node: TreeNode
     ): TreeNode | undefined {
+        const isExpanded = node.isChildrenLoading ? false : true;
         if (valuePattern.test(node.label.toLowerCase())) {
-            return { ...node, isExpanded: true };
+            return { ...node, isExpanded };
         }
 
         const filteredChildren = this.filterChildren(
@@ -169,7 +170,7 @@ export default class Sidebar extends SidebarBase {
             node.children
         );
         return filteredChildren.length > 0
-            ? { ...node, children: filteredChildren, isExpanded: true }
+            ? { ...node, children: filteredChildren, isExpanded }
             : undefined;
     }
 

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

@@ -62,6 +62,7 @@ export class TreeHandler {
             ),
             level: level,
             isExpanded: node.isExpanded || false,
+            isChildrenLoading: node.isChildrenLoading || false,
             link: node.link,
             method: node.method
         };

package/src/modules/dx/treeItem/treeItem.css

@@ -12,3 +12,9 @@ button {
 button:focus {
     outline-offset: -1px;
 }
+
+@media (max-width: 768px) {
+    .tree-children-loading {
+        width: 100%;
+    }
+}

package/src/modules/dx/treeItem/treeItem.html

@@ -8,8 +8,16 @@
             has-children={hasChildren}
             is-selected={isSelected}
             oniconclick={onIconClick}
+            show-arrow={showArrow}
         ></dx-tree-tile>
     </a>
+    <!-- TODO: Need to change the loading svg or change it to animated component-->
+    <img
+        if:true={showChildrenLoading}
+        class="tree-children-loading"
+        src="/assets/svg/sidebar-item-loading.svg"
+        alt="childrenLoading"
+    />
     <template if:true={showChildren}>
         <template for:each={treeNode.children} for:item="child">
             <dx-tree-item

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

@@ -18,10 +18,12 @@ export default class TreeItem extends LightningElement {
     public set treeNode(node) {
         this._treeNode = node;
         this.isExpanded = (node && node.isExpanded) || false;
+        this.isChildrenLoading = (node && node.isChildrenLoading) || false;
     }
 
     private _treeNode!: InternalTreeNode;
     private isExpanded: boolean = false;
+    private isChildrenLoading: boolean = false;
 
     private get isSelected(): boolean {
         return this._treeNode.key === this.selectedKey;
@@ -35,6 +37,14 @@ export default class TreeItem extends LightningElement {
         );
     }
 
+    private get showChildrenLoading(): boolean {
+        return this.isExpanded && this.isChildrenLoading;
+    }
+
+    private get showArrow(): boolean {
+        return this.hasChildren || this.isChildrenLoading;
+    }
+
     private get showChildren(): boolean {
         return this.isExpanded && this.hasChildren;
     }

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

@@ -7,7 +7,7 @@
             >
                 {treeNode.label}
             </span>
-            <div class="flex tile-expand-icon tile-icon" if:true={hasChildren}>
+            <div class="flex tile-expand-icon tile-icon" if:true={showArrow}>
                 <dx-icon
                     aria-expanded={isExpanded}
                     size={iconSize}

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

@@ -1,6 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { InternalTreeNode } from "typings/custom";
+import { normalizeBoolean } from "utils/normalizers";
 
 const methodTextMap: {
     [key: string]: string;
@@ -24,6 +25,17 @@ export default class TreeTile extends LightningElement {
         return this.treeNode.level + 2;
     }
 
+    private _showArrow = false;
+
+    @api
+    get showArrow() {
+        return this._showArrow;
+    }
+
+    set showArrow(value) {
+        this._showArrow = normalizeBoolean(value);
+    }
+
     private get iconSize() {
         return this.isRoot ? "small" : "xsmall";
     }

package/LICENSE

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