@salesforcedevs/dx-components 0.3.12 → 0.3.14-banner-alpha1

package/src/modules/dx/tooltip/microtip.css

@@ -0,0 +1,269 @@
+/* Code generated by scripts/postinstall.js DO NOT EDIT*/
+
+
+/* -------------------------------------------------------------------
+  Microtip
+
+  Modern, lightweight css-only tooltips
+  Just 1kb minified and gzipped
+
+  @author Ghosh
+  @package Microtip
+
+----------------------------------------------------------------------
+  1. Base Styles
+  2. Direction Modifiers
+  3. Position Modifiers
+--------------------------------------------------------------------*/
+
+
+/* ------------------------------------------------
+  [1] Base Styles
+-------------------------------------------------*/
+
+[aria-label][role~="tooltip"] {
+  position: relative;
+}
+
+[aria-label][role~="tooltip"]::before,
+[aria-label][role~="tooltip"]::after {
+  transform: translate3d(0, 0, 0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  will-change: transform;
+  opacity: 0;
+  pointer-events: none;
+  transition: all var(--microtip-transition-duration, .18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s);
+  position: absolute;
+  box-sizing: border-box;
+  z-index: 10;
+  transform-origin: top;
+}
+
+[aria-label][role~="tooltip"]::before {
+  background-size: 100% auto !important;
+  content: "";
+}
+
+[aria-label][role~="tooltip"]::after {
+  background: rgba(17, 17, 17, .9);
+  border-radius: 4px;
+  color: #ffffff;
+  content: attr(aria-label);
+  font-size: var(--microtip-font-size, 13px);
+  font-weight: var(--microtip-font-weight, normal);
+  text-transform: var(--microtip-text-transform, none);
+  padding: .5em 1em;
+  white-space: nowrap;
+  box-sizing: content-box;
+}
+
+[aria-label][role~="tooltip"]:hover::before,
+[aria-label][role~="tooltip"]:hover::after,
+[aria-label][role~="tooltip"]:focus::before,
+[aria-label][role~="tooltip"]:focus::after {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+
+
+/* ------------------------------------------------
+  [2] Position Modifiers
+-------------------------------------------------*/
+
+[role~="tooltip"][data-microtip-position|="top"]::before {
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  height: 6px;
+  width: 18px;
+  margin-bottom: 5px;
+}
+
+[role~="tooltip"][data-microtip-position|="top"]::after {
+  margin-bottom: 11px;
+}
+
+[role~="tooltip"][data-microtip-position|="top"]::before {
+  transform: translate3d(-50%, 0, 0);
+  bottom: 100%;
+  left: 50%;
+}
+
+[role~="tooltip"][data-microtip-position|="top"]:hover::before {
+  transform: translate3d(-50%, -5px, 0);
+}
+
+[role~="tooltip"][data-microtip-position|="top"]::after {
+  transform: translate3d(-50%, 0, 0);
+  bottom: 100%;
+  left: 50%;
+}
+
+[role~="tooltip"][data-microtip-position="top"]:hover::after {
+  transform: translate3d(-50%, -5px, 0);
+}
+
+/* ------------------------------------------------
+  [2.1] Top Left
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-position="top-left"]::after {
+  transform: translate3d(calc(-100% + 16px), 0, 0);
+  bottom: 100%;
+}
+
+[role~="tooltip"][data-microtip-position="top-left"]:hover::after {
+  transform: translate3d(calc(-100% + 16px), -5px, 0);
+}
+
+
+/* ------------------------------------------------
+  [2.2] Top Right
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-position="top-right"]::after {
+  transform: translate3d(calc(0% + -16px), 0, 0);
+  bottom: 100%;
+}
+
+[role~="tooltip"][data-microtip-position="top-right"]:hover::after {
+  transform: translate3d(calc(0% + -16px), -5px, 0);
+}
+
+
+/* ------------------------------------------------
+  [2.3] Bottom
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-position|="bottom"]::before {
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  height: 6px;
+  width: 18px;
+  margin-top: 5px;
+  margin-bottom: 0;
+}
+
+[role~="tooltip"][data-microtip-position|="bottom"]::after {
+  margin-top: 11px;
+}
+
+[role~="tooltip"][data-microtip-position|="bottom"]::before {
+  transform: translate3d(-50%, -10px, 0);
+  bottom: auto;
+  left: 50%;
+  top: 100%;
+}
+
+[role~="tooltip"][data-microtip-position|="bottom"]:hover::before {
+  transform: translate3d(-50%, 0, 0);
+}
+
+[role~="tooltip"][data-microtip-position|="bottom"]::after {
+  transform: translate3d(-50%, -10px, 0);
+  top: 100%;
+  left: 50%;
+}
+
+[role~="tooltip"][data-microtip-position="bottom"]:hover::after {
+  transform: translate3d(-50%, 0, 0);
+}
+
+
+/* ------------------------------------------------
+  [2.4] Bottom Left
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-position="bottom-left"]::after {
+  transform: translate3d(calc(-100% + 16px), -10px, 0);
+  top: 100%;
+}
+
+[role~="tooltip"][data-microtip-position="bottom-left"]:hover::after {
+  transform: translate3d(calc(-100% + 16px), 0, 0);
+}
+
+
+/* ------------------------------------------------
+  [2.5] Bottom Right
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-position="bottom-right"]::after {
+  transform: translate3d(calc(0% + -16px), -10px, 0);
+  top: 100%;
+}
+
+[role~="tooltip"][data-microtip-position="bottom-right"]:hover::after {
+  transform: translate3d(calc(0% + -16px), 0, 0);
+}
+
+
+/* ------------------------------------------------
+  [2.6] Left
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-position="left"]::before,
+[role~="tooltip"][data-microtip-position="left"]::after {
+  bottom: auto;
+  left: auto;
+  right: 100%;
+  top: 50%;
+  transform: translate3d(10px, -50%, 0);
+}
+
+[role~="tooltip"][data-microtip-position="left"]::before {
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  height: 18px;
+  width: 6px;
+  margin-right: 5px;
+  margin-bottom: 0;
+}
+
+[role~="tooltip"][data-microtip-position="left"]::after {
+  margin-right: 11px;
+}
+
+[role~="tooltip"][data-microtip-position="left"]:hover::before,
+[role~="tooltip"][data-microtip-position="left"]:hover::after {
+  transform: translate3d(0, -50%, 0);
+}
+
+
+/* ------------------------------------------------
+  [2.7] Right
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-position="right"]::before,
+[role~="tooltip"][data-microtip-position="right"]::after {
+  bottom: auto;
+  left: 100%;
+  top: 50%;
+  transform: translate3d(-10px, -50%, 0);
+}
+
+[role~="tooltip"][data-microtip-position="right"]::before {
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  height: 18px;
+  width: 6px;
+  margin-bottom: 0;
+  margin-left: 5px;
+}
+
+[role~="tooltip"][data-microtip-position="right"]::after {
+  margin-left: 11px;
+}
+
+[role~="tooltip"][data-microtip-position="right"]:hover::before,
+[role~="tooltip"][data-microtip-position="right"]:hover::after {
+  transform: translate3d(0, -50%, 0);
+}
+
+/* ------------------------------------------------
+  [3] Size
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-size="small"]::after {
+  white-space: initial;
+  width: 80px;
+}
+
+[role~="tooltip"][data-microtip-size="medium"]::after {
+  white-space: initial;
+  width: 150px;
+}
+
+[role~="tooltip"][data-microtip-size="large"]::after {
+  white-space: initial;
+  width: 260px;
+}

package/src/modules/dx/tooltip/tooltip.css

@@ -1,4 +1,4 @@
-@import "./tippy.css";
+@import "./microtip.css";
 
 :host {
     display: inline-block;
@@ -8,17 +8,30 @@
     display: inherit;
 }
 
-.tippy-box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: var(--dx-g-spacing-xl);
+[role~="tooltip"][data-microtip-position|="bottom"]::before {
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%28116,%20116,%20116,%201%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
+        no-repeat;
+}
+
+[role~="tooltip"][data-microtip-position|="top"]::before {
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%28116,%20116,%20116,%201%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
+        no-repeat;
+}
+
+[role~="tooltip"][data-microtip-position|="left"]::before {
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%28116,%20116,%20116,%201%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
+        no-repeat;
+}
+
+[role~="tooltip"][data-microtip-position|="right"]::before {
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%28116,%20116,%20116,%201%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
+        no-repeat;
+}
+
+[aria-label][role~="tooltip"]::after {
     background-color: var(--dx-g-gray-50);
     font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-xs);
     color: white;
-}
-
-.tippy-arrow {
-    color: var(--dx-g-gray-50);
+    line-height: var(--dx-g-text-xs);
 }

package/src/modules/dx/tooltip/tooltip.html

@@ -1,5 +1,5 @@
 <template>
-    <div class="slot-container">
+    <div data-microtip-position={placement} role="tooltip" aria-label={label}>
         <slot></slot>
     </div>
 </template>

package/src/modules/dx/tooltip/tooltip.ts

@@ -1,42 +1,6 @@
 import { LightningElement, api } from "lwc";
-import tippy from "tippy.js";
-import { Placement } from "@popperjs/core";
-export default class Tooltip extends LightningElement {
-    @api placement?: Placement = "top";
-    @api persist: Boolean = false;
-
-    @api
-    set label(value: string) {
-        const isChanged: boolean = this._label !== value;
-        this._label = value;
-        if (this.tooltip && isChanged) {
-            this.tooltip.setProps({ content: this._label });
-        }
-    }
-
-    get label(): string {
-        return this._label;
-    }
 
-    private _label: string = "";
-    private tooltip: any = null;
-    private container: HTMLElement | null = null;
-
-    renderedCallback() {
-        if (!this.container) {
-            this.container = this.template.querySelector(".slot-container");
-            this.addTooltip();
-        }
-    }
-
-    private addTooltip() {
-        if (this.container && this.label) {
-            this.tooltip = tippy(this.container, {
-                content: this.label,
-                appendTo: this.container,
-                placement: this.placement,
-                hideOnClick: !this.persist
-            });
-        }
-    }
+export default class Tooltip extends LightningElement {
+    @api placement?: String = "top";
+    @api label: string = "";
 }

package/src/modules/dx/topics/topics.css

@@ -0,0 +1,26 @@
+:host {
+    display: block;
+}
+
+.container {
+    align-items: center;
+    color: var(--dx-g-blue-vibrant-20);
+    font-size: var(--dx-g-text-xs);
+    font-family: var(--dx-g-font-display);
+    font-weight: var(--dx-g-font-demi);
+    display: flex;
+    gap: var(--dx-g-spacing-sm);
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    flex-wrap: wrap;
+}
+
+.dot-separator {
+    --size: 4px;
+
+    height: var(--size);
+    width: var(--size);
+    background-color: var(--dx-g-blue-vibrant-20);
+    border-radius: 100%;
+    margin-bottom: 3px;
+}

package/src/modules/dx/topics/topics.html

@@ -0,0 +1,12 @@
+<template>
+    <div class="container dx-text-label-1-dark">
+        <template for:each={normalizedTopics} for:item="topic">
+            <span key={topic.id}>{topic.label}</span>
+            <span
+                key={topic.id}
+                if:false={topic.isLast}
+                class="dot-separator"
+            ></span>
+        </template>
+    </div>
+</template>

package/src/modules/dx/topics/topics.ts

@@ -0,0 +1,25 @@
+import { LightningElement, api } from "lwc";
+import { normalizeToArray } from "dxUtils/normalizers";
+
+export default class Topics extends LightningElement {
+    private _topics: Array<string> = [];
+
+    @api
+    get topics() {
+        return this._topics;
+    }
+
+    set topics(value) {
+        this._topics = normalizeToArray(value);
+    }
+
+    get normalizedTopics() {
+        const { length } = this._topics;
+
+        return this._topics?.map((topic, index) => ({
+            id: topic,
+            label: topic,
+            isLast: index === length - 1
+        }));
+    }
+}

package/src/modules/dx/tree/tree.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 :host {
     display: block;

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

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import { TreeNode, InternalTreeNode } from "typings/custom";
-import { toJson } from "utils/normalizers";
+import { toJson } from "dxUtils/normalizers";
 import { TreeHandler } from "./treeHandler";
 
 export default class Tree extends LightningElement {
@@ -63,6 +63,14 @@ export default class Tree extends LightningElement {
         if (node) {
             node.isExpanded = !node.isExpanded;
         }
+        const { name, isSelectAction, isExpanded } = event.detail;
+        this.dispatchEvent(
+            new CustomEvent("expandcollapse", {
+                detail: { name, isSelectAction, isExpanded },
+                composed: true,
+                bubbles: true
+            })
+        );
     }
 
     onRegister(event: CustomEvent<{ key: string; setExpanded: Function }>) {

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

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 :host {
     display: block;
@@ -12,3 +12,14 @@ button {
 button:focus {
     outline-offset: -1px;
 }
+
+.tree-children-loading {
+    margin: var(--dx-g-spacing-sm) var(--dx-g-spacing-md) var(--dx-g-spacing-md)
+        var(--dx-g-spacing-md);
+}
+
+@media (max-width: 768px) {
+    .tree-children-loading {
+        width: 100%;
+    }
+}

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

@@ -1,24 +1,23 @@
 <template>
-    <button if:false={href} onclick={onButtonClick} aria-label={treeNode.label}>
-        <dx-tree-tile
-            is-root={isRoot}
-            tree-node={treeNode}
-            is-expanded={isExpanded}
-            has-children={hasChildren}
-            is-selected={isSelected}
-            oniconclick={onIconClick}
-        ></dx-tree-tile>
-    </button>
-    <a if:true={href} href={href} target={target}>
+    <a href={href} target={target} onclick={onLinkClick}>
         <dx-tree-tile
+            href={href}
             is-root={isRoot}
             tree-node={treeNode}
             is-expanded={isExpanded}
             has-children={hasChildren}
             is-selected={isSelected}
             oniconclick={onIconClick}
+            show-arrow={isParent}
+            target={target}
         ></dx-tree-tile>
     </a>
+    <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

@@ -1,5 +1,8 @@
 import { LightningElement, api } from "lwc";
 import { InternalTreeNode } from "typings/custom";
+import { track } from "dxUtils/analytics";
+import { SidebarGtmAction } from "typings/custom";
+import { isInViewport } from "dxUtils/browser";
 
 const DEFAULT_TARGET = "_self";
 
@@ -15,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;
@@ -32,12 +37,24 @@ export default class TreeItem extends LightningElement {
         );
     }
 
+    private get showChildrenLoading(): boolean {
+        return this.isExpanded && !this.hasChildren && this.isChildrenLoading;
+    }
+
+    private get isParent(): boolean {
+        return this.hasChildren || this.isChildrenLoading;
+    }
+
     private get showChildren(): boolean {
         return this.isExpanded && this.hasChildren;
     }
 
     private get href(): string | undefined {
-        return this._treeNode.link && this._treeNode.link.href;
+        return (
+            (this._treeNode.link && this._treeNode.link.href) ||
+            this._treeNode.name ||
+            ""
+        );
     }
 
     private get target(): string {
@@ -48,28 +65,59 @@ export default class TreeItem extends LightningElement {
     }
 
     connectedCallback(): void {
-        if (this.hasChildren) {
+        if (this.isParent) {
             this.fireEvent("register", {
                 setExpanded: this.setExpanded.bind(this)
             });
         }
     }
 
-    private onIconClick(): void {
-        this.doExpand();
+    renderedCallback(): void {
+        this.sendEventToParentIfSelected();
     }
 
-    private onButtonClick(): void {
-        if (this.hasChildren) {
-            this.doExpand();
+    private sendEventToParentIfSelected(): void {
+        /**
+         * This is to send selected element reference to parent if it's not visible in the viewport
+         * Parent component will use the elements offsetTop scrollTo that element's position
+         */
+        if (this.isSelected) {
+            const element = this.template.querySelector("dx-tree-tile");
+            if (element && !isInViewport(element)) {
+                this.fireEvent("selecteditemrendered", {
+                    element
+                });
+            }
         }
+    }
 
+    private onIconClick(event: CustomEvent): void {
+        const isSelectAction = false;
+        this.doExpand(isSelectAction);
+        this.sendGtm(event, this.isExpanded ? "expand" : "collapse");
+    }
+
+    private onLinkClick(event: Event): void {
+        if (!(this._treeNode.link && this._treeNode.link.href)) {
+            event.preventDefault();
+        }
+
+        if (this.isParent) {
+            const isSelectAction = true;
+            this.doExpand(isSelectAction);
+        }
+
+        this.sendGtm(event, "click");
         this.fireEvent("tileselected", { name: this._treeNode.name });
     }
 
-    private doExpand(): void {
+    private doExpand(isSelectAction: boolean): void {
         this.isExpanded = !this.isExpanded;
-        this.fireEvent("expandcollapse");
+        this.fireEvent("expandcollapse", {
+            name: this._treeNode.name,
+            isSelectAction,
+            isExpanded: this.isExpanded
+        });
     }
 
     private fireEvent(type: string, detail = {}): void {
@@ -88,4 +136,11 @@ export default class TreeItem extends LightningElement {
     private setExpanded(value: boolean): void {
         this.isExpanded = value;
     }
+
+    private sendGtm(event: Event, sideNavAction: SidebarGtmAction) {
+        track(event.currentTarget!, "custEv_leftNavLinkClick", {
+            clickText: this._treeNode.label,
+            sideNavAction
+        });
+    }
 }