@edvak99/voice-receptionist-widget 1.1.26 → 1.1.29

package/fesm2022/edvak99-voice-receptionist-widget-live-calls-page.component-tJU0GeMR.mjs

@@ -0,0 +1,437 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, EventEmitter, signal, Output, Input, ChangeDetectionStrategy, Component, computed, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { A as AiReceptionistApiService, T as ToastService, j as toE164Phone, M as ModalComponent, f as EdButtonComponent, g as EdSkeletonComponent, L as LiveCallsListService, a as AgentOnlineService, i as isUnknownCaller, c as callerMetaLine, b as ageFromDob, E as EdAvatarComponent, I as IconComponent } from './edvak99-voice-receptionist-widget-edvak99-voice-receptionist-widget-DOYlRven.mjs';
+import { s as sentimentIconSrc, a as sentimentLabel, E as EdsElapsedPipe } from './edvak99-voice-receptionist-widget-eds-elapsed.pipe-Dra7e7xN.mjs';
+import { DatePipe } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { Subject, debounceTime, distinctUntilChanged, switchMap, of, catchError } from 'rxjs';
+import { r as requiredFieldLabel, a as renderLiveOpeningPreview, f as formatOpeningTime, b as formatOpeningDate, p as purposeShowsCustomScript, i as isCustomScriptRequired, c as isPurposeFormValid } from './edvak99-voice-receptionist-widget-outbound-purpose.util-Bdh4QfFe.mjs';
+import { E as EdsSearchFieldComponent } from './edvak99-voice-receptionist-widget-eds-search-field.component-Bm4ay5d_.mjs';
+import { S as SmartTooltipDirective } from './edvak99-voice-receptionist-widget-smart-tooltip.directive-BSyOMZd4.mjs';
+import { E as EdsPulseDotComponent } from './edvak99-voice-receptionist-widget-eds-pulse-dot.component-B8yxY-7p.mjs';
+
+const E164_PATTERN = /^\+[1-9]\d{6,14}$/;
+class OutboundDialModalComponent {
+    constructor() {
+        this.api = inject(AiReceptionistApiService);
+        this.toast = inject(ToastService);
+        this.destroyRef = inject(DestroyRef);
+        this.open = false;
+        this.closed = new EventEmitter();
+        this.dialed = new EventEmitter();
+        this.purposes = signal([]);
+        this.loading = signal(true);
+        this.formSkeletonRows = [0, 1, 2, 3];
+        this.appointmentSkeletonRows = [0, 1, 2];
+        this.submitting = signal(false);
+        this.serverError = signal(null);
+        this.patientHits = signal([]);
+        this.searchingPatients = signal(false);
+        this.selectedPatient = signal(null);
+        this.appointments = signal([]);
+        this.loadingAppointments = signal(false);
+        this.selectedAppointmentId = signal(null);
+        this.showManualEntry = signal(false);
+        this.practiceName = signal('');
+        /** Bumps OnPush re-render when plain ngModel fields change. */
+        this.formEpoch = signal(0);
+        this.patientQuery = signal('');
+        this.phone = '';
+        this.name = '';
+        this.purposeId = '';
+        this.appointmentDate = '';
+        this.appointmentTime = '';
+        this.providerName = '';
+        this.customScript = '';
+        this.requiredFieldLabel = requiredFieldLabel;
+        this.search$ = new Subject();
+        this.search$
+            .pipe(debounceTime(280), distinctUntilChanged(), switchMap((q) => {
+            const query = q.trim();
+            if (query.length < 2) {
+                this.searchingPatients.set(false);
+                this.patientHits.set([]);
+                return of([]);
+            }
+            this.searchingPatients.set(true);
+            return this.api.searchPatientsForOutbound(query, 10).pipe(catchError(() => of([])));
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe((hits) => {
+            this.searchingPatients.set(false);
+            if (!this.selectedPatient()) {
+                this.patientHits.set(hits);
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes['open']?.currentValue) {
+            this.resetForm();
+            this.loadPurposes();
+            this.loadPracticeName();
+        }
+    }
+    get selectedPurpose() {
+        return this.purposes().find((p) => p.purposeId === this.purposeId) ?? null;
+    }
+    get selectedAppointment() {
+        const id = this.selectedAppointmentId();
+        if (!id)
+            return null;
+        return this.appointments().find((a) => a.appointmentId === id) ?? null;
+    }
+    get previewText() {
+        this.formEpoch(); // depend for CD when form fields change
+        const p = this.selectedPurpose;
+        if (!p)
+            return '—';
+        const appt = this.selectedAppointment;
+        const dateSource = appt?.startTime || this.appointmentDate;
+        const timeSource = appt?.startTime || this.appointmentTime;
+        return renderLiveOpeningPreview(p, {
+            patientName: this.name.trim() || this.selectedPatient()?.fullName || '',
+            appointmentDate: formatOpeningDate(dateSource),
+            appointmentTime: formatOpeningTime(this.appointmentTime || timeSource, appt?.startTime),
+            providerName: this.providerName.trim() || appt?.providerName || '',
+            practiceName: this.practiceName(),
+            locationName: appt?.locationName || '',
+            visitType: appt?.visitType || '',
+            customScript: this.customScript.trim(),
+        });
+    }
+    showsField(field) {
+        return this.selectedPurpose?.requiredFields.includes(field) ?? false;
+    }
+    showsCustomScript() {
+        const p = this.selectedPurpose;
+        return p ? purposeShowsCustomScript(p) : false;
+    }
+    customScriptRequired() {
+        const p = this.selectedPurpose;
+        return p ? isCustomScriptRequired(p) : false;
+    }
+    canPlaceCall() {
+        if (!E164_PATTERN.test(this.phone.trim()))
+            return false;
+        return isPurposeFormValid(this.selectedPurpose, {
+            phone: this.phone,
+            name: this.name,
+            appointmentDate: this.appointmentDate,
+            appointmentTime: this.appointmentTime,
+            providerName: this.providerName,
+            customScript: this.customScript,
+        });
+    }
+    touchForm() {
+        this.formEpoch.update((n) => n + 1);
+    }
+    onPatientQueryChange(value) {
+        this.patientQuery.set(value);
+        if (this.selectedPatient())
+            return;
+        this.search$.next(value);
+    }
+    selectPatient(patient) {
+        this.selectedPatient.set(patient);
+        this.patientHits.set([]);
+        this.patientQuery.set(patient.fullName);
+        this.name = patient.fullName;
+        this.phone = toE164Phone(patient.phone) || '';
+        this.showManualEntry.set(!this.phone);
+        this.selectedAppointmentId.set(null);
+        this.clearApptDerivedFields();
+        this.touchForm();
+        this.loadAppointments(patient.patientId);
+    }
+    clearPatient() {
+        this.selectedPatient.set(null);
+        this.patientQuery.set('');
+        this.patientHits.set([]);
+        this.appointments.set([]);
+        this.selectedAppointmentId.set(null);
+        this.name = '';
+        this.phone = '';
+        this.clearApptDerivedFields();
+        this.touchForm();
+    }
+    selectAppointment(appt) {
+        this.selectedAppointmentId.set(appt?.appointmentId ?? null);
+        if (!appt) {
+            this.clearApptDerivedFields();
+            this.touchForm();
+            return;
+        }
+        this.applyAppointmentFields(appt);
+        this.preferAppointmentPurpose();
+        this.touchForm();
+    }
+    onPurposeChange() {
+        const appt = this.selectedAppointment;
+        if (appt) {
+            this.applyAppointmentFields(appt);
+        }
+        else {
+            this.clearApptDerivedFields();
+        }
+        this.customScript = '';
+        this.serverError.set(null);
+        this.touchForm();
+    }
+    close() {
+        this.closed.emit();
+    }
+    submit() {
+        this.serverError.set(null);
+        if (!this.canPlaceCall() || !this.selectedPurpose)
+            return;
+        this.submitting.set(true);
+        const patient = this.selectedPatient();
+        const apptId = this.selectedAppointmentId();
+        const body = {
+            phone: this.phone.trim(),
+            name: this.name.trim(),
+            purpose: this.purposeId,
+            ...(this.appointmentDate ? { appointmentDate: this.appointmentDate } : {}),
+            ...(this.appointmentTime ? { appointmentTime: this.appointmentTime } : {}),
+            ...(this.providerName ? { providerName: this.providerName.trim() } : {}),
+            ...(this.customScript ? { customScript: this.customScript.trim() } : {}),
+            ...(patient?.patientId ? { patientId: patient.patientId } : {}),
+            ...(apptId ? { appointmentId: apptId } : {}),
+        };
+        this.api.placeOutboundCall(body).subscribe({
+            next: (res) => {
+                this.submitting.set(false);
+                const msg = res.message ?? 'Outbound call started.';
+                this.toast.show(msg, 'success', 5000);
+                this.dialed.emit();
+                this.close();
+            },
+            error: (err) => {
+                this.submitting.set(false);
+                const msg = err?.message ?? 'Failed to place outbound call.';
+                this.serverError.set(msg);
+                this.toast.show(msg, 'error', 5000);
+            },
+        });
+    }
+    preferAppointmentPurpose() {
+        const current = this.selectedPurpose;
+        const needsAppt = !!current &&
+            (current.requiredFields.includes('appointmentDate') ||
+                current.requiredFields.includes('appointmentTime'));
+        if (needsAppt)
+            return;
+        const confirm = this.purposes().find((p) => p.isActive &&
+            p.requiredFields.includes('appointmentDate') &&
+            p.requiredFields.includes('appointmentTime')) ??
+            this.purposes().find((p) => p.isActive && /confirm/i.test(p.label + p.purposeId));
+        if (confirm) {
+            this.purposeId = confirm.purposeId;
+        }
+    }
+    applyAppointmentFields(appt) {
+        const start = appt.startTime ? new Date(appt.startTime) : null;
+        if (start && !Number.isNaN(start.getTime())) {
+            const y = start.getFullYear();
+            const m = String(start.getMonth() + 1).padStart(2, '0');
+            const d = String(start.getDate()).padStart(2, '0');
+            const hh = String(start.getHours()).padStart(2, '0');
+            const mm = String(start.getMinutes()).padStart(2, '0');
+            this.appointmentDate = `${y}-${m}-${d}`;
+            this.appointmentTime = `${hh}:${mm}`;
+        }
+        if (appt.providerName) {
+            this.providerName = appt.providerName;
+        }
+    }
+    clearApptDerivedFields() {
+        this.appointmentDate = '';
+        this.appointmentTime = '';
+        this.providerName = '';
+    }
+    loadAppointments(patientId) {
+        this.loadingAppointments.set(true);
+        this.appointments.set([]);
+        this.api.listPatientAppointmentsForOutbound(patientId, 20).subscribe({
+            next: (rows) => {
+                this.appointments.set(rows);
+                this.loadingAppointments.set(false);
+                if (rows.length === 1) {
+                    this.selectAppointment(rows[0]);
+                }
+            },
+            error: () => {
+                this.loadingAppointments.set(false);
+                this.appointments.set([]);
+            },
+        });
+    }
+    loadPracticeName() {
+        this.api.getSettings().subscribe({
+            next: ({ data }) => {
+                const name = String(data.general?.['practiceName'] ?? '').trim();
+                this.practiceName.set(name || 'our office');
+            },
+            error: () => this.practiceName.set('our office'),
+        });
+    }
+    resetForm() {
+        this.patientQuery.set('');
+        this.phone = '';
+        this.name = '';
+        this.purposeId = '';
+        this.appointmentDate = '';
+        this.appointmentTime = '';
+        this.providerName = '';
+        this.customScript = '';
+        this.patientHits.set([]);
+        this.selectedPatient.set(null);
+        this.appointments.set([]);
+        this.selectedAppointmentId.set(null);
+        this.searchingPatients.set(false);
+        this.loadingAppointments.set(false);
+        this.showManualEntry.set(false);
+        this.serverError.set(null);
+        this.submitting.set(false);
+        this.formEpoch.set(0);
+    }
+    loadPurposes() {
+        this.loading.set(true);
+        this.api.getOutboundPurposes(false).subscribe({
+            next: ({ purposes }) => {
+                this.purposes.set(purposes);
+                if (purposes.length && !this.purposeId) {
+                    this.purposeId = purposes[0].purposeId;
+                }
+                this.loading.set(false);
+            },
+            error: () => {
+                this.loading.set(false);
+                this.serverError.set('Failed to load outbound purposes.');
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: OutboundDialModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: OutboundDialModalComponent, isStandalone: true, selector: "eds-outbound-dial-modal", inputs: { open: "open" }, outputs: { closed: "closed", dialed: "dialed" }, usesOnChanges: true, ngImport: i0, template: "@if (open) {\r\n  <app-modal\r\n    title=\"Outbound call\"\r\n    subtitle=\"Search a patient, pick an appointment, then dial\"\r\n    maxWidth=\"600px\"\r\n    (closed)=\"close()\"\r\n  >\r\n    @if (!loading()) {\r\n      <div modalStickyTop class=\"border-b border-base bg-white px-6 pb-3 pt-5\">\r\n        <div class=\"dial-form__field dial-form__typeahead relative\">\r\n          <label><span required>Patient</span></label>\r\n\r\n          @if (selectedPatient(); as patient) {\r\n            <div class=\"flex items-center justify-between gap-3 rounded-lg border border-base bg-lighter px-3 py-3\">\r\n              <div class=\"flex min-w-0 flex-col gap-1\">\r\n                <strong>{{ patient.fullName }}</strong>\r\n                <span class=\"dial-form__chip-meta text-xs\">\r\n                  @if (patient.phone) {\r\n                    {{ patient.phone }}\r\n                  }\r\n                  @if (patient.dob) {\r\n                    \u00B7 DOB {{ patient.dob }}\r\n                  }\r\n                </span>\r\n              </div>\r\n              <button type=\"button\" class=\"dial-form__chip-clear shrink-0 cursor-pointer border-none bg-transparent p-1 text-[13px] font-[inherit]\" (click)=\"clearPatient()\">\r\n                Change\r\n              </button>\r\n            </div>\r\n          } @else {\r\n            <eds-search-field\r\n              inputClass=\"form-input\"\r\n              [value]=\"patientQuery()\"\r\n              (valueChange)=\"onPatientQueryChange($event)\"\r\n              placeholder=\"Search by name or phone\"\r\n            />\r\n            @if (searchingPatients()) {\r\n              <span class=\"dial-form__hint text-xs\">Searching\u2026</span>\r\n            }\r\n            @if (patientHits().length) {\r\n              <ul class=\"dial-form__hits absolute left-0 right-0 top-[calc(100%+4px)] z-[5] max-h-[220px] overflow-hidden overflow-y-auto rounded-lg border\" role=\"listbox\">\r\n                @for (hit of patientHits(); track hit.patientId) {\r\n                  <li>\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"dial-form__hit flex w-full cursor-pointer flex-col items-start gap-1 border-none border-b px-3 py-3 text-left font-[inherit] last:border-b-0\"\r\n                      role=\"option\"\r\n                      (click)=\"selectPatient(hit)\"\r\n                    >\r\n                      <span class=\"font-semibold\">{{ hit.fullName }}</span>\r\n                      <span class=\"dial-form__hit-meta text-xs\">\r\n                        {{ hit.phone || 'No phone' }}\r\n                        @if (hit.dob) {\r\n                          \u00B7 {{ hit.dob }}\r\n                        }\r\n                      </span>\r\n                    </button>\r\n                  </li>\r\n                }\r\n              </ul>\r\n            }\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    @if (loading()) {\r\n      <div class=\"flex flex-col gap-3\" aria-busy=\"true\">\r\n        @for (_ of formSkeletonRows; track _) {\r\n          <div class=\"grid gap-2xs\">\r\n            <ed-skeleton class=\"h-3 w-20\"></ed-skeleton>\r\n            <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\r\n          </div>\r\n        }\r\n      </div>\r\n    } @else {\r\n      <form\r\n        id=\"outbound-dial-form\"\r\n        class=\"flex flex-col gap-3\"\r\n        (ngSubmit)=\"submit()\"\r\n        novalidate\r\n        autocomplete=\"off\"\r\n      >\r\n        @if (selectedPatient()) {\r\n          <div class=\"mb-sm\">\r\n            <label>Appointment</label>\r\n            @if (loadingAppointments()) {\r\n              <ul class=\"max-h-[220px] overflow-hidden overflow-y-auto rounded-lg border\" aria-busy=\"true\">\r\n                @for (_ of appointmentSkeletonRows; track _) {\r\n                  <li class=\"flex items-start gap-3 border-b px-3 py-3 last:border-b-0\">\r\n                    <ed-skeleton class=\"mt-0.5 h-4 w-4 !rounded-full\"></ed-skeleton>\r\n                    <div class=\"grid flex-1 gap-2xs\">\r\n                      <ed-skeleton class=\"h-3 w-40\"></ed-skeleton>\r\n                      <ed-skeleton class=\"h-3 w-56\"></ed-skeleton>\r\n                    </div>\r\n                  </li>\r\n                }\r\n              </ul>\r\n            } @else if (!appointments().length) {\r\n              <span class=\"dial-form__hint text-xs\">No upcoming appointments \u2014 dial without one, or enter details below.</span>\r\n            } @else {\r\n              <ul class=\"max-h-[220px] overflow-hidden overflow-y-auto rounded-lg border\">\r\n                <li>\r\n                  <label class=\"dial-form__appt flex cursor-pointer items-start gap-3 border-b px-3 py-3 last:border-b-0\">\r\n                    <input\r\n                      type=\"radio\"\r\n                      name=\"appointmentId\"\r\n                      [checked]=\"!selectedAppointmentId()\"\r\n                      (change)=\"selectAppointment(null)\"\r\n                      autocomplete=\"off\"\r\n                     />\r\n                    <span>No appointment (purpose-only)</span>\r\n                  </label>\r\n                </li>\r\n                @for (appt of appointments(); track appt.appointmentId) {\r\n                  <li>\r\n                    <label class=\"dial-form__appt flex cursor-pointer items-start gap-3 border-b px-3 py-3 last:border-b-0\">\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"appointmentId\"\r\n                        [checked]=\"selectedAppointmentId() === appt.appointmentId\"\r\n                        (change)=\"selectAppointment(appt)\"\r\n                        autocomplete=\"off\"\r\n                       />\r\n                      <span class=\"flex flex-col gap-1\">\r\n                        <strong>\r\n                          {{ appt.startTime ? (appt.startTime | date: 'medium') : 'TBD' }}\r\n                        </strong>\r\n                        <span class=\"dial-form__hit-meta text-xs\">\r\n                          {{ appt.providerName || 'Provider TBD' }}\r\n                          @if (appt.locationName) {\r\n                            \u00B7 {{ appt.locationName }}\r\n                          }\r\n                          @if (appt.visitType) {\r\n                            \u00B7 {{ appt.visitType }}\r\n                          }\r\n                          @if (appt.status) {\r\n                            \u00B7 {{ appt.status }}\r\n                          }\r\n                        </span>\r\n                      </span>\r\n                    </label>\r\n                  </li>\r\n                }\r\n              </ul>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"dial-form__toggle self-start cursor-pointer border-none bg-transparent p-0 text-[13px] font-[inherit]\"\r\n          (click)=\"showManualEntry.set(!showManualEntry())\"\r\n        >\r\n          {{ showManualEntry() ? 'Hide' : 'Show' }} phone / name\r\n          @if (!selectedPatient()) {\r\n            (required if no patient selected)\r\n          }\r\n        </button>\r\n\r\n        @if (showManualEntry() || !selectedPatient()) {\r\n          <div class=\"mb-sm\">\r\n            <label><span required>Phone</span></label>\r\n            <input\r\n              class=\"form-input\"\r\n              type=\"tel\"\r\n              [(ngModel)]=\"phone\"\r\n              (ngModelChange)=\"touchForm()\"\r\n              name=\"phone\"\r\n              placeholder=\"+14155550100\"\r\n              autocomplete=\"off\"\r\n              required\r\n            />\r\n            <span class=\"dial-form__hint text-xs\">E.164 format, e.g. +14155550100</span>\r\n          </div>\r\n\r\n          <div class=\"mb-sm\">\r\n            <label><span required>Patient name</span></label>\r\n            <input\r\n              class=\"form-input\"\r\n              type=\"text\"\r\n              [(ngModel)]=\"name\"\r\n              (ngModelChange)=\"touchForm()\"\r\n              name=\"name\"\r\n              placeholder=\"Maria Garcia\"\r\n              required\r\n              autocomplete=\"off\"\r\n            />\r\n          </div>\r\n        }\r\n\r\n        <div class=\"mb-sm\">\r\n          <label><span required>Purpose</span></label>\r\n          <select\r\n            class=\"form-select\"\r\n            [(ngModel)]=\"purposeId\"\r\n            name=\"purposeId\"\r\n            (ngModelChange)=\"onPurposeChange()\"\r\n            required\r\n            autocomplete=\"off\"\r\n          >\r\n            @for (p of purposes(); track p.purposeId) {\r\n              <option [value]=\"p.purposeId\">{{ p.label }}</option>\r\n            }\r\n          </select>\r\n        </div>\r\n\r\n        @if (showsField('appointmentDate') && !selectedAppointmentId()) {\r\n          <div class=\"mb-sm\">\r\n            <label><span required>{{ requiredFieldLabel('appointmentDate') }}</span></label>\r\n            <input\r\n              class=\"form-input\"\r\n              type=\"date\"\r\n              [(ngModel)]=\"appointmentDate\"\r\n              (ngModelChange)=\"touchForm()\"\r\n              name=\"appointmentDate\"\r\n              placeholder=\"Appointment Date\"\r\n              required\r\n              autocomplete=\"off\"\r\n            />\r\n          </div>\r\n        }\r\n\r\n        @if (showsField('appointmentTime') && !selectedAppointmentId()) {\r\n          <div class=\"mb-sm\">\r\n            <label><span required>{{ requiredFieldLabel('appointmentTime') }}</span></label>\r\n            <input\r\n              class=\"form-input\"\r\n              type=\"time\"\r\n              [(ngModel)]=\"appointmentTime\"\r\n              (ngModelChange)=\"touchForm()\"\r\n              name=\"appointmentTime\"\r\n              required\r\n              autocomplete=\"off\"\r\n            />\r\n          </div>\r\n        }\r\n\r\n        @if (showsField('providerName') && !selectedAppointmentId()) {\r\n          <div class=\"mb-sm\">\r\n            <label><span required>{{ requiredFieldLabel('providerName') }}</span></label>\r\n            <input\r\n              class=\"form-input\"\r\n              type=\"text\"\r\n              [(ngModel)]=\"providerName\"\r\n              (ngModelChange)=\"touchForm()\"\r\n              name=\"providerName\"\r\n              placeholder=\"Dr. Patel\"\r\n              required\r\n              autocomplete=\"off\"\r\n            />\r\n          </div>\r\n        }\r\n\r\n        @if (selectedAppointmentId() && (showsField('appointmentDate') || showsField('appointmentTime') || showsField('providerName'))) {\r\n          <p class=\"dial-form__hint text-xs\">\r\n            Date, time, and provider are taken from the selected appointment\r\n            @if (appointmentDate || appointmentTime || providerName) {\r\n              ({{ appointmentDate }}\r\n              @if (appointmentTime) {\r\n                {{ appointmentTime }}\r\n              }\r\n              @if (providerName) {\r\n                \u00B7 {{ providerName }}\r\n              })\r\n            }.\r\n          </p>\r\n        }\r\n\r\n        @if (showsCustomScript()) {\r\n          <div class=\"mb-sm\">\r\n            <label>\r\n              Custom script\r\n              @if (customScriptRequired()) {\r\n                <span required> </span>\r\n              }\r\n            </label>\r\n            <textarea\r\n              class=\"form-textarea\"\r\n              rows=\"4\"\r\n              [(ngModel)]=\"customScript\"\r\n              (ngModelChange)=\"touchForm()\"\r\n              name=\"customScript\"\r\n              [required]=\"customScriptRequired()\"\r\n              placeholder=\"What should the agent say or do?\"\r\n              autocomplete=\"off\"\r\n            ></textarea>\r\n          </div>\r\n        }\r\n      </form>\r\n    }\r\n\r\n    @if (!loading()) {\r\n      <div modalFooter class=\"border-t border-base bg-white px-6 py-4\">\r\n        <section class=\"dial-form__preview rounded-lg border border-base bg-white p-3 shadow-sm\">\r\n          <h3 class=\"fs-sm font-semibold text-light\">Opening preview</h3>\r\n          <p class=\"dial-form__preview-text mt-2 whitespace-pre-wrap text-sm leading-normal\">{{ previewText }}</p>\r\n          @if (selectedAppointmentId()) {\r\n            <p class=\"dial-form__hint text-xs\">\r\n              Filled from the selected appointment and purpose template. Switch purpose to change the script.\r\n            </p>\r\n          } @else {\r\n            <p class=\"dial-form__hint text-xs\">\r\n              Select an appointment to fill date, time, and provider into this message.\r\n            </p>\r\n          }\r\n        </section>\r\n\r\n        @if (serverError()) {\r\n          <p class=\"mt-3 m-0 text-[13px] text-[#b91c1c]\" role=\"alert\">{{ serverError() }}</p>\r\n        }\r\n\r\n        <footer class=\"mt-3 flex justify-end gap-2\">\r\n          <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"close()\" [disabled]=\"submitting()\">\r\n            Cancel\r\n          </ed-button>\r\n          <ed-button\r\n            type=\"button\"\r\n            variant=\"primary\"\r\n            fill\r\n            size=\"sm\"\r\n            [disabled]=\"submitting() || !canPlaceCall()\"\r\n            (click$)=\"submit()\"\r\n          >\r\n            {{ submitting() ? 'Dialing\u2026' : 'Place call' }}\r\n          </ed-button>\r\n        </footer>\r\n      </div>\r\n    }\r\n  </app-modal>\r\n}\r\n", styles: [".dial-form__hint{color:var(--eds-text-secondary)}.dial-form__chip-clear{color:var(--eds-primary, #2563eb)}.dial-form__chip-meta,.dial-form__hit-meta{color:var(--eds-text-secondary)}.dial-form__hits,.dial-form__appts{list-style:none;margin:0;padding:0;border-color:var(--eds-border-subtle, #e4e4e7)}.dial-form__hits{background:var(--eds-surface, #fff);box-shadow:0 8px 24px #0f172a1f}.dial-form__hit{background:transparent;border-bottom-color:var(--eds-border-subtle, #f1f5f9)}.dial-form__hit:hover{background:var(--eds-surface-muted, #f8fafc)}.dial-form__appt{border-bottom-color:var(--eds-border-subtle, #f1f5f9)}.dial-form__toggle{color:var(--eds-primary, #2563eb)}.dial-form__preview{background:var(--eds-surface-muted, #f8fafc)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ModalComponent, selector: "app-modal", inputs: ["title", "subtitle", "maxWidth"], outputs: ["closed"] }, { kind: "component", type: EdsSearchFieldComponent, selector: "eds-search-field", inputs: ["value", "inputId", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange", "enter"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: EdButtonComponent, selector: "ed-button", inputs: ["variant", "size", "disabled", "ghost", "outline", "subtle", "fill", "loading", "block", "elevated", "shape", "type", "href", "routerLink", "rel", "target", "download", "ariaLabel"], outputs: ["click$"] }, { kind: "component", type: EdSkeletonComponent, selector: "ed-skeleton", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: OutboundDialModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-outbound-dial-modal', imports: [FormsModule, ModalComponent, EdsSearchFieldComponent, DatePipe, EdButtonComponent, EdSkeletonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open) {\r\n  <app-modal\r\n    title=\"Outbound call\"\r\n    subtitle=\"Search a patient, pick an appointment, then dial\"\r\n    maxWidth=\"600px\"\r\n    (closed)=\"close()\"\r\n  >\r\n    @if (!loading()) {\r\n      <div modalStickyTop class=\"border-b border-base bg-white px-6 pb-3 pt-5\">\r\n        <div class=\"dial-form__field dial-form__typeahead relative\">\r\n          <label><span required>Patient</span></label>\r\n\r\n          @if (selectedPatient(); as patient) {\r\n            <div class=\"flex items-center justify-between gap-3 rounded-lg border border-base bg-lighter px-3 py-3\">\r\n              <div class=\"flex min-w-0 flex-col gap-1\">\r\n                <strong>{{ patient.fullName }}</strong>\r\n                <span class=\"dial-form__chip-meta text-xs\">\r\n                  @if (patient.phone) {\r\n                    {{ patient.phone }}\r\n                  }\r\n                  @if (patient.dob) {\r\n                    \u00B7 DOB {{ patient.dob }}\r\n                  }\r\n                </span>\r\n              </div>\r\n              <button type=\"button\" class=\"dial-form__chip-clear shrink-0 cursor-pointer border-none bg-transparent p-1 text-[13px] font-[inherit]\" (click)=\"clearPatient()\">\r\n                Change\r\n              </button>\r\n            </div>\r\n          } @else {\r\n            <eds-search-field\r\n              inputClass=\"form-input\"\r\n              [value]=\"patientQuery()\"\r\n              (valueChange)=\"onPatientQueryChange($event)\"\r\n              placeholder=\"Search by name or phone\"\r\n            />\r\n            @if (searchingPatients()) {\r\n              <span class=\"dial-form__hint text-xs\">Searching\u2026</span>\r\n            }\r\n            @if (patientHits().length) {\r\n              <ul class=\"dial-form__hits absolute left-0 right-0 top-[calc(100%+4px)] z-[5] max-h-[220px] overflow-hidden overflow-y-auto rounded-lg border\" role=\"listbox\">\r\n                @for (hit of patientHits(); track hit.patientId) {\r\n                  <li>\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"dial-form__hit flex w-full cursor-pointer flex-col items-start gap-1 border-none border-b px-3 py-3 text-left font-[inherit] last:border-b-0\"\r\n                      role=\"option\"\r\n                      (click)=\"selectPatient(hit)\"\r\n                    >\r\n                      <span class=\"font-semibold\">{{ hit.fullName }}</span>\r\n                      <span class=\"dial-form__hit-meta text-xs\">\r\n                        {{ hit.phone || 'No phone' }}\r\n                        @if (hit.dob) {\r\n                          \u00B7 {{ hit.dob }}\r\n                        }\r\n                      </span>\r\n                    </button>\r\n                  </li>\r\n                }\r\n              </ul>\r\n            }\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    @if (loading()) {\r\n      <div class=\"flex flex-col gap-3\" aria-busy=\"true\">\r\n        @for (_ of formSkeletonRows; track _) {\r\n          <div class=\"grid gap-2xs\">\r\n            <ed-skeleton class=\"h-3 w-20\"></ed-skeleton>\r\n            <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\r\n          </div>\r\n        }\r\n      </div>\r\n    } @else {\r\n      <form\r\n        id=\"outbound-dial-form\"\r\n        class=\"flex flex-col gap-3\"\r\n        (ngSubmit)=\"submit()\"\r\n        novalidate\r\n        autocomplete=\"off\"\r\n      >\r\n        @if (selectedPatient()) {\r\n          <div class=\"mb-sm\">\r\n            <label>Appointment</label>\r\n            @if (loadingAppointments()) {\r\n              <ul class=\"max-h-[220px] overflow-hidden overflow-y-auto rounded-lg border\" aria-busy=\"true\">\r\n                @for (_ of appointmentSkeletonRows; track _) {\r\n                  <li class=\"flex items-start gap-3 border-b px-3 py-3 last:border-b-0\">\r\n                    <ed-skeleton class=\"mt-0.5 h-4 w-4 !rounded-full\"></ed-skeleton>\r\n                    <div class=\"grid flex-1 gap-2xs\">\r\n                      <ed-skeleton class=\"h-3 w-40\"></ed-skeleton>\r\n                      <ed-skeleton class=\"h-3 w-56\"></ed-skeleton>\r\n                    </div>\r\n                  </li>\r\n                }\r\n              </ul>\r\n            } @else if (!appointments().length) {\r\n              <span class=\"dial-form__hint text-xs\">No upcoming appointments \u2014 dial without one, or enter details below.</span>\r\n            } @else {\r\n              <ul class=\"max-h-[220px] overflow-hidden overflow-y-auto rounded-lg border\">\r\n                <li>\r\n                  <label class=\"dial-form__appt flex cursor-pointer items-start gap-3 border-b px-3 py-3 last:border-b-0\">\r\n                    <input\r\n                      type=\"radio\"\r\n                      name=\"appointmentId\"\r\n                      [checked]=\"!selectedAppointmentId()\"\r\n                      (change)=\"selectAppointment(null)\"\r\n                      autocomplete=\"off\"\r\n                     />\r\n                    <span>No appointment (purpose-only)</span>\r\n                  </label>\r\n                </li>\r\n                @for (appt of appointments(); track appt.appointmentId) {\r\n                  <li>\r\n                    <label class=\"dial-form__appt flex cursor-pointer items-start gap-3 border-b px-3 py-3 last:border-b-0\">\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"appointmentId\"\r\n                        [checked]=\"selectedAppointmentId() === appt.appointmentId\"\r\n                        (change)=\"selectAppointment(appt)\"\r\n                        autocomplete=\"off\"\r\n                       />\r\n                      <span class=\"flex flex-col gap-1\">\r\n                        <strong>\r\n                          {{ appt.startTime ? (appt.startTime | date: 'medium') : 'TBD' }}\r\n                        </strong>\r\n                        <span class=\"dial-form__hit-meta text-xs\">\r\n                          {{ appt.providerName || 'Provider TBD' }}\r\n                          @if (appt.locationName) {\r\n                            \u00B7 {{ appt.locationName }}\r\n                          }\r\n                          @if (appt.visitType) {\r\n                            \u00B7 {{ appt.visitType }}\r\n                          }\r\n                          @if (appt.status) {\r\n                            \u00B7 {{ appt.status }}\r\n                          }\r\n                        </span>\r\n                      </span>\r\n                    </label>\r\n                  </li>\r\n                }\r\n              </ul>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"dial-form__toggle self-start cursor-pointer border-none bg-transparent p-0 text-[13px] font-[inherit]\"\r\n          (click)=\"showManualEntry.set(!showManualEntry())\"\r\n        >\r\n          {{ showManualEntry() ? 'Hide' : 'Show' }} phone / name\r\n          @if (!selectedPatient()) {\r\n            (required if no patient selected)\r\n          }\r\n        </button>\r\n\r\n        @if (showManualEntry() || !selectedPatient()) {\r\n          <div class=\"mb-sm\">\r\n            <label><span required>Phone</span></label>\r\n            <input\r\n              class=\"form-input\"\r\n              type=\"tel\"\r\n              [(ngModel)]=\"phone\"\r\n              (ngModelChange)=\"touchForm()\"\r\n              name=\"phone\"\r\n              placeholder=\"+14155550100\"\r\n              autocomplete=\"off\"\r\n              required\r\n            />\r\n            <span class=\"dial-form__hint text-xs\">E.164 format, e.g. +14155550100</span>\r\n          </div>\r\n\r\n          <div class=\"mb-sm\">\r\n            <label><span required>Patient name</span></label>\r\n            <input\r\n              class=\"form-input\"\r\n              type=\"text\"\r\n              [(ngModel)]=\"name\"\r\n              (ngModelChange)=\"touchForm()\"\r\n              name=\"name\"\r\n              placeholder=\"Maria Garcia\"\r\n              required\r\n              autocomplete=\"off\"\r\n            />\r\n          </div>\r\n        }\r\n\r\n        <div class=\"mb-sm\">\r\n          <label><span required>Purpose</span></label>\r\n          <select\r\n            class=\"form-select\"\r\n            [(ngModel)]=\"purposeId\"\r\n            name=\"purposeId\"\r\n            (ngModelChange)=\"onPurposeChange()\"\r\n            required\r\n            autocomplete=\"off\"\r\n          >\r\n            @for (p of purposes(); track p.purposeId) {\r\n              <option [value]=\"p.purposeId\">{{ p.label }}</option>\r\n            }\r\n          </select>\r\n        </div>\r\n\r\n        @if (showsField('appointmentDate') && !selectedAppointmentId()) {\r\n          <div class=\"mb-sm\">\r\n            <label><span required>{{ requiredFieldLabel('appointmentDate') }}</span></label>\r\n            <input\r\n              class=\"form-input\"\r\n              type=\"date\"\r\n              [(ngModel)]=\"appointmentDate\"\r\n              (ngModelChange)=\"touchForm()\"\r\n              name=\"appointmentDate\"\r\n              placeholder=\"Appointment Date\"\r\n              required\r\n              autocomplete=\"off\"\r\n            />\r\n          </div>\r\n        }\r\n\r\n        @if (showsField('appointmentTime') && !selectedAppointmentId()) {\r\n          <div class=\"mb-sm\">\r\n            <label><span required>{{ requiredFieldLabel('appointmentTime') }}</span></label>\r\n            <input\r\n              class=\"form-input\"\r\n              type=\"time\"\r\n              [(ngModel)]=\"appointmentTime\"\r\n              (ngModelChange)=\"touchForm()\"\r\n              name=\"appointmentTime\"\r\n              required\r\n              autocomplete=\"off\"\r\n            />\r\n          </div>\r\n        }\r\n\r\n        @if (showsField('providerName') && !selectedAppointmentId()) {\r\n          <div class=\"mb-sm\">\r\n            <label><span required>{{ requiredFieldLabel('providerName') }}</span></label>\r\n            <input\r\n              class=\"form-input\"\r\n              type=\"text\"\r\n              [(ngModel)]=\"providerName\"\r\n              (ngModelChange)=\"touchForm()\"\r\n              name=\"providerName\"\r\n              placeholder=\"Dr. Patel\"\r\n              required\r\n              autocomplete=\"off\"\r\n            />\r\n          </div>\r\n        }\r\n\r\n        @if (selectedAppointmentId() && (showsField('appointmentDate') || showsField('appointmentTime') || showsField('providerName'))) {\r\n          <p class=\"dial-form__hint text-xs\">\r\n            Date, time, and provider are taken from the selected appointment\r\n            @if (appointmentDate || appointmentTime || providerName) {\r\n              ({{ appointmentDate }}\r\n              @if (appointmentTime) {\r\n                {{ appointmentTime }}\r\n              }\r\n              @if (providerName) {\r\n                \u00B7 {{ providerName }}\r\n              })\r\n            }.\r\n          </p>\r\n        }\r\n\r\n        @if (showsCustomScript()) {\r\n          <div class=\"mb-sm\">\r\n            <label>\r\n              Custom script\r\n              @if (customScriptRequired()) {\r\n                <span required> </span>\r\n              }\r\n            </label>\r\n            <textarea\r\n              class=\"form-textarea\"\r\n              rows=\"4\"\r\n              [(ngModel)]=\"customScript\"\r\n              (ngModelChange)=\"touchForm()\"\r\n              name=\"customScript\"\r\n              [required]=\"customScriptRequired()\"\r\n              placeholder=\"What should the agent say or do?\"\r\n              autocomplete=\"off\"\r\n            ></textarea>\r\n          </div>\r\n        }\r\n      </form>\r\n    }\r\n\r\n    @if (!loading()) {\r\n      <div modalFooter class=\"border-t border-base bg-white px-6 py-4\">\r\n        <section class=\"dial-form__preview rounded-lg border border-base bg-white p-3 shadow-sm\">\r\n          <h3 class=\"fs-sm font-semibold text-light\">Opening preview</h3>\r\n          <p class=\"dial-form__preview-text mt-2 whitespace-pre-wrap text-sm leading-normal\">{{ previewText }}</p>\r\n          @if (selectedAppointmentId()) {\r\n            <p class=\"dial-form__hint text-xs\">\r\n              Filled from the selected appointment and purpose template. Switch purpose to change the script.\r\n            </p>\r\n          } @else {\r\n            <p class=\"dial-form__hint text-xs\">\r\n              Select an appointment to fill date, time, and provider into this message.\r\n            </p>\r\n          }\r\n        </section>\r\n\r\n        @if (serverError()) {\r\n          <p class=\"mt-3 m-0 text-[13px] text-[#b91c1c]\" role=\"alert\">{{ serverError() }}</p>\r\n        }\r\n\r\n        <footer class=\"mt-3 flex justify-end gap-2\">\r\n          <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"close()\" [disabled]=\"submitting()\">\r\n            Cancel\r\n          </ed-button>\r\n          <ed-button\r\n            type=\"button\"\r\n            variant=\"primary\"\r\n            fill\r\n            size=\"sm\"\r\n            [disabled]=\"submitting() || !canPlaceCall()\"\r\n            (click$)=\"submit()\"\r\n          >\r\n            {{ submitting() ? 'Dialing\u2026' : 'Place call' }}\r\n          </ed-button>\r\n        </footer>\r\n      </div>\r\n    }\r\n  </app-modal>\r\n}\r\n", styles: [".dial-form__hint{color:var(--eds-text-secondary)}.dial-form__chip-clear{color:var(--eds-primary, #2563eb)}.dial-form__chip-meta,.dial-form__hit-meta{color:var(--eds-text-secondary)}.dial-form__hits,.dial-form__appts{list-style:none;margin:0;padding:0;border-color:var(--eds-border-subtle, #e4e4e7)}.dial-form__hits{background:var(--eds-surface, #fff);box-shadow:0 8px 24px #0f172a1f}.dial-form__hit{background:transparent;border-bottom-color:var(--eds-border-subtle, #f1f5f9)}.dial-form__hit:hover{background:var(--eds-surface-muted, #f8fafc)}.dial-form__appt{border-bottom-color:var(--eds-border-subtle, #f1f5f9)}.dial-form__toggle{color:var(--eds-primary, #2563eb)}.dial-form__preview{background:var(--eds-surface-muted, #f8fafc)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { open: [{
+                type: Input
+            }], closed: [{
+                type: Output
+            }], dialed: [{
+                type: Output
+            }] } });
+
+class LiveCallsPageComponent {
+    constructor() {
+        this.router = inject(Router);
+        this.route = inject(ActivatedRoute);
+        this.liveCallsList = inject(LiveCallsListService);
+        this.agentOnline = inject(AgentOnlineService);
+        this.calls = this.liveCallsList.calls;
+        this.loading = this.liveCallsList.loading;
+        this.error = this.liveCallsList.error;
+        this.agentOffline = computed(() => this.agentOnline.online() === false);
+        this.listSkeletonRows = [0, 1, 2, 3];
+        this.outboundOpen = signal(false);
+        this.callRows = computed(() => this.calls().map((call) => this.toRow(call)));
+        this.emptyState = computed(() => {
+            if (this.calls().length > 0)
+                return null;
+            if (this.agentOnline.online() === false) {
+                return {
+                    title: 'Agent is offline',
+                    detail: 'The AI receptionist is not answering calls. Turn it on in Agent Setting → Advanced.',
+                    icon: 'phone_disabled',
+                };
+            }
+            return {
+                title: 'No active calls right now',
+                detail: 'When a patient calls your practice, their conversation will appear here for real-time monitoring.',
+                icon: 'phone_callback',
+            };
+        });
+    }
+    openMonitor(id) {
+        void this.router.navigate([id], { relativeTo: this.route.parent ?? this.route });
+    }
+    openOutbound() {
+        this.outboundOpen.set(true);
+    }
+    closeOutbound() {
+        this.outboundOpen.set(false);
+    }
+    openTestCall() {
+        void this.router.navigate(['../settings'], { relativeTo: this.route.parent ?? this.route });
+    }
+    toRow(call) {
+        const unknown = isUnknownCaller(call.name, call.matched);
+        const needsAssistance = this.isAssistanceStatus(call.status);
+        const staffHandling = call.status === 'takeover' || call.controlMode === 'takeover';
+        const lastTool = call.tools[call.tools.length - 1];
+        return {
+            id: call.id,
+            name: unknown ? 'Unknown Caller' : call.name.trim() || 'Unknown Caller',
+            initials: unknown ? '?' : call.initials || '?',
+            avatarTone: unknown ? 'gray' : this.avatarToneFor(call),
+            metaLine: callerMetaLine({
+                name: call.name,
+                matched: call.matched,
+                phone: call.phone,
+                dob: call.dob,
+                age: call.age ?? ageFromDob(call.dob),
+                gender: call.gender,
+            }),
+            sentiment: call.sentiment,
+            sentimentLabel: sentimentLabel(call.sentiment),
+            sentimentIconSrc: sentimentIconSrc(call.sentiment),
+            direction: call.direction,
+            directionIcon: call.direction === 'inbound' ? 'call_received' : 'call_made',
+            directionTitle: call.direction === 'inbound' ? 'Incoming call' : 'Outgoing call',
+            goal: call.reason || call.goal || '—',
+            statusSubtitle: lastTool?.result || call.goal || 'In progress…',
+            handlingLabel: needsAssistance
+                ? 'NEED ASSISTANCE'
+                : staffHandling
+                    ? 'STAFF HANDLING'
+                    : 'AI HANDLING',
+            handlingVariant: needsAssistance ? 'danger' : staffHandling ? 'primary' : 'opened',
+            needsAssistance,
+            started: call.started,
+        };
+    }
+    isAssistanceStatus(status) {
+        return status === 'needs-help' || status === 'human-requested' || status === 'urgent';
+    }
+    avatarToneFor(call) {
+        const tones = ['brand', 'warm', 'violet', 'rose', 'green'];
+        const key = call.id || call.name;
+        let hash = 0;
+        for (let i = 0; i < key.length; i++)
+            hash = (hash + key.charCodeAt(i) * (i + 1)) % tones.length;
+        return tones[hash];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LiveCallsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: LiveCallsPageComponent, isStandalone: true, selector: "eds-live-calls-page", host: { classAttribute: "block h-full min-h-0" }, ngImport: i0, template: "<div class=\"flex h-full min-h-0 flex-col overflow-hidden bg-lighter p-base live-calls-page space-y-base\">\r\n  <header class=\"flex shrink-0 items-start justify-between gap-base\">\r\n    <div class=\"grid gap-2xs\">\r\n      <div class=\"flex items-center gap-sm\">\r\n        <h4>Live Calls</h4>\r\n        @if (agentOffline()) {\r\n          <span class=\"inline-flex items-center gap-2xs fs-sm font-semibold text-danger\">\r\n            <ed-icon name=\"phone_disabled\" [size]=\"18\" />\r\n            Offline\r\n          </span>\r\n        } @else {\r\n          <eds-pulse-dot />\r\n        }\r\n      </div>\r\n      <p class=\"fs-sm text-light\">Monitor active conversations and step in when needed</p>\r\n    </div>\r\n    <div class=\"flex shrink-0 items-center gap-sm hidden\">\r\n      <ed-button\r\n        variant=\"secondary\"\r\n        outline\r\n        size=\"sm\"\r\n        (click$)=\"openTestCall()\"\r\n      >\r\n        <ed-icon slot=\"prefix\" name=\"phone_call\" [size]=\"16\" />\r\n        Test Call\r\n      </ed-button>\r\n      <ed-button\r\n        variant=\"primary\"\r\n        fill\r\n        size=\"sm\"\r\n        (click$)=\"openOutbound()\"\r\n      >\r\n        <ed-icon slot=\"prefix\" name=\"call_made\" [size]=\"16\" />\r\n        Outbound Call\r\n      </ed-button>\r\n    </div>\r\n  </header>\r\n\r\n  <div class=\"flex min-h-0 flex-1 flex-col gap-md overflow-hidden\">\r\n  @if (error()) {\r\n    <p class=\"fs-sm text-danger\" role=\"alert\">{{ error() }}</p>\r\n  }\r\n\r\n  @if (loading() && callRows().length === 0) {\r\n    <article class=\"grid min-h-0 flex-1 content-start gap-base overflow-y-auto rounded-lg border border-light bg-white p-base\" aria-busy=\"true\">\r\n      <ul class=\"m-0 grid list-none content-start gap-xs p-0\">\r\n        @for (_ of listSkeletonRows; track _) {\r\n          <li>\r\n            <div class=\"flex w-full items-center gap-base rounded-md border border-light bg-white p-sm\">\r\n              <div class=\"flex min-w-0 shrink-0 items-center gap-xs md:w-72\">\r\n                <ed-skeleton class=\"h-9 w-9 shrink-0 !rounded-md\"></ed-skeleton>\r\n                <div class=\"grid min-w-0 flex-1 gap-2xs\">\r\n                  <ed-skeleton class=\"h-3 w-32\"></ed-skeleton>\r\n                  <ed-skeleton class=\"h-3 w-40\"></ed-skeleton>\r\n                </div>\r\n              </div>\r\n              <div class=\"hidden min-w-0 items-center gap-xs md:flex\">\r\n                <ed-skeleton class=\"h-9 w-9 shrink-0 !rounded-md\"></ed-skeleton>\r\n                <div class=\"grid min-w-0 gap-2xs\">\r\n                  <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\r\n                  <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\r\n                </div>\r\n              </div>\r\n              <div class=\"ml-auto grid shrink-0 justify-items-end gap-2xs self-stretch\">\r\n                <ed-skeleton class=\"h-5 w-24 !rounded-full\"></ed-skeleton>\r\n                <ed-skeleton class=\"h-3 w-12\"></ed-skeleton>\r\n              </div>\r\n            </div>\r\n          </li>\r\n        }\r\n      </ul>\r\n    </article>\r\n  } @else {\r\n    <article class=\"grid min-h-0 flex-1 content-start gap-base overflow-y-auto rounded-lg border border-light bg-white p-base\">\r\n      <ul class=\"m-0 grid list-none content-start gap-xs p-0\">\r\n        @for (call of callRows(); track call.id) {\r\n          <li>\r\n            <button\r\n              type=\"button\"\r\n              class=\"live-calls-page__row flex w-full cursor-pointer items-center gap-base rounded-md border border-light bg-white p-sm text-left transition-shadow hover:shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary\"\r\n              [class.live-calls-page__row--assist]=\"call.needsAssistance\"\r\n              (click)=\"openMonitor(call.id)\"\r\n            >\r\n              <div class=\"flex min-w-0 shrink-0 items-center gap-xs md:w-72\">\r\n                <ed-avatar\r\n                  shape=\"box\"\r\n                  size=\"base\"\r\n                  [initials]=\"call.initials\"\r\n                  [tone]=\"call.avatarTone\"\r\n                />\r\n                <div class=\"grid min-w-0 flex-1 gap-2xs\">\r\n                  <div class=\"flex min-w-0 flex-wrap items-center gap-2xs\">\r\n                    <span class=\"fs-sm font-semibold text-dark\">{{ call.name }}</span>\r\n                    <!-- <span class=\"inline-flex text-light\">\r\n                      <ed-icon name=\"TagSimple\" [size]=\"14\" color=\"currentColor\" />\r\n                    </span> -->\r\n                    <span class=\"vr-sentiment\" [attr.data-sentiment]=\"call.sentiment\">\r\n                      <span class=\"vr-sentiment__icon\" aria-hidden=\"true\">\r\n                        <img [src]=\"call.sentimentIconSrc\" alt=\"\" width=\"16\" height=\"16\" />\r\n                      </span>\r\n                      <span>{{ call.sentimentLabel }}</span>\r\n                    </span>\r\n                  </div>\r\n                  <span class=\"fs-xs whitespace-nowrap text-light\">{{ call.metaLine }}</span>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"hidden min-w-0 items-center gap-xs md:flex\">\r\n                <span\r\n                  class=\"inline-flex size-9 shrink-0 items-center justify-center rounded-md\"\r\n                  [class.bg-success-50]=\"call.direction === 'inbound'\"\r\n                  [class.text-success]=\"call.direction === 'inbound'\"\r\n                  [class.bg-primary-50]=\"call.direction === 'outbound'\"\r\n                  [class.text-primary]=\"call.direction === 'outbound'\"\r\n                  [smartTooltip]=\"call.directionTitle\"\r\n                >\r\n                  <ed-icon [name]=\"call.directionIcon\" [size]=\"18\" color=\"currentColor\" />\r\n                </span>\r\n                <div class=\"grid min-w-0 gap-2xs whitespace-nowrap\">\r\n                  <span class=\"fs-sm font-medium text-dark\">{{ call.goal }}</span>\r\n                  <span class=\"fs-xs text-light\">{{ call.statusSubtitle }}</span>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"ml-auto grid shrink-0 justify-items-end gap-2xs self-stretch\">\r\n                <ed-badge-2 [attr.variant]=\"call.handlingVariant\" pill uppercase>\r\n                  {{ call.handlingLabel }}\r\n                </ed-badge-2>\r\n                <strong\r\n                  class=\"inline-flex items-center gap-2xs text-primary fs-2xs\"\r\n                  [class.text-danger]=\"call.needsAssistance\"\r\n                  [class.text-light]=\"!call.needsAssistance\"\r\n                >\r\n                  @if (call.needsAssistance) {\r\n                    <ed-icon name=\"schedule\" [size]=\"12\" color=\"currentColor\" />\r\n                  } @else {\r\n                    <eds-pulse-dot />\r\n                  }\r\n                  {{ call.started | edsElapsed }}\r\n                </strong>\r\n              </div>\r\n            </button>\r\n          </li>\r\n        } @empty {\r\n          @if (emptyState(); as state) {\r\n            <li\r\n              class=\"grid justify-items-center gap-xs rounded-md border border-light px-base py-xl text-center\"\r\n              role=\"status\"\r\n            >\r\n              <ed-icon [name]=\"state.icon\" [size]=\"32\" />\r\n              <p class=\"m-0 font-semibold text-dark\">{{ state.title }}</p>\r\n              <p class=\"m-0 max-w-md fs-sm text-light\">{{ state.detail }}</p>\r\n            </li>\r\n          }\r\n        }\r\n      </ul>\r\n    </article>\r\n  }\r\n  </div>\r\n</div>\r\n\r\n<eds-outbound-dial-modal\r\n  [open]=\"outboundOpen()\"\r\n  (closed)=\"closeOutbound()\"\r\n  (dialed)=\"closeOutbound()\"\r\n/>\r\n", styles: [".vr-sentiment{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:20px;padding:2px 4px;border-radius:6px;font-size:11px;font-weight:500;line-height:16px;white-space:nowrap}.vr-sentiment__icon{display:block;width:16px;height:16px;flex-shrink:0;overflow:hidden}.vr-sentiment__icon img{display:block;width:100%;height:100%;max-width:none}.vr-sentiment[data-sentiment=calm]{background:#3681f41a;color:#2162f0}.vr-sentiment[data-sentiment=neutral]{background:#f0f2f5;color:#41464c}.vr-sentiment[data-sentiment=urgent]{background:#f26b0d1a;color:#e94e0c}.vr-sentiment[data-sentiment=frustrated]{background:#f037401a;color:#db0c15}.live-calls-page__row--assist{border-color:#f0374040;box-shadow:0 1px 4px #f0374033}\n"], dependencies: [{ kind: "component", type: EdAvatarComponent, selector: "ed-avatar", inputs: ["initials", "tone", "shape", "size", "gradient"] }, { kind: "component", type: IconComponent, selector: "ed-icon", inputs: ["name", "size", "color", "cssClass", "decorative", "ariaHidden", "ariaLabel", "title", "desc", "focusable", "tabIndex"] }, { kind: "component", type: EdsPulseDotComponent, selector: "eds-pulse-dot" }, { kind: "pipe", type: EdsElapsedPipe, name: "edsElapsed" }, { kind: "component", type: OutboundDialModalComponent, selector: "eds-outbound-dial-modal", inputs: ["open"], outputs: ["closed", "dialed"] }, { kind: "component", type: EdSkeletonComponent, selector: "ed-skeleton", inputs: ["class"] }, { kind: "component", type: EdButtonComponent, selector: "ed-button", inputs: ["variant", "size", "disabled", "ghost", "outline", "subtle", "fill", "loading", "block", "elevated", "shape", "type", "href", "routerLink", "rel", "target", "download", "ariaLabel"], outputs: ["click$"] }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip", "tooltipAllowHtml", "tooltipTemplate", "tooltipTemplateContext", "tooltipPlacement", "tooltipTrigger", "tooltipDelayShow", "tooltipDelayHide", "tooltipOffset", "tooltipMaxWidth", "tooltipZIndex", "tooltipClass", "tooltipDisabled", "tooltipArrow", "tooltipHoverIntentMs", "tooltipHoverIntentRadius", "tooltipId", "tooltipRole", "tooltipAnimEnterMs", "tooltipAnimExitMs", "tooltipAnimEasing", "tooltipHoverable", "tooltipHandoffMs", "tooltipOpen", "tooltipOnlyWhenTruncated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LiveCallsPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-live-calls-page', imports: [
+                        EdAvatarComponent,
+                        IconComponent,
+                        EdsPulseDotComponent,
+                        EdsElapsedPipe,
+                        OutboundDialModalComponent,
+                        EdSkeletonComponent,
+                        EdButtonComponent,
+                        SmartTooltipDirective,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], host: { class: 'block h-full min-h-0' }, template: "<div class=\"flex h-full min-h-0 flex-col overflow-hidden bg-lighter p-base live-calls-page space-y-base\">\r\n  <header class=\"flex shrink-0 items-start justify-between gap-base\">\r\n    <div class=\"grid gap-2xs\">\r\n      <div class=\"flex items-center gap-sm\">\r\n        <h4>Live Calls</h4>\r\n        @if (agentOffline()) {\r\n          <span class=\"inline-flex items-center gap-2xs fs-sm font-semibold text-danger\">\r\n            <ed-icon name=\"phone_disabled\" [size]=\"18\" />\r\n            Offline\r\n          </span>\r\n        } @else {\r\n          <eds-pulse-dot />\r\n        }\r\n      </div>\r\n      <p class=\"fs-sm text-light\">Monitor active conversations and step in when needed</p>\r\n    </div>\r\n    <div class=\"flex shrink-0 items-center gap-sm hidden\">\r\n      <ed-button\r\n        variant=\"secondary\"\r\n        outline\r\n        size=\"sm\"\r\n        (click$)=\"openTestCall()\"\r\n      >\r\n        <ed-icon slot=\"prefix\" name=\"phone_call\" [size]=\"16\" />\r\n        Test Call\r\n      </ed-button>\r\n      <ed-button\r\n        variant=\"primary\"\r\n        fill\r\n        size=\"sm\"\r\n        (click$)=\"openOutbound()\"\r\n      >\r\n        <ed-icon slot=\"prefix\" name=\"call_made\" [size]=\"16\" />\r\n        Outbound Call\r\n      </ed-button>\r\n    </div>\r\n  </header>\r\n\r\n  <div class=\"flex min-h-0 flex-1 flex-col gap-md overflow-hidden\">\r\n  @if (error()) {\r\n    <p class=\"fs-sm text-danger\" role=\"alert\">{{ error() }}</p>\r\n  }\r\n\r\n  @if (loading() && callRows().length === 0) {\r\n    <article class=\"grid min-h-0 flex-1 content-start gap-base overflow-y-auto rounded-lg border border-light bg-white p-base\" aria-busy=\"true\">\r\n      <ul class=\"m-0 grid list-none content-start gap-xs p-0\">\r\n        @for (_ of listSkeletonRows; track _) {\r\n          <li>\r\n            <div class=\"flex w-full items-center gap-base rounded-md border border-light bg-white p-sm\">\r\n              <div class=\"flex min-w-0 shrink-0 items-center gap-xs md:w-72\">\r\n                <ed-skeleton class=\"h-9 w-9 shrink-0 !rounded-md\"></ed-skeleton>\r\n                <div class=\"grid min-w-0 flex-1 gap-2xs\">\r\n                  <ed-skeleton class=\"h-3 w-32\"></ed-skeleton>\r\n                  <ed-skeleton class=\"h-3 w-40\"></ed-skeleton>\r\n                </div>\r\n              </div>\r\n              <div class=\"hidden min-w-0 items-center gap-xs md:flex\">\r\n                <ed-skeleton class=\"h-9 w-9 shrink-0 !rounded-md\"></ed-skeleton>\r\n                <div class=\"grid min-w-0 gap-2xs\">\r\n                  <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\r\n                  <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\r\n                </div>\r\n              </div>\r\n              <div class=\"ml-auto grid shrink-0 justify-items-end gap-2xs self-stretch\">\r\n                <ed-skeleton class=\"h-5 w-24 !rounded-full\"></ed-skeleton>\r\n                <ed-skeleton class=\"h-3 w-12\"></ed-skeleton>\r\n              </div>\r\n            </div>\r\n          </li>\r\n        }\r\n      </ul>\r\n    </article>\r\n  } @else {\r\n    <article class=\"grid min-h-0 flex-1 content-start gap-base overflow-y-auto rounded-lg border border-light bg-white p-base\">\r\n      <ul class=\"m-0 grid list-none content-start gap-xs p-0\">\r\n        @for (call of callRows(); track call.id) {\r\n          <li>\r\n            <button\r\n              type=\"button\"\r\n              class=\"live-calls-page__row flex w-full cursor-pointer items-center gap-base rounded-md border border-light bg-white p-sm text-left transition-shadow hover:shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary\"\r\n              [class.live-calls-page__row--assist]=\"call.needsAssistance\"\r\n              (click)=\"openMonitor(call.id)\"\r\n            >\r\n              <div class=\"flex min-w-0 shrink-0 items-center gap-xs md:w-72\">\r\n                <ed-avatar\r\n                  shape=\"box\"\r\n                  size=\"base\"\r\n                  [initials]=\"call.initials\"\r\n                  [tone]=\"call.avatarTone\"\r\n                />\r\n                <div class=\"grid min-w-0 flex-1 gap-2xs\">\r\n                  <div class=\"flex min-w-0 flex-wrap items-center gap-2xs\">\r\n                    <span class=\"fs-sm font-semibold text-dark\">{{ call.name }}</span>\r\n                    <!-- <span class=\"inline-flex text-light\">\r\n                      <ed-icon name=\"TagSimple\" [size]=\"14\" color=\"currentColor\" />\r\n                    </span> -->\r\n                    <span class=\"vr-sentiment\" [attr.data-sentiment]=\"call.sentiment\">\r\n                      <span class=\"vr-sentiment__icon\" aria-hidden=\"true\">\r\n                        <img [src]=\"call.sentimentIconSrc\" alt=\"\" width=\"16\" height=\"16\" />\r\n                      </span>\r\n                      <span>{{ call.sentimentLabel }}</span>\r\n                    </span>\r\n                  </div>\r\n                  <span class=\"fs-xs whitespace-nowrap text-light\">{{ call.metaLine }}</span>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"hidden min-w-0 items-center gap-xs md:flex\">\r\n                <span\r\n                  class=\"inline-flex size-9 shrink-0 items-center justify-center rounded-md\"\r\n                  [class.bg-success-50]=\"call.direction === 'inbound'\"\r\n                  [class.text-success]=\"call.direction === 'inbound'\"\r\n                  [class.bg-primary-50]=\"call.direction === 'outbound'\"\r\n                  [class.text-primary]=\"call.direction === 'outbound'\"\r\n                  [smartTooltip]=\"call.directionTitle\"\r\n                >\r\n                  <ed-icon [name]=\"call.directionIcon\" [size]=\"18\" color=\"currentColor\" />\r\n                </span>\r\n                <div class=\"grid min-w-0 gap-2xs whitespace-nowrap\">\r\n                  <span class=\"fs-sm font-medium text-dark\">{{ call.goal }}</span>\r\n                  <span class=\"fs-xs text-light\">{{ call.statusSubtitle }}</span>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"ml-auto grid shrink-0 justify-items-end gap-2xs self-stretch\">\r\n                <ed-badge-2 [attr.variant]=\"call.handlingVariant\" pill uppercase>\r\n                  {{ call.handlingLabel }}\r\n                </ed-badge-2>\r\n                <strong\r\n                  class=\"inline-flex items-center gap-2xs text-primary fs-2xs\"\r\n                  [class.text-danger]=\"call.needsAssistance\"\r\n                  [class.text-light]=\"!call.needsAssistance\"\r\n                >\r\n                  @if (call.needsAssistance) {\r\n                    <ed-icon name=\"schedule\" [size]=\"12\" color=\"currentColor\" />\r\n                  } @else {\r\n                    <eds-pulse-dot />\r\n                  }\r\n                  {{ call.started | edsElapsed }}\r\n                </strong>\r\n              </div>\r\n            </button>\r\n          </li>\r\n        } @empty {\r\n          @if (emptyState(); as state) {\r\n            <li\r\n              class=\"grid justify-items-center gap-xs rounded-md border border-light px-base py-xl text-center\"\r\n              role=\"status\"\r\n            >\r\n              <ed-icon [name]=\"state.icon\" [size]=\"32\" />\r\n              <p class=\"m-0 font-semibold text-dark\">{{ state.title }}</p>\r\n              <p class=\"m-0 max-w-md fs-sm text-light\">{{ state.detail }}</p>\r\n            </li>\r\n          }\r\n        }\r\n      </ul>\r\n    </article>\r\n  }\r\n  </div>\r\n</div>\r\n\r\n<eds-outbound-dial-modal\r\n  [open]=\"outboundOpen()\"\r\n  (closed)=\"closeOutbound()\"\r\n  (dialed)=\"closeOutbound()\"\r\n/>\r\n", styles: [".vr-sentiment{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:20px;padding:2px 4px;border-radius:6px;font-size:11px;font-weight:500;line-height:16px;white-space:nowrap}.vr-sentiment__icon{display:block;width:16px;height:16px;flex-shrink:0;overflow:hidden}.vr-sentiment__icon img{display:block;width:100%;height:100%;max-width:none}.vr-sentiment[data-sentiment=calm]{background:#3681f41a;color:#2162f0}.vr-sentiment[data-sentiment=neutral]{background:#f0f2f5;color:#41464c}.vr-sentiment[data-sentiment=urgent]{background:#f26b0d1a;color:#e94e0c}.vr-sentiment[data-sentiment=frustrated]{background:#f037401a;color:#db0c15}.live-calls-page__row--assist{border-color:#f0374040;box-shadow:0 1px 4px #f0374033}\n"] }]
+        }] });
+
+export { LiveCallsPageComponent };
+//# sourceMappingURL=edvak99-voice-receptionist-widget-live-calls-page.component-tJU0GeMR.mjs.map