@signalwire/web-components 4.0.0-beta.1 → 4.0.0-beta.11

package/dist/components/call-status.js

@@ -0,0 +1,255 @@
+import { LitElement as d, html as u, css as p } from "lit";
+import { property as h, state as i, customElement as f } from "lit/decorators.js";
+import { consume as m } from "@lit/context";
+import { callContext as w } from "../context/call-context.js";
+var g = Object.defineProperty, x = Object.getOwnPropertyDescriptor, o = (t, s, e, a) => {
+  for (var n = a > 1 ? void 0 : a ? x(s, e) : s, c = t.length - 1, l; c >= 0; c--)
+    (l = t[c]) && (n = (a ? l(s, e, n) : l(n)) || n);
+  return a && n && g(s, e, n), n;
+};
+let r = class extends d {
+  constructor() {
+    super(...arguments), this.call = null, this.status = "new", this.callStartTime = null, this.duration = "0:00", this.subscriptions = [], this.durationInterval = null;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.subscribeToCall();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.cleanup();
+  }
+  updated(t) {
+    (t.has("call") || t.has("contextCall")) && (this.cleanup(), this.subscribeToCall());
+  }
+  get activeCall() {
+    return this.call || this.contextCall || null;
+  }
+  subscribeToCall() {
+    const t = this.activeCall;
+    if (!(t != null && t.status$)) return;
+    const s = t.status$.subscribe((e) => {
+      const a = this.status;
+      this.status = e, e === "connected" && a !== "connected" ? this.startDurationTimer() : e !== "connected" && this.stopDurationTimer();
+    });
+    this.subscriptions.push(s);
+  }
+  startDurationTimer() {
+    this.callStartTime = Date.now(), this.duration = "0:00", this.durationInterval = window.setInterval(() => {
+      if (this.callStartTime) {
+        const t = Math.floor((Date.now() - this.callStartTime) / 1e3);
+        this.duration = this.formatDuration(t);
+      }
+    }, 1e3);
+  }
+  stopDurationTimer() {
+    this.durationInterval && (clearInterval(this.durationInterval), this.durationInterval = null), this.callStartTime = null, this.duration = "0:00";
+  }
+  formatDuration(t) {
+    const s = Math.floor(t / 3600), e = Math.floor(t % 3600 / 60), a = t % 60;
+    return s > 0 ? `${s}:${e.toString().padStart(2, "0")}:${a.toString().padStart(2, "0")}` : `${e}:${a.toString().padStart(2, "0")}`;
+  }
+  cleanup() {
+    this.subscriptions.forEach((t) => t.unsubscribe()), this.subscriptions = [], this.stopDurationTimer();
+  }
+  getStatusText() {
+    switch (this.status) {
+      case "new":
+        return "Ready";
+      case "trying":
+        return "Trying...";
+      case "connecting":
+        return "Connecting...";
+      case "ringing":
+        return "Ringing...";
+      case "connected":
+        return "Connected";
+      case "recovering":
+        return "Reconnecting...";
+      case "disconnecting":
+        return "Disconnecting...";
+      case "disconnected":
+        return "Disconnected";
+      case "failed":
+        return "Failed";
+      case "destroyed":
+        return "Ended";
+      default: {
+        const t = this.status;
+        return String(t);
+      }
+    }
+  }
+  render() {
+    const t = this.getStatusText(), s = this.status === "connected";
+    return u`
+      <div class="container" part="container">
+        <span class="status-indicator ${this.status}" aria-hidden="true"></span>
+        <span
+          class="status-text ${this.status}"
+          part="status-text"
+          role="status"
+          aria-live="polite"
+        >
+          ${t}
+        </span>
+        ${s ? u`<span class="duration" part="duration">${this.duration}</span>` : null}
+      </div>
+    `;
+  }
+};
+r.styles = p`
+    :host {
+      /* CSS Custom Properties for theming */
+      --sw-color-primary: #044cf6;
+      --sw-color-success: #10b981;
+      --sw-color-warning: #f59e0b;
+      --sw-color-danger: #ef4444;
+      --sw-color-text: #1f2937;
+      --sw-color-text-muted: #6b7280;
+      --sw-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --sw-font-size-sm: 14px;
+      --sw-font-size-base: 16px;
+      --sw-font-size-lg: 18px;
+      --sw-space-1: 4px;
+      --sw-space-2: 8px;
+      --sw-space-3: 12px;
+      --sw-border-radius: 8px;
+
+      display: inline-flex;
+      align-items: center;
+      gap: var(--sw-space-2);
+      font-family: var(--sw-font-family);
+      font-size: var(--sw-font-size-base);
+    }
+
+    /* Dark mode support */
+    :host([data-theme='dark']) {
+      --sw-color-text: #f9fafb;
+      --sw-color-text-muted: #9ca3af;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :host(:not([data-theme='light'])) {
+        --sw-color-text: #f9fafb;
+        --sw-color-text-muted: #9ca3af;
+      }
+    }
+
+    .container {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--sw-space-2);
+      padding: var(--sw-space-2) var(--sw-space-3);
+      border-radius: var(--sw-border-radius);
+      color: var(--sw-color-text);
+    }
+
+    .status-indicator {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+
+    .status-indicator.new {
+      background-color: var(--sw-color-text-muted);
+    }
+
+    .status-indicator.connecting,
+    .status-indicator.ringing {
+      background-color: var(--sw-color-warning);
+      animation: pulse 1.5s ease-in-out infinite;
+    }
+
+    .status-indicator.connected {
+      background-color: var(--sw-color-success);
+    }
+
+    .status-indicator.disconnecting {
+      background-color: var(--sw-color-danger);
+      animation: pulse 1s ease-in-out infinite;
+    }
+
+    .status-indicator.trying {
+      background-color: var(--sw-color-warning);
+      animation: pulse 1.5s ease-in-out infinite;
+    }
+
+    .status-indicator.disconnected,
+    .status-indicator.failed {
+      background-color: var(--sw-color-danger);
+    }
+
+    .status-indicator.destroyed {
+      background-color: var(--sw-color-text-muted);
+    }
+
+    @keyframes pulse {
+      0%,
+      100% {
+        opacity: 1;
+        transform: scale(1);
+      }
+      50% {
+        opacity: 0.5;
+        transform: scale(1.1);
+      }
+    }
+
+    .status-text {
+      font-weight: 500;
+      white-space: nowrap;
+    }
+
+    .status-text.trying,
+    .status-text.connecting,
+    .status-text.ringing {
+      color: var(--sw-color-warning);
+    }
+
+    .status-text.disconnecting {
+      color: var(--sw-color-danger);
+    }
+
+    .status-text.connected {
+      color: var(--sw-color-success);
+    }
+
+    .status-text.disconnected,
+    .status-text.failed {
+      color: var(--sw-color-danger);
+    }
+
+    .status-text.new,
+    .status-text.destroyed {
+      color: var(--sw-color-text-muted);
+    }
+
+    .duration {
+      font-variant-numeric: tabular-nums;
+      color: var(--sw-color-text-muted);
+      font-size: var(--sw-font-size-sm);
+    }
+  `;
+o([
+  h({ attribute: !1 })
+], r.prototype, "call", 2);
+o([
+  m({ context: w, subscribe: !0 }),
+  i()
+], r.prototype, "contextCall", 2);
+o([
+  i()
+], r.prototype, "status", 2);
+o([
+  i()
+], r.prototype, "callStartTime", 2);
+o([
+  i()
+], r.prototype, "duration", 2);
+r = o([
+  f("sw-call-status")
+], r);
+export {
+  r as CallStatusComponent
+};
+//# sourceMappingURL=call-status.js.map

