'use strict';

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

const index = require('./index-a7b0c73d.js');
const core = require('@sankhyalabs/core');

const ezUnderfaceCss = ":host{--ez-underface--width:693px;--ez-underface--height:247px;--ez-underface--padding:var(--space--24, 24px);--ez-underface--border-radius:var(--border--radius-26, 26px)}div{width:var(--ez-underface--custom-width, var(--ez-underface--width));height:var(--ez-underface--custom-height, var(--ez-underface--height));border-radius:var(--ez-underface--border-radius);padding:var(--ez-underface--padding);display:block;overflow:hidden;outline:none;box-shadow:none;border:none;box-sizing:border-box;background-color:var(--ez-underface--custom-background-color, var(--color--petroleum-700, #222D42))}.light-green{background-color:var(--ez-underface--custom-background-color, var(--color--ocean-green-90))}.green{background-color:var(--ez-underface--custom-background-color, var(--color--green-600))}.light-gray{background-color:var(--ez-underface--custom-background-color, var(--color--gray-80))}.dark-petroleum{background-color:var(--ez-underface--custom-background-color, var(--color--petroleum-900))}.ocean-green{background-color:var(--ez-underface--custom-background-color, var(--color--ocean-green-600))}";

const EzUnderface = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.color = "default";
    this.customColor = undefined;
    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, 'underface', dataInfo);
    }
  }
  render() {
    const customStyleVars = Object.assign({}, this.customColor && { '--ez-underface--custom-background-color': `var(${this.customColor})` }, this.height && { '--ez-underface--custom-height': `${this.height}px` }, this.width && { '--ez-underface--custom-width': `${this.width}px` });
    return (index.h(index.Host, { style: customStyleVars }, index.h("div", { ref: element => this._container = element, class: `underface_container ${this.color}` }, index.h("slot", null))));
  }
  get _element() { return index.getElement(this); }
};
EzUnderface.style = ezUnderfaceCss;

exports.ez_underface = EzUnderface;
