@genexus/genexus-ide-ui 0.0.9

package/dist/components/ch-sidebar-menu.js

@@ -0,0 +1,696 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { C as ClickOutside } from './index2.js';
+
+class StorageItem {
+  constructor(data) {
+    this.key = data.key;
+    this.value = data.value;
+  }
+}
+// class for working with session storage in browser (common that can use other classes for store some data)
+class SessionStorageWorker {
+  constructor() {
+    this.sessionStorageSupported =
+      typeof window.sessionStorage !== "undefined" &&
+        window.sessionStorage != null;
+  }
+  // add value to storage
+  add(key, item) {
+    if (this.sessionStorageSupported) {
+      sessionStorage.setItem(key, item);
+    }
+  }
+  // get all values from storage (all items)
+  getAllItems() {
+    const list = new Array();
+    for (let i = 0; i < sessionStorage.length; i++) {
+      const key = sessionStorage.key(i);
+      const value = sessionStorage.getItem(key);
+      list.push(new StorageItem({
+        key: key,
+        value: value
+      }));
+    }
+    return list;
+  }
+  // get only all values from sessionStorage
+  getAllValues() {
+    const list = new Array();
+    for (let i = 0; i < sessionStorage.length; i++) {
+      const key = sessionStorage.key(i);
+      const value = sessionStorage.getItem(key);
+      list.push(value);
+    }
+    return list;
+  }
+  // get one item by key from storage
+  get(key) {
+    if (this.sessionStorageSupported) {
+      const item = sessionStorage.getItem(key);
+      return item;
+    }
+    else {
+      return null;
+    }
+  }
+  // remove value from storage
+  remove(key) {
+    if (this.sessionStorageSupported) {
+      sessionStorage.removeItem(key);
+    }
+  }
+  // clear storage (remove all items from it)
+  clear() {
+    if (this.sessionStorageSupported) {
+      sessionStorage.clear();
+    }
+  }
+}
+
+const chSidebarMenuCss = ":host{--title-font-family:\"Source Sans Pro\", sans-serif;--title-text-transform:lowercase;--title-font-weight:bold;--first-list-font-size:14px;--second-list-font-size:14px;--third-list-font-size:14px;--first-list-line-height:1.4em;--second-list-line-height:1.4em;--third-list-line-height:1.4em;--first-list-text-transform:capitalize;--second-list-text-transform:lowercase;--third-list-text-transform:capitalize;--first-list-text-vertical-padding:8px;--second-list-text-vertical-padding:6px;--third-list-text-vertical-padding:4px;--menu-background-color:var(--whiteSmoke);--text-color:var(--black);--item-hover-color:var(--lightGray);--item-active-color:var(--silverGray);--first-list-icon-color:var(--black);--first-list-arrow-color:var(--black);--second-list-arrow-color:var(--black);--footer-line-color:var(--black);--footer-font-size:14px;--indicator-color:var(--black);--scrollbar-track:var(--lightGray);--scrollbar-thumb:var(--darkGray);display:block;}:host #menu{background-color:var(--menu-background-color);font-family:var(--title-font-family);width:240px;position:fixed;height:100vh;inset-inline-start:0;top:0;z-index:5}:host #menu #title{text-transform:var(--title-text-transform);font-weight:var(--title-font-weight);color:var(--text-color);font-size:14px;letter-spacing:0.378px;padding:16px;margin:0;position:relative;z-index:20;width:240px;box-sizing:border-box}:host #menu #title:before{content:\"\";position:absolute;width:2px;height:10px;background-color:var(--menu-background-color);inset-inline-start:0;height:100%;top:0}:host #menu #main{overflow-y:auto;position:fixed;width:240px;z-index:10}:host #menu .text{color:var(--text-color)}:host #menu #footer{position:fixed;bottom:0;inset-inline-start:0;width:240px;box-sizing:border-box;z-index:20;font-size:var(--footer-font-size)}:host #menu #footer #custom-content{padding:32px 16px 8px 16px;position:relative}:host #menu #footer #custom-content:before{content:\"\";position:absolute;width:2px;height:10px;background-color:var(--menu-background-color);inset-inline-start:0;height:100%;top:0}:host #menu #footer #collapse-menu{cursor:pointer;height:50px;display:flex;align-items:center;padding:0 16px;transition:var(--menu-background-color) 0.25s;border-top:1px solid var(--footer-line-color);transition:background-color 0.25s;position:relative}:host #menu #footer #collapse-menu:hover{background-color:var(--item-hover-color)}:host #menu #footer #collapse-menu:hover:before{background-color:var(--item-hover-color)}:host #menu #footer #collapse-menu:active{background-color:var(--item-active-color)}:host #menu #footer #collapse-menu:active:before{background-color:var(--item-active-color)}:host #menu #footer #collapse-menu:before{content:\"\";position:absolute;width:2px;height:10px;background-color:var(--menu-background-color);inset-inline-start:0;height:100%;top:0;transition:background-color 0.25s}:host #menu.collapsed #footer #custom-content{display:none}:host #menu.collapsed #footer #collapse-menu{padding:0 10px}:host #menu.collapsed,:host #menu.collapsed #title,:host #menu.collapsed #footer{inset-inline-start:-202px}:host #menu.collapsing,:host #menu.collapsing #title,:host #menu.collapsing #footer{inset-inline-start:-240px !important;transition:left 0.6s;transition-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}:host #menu.collapse-faster,:host #menu.collapse-faster #title,:host #menu.collapse-faster #footer{transition:left 0.3s;transition-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}:host #menu.collapsed #collapse-menu{flex-direction:row-reverse}:host #menu.collapsed #collapse-menu ch-icon{transform:rotate(180deg)}:host #menu.collapsed #collapse-menu .collapse-icon{transform:rotate(180deg)}:host #menu,:host #footer{color:var(--text-color)}:host .tooltip{position:fixed;inset-inline-start:50px;opacity:0;transition:opacity 0.25s;background-color:var(--menu-background-color);color:var(--text-color);padding:4px 8px;border-radius:6px;z-index:0}:host .tooltip.visible{opacity:1}:host #indicator{width:2px;background-color:var(--indicator-color);position:fixed;inset-inline-start:0;height:0;transition:top 0.4s, height 0.5s, opacity 0.35s;opacity:1}:host #indicator.speed-zero{transition-duration:0s}:host #indicator.hide{opacity:0}:host ::-webkit-scrollbar{width:6px}:host ::-webkit-scrollbar-track{background:var(--scrollbar-track);border-radius:3px}:host ::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px}:host ::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb);cursor:pointer}:host .hidden-xs{visibility:hidden}:host .visible-xs{visibility:inherit}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const ChSidebarMenu$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.itemClicked = createEvent(this, "itemClicked", 7);
+    this.collapseBtnClicked = createEvent(this, "collapseBtnClicked", 7);
+    this.topHeightSpeed = 300;
+    this.speedDivisionValue = 400;
+    /**
+     * The presence of this attribute allows the menu to have only one list opened at the same time
+     */
+    this.singleListOpen = false;
+    /**
+     * Allows to set the distance to the top of the page on the menu
+     */
+    this.distanceToTop = 0;
+    /**
+     * Determines if the menu can be collapsed
+     */
+    this.collapsible = true;
+    /**
+     * The initial active item (optional)
+     */
+    this.activeItemId = "";
+    /**
+     * The active item
+     */
+    this.activeItem = "";
+  }
+  componentDidLoad() {
+    // hide menu in mobile view
+    if (window.matchMedia("(max-width: 767px)").matches) {
+      this.menu.classList.add("hidden-xs");
+    }
+    window
+      .matchMedia("(max-width: 767px)")
+      .addEventListener("change", this.handleMatchMedia.bind(this));
+    // get sidebar status from storage
+    this.getSidebarState();
+    const titleHeight = this.title.offsetHeight;
+    const footerHeight = this.footer.offsetHeight;
+    const titleAndFooterHeight = titleHeight + footerHeight + "px";
+    const collapsableItems = this.el.querySelectorAll(".collapsable");
+    /* Set menu top position*/
+    const topDistance = this.distanceToTop.toString() + "px";
+    this.menu.style.top = topDistance;
+    /* Set main height*/
+    this.main.style.height = `calc(100vh - ${titleAndFooterHeight} - ${topDistance})`;
+    // SET INITAL ITEMS MAX HEIGHT
+    const items = this.el.querySelectorAll(".item");
+    Array.from(items).forEach(function (item) {
+      const mainContainer = item.shadowRoot.querySelector(".main-container");
+      item.style.maxHeight =
+        mainContainer.offsetHeight + "px";
+    });
+    // AFTER INITIAL ITEMS MAX HEIGHT HAS BEEN DEFINED, REDEFINE MAX HEIGHT FOR THE UNCOLLAPSED ITEMS
+    const uncollapsedItems = this.el.querySelectorAll(".item.uncollapsed");
+    const uncollapsedItemsArr = Array.prototype.slice
+      .call(uncollapsedItems)
+      .reverse();
+    uncollapsedItemsArr.forEach(function (item) {
+      // mainContainer height
+      const mainContainerHeight = item.shadowRoot.querySelector(".main-container").offsetHeight;
+      // menu list height
+      const menuList = item.querySelector(":scope > ch-sidebar-menu-list");
+      if (menuList) {
+        const menuListHeight = menuList.offsetHeight;
+        item.style.maxHeight = mainContainerHeight + menuListHeight + "px";
+      }
+    });
+    /** ********************************
+    LATERAL ACTIVE ITEM INDICATOR LOGIC
+    ***********************************/
+    this.indicator = document.createElement("DIV");
+    this.indicator.setAttribute("id", "indicator");
+    this.main.appendChild(this.indicator);
+    // when active-item is loaded from session, recalculate indicator position
+    this.repositionIndicatorAfterMenuUncollapse();
+    Array.from(items).forEach(function (item) {
+      item.addEventListener("click", function (e) {
+        e.stopPropagation();
+        if (!this.menu.classList.contains("collapsed")) {
+          const itemTopPosition = item.getBoundingClientRect().y;
+          const itemHeight = item.shadowRoot.querySelector(".main-container").offsetHeight;
+          if (this.singleListOpen &&
+            item.classList.contains("list-one__item")) {
+            let itemCopy = item;
+            let totalHeight = titleHeight;
+            while ((itemCopy = itemCopy.previousElementSibling) != null) {
+              const itemCopyMainContainer = itemCopy.shadowRoot.querySelector(".main-container");
+              totalHeight += itemCopyMainContainer.offsetHeight;
+            }
+            this.indicator.style.top = totalHeight + "px";
+            this.indicator.style.height = itemHeight + "px";
+          }
+          else {
+            this.indicator.style.top = itemTopPosition + "px";
+            this.indicator.style.height = itemHeight + "px";
+          }
+        }
+      }.bind(this));
+    }.bind(this));
+    /** *******************
+    SET ACTIVE ITEM LOGIC
+    **********************/
+    Array.from(items).forEach(function (item) {
+      item.addEventListener("click", function (e) {
+        e.stopPropagation();
+        // fede
+        // if (!this.menu.classList.contains("collapsed")) {
+        // remove current active item class
+        const currentActiveItem = document.querySelector(".item--active");
+        if (currentActiveItem !== null) {
+          currentActiveItem.classList.remove("item--active");
+        }
+        // set current item as active
+        item.classList.add("item--active");
+        // fede
+        this.GetCurrentItemIndicatorPos();
+        // store the active item on the sessionStorage
+        this.storeSidebarActiveItem(item);
+        this.activeItem = item.id;
+        // }
+      }.bind(this));
+    }.bind(this));
+    // SET ACTIVE CURRENT ACTIVE ITEM IF PRESENT
+    // if (this.activeItemId !== "") {
+    if (this.activeItemId !== "" && !this.activeItem) {
+      const activeItem = this.el.querySelector("#" + this.activeItemId);
+      activeItem.classList.add("item--active");
+      // uncollapse item's parent if exists
+      let parentEl = activeItem.parentElement;
+      if (parentEl.hasAttribute("slot")) {
+        parentEl = parentEl.parentElement;
+        this.uncollapseList(parentEl);
+        parentEl.classList.add("uncollapsed");
+        let grandpaEl = parentEl.parentElement;
+        if (grandpaEl.hasAttribute("slot")) {
+          grandpaEl = grandpaEl.parentElement;
+          this.uncollapseList(grandpaEl);
+          grandpaEl.classList.add("uncollapsed");
+        }
+      }
+      // indicator
+      // let indicator = this.el.shadowRoot.querySelector("#indicator");
+      const activeItemTopPosition = activeItem.getBoundingClientRect().y;
+      const activeItemHeight = activeItem.shadowRoot.querySelector(".main-container").offsetHeight;
+      this.indicator.style.top = activeItemTopPosition + "px";
+      this.indicator.style.height = activeItemHeight + "px";
+    }
+    /** **************************
+    COLLAPSABLE LIST ITEMS LOGIC
+    ****************************/
+    Array.from(collapsableItems).forEach(function (item) {
+      const mainContainer = item.shadowRoot.querySelector(".main-container");
+      mainContainer.addEventListener("click", function () {
+        if (item.classList.contains("list-one__item") &&
+          this.menu.classList.contains("collapsed")) {
+          // If item clicked is type 1, and menu is collapsed, just uncollapse the menu.
+          this.collapseButton.click();
+        }
+        else {
+          this.toggleIcon(item); // This function has to be before  uncollapseList or collapseList.
+          this.setTransitionSpeed(item);
+          if (item.classList.contains("uncollapsed")) {
+            this.uncollapseList(item);
+          }
+          else {
+            this.collapseList(item);
+          }
+          // If this item is type 2, then update list 1 transition speed and maxheight
+          if (item.classList.contains("list-two__item")) {
+            const parentItem1 = item.closest(".list-one__item");
+            const heightToTransition = item.querySelector(".list-three").offsetHeight;
+            this.updateListItem1TransitionSpeed(parentItem1, heightToTransition);
+            // Update list 1 max. height
+            this.updateListItem1MaxHeight(parentItem1);
+          }
+        }
+      }.bind(this));
+    }.bind(this));
+    /** *****************************
+    SINGLE UL1 OPEN AT A TIME LOGIC
+    *******************************/
+    // Only one list of type 1 can be open at the same time.
+    // This is an optional parameter. Applies if 'data-single-ul1-open' attribute is present on #menu
+    if (this.singleListOpen) {
+      const collapsableListOneItems = document.querySelectorAll(".list-one__item");
+      Array.from(collapsableListOneItems).forEach(function (item) {
+        const mainContainer = item.shadowRoot.querySelector(".main-container");
+        mainContainer.addEventListener("click", function () {
+          if (!this.menu.classList.contains("collapsed")) {
+            const lastUl1Opened = document.querySelector(".lastUl1Opened");
+            if (lastUl1Opened !== null &&
+              !item.classList.contains("lastUl1Opened")) {
+              const lastUl1OpenedMainContainer = lastUl1Opened.shadowRoot.querySelector(".main-container");
+              lastUl1OpenedMainContainer.click();
+            }
+            if (item.classList.contains("uncollapsed")) {
+              item.classList.add("lastUl1Opened");
+            }
+            else {
+              item.classList.remove("lastUl1Opened");
+            }
+          }
+        }.bind(this));
+      }.bind(this));
+    }
+    /** *****************
+    COLLAPSE MENU LOGIC
+    *******************/
+    if (this.collapsible) {
+      this.collapseButton.addEventListener("click", function () {
+        let setTimeOutDelay = 0;
+        if (this.menu.classList.contains("collapsed")) {
+          // if menu is collapsed, the animation that shows the menu should be quicker
+          this.menu.classList.add("collapse-faster");
+          setTimeOutDelay = 300; // This value should be the same as the #menu.collapse-faster transition speed value.
+        }
+        else {
+          this.menu.classList.remove("collapse-faster");
+          setTimeOutDelay = 600; // This value should be the same as the #menu without .collapse-faster transition speed value.
+        }
+        this.menu.classList.add("collapsing");
+        this.hideIndicator();
+        setTimeout(function () {
+          if (this.menu.classList.contains("collapsed")) {
+            this.uncollapseCollapsedLists();
+            this.undoSwitchListOneOrder();
+            this.menu.classList.remove("collapsed");
+            setTimeout(function () {
+              this.repositionIndicatorAfterMenuUncollapse();
+            }.bind(this), 50);
+            this.isCollapsed = false;
+            this.collapseMenuHandler();
+            this.storeSidebarState();
+          }
+          else {
+            this.collapseUncollapsedLists1();
+            this.switchListOneOrder();
+            this.menu.classList.add("collapsed");
+            setTimeout(function () {
+              this.repositionIndicatorAfterMenuCollapse();
+            }.bind(this), 50);
+            this.isCollapsed = true;
+            this.collapseMenuHandler();
+            this.storeSidebarState();
+          }
+          this.menu.classList.remove("collapsing");
+          setTimeout(function () {
+            this.showIndicator();
+          }.bind(this), 400);
+        }.bind(this), setTimeOutDelay);
+      }.bind(this));
+    }
+    this.getSidebarCollapsedState();
+    /** ****************
+    ITEMS TOOLTIP LOGIC
+    *******************/
+    const itemTooltip = document.createElement("DIV");
+    itemTooltip.classList.add("tooltip");
+    itemTooltip.style.zIndex = "0";
+    this.menu.appendChild(itemTooltip);
+    Array.from(items).forEach(function (item) {
+      const mainContainer = item.shadowRoot.querySelector(".main-container");
+      mainContainer.addEventListener("mouseenter", function () {
+        if (this.menu.classList.contains("collapsed")) {
+          itemTooltip.classList.add("visible");
+          itemTooltip.innerHTML = item.childNodes[0].nodeValue;
+          const itemTopPosition = item.getBoundingClientRect().y;
+          itemTooltip.style.top = itemTopPosition + "px";
+        }
+      }.bind(this));
+      mainContainer.addEventListener("mouseleave", function () {
+        if (this.menu.classList.contains("collapsed")) {
+          itemTooltip.classList.remove("visible");
+        }
+      }.bind(this));
+    }.bind(this));
+    // REPOSITION INDICATOR ON SCROLL
+    this.main.addEventListener("scroll", function () {
+      this.GetCurrentItemIndicatorPos();
+    }.bind(this));
+    // Calculation of menu top value and height on scroll
+    let lastTop;
+    document.addEventListener("scroll", function () {
+      const doc = document.documentElement;
+      const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
+      if (lastTop === undefined) {
+        lastTop = 0;
+      }
+      // make menu.top a number
+      const menuTop = Number(this.menu.style.top.split("px")[0]);
+      if (menuTop > 0) {
+        if (menuTop - (top - lastTop) > 0) {
+          const scrollTopValue = top - lastTop;
+          this.menu.style.top = menuTop - scrollTopValue + "px";
+          lastTop = top;
+          /* Set main height*/
+          const mainTop = this.distanceToTop - top;
+          const topStr = mainTop + "px";
+          this.main.style.height = `calc(100vh - ${titleAndFooterHeight} - ${topStr})`;
+          // reposition of active item indicator
+          this.GetCurrentItemIndicatorPos();
+        }
+        else {
+          this.menu.style.top = "0px";
+          // reposition of active item indicator
+          this.GetCurrentItemIndicatorPos();
+        }
+      }
+      else if (menuTop == 0) {
+        if (top <= this.distanceToTop) {
+          this.menu.style.top = this.distanceToTop - top + "px";
+          lastTop = top;
+          this.main.style.height = `calc(100vh - ${titleAndFooterHeight} - ${top})`;
+          // reposition of active item indicator
+          this.GetCurrentItemIndicatorPos();
+        }
+      }
+    }.bind(this));
+  } // End of ComponentDidLoad
+  handleMatchMedia(q) {
+    if (q.matches) {
+      this.menu.classList.add("hidden-xs");
+    }
+    else {
+      this.menu.classList.remove("hidden-xs");
+    }
+  }
+  closeSidebar() {
+    // close the sidebar when user clicks outside of component area (only in mobile view - xs media screens).
+    const screenSize = window.matchMedia("(max-width: 767px)");
+    if (screenSize.matches) {
+      // Viewport is less or equal to 767 pixels wide
+      this.menu.className = "";
+      this.menu.classList.add("hidden-xs");
+    }
+  }
+  // get position of current active item
+  GetCurrentItemIndicatorPos() {
+    let timer = null;
+    const currentActiveItem = document.querySelector(".item--active");
+    if (currentActiveItem !== null) {
+      const currentActiveItemTopPosition = currentActiveItem.getBoundingClientRect().y;
+      this.indicator.classList.add("speed-zero");
+      this.indicator.style.top = currentActiveItemTopPosition + "px";
+      // detect when scrolling has stopped
+      if (timer !== null) {
+        clearTimeout(timer);
+      }
+      timer = setTimeout(function () {
+        this.indicator.classList.remove("speed-zero");
+      }.bind(this), 50);
+    }
+  }
+  // REPOSITION INDICATOR AFTER MENU COLLAPSE
+  repositionIndicatorAfterMenuCollapse() {
+    const activeItem = this.el.querySelector(".item--active");
+    if (activeItem !== null) {
+      const closestL1 = activeItem.closest(".list-one__item");
+      if (closestL1 !== null) {
+        const closestL1MainContainer = closestL1.shadowRoot.querySelector(".main-container");
+        const topPosition = closestL1MainContainer.getBoundingClientRect().y;
+        const height = closestL1MainContainer.offsetHeight;
+        this.indicator.style.top = topPosition + "px";
+        this.indicator.style.height = height + "px";
+      }
+      else {
+        // else, the active item has no parent l ist. just reposition indicator
+        const topPosition = activeItem.getBoundingClientRect().y;
+        const height = activeItem.offsetHeight;
+        this.indicator.style.top = topPosition + "px";
+        this.indicator.style.height = height + "px";
+      }
+    }
+  }
+  // REPOSITION INDICATOR AFTER MENU UNCOLLAPSE
+  repositionIndicatorAfterMenuUncollapse() {
+    const activeItem = this.el.querySelector(".item--active");
+    if (activeItem !== null) {
+      const activeItemMainContainer = activeItem.shadowRoot.querySelector(".main-container");
+      const activeItemMainContainerTopPosition = activeItemMainContainer.getBoundingClientRect().y;
+      const activeItemMainContainerHeight = activeItemMainContainer.offsetHeight;
+      this.indicator.style.top = activeItemMainContainerTopPosition + "px";
+      this.indicator.style.height = activeItemMainContainerHeight + "px";
+    }
+  }
+  // HIDE INDICATOR
+  hideIndicator() {
+    this.indicator.classList.add("hide");
+  }
+  // SHOW INDICATOR
+  showIndicator() {
+    this.indicator.classList.remove("hide");
+  }
+  collapseUncollapsedLists1() {
+    const uncollapsedLists1Items = document.querySelectorAll(".list-one__item.uncollapsed");
+    Array.from(uncollapsedLists1Items).forEach(function (item) {
+      item.classList.add("speed-zero");
+      item.setAttribute("data-uncollapsed-max-height", item.style.maxHeight);
+      item.style.maxHeight =
+        item.shadowRoot.querySelector(".main-container")
+          .offsetHeight + "px";
+    });
+  }
+  uncollapseCollapsedLists() {
+    const uncollapsedLists1Items = document.querySelectorAll(".list-one__item.uncollapsed");
+    Array.from(uncollapsedLists1Items).forEach(function (item) {
+      item.addEventListener("transitionend", removeSpeedZero);
+      function removeSpeedZero(e) {
+        if (e.propertyName === "max-height") {
+          item.classList.remove("speed-zero");
+          item.removeEventListener("transitionend", removeSpeedZero);
+        }
+      }
+      const uncollapsedMaxHeight = item.getAttribute("data-uncollapsed-max-height");
+      item.style.maxHeight = uncollapsedMaxHeight;
+      item.removeAttribute("data-uncollapsed-max-height");
+    });
+  }
+  switchListOneOrder() {
+    const listOneItems = document.querySelectorAll(".list-one__item");
+    Array.from(listOneItems).forEach(function (item) {
+      item.classList.add("switch-order");
+    });
+  }
+  undoSwitchListOneOrder() {
+    const listOneItems = document.querySelectorAll(".list-one__item");
+    Array.from(listOneItems).forEach(function (item) {
+      item.classList.remove("switch-order");
+    });
+  }
+  /* UPDATE LIST ITEM 1 TRANSITION SPEED*/
+  updateListItem1TransitionSpeed(item, height) {
+    if (height > this.topHeightSpeed) {
+      height = this.topHeightSpeed;
+    }
+    item.style.transitionDuration = height / this.speedDivisionValue + "s";
+  }
+  /* UPDATE LIST ITEM 1 MAX HEIGHT*/
+  updateListItem1MaxHeight(item) {
+    const mainContainerHeight = item.shadowRoot.querySelector(".main-container").clientHeight;
+    const list2Items = item.querySelectorAll(":scope > ch-sidebar-menu-list > ch-sidebar-menu-list-item");
+    let totalMaxHeight = mainContainerHeight;
+    Array.from(list2Items).forEach(function (item) {
+      totalMaxHeight += parseInt(item.style.maxHeight.slice(0, -2));
+    });
+    item.style.maxHeight = totalMaxHeight + "px";
+  }
+  /* TOGGLE ITEM ICON*/
+  toggleIcon(item) {
+    if (item.classList.contains("uncollapsed")) {
+      item.classList.remove("uncollapsed");
+    }
+    else {
+      item.classList.add("uncollapsed");
+    }
+  }
+  /* SET ITEM TRANSITION SPEED*/
+  setTransitionSpeed(item) {
+    let transitionSpeed = 0;
+    const childListHeight = item.querySelector("ch-sidebar-menu-list").clientHeight;
+    if (childListHeight > this.topHeightSpeed) {
+      transitionSpeed = this.topHeightSpeed;
+    }
+    else {
+      transitionSpeed = childListHeight;
+    }
+    item.style.transitionDuration =
+      transitionSpeed / this.speedDivisionValue + "s";
+  }
+  /* COLLAPSE LIST*/
+  collapseList(item) {
+    const mainContainerHeight = item.shadowRoot.querySelector(".main-container").offsetHeight;
+    item.style.maxHeight = mainContainerHeight + "px";
+    // store the item's collapsed state
+    this.storeSidebarCollapsedItem(item);
+  }
+  /* UNCOLLAPSE LIST*/
+  uncollapseList(item) {
+    const mainContainerHeight = item.shadowRoot.querySelector(".main-container").clientHeight;
+    const childListHeight = item.querySelector("ch-sidebar-menu-list").clientHeight;
+    item.style.maxHeight = mainContainerHeight + childListHeight + "px";
+    // store the item's uncollapsed state
+    this.storeSidebarUncollapsedItem(item);
+  }
+  /* PRESERVE SIDEBAR STATE */
+  storeSidebarActiveItem(item) {
+    const storageHelper = new SessionStorageWorker();
+    const sessionItemValue = storageHelper.get("active-item");
+    if (sessionItemValue != "" && sessionItemValue != null) {
+      storageHelper.remove("active-item");
+    }
+    storageHelper.add("active-item", item.id);
+  }
+  storeSidebarUncollapsedItem(item) {
+    const storageHelper = new SessionStorageWorker();
+    if (!item.classList.contains("list-three__item")) {
+      storageHelper.add(item.id, "uncollapsed");
+    }
+  }
+  storeSidebarCollapsedItem(item) {
+    const storageHelper = new SessionStorageWorker();
+    storageHelper.remove(item.id);
+  }
+  storeSidebarState() {
+    const storageHelper = new SessionStorageWorker();
+    const storageItem = storageHelper.get("isCollapsed");
+    if (storageItem === "false") {
+      storageHelper.add("isCollapsed", "true");
+    }
+    else {
+      storageHelper.add("isCollapsed", "false");
+    }
+  }
+  /* GET SIDEBAR STATE*/
+  getSidebarState() {
+    const storageHelper = new SessionStorageWorker();
+    const storageItems = storageHelper.getAllItems();
+    for (let i = 0; i < storageItems.length; i++) {
+      let item;
+      switch (true) {
+        case storageItems[i].key === "active-item": {
+          item = document.getElementById(storageItems[i].value);
+          if (item) {
+            item.classList.add("item--active");
+            this.activeItem = item.id;
+            // fede
+            // const itemPos = item.offsetTop;
+            /*
+            this.main.scroll({
+              top: 100,
+              left: 0,
+              behavior: 'smooth'
+            })*/
+            this.main.scrollTop = 100;
+          }
+          break;
+        }
+        case storageItems[i].value === "uncollapsed": {
+          item = document.getElementById(storageItems[i].key);
+          if (item) {
+            item.classList.add("uncollapsed");
+          }
+          break;
+        }
+      }
+    }
+  }
+  getSidebarCollapsedState() {
+    const storageHelper = new SessionStorageWorker();
+    const storageItems = storageHelper.getAllItems();
+    for (let i = 0; i < storageItems.length; i++) {
+      switch (true) {
+        case storageItems[i].key === "isCollapsed": {
+          if (storageItems[i].value === "true") {
+            this.collapseUncollapsedLists1();
+            this.switchListOneOrder();
+            this.menu.classList.add("collapsed");
+            setTimeout(function () {
+              this.repositionIndicatorAfterMenuCollapse();
+            }.bind(this), 50);
+            this.isCollapsed = true;
+            this.collapseMenuHandler();
+          }
+          else {
+            this.isCollapsed = false;
+          }
+        }
+      }
+    }
+  }
+  // collapse menu button handler
+  collapseMenuHandler() {
+    this.collapseBtnClicked.emit({ isCollapsed: this.isCollapsed });
+  }
+  render() {
+    return (h(Host, null, h("nav", { id: "menu", part: "menu", ref: el => (this.menu = el) }, h("h1", { id: "title", ref: el => (this.title = el) }, this.menuTitle), h("main", { id: "main", ref: el => (this.main = el) }, h("slot", null)), h("footer", { id: "footer", ref: el => (this.footer = el) }, h("div", { id: "custom-content" }, h("slot", { name: "footer" })), this.collapsible && (h("div", { id: "collapse-menu", ref: el => (this.collapseButton = el) }, h("div", { part: "collapse-menu-icon", class: "collapse-icon" })))))));
+  }
+  static get assetsDirs() { return ["sidebar-menu-assets"]; }
+  get el() { return this; }
+  static get style() { return chSidebarMenuCss; }
+}, [1, "ch-sidebar-menu", {
+    "menuTitle": [1, "menu-title"],
+    "singleListOpen": [4, "single-list-open"],
+    "distanceToTop": [2, "distance-to-top"],
+    "collapsible": [4],
+    "activeItemId": [1, "active-item-id"],
+    "activeItem": [1025, "active-item"],
+    "isCollapsed": [1540, "is-collapsed"],
+    "indicator": [32]
+  }]);
+__decorate([
+  ClickOutside({ exclude: ".sidebar__toggle-ico" })
+], ChSidebarMenu$1.prototype, "closeSidebar", null);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-sidebar-menu"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-sidebar-menu":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChSidebarMenu$1);
+      }
+      break;
+  } });
+}
+
+const ChSidebarMenu = ChSidebarMenu$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChSidebarMenu, defineCustomElement };