package/dist/components/call-status.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"call-status.js","sources":["../../src/components/call-status.ts"],"sourcesContent":["/**\n * Call Status Component\n *\n * Displays current call state with status text and duration timer.\n * Shows animated indicators for transient states (connecting, ringing, disconnecting).\n *\n * @example\n * ```html\n * <sw-call-status .call=${call}></sw-call-status>\n * ```\n *\n * @cssprop [--sw-color-primary=#044cf6] - Primary brand color\n * @cssprop [--sw-color-success=#10b981] - Success/connected indicator color\n * @cssprop [--sw-color-warning=#f59e0b] - Warning/connecting indicator color\n * @cssprop [--sw-color-danger=#ef4444] - Danger/disconnecting indicator color\n * @cssprop [--sw-color-text=#1f2937] - Primary text color\n * @cssprop [--sw-color-text-muted=#6b7280] - Secondary/muted text and duration color\n * @cssprop [--sw-font-family=-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif] - Font family\n * @cssprop [--sw-font-size-sm=14px] - Small font size for duration\n * @cssprop [--sw-font-size-base=16px] - Base font size for status text\n * @cssprop [--sw-font-size-lg=18px] - Large font size\n * @cssprop [--sw-space-1=4px] - Smallest spacing unit\n * @cssprop [--sw-space-2=8px] - Small spacing unit\n * @cssprop [--sw-space-3=12px] - Medium spacing unit\n * @cssprop [--sw-border-radius=8px] - Border radius for container\n */\n\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { consume } from '@lit/context';\nimport { Subscription } from 'rxjs';\nimport type { Observable } from 'rxjs';\nimport type { CallStatus } from '@signalwire/js';\nimport { callContext } from '../context/index.js';\n\n/**\n * Call interface for status component\n */\nexport interface CallStatusCall {\n  status$: Observable<CallStatus>;\n}\n\n@customElement('sw-call-status')\nexport class CallStatusComponent extends LitElement {\n  static styles = css`\n    :host {\n      /* CSS Custom Properties for theming */\n      --sw-color-primary: #044cf6;\n      --sw-color-success: #10b981;\n      --sw-color-warning: #f59e0b;\n      --sw-color-danger: #ef4444;\n      --sw-color-text: #1f2937;\n      --sw-color-text-muted: #6b7280;\n      --sw-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      --sw-font-size-sm: 14px;\n      --sw-font-size-base: 16px;\n      --sw-font-size-lg: 18px;\n      --sw-space-1: 4px;\n      --sw-space-2: 8px;\n      --sw-space-3: 12px;\n      --sw-border-radius: 8px;\n\n      display: inline-flex;\n      align-items: center;\n      gap: var(--sw-space-2);\n      font-family: var(--sw-font-family);\n      font-size: var(--sw-font-size-base);\n    }\n\n    /* Dark mode support */\n    :host([data-theme='dark']) {\n      --sw-color-text: #f9fafb;\n      --sw-color-text-muted: #9ca3af;\n    }\n\n    @media (prefers-color-scheme: dark) {\n      :host(:not([data-theme='light'])) {\n        --sw-color-text: #f9fafb;\n        --sw-color-text-muted: #9ca3af;\n      }\n    }\n\n    .container {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--sw-space-2);\n      padding: var(--sw-space-2) var(--sw-space-3);\n      border-radius: var(--sw-border-radius);\n      color: var(--sw-color-text);\n    }\n\n    .status-indicator {\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n      flex-shrink: 0;\n    }\n\n    .status-indicator.new {\n      background-color: var(--sw-color-text-muted);\n    }\n\n    .status-indicator.connecting,\n    .status-indicator.ringing {\n      background-color: var(--sw-color-warning);\n      animation: pulse 1.5s ease-in-out infinite;\n    }\n\n    .status-indicator.connected {\n      background-color: var(--sw-color-success);\n    }\n\n    .status-indicator.disconnecting {\n      background-color: var(--sw-color-danger);\n      animation: pulse 1s ease-in-out infinite;\n    }\n\n    .status-indicator.trying {\n      background-color: var(--sw-color-warning);\n      animation: pulse 1.5s ease-in-out infinite;\n    }\n\n    .status-indicator.disconnected,\n    .status-indicator.failed {\n      background-color: var(--sw-color-danger);\n    }\n\n    .status-indicator.destroyed {\n      background-color: var(--sw-color-text-muted);\n    }\n\n    @keyframes pulse {\n      0%,\n      100% {\n        opacity: 1;\n        transform: scale(1);\n      }\n      50% {\n        opacity: 0.5;\n        transform: scale(1.1);\n      }\n    }\n\n    .status-text {\n      font-weight: 500;\n      white-space: nowrap;\n    }\n\n    .status-text.trying,\n    .status-text.connecting,\n    .status-text.ringing {\n      color: var(--sw-color-warning);\n    }\n\n    .status-text.disconnecting {\n      color: var(--sw-color-danger);\n    }\n\n    .status-text.connected {\n      color: var(--sw-color-success);\n    }\n\n    .status-text.disconnected,\n    .status-text.failed {\n      color: var(--sw-color-danger);\n    }\n\n    .status-text.new,\n    .status-text.destroyed {\n      color: var(--sw-color-text-muted);\n    }\n\n    .duration {\n      font-variant-numeric: tabular-nums;\n      color: var(--sw-color-text-muted);\n      font-size: var(--sw-font-size-sm);\n    }\n  `;\n\n  /**\n   * Call object with status$ observable\n   */\n  @property({ attribute: false })\n  call: CallStatusCall | null = null;\n\n  /**\n   * Call from context (if nested in sw-call-media)\n   */\n  @consume({ context: callContext, subscribe: true })\n  @state()\n  private contextCall?: CallStatusCall;\n\n  /**\n   * Current call status\n   */\n  @state()\n  private status: CallStatus = 'new';\n\n  /**\n   * Call start time for duration calculation\n   */\n  @state()\n  private callStartTime: number | null = null;\n\n  /**\n   * Formatted duration string\n   */\n  @state()\n  private duration: string = '0:00';\n\n  /**\n   * RxJS subscriptions for cleanup\n   */\n  private subscriptions: Subscription[] = [];\n\n  /**\n   * Duration timer interval\n   */\n  private durationInterval: number | null = null;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.subscribeToCall();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.cleanup();\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('call') || changedProperties.has('contextCall')) {\n      this.cleanup();\n      this.subscribeToCall();\n    }\n  }\n\n  private get activeCall(): CallStatusCall | null {\n    return this.call || this.contextCall || null;\n  }\n\n  private subscribeToCall() {\n    const call = this.activeCall;\n    if (!call?.status$) return;\n\n    const statusSub = call.status$.subscribe((status) => {\n      const prevStatus = this.status;\n      this.status = status;\n\n      // Start duration timer when connected\n      if (status === 'connected' && prevStatus !== 'connected') {\n        this.startDurationTimer();\n      } else if (status !== 'connected') {\n        this.stopDurationTimer();\n      }\n    });\n\n    this.subscriptions.push(statusSub);\n  }\n\n  private startDurationTimer() {\n    this.callStartTime = Date.now();\n    this.duration = '0:00';\n\n    this.durationInterval = window.setInterval(() => {\n      if (this.callStartTime) {\n        const elapsed = Math.floor((Date.now() - this.callStartTime) / 1000);\n        this.duration = this.formatDuration(elapsed);\n      }\n    }, 1000);\n  }\n\n  private stopDurationTimer() {\n    if (this.durationInterval) {\n      clearInterval(this.durationInterval);\n      this.durationInterval = null;\n    }\n    this.callStartTime = null;\n    this.duration = '0:00';\n  }\n\n  private formatDuration(seconds: number): string {\n    const hours = Math.floor(seconds / 3600);\n    const minutes = Math.floor((seconds % 3600) / 60);\n    const secs = seconds % 60;\n\n    if (hours > 0) {\n      return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;\n    }\n    return `${minutes}:${secs.toString().padStart(2, '0')}`;\n  }\n\n  private cleanup() {\n    this.subscriptions.forEach((sub) => sub.unsubscribe());\n    this.subscriptions = [];\n    this.stopDurationTimer();\n  }\n\n  private getStatusText(): string {\n    switch (this.status) {\n      case 'new':\n        return 'Ready';\n      case 'trying':\n        return 'Trying...';\n      case 'connecting':\n        return 'Connecting...';\n      case 'ringing':\n        return 'Ringing...';\n      case 'connected':\n        return 'Connected';\n      case 'recovering':\n        return 'Reconnecting...';\n      case 'disconnecting':\n        return 'Disconnecting...';\n      case 'disconnected':\n        return 'Disconnected';\n      case 'failed':\n        return 'Failed';\n      case 'destroyed':\n        return 'Ended';\n      default: {\n        const _exhaustive: never = this.status;\n        return String(_exhaustive);\n      }\n    }\n  }\n\n  render() {\n    const statusText = this.getStatusText();\n    const showDuration = this.status === 'connected';\n\n    return html`\n      <div class=\"container\" part=\"container\">\n        <span class=\"status-indicator ${this.status}\" aria-hidden=\"true\"></span>\n        <span\n          class=\"status-text ${this.status}\"\n          part=\"status-text\"\n          role=\"status\"\n          aria-live=\"polite\"\n        >\n          ${statusText}\n        </span>\n        ${showDuration\n          ? html`<span class=\"duration\" part=\"duration\">${this.duration}</span>`\n          : null}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-call-status': CallStatusComponent;\n  }\n}\n"],"names":["CallStatusComponent","LitElement","changedProperties","call","statusSub","status","prevStatus","elapsed","seconds","hours","minutes","secs","sub","_exhaustive","statusText","showDuration","html","css","__decorateClass","property","consume","callContext","state","customElement"],"mappings":"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"}

