'use strict';

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

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

const ezAvatarCss = ":host{--ez-avatar--background-color:var(--color--ocean-green-600, #008561);--ez-avatar--color:var(--color--gray-70, #fff);--ez-avatar--border-radius-circle:50%;--ez-avatar--border-radius-square:25%;--ez-avatar--background-color-hover:var(--color--ocean-green-700, #00684C)}button,figure{display:flex;align-items:center;justify-content:center;border:var(--ez-avatar--border);background-color:var(--ez-avatar--background-color);color:var(--ez-avatar--color);font-weight:var(--font-weight--medium, 500);font-family:var(--font-pattern, 'Roboto');transition:background-color 0.2s linear, color 0.2s linear;margin:0;padding:0}button:hover{cursor:pointer;background-color:var(--ez-avatar--background-color-hover)}.avatar--320{--avatar-size:320px;width:20rem;height:20rem}.avatar--300{--avatar-size:300px;width:18.75rem;height:18.75rem}.avatar--280{--avatar-size:280px;width:17.5rem;height:17.5rem}.avatar--260{--avatar-size:260px;width:16.25rem;height:16.25rem}.avatar--240{--avatar-size:240px;width:15rem;height:15rem}.avatar--220{--avatar-size:220px;width:13.75rem;height:13.75rem}.avatar--200{--avatar-size:200px;width:12.5rem;height:12.5rem}.avatar--180{--avatar-size:180px;width:11.25rem;height:11.25rem}.avatar--160{--avatar-size:160px;width:10rem;height:10rem}.avatar--140{--avatar-size:140px;width:8.75rem;height:8.75rem}.avatar--120{--avatar-size:120px;width:7.5rem;height:7.5rem}.avatar--100{--avatar-size:100px;width:6.25rem;height:6.25rem}.avatar--80{--avatar-size:80px;width:5rem;height:5rem}.avatar--60{--avatar-size:60px;width:3.75rem;height:3.75rem}.avatar-initial{font-size:calc(0.375 * var(--avatar-size));}.avatar--circle{border-radius:var(--ez-avatar--border-radius-circle)}.avatar--square{border-radius:var(--ez-avatar--border-radius-square)}.avatar-image{width:100%;height:100%;object-fit:cover;border-radius:inherit}.avatar--has-image{background-color:transparent}ez-icon{--ez-icon--color:var(--color--gray-70, #fff);font-weight:var(--font-weight--medium, 500)}";

const EzAvatar = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.DECIMAL_PARSE_BASE = 10;
    this.FONT_SIZE_BASE_CALC = 0.375;
    this.DEFAULT_ICON_NAME = "account-outline";
    this.name = undefined;
    this.imageSrc = undefined;
    this.iconName = undefined;
    this.size = '100';
    this.shape = 'circle';
    this.isInteractive = false;
  }
  /** Obtém a inicial do nome do usuário. */
  getInitial() {
    var _a;
    return ((_a = this.name) === null || _a === void 0 ? void 0 : _a.trim()) ? this.name.charAt(0).toUpperCase() : '';
  }
  calcFontSize() {
    const sizeNumber = parseInt(this.size, this.DECIMAL_PARSE_BASE);
    return this.FONT_SIZE_BASE_CALC * sizeNumber;
  }
  getClass() {
    return `avatar avatar--${this.size} avatar--${this.shape} ${this.imageSrc ? 'avatar--has-image' : ''}`;
  }
  renderAvatarContent() {
    var _a;
    if (this.imageSrc) {
      return index.h("img", { src: this.imageSrc, alt: this.name || 'Avatar', class: "avatar-image" });
    }
    if (this.name) {
      return index.h("span", { class: "avatar-initial", "aria-hidden": "true" }, this.getInitial());
    }
    return index.h("ez-icon", { class: "avatar-icon", iconName: (_a = this.iconName) !== null && _a !== void 0 ? _a : this.DEFAULT_ICON_NAME, fontSize: this.calcFontSize() });
  }
  async componentWillLoad() {
    this.i18n = await index$1.initI18n();
  }
  render() {
    if (this.isInteractive) {
      return (index.h("button", { "aria-label": this.i18n("app.profile"), class: this.getClass() }, this.renderAvatarContent()));
    }
    return (index.h("figure", { class: this.getClass() }, this.renderAvatarContent()));
  }
};
EzAvatar.style = ezAvatarCss;

exports.ez_avatar = EzAvatar;
