myio-js-library 0.1.516 → 0.1.517

package/dist/index.cjs

@@ -1208,7 +1208,7 @@ module.exports = __toCommonJS(index_exports);
 // package.json
 var package_default = {
   name: "myio-js-library",
-  version: "0.1.516",
+  version: "0.1.517",
   description: "A clean, standalone JS SDK for MYIO projects",
   license: "MIT",
   repository: "github:gh-myio/myio-js-library",
@@ -20627,6 +20627,35 @@ var PANEL_CSS2 = `
     background: #ffffff;
     color: #2F5848;
   }
+
+  /* \u2500\u2500 Accordion (opt-in via options.collapsible) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+     The header (.myio-hp, from HeaderPanelComponent) becomes clickable and an
+     arrow is shown before its title. Collapsed hides the body (.myio-cgp__grid)
+     and lets the panel shrink to header height. Arrow uses CSS escapes
+     (ASCII only) to stay safe across strict CSS parsers (e.g. ThingsBoard). */
+  .myio-cgp--collapsible > .myio-hp {
+    cursor: pointer;
+    user-select: none;
+  }
+  .myio-cgp--collapsible > .myio-hp .myio-hp__title::before {
+    content: "\\25BE";
+    display: inline-block;
+    margin-right: 6px;
+    font-size: 0.7em;
+    opacity: 0.65;
+  }
+  .myio-cgp--collapsed > .myio-hp .myio-hp__title::before {
+    content: "\\25B8";
+  }
+  .myio-cgp--collapsed > .myio-cgp__grid,
+  .myio-cgp--collapsed > .myio-cgp__tabs-wrapper,
+  .myio-cgp--collapsed > .myio-cgp__content {
+    display: none !important;
+  }
+  .myio-cgp--collapsed {
+    height: auto !important;
+    flex: 0 0 auto !important;
+  }
 `;
 function injectStyles5() {
   if (document.getElementById(CSS_ID3)) return;
@@ -20643,9 +20672,13 @@ var CardGridPanel = class {
   headerComponent = null;
   searchText = "";
   tabsContainer = null;
+  collapsible = false;
+  collapsed = false;
+  headerClickBound = false;
   constructor(options) {
     injectStyles5();
     this.options = options;
+    this.collapsible = !!options.collapsible;
     this.root = document.createElement("div");
     this.root.className = "myio-cgp";
     if (options.panelBackground) {
@@ -20795,6 +20828,46 @@ var CardGridPanel = class {
     this.root.appendChild(grid);
     this.renderTabs();
     this.renderGrid();
+    this.applyCollapsibleState();
+  }
+  // ── Accordion / collapse (opt-in via options.collapsible) ──
+  /** Enable/disable collapsible behavior at runtime. */
+  setCollapsible(value) {
+    this.collapsible = value;
+    if (!value) this.collapsed = false;
+    this.applyCollapsibleState();
+  }
+  /** Collapse or expand the panel body programmatically. */
+  setCollapsed(value) {
+    if (!this.collapsible) return;
+    this.collapsed = value;
+    this.root.classList.toggle("myio-cgp--collapsed", this.collapsed);
+  }
+  /** Toggle collapsed state. */
+  toggleCollapsed() {
+    this.setCollapsed(!this.collapsed);
+  }
+  /** Returns whether the panel is currently collapsed. */
+  isCollapsed() {
+    return this.collapsed;
+  }
+  /** Reflects collapsible/collapsed state on the DOM and wires the header click once. */
+  applyCollapsibleState() {
+    this.root.classList.toggle("myio-cgp--collapsible", this.collapsible);
+    if (!this.collapsible) this.collapsed = false;
+    this.root.classList.toggle("myio-cgp--collapsed", this.collapsible && this.collapsed);
+    if (this.collapsible && !this.headerClickBound) {
+      const header = this.headerComponent?.getElement();
+      if (header) {
+        this.headerClickBound = true;
+        header.addEventListener("click", (e) => {
+          if (!this.collapsible) return;
+          const target = e.target;
+          if (target.closest && target.closest('button, a, input, select, svg, [role="button"]')) return;
+          this.toggleCollapsed();
+        });
+      }
+    }
   }
   renderGrid() {
     const grid = this.root.querySelector(".myio-cgp__grid");
@@ -23768,7 +23841,7 @@ var CDN_RESOURCES = [
   {
     id: "daterangepicker-3.1.0",
     src: "https://cdn.jsdelivr.net/npm/daterangepicker@3.1.0/daterangepicker.min.js",
-    integrity: "sha384-IbJFThFkdkMvvxP0U8wOffxBHPYEJE65UtA/l25/jJQUt/hft6OdAuKLxGjtOVnL",
+    integrity: "sha384-AH0fqcXzNOQHHyIMQOXM5qhbfCgavCM3rZSoGBBJJtS55if0BfFSI2dip/UVHCfA",
     crossorigin: "anonymous"
   }
 ];
@@ -79971,6 +80044,21 @@ function getWidgetStyles(theme, primaryColor, headerStyles) {
       flex-wrap: wrap;
     }
 
+    /* Accordion (opt-in via config.collapsible): header clicavel; recolhido
+       esconde o corpo + footer, deixando so a barra do header. */
+    .myio-chart-widget--collapsible .myio-chart-widget-header {
+      cursor: pointer;
+      user-select: none;
+    }
+    .myio-chart-widget--collapsed .myio-chart-widget-body,
+    .myio-chart-widget--collapsed .myio-chart-widget-footer {
+      display: none !important;
+    }
+    .myio-chart-widget--collapsed {
+      height: auto !important;
+      flex: 0 0 auto !important;
+    }
+
     .myio-chart-widget-stat {
       display: flex;
       flex-direction: column;
@@ -80326,6 +80414,9 @@ function createConsumptionChartWidget(config) {
   let currentVizMode = config.defaultVizMode ?? "total";
   let currentPeriod = config.defaultPeriod ?? 7;
   let currentIdealRange = config.idealRange ?? null;
+  let isCollapsible = !!config.collapsible;
+  let isCollapsed = false;
+  let collapseWired = false;
   let isLoading = false;
   let tempPeriod = currentPeriod;
   let tempChartType = currentChartType;
@@ -81086,6 +81177,26 @@ function createConsumptionChartWidget(config) {
       }
     });
   }
+  function applyCollapseState() {
+    const widget = document.getElementById(widgetId);
+    if (!widget) return;
+    widget.classList.toggle("myio-chart-widget--collapsible", isCollapsible);
+    if (!isCollapsible) isCollapsed = false;
+    widget.classList.toggle("myio-chart-widget--collapsed", isCollapsible && isCollapsed);
+    if (isCollapsible && !collapseWired) {
+      const header = widget.querySelector(".myio-chart-widget-header");
+      if (header) {
+        collapseWired = true;
+        header.addEventListener("click", (e) => {
+          if (!isCollapsible) return;
+          const target = e.target;
+          if (target.closest && target.closest('button, a, input, select, svg, [role="button"], [class*="-tab"]')) return;
+          isCollapsed = !isCollapsed;
+          applyCollapseState();
+        });
+      }
+    }
+  }
   const instance = {
     async render() {
       containerElement = document.getElementById(config.containerId);
@@ -81096,6 +81207,7 @@ function createConsumptionChartWidget(config) {
       injectStyles16();
       containerElement.innerHTML = renderHTML();
       setupListeners();
+      applyCollapseState();
       setLoading(true);
       chartInstance = createConsumption7DaysChart({
         ...config,
@@ -81186,6 +81298,21 @@ function createConsumptionChartWidget(config) {
     exportCSV(filename) {
       chartInstance?.exportCSV(filename);
     },
+    setCollapsible(value) {
+      isCollapsible = value;
+      if (!value) isCollapsed = false;
+      applyCollapseState();
+    },
+    setCollapsed(value) {
+      if (!isCollapsible) return;
+      isCollapsed = value;
+      applyCollapseState();
+    },
+    toggleCollapsed() {
+      if (!isCollapsible) return;
+      isCollapsed = !isCollapsed;
+      applyCollapseState();
+    },
     destroy() {
       chartInstance?.destroy();
       chartInstance = null;
@@ -136314,40 +136441,94 @@ function injectSidebarMenuStyles() {
       background: #6b7280;
     }
 
-    /* ===== Responsive ===== */
-    @media (max-width: 768px) {
-      .${SIDEBAR_MENU_CSS_PREFIX} {
-        position: fixed;
-        left: 0;
-        top: 0;
-        height: 100vh;
-        transform: translateX(-100%);
-        box-shadow: none;
-        z-index: 1000;
-      }
+    /* ===== Mobile mode (JS-driven via .--mobile, NOT @media) =====
+       The host measures its real element width and calls setMobileMode();
+       in ThingsBoard the widget element width != viewport, so @media is
+       unreliable. In mobile mode the sidebar becomes an off-canvas drawer
+       opened by a persistent top bar (hamburger); the drawer keeps its
+       footer/logout. */
 
-      .${SIDEBAR_MENU_CSS_PREFIX}.mobile-open {
-        transform: translateX(0);
-        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
-      }
+    /* Persistent top bar with the hamburger \u2014 hidden until mobile */
+    .${SIDEBAR_MENU_CSS_PREFIX}__mobile-topbar {
+      display: none;
+    }
+    .${SIDEBAR_MENU_CSS_PREFIX}__mobile-topbar.is-mobile {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      width: 100%;
+      height: 56px;
+      padding: 0 12px;
+      box-sizing: border-box;
+      background: linear-gradient(135deg, var(--sidebar-primary) 0%, var(--sidebar-primary-light) 100%);
+      color: #ffffff;
+      z-index: 900;
+    }
+    .${SIDEBAR_MENU_CSS_PREFIX}__mobile-hamburger {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      padding: 0;
+      border: none;
+      border-radius: 8px;
+      background: rgba(255, 255, 255, 0.14);
+      color: #ffffff;
+      cursor: pointer;
+      transition: background 0.2s ease;
+    }
+    .${SIDEBAR_MENU_CSS_PREFIX}__mobile-hamburger:hover {
+      background: rgba(255, 255, 255, 0.26);
+    }
+    .${SIDEBAR_MENU_CSS_PREFIX}__mobile-hamburger svg {
+      width: 22px;
+      height: 22px;
+    }
+    .${SIDEBAR_MENU_CSS_PREFIX}__mobile-topbar-title {
+      font-size: 15px;
+      font-weight: 700;
+      letter-spacing: 0.2px;
+    }
 
-      .${SIDEBAR_MENU_CSS_PREFIX}__backdrop {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: rgba(0, 0, 0, 0.5);
-        opacity: 0;
-        visibility: hidden;
-        transition: opacity 0.3s ease, visibility 0.3s ease;
-        z-index: 999;
-      }
+    /* Sidebar becomes an off-canvas drawer */
+    .${SIDEBAR_MENU_CSS_PREFIX}--mobile {
+      position: fixed;
+      left: 0;
+      top: 0;
+      height: 100vh;
+      width: var(--sidebar-expanded-width);
+      max-width: 86vw;
+      transform: translateX(-100%);
+      box-shadow: none;
+      z-index: 1000;
+      transition: transform var(--sidebar-transition);
+    }
+    .${SIDEBAR_MENU_CSS_PREFIX}--mobile.mobile-open {
+      transform: translateX(0);
+      box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
+    }
 
-      .${SIDEBAR_MENU_CSS_PREFIX}.mobile-open + .${SIDEBAR_MENU_CSS_PREFIX}__backdrop {
-        opacity: 1;
-        visibility: visible;
-      }
+    /* Backdrop \u2014 only present/active in mobile mode */
+    .${SIDEBAR_MENU_CSS_PREFIX}__backdrop {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.3s ease, visibility 0.3s ease;
+      z-index: 999;
+    }
+    .${SIDEBAR_MENU_CSS_PREFIX}__backdrop.is-mobile {
+      display: block;
+    }
+    .${SIDEBAR_MENU_CSS_PREFIX}__backdrop.is-open {
+      opacity: 1;
+      visibility: visible;
     }
   `;
   document.head.appendChild(style);
@@ -136424,8 +136605,15 @@ var SidebarMenuView = class {
   activeItemId = null;
   collapsedSections = /* @__PURE__ */ new Set();
   tooltip = null;
+  container;
+  // Mobile mode (JS-driven; NOT @media — the host measures its real width)
+  mobile = false;
+  drawerOpen = false;
+  mobileTopbar = null;
+  backdrop = null;
   constructor(container, config) {
     injectSidebarMenuStyles();
+    this.container = container;
     this.config = { ...DEFAULT_SIDEBAR_CONFIG, ...config };
     this.state = this.config.initialState || "expanded";
     this.themeMode = this.config.themeMode || "light";
@@ -136666,7 +136854,11 @@ var SidebarMenuView = class {
       const target = e.target;
       const action = target.closest("[data-action]")?.getAttribute("data-action");
       if (action === "toggle") {
-        this.toggle();
+        if (this.mobile) {
+          this.closeDrawer();
+        } else {
+          this.toggle();
+        }
       } else if (action === "theme-toggle") {
         this.handleThemeToggle();
       } else if (action === "logout") {
@@ -136686,6 +136878,7 @@ var SidebarMenuView = class {
           const sectionId = itemEl.getAttribute("data-section-id");
           if (itemId && sectionId) {
             this.handleItemClick(itemId, sectionId);
+            if (this.mobile) this.closeDrawer();
           }
         }
       }
@@ -136834,6 +137027,71 @@ var SidebarMenuView = class {
   getState() {
     return this.state;
   }
+  /**
+   * Toggle mobile mode. Driven by the host (it measures its real width),
+   * NOT by @media — the widget element width != viewport in ThingsBoard.
+   * In mobile mode the sidebar becomes an off-canvas drawer and a persistent
+   * top bar (hamburger) is shown to open it; the drawer keeps its footer/logout.
+   */
+  setMobileMode(on) {
+    if (this.mobile === on) return;
+    this.mobile = on;
+    if (on) {
+      this.ensureMobileChrome();
+      this.root.classList.add(`${SIDEBAR_MENU_CSS_PREFIX}--mobile`);
+      this.root.classList.remove("collapsed");
+      if (this.mobileTopbar) this.mobileTopbar.classList.add("is-mobile");
+      if (this.backdrop) this.backdrop.classList.add("is-mobile");
+      this.closeDrawer();
+    } else {
+      this.closeDrawer();
+      this.root.classList.remove(`${SIDEBAR_MENU_CSS_PREFIX}--mobile`);
+      if (this.mobileTopbar) this.mobileTopbar.classList.remove("is-mobile");
+      if (this.backdrop) this.backdrop.classList.remove("is-mobile");
+      if (this.state === "collapsed") this.root.classList.add("collapsed");
+    }
+  }
+  /** Lazily create the persistent mobile top bar (hamburger) + backdrop. */
+  ensureMobileChrome() {
+    if (!this.mobileTopbar) {
+      const header = this.config.header || {};
+      const title = header.title || "Menu";
+      const bar = document.createElement("div");
+      bar.className = `${SIDEBAR_MENU_CSS_PREFIX}__mobile-topbar`;
+      bar.innerHTML = `
+        <button
+          class="${SIDEBAR_MENU_CSS_PREFIX}__mobile-hamburger"
+          data-action="mobile-open"
+          aria-label="Abrir menu"
+        >${SIDEBAR_ICONS.menu}</button>
+        <span class="${SIDEBAR_MENU_CSS_PREFIX}__mobile-topbar-title">${title}</span>
+      `;
+      bar.querySelector('[data-action="mobile-open"]')?.addEventListener("click", () => this.openDrawer());
+      this.container.insertBefore(bar, this.root);
+      this.mobileTopbar = bar;
+    }
+    if (!this.backdrop) {
+      const bd = document.createElement("div");
+      bd.className = `${SIDEBAR_MENU_CSS_PREFIX}__backdrop`;
+      bd.addEventListener("click", () => this.closeDrawer());
+      this.container.insertBefore(bd, this.root.nextSibling);
+      this.backdrop = bd;
+    }
+  }
+  openDrawer() {
+    if (!this.mobile) return;
+    this.drawerOpen = true;
+    this.root.classList.add("mobile-open");
+    this.backdrop?.classList.add("is-open");
+  }
+  closeDrawer() {
+    this.drawerOpen = false;
+    this.root.classList.remove("mobile-open");
+    this.backdrop?.classList.remove("is-open");
+  }
+  isMobile() {
+    return this.mobile;
+  }
   setThemeMode(mode) {
     this.themeMode = mode;
     this.root.classList.remove("light", "dark");
@@ -136959,6 +137217,19 @@ var SidebarMenuController = class {
   toggle() {
     this.view.toggle();
   }
+  /** Enable/disable mobile mode (hamburger top bar + off-canvas drawer). */
+  setMobileMode(on) {
+    this.view.setMobileMode(on);
+  }
+  openDrawer() {
+    this.view.openDrawer();
+  }
+  closeDrawer() {
+    this.view.closeDrawer();
+  }
+  isMobile() {
+    return this.view.isMobile();
+  }
   getState() {
     return this.view.getState();
   }

package/dist/index.d.cts

@@ -3177,6 +3177,13 @@ interface CardGridPanelOptions {
     tabs?: TabItem[];
     /** Callback when tab selection changes (receives the newly selected tab) */
     onTabChange?: (tab: TabItem) => void;
+    /**
+     * When true, the panel becomes an accordion item: clicking the header
+     * (anywhere except its buttons) collapses/expands the body. A small arrow
+     * indicator is shown before the title. Default: false (fully backward-compatible).
+     * Can be toggled at runtime via setCollapsible().
+     */
+    collapsible?: boolean;
 }
 declare class CardGridPanel {
     private root;
@@ -3184,6 +3191,9 @@ declare class CardGridPanel {
     private headerComponent;
     private searchText;
     private tabsContainer;
+    private collapsible;
+    private collapsed;
+    private headerClickBound;
     constructor(options: CardGridPanelOptions);
     getElement(): HTMLElement;
     /** Replace items and re-render grid */
@@ -3210,6 +3220,16 @@ declare class CardGridPanel {
     setCardCustomStyle(style: CardGridCustomStyle | undefined): void;
     destroy(): void;
     private render;
+    /** Enable/disable collapsible behavior at runtime. */
+    setCollapsible(value: boolean): void;
+    /** Collapse or expand the panel body programmatically. */
+    setCollapsed(value: boolean): void;
+    /** Toggle collapsed state. */
+    toggleCollapsed(): void;
+    /** Returns whether the panel is currently collapsed. */
+    isCollapsed(): boolean;
+    /** Reflects collapsible/collapsed state on the DOM and wires the header click once. */
+    private applyCollapsibleState;
     private renderGrid;
     private renderTabs;
 }
@@ -9518,6 +9538,12 @@ interface ConsumptionWidgetConfig extends Omit<Consumption7DaysConfig, 'containe
     onMaximizeClick?: () => void;
     /** Custom CSS class for the widget container */
     className?: string;
+    /**
+     * When true, the widget becomes an accordion item: clicking the header
+     * (except its buttons/tabs) collapses/expands the chart body, leaving only
+     * the header bar. Default: false. Toggle at runtime via setCollapsible().
+     */
+    collapsible?: boolean;
     /**
      * Custom header styles for compact layouts
      * @example { padding: '8px 12px', fontSize: '12px', titleFontSize: '12px', tabPadding: '4px 10px', tabFontSize: '11px' }
@@ -9566,6 +9592,12 @@ interface ConsumptionWidgetInstance {
     };
     /** Exports data to CSV */
     exportCSV: (filename?: string) => void;
+    /** Enable/disable collapsible (accordion) behavior at runtime. */
+    setCollapsible: (value: boolean) => void;
+    /** Collapse/expand the chart body, keeping only the header bar. */
+    setCollapsed: (value: boolean) => void;
+    /** Toggle collapsed state. */
+    toggleCollapsed: () => void;
     /** Destroys the widget */
     destroy: () => void;
 }
@@ -18445,6 +18477,11 @@ declare class SidebarMenuController implements SidebarMenuInstance {
     expand(): void;
     collapse(): void;
     toggle(): void;
+    /** Enable/disable mobile mode (hamburger top bar + off-canvas drawer). */
+    setMobileMode(on: boolean): void;
+    openDrawer(): void;
+    closeDrawer(): void;
+    isMobile(): boolean;
     getState(): SidebarState;
     setThemeMode(mode: SidebarThemeMode): void;
     updateSections(sections: SidebarMenuSection[]): void;
@@ -18473,6 +18510,11 @@ declare class SidebarMenuView {
     private activeItemId;
     private collapsedSections;
     private tooltip;
+    private container;
+    private mobile;
+    private drawerOpen;
+    private mobileTopbar;
+    private backdrop;
     constructor(container: HTMLElement, config: SidebarMenuConfig);
     private createSidebar;
     private renderHeader;
@@ -18493,6 +18535,18 @@ declare class SidebarMenuView {
     collapse(): void;
     toggle(): void;
     getState(): SidebarState;
+    /**
+     * Toggle mobile mode. Driven by the host (it measures its real width),
+     * NOT by @media — the widget element width != viewport in ThingsBoard.
+     * In mobile mode the sidebar becomes an off-canvas drawer and a persistent
+     * top bar (hamburger) is shown to open it; the drawer keeps its footer/logout.
+     */
+    setMobileMode(on: boolean): void;
+    /** Lazily create the persistent mobile top bar (hamburger) + backdrop. */
+    private ensureMobileChrome;
+    openDrawer(): void;
+    closeDrawer(): void;
+    isMobile(): boolean;
     setThemeMode(mode: SidebarThemeMode): void;
     updateSections(sections: SidebarMenuSection[]): void;
     updateItemBadge(itemId: string, badge: number | string | null): void;