@ebrains/react 0.6.0-alpha.0 → 0.7.0-alpha.0

package/eds-tabs-content.entry.esm.js

@@ -1,145 +0,0 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
-import { c as cva } from './index-39c58238.esm.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-const EdsTabsContent = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.tabContentChange = createEvent(this, "tabContentChange", 7);
-    // cva configuration
-    this.tabCva = cva(['relative px-16 py-12', 'f-ui-03 whitespace-nowrap', 'effect-color', 'focus-visible:text-default hover:text-default', 'border-2', "after:content-[''] after:absolute after:inset-0 after:rounded-t-lg after:border-3 after:border-accent after:opacity-0", 'outline-none focus:outline-none focus-visible:outline-none focus-visible:after:opacity-100'], {
-      variants: {
-        position: {
-          left: 'rounded-tl-lg border-r-0 pr-28 -mr-16 after:right-16',
-          right: 'rounded-tr-lg border-l-0 pl-28 -ml-16 after:left-16',
-          center: '',
-          first: 'rounded-t-lg'
-        },
-        active: {
-          false: 'text-lighter bg-dark hover:bg-darker border-softest',
-          true: ['bg-default text-default z-99', 'rounded-t-lg', "before:content-[''] before:absolute before:-bottom-2 z-1 before:inset-x-0 before:h-3 before:bg-default", 'border-[#d2d2d2]']
-        }
-      }
-    });
-    this.navAriaLabel = 'Tabs';
-    this.tabs = undefined;
-    this.parsedTabs = [];
-    this.activeIndex = -1;
-  }
-  componentWillLoad() {
-    this.parseTabs();
-    this.setActiveIndex();
-  }
-  parseTabs() {
-    try {
-      this.parsedTabs = JSON.parse(this.tabs);
-    } catch (error) {
-      //console.error('Invalid JSON format for tabs:', error);
-      this.parsedTabs = [];
-    }
-  }
-  componentDidLoad() {
-    this.initializeTabContentVisibility();
-    this.el.addEventListener('tabContentChange', e => {
-      this.updateTabContentVisibility(e.detail.index);
-    });
-    this.scrollToActiveTab();
-  }
-  initializeTabContentVisibility() {
-    const allContent = this.el.querySelectorAll('.tab-content');
-    allContent.forEach((content, index) => {
-      content.setAttribute('style', `display: ${index === this.activeIndex ? 'block' : 'none'}`);
-    });
-  }
-  updateTabContentVisibility(index) {
-    const allContent = this.el.querySelectorAll('.tab-content');
-    allContent.forEach((content, contentIndex) => {
-      content.setAttribute('style', `display: ${contentIndex === index ? 'block' : 'none'}`);
-    });
-  }
-  setActiveIndex() {
-    this.activeIndex = this.parsedTabs.findIndex(tab => tab.active);
-  }
-  scrollToActiveTab() {
-    var _a;
-    const activeTab = (_a = this.tabContainer) === null || _a === void 0 ? void 0 : _a.querySelector('[data-tab-active]');
-    if (activeTab) {
-      setTimeout(() => {
-        activeTab.scrollIntoView({
-          inline: 'center',
-          block: 'nearest'
-        });
-      }, 316);
-    }
-  }
-  getTabOptions(active, index) {
-    const position = active ? 'center' : this.activeIndex === -1 && index === 0 ? 'first' : index < this.activeIndex ? 'left' : 'right';
-    return Object.assign({
-      class: this.tabCva({
-        active,
-        position
-      }),
-      style: {
-        zIndex: `${active ? this.parsedTabs.length + 99 : position === 'left' ? index : this.parsedTabs.length + 1 - index}`
-      }
-    }, active ? {
-      'data-tab-active': 'true'
-    } : {});
-  }
-  handleTabClick(index, tabLabel) {
-    // Update the active index and set all tabs' active state accordingly
-    this.activeIndex = index;
-    this.parsedTabs = this.parsedTabs.map((tab, tabIndex) => Object.assign(Object.assign({}, tab), {
-      active: tabIndex === index
-    }));
-    this.tabContentChange.emit({
-      index: index,
-      name: tabLabel
-    });
-    sendAnalytics({
-      category: 'ui-component',
-      tag: this.el.tagName.toLowerCase(),
-      name: (tabLabel === null || tabLabel === void 0 ? void 0 : tabLabel.toLowerCase()) || '',
-      action: 'click'
-    });
-  }
-  render() {
-    return h("div", {
-      key: 'd94df79c55522088de5445587758a5eea028b313',
-      class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']"
-    }, h("div", {
-      key: 'e7d01a2e6b424c25749c0d70305fb1c8c55bef74',
-      class: "scroller-x max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28"
-    }, h("nav", {
-      key: 'ef8ff8a02e570dfcf8143997ace793a65917e6ca',
-      ref: el => this.tabContainer = el,
-      class: "inline-flex",
-      "aria-label": this.navAriaLabel
-    }, this.parsedTabs.map((tab, index) => {
-      //const TabComponent = tab.active ? 'span' : 'a';
-      const tabProps = this.getTabOptions(tab.active, index);
-      return h("eds-tab", Object.assign({}, tabProps, {
-        label: tab.label,
-        url: tab.url,
-        active: index === this.activeIndex,
-        ariaLabel: tab.ariaLabel,
-        onClick: () => this.handleTabClick(index, tab.label)
-      }));
-    })), h("slot", {
-      key: '8f014081c3bc2a8a3013aea3aff32690d6f71c85'
-    })));
-  }
-  get el() {
-    return getElement(this);
-  }
-  static get watchers() {
-    return {
-      "tabs": ["parseTabs"]
-    };
-  }
-};
-
-export { EdsTabsContent as eds_tabs_content };