feat(appui-tabs): add closeable tabs and auto-hide behavior for content tabs, plus API and events to control them

ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.demo.ts

@@ -162,10 +162,30 @@ class DemoDashboardView extends DeesElement {
           <button class="ctx-btn" @click=${() => this.ctx?.appui.activityLog.add({ type: 'custom', user: 'Demo User', message: 'Button clicked from ctx!', iconName: 'lucide:mouse-pointer-click' })}>Add Activity Entry</button>
           <button class="ctx-btn" @click=${() => this.ctx?.appui.setMainMenuBadge('tasks', 99)}>Set Tasks Badge to 99</button>
           <button class="ctx-btn danger" @click=${() => this.ctx?.appui.clearMainMenuBadge('tasks')}>Clear Tasks Badge</button>
+          <button class="ctx-btn" @click=${() => this.ctx?.appui.setContentTabsAutoHide(true, 1)}>Auto-hide Tabs (≤1)</button>
+          <button class="ctx-btn danger" @click=${() => this.ctx?.appui.setContentTabsAutoHide(false)}>Disable Auto-hide</button>
+          <button class="ctx-btn success" @click=${() => this.addCloseableTab()}>Add Closeable Tab</button>
         </div>
       </div>
     `;
   }
+
+  private tabCounter = 0;
+
+  private addCloseableTab() {
+    if (!this.ctx) return;
+    this.tabCounter++;
+    const tabKey = `Tab ${this.tabCounter}`;
+    this.ctx.appui.addContentTab({
+      key: tabKey,
+      iconName: 'lucide:file',
+      action: () => console.log(`Selected ${tabKey}`),
+      closeable: true,
+      onClose: () => {
+        this.ctx?.appui.removeContentTab(tabKey);
+      }
+    });
+  }
 }
 
 // Settings view with route params and canDeactivate guard

ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.ts

@@ -120,6 +120,12 @@ export class DeesAppuiBase extends DeesElement {
   @property({ type: Boolean })
   accessor maincontentTabsVisible: boolean = true;
 
+  @property({ type: Boolean })
+  accessor contentTabsAutoHide: boolean = false;
+
+  @property({ type: Number })
+  accessor contentTabsAutoHideThreshold: number = 0;
+
   // Properties for maincontent
   @property({ type: Array })
   accessor maincontentTabs: interfaces.IMenuItem[] = [];
@@ -250,7 +256,10 @@ export class DeesAppuiBase extends DeesElement {
           .tabs=${this.maincontentTabs}
           .selectedTab=${this.maincontentSelectedTab}
           .showTabs=${this.maincontentTabsVisible}
+          .tabsAutoHide=${this.contentTabsAutoHide}
+          .tabsAutoHideThreshold=${this.contentTabsAutoHideThreshold}
           @tab-select=${(e: CustomEvent) => this.handleContentTabSelect(e)}
+          @tab-close=${(e: CustomEvent) => this.handleContentTabClose(e)}
         >
           <div class="view-container"></div>
           <slot name="maincontent"></slot>
@@ -468,6 +477,16 @@ export class DeesAppuiBase extends DeesElement {
     this.maincontentTabsVisible = visible;
   }
 
+  /**
+   * Set content tabs auto-hide behavior
+   * @param enabled - Enable auto-hide feature
+   * @param threshold - Hide when tabs.length <= threshold (default 0 = hide when no tabs)
+   */
+  public setContentTabsAutoHide(enabled: boolean, threshold: number = 0): void {
+    this.contentTabsAutoHide = enabled;
+    this.contentTabsAutoHideThreshold = threshold;
+  }
+
   /**
    * Set a badge on a main menu item
    */
@@ -1020,4 +1039,12 @@ export class DeesAppuiBase extends DeesElement {
       composed: true
     }));
   }
+
+  private handleContentTabClose(e: CustomEvent) {
+    this.dispatchEvent(new CustomEvent('content-tab-close', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
 }