@limetech/lime-elements/dist/esm/limel-tab-panel.entry.js

Lime Elements

import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-2714248e.js';
import { d as dispatchResizeEvent } from './dispatch-resize-event-cd1d230c.js';

const tabPanelCss = ":host(limel-tab-panel){--tab-panel-background-color:rgb(var(--contrast-100));display:block;height:100%}.tab-panel{height:100%;position:relative;display:flex;flex-direction:column}.tab-content{height:100%;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;background-color:var(--tab-panel-background-color)}";

const TabPanel = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.changeTab = createEvent(this, "changeTab", 7);
    this.slotElements = [];
    this.tabs = [];
    this.handleChangeTabs = this.handleChangeTabs.bind(this);
    this.setSlotElements = this.setSlotElements.bind(this);
    this.setTabStatus = this.setTabStatus.bind(this);
  }
  connectedCallback() {
    this.initialize();
  }
  componentDidLoad() {
    this.initialize();
  }
  initialize() {
    const slot = this.getSlot();
    if (!slot) {
      return;
    }
    slot.addEventListener('slotchange', this.setSlotElements);
    this.setSlotElements();
    // eslint-disable-next-line unicorn/no-array-for-each
    this.tabs.forEach(this.setTabStatus);
  }
  disconnectedCallback() {
    const slot = this.getSlot();
    slot.removeEventListener('slotchange', this.setSlotElements);
  }
  tabsChanged() {
    this.hidePanels();
    // eslint-disable-next-line unicorn/no-array-for-each
    this.tabs.forEach(this.setTabStatus);
  }
  render() {
    return (h(Host, { onChangeTab: this.handleChangeTabs }, h("div", { class: "tab-panel" }, h("limel-tab-bar", { tabs: this.tabs }), h("div", { class: "tab-content" }, h("slot", null)))));
  }
  setSlotElements() {
    const slot = this.getSlot();
    this.hidePanels();
    this.slotElements = Array.prototype.slice.call(slot.assignedElements());
    // eslint-disable-next-line unicorn/no-array-for-each
    this.tabs.forEach(this.setTabStatus);
  }
  setTabStatus(tab) {
    const element = this.slotElements.find((e) => e.id === tab.id);
    if (!element) {
      return;
    }
    if (tab.active) {
      element.style.display = '';
    }
    else {
      element.style.display = 'none';
    }
    element['tab'] = tab;
  }
  handleChangeTabs(event) {
    this.tabs = this.tabs.map((tab) => {
      if (tab.id === event.detail.id) {
        return event.detail;
      }
      return tab;
    });
    this.setTabStatus(event.detail);
    // Content inside the newly activated tab may need to redraw once
    // visible, so we use the resize event trick. /Ads
    setTimeout(dispatchResizeEvent);
  }
  getSlot() {
    return this.host.shadowRoot.querySelector('slot');
  }
  hidePanels() {
    for (const element of this.slotElements) {
      element.style.display = 'none';
    }
  }
  get host() { return getElement(this); }
  static get watchers() { return {
    "tabs": ["tabsChanged"]
  }; }
};
TabPanel.style = tabPanelCss;

export { TabPanel as limel_tab_panel };

//# sourceMappingURL=limel-tab-panel.entry.js.map