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

Lime Elements

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-174a078a.js');
const dispatchResizeEvent = require('./dispatch-resize-event-4462d78f.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) {
    index.registerInstance(this, hostRef);
    this.changeTab = index.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 (index.h(index.Host, { onChangeTab: this.handleChangeTabs }, index.h("div", { class: "tab-panel" }, index.h("limel-tab-bar", { tabs: this.tabs }), index.h("div", { class: "tab-content" }, index.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.dispatchResizeEvent);
  }
  getSlot() {
    return this.host.shadowRoot.querySelector('slot');
  }
  hidePanels() {
    for (const element of this.slotElements) {
      element.style.display = 'none';
    }
  }
  get host() { return index.getElement(this); }
  static get watchers() { return {
    "tabs": ["tabsChanged"]
  }; }
};
TabPanel.style = tabPanelCss;

exports.limel_tab_panel = TabPanel;

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