import{i as v,b as l,a as c,n}from"./property-ChPqBGW_.js";import{t as u}from"./custom-element-C-crYl4r.js";import{b as p}from"./tokens-BNnjLb74.js";var b=Object.defineProperty,m=Object.getOwnPropertyDescriptor,o=(e,a,i,s)=>{for(var t=s>1?void 0:s?m(a,i):a,h=e.length-1,d;h>=0;h--)(d=e[h])&&(t=(s?d(a,i,t):d(t))||t);return s&&t&&b(a,i,t),t};let r=class extends v{constructor(){super(...arguments),this.level=0,this.variant="bars",this.size="md",this.muted=!1,this.speaking=!1,this.barCount=5}get normalizedLevel(){return Math.min(1,Math.max(0,this.level))}get activeBars(){return Math.ceil(this.normalizedLevel*this.barCount)}render(){switch(this.variant){case"wave":return this.renderWave();case"dot":return this.renderDot();default:return this.renderBars()}}renderBars(){const e=[],a=[40,70,100,70,40];for(let i=0;i<this.barCount;i++){const s=i<this.activeBars,t=a[i%a.length],h=s?`${Math.max(20,t*this.normalizedLevel)}%`:"20%";e.push(l`
        <div 
          class="bar ${s?"active":""}" 
          style="height: ${h}"
        ></div>
      `)}return l`<div class="bars">${e}</div>`}renderWave(){const e=[];for(let a=0;a<6;a++)e.push(l`<div class="wave-bar"></div>`);return l`<div class="wave" style="--wave-max-height: ${this.normalizedLevel*100}%">${e}</div>`}renderDot(){const e=.8+this.normalizedLevel*.4;return l`
      <div class="dot">
        <div class="dot-pulse"></div>
        <div class="dot-inner" style="transform: scale(${e})"></div>
      </div>
    `}};r.styles=[p,c`
      :host {
        --_color: var(--monibuca-audio-level-color, var(--monibuca-color-success));
        --_bg: var(--monibuca-audio-level-bg, rgba(255, 255, 255, 0.2));
        --_bar-width: var(--monibuca-audio-level-bar-width, 3px);
        --_gap: var(--monibuca-audio-level-gap, 2px);
        --_muted-color: var(--monibuca-audio-level-muted-color, var(--monibuca-color-error));
        
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      /* Bars variant */
      .bars {
        display: flex;
        align-items: flex-end;
        gap: var(--_gap);
        height: 100%;
      }

      .bar {
        width: var(--_bar-width);
        background: var(--_bg);
        border-radius: var(--_bar-width);
        transition: height var(--monibuca-duration-fast) var(--monibuca-easing-out);
      }

      .bar.active {
        background: var(--_color);
      }

      :host([muted]) .bar.active {
        background: var(--_muted-color);
      }

      /* Size variants for bars */
      :host([size="sm"]) .bars {
        height: 12px;
      }
      :host([size="sm"]) .bar {
        --_bar-width: 2px;
      }

      :host([size="md"]) .bars {
        height: 16px;
      }

      :host([size="lg"]) .bars {
        height: 24px;
      }
      :host([size="lg"]) .bar {
        --_bar-width: 4px;
      }

      /* Wave variant */
      .wave {
        display: flex;
        align-items: center;
        gap: var(--_gap);
        height: 100%;
      }

      .wave-bar {
        width: var(--_bar-width);
        background: var(--_color);
        border-radius: var(--_bar-width);
        animation: wave 1s ease-in-out infinite;
      }

      :host([muted]) .wave-bar {
        background: var(--_muted-color);
        animation: none;
        height: 4px !important;
      }

      .wave-bar:nth-child(1) { animation-delay: 0s; }
      .wave-bar:nth-child(2) { animation-delay: 0.1s; }
      .wave-bar:nth-child(3) { animation-delay: 0.2s; }
      .wave-bar:nth-child(4) { animation-delay: 0.3s; }
      .wave-bar:nth-child(5) { animation-delay: 0.2s; }
      .wave-bar:nth-child(6) { animation-delay: 0.1s; }

      @keyframes wave {
        0%, 100% { height: 4px; }
        50% { height: var(--wave-max-height, 16px); }
      }

      :host([size="sm"]) .wave {
        height: 12px;
        --wave-max-height: 12px;
      }

      :host([size="md"]) .wave {
        height: 16px;
        --wave-max-height: 16px;
      }

      :host([size="lg"]) .wave {
        height: 24px;
        --wave-max-height: 24px;
      }

      /* Dot variant */
      .dot {
        position: relative;
        width: 8px;
        height: 8px;
      }

      .dot-inner {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: var(--_color);
        transition: transform var(--monibuca-duration-fast);
      }

      .dot-pulse {
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        background: var(--_color);
        opacity: 0;
        animation: pulse 1.5s ease-out infinite;
      }

      :host([muted]) .dot-inner {
        background: var(--_muted-color);
      }

      :host([muted]) .dot-pulse {
        display: none;
      }

      @keyframes pulse {
        0% {
          transform: scale(0.5);
          opacity: 0.5;
        }
        100% {
          transform: scale(1.5);
          opacity: 0;
        }
      }

      :host([size="sm"]) .dot {
        width: 6px;
        height: 6px;
      }

      :host([size="lg"]) .dot {
        width: 12px;
        height: 12px;
      }

      /* Speaking animation */
      :host([speaking]) .dot-inner {
        animation: speak 0.3s ease-in-out infinite alternate;
      }

      @keyframes speak {
        from { transform: scale(1); }
        to { transform: scale(1.2); }
      }
    `];o([n({type:Number})],r.prototype,"level",2);o([n({type:String,reflect:!0})],r.prototype,"variant",2);o([n({type:String,reflect:!0})],r.prototype,"size",2);o([n({type:Boolean,reflect:!0})],r.prototype,"muted",2);o([n({type:Boolean,reflect:!0})],r.prototype,"speaking",2);o([n({type:Number,attribute:"bar-count"})],r.prototype,"barCount",2);r=o([u("mb-audio-level")],r);export{r as MbAudioLevel};
