import{i as d,A as h,b as n,a as p,n as o}from"./property-ChPqBGW_.js";import{t as v}from"./custom-element-C-crYl4r.js";import{r as m}from"./state-BnFRu-9h.js";import{b as f}from"./tokens-BNnjLb74.js";var b=Object.defineProperty,_=Object.getOwnPropertyDescriptor,r=(e,t,s,l)=>{for(var i=l>1?void 0:l?_(t,s):t,c=e.length-1,u;c>=0;c--)(u=e[c])&&(i=(l?u(t,s,i):u(i))||i);return l&&i&&b(t,s,i),i};const g=["#f56a00","#7265e6","#ffbf00","#00a2ae","#eb2f96","#52c41a","#1890ff","#722ed1","#fa541c","#13c2c2","#2f54eb","#fa8c16"];function z(e){let t=0;for(let s=0;s<e.length;s++)t=e.charCodeAt(s)+((t<<5)-t);return g[Math.abs(t)%g.length]}function y(e){if(!e)return"";const t=e.trim().split(/\s+/);return t.length===1?e.slice(0,2).toUpperCase():(t[0][0]+t[t.length-1][0]).toUpperCase()}let a=class extends d{constructor(){super(...arguments),this.size="md",this.shape="circle",this.group=!1,this._imageError=!1,this._hasSlottedContent=!1,this.handleImageError=()=>{this._imageError=!0,this.dispatchEvent(new CustomEvent("error"))},this.handleImageLoad=()=>{this.dispatchEvent(new CustomEvent("load"))},this.handleSlotChange=e=>{const t=e.target;this._hasSlottedContent=t.assignedElements().length>0}}get initials(){return y(this.name||"")}get backgroundColor(){return z(this.name||"default")}get showImage(){return!!this.src&&!this._imageError}get showInitials(){return!this.showImage&&!this._hasSlottedContent&&!!this.name}get showDefault(){return!this.showImage&&!this._hasSlottedContent&&!this.name}render(){const e=this.showInitials?`background-color: ${this.backgroundColor}`:"";return n`
      <div class="avatar" style=${e}>
        <slot @slotchange=${this.handleSlotChange}>
          ${this.showImage?this.renderImage():h}
          ${this.showInitials?this.renderInitials():h}
          ${this.showDefault?this.renderDefault():h}
        </slot>
      </div>
      ${this.status?n`<span class="status ${this.status}"></span>`:h}
    `}renderImage(){return n`
      <img
        src=${this.src}
        alt=${this.alt||this.name||"Avatar"}
        @error=${this.handleImageError}
        @load=${this.handleImageLoad}
      />
    `}renderInitials(){return n`<span class="initials">${this.initials}</span>`}renderDefault(){return n`
      <span class="icon">
        <svg viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em">
          <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
        </svg>
      </span>
    `}};a.styles=[f,p`
      :host {
        --_size: var(--monibuca-avatar-size, var(--monibuca-avatar-md));
        --_bg: var(--monibuca-avatar-bg, var(--monibuca-color-bg-secondary));
        --_color: var(--monibuca-avatar-color, white);
        --_radius: var(--monibuca-avatar-radius, var(--monibuca-radius-full));
        --_font-size: var(--monibuca-avatar-font-size, calc(var(--_size) * 0.4));
        --_border: var(--monibuca-avatar-border, none);
        
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--_size);
        height: var(--_size);
        flex-shrink: 0;
      }

      .avatar {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--_radius);
        background: var(--_bg);
        color: var(--_color);
        font-size: var(--_font-size);
        font-weight: var(--monibuca-font-weight-medium);
        overflow: hidden;
        user-select: none;
        border: var(--_border);
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .initials {
        text-transform: uppercase;
        line-height: 1;
      }

      .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: calc(var(--_size) * 0.5);
      }

      /* Size variants */
      :host([size="xs"]) {
        --_size: var(--monibuca-avatar-xs);
        --_font-size: 10px;
      }

      :host([size="sm"]) {
        --_size: var(--monibuca-avatar-sm);
        --_font-size: 12px;
      }

      :host([size="md"]) {
        --_size: var(--monibuca-avatar-md);
        --_font-size: 14px;
      }

      :host([size="lg"]) {
        --_size: var(--monibuca-avatar-lg);
        --_font-size: 20px;
      }

      :host([size="xl"]) {
        --_size: var(--monibuca-avatar-xl);
        --_font-size: 28px;
      }

      /* Shape variants */
      :host([shape="square"]) {
        --_radius: var(--monibuca-radius-md);
      }

      /* Status indicator */
      :host {
        position: relative;
      }

      .status {
        position: absolute;
        bottom: 0;
        right: 0;
        width: calc(var(--_size) * 0.25);
        height: calc(var(--_size) * 0.25);
        min-width: 8px;
        min-height: 8px;
        border-radius: 50%;
        border: 2px solid var(--monibuca-color-bg);
        background: var(--monibuca-color-text-tertiary);
      }

      .status.online {
        background: var(--monibuca-color-success);
      }

      .status.offline {
        background: var(--monibuca-color-text-tertiary);
      }

      .status.busy {
        background: var(--monibuca-color-error);
      }

      .status.away {
        background: var(--monibuca-color-warning);
      }

      /* Group avatar overlap */
      :host([group]) {
        margin-left: calc(var(--_size) * -0.25);
        border: 2px solid var(--monibuca-color-bg);
      }

      :host([group]:first-child) {
        margin-left: 0;
      }
    `];r([o({type:String})],a.prototype,"src",2);r([o({type:String})],a.prototype,"name",2);r([o({type:String,reflect:!0})],a.prototype,"size",2);r([o({type:String,reflect:!0})],a.prototype,"shape",2);r([o({type:String})],a.prototype,"status",2);r([o({type:Boolean,reflect:!0})],a.prototype,"group",2);r([o({type:String})],a.prototype,"alt",2);r([m()],a.prototype,"_imageError",2);r([m()],a.prototype,"_hasSlottedContent",2);a=r([v("mb-avatar")],a);export{a as MbAvatar};