package/dist/components/click-to-call.d.ts

@@ -0,0 +1,151 @@
+/**
+ * Click to Call Component
+ *
+ * A single button widget to initiate calls to a preconfigured destination.
+ * Shows minimal UI with call status, duration, and basic controls.
+ *
+ * @example
+ * ```html
+ * <sw-click-to-call
+ *   destination="sip:support@example.com"
+ *   .client=${signalWire}
+ *   label="Call Support"
+ * ></sw-click-to-call>
+ * ```
+ *
+ * @fires sw-dial - Fired when a call is initiated. Detail: `{ destination: string }`
+ * @fires sw-hangup - Fired when the hangup button is clicked.
+ * @fires sw-mute-toggle - Fired when the mute button is toggled. Detail: `{ muted: boolean }`
+ *
+ * @cssprop [--sw-color-primary=#044cf6] - Primary brand color
+ * @cssprop [--sw-color-primary-hover=#0339c4] - Primary color on hover
+ * @cssprop [--sw-color-success=#10b981] - Success/positive color
+ * @cssprop [--sw-color-success-hover=#0ea472] - Success color on hover
+ * @cssprop [--sw-color-danger=#ef4444] - Danger/destructive color
+ * @cssprop [--sw-color-danger-hover=#dc2626] - Danger color on hover
+ * @cssprop [--sw-color-warning=#f59e0b] - Warning color
+ * @cssprop [--sw-color-text=#1f2937] - Primary text color
+ * @cssprop [--sw-color-text-muted=#6b7280] - Secondary/muted text color
+ * @cssprop [--sw-color-text-inverse=#ffffff] - Inverse text color for buttons
+ * @cssprop [--sw-color-background=#ffffff] - Component background color
+ * @cssprop [--sw-color-background-hover=#f3f4f6] - Background color on hover
+ * @cssprop [--sw-color-border=#e5e7eb] - Border color
+ * @cssprop [--sw-font-family=-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif] - Font family
+ * @cssprop [--sw-font-size-sm=12px] - Small font size
+ * @cssprop [--sw-font-size-base=14px] - Base font size
+ * @cssprop [--sw-font-size-lg=16px] - Large font size
+ * @cssprop [--sw-space-1=4px] - Smallest spacing unit
+ * @cssprop [--sw-space-2=8px] - Small spacing unit
+ * @cssprop [--sw-space-3=12px] - Medium spacing unit
+ * @cssprop [--sw-space-4=16px] - Large spacing unit
+ * @cssprop [--sw-border-radius=8px] - Border radius for containers
+ * @cssprop [--sw-border-radius-full=9999px] - Fully rounded border radius for circular buttons
+ */
+import { LitElement } from 'lit';
+import type { Observable } from 'rxjs';
+/**
+ * Call status type
+ */
+export type ClickToCallStatus = 'idle' | 'connecting' | 'connected' | 'disconnecting' | 'error';
+/**
+ * Self participant interface for click-to-call component
+ */
+export interface ClickToCallSelf {
+    audioMuted$: Observable<boolean | undefined>;
+    mute(): Promise<void>;
+    unmute(): Promise<void>;
+}
+/**
+ * Call interface for click-to-call component
+ */
+export interface ClickToCallCall {
+    status$: Observable<string>;
+    hangup(): Promise<void>;
+    self$?: Observable<ClickToCallSelf>;
+    self?: ClickToCallSelf;
+}
+/**
+ * Client interface for click-to-call component
+ */
+export interface ClickToCallClient {
+    dial(destination: string, options?: {
+        audio?: boolean;
+        video?: boolean;
+    }): Promise<ClickToCallCall>;
+}
+export declare class ClickToCallComponent extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Client for initiating calls (SignalWire)
+     */
+    client: ClickToCallClient | null;
+    /**
+     * Destination address to call
+     */
+    destination: string;
+    /**
+     * Button label when idle
+     */
+    label: string;
+    /**
+     * Audio-only mode (no video)
+     */
+    audioOnly: boolean;
+    /**
+     * Current call status
+     */
+    private status;
+    /**
+     * Current call object
+     */
+    private call;
+    /**
+     * Is audio muted
+     */
+    private audioMuted;
+    /**
+     * Self participant reference for mute/unmute operations
+     */
+    private selfParticipant;
+    /**
+     * Call duration in seconds
+     */
+    private callDuration;
+    /**
+     * Error message
+     */
+    private errorMessage;
+    /**
+     * RxJS subscriptions for cleanup
+     */
+    private subscriptions;
+    /**
+     * Duration timer interval
+     */
+    private durationInterval;
+    /**
+     * Call start time
+     */
+    private callStartTime;
+    disconnectedCallback(): void;
+    private initiateCall;
+    private subscribeToCall;
+    private startDurationTimer;
+    private stopDurationTimer;
+    private formatDuration;
+    private handleCallEnded;
+    private toggleMute;
+    private hangup;
+    private cleanup;
+    private renderIdleState;
+    private renderConnectingState;
+    private renderConnectedState;
+    private renderErrorState;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sw-click-to-call': ClickToCallComponent;
+    }
+}
+//# sourceMappingURL=click-to-call.d.ts.map

