feat(tab-nav): adds optional closable functionality to individual tab-titles

src/components/tab-nav/tab-nav.tsx

@@ -3,6 +3,7 @@ import {
   Element,
   Event,
   EventEmitter,
+  forceUpdate,
   h,
   Host,
   Listen,
@@ -19,7 +20,7 @@ import {
 } from "../../utils/dom";
 import { createObserver } from "../../utils/observers";
 import { Scale } from "../interfaces";
-import { TabChangeEventDetail } from "../tab/interfaces";
+import { TabChangeEventDetail, TabCloseEventDetail } from "../tab/interfaces";
 import { TabID, TabLayout, TabPosition } from "../tabs/interfaces";
 
 /**
@@ -102,15 +103,22 @@ export class TabNav {
     ) {
       localStorage.setItem(`calcite-tab-nav-${this.storageId}`, JSON.stringify(this.selectedTabId));
     }
+    const selectedTabTitleElementId = this.tabTitles[this.selectedTabId].id;
 
     this.calciteInternalTabChange.emit({
-      tab: this.selectedTabId
+      tab: this.selectedTabId,
+      tabElId: selectedTabTitleElementId
     });
 
-    this.selectedTitle = await this.getTabTitleById(this.selectedTabId);
+    const selectedTitle = await this.getTabTitleById(this.selectedTabId);
+
+    if (selectedTitle) {
+      this.selectedTitle = selectedTitle;
+    }
   }
 
-  @Watch("selectedTitle") selectedTitleChanged(): void {
+  @Watch("selectedTitle")
+  selectedTitleChanged(): void {
     this.updateOffsetPosition();
     this.updateActiveWidth();
     // reset the animation time on tab selection
@@ -234,9 +242,16 @@ export class TabNav {
     event.preventDefault();
   }
 
-  @Listen("calciteTabsActivate") activateTabHandler(event: CustomEvent<void>): void {
+  @Listen("calciteTabsActivate")
+  activateTabHandler(event: CustomEvent<void>): void {
     this.calciteTabChange.emit();
+    event.stopPropagation();
+  }
 
+  @Listen("calciteInternalTabsClose")
+  internalCloseTabHandler(event: CustomEvent<TabCloseEventDetail>): void {
+    const closedTabTitleEl = event.target as HTMLCalciteTabTitleElement;
+    this.handleTabTitleClose(closedTabTitleEl);
     event.stopPropagation();
     event.preventDefault();
   }
@@ -370,9 +385,49 @@ export class TabNav {
   }
 
   get enabledTabTitles(): HTMLCalciteTabTitleElement[] {
-    return filterDirectChildren<HTMLCalciteTabTitleElement>(
+    const directEnabled = filterDirectChildren<HTMLCalciteTabTitleElement>(
       this.el,
       "calcite-tab-title:not([disabled])"
     );
+    return directEnabled.filter((tabTitle) => !tabTitle.closed);
+  }
+
+  handleTabTitleClose(closedTabTitleEl: HTMLCalciteTabTitleElement): void {
+    const { tabTitles } = this;
+
+    let visibleTabTitlesIndices = tabTitles.reduce((acc, curr, i) => {
+      if (!curr.closed) {
+        acc.push(i);
+      }
+      return acc;
+    }, []);
+
+    const closedTabTitleIndex = tabTitles.findIndex((el) => el === closedTabTitleEl);
+
+    visibleTabTitlesIndices = visibleTabTitlesIndices.filter(
+      (index) => index !== closedTabTitleIndex
+    );
+
+    if (visibleTabTitlesIndices.length > 1) {
+      const nextTabTitleIndex = visibleTabTitlesIndices.find(
+        (value) => value > closedTabTitleIndex
+      );
+      this.selectedTabId = nextTabTitleIndex
+        ? nextTabTitleIndex
+        : visibleTabTitlesIndices.length - 1;
+      forceUpdate(this.el);
+    } else if (
+      visibleTabTitlesIndices.length === 1 &&
+      tabTitles[visibleTabTitlesIndices[0]].closable
+    ) {
+      tabTitles[visibleTabTitlesIndices[0]].closable = false;
+      this.selectedTabId = visibleTabTitlesIndices[0];
+      forceUpdate(this.el);
+    }
+
+    requestAnimationFrame(() => {
+      this.updateOffsetPosition();
+      this.updateActiveWidth();
+    });
   }
 }

src/components/tab-title/assets/tab-title/t9n/messages.json

@@ -0,0 +1,3 @@
+{
+  "close": "Close"
+}

src/components/tab-title/assets/tab-title/t9n/messages_ar.json

@@ -0,0 +1,3 @@
+{
+  "close": "إغلاق"
+}

src/components/tab-title/assets/tab-title/t9n/messages_bg.json

@@ -0,0 +1,3 @@
+{
+  "close": "Затваряне"
+}

src/components/tab-title/assets/tab-title/t9n/messages_bs.json

@@ -0,0 +1,3 @@
+{
+  "close": "Zatvori"
+}

src/components/tab-title/assets/tab-title/t9n/messages_ca.json

@@ -0,0 +1,3 @@
+{
+  "close": "Tanca"
+}

src/components/tab-title/assets/tab-title/t9n/messages_cs.json

@@ -0,0 +1,3 @@
+{
+  "close": "Zavřít"
+}

src/components/tab-title/assets/tab-title/t9n/messages_da.json

@@ -0,0 +1,3 @@
+{
+  "close": "Luk"
+}

src/components/tab-title/assets/tab-title/t9n/messages_de.json

@@ -0,0 +1,3 @@
+{
+  "close": "Schließen"
+}

src/components/tab-title/assets/tab-title/t9n/messages_el.json

@@ -0,0 +1,3 @@
+{
+  "close": "Κλείσιμο"
+}

src/components/tab-title/assets/tab-title/t9n/messages_en.json

@@ -0,0 +1,3 @@
+{
+  "close": "Close"
+}

src/components/tab-title/assets/tab-title/t9n/messages_es.json

@@ -0,0 +1,3 @@
+{
+  "close": "Cerrar"
+}

src/components/tab-title/assets/tab-title/t9n/messages_et.json

@@ -0,0 +1,3 @@
+{
+  "close": "Sule"
+}

src/components/tab-title/assets/tab-title/t9n/messages_fi.json

@@ -0,0 +1,3 @@
+{
+  "close": "Sulje"
+}

src/components/tab-title/assets/tab-title/t9n/messages_fr.json

@@ -0,0 +1,3 @@
+{
+  "close": "Fermer"
+}

src/components/tab-title/assets/tab-title/t9n/messages_he.json

@@ -0,0 +1,3 @@
+{
+  "close": "סגירה"
+}

src/components/tab-title/assets/tab-title/t9n/messages_hr.json

@@ -0,0 +1,3 @@
+{
+  "close": "Zatvori"
+}

src/components/tab-title/assets/tab-title/t9n/messages_hu.json

@@ -0,0 +1,3 @@
+{
+  "close": "Bezárás"
+}

src/components/tab-title/assets/tab-title/t9n/messages_id.json

@@ -0,0 +1,3 @@
+{
+  "close": "Tutup"
+}

src/components/tab-title/assets/tab-title/t9n/messages_it.json

@@ -0,0 +1,3 @@
+{
+  "close": "Chiudi"
+}

src/components/tab-title/assets/tab-title/t9n/messages_ja.json

@@ -0,0 +1,3 @@
+{
+  "close": "閉じる"
+}

src/components/tab-title/assets/tab-title/t9n/messages_ko.json

@@ -0,0 +1,3 @@
+{
+  "close": "닫기"
+}

src/components/tab-title/assets/tab-title/t9n/messages_lt.json

@@ -0,0 +1,3 @@
+{
+  "close": "Uždaryti"
+}

src/components/tab-title/assets/tab-title/t9n/messages_lv.json

@@ -0,0 +1,3 @@
+{
+  "close": "Aizvērt"
+}

src/components/tab-title/assets/tab-title/t9n/messages_nl.json

@@ -0,0 +1,3 @@
+{
+  "close": "Sluiten"
+}

src/components/tab-title/assets/tab-title/t9n/messages_no.json

@@ -0,0 +1,3 @@
+{
+  "close": "Lukk"
+}

src/components/tab-title/assets/tab-title/t9n/messages_pl.json

@@ -0,0 +1,3 @@
+{
+  "close": "Zamknij"
+}

src/components/tab-title/assets/tab-title/t9n/messages_pt-BR.json

@@ -0,0 +1,3 @@
+{
+  "close": "Fechar"
+}

src/components/tab-title/assets/tab-title/t9n/messages_pt-PT.json

@@ -0,0 +1,3 @@
+{
+  "close": "Fechar"
+}

src/components/tab-title/assets/tab-title/t9n/messages_ro.json

@@ -0,0 +1,3 @@
+{
+  "close": "Închidere"
+}

src/components/tab-title/assets/tab-title/t9n/messages_ru.json

@@ -0,0 +1,3 @@
+{
+  "close": "Закрыть"
+}

src/components/tab-title/assets/tab-title/t9n/messages_sk.json

@@ -0,0 +1,3 @@
+{
+  "close": "Zatvoriť"
+}

src/components/tab-title/assets/tab-title/t9n/messages_sl.json

@@ -0,0 +1,3 @@
+{
+  "close": "Zapri"
+}

src/components/tab-title/assets/tab-title/t9n/messages_sr.json

@@ -0,0 +1,3 @@
+{
+  "close": "Zatvori"
+}

src/components/tab-title/assets/tab-title/t9n/messages_sv.json

@@ -0,0 +1,3 @@
+{
+  "close": "Stäng"
+}

src/components/tab-title/assets/tab-title/t9n/messages_th.json

@@ -0,0 +1,3 @@
+{
+  "close": "ปิด"
+}

src/components/tab-title/assets/tab-title/t9n/messages_tr.json

@@ -0,0 +1,3 @@
+{
+  "close": "Kapat"
+}

src/components/tab-title/assets/tab-title/t9n/messages_uk.json

@@ -0,0 +1,3 @@
+{
+  "close": "Закрити"
+}

src/components/tab-title/assets/tab-title/t9n/messages_vi.json

@@ -0,0 +1,3 @@
+{
+  "close": "Đóng"
+}

src/components/tab-title/assets/tab-title/t9n/messages_zh-CN.json

@@ -0,0 +1,3 @@
+{
+  "close": "关闭"
+}

src/components/tab-title/assets/tab-title/t9n/messages_zh-HK.json

@@ -0,0 +1,3 @@
+{
+  "close": "關閉"
+}

src/components/tab-title/assets/tab-title/t9n/messages_zh-TW.json

@@ -0,0 +1,3 @@
+{
+  "close": "關閉"
+}

src/components/tab-title/resources.ts

@@ -1,8 +1,15 @@
 export const CSS = {
+  close: "tab-title-close",
+  closeButton: "close-button",
   container: "container",
-  containerHasText: "container--has-text",
+  content: "content",
+  contentHasText: "content--has-text",
   iconEnd: "icon-end",
   iconStart: "icon-start",
   iconPresent: "icon-present",
   titleIcon: "calcite-tab-title--icon"
 };
+
+export const ICONS = {
+  close: "x"
+};