@edvak99/voice-receptionist-widget 1.1.27 → 1.1.29

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

@@ -1,437 +0,0 @@
-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-BxX138_W.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-CjF433P4.mjs';
-import { S as SmartTooltipDirective } from './edvak99-voice-receptionist-widget-smart-tooltip.directive-ChEdIem3.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) {\n  <app-modal\n    title=\"Outbound call\"\n    subtitle=\"Search a patient, pick an appointment, then dial\"\n    maxWidth=\"600px\"\n    (closed)=\"close()\"\n  >\n    @if (!loading()) {\n      <div modalStickyTop class=\"border-b border-base bg-white px-6 pb-3 pt-5\">\n        <div class=\"dial-form__field dial-form__typeahead relative\">\n          <label><span required>Patient</span></label>\n\n          @if (selectedPatient(); as patient) {\n            <div class=\"flex items-center justify-between gap-3 rounded-lg border border-base bg-lighter px-3 py-3\">\n              <div class=\"flex min-w-0 flex-col gap-1\">\n                <strong>{{ patient.fullName }}</strong>\n                <span class=\"dial-form__chip-meta text-xs\">\n                  @if (patient.phone) {\n                    {{ patient.phone }}\n                  }\n                  @if (patient.dob) {\n                    \u00B7 DOB {{ patient.dob }}\n                  }\n                </span>\n              </div>\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()\">\n                Change\n              </button>\n            </div>\n          } @else {\n            <eds-search-field\n              inputClass=\"form-input\"\n              [value]=\"patientQuery()\"\n              (valueChange)=\"onPatientQueryChange($event)\"\n              placeholder=\"Search by name or phone\"\n            />\n            @if (searchingPatients()) {\n              <span class=\"dial-form__hint text-xs\">Searching\u2026</span>\n            }\n            @if (patientHits().length) {\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\">\n                @for (hit of patientHits(); track hit.patientId) {\n                  <li>\n                    <button\n                      type=\"button\"\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\"\n                      role=\"option\"\n                      (click)=\"selectPatient(hit)\"\n                    >\n                      <span class=\"font-semibold\">{{ hit.fullName }}</span>\n                      <span class=\"dial-form__hit-meta text-xs\">\n                        {{ hit.phone || 'No phone' }}\n                        @if (hit.dob) {\n                          \u00B7 {{ hit.dob }}\n                        }\n                      </span>\n                    </button>\n                  </li>\n                }\n              </ul>\n            }\n          }\n        </div>\n      </div>\n    }\n\n    @if (loading()) {\n      <div class=\"flex flex-col gap-3\" aria-busy=\"true\">\n        @for (_ of formSkeletonRows; track _) {\n          <div class=\"grid gap-2xs\">\n            <ed-skeleton class=\"h-3 w-20\"></ed-skeleton>\n            <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\n          </div>\n        }\n      </div>\n    } @else {\n      <form\n        id=\"outbound-dial-form\"\n        class=\"flex flex-col gap-3\"\n        (ngSubmit)=\"submit()\"\n        novalidate\n        autocomplete=\"off\"\n      >\n        @if (selectedPatient()) {\n          <div class=\"mb-sm\">\n            <label>Appointment</label>\n            @if (loadingAppointments()) {\n              <ul class=\"max-h-[220px] overflow-hidden overflow-y-auto rounded-lg border\" aria-busy=\"true\">\n                @for (_ of appointmentSkeletonRows; track _) {\n                  <li class=\"flex items-start gap-3 border-b px-3 py-3 last:border-b-0\">\n                    <ed-skeleton class=\"mt-0.5 h-4 w-4 !rounded-full\"></ed-skeleton>\n                    <div class=\"grid flex-1 gap-2xs\">\n                      <ed-skeleton class=\"h-3 w-40\"></ed-skeleton>\n                      <ed-skeleton class=\"h-3 w-56\"></ed-skeleton>\n                    </div>\n                  </li>\n                }\n              </ul>\n            } @else if (!appointments().length) {\n              <span class=\"dial-form__hint text-xs\">No upcoming appointments \u2014 dial without one, or enter details below.</span>\n            } @else {\n              <ul class=\"max-h-[220px] overflow-hidden overflow-y-auto rounded-lg border\">\n                <li>\n                  <label class=\"dial-form__appt flex cursor-pointer items-start gap-3 border-b px-3 py-3 last:border-b-0\">\n                    <input\n                      type=\"radio\"\n                      name=\"appointmentId\"\n                      [checked]=\"!selectedAppointmentId()\"\n                      (change)=\"selectAppointment(null)\"\n                      autocomplete=\"off\"\n                     />\n                    <span>No appointment (purpose-only)</span>\n                  </label>\n                </li>\n                @for (appt of appointments(); track appt.appointmentId) {\n                  <li>\n                    <label class=\"dial-form__appt flex cursor-pointer items-start gap-3 border-b px-3 py-3 last:border-b-0\">\n                      <input\n                        type=\"radio\"\n                        name=\"appointmentId\"\n                        [checked]=\"selectedAppointmentId() === appt.appointmentId\"\n                        (change)=\"selectAppointment(appt)\"\n                        autocomplete=\"off\"\n                       />\n                      <span class=\"flex flex-col gap-1\">\n                        <strong>\n                          {{ appt.startTime ? (appt.startTime | date: 'medium') : 'TBD' }}\n                        </strong>\n                        <span class=\"dial-form__hit-meta text-xs\">\n                          {{ appt.providerName || 'Provider TBD' }}\n                          @if (appt.locationName) {\n                            \u00B7 {{ appt.locationName }}\n                          }\n                          @if (appt.visitType) {\n                            \u00B7 {{ appt.visitType }}\n                          }\n                          @if (appt.status) {\n                            \u00B7 {{ appt.status }}\n                          }\n                        </span>\n                      </span>\n                    </label>\n                  </li>\n                }\n              </ul>\n            }\n          </div>\n        }\n\n        <button\n          type=\"button\"\n          class=\"dial-form__toggle self-start cursor-pointer border-none bg-transparent p-0 text-[13px] font-[inherit]\"\n          (click)=\"showManualEntry.set(!showManualEntry())\"\n        >\n          {{ showManualEntry() ? 'Hide' : 'Show' }} phone / name\n          @if (!selectedPatient()) {\n            (required if no patient selected)\n          }\n        </button>\n\n        @if (showManualEntry() || !selectedPatient()) {\n          <div class=\"mb-sm\">\n            <label><span required>Phone</span></label>\n            <input\n              class=\"form-input\"\n              type=\"tel\"\n              [(ngModel)]=\"phone\"\n              (ngModelChange)=\"touchForm()\"\n              name=\"phone\"\n              placeholder=\"+14155550100\"\n              autocomplete=\"off\"\n              required\n            />\n            <span class=\"dial-form__hint text-xs\">E.164 format, e.g. +14155550100</span>\n          </div>\n\n          <div class=\"mb-sm\">\n            <label><span required>Patient name</span></label>\n            <input\n              class=\"form-input\"\n              type=\"text\"\n              [(ngModel)]=\"name\"\n              (ngModelChange)=\"touchForm()\"\n              name=\"name\"\n              placeholder=\"Maria Garcia\"\n              required\n              autocomplete=\"off\"\n            />\n          </div>\n        }\n\n        <div class=\"mb-sm\">\n          <label><span required>Purpose</span></label>\n          <select\n            class=\"form-select\"\n            [(ngModel)]=\"purposeId\"\n            name=\"purposeId\"\n            (ngModelChange)=\"onPurposeChange()\"\n            required\n            autocomplete=\"off\"\n          >\n            @for (p of purposes(); track p.purposeId) {\n              <option [value]=\"p.purposeId\">{{ p.label }}</option>\n            }\n          </select>\n        </div>\n\n        @if (showsField('appointmentDate') && !selectedAppointmentId()) {\n          <div class=\"mb-sm\">\n            <label><span required>{{ requiredFieldLabel('appointmentDate') }}</span></label>\n            <input\n              class=\"form-input\"\n              type=\"date\"\n              [(ngModel)]=\"appointmentDate\"\n              (ngModelChange)=\"touchForm()\"\n              name=\"appointmentDate\"\n              placeholder=\"Appointment Date\"\n              required\n              autocomplete=\"off\"\n            />\n          </div>\n        }\n\n        @if (showsField('appointmentTime') && !selectedAppointmentId()) {\n          <div class=\"mb-sm\">\n            <label><span required>{{ requiredFieldLabel('appointmentTime') }}</span></label>\n            <input\n              class=\"form-input\"\n              type=\"time\"\n              [(ngModel)]=\"appointmentTime\"\n              (ngModelChange)=\"touchForm()\"\n              name=\"appointmentTime\"\n              required\n              autocomplete=\"off\"\n            />\n          </div>\n        }\n\n        @if (showsField('providerName') && !selectedAppointmentId()) {\n          <div class=\"mb-sm\">\n            <label><span required>{{ requiredFieldLabel('providerName') }}</span></label>\n            <input\n              class=\"form-input\"\n              type=\"text\"\n              [(ngModel)]=\"providerName\"\n              (ngModelChange)=\"touchForm()\"\n              name=\"providerName\"\n              placeholder=\"Dr. Patel\"\n              required\n              autocomplete=\"off\"\n            />\n          </div>\n        }\n\n        @if (selectedAppointmentId() && (showsField('appointmentDate') || showsField('appointmentTime') || showsField('providerName'))) {\n          <p class=\"dial-form__hint text-xs\">\n            Date, time, and provider are taken from the selected appointment\n            @if (appointmentDate || appointmentTime || providerName) {\n              ({{ appointmentDate }}\n              @if (appointmentTime) {\n                {{ appointmentTime }}\n              }\n              @if (providerName) {\n                \u00B7 {{ providerName }}\n              })\n            }.\n          </p>\n        }\n\n        @if (showsCustomScript()) {\n          <div class=\"mb-sm\">\n            <label>\n              Custom script\n              @if (customScriptRequired()) {\n                <span required> </span>\n              }\n            </label>\n            <textarea\n              class=\"form-textarea\"\n              rows=\"4\"\n              [(ngModel)]=\"customScript\"\n              (ngModelChange)=\"touchForm()\"\n              name=\"customScript\"\n              [required]=\"customScriptRequired()\"\n              placeholder=\"What should the agent say or do?\"\n              autocomplete=\"off\"\n            ></textarea>\n          </div>\n        }\n      </form>\n    }\n\n    @if (!loading()) {\n      <div modalFooter class=\"border-t border-base bg-white px-6 py-4\">\n        <section class=\"dial-form__preview rounded-lg border border-base bg-white p-3 shadow-sm\">\n          <h3 class=\"fs-sm font-semibold text-light\">Opening preview</h3>\n          <p class=\"dial-form__preview-text mt-2 whitespace-pre-wrap text-sm leading-normal\">{{ previewText }}</p>\n          @if (selectedAppointmentId()) {\n            <p class=\"dial-form__hint text-xs\">\n              Filled from the selected appointment and purpose template. Switch purpose to change the script.\n            </p>\n          } @else {\n            <p class=\"dial-form__hint text-xs\">\n              Select an appointment to fill date, time, and provider into this message.\n            </p>\n          }\n        </section>\n\n        @if (serverError()) {\n          <p class=\"mt-3 m-0 text-[13px] text-[#b91c1c]\" role=\"alert\">{{ serverError() }}</p>\n        }\n\n        <footer class=\"mt-3 flex justify-end gap-2\">\n          <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"close()\" [disabled]=\"submitting()\">\n            Cancel\n          </ed-button>\n          <ed-button\n            type=\"button\"\n            variant=\"primary\"\n            fill\n            size=\"sm\"\n            [disabled]=\"submitting() || !canPlaceCall()\"\n            (click$)=\"submit()\"\n          >\n            {{ submitting() ? 'Dialing\u2026' : 'Place call' }}\n          </ed-button>\n        </footer>\n      </div>\n    }\n  </app-modal>\n}\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) {\n  <app-modal\n    title=\"Outbound call\"\n    subtitle=\"Search a patient, pick an appointment, then dial\"\n    maxWidth=\"600px\"\n    (closed)=\"close()\"\n  >\n    @if (!loading()) {\n      <div modalStickyTop class=\"border-b border-base bg-white px-6 pb-3 pt-5\">\n        <div class=\"dial-form__field dial-form__typeahead relative\">\n          <label><span required>Patient</span></label>\n\n          @if (selectedPatient(); as patient) {\n            <div class=\"flex items-center justify-between gap-3 rounded-lg border border-base bg-lighter px-3 py-3\">\n              <div class=\"flex min-w-0 flex-col gap-1\">\n                <strong>{{ patient.fullName }}</strong>\n                <span class=\"dial-form__chip-meta text-xs\">\n                  @if (patient.phone) {\n                    {{ patient.phone }}\n                  }\n                  @if (patient.dob) {\n                    \u00B7 DOB {{ patient.dob }}\n                  }\n                </span>\n              </div>\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()\">\n                Change\n              </button>\n            </div>\n          } @else {\n            <eds-search-field\n              inputClass=\"form-input\"\n              [value]=\"patientQuery()\"\n              (valueChange)=\"onPatientQueryChange($event)\"\n              placeholder=\"Search by name or phone\"\n            />\n            @if (searchingPatients()) {\n              <span class=\"dial-form__hint text-xs\">Searching\u2026</span>\n            }\n            @if (patientHits().length) {\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\">\n                @for (hit of patientHits(); track hit.patientId) {\n                  <li>\n                    <button\n                      type=\"button\"\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\"\n                      role=\"option\"\n                      (click)=\"selectPatient(hit)\"\n                    >\n                      <span class=\"font-semibold\">{{ hit.fullName }}</span>\n                      <span class=\"dial-form__hit-meta text-xs\">\n                        {{ hit.phone || 'No phone' }}\n                        @if (hit.dob) {\n                          \u00B7 {{ hit.dob }}\n                        }\n                      </span>\n                    </button>\n                  </li>\n                }\n              </ul>\n            }\n          }\n        </div>\n      </div>\n    }\n\n    @if (loading()) {\n      <div class=\"flex flex-col gap-3\" aria-busy=\"true\">\n        @for (_ of formSkeletonRows; track _) {\n          <div class=\"grid gap-2xs\">\n            <ed-skeleton class=\"h-3 w-20\"></ed-skeleton>\n            <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\n          </div>\n        }\n      </div>\n    } @else {\n      <form\n        id=\"outbound-dial-form\"\n        class=\"flex flex-col gap-3\"\n        (ngSubmit)=\"submit()\"\n        novalidate\n        autocomplete=\"off\"\n      >\n        @if (selectedPatient()) {\n          <div class=\"mb-sm\">\n            <label>Appointment</label>\n            @if (loadingAppointments()) {\n              <ul class=\"max-h-[220px] overflow-hidden overflow-y-auto rounded-lg border\" aria-busy=\"true\">\n                @for (_ of appointmentSkeletonRows; track _) {\n                  <li class=\"flex items-start gap-3 border-b px-3 py-3 last:border-b-0\">\n                    <ed-skeleton class=\"mt-0.5 h-4 w-4 !rounded-full\"></ed-skeleton>\n                    <div class=\"grid flex-1 gap-2xs\">\n                      <ed-skeleton class=\"h-3 w-40\"></ed-skeleton>\n                      <ed-skeleton class=\"h-3 w-56\"></ed-skeleton>\n                    </div>\n                  </li>\n                }\n              </ul>\n            } @else if (!appointments().length) {\n              <span class=\"dial-form__hint text-xs\">No upcoming appointments \u2014 dial without one, or enter details below.</span>\n            } @else {\n              <ul class=\"max-h-[220px] overflow-hidden overflow-y-auto rounded-lg border\">\n                <li>\n                  <label class=\"dial-form__appt flex cursor-pointer items-start gap-3 border-b px-3 py-3 last:border-b-0\">\n                    <input\n                      type=\"radio\"\n                      name=\"appointmentId\"\n                      [checked]=\"!selectedAppointmentId()\"\n                      (change)=\"selectAppointment(null)\"\n                      autocomplete=\"off\"\n                     />\n                    <span>No appointment (purpose-only)</span>\n                  </label>\n                </li>\n                @for (appt of appointments(); track appt.appointmentId) {\n                  <li>\n                    <label class=\"dial-form__appt flex cursor-pointer items-start gap-3 border-b px-3 py-3 last:border-b-0\">\n                      <input\n                        type=\"radio\"\n                        name=\"appointmentId\"\n                        [checked]=\"selectedAppointmentId() === appt.appointmentId\"\n                        (change)=\"selectAppointment(appt)\"\n                        autocomplete=\"off\"\n                       />\n                      <span class=\"flex flex-col gap-1\">\n                        <strong>\n                          {{ appt.startTime ? (appt.startTime | date: 'medium') : 'TBD' }}\n                        </strong>\n                        <span class=\"dial-form__hit-meta text-xs\">\n                          {{ appt.providerName || 'Provider TBD' }}\n                          @if (appt.locationName) {\n                            \u00B7 {{ appt.locationName }}\n                          }\n                          @if (appt.visitType) {\n                            \u00B7 {{ appt.visitType }}\n                          }\n                          @if (appt.status) {\n                            \u00B7 {{ appt.status }}\n                          }\n                        </span>\n                      </span>\n                    </label>\n                  </li>\n                }\n              </ul>\n            }\n          </div>\n        }\n\n        <button\n          type=\"button\"\n          class=\"dial-form__toggle self-start cursor-pointer border-none bg-transparent p-0 text-[13px] font-[inherit]\"\n          (click)=\"showManualEntry.set(!showManualEntry())\"\n        >\n          {{ showManualEntry() ? 'Hide' : 'Show' }} phone / name\n          @if (!selectedPatient()) {\n            (required if no patient selected)\n          }\n        </button>\n\n        @if (showManualEntry() || !selectedPatient()) {\n          <div class=\"mb-sm\">\n            <label><span required>Phone</span></label>\n            <input\n              class=\"form-input\"\n              type=\"tel\"\n              [(ngModel)]=\"phone\"\n              (ngModelChange)=\"touchForm()\"\n              name=\"phone\"\n              placeholder=\"+14155550100\"\n              autocomplete=\"off\"\n              required\n            />\n            <span class=\"dial-form__hint text-xs\">E.164 format, e.g. +14155550100</span>\n          </div>\n\n          <div class=\"mb-sm\">\n            <label><span required>Patient name</span></label>\n            <input\n              class=\"form-input\"\n              type=\"text\"\n              [(ngModel)]=\"name\"\n              (ngModelChange)=\"touchForm()\"\n              name=\"name\"\n              placeholder=\"Maria Garcia\"\n              required\n              autocomplete=\"off\"\n            />\n          </div>\n        }\n\n        <div class=\"mb-sm\">\n          <label><span required>Purpose</span></label>\n          <select\n            class=\"form-select\"\n            [(ngModel)]=\"purposeId\"\n            name=\"purposeId\"\n            (ngModelChange)=\"onPurposeChange()\"\n            required\n            autocomplete=\"off\"\n          >\n            @for (p of purposes(); track p.purposeId) {\n              <option [value]=\"p.purposeId\">{{ p.label }}</option>\n            }\n          </select>\n        </div>\n\n        @if (showsField('appointmentDate') && !selectedAppointmentId()) {\n          <div class=\"mb-sm\">\n            <label><span required>{{ requiredFieldLabel('appointmentDate') }}</span></label>\n            <input\n              class=\"form-input\"\n              type=\"date\"\n              [(ngModel)]=\"appointmentDate\"\n              (ngModelChange)=\"touchForm()\"\n              name=\"appointmentDate\"\n              placeholder=\"Appointment Date\"\n              required\n              autocomplete=\"off\"\n            />\n          </div>\n        }\n\n        @if (showsField('appointmentTime') && !selectedAppointmentId()) {\n          <div class=\"mb-sm\">\n            <label><span required>{{ requiredFieldLabel('appointmentTime') }}</span></label>\n            <input\n              class=\"form-input\"\n              type=\"time\"\n              [(ngModel)]=\"appointmentTime\"\n              (ngModelChange)=\"touchForm()\"\n              name=\"appointmentTime\"\n              required\n              autocomplete=\"off\"\n            />\n          </div>\n        }\n\n        @if (showsField('providerName') && !selectedAppointmentId()) {\n          <div class=\"mb-sm\">\n            <label><span required>{{ requiredFieldLabel('providerName') }}</span></label>\n            <input\n              class=\"form-input\"\n              type=\"text\"\n              [(ngModel)]=\"providerName\"\n              (ngModelChange)=\"touchForm()\"\n              name=\"providerName\"\n              placeholder=\"Dr. Patel\"\n              required\n              autocomplete=\"off\"\n            />\n          </div>\n        }\n\n        @if (selectedAppointmentId() && (showsField('appointmentDate') || showsField('appointmentTime') || showsField('providerName'))) {\n          <p class=\"dial-form__hint text-xs\">\n            Date, time, and provider are taken from the selected appointment\n            @if (appointmentDate || appointmentTime || providerName) {\n              ({{ appointmentDate }}\n              @if (appointmentTime) {\n                {{ appointmentTime }}\n              }\n              @if (providerName) {\n                \u00B7 {{ providerName }}\n              })\n            }.\n          </p>\n        }\n\n        @if (showsCustomScript()) {\n          <div class=\"mb-sm\">\n            <label>\n              Custom script\n              @if (customScriptRequired()) {\n                <span required> </span>\n              }\n            </label>\n            <textarea\n              class=\"form-textarea\"\n              rows=\"4\"\n              [(ngModel)]=\"customScript\"\n              (ngModelChange)=\"touchForm()\"\n              name=\"customScript\"\n              [required]=\"customScriptRequired()\"\n              placeholder=\"What should the agent say or do?\"\n              autocomplete=\"off\"\n            ></textarea>\n          </div>\n        }\n      </form>\n    }\n\n    @if (!loading()) {\n      <div modalFooter class=\"border-t border-base bg-white px-6 py-4\">\n        <section class=\"dial-form__preview rounded-lg border border-base bg-white p-3 shadow-sm\">\n          <h3 class=\"fs-sm font-semibold text-light\">Opening preview</h3>\n          <p class=\"dial-form__preview-text mt-2 whitespace-pre-wrap text-sm leading-normal\">{{ previewText }}</p>\n          @if (selectedAppointmentId()) {\n            <p class=\"dial-form__hint text-xs\">\n              Filled from the selected appointment and purpose template. Switch purpose to change the script.\n            </p>\n          } @else {\n            <p class=\"dial-form__hint text-xs\">\n              Select an appointment to fill date, time, and provider into this message.\n            </p>\n          }\n        </section>\n\n        @if (serverError()) {\n          <p class=\"mt-3 m-0 text-[13px] text-[#b91c1c]\" role=\"alert\">{{ serverError() }}</p>\n        }\n\n        <footer class=\"mt-3 flex justify-end gap-2\">\n          <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"close()\" [disabled]=\"submitting()\">\n            Cancel\n          </ed-button>\n          <ed-button\n            type=\"button\"\n            variant=\"primary\"\n            fill\n            size=\"sm\"\n            [disabled]=\"submitting() || !canPlaceCall()\"\n            (click$)=\"submit()\"\n          >\n            {{ submitting() ? 'Dialing\u2026' : 'Place call' }}\n          </ed-button>\n        </footer>\n      </div>\n    }\n  </app-modal>\n}\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\">\n  <header class=\"flex shrink-0 items-start justify-between gap-base\">\n    <div class=\"grid gap-2xs\">\n      <div class=\"flex items-center gap-sm\">\n        <h4>Live Calls</h4>\n        @if (agentOffline()) {\n          <span class=\"inline-flex items-center gap-2xs fs-sm font-semibold text-danger\">\n            <ed-icon name=\"phone_disabled\" [size]=\"18\" />\n            Offline\n          </span>\n        } @else {\n          <eds-pulse-dot />\n        }\n      </div>\n      <p class=\"fs-sm text-light\">Monitor active conversations and step in when needed</p>\n    </div>\n    <div class=\"flex shrink-0 items-center gap-sm hidden\">\n      <ed-button\n        variant=\"secondary\"\n        outline\n        size=\"sm\"\n        (click$)=\"openTestCall()\"\n      >\n        <ed-icon slot=\"prefix\" name=\"phone_call\" [size]=\"16\" />\n        Test Call\n      </ed-button>\n      <ed-button\n        variant=\"primary\"\n        fill\n        size=\"sm\"\n        (click$)=\"openOutbound()\"\n      >\n        <ed-icon slot=\"prefix\" name=\"call_made\" [size]=\"16\" />\n        Outbound Call\n      </ed-button>\n    </div>\n  </header>\n\n  <div class=\"flex min-h-0 flex-1 flex-col gap-md overflow-hidden\">\n  @if (error()) {\n    <p class=\"fs-sm text-danger\" role=\"alert\">{{ error() }}</p>\n  }\n\n  @if (loading() && callRows().length === 0) {\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\">\n      <ul class=\"m-0 grid list-none content-start gap-xs p-0\">\n        @for (_ of listSkeletonRows; track _) {\n          <li>\n            <div class=\"flex w-full items-center gap-base rounded-md border border-light bg-white p-sm\">\n              <div class=\"flex min-w-0 shrink-0 items-center gap-xs md:w-72\">\n                <ed-skeleton class=\"h-9 w-9 shrink-0 !rounded-md\"></ed-skeleton>\n                <div class=\"grid min-w-0 flex-1 gap-2xs\">\n                  <ed-skeleton class=\"h-3 w-32\"></ed-skeleton>\n                  <ed-skeleton class=\"h-3 w-40\"></ed-skeleton>\n                </div>\n              </div>\n              <div class=\"hidden min-w-0 items-center gap-xs md:flex\">\n                <ed-skeleton class=\"h-9 w-9 shrink-0 !rounded-md\"></ed-skeleton>\n                <div class=\"grid min-w-0 gap-2xs\">\n                  <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\n                  <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\n                </div>\n              </div>\n              <div class=\"ml-auto grid shrink-0 justify-items-end gap-2xs self-stretch\">\n                <ed-skeleton class=\"h-5 w-24 !rounded-full\"></ed-skeleton>\n                <ed-skeleton class=\"h-3 w-12\"></ed-skeleton>\n              </div>\n            </div>\n          </li>\n        }\n      </ul>\n    </article>\n  } @else {\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\">\n      <ul class=\"m-0 grid list-none content-start gap-xs p-0\">\n        @for (call of callRows(); track call.id) {\n          <li>\n            <button\n              type=\"button\"\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\"\n              [class.live-calls-page__row--assist]=\"call.needsAssistance\"\n              (click)=\"openMonitor(call.id)\"\n            >\n              <div class=\"flex min-w-0 shrink-0 items-center gap-xs md:w-72\">\n                <ed-avatar\n                  shape=\"box\"\n                  size=\"base\"\n                  [initials]=\"call.initials\"\n                  [tone]=\"call.avatarTone\"\n                />\n                <div class=\"grid min-w-0 flex-1 gap-2xs\">\n                  <div class=\"flex min-w-0 flex-wrap items-center gap-2xs\">\n                    <span class=\"fs-sm font-semibold text-dark\">{{ call.name }}</span>\n                    <!-- <span class=\"inline-flex text-light\">\n                      <ed-icon name=\"TagSimple\" [size]=\"14\" color=\"currentColor\" />\n                    </span> -->\n                    <span class=\"vr-sentiment\" [attr.data-sentiment]=\"call.sentiment\">\n                      <span class=\"vr-sentiment__icon\" aria-hidden=\"true\">\n                        <img [src]=\"call.sentimentIconSrc\" alt=\"\" width=\"16\" height=\"16\" />\n                      </span>\n                      <span>{{ call.sentimentLabel }}</span>\n                    </span>\n                  </div>\n                  <span class=\"fs-xs whitespace-nowrap text-light\">{{ call.metaLine }}</span>\n                </div>\n              </div>\n\n              <div class=\"hidden min-w-0 items-center gap-xs md:flex\">\n                <span\n                  class=\"inline-flex size-9 shrink-0 items-center justify-center rounded-md\"\n                  [class.bg-success-50]=\"call.direction === 'inbound'\"\n                  [class.text-success]=\"call.direction === 'inbound'\"\n                  [class.bg-primary-50]=\"call.direction === 'outbound'\"\n                  [class.text-primary]=\"call.direction === 'outbound'\"\n                  [smartTooltip]=\"call.directionTitle\"\n                >\n                  <ed-icon [name]=\"call.directionIcon\" [size]=\"18\" color=\"currentColor\" />\n                </span>\n                <div class=\"grid min-w-0 gap-2xs whitespace-nowrap\">\n                  <span class=\"fs-sm font-medium text-dark\">{{ call.goal }}</span>\n                  <span class=\"fs-xs text-light\">{{ call.statusSubtitle }}</span>\n                </div>\n              </div>\n\n              <div class=\"ml-auto grid shrink-0 justify-items-end gap-2xs self-stretch\">\n                <ed-badge-2 [attr.variant]=\"call.handlingVariant\" pill uppercase>\n                  {{ call.handlingLabel }}\n                </ed-badge-2>\n                <strong\n                  class=\"inline-flex items-center gap-2xs text-primary fs-2xs\"\n                  [class.text-danger]=\"call.needsAssistance\"\n                  [class.text-light]=\"!call.needsAssistance\"\n                >\n                  @if (call.needsAssistance) {\n                    <ed-icon name=\"schedule\" [size]=\"12\" color=\"currentColor\" />\n                  } @else {\n                    <eds-pulse-dot />\n                  }\n                  {{ call.started | edsElapsed }}\n                </strong>\n              </div>\n            </button>\n          </li>\n        } @empty {\n          @if (emptyState(); as state) {\n            <li\n              class=\"grid justify-items-center gap-xs rounded-md border border-light px-base py-xl text-center\"\n              role=\"status\"\n            >\n              <ed-icon [name]=\"state.icon\" [size]=\"32\" />\n              <p class=\"m-0 font-semibold text-dark\">{{ state.title }}</p>\n              <p class=\"m-0 max-w-md fs-sm text-light\">{{ state.detail }}</p>\n            </li>\n          }\n        }\n      </ul>\n    </article>\n  }\n  </div>\n</div>\n\n<eds-outbound-dial-modal\n  [open]=\"outboundOpen()\"\n  (closed)=\"closeOutbound()\"\n  (dialed)=\"closeOutbound()\"\n/>\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\">\n  <header class=\"flex shrink-0 items-start justify-between gap-base\">\n    <div class=\"grid gap-2xs\">\n      <div class=\"flex items-center gap-sm\">\n        <h4>Live Calls</h4>\n        @if (agentOffline()) {\n          <span class=\"inline-flex items-center gap-2xs fs-sm font-semibold text-danger\">\n            <ed-icon name=\"phone_disabled\" [size]=\"18\" />\n            Offline\n          </span>\n        } @else {\n          <eds-pulse-dot />\n        }\n      </div>\n      <p class=\"fs-sm text-light\">Monitor active conversations and step in when needed</p>\n    </div>\n    <div class=\"flex shrink-0 items-center gap-sm hidden\">\n      <ed-button\n        variant=\"secondary\"\n        outline\n        size=\"sm\"\n        (click$)=\"openTestCall()\"\n      >\n        <ed-icon slot=\"prefix\" name=\"phone_call\" [size]=\"16\" />\n        Test Call\n      </ed-button>\n      <ed-button\n        variant=\"primary\"\n        fill\n        size=\"sm\"\n        (click$)=\"openOutbound()\"\n      >\n        <ed-icon slot=\"prefix\" name=\"call_made\" [size]=\"16\" />\n        Outbound Call\n      </ed-button>\n    </div>\n  </header>\n\n  <div class=\"flex min-h-0 flex-1 flex-col gap-md overflow-hidden\">\n  @if (error()) {\n    <p class=\"fs-sm text-danger\" role=\"alert\">{{ error() }}</p>\n  }\n\n  @if (loading() && callRows().length === 0) {\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\">\n      <ul class=\"m-0 grid list-none content-start gap-xs p-0\">\n        @for (_ of listSkeletonRows; track _) {\n          <li>\n            <div class=\"flex w-full items-center gap-base rounded-md border border-light bg-white p-sm\">\n              <div class=\"flex min-w-0 shrink-0 items-center gap-xs md:w-72\">\n                <ed-skeleton class=\"h-9 w-9 shrink-0 !rounded-md\"></ed-skeleton>\n                <div class=\"grid min-w-0 flex-1 gap-2xs\">\n                  <ed-skeleton class=\"h-3 w-32\"></ed-skeleton>\n                  <ed-skeleton class=\"h-3 w-40\"></ed-skeleton>\n                </div>\n              </div>\n              <div class=\"hidden min-w-0 items-center gap-xs md:flex\">\n                <ed-skeleton class=\"h-9 w-9 shrink-0 !rounded-md\"></ed-skeleton>\n                <div class=\"grid min-w-0 gap-2xs\">\n                  <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\n                  <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\n                </div>\n              </div>\n              <div class=\"ml-auto grid shrink-0 justify-items-end gap-2xs self-stretch\">\n                <ed-skeleton class=\"h-5 w-24 !rounded-full\"></ed-skeleton>\n                <ed-skeleton class=\"h-3 w-12\"></ed-skeleton>\n              </div>\n            </div>\n          </li>\n        }\n      </ul>\n    </article>\n  } @else {\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\">\n      <ul class=\"m-0 grid list-none content-start gap-xs p-0\">\n        @for (call of callRows(); track call.id) {\n          <li>\n            <button\n              type=\"button\"\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\"\n              [class.live-calls-page__row--assist]=\"call.needsAssistance\"\n              (click)=\"openMonitor(call.id)\"\n            >\n              <div class=\"flex min-w-0 shrink-0 items-center gap-xs md:w-72\">\n                <ed-avatar\n                  shape=\"box\"\n                  size=\"base\"\n                  [initials]=\"call.initials\"\n                  [tone]=\"call.avatarTone\"\n                />\n                <div class=\"grid min-w-0 flex-1 gap-2xs\">\n                  <div class=\"flex min-w-0 flex-wrap items-center gap-2xs\">\n                    <span class=\"fs-sm font-semibold text-dark\">{{ call.name }}</span>\n                    <!-- <span class=\"inline-flex text-light\">\n                      <ed-icon name=\"TagSimple\" [size]=\"14\" color=\"currentColor\" />\n                    </span> -->\n                    <span class=\"vr-sentiment\" [attr.data-sentiment]=\"call.sentiment\">\n                      <span class=\"vr-sentiment__icon\" aria-hidden=\"true\">\n                        <img [src]=\"call.sentimentIconSrc\" alt=\"\" width=\"16\" height=\"16\" />\n                      </span>\n                      <span>{{ call.sentimentLabel }}</span>\n                    </span>\n                  </div>\n                  <span class=\"fs-xs whitespace-nowrap text-light\">{{ call.metaLine }}</span>\n                </div>\n              </div>\n\n              <div class=\"hidden min-w-0 items-center gap-xs md:flex\">\n                <span\n                  class=\"inline-flex size-9 shrink-0 items-center justify-center rounded-md\"\n                  [class.bg-success-50]=\"call.direction === 'inbound'\"\n                  [class.text-success]=\"call.direction === 'inbound'\"\n                  [class.bg-primary-50]=\"call.direction === 'outbound'\"\n                  [class.text-primary]=\"call.direction === 'outbound'\"\n                  [smartTooltip]=\"call.directionTitle\"\n                >\n                  <ed-icon [name]=\"call.directionIcon\" [size]=\"18\" color=\"currentColor\" />\n                </span>\n                <div class=\"grid min-w-0 gap-2xs whitespace-nowrap\">\n                  <span class=\"fs-sm font-medium text-dark\">{{ call.goal }}</span>\n                  <span class=\"fs-xs text-light\">{{ call.statusSubtitle }}</span>\n                </div>\n              </div>\n\n              <div class=\"ml-auto grid shrink-0 justify-items-end gap-2xs self-stretch\">\n                <ed-badge-2 [attr.variant]=\"call.handlingVariant\" pill uppercase>\n                  {{ call.handlingLabel }}\n                </ed-badge-2>\n                <strong\n                  class=\"inline-flex items-center gap-2xs text-primary fs-2xs\"\n                  [class.text-danger]=\"call.needsAssistance\"\n                  [class.text-light]=\"!call.needsAssistance\"\n                >\n                  @if (call.needsAssistance) {\n                    <ed-icon name=\"schedule\" [size]=\"12\" color=\"currentColor\" />\n                  } @else {\n                    <eds-pulse-dot />\n                  }\n                  {{ call.started | edsElapsed }}\n                </strong>\n              </div>\n            </button>\n          </li>\n        } @empty {\n          @if (emptyState(); as state) {\n            <li\n              class=\"grid justify-items-center gap-xs rounded-md border border-light px-base py-xl text-center\"\n              role=\"status\"\n            >\n              <ed-icon [name]=\"state.icon\" [size]=\"32\" />\n              <p class=\"m-0 font-semibold text-dark\">{{ state.title }}</p>\n              <p class=\"m-0 max-w-md fs-sm text-light\">{{ state.detail }}</p>\n            </li>\n          }\n        }\n      </ul>\n    </article>\n  }\n  </div>\n</div>\n\n<eds-outbound-dial-modal\n  [open]=\"outboundOpen()\"\n  (closed)=\"closeOutbound()\"\n  (dialed)=\"closeOutbound()\"\n/>\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--IvghBHo.mjs.map