'use strict';

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

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

const ezTileMediumCss = ":host{--ez-tile-medium--width:446px;--ez-tile-medium--height:257px;--ez-tile-medium--padding:var(--space--24, 24px);--ez-tile-medium--border-radius:var(--border--radius-16, 16px);--ez-tile-medium--background-color:var(--color--ocean-gray-70, #ffffff);--ez-tile-medium--color:var(--color--ocean-green-900, #003D2D);--ez-tile-medium--icon-color:var(--color--ocean-green-400, #42A58A);--ez-tile-medium--font-family:var(--font-pattern, Arial);--ez-tile-medium--header-gap:var(--space--16, 16px);--ez-tile-medium--icon-line-height:var(--line-height--30, 30px);--ez-tile-medium--tag-group-gap:var(--space--4, 4px);--ez-tile-medium_button--background-color:var(--color--ocean-green-600, #1A9171);--ez-tile-medium_button--color:var(--color--gray-70, #ffffff);--ez-tile-medium_button--hover--background-color:var(--color--ocean-green-700, #00684C);--ez-tile-medium_button--hover-color:var(--color--gray-70, #ffffff);--ez-tile-medium_button--active--background-color:var(--color--ocean-green-500, #1A9171);--ez-tile-medium_button--active-color:var(--color--gray-70, #ffffff)}.tile-medium_container{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;overflow:hidden;outline:none;box-shadow:none;width:var(--ez-tile-medium--custom-width, var(--ez-tile-medium--width));height:var(--ez-tile-medium--custom-height, var(--ez-tile-medium--height));border-radius:var(--ez-tile-medium--border-radius);background-color:var(--ez-tile-medium--background-color);color:var(--ez-tile-medium--color);box-sizing:border-box;padding:var(--ez-tile-medium--padding)}.tile-medium_header{display:flex;flex-direction:row;align-items:flex-start;align-self:stretch;width:100%;gap:var(--ez-tile-medium--header-gap)}.tile-medium_header-image{display:flex;align-items:flex-start;gap:var(--space--10, 10px);flex:1 0 0}.tag_group{display:flex;flex-direction:row;gap:var(--ez-tile-medium--tag-group-gap);flex-wrap:wrap;justify-content:flex-end}.tile-medium_content{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:var(--space--14, 14px);align-self:stretch}span{font-family:var(--ez-tile-medium--font-family);display:-webkit-box;-webkit-box-orient:vertical;width:100%;overflow:hidden;text-overflow:ellipsis;text-align:left;white-space:pre-wrap;align-self:stretch;font-style:normal}.small_title{color:var(--color--gray-400, #77777A);font-size:var(--font-size--default, 14px);font-weight:var(--font-weight--regular);line-height:var(--line-height--20, 20px);-webkit-line-clamp:var(--ez-tile-medium--small-title--maximum-lines, 1);line-clamp:var(--ez-tile-medium--small-title--maximum-lines,1)}.main_title{color:var(--color--ocean-green-900, #003D2D);font-size:var(--font-size--xxlarge, 22px);font-weight:var(--font-weight--bold);line-height:var(--line-height--32, 32px);-webkit-line-clamp:var(--ez-tile-medium--title--maximum-lines, 1);line-clamp:var(--ez-tile-medium--title--maximum-lines,1)}.description{color:var(--color--ocean-green-900, #003D2D);font-size:var(--font-size--default, 14px);font-weight:var(--font-weight--regular);line-height:var(--line-height--24, 24px);-webkit-line-clamp:var(--ez-tile-medium--description--maximum-lines, 3);line-clamp:var(--ez-tile-medium--description--maximum-lines, 3)}.tile-medium_button{--ez-button--background-color:var(--ez-tile-medium_button--background-color);--ez-button--color:var(--ez-tile-medium_button--color);--ez-button--hover--background-color:var(--ez-tile-medium_button--hover--background-color);--ez-button--hover-color:var(--ez-tile-medium_button--hover-color);--ez-button--active--background-color:var(--ez-tile-medium_button--active--background-color);--ez-button--active-color:var(--ez-tile-medium_button--active-color)}ez-icon{--ez-icon--color:var(--ez-tile-medium--custom-icon-color, var(--ez-tile-medium--icon-color));line-height:var(--ez-tile-medium--icon-line-height)}.green{--ez-tile-medium--background-color:var(--color--ocean-green-90);--ez-tile-medium--icon-color:var(--ez-tile-medium--custom-icon-color, var(--color--ocean-green-500))}.gray{--ez-tile-medium--background-color:var(--color--gray-80);--ez-tile-medium--icon-color:var(--ez-tile-medium--custom-icon-color, var(--color--ocean-green-400))}.red{--ez-tile-medium--background-color:var(--color--red-100);--ez-tile-medium--icon-color:var(--ez-tile-medium--custom-icon-color, var(--color--red-300))}.yellow{--ez-tile-medium--background-color:var(--color--yellow-100);--ez-tile-medium--icon-color:var(--ez-tile-medium--custom-icon-color, var(--color--yellow-400))}";

