import { r as registerInstance, h, H as Host, g as getElement } from './index-baa5e267.js';
import { ElementIDUtils } from '@sankhyalabs/core';

const ezEmptyCardCss = ":host{--ez-empty-card--width:335px;--ez-empty-card--height:155px;--ez-empty-card--padding:var(--space--24, 24px);--ez-empty-card--border-radius:var(--border--radius-24, 24px);--ez-empty-card--background-color:var(--color--gray-70, #ffffff)}div{width:var(--ez-empty-card--custom-width, var(--ez-empty-card--width));height:var(--ez-empty-card--custom-height, var(--ez-empty-card--height));border-radius:var(--ez-empty-card--border-radius);background-color:var(--ez-empty-card--background-color);padding:var(--ez-empty-card--padding);display:block;overflow:hidden;outline:none;box-shadow:none;border:none;box-sizing:border-box}.gray{--ez-empty-card--background-color:var(--color--gray-80)}.green{--ez-empty-card--background-color:var(--color--ocean-green-90)}.yellow{--ez-empty-card--background-color:var(--color--yellow-100)}.red{--ez-empty-card--background-color:var(--color--red-100)}.petroleum{--ez-empty-card--background-color:var(--color--petroleum-90)}";

const EzEmptyCard = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.color = "default";
    this.height = undefined;
    this.width = undefined;
  }
  componentDidRender() {
    if (this._element) {
      ElementIDUtils.addIDInfo(this._element);
    }
    if (this._container) {
      const dataInfo = { id: 'container' };
      ElementIDUtils.addIDInfo(this._container, 'empty-card', dataInfo);
    }
  }
  render() {
    const customStyleVars = Object.assign(Object.assign({}, (this.height ? { '--ez-empty-card--custom-height': `${this.height}px` } : {})), (this.width ? { '--ez-empty-card--custom-width': `${this.width}px` } : {}));
    return (h(Host, { style: customStyleVars }, h("div", { ref: element => this._container = element, class: `card_container ${this.color}` }, h("slot", null))));
  }
  get _element() { return getElement(this); }
};
EzEmptyCard.style = ezEmptyCardCss;

export { EzEmptyCard as ez_empty_card };
