@design.estate/wcctools 5.1.0 → 6.0.0

package/ts_web/elements/wcc-record-button.ts

@@ -1,108 +0,0 @@
-import { DeesElement, customElement, html, css, property, type TemplateResult } from '@design.estate/dees-element';
-
-@customElement('wcc-record-button')
-export class WccRecordButton extends DeesElement {
-  @property({ type: String })
-  accessor state: 'idle' | 'recording' = 'idle';
-
-  @property({ type: Number })
-  accessor duration: number = 0;
-
-  public static styles = [
-    css`
-      :host {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: transparent;
-        cursor: pointer;
-        transition: all 0.15s ease;
-        color: #666;
-        user-select: none;
-      }
-
-      :host(:hover) {
-        background: rgba(239, 68, 68, 0.05);
-        color: #f87171;
-      }
-
-      :host(.recording) {
-        background: rgba(239, 68, 68, 0.15);
-        color: #f87171;
-      }
-
-      .content {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 0.25rem;
-      }
-
-      .rec-icon {
-        width: 12px;
-        height: 12px;
-        border-radius: 50%;
-        background: currentColor;
-      }
-
-      :host(.recording) .rec-icon {
-        animation: pulse-recording 1s ease-in-out infinite;
-      }
-
-      @keyframes pulse-recording {
-        0%, 100% { opacity: 1; transform: scale(1); }
-        50% { opacity: 0.5; transform: scale(0.9); }
-      }
-
-      .recording-timer {
-        font-family: 'Consolas', 'Monaco', monospace;
-        font-size: 0.7rem;
-      }
-    `
-  ];
-
-  private formatDuration(seconds: number): string {
-    const mins = Math.floor(seconds / 60);
-    const secs = seconds % 60;
-    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
-  }
-
-  public render(): TemplateResult {
-    return html`
-      <div class="content">
-        <div class="rec-icon"></div>
-        ${this.state === 'recording' ? html`
-          <span class="recording-timer">${this.formatDuration(this.duration)}</span>
-        ` : null}
-      </div>
-    `;
-  }
-
-  async connectedCallback(): Promise<void> {
-    await super.connectedCallback();
-    this.addEventListener('click', this.handleClick);
-  }
-
-  async disconnectedCallback(): Promise<void> {
-    await super.disconnectedCallback();
-    this.removeEventListener('click', this.handleClick);
-  }
-
-  private handleClick = (): void => {
-    this.dispatchEvent(new CustomEvent('record-click', {
-      bubbles: true,
-      composed: true
-    }));
-  };
-
-  updated(changedProperties: Map<string, unknown>): void {
-    super.updated(changedProperties);
-    if (changedProperties.has('state')) {
-      if (this.state === 'recording') {
-        this.classList.add('recording');
-      } else {
-        this.classList.remove('recording');
-      }
-    }
-  }
-}