const EzTileMedium = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.color = "default";
    this.iconName = undefined;
    this.iconColor = undefined;
    this.smallTitleText = undefined;
    this.smallTitleMaximumLines = undefined;
    this.titleText = undefined;
    this.titleMaximumLines = undefined;
    this.descriptionText = undefined;
    this.descriptionMaximumLines = undefined;
    this.height = undefined;
    this.width = undefined;
    this.avatarProps = undefined;
    this.buttonProps = undefined;
    this.tags = undefined;
  }
  /**
   * Aplica o foco no botão.
   */
  async setButtonFocus() {
    var _a;
    if (!this._button)
      return;
    (_a = this._button) === null || _a === void 0 ? void 0 : _a.setFocus();
  }
  /**
   * Remove o foco do botão.
   */
  async setButtonBlur() {
    var _a;
    if (!this._button)
      return;
    (_a = this._button) === null || _a === void 0 ? void 0 : _a.setBlur();
  }
  renderBadges() {
    if (!this.tags || this.tags.length === 0)
      return null;
    return this.tags.slice(0, 3).map((tag, index$1) => (index.h("ez-badge", { id: `tag-${tag.label}`, key: `tag-${index$1}`, label: tag.label, size: 'medium', style: { "--ez-badge--background-color": `var(${tag.color}, #008561)` } })));
  }
  setCustomCSSProperties() {
    var _a, _b;
    const colors = (_b = (_a = this.buttonProps) === null || _a === void 0 ? void 0 : _a.colors) !== null && _b !== void 0 ? _b : {};
    const { background, backgroundHover, backgroundActive, text, textHover, textActive } = colors;
    const customCSSVars = Object.assign({}, this.height && { '--ez-tile-medium--custom-height': `${this.height}` }, this.width && { '--ez-tile-medium--custom-width': `${this.width}` }, this.smallTitleMaximumLines && { '--ez-tile-medium--small-title--maximum-lines': `${this.smallTitleMaximumLines}` }, this.titleMaximumLines && { '--ez-tile-medium--title--maximum-lines': `${this.titleMaximumLines}` }, this.descriptionMaximumLines && { '--ez-tile-medium--description--maximum-lines': `${this.descriptionMaximumLines}` }, this.iconColor && { '--ez-tile-medium--custom-icon-color': `var(${this.iconColor})` }, (background && { "--ez-tile-medium_button--background-color": `var(${background}, #008561)` }), (backgroundHover && { "--ez-tile-medium_button--hover--background-color": `var(${backgroundHover}, #00684C)` }), (backgroundActive && { "--ez-tile-medium_button--active--background-color": `var(${backgroundActive}, #1A9171)` }), (text && { "--ez-tile-medium_button--color": `var(${text}, #ffffff)` }), (textHover && { "--ez-tile-medium_button--hover-color": `var(${textHover}, #ffffff)` }), (textActive && { "--ez-tile-medium_button--active-color": `var(${textActive}, #ffffff)` }));
    return customCSSVars;
  }
  componentDidLoad() {
    this.setCustomCSSProperties();
    if (this._element) {
      core.ElementIDUtils.addIDInfo(this._element);
    }
    if (this._button) {
      const dataInfo = { id: 'embedded' };
      core.ElementIDUtils.addIDInfo(this._button, 'tile-medium_button', dataInfo);
    }
  }
  render() {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
    return (index.h(index.Host, { style: this.setCustomCSSProperties() }, index.h("div", { class: `tile-medium_container ${this.color}` }, index.h("div", { class: `tile-medium_header` }, index.h("div", { class: "tile-medium_header-image" }, this.avatarProps
      ? index.h("ez-avatar", { size: "60", name: (_a = this.avatarProps) === null || _a === void 0 ? void 0 : _a.name, imageSrc: (_b = this.avatarProps) === null || _b === void 0 ? void 0 : _b.imageSrc, shape: ((_c = this.avatarProps) === null || _c === void 0 ? void 0 : _c.shape) || "square" })
      : this.iconName && index.h("ez-icon", { size: "x-large", class: "icon", iconName: this.iconName })), index.h("div", { class: `tag_group` }, this.renderBadges())), index.h("div", { class: "tile-medium_content" }, index.h("div", null, this.smallTitleText && index.h("span", { class: "small_title", title: this.smallTitleText }, this.smallTitleText), this.titleText && index.h("span", { class: "main_title", title: this.titleText }, this.titleText), this.descriptionText && index.h("span", { class: "description", title: this.descriptionText }, this.descriptionText)), this.buttonProps &&
      index.h("ez-button", { ref: el => this._button = el, class: "tile-medium_button", label: ((_d = this.buttonProps) === null || _d === void 0 ? void 0 : _d.label) || undefined, enabled: (_f = (_e = this.buttonProps) === null || _e === void 0 ? void 0 : _e.enabled) !== null && _f !== void 0 ? _f : true, mode: (_g = this.buttonProps) === null || _g === void 0 ? void 0 : _g.mode, iconName: (_h = this.buttonProps) === null || _h === void 0 ? void 0 : _h.iconName, size: (_j = this.buttonProps) === null || _j === void 0 ? void 0 : _j.size, onClick: (_k = this.buttonProps) === null || _k === void 0 ? void 0 : _k.onClick })))));
  }
  get _element() { return index.getElement(this); }
};
EzTileMedium.style = ezTileMediumCss;

exports.ez_tile_medium = EzTileMedium;
