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

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

@@ -19,7 +19,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";
 
 /**
@@ -110,7 +110,8 @@ export class TabNav {
     this.selectedTitle = await this.getTabTitleById(this.selectedTabId);
   }
 
-  @Watch("selectedTitle") selectedTitleChanged(): void {
+  @Watch("selectedTitle")
+  selectedTitleChanged(): void {
     this.updateOffsetPosition();
     this.updateActiveWidth();
     // reset the animation time on tab selection
@@ -231,14 +232,19 @@ export class TabNav {
       ? event.detail.tab
       : this.getIndexOfTabTitle(event.target as HTMLCalciteTabTitleElement);
     event.stopPropagation();
-    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();
   }
 
   /**
@@ -330,7 +336,6 @@ export class TabNav {
     focusElementInGroup(this.enabledTabTitles, el, destination);
 
     event.stopPropagation();
-    event.preventDefault();
   };
 
   handleContainerScroll = (): void => {
@@ -370,9 +375,42 @@ 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;
+
+    const visibleTabTitlesIndices = tabTitles.reduce((acc, curr, i) => {
+      return !curr.closed ? [...acc, i] : acc;
+    }, []);
+
+    const closedTabTitleIndex = tabTitles.findIndex((el) => el === closedTabTitleEl);
+
+    if (visibleTabTitlesIndices.length > 1) {
+      const nextTabTitleIndex = visibleTabTitlesIndices.find(
+        (value) => value > closedTabTitleIndex
+      );
+      if (this.selectedTabId === closedTabTitleIndex) {
+        this.selectedTabId = nextTabTitleIndex
+          ? nextTabTitleIndex
+          : visibleTabTitlesIndices.length - 1;
+      }
+    } else if (
+      visibleTabTitlesIndices.length === 1 &&
+      tabTitles[visibleTabTitlesIndices[0]].closable
+    ) {
+      tabTitles[visibleTabTitlesIndices[0]].closable = false;
+      this.selectedTabId = visibleTabTitlesIndices[0];
+    }
+
+    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,14 @@
 export const CSS = {
+  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"
+};