update

ts_web/elements/00group-applauncher/eco-applauncher-soundmenu/eco-applauncher-soundmenu.ts

@@ -37,6 +37,11 @@ export class EcoApplauncherSoundmenu extends DeesElement {
       :host {
         display: block;
         position: relative;
+        pointer-events: none;
+      }
+
+      :host([open]) {
+        pointer-events: auto;
       }
 
       .menu-container {
@@ -242,12 +247,18 @@ export class EcoApplauncherSoundmenu extends DeesElement {
 
   private boundHandleClickOutside = this.handleClickOutside.bind(this);
   private isDragging = false;
+  private inactivityTimeout: ReturnType<typeof setTimeout> | null = null;
+  private readonly INACTIVITY_TIMEOUT = 60000; // 1 minute
 
   public render(): TemplateResult {
     const volumeIcon = this.getVolumeIcon();
 
     return html`
-      <div class="menu-container">
+      <div class="menu-container"
+        @click=${(e: MouseEvent) => e.stopPropagation()}
+        @mousemove=${this.resetInactivityTimer}
+        @mousedown=${this.resetInactivityTimer}
+      >
         <div class="menu-header">
           <span class="menu-title">
             <dees-icon .icon=${volumeIcon} .iconSize=${18}></dees-icon>
@@ -405,11 +416,41 @@ export class EcoApplauncherSoundmenu extends DeesElement {
 
   private handleClickOutside(e: MouseEvent): void {
     if (this.open && !this.contains(e.target as Node)) {
-      this.open = false;
-      this.dispatchEvent(new CustomEvent('menu-close', {
-        bubbles: true,
-        composed: true,
-      }));
+      this.closeMenu();
+    }
+  }
+
+  private resetInactivityTimer(): void {
+    this.clearInactivityTimer();
+    if (this.open) {
+      this.inactivityTimeout = setTimeout(() => {
+        this.closeMenu();
+      }, this.INACTIVITY_TIMEOUT);
+    }
+  }
+
+  private clearInactivityTimer(): void {
+    if (this.inactivityTimeout) {
+      clearTimeout(this.inactivityTimeout);
+      this.inactivityTimeout = null;
+    }
+  }
+
+  private closeMenu(): void {
+    this.open = false;
+    this.dispatchEvent(new CustomEvent('menu-close', {
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  protected updated(changedProperties: Map<string, unknown>): void {
+    if (changedProperties.has('open')) {
+      if (this.open) {
+        this.resetInactivityTimer();
+      } else {
+        this.clearInactivityTimer();
+      }
     }
   }
 
@@ -423,5 +464,6 @@ export class EcoApplauncherSoundmenu extends DeesElement {
   async disconnectedCallback(): Promise<void> {
     await super.disconnectedCallback();
     document.removeEventListener('click', this.boundHandleClickOutside);
+    this.clearInactivityTimer();
   }
 }