import { r as registerInstance, h, a as Host, g as getElement } from './index-3408babe.js';
import { c as classnames } from './index-713f92a5.js';
import { s as statusNote } from './status-note-d227f142.js';

const tabPanelCss = ":host{--spacing-top:var(--telekom-spacing-unit-x6);--spacing-top-small:var(--telekom-spacing-unit-x4)}.tab-panel{margin-top:var(--spacing-top)}.tab-panel--small{margin-top:var(--spacing-top-small)}";

let i = 0;
const TabPanel = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.generatedId = i++;
    /** True for smaller height and font size */
    // DEPRECATED - size should replace small
    this.small = false;
    /** (optional) size  */
    this.size = 'large';
  }
  componentDidRender() {
    if (this.small !== false) {
      statusNote({
        tag: 'deprecated',
        message: 'Property "small" is deprecated. Please use the "size" property!',
        type: 'warn',
        source: this.el,
      });
    }
  }
  render() {
    return (h(Host, { id: `scale-tab-panel-${this.generatedId}`, role: "tabpanel" }, this.styles && h("style", null, this.styles), h("div", { part: this.getBasePartMap(), class: this.getCssClassMap() }, h("slot", null))));
  }
  getBasePartMap() {
    return this.getCssOrBasePartMap('basePart');
  }
  getCssClassMap() {
    return this.getCssOrBasePartMap('css');
  }
  getCssOrBasePartMap(mode) {
    const component = 'tab-panel';
    const prefix = mode === 'basePart' ? '' : `${component}--`;
    return classnames(component, (this.size === 'small' || this.small) && `${prefix}small`);
  }
  get el() { return getElement(this); }
};
TabPanel.style = tabPanelCss;

export { TabPanel as scale_tab_panel };
