'use strict';

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

const index = require('./index-a7b0c73d.js');
const core = require('@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) {
    index.registerInstance(this, hostRef);
    this.color = "default";
    this.height = undefined;
    this.width = undefined;
  }
  componentDidRender() {
    if (this._element) {
      core.ElementIDUtils.addIDInfo(this._element);
    }
    if (this._container) {
      const dataInfo = { id: 'container' };
      core.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 (index.h(index.Host, { style: customStyleVars }, index.h("div", { ref: element => this._container = element, class: `card_container ${this.color}` }, index.h("slot", null))));
  }
  get _element() { return index.getElement(this); }
};
EzEmptyCard.style = ezEmptyCardCss;

exports.ez_empty_card = EzEmptyCard;
