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-maincontent/dees-appui-maincontent.ts

@@ -46,6 +46,12 @@ export class DeesAppuiMaincontent extends DeesElement {
   @property({ type: Boolean })
   accessor showTabs: boolean = true;
 
+  @property({ type: Boolean })
+  accessor tabsAutoHide: boolean = false;
+
+  @property({ type: Number })
+  accessor tabsAutoHideThreshold: number = 0;
+
   public static styles = [
     themeDefaultStyles,
     cssManager.defaultStyles,
@@ -96,7 +102,10 @@ export class DeesAppuiMaincontent extends DeesElement {
             .selectedTab=${this.selectedTab}
             .showTabIndicator=${true}
             .tabStyle=${'horizontal'}
+            .autoHide=${this.tabsAutoHide}
+            .autoHideThreshold=${this.tabsAutoHideThreshold}
             @tab-select=${(e: CustomEvent) => this.handleTabSelect(e)}
+            @tab-close=${(e: CustomEvent) => this.handleTabClose(e)}
           ></dees-appui-tabs>
         </div>
         <div class="content-area">
@@ -109,7 +118,7 @@ export class DeesAppuiMaincontent extends DeesElement {
 
   private handleTabSelect(e: CustomEvent) {
     this.selectedTab = e.detail.tab;
-    
+
     // Re-emit the event
     this.dispatchEvent(new CustomEvent('tab-select', {
       detail: e.detail,
@@ -118,6 +127,15 @@ export class DeesAppuiMaincontent extends DeesElement {
     }));
   }
 
+  private handleTabClose(e: CustomEvent) {
+    // Re-emit the event
+    this.dispatchEvent(new CustomEvent('tab-close', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+
   updated(changedProperties: Map<string | number | symbol, unknown>) {
     super.updated(changedProperties);
     if (changedProperties.has('showTabs')) {