'use strict';

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

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

const ezTileCss = ":host{--ez-tile--width:120px;--ez-tile--height:80px;--ez-tile--padding:var(--space--12, 12px);--ez-tile--icon--margin-bottom:var(--space--8);--ez-tile--border-radius:var(--border--radius-16, 16px);--ez-tile--background-color:var(--color--gray-70, #ffffff);--ez-tile--color:var(--color--ocean-green-900, #003D2D);--ez-tile--icon-color:var(--color--ocean-green-400, #42A58A);--ez-tile--hover-background-color:var(--color--gray-80, #F9F9F9);--ez-tile--hover-color:var(--color--ocean-green-900, #003D2D);--ez-tile--hover-icon-color:var(--color--ocean-green-400, #42A58A);--ez-tile--focus-visible-border:2px solid var(--color--petroleum-400, #626D80);--ez-tile--font-family:var(--font-pattern, Arial);--ez-tile--font-weight:var(--font-weight--regular, 400);--ez-tile--font-size:var(--font-size--default, 14px);--ez-tile--title-line-height:var(--line-height--20, 20px);--ez-tile--icon-line-height:var(--line-height--24, 24px)}button{display:flex;flex-wrap:wrap;align-content:space-between;overflow:hidden;outline:none;box-shadow:none;width:var(--ez-tile--custom-width, var(--ez-tile--width));height:var(--ez-tile--custom-height, var(--ez-tile--height));border-radius:var(--ez-tile--border-radius);background-color:var(--ez-tile--background-color);color:var(--ez-tile--color);box-sizing:border-box;padding:var(--ez-tile--padding);border:2px solid var(--ez-tile--background-color)}button:focus-visible{border:var(--ez-tile--focus-visible-border)}.medium{--ez-tile--width:var(--ez-tile--custom-width, 120px);--ez-tile--height:var(--ez-tile--custom-height, 170px)}.isInteractive:hover,.isInteractive:focus{--ez-icon--color:var(--ez-tile--hover-icon-color);--ez-tile--background-color:var(--ez-tile--hover-background-color);--ez-tile--color:var(--ez-tile--hover-color);cursor:pointer}span{-webkit-line-clamp:var(--ez-tile--custom-maximum-lines, 1);line-clamp:var(--ez-tile--custom-maximum-lines,1);font-family:var(--ez-tile--font-family);font-weight:var(--ez-tile--font-weight);font-size:var(--ez-tile--font-size);line-height:var(--ez-tile--title-line-height);display:-webkit-box;-webkit-box-orient:vertical;width:100%;overflow:hidden;text-overflow:ellipsis;text-align:left;white-space:pre-wrap}ez-icon{--ez-icon--color:var(--ez-tile--icon-color);margin-bottom:var(--ez-tile--icon--margin-bottom);line-height:var(--ez-tile--icon-line-height)}.isInteractive:hover,.isInteractive:focus{outline:none}.green{--ez-tile--background-color:var(--color--ocean-green-90);--ez-tile--icon-color:var(--color--ocean-green-500)}.isInteractive.green:hover,.isInteractive.green:focus{--ez-tile--hover-background-color:var(--color--ocean-green-100);--ez-tile--icon-color:var(--color--ocean-green-500);outline:none}.gray{--ez-tile--background-color:var(--color--gray-80);--ez-tile--icon-color:var(--color--ocean-green-400)}.isInteractive.gray:hover,.isInteractive.gray:focus{--ez-tile--hover-background-color:var(--color--gray-90);--ez-tile--hover-icon-color:var(--color--ocean-green-400)}.red{--ez-tile--background-color:var(--color--red-100);--ez-tile--icon-color:var(--color--red-300)}.isInteractive.red:hover,.isInteractive.red:focus{--ez-tile--hover-background-color:var(--color--red-200);--ez-tile--hover-icon-color:var(--color--red-300)}.yellow{--ez-tile--background-color:var(--color--yellow-100);--ez-tile--icon-color:var(--color--yellow-400)}.isInteractive.yellow:hover,.isInteractive.yellow:focus{--ez-tile--hover-background-color:var(--color--yellow-200);--ez-tile--hover-icon-color:var(--color--yellow-400)}";

const EzTile = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.tileClick = index.createEvent(this, "tileClick", 7);
    this.text = undefined;
    this.size = "small";
    this.height = undefined;
    this.width = undefined;
    this.color = "default";
    this.iconName = "home";
    this.maximumLines = undefined;
    this.isInteractive = false;
  }
  /**
   * Aplica o foco no componente.
   */
  async setFocus() {
    this._container.focus();
  }
  /**
   * Remove o foco do componente.
   */
  async setBlur() {
    this._container.blur();
  }
  clickListener(evt) {
    if (!this.isInteractive) {
      evt.stopImmediatePropagation();
    }
  }
  handleClick() {
    if (this.isInteractive) {
      this.tileClick.emit();
    }
  }
  componentDidRender() {
    if (this._element) {
      core.ElementIDUtils.addIDInfo(this._element);
    }
    if (this._container) {
      const dataInfo = { id: 'embedded' };
      core.ElementIDUtils.addIDInfo(this._container, 'tile-button', dataInfo);
    }
  }
  render() {
    const customStyleVars = Object.assign(Object.assign(Object.assign({}, (this.height ? { '--ez-tile--custom-height': `${this.height}px` } : {})), (this.width ? { '--ez-tile--custom-width': `${this.width}px` } : {})), (this.maximumLines ? { '--ez-tile--custom-maximum-lines': `${this.maximumLines}` } : {}));
    return (index.h(index.Host, { style: customStyleVars }, index.h("button", { ref: element => this._container = element, class: `${this.color} ${this.size} ${this.isInteractive ? "isInteractive" : ""}`, onClick: () => this.handleClick() }, index.h("ez-icon", { class: "icon", iconName: this.iconName, size: "large" }), index.h("span", { title: this.text }, this.text))));
  }
  get _element() { return index.getElement(this); }
};
EzTile.style = ezTileCss;

exports.ez_tile = EzTile;
