@getflip/swirl-components 0.41.0 → 0.42.0

package/dist/cjs/swirl-tabs.cjs.entry.js

@@ -3,31 +3,31 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-83363034.js');
-const index$1 = require('./index-2ddd0598.js');
 
-const swirlTabsCss = ".sc-swirl-tabs-h{display:block;width:100%}.sc-swirl-tabs-h *.sc-swirl-tabs{box-sizing:border-box}.tabs.sc-swirl-tabs{width:100%}.tabs__tab-bar.sc-swirl-tabs{position:relative;display:flex;width:100%;justify-content:flex-start;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.tabs__tab.sc-swirl-tabs{position:relative;display:block;min-width:0;margin:0;padding:var(--s-space-4) var(--s-space-8);border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);cursor:pointer}.tabs__tab.sc-swirl-tabs:focus{outline:none}.tabs__tab.sc-swirl-tabs:focus-visible .tabs__tab-label.sc-swirl-tabs{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tabs__tab.sc-swirl-tabs:not(.tabs__tab--active):hover:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-default);content:\"\";transform:translateX(-50%);pointer-events:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tabs__tab.sc-swirl-tabs{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tabs__tab-label.sc-swirl-tabs{display:block;overflow:hidden;width:100%;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;text-overflow:ellipsis}.tabs__tab--active.sc-swirl-tabs{color:var(--s-text-highlight)}.tabs__tab--active.sc-swirl-tabs:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-highlight);content:\"\";transform:translateX(-50%);pointer-events:none}";
+const swirlTabsCss = ".sc-swirl-tabs-h{display:block;width:100%}.sc-swirl-tabs-h *.sc-swirl-tabs{box-sizing:border-box}.tabs.sc-swirl-tabs{width:100%}";
 
 const SwirlTabs = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.tabActivated = index.createEvent(this, "tabActivated", 7);
     this.tabs = [];
-    this.onKeyDown = (event) => {
-      if (event.code === "ArrowLeft") {
-        event.preventDefault();
-        this.activatePreviousTab();
-      }
-      else if (event.code === "ArrowRight") {
-        event.preventDefault();
-        this.activateNextTab();
-      }
+    this.onActivateNextTab = () => {
+      this.activateNextTab();
+    };
+    this.onActivatePreviousTab = () => {
+      this.activatePreviousTab();
+    };
+    this.onActivateTab = (event) => {
+      this.activateTab(event.detail);
     };
     this.initialTab = undefined;
     this.label = undefined;
     this.activeTab = undefined;
+    this.tabBarTabs = [];
   }
   componentWillLoad() {
     this.collectTabs();
+    this.updateTabBarTabs();
   }
   /**
    * Activate a tab.
@@ -45,6 +45,7 @@ const SwirlTabs = class {
     }
     tab.active = true;
     this.tabActivated.emit(tab);
+    this.updateTabBarTabs();
   }
   activateNextTab() {
     const currentIndex = this.tabs.findIndex((tab) => tab.tabId === this.activeTab);
@@ -72,16 +73,15 @@ const SwirlTabs = class {
     const initialTab = this.tabs.find((tab) => tab.tabId === this.initialTab);
     this.activateTab(Boolean(initialTab) ? initialTab.tabId : this.tabs[0].tabId);
   }
+  updateTabBarTabs() {
+    this.tabBarTabs = this.tabs.map((tab) => ({
+      id: tab.tabId,
+      label: tab.label,
+      active: this.activeTab === tab.tabId,
+    }));
+  }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "tabs" }, index.h("div", { "aria-label": this.label, class: "tabs__tab-bar", onKeyDown: this.onKeyDown, role: "tablist" }, this.tabs.map((tab) => {
-      const isActive = tab.tabId === this.activeTab;
-      const className = index$1.classnames("tabs__tab", {
-        "tabs__tab--active": isActive,
-      });
-      return (index.h("button", { "aria-controls": tab.tabId, "aria-selected": isActive ? "true" : "false", class: className, id: `tab-${tab.tabId}`, key: tab.tabId,
-        // eslint-disable-next-line react/jsx-no-bind
-        onClick: () => this.activateTab(tab.tabId), role: "tab", tabIndex: isActive ? 0 : -1, type: "button" }, index.h("span", { class: "tabs__tab-label" }, tab.label)));
-    })), index.h("slot", null))));
+    return (index.h(index.Host, null, index.h("div", { class: "tabs" }, index.h("swirl-tab-bar", { label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs })), index.h("slot", null)));
   }
   get el() { return index.getElement(this); }
 };