update

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

@@ -13,12 +13,14 @@ import { demo } from './eco-applauncher.demo.js';
 import { EcoApplauncherWifimenu, type IWifiNetwork } from '../eco-applauncher-wifimenu/index.js';
 import { EcoApplauncherBatterymenu } from '../eco-applauncher-batterymenu/index.js';
 import { EcoApplauncherSoundmenu, type IAudioDevice } from '../eco-applauncher-soundmenu/index.js';
+import { EcoApplauncherKeyboard } from '../eco-applauncher-keyboard/index.js';
 
 // Ensure components are registered
 DeesIcon;
 EcoApplauncherWifimenu;
 EcoApplauncherBatterymenu;
 EcoApplauncherSoundmenu;
+EcoApplauncherKeyboard;
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -37,6 +39,7 @@ export interface IStatusBarConfig {
   showNetwork?: boolean;
   showBattery?: boolean;
   showSound?: boolean;
+  showKeyboard?: boolean;
 }
 
 export interface ITopBarConfig {
@@ -409,6 +412,22 @@ export class EcoApplauncher extends DeesElement {
         bottom: calc(100% + 8px);
         left: 0;
         z-index: 100;
+        pointer-events: none;
+      }
+
+      .keyboard-area {
+        flex-shrink: 0;
+        height: 0;
+        overflow: hidden;
+        transition: height 0.25s ease;
+        background: ${cssManager.bdTheme('hsl(220 15% 92%)', 'hsl(240 6% 12%)')};
+        z-index: 1000;
+        position: relative;
+      }
+
+      .keyboard-area.visible {
+        height: 220px;
+        overflow: visible;
       }
 
       @media (max-width: 600px) {
@@ -452,6 +471,7 @@ export class EcoApplauncher extends DeesElement {
     showNetwork: true,
     showBattery: true,
     showSound: true,
+    showKeyboard: true,
   };
 
   @property({ type: Object })
@@ -492,6 +512,9 @@ export class EcoApplauncher extends DeesElement {
   @state()
   accessor soundMenuOpen = false;
 
+  @state()
+  accessor keyboardVisible = false;
+
   @property({ type: Array })
   accessor networks: IWifiNetwork[] = [];
 
@@ -535,8 +558,19 @@ export class EcoApplauncher extends DeesElement {
             ${this.apps.map((app) => this.renderAppIcon(app))}
           </div>
         </div>
+        <div class="keyboard-area ${this.keyboardVisible ? 'visible' : ''}">
+          <eco-applauncher-keyboard
+            ?visible=${this.keyboardVisible}
+            @key-press=${this.handleKeyboardKeyPress}
+            @backspace=${this.handleKeyboardBackspace}
+            @enter=${this.handleKeyboardEnter}
+            @space=${this.handleKeyboardSpace}
+            @arrow=${this.handleKeyboardArrow}
+          ></eco-applauncher-keyboard>
+        </div>
         <div class="status-bar">
           <div class="status-left">
+            ${this.statusConfig.showKeyboard ? this.renderKeyboardToggle() : ''}
             ${this.statusConfig.showNetwork ? this.renderNetworkStatusWithMenu() : ''}
             ${this.statusConfig.showBattery ? this.renderBatteryStatusWithMenu() : ''}
             ${this.statusConfig.showSound ? this.renderSoundStatusWithMenu() : ''}
@@ -765,6 +799,17 @@ export class EcoApplauncher extends DeesElement {
     `;
   }
 
+  private renderKeyboardToggle(): TemplateResult {
+    return html`
+      <div
+        class="status-item clickable ${this.keyboardVisible ? 'active' : ''}"
+        @click=${this.handleKeyboardToggle}
+      >
+        <dees-icon .icon=${'lucide:keyboard'} .iconSize=${18}></dees-icon>
+      </div>
+    `;
+  }
+
   private getNetworkBars(): number {
     switch (this.networkStatus) {
       case 'online':
@@ -901,6 +946,58 @@ export class EcoApplauncher extends DeesElement {
     }));
   }
 
+  private handleKeyboardToggle(): void {
+    this.keyboardVisible = !this.keyboardVisible;
+    // Close all menus when opening keyboard
+    if (this.keyboardVisible) {
+      this.wifiMenuOpen = false;
+      this.batteryMenuOpen = false;
+      this.soundMenuOpen = false;
+    }
+    this.dispatchEvent(new CustomEvent('keyboard-toggle', {
+      detail: { visible: this.keyboardVisible },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private handleKeyboardKeyPress(e: CustomEvent): void {
+    this.dispatchEvent(new CustomEvent('keyboard-key-press', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private handleKeyboardBackspace(): void {
+    this.dispatchEvent(new CustomEvent('keyboard-backspace', {
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private handleKeyboardEnter(): void {
+    this.dispatchEvent(new CustomEvent('keyboard-enter', {
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private handleKeyboardSpace(): void {
+    this.dispatchEvent(new CustomEvent('keyboard-space', {
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private handleKeyboardArrow(e: CustomEvent): void {
+    this.dispatchEvent(new CustomEvent('keyboard-arrow', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
   private handleSearchClick(): void {
     this.dispatchEvent(new CustomEvent('search-click', {
       bubbles: true,