@edvak99/voice-receptionist-widget 1.1.13 → 1.1.14

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

@@ -0,0 +1,432 @@
+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, t as toE164Phone, M as ModalComponent, L as LiveCallsListService, i as isUnknownCaller, c as callerMetaLine, a as ageFromDob, E as EdAvatarComponent, I as IconComponent } from './edvak99-voice-receptionist-widget-edvak99-voice-receptionist-widget-D5VJ5SkB.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-BDGCmkoP.mjs';
+import { E as EdsPulseDotComponent } from './edvak99-voice-receptionist-widget-eds-pulse-dot.component-B8yxY-7p.mjs';
+import { E as EdsElapsedPipe } from './edvak99-voice-receptionist-widget-eds-elapsed.pipe-BFCiJOT3.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.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      <p class=\"fs-sm text-light\">Loading purposes\u2026</p>\n    } @else {\n      <form class=\"flex flex-col gap-3\" (ngSubmit)=\"submit()\" novalidate autocomplete=\"off\">\n        <div class=\"mb-sm dial-form__field dial-form__typeahead relative\">\n          <label>Patient<span required>*</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\n        @if (selectedPatient()) {\n          <div class=\"mb-sm\">\n            <label>Appointment</label>\n            @if (loadingAppointments()) {\n              <span class=\"dial-form__hint text-xs\">Loading appointments\u2026</span>\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>Phone<span required>*</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>Patient name<span required>*</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>Purpose<span required>*</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>{{ requiredFieldLabel('appointmentDate') }}<span required>*</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>{{ requiredFieldLabel('appointmentTime') }}<span required>*</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>{{ requiredFieldLabel('providerName') }}<span required>*</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\n        <section class=\"dial-form__preview rounded-lg border border-base bg-white rounded-lg 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=\"m-0 text-[13px] text-[#b91c1c]\" role=\"alert\">{{ serverError() }}</p>\n        }\n\n        <footer class=\"mt-1 flex justify-end gap-2\">\n          <button type=\"button\" class=\"btn is-secondary is-sm inline-flex items-center gap-2xs\" (click)=\"close()\" [disabled]=\"submitting()\">\n            Cancel\n          </button>\n          <button type=\"submit\" class=\"btn is-primary is-sm inline-flex items-center gap-2xs\" [disabled]=\"submitting() || !canPlaceCall()\">\n            {{ submitting() ? 'Dialing\u2026' : 'Place call' }}\n          </button>\n        </footer>\n      </form>\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" }], 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], 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      <p class=\"fs-sm text-light\">Loading purposes\u2026</p>\n    } @else {\n      <form class=\"flex flex-col gap-3\" (ngSubmit)=\"submit()\" novalidate autocomplete=\"off\">\n        <div class=\"mb-sm dial-form__field dial-form__typeahead relative\">\n          <label>Patient<span required>*</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\n        @if (selectedPatient()) {\n          <div class=\"mb-sm\">\n            <label>Appointment</label>\n            @if (loadingAppointments()) {\n              <span class=\"dial-form__hint text-xs\">Loading appointments\u2026</span>\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>Phone<span required>*</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>Patient name<span required>*</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>Purpose<span required>*</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>{{ requiredFieldLabel('appointmentDate') }}<span required>*</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>{{ requiredFieldLabel('appointmentTime') }}<span required>*</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>{{ requiredFieldLabel('providerName') }}<span required>*</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\n        <section class=\"dial-form__preview rounded-lg border border-base bg-white rounded-lg 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=\"m-0 text-[13px] text-[#b91c1c]\" role=\"alert\">{{ serverError() }}</p>\n        }\n\n        <footer class=\"mt-1 flex justify-end gap-2\">\n          <button type=\"button\" class=\"btn is-secondary is-sm inline-flex items-center gap-2xs\" (click)=\"close()\" [disabled]=\"submitting()\">\n            Cancel\n          </button>\n          <button type=\"submit\" class=\"btn is-primary is-sm inline-flex items-center gap-2xs\" [disabled]=\"submitting() || !canPlaceCall()\">\n            {{ submitting() ? 'Dialing\u2026' : 'Place call' }}\n          </button>\n        </footer>\n      </form>\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.calls = this.liveCallsList.calls;
+        this.loading = this.liveCallsList.loading;
+        this.error = this.liveCallsList.error;
+        this.outboundOpen = signal(false);
+        this.callRows = computed(() => this.calls().map((call) => this.toRow(call)));
+        this.emptyState = computed(() => {
+            if (this.calls().length > 0)
+                return null;
+            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: this.sentimentLabel(call.sentiment),
+            direction: call.direction,
+            directionIcon: call.direction === 'inbound' ? 'call_received' : 'call_made',
+            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';
+    }
+    sentimentLabel(sentiment) {
+        switch (sentiment) {
+            case 'calm':
+                return 'Calm';
+            case 'frustrated':
+                return 'Frustrated';
+            case 'urgent':
+                return 'Urgent';
+            case 'neutral':
+            default:
+                return 'Uncertain';
+        }
+    }
+    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", ngImport: i0, template: "<div class=\"grid min-h-full content-start gap-md bg-lighter p-base live-calls-page\">\n  <header class=\"flex items-start justify-between gap-base\">\n    <div class=\"grid gap-2xs\">\n      <h4>Live Calls</h4>\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\">\n      <button\n        type=\"button\"\n        class=\"btn is-secondary is-outline is-sm inline-flex items-center gap-2xs\"\n        (click)=\"openTestCall()\"\n      >\n        <ed-icon name=\"phone_call\" [size]=\"16\" />\n        Test Call\n      </button>\n      <button\n        type=\"button\"\n        class=\"btn is-primary is-sm inline-flex items-center gap-2xs\"\n        (click)=\"openOutbound()\"\n      >\n        <ed-icon name=\"call_made\" [size]=\"16\" />\n        Outbound Call\n      </button>\n    </div>\n  </header>\n\n  @if (error()) {\n    <p class=\"fs-sm text-danger\" role=\"alert\">{{ error() }}</p>\n  }\n\n  @if (loading() && callRows().length === 0) {\n    <p class=\"fs-sm text-light\">Loading live calls\u2026</p>\n  } @else {\n    <article class=\"grid gap-base overflow-hidden 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=\"grid w-full cursor-pointer grid-cols-[minmax(0,1fr)_auto] items-center gap-sm rounded-md border border-light bg-white p-sm text-left transition-colors hover:bg-lighter focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary md:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)_auto_auto]\"\n              [class.border-danger]=\"call.needsAssistance\"\n              [class.bg-danger-50]=\"call.needsAssistance\"\n              (click)=\"openMonitor(call.id)\"\n            >\n              <div class=\"grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-center gap-xs\">\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 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\n                      class=\"vr-sentiment inline-flex items-center rounded px-2xs py-2xs fs-xs font-medium\"\n                      [attr.data-sentiment]=\"call.sentiment\"\n                    >\n                      {{ call.sentimentLabel }}\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 grid-cols-[auto_minmax(0,1fr)] items-center gap-xs md:grid\">\n                <span\n                  class=\"inline-flex h-5 shrink-0 items-center justify-center rounded px-2xs\"\n                  [class.bg-primary-50]=\"call.direction === 'inbound'\"\n                  [class.text-primary]=\"call.direction === 'inbound'\"\n                  [class.bg-secondary-50]=\"call.direction === 'outbound'\"\n                  [class.text-secondary]=\"call.direction === 'outbound'\"\n                >\n                  <ed-icon [name]=\"call.directionIcon\" [size]=\"12\" color=\"currentColor\" />\n                </span>\n                <div class=\"grid min-w-0 gap-2xs\">\n                  <span class=\"truncate fs-sm font-medium text-dark\">{{ call.goal }}</span>\n                  <span class=\"truncate fs-xs text-light\">{{ call.statusSubtitle }}</span>\n                </div>\n              </div>\n\n              <div class=\"grid justify-items-end gap-2xs\">\n                <ed-badge-2 [attr.variant]=\"call.handlingVariant\" pill uppercase>\n                  {{ call.handlingLabel }}\n                </ed-badge-2>\n                <span\n                  class=\"inline-flex items-center gap-2xs font-['IBM_Plex_Mono'] fs-xs\"\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                </span>\n              </div>\n\n              <span class=\"inline-flex shrink-0 text-light\">\n                <ed-icon name=\"chevron_right\" [size]=\"20\" color=\"currentColor\" />\n              </span>\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\n<eds-outbound-dial-modal\n  [open]=\"outboundOpen()\"\n  (closed)=\"closeOutbound()\"\n  (dialed)=\"closeOutbound()\"\n/>\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"] }], 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,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"grid min-h-full content-start gap-md bg-lighter p-base live-calls-page\">\n  <header class=\"flex items-start justify-between gap-base\">\n    <div class=\"grid gap-2xs\">\n      <h4>Live Calls</h4>\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\">\n      <button\n        type=\"button\"\n        class=\"btn is-secondary is-outline is-sm inline-flex items-center gap-2xs\"\n        (click)=\"openTestCall()\"\n      >\n        <ed-icon name=\"phone_call\" [size]=\"16\" />\n        Test Call\n      </button>\n      <button\n        type=\"button\"\n        class=\"btn is-primary is-sm inline-flex items-center gap-2xs\"\n        (click)=\"openOutbound()\"\n      >\n        <ed-icon name=\"call_made\" [size]=\"16\" />\n        Outbound Call\n      </button>\n    </div>\n  </header>\n\n  @if (error()) {\n    <p class=\"fs-sm text-danger\" role=\"alert\">{{ error() }}</p>\n  }\n\n  @if (loading() && callRows().length === 0) {\n    <p class=\"fs-sm text-light\">Loading live calls\u2026</p>\n  } @else {\n    <article class=\"grid gap-base overflow-hidden 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=\"grid w-full cursor-pointer grid-cols-[minmax(0,1fr)_auto] items-center gap-sm rounded-md border border-light bg-white p-sm text-left transition-colors hover:bg-lighter focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary md:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)_auto_auto]\"\n              [class.border-danger]=\"call.needsAssistance\"\n              [class.bg-danger-50]=\"call.needsAssistance\"\n              (click)=\"openMonitor(call.id)\"\n            >\n              <div class=\"grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-center gap-xs\">\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 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\n                      class=\"vr-sentiment inline-flex items-center rounded px-2xs py-2xs fs-xs font-medium\"\n                      [attr.data-sentiment]=\"call.sentiment\"\n                    >\n                      {{ call.sentimentLabel }}\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 grid-cols-[auto_minmax(0,1fr)] items-center gap-xs md:grid\">\n                <span\n                  class=\"inline-flex h-5 shrink-0 items-center justify-center rounded px-2xs\"\n                  [class.bg-primary-50]=\"call.direction === 'inbound'\"\n                  [class.text-primary]=\"call.direction === 'inbound'\"\n                  [class.bg-secondary-50]=\"call.direction === 'outbound'\"\n                  [class.text-secondary]=\"call.direction === 'outbound'\"\n                >\n                  <ed-icon [name]=\"call.directionIcon\" [size]=\"12\" color=\"currentColor\" />\n                </span>\n                <div class=\"grid min-w-0 gap-2xs\">\n                  <span class=\"truncate fs-sm font-medium text-dark\">{{ call.goal }}</span>\n                  <span class=\"truncate fs-xs text-light\">{{ call.statusSubtitle }}</span>\n                </div>\n              </div>\n\n              <div class=\"grid justify-items-end gap-2xs\">\n                <ed-badge-2 [attr.variant]=\"call.handlingVariant\" pill uppercase>\n                  {{ call.handlingLabel }}\n                </ed-badge-2>\n                <span\n                  class=\"inline-flex items-center gap-2xs font-['IBM_Plex_Mono'] fs-xs\"\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                </span>\n              </div>\n\n              <span class=\"inline-flex shrink-0 text-light\">\n                <ed-icon name=\"chevron_right\" [size]=\"20\" color=\"currentColor\" />\n              </span>\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\n<eds-outbound-dial-modal\n  [open]=\"outboundOpen()\"\n  (closed)=\"closeOutbound()\"\n  (dialed)=\"closeOutbound()\"\n/>\n" }]
+        }] });
+
+export { LiveCallsPageComponent };
+//# sourceMappingURL=edvak99-voice-receptionist-widget-live-calls-page.component-B4Co4hwp.mjs.map