@freshworks/crayons/dist/components/tab-panel.js

Crayons Web Components library

import { attachShadow, h, Host, proxyCustomElement } from '@stencil/core/internal/client';

const tabPanelCss = ":host{font-family:var(--fw-font-family, -apple-system, blinkmacsystemfont, \"Segoe UI\", roboto, oxygen, ubuntu, cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:block;padding:0;width:var(--fw-tab-panel-width, \"inherit\");height:var(--fw-tab-panel-height, \"inherit\")}";

let counter = 0;
let Panel = class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    attachShadow(this);
    /**
     * The panel name.
     */
    this.name = '';
    /**
     * If true sets the panel display to block, none otherwise.
     */
    this.active = false;
  }
  connectedCallback() {
    if (!this.el.id) {
      this.el.id = `fw-tab-panel-${counter++}`;
    }
  }
  render() {
    this.el.style.display = this.active ? 'block' : 'none';
    return (h(Host, { role: 'tabpanel', "aria-hidden": this.active ? 'false' : 'true' }, h("slot", null)));
  }
  get el() { return this; }
  static get style() { return tabPanelCss; }
};
Panel = /*@__PURE__*/ proxyCustomElement(Panel, [1, "fw-tab-panel", {
    "name": [513],
    "active": [516]
  }]);
function defineCustomElement() {
  const components = ["fw-tab-panel"];
  components.forEach(tagName => { switch (tagName) {
    case "fw-tab-panel":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, Panel);
      }
      break;
  } });
}

export { Panel as P, defineCustomElement as d };