package/dist/components/click-to-call.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"click-to-call.d.ts","sourceRoot":"","sources":["../../src/components/click-to-call.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAEvC;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,YAAY,GAAG,WAAW,GAAG,eAAe,GAAG,OAAO,CAAC;AAEhG;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE,UAAU,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IAC7C,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACtB,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC5B,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACxB,KAAK,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,CACF,WAAW,EAAE,MAAM,EACnB,OAAO,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE,GAC7C,OAAO,CAAC,eAAe,CAAC,CAAC;CAC7B;AAED,qBACa,oBAAqB,SAAQ,UAAU;IAClD,MAAM,CAAC,MAAM,0BA+MX;IAEF;;OAEG;IAEH,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAQ;IAExC;;OAEG;IAEH,WAAW,EAAE,MAAM,CAAM;IAEzB;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAU;IAEvB;;OAEG;IAEH,SAAS,EAAE,OAAO,CAAQ;IAE1B;;OAEG;IAEH,OAAO,CAAC,MAAM,CAA6B;IAE3C;;OAEG;IAEH,OAAO,CAAC,IAAI,CAAgC;IAE5C;;OAEG;IAEH,OAAO,CAAC,UAAU,CAAkB;IAEpC;;OAEG;IACH,OAAO,CAAC,eAAe,CAAgC;IAEvD;;OAEG;IAEH,OAAO,CAAC,YAAY,CAAa;IAEjC;;OAEG;IAEH,OAAO,CAAC,YAAY,CAAc;IAElC;;OAEG;IACH,OAAO,CAAC,aAAa,CAAsB;IAE3C;;OAEG;IACH,OAAO,CAAC,gBAAgB,CAAuB;IAE/C;;OAEG;IACH,OAAO,CAAC,aAAa,CAAuB;IAE5C,oBAAoB;YAKN,YAAY;IAkC1B,OAAO,CAAC,eAAe;IAgCvB,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,eAAe;YAgBT,UAAU;YAsBV,MAAM;IAYpB,OAAO,CAAC,OAAO;IAMf,OAAO,CAAC,eAAe;IAmBvB,OAAO,CAAC,qBAAqB;IAa7B,OAAO,CAAC,oBAAoB;IAiD5B,OAAO,CAAC,gBAAgB;IASxB,MAAM;CAeP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,oBAAoB,CAAC;KAC1C;CACF"}