@edvak99/voice-receptionist-widget 1.1.26 → 1.1.29

package/fesm2022/edvak99-voice-receptionist-widget-call-history-page.component-Cp-Woc1p.mjs

@@ -0,0 +1,265 @@
+import * as i0 from '@angular/core';
+import { inject, signal, computed, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { A as AiReceptionistApiService, T as ToastService, n as DEFAULT_PAGE_SIZE, o as totalPages, t as triggerBlobDownload, h as historyResolution, d as historyResultChips, r as resultChipIcon, e as historyResolutionLabel, c as callerMetaLine, E as EdAvatarComponent, I as IconComponent, p as EdIconButtonComponent, f as EdButtonComponent, g as EdSkeletonComponent } from './edvak99-voice-receptionist-widget-edvak99-voice-receptionist-widget-DOYlRven.mjs';
+import { C as CallReviewService } from './edvak99-voice-receptionist-widget-call-review.service-D2-DDL-t.mjs';
+import { i as isNeedsReview } from './edvak99-voice-receptionist-widget-call-review.util-rWIPxDtQ.mjs';
+import { S as SmartTooltipDirective } from './edvak99-voice-receptionist-widget-smart-tooltip.directive-BSyOMZd4.mjs';
+import { T as TABLE_SKELETON_ROWS } from './edvak99-voice-receptionist-widget-table-skeleton.constants-C1Dg9Z_2.mjs';
+import { E as EdsSearchFieldComponent } from './edvak99-voice-receptionist-widget-eds-search-field.component-Bm4ay5d_.mjs';
+import { f as formatPlaybackTime } from './edvak99-voice-receptionist-widget-transcript-timing.util-Bbt6JFKa.mjs';
+
+class CallHistoryPageComponent {
+    constructor() {
+        this.api = inject(AiReceptionistApiService);
+        this.reviewService = inject(CallReviewService);
+        this.toast = inject(ToastService);
+        this.route = inject(ActivatedRoute);
+        this.router = inject(Router);
+        this.pageSize = DEFAULT_PAGE_SIZE;
+        this.rows = signal([]);
+        this.total = signal(0);
+        this.page = signal(1);
+        this.loading = signal(true);
+        this.skeletonRows = TABLE_SKELETON_ROWS;
+        this.reviewingId = signal(null);
+        this.search = signal('');
+        this.searchTimer = null;
+        this.direction = signal('');
+        this.outcome = signal('');
+        this.location = signal('');
+        this.reviewTab = signal('all');
+        this.filtersOpen = signal(false);
+        this.exporting = signal(false);
+        this.reviewTabs = [
+            { id: 'all', label: 'All' },
+            { id: 'needs', label: 'Needs review' },
+            { id: 'reviewed', label: 'Reviewed' },
+        ];
+        this.totalPages = computed(() => totalPages(this.total(), DEFAULT_PAGE_SIZE));
+        this.tableRows = computed(() => this.rows().map((row) => this.toRow(row)));
+    }
+    toggleFilters(event) {
+        event?.stopPropagation();
+        this.filtersOpen.update((open) => !open);
+    }
+    closeFilters() {
+        this.filtersOpen.set(false);
+    }
+    onFiltersDocClick(event) {
+        const target = event.target;
+        if (!target?.closest('[data-history-filters]')) {
+            this.filtersOpen.set(false);
+        }
+    }
+    ngOnInit() {
+        const reviewParam = this.route.snapshot.queryParamMap.get('review');
+        if (reviewParam === 'needs' || reviewParam === 'reviewed') {
+            this.reviewTab.set(reviewParam);
+        }
+        this.load();
+    }
+    load() {
+        this.loading.set(true);
+        const tab = this.reviewTab();
+        this.api
+            .getHistory({
+            q: this.search() || undefined,
+            dir: this.direction() || undefined,
+            outcome: this.outcome() || undefined,
+            location: this.location() || undefined,
+            review: tab === 'all' ? undefined : tab,
+            page: this.page(),
+            limit: DEFAULT_PAGE_SIZE,
+        })
+            .subscribe({
+            next: ({ items, total, page }) => {
+                this.rows.set(items);
+                this.total.set(total);
+                this.page.set(page);
+                this.loading.set(false);
+            },
+            error: () => this.loading.set(false),
+        });
+    }
+    ngOnDestroy() {
+        if (this.searchTimer)
+            clearTimeout(this.searchTimer);
+    }
+    onSearchInput(value) {
+        this.search.set(value);
+        if (this.searchTimer)
+            clearTimeout(this.searchTimer);
+        this.searchTimer = setTimeout(() => {
+            this.page.set(1);
+            this.load();
+        }, value.trim() ? 300 : 0);
+    }
+    clearSearch() {
+        this.search.set('');
+        this.applyFilters();
+    }
+    applyFilters() {
+        if (this.searchTimer)
+            clearTimeout(this.searchTimer);
+        this.page.set(1);
+        this.load();
+    }
+    setReviewTab(tab) {
+        this.reviewTab.set(tab);
+        this.page.set(1);
+        void this.router.navigate([], {
+            relativeTo: this.route,
+            queryParams: tab === 'all' ? { review: null } : { review: tab },
+            queryParamsHandling: 'merge',
+            replaceUrl: true,
+        });
+        this.load();
+    }
+    tabBadgeCount(tab) {
+        if (tab !== 'needs' || this.reviewTab() !== 'needs')
+            return null;
+        const count = this.total();
+        return count > 0 ? count : null;
+    }
+    prevPage() {
+        if (this.page() <= 1)
+            return;
+        this.page.update((p) => p - 1);
+        this.load();
+    }
+    nextPage() {
+        if (this.page() >= this.totalPages())
+            return;
+        this.page.update((p) => p + 1);
+        this.load();
+    }
+    markReviewed(row, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!isNeedsReview(row.review) || this.reviewingId())
+            return;
+        this.reviewingId.set(row.id);
+        this.rows.update((list) => list.map((r) => (r.id === row.id ? { ...r, review: 'reviewed' } : r)));
+        this.reviewService.markReviewed(row.id).subscribe({
+            next: () => {
+                this.reviewingId.set(null);
+                this.toast.show('Call marked as reviewed', 'success');
+                if (this.reviewTab() === 'needs')
+                    this.load();
+            },
+            error: () => {
+                this.reviewingId.set(null);
+                this.rows.update((list) => list.map((r) => (r.id === row.id ? { ...r, review: 'needs' } : r)));
+                this.toast.show('Failed to mark call as reviewed', 'error');
+            },
+        });
+    }
+    openCallDetail(id) {
+        void this.router.navigate(['../history', id], { relativeTo: this.route });
+    }
+    exportCsv() {
+        if (this.exporting())
+            return;
+        this.exporting.set(true);
+        const tab = this.reviewTab();
+        this.api
+            .exportHistoryCsv({
+            q: this.search() || undefined,
+            dir: this.direction() || undefined,
+            outcome: this.outcome() || undefined,
+            location: this.location() || undefined,
+            review: tab === 'all' ? undefined : tab,
+        })
+            .subscribe({
+            next: ({ blob, filename }) => {
+                triggerBlobDownload(blob, filename);
+                this.exporting.set(false);
+                this.toast.show('Export downloaded', 'success');
+            },
+            error: (err) => {
+                this.exporting.set(false);
+                this.toast.show(err.message ?? 'Failed to export CSV', 'error');
+            },
+        });
+    }
+    toRow(row) {
+        const resolution = historyResolution({
+            outcome: row.outcome,
+            resolution: row.resolution,
+            risk: row.risk,
+        });
+        const handledByStaff = row.handledBy === 'staff';
+        return {
+            id: row.id,
+            name: row.name?.trim() || 'Unknown Caller',
+            initials: row.initials || '?',
+            avatarTone: this.avatarTone(row),
+            metaLine: callerMetaLine({
+                dob: row.dob,
+                age: row.age,
+                gender: row.gender,
+                phone: row.phone,
+                name: row.name,
+            }),
+            timeLabel: row.started ? this.formatTime(row.started) : row.whenLabel || '—',
+            dateLabel: row.started ? this.formatDate(row.started) : '',
+            direction: row.direction,
+            directionIcon: row.direction === 'inbound' ? 'call_received' : 'call_made',
+            directionTitle: row.direction === 'inbound' ? 'Incoming call' : 'Outgoing call',
+            goals: this.goalLines(row.reason),
+            handledLabel: handledByStaff ? 'STAFF' : 'AI',
+            handledVariant: handledByStaff ? 'primary' : 'opened',
+            resolutionLabel: historyResolutionLabel(resolution),
+            resolutionVariant: resolution === 'resolved' ? 'success' : 'warning',
+            resultChips: historyResultChips(row.results, row.outcome).map((label) => ({
+                label,
+                icon: resultChipIcon(label),
+            })),
+            durationLabel: row.durationLabel ?? this.formatDuration(row.duration),
+            needsReview: isNeedsReview(row.review),
+        };
+    }
+    goalLines(reason) {
+        const raw = String(reason ?? '').trim();
+        if (!raw)
+            return [];
+        return raw
+            .split(/[\n;|/]+/)
+            .map((part) => part.trim())
+            .filter(Boolean);
+    }
+    avatarTone(row) {
+        if (!row.name?.trim() || /^unknown/i.test(row.name) || row.initials === '?')
+            return 'gray';
+        return 'brand';
+    }
+    formatTime(ts) {
+        return new Date(ts).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+    }
+    formatDate(ts) {
+        return new Date(ts).toLocaleDateString([], { month: 'short', day: 'numeric', year: 'numeric' });
+    }
+    formatDuration(sec) {
+        return formatPlaybackTime(sec);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CallHistoryPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: CallHistoryPageComponent, isStandalone: true, selector: "eds-call-history-page", host: { classAttribute: "block h-full min-h-0" }, ngImport: i0, template: "<div class=\"call-history-page flex min-h-0 flex-col overflow-hidden bg-lighter p-base space-y-base\">\r\n  <header class=\"relative z-10  flex shrink-0 items-start justify-between gap-base bg-lighter\">\r\n    <div class=\"grid gap-2xs\">\r\n      <h4>Call History</h4>\r\n      <p class=\"fs-sm text-light\">\r\n        Review past conversations and understand what happened during each call\r\n      </p>\r\n    </div>\r\n    <div class=\"flex shrink-0 items-center gap-base\">\r\n      <div class=\"relative w-60\">\r\n        <eds-search-field\r\n          type=\"text\"\r\n          inputClass=\"form-input w-full pr-10\"\r\n          placeholder=\"Search here\"\r\n          ariaLabel=\"Search call history\"\r\n          [value]=\"search()\"\r\n          (valueChange)=\"onSearchInput($event)\"\r\n          (enter)=\"applyFilters()\"\r\n        />\r\n        @if (search()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"absolute inset-y-0 right-2 inline-flex cursor-pointer items-center border-none bg-transparent px-2xs text-lighter\"\r\n            aria-label=\"Clear search\"\r\n            (click)=\"clearSearch()\"\r\n          >\r\n            <ed-icon name=\"close\" [size]=\"16\" color=\"currentColor\" />\r\n          </button>\r\n        } @else {\r\n          <span class=\"pointer-events-none absolute inset-y-0 right-3 inline-flex items-center text-lighter\">\r\n            <ed-icon name=\"search\" [size]=\"20\" color=\"currentColor\" />\r\n          </span>\r\n        }\r\n      </div>\r\n      <div\r\n        class=\"relative\"\r\n        data-history-filters\r\n        (document:click)=\"onFiltersDocClick($event)\"\r\n      >\r\n        <ed-icon-button\r\n          name=\"filter_alt\"\r\n          label=\"Filters\"\r\n          size=\"md\"\r\n          outline\r\n          allowBubble\r\n          [pressed]=\"filtersOpen()\"\r\n          toggle\r\n          (click$)=\"toggleFilters($event)\"\r\n        />\r\n        @if (filtersOpen()) {\r\n          <div\r\n            class=\"absolute right-0 top-[calc(100%+4px)] z-20 w-80 rounded-md border border-light bg-white shadow-md\"\r\n            role=\"dialog\"\r\n            aria-label=\"Filter Options\"\r\n            (click)=\"$event.stopPropagation()\"\r\n          >\r\n            <header class=\"flex items-center justify-between border-b border-light px-base py-sm\">\r\n              <h5 class=\"m-0\">Filter Options</h5>\r\n              <ed-icon-button\r\n                name=\"close\"\r\n                size=\"sm\"\r\n                label=\"Close filters\"\r\n                (click$)=\"closeFilters()\"\r\n              />\r\n            </header>\r\n            <section class=\"grid gap-sm p-base\">\r\n              <!--\r\n              <div class=\"grid gap-2xs\">\r\n                <label class=\"fs-sm font-semibold text-light\" for=\"call-history-direction\">Direction</label>\r\n                <select\r\n                  id=\"call-history-direction\"\r\n                  class=\"form-select is-sm\"\r\n                  [ngModel]=\"direction()\"\r\n                  (ngModelChange)=\"direction.set($event)\"\r\n                  autocomplete=\"off\"\r\n                  aria-label=\"Direction\"\r\n                >\r\n                  <option value=\"\">All directions</option>\r\n                  <option value=\"inbound\">Inbound</option>\r\n                  <option value=\"outbound\">Outbound</option>\r\n                </select>\r\n              </div>\r\n              <div class=\"grid gap-2xs\">\r\n                <label class=\"fs-sm font-semibold text-light\">Outcome</label>\r\n                <eds-search-field\r\n                  type=\"text\"\r\n                  inputClass=\"form-input is-sm\"\r\n                  placeholder=\"Outcome\"\r\n                  ariaLabel=\"Outcome\"\r\n                  [value]=\"outcome()\"\r\n                  (valueChange)=\"outcome.set($event)\"\r\n                  (enter)=\"applyFilters(); closeFilters()\"\r\n                />\r\n              </div>\r\n              -->\r\n              <div class=\"grid gap-2xs\">\r\n                <label class=\"fs-sm font-semibold text-light\">Location</label>\r\n                <eds-search-field\r\n                  type=\"text\"\r\n                  inputClass=\"form-input is-sm\"\r\n                  placeholder=\"Location\"\r\n                  ariaLabel=\"Location\"\r\n                  [value]=\"location()\"\r\n                  (valueChange)=\"location.set($event)\"\r\n                  (enter)=\"applyFilters(); closeFilters()\"\r\n                />\r\n              </div>\r\n            </section>\r\n            <footer class=\"flex flex-row-reverse flex-wrap items-center gap-sm border-t border-light px-base py-sm\">\r\n              <ed-button\r\n                variant=\"primary\"\r\n                fill\r\n                size=\"sm\"\r\n                (click$)=\"applyFilters(); closeFilters()\"\r\n              >\r\n                Apply\r\n              </ed-button>\r\n              <!--\r\n              <ed-button\r\n                variant=\"secondary\"\r\n                outline\r\n                size=\"sm\"\r\n                [disabled]=\"exporting()\"\r\n                (click$)=\"exportCsv()\"\r\n              >\r\n                <ed-icon slot=\"prefix\" name=\"download\" [size]=\"16\" />\r\n                Export CSV\r\n              </ed-button>\r\n              -->\r\n            </footer>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </header>\r\n\r\n  <div class=\"call-history-page__table flex min-h-0 min-w-0 flex-1 flex-col rounded-md bg-white p-base\">\r\n    <div class=\"eds-table-scroll min-h-0 min-w-0 flex-1\">\r\n    <table class=\"table-default eds-sticky-table min-w-5xl w-full\" aria-label=\"Call history\">\r\n      <thead>\r\n        <tr>\r\n          <th>Time</th>\r\n          <th>Patient/Caller</th>\r\n          <th>\r\n            <span class=\"inline-flex items-center justify-center gap-2xs\">\r\n              <ed-icon name=\"call_received\" [size]=\"12\" class=\"text-success\" color=\"currentColor\" />\r\n              <span class=\"text-light\">/</span>\r\n              <ed-icon name=\"call_made\" [size]=\"12\" class=\"text-primary\" color=\"currentColor\" />\r\n            </span>\r\n          </th>\r\n          <th>Goal</th>\r\n          <!-- <th>Handled By</th> -->\r\n          <th>Resolution</th>\r\n          <th>Result</th>\r\n          <th>Duration</th>\r\n        </tr>\r\n      </thead>\r\n      @if (loading()) {\r\n        <tbody aria-busy=\"true\">\r\n          @for (_ of skeletonRows; track _) {\r\n            <tr>\r\n              <td>\r\n                <div class=\"grid gap-2xs py-2xs\">\r\n                  <ed-skeleton class=\"h-3 w-16\"></ed-skeleton>\r\n                  <ed-skeleton class=\"h-3 w-20\"></ed-skeleton>\r\n                </div>\r\n              </td>\r\n              <td>\r\n                <div class=\"flex items-center gap-xs py-2xs\">\r\n                  <ed-skeleton class=\"h-8 w-8 !rounded-md\"></ed-skeleton>\r\n                  <div class=\"grid gap-2xs\">\r\n                    <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\r\n                    <ed-skeleton class=\"h-3 w-36\"></ed-skeleton>\r\n                  </div>\r\n                </div>\r\n              </td>\r\n              <td>\r\n                <div class=\"flex py-2xs\">\r\n                  <ed-skeleton class=\"h-5 w-5 !rounded\"></ed-skeleton>\r\n                </div>\r\n              </td>\r\n              <td><ed-skeleton class=\"h-3 w-32\"></ed-skeleton></td>\r\n              <!-- <td><ed-skeleton class=\"h-5 w-20 !rounded-full\"></ed-skeleton></td> -->\r\n              <td><ed-skeleton class=\"h-5 w-24 !rounded-full\"></ed-skeleton></td>\r\n              <td><ed-skeleton class=\"h-5 w-28 !rounded\"></ed-skeleton></td>\r\n              <td><ed-skeleton class=\"h-3 w-12 ml-auto\"></ed-skeleton></td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      } @else {\r\n      <tbody>\r\n          @for (row of tableRows(); track row.id; let i = $index) {\r\n            <tr\r\n              class=\"focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary\"\r\n              role=\"button\"\r\n              [attr.tabindex]=\"i === 0 ? 0 : -1\"\r\n              [attr.aria-label]=\"'View call details for ' + row.name\"\r\n              (click)=\"openCallDetail(row.id)\"\r\n              (keyup.enter)=\"openCallDetail(row.id)\"\r\n            >\r\n              <td>\r\n                <div class=\"grid gap-2xs whitespace-nowrap\">\r\n                  <span class=\"fs-xs font-medium text-dark\">{{ row.timeLabel }}</span>\r\n                  <span class=\"fs-xs text-light\">{{ row.dateLabel }}</span>\r\n                </div>\r\n              </td>\r\n\r\n              <td>\r\n                <div class=\"flex min-w-52 items-center gap-xs\">\r\n                  <ed-avatar\r\n                    shape=\"box\"\r\n                    size=\"base\"\r\n                    [initials]=\"row.initials\"\r\n                    [tone]=\"row.avatarTone\"\r\n                  />\r\n                  <div class=\"grid min-w-0 gap-2xs\">\r\n                    <div class=\"flex min-w-0 items-center gap-2xs\">\r\n                      <span\r\n                        class=\"inline-block min-w-0 max-w-56 truncate fs-sm font-semibold text-dark\"\r\n                        [smartTooltip]=\"row.name\"\r\n                        [tooltipOnlyWhenTruncated]=\"true\"\r\n                      >{{ row.name }}</span>\r\n                      <!-- <span class=\"inline-flex shrink-0 text-light\">\r\n                        <ed-icon name=\"TagSimple\" [size]=\"14\" color=\"currentColor\" />\r\n                      </span> -->\r\n                    </div>\r\n                    <span\r\n                      class=\"inline-block min-w-0 max-w-64 truncate fs-xs text-light\"\r\n                      [smartTooltip]=\"row.metaLine\"\r\n                      [tooltipOnlyWhenTruncated]=\"true\"\r\n                    >{{ row.metaLine }}</span>\r\n                  </div>\r\n                </div>\r\n              </td>\r\n\r\n              <td>\r\n                <span\r\n                  class=\"inline-flex h-5 w-5 items-center justify-center rounded\"\r\n                  [class.bg-success-50]=\"row.direction === 'inbound'\"\r\n                  [class.text-success]=\"row.direction === 'inbound'\"\r\n                  [class.bg-primary-50]=\"row.direction === 'outbound'\"\r\n                  [class.text-primary]=\"row.direction === 'outbound'\"\r\n                  [smartTooltip]=\"row.directionTitle\"\r\n                  [attr.aria-label]=\"row.directionTitle\"\r\n                >\r\n                  <ed-icon [name]=\"row.directionIcon\" [size]=\"12\" color=\"currentColor\" />\r\n                </span>\r\n              </td>\r\n\r\n              <td>\r\n                <div class=\"grid gap-2xs\">\r\n                  @for (goal of row.goals; track goal) {\r\n                    <span\r\n                      class=\"inline-block min-w-0 max-w-56 truncate fs-sm font-medium text-dark\"\r\n                      [smartTooltip]=\"goal\"\r\n                      [tooltipOnlyWhenTruncated]=\"true\"\r\n                    >{{ goal }}</span>\r\n                  } @empty {\r\n                    <span class=\"fs-sm text-light\">\u2014</span>\r\n                  }\r\n                </div>\r\n              </td>\r\n\r\n              <!--\r\n              <td>\r\n                <ed-badge-2 [attr.variant]=\"row.handledVariant\" pill uppercase>\r\n                  {{ row.handledLabel }}\r\n                </ed-badge-2>\r\n              </td>\r\n              -->\r\n\r\n              <td>\r\n                <ed-badge-2 [attr.variant]=\"row.resolutionVariant\" pill uppercase>\r\n                  {{ row.resolutionLabel }}\r\n                </ed-badge-2>\r\n              </td>\r\n\r\n              <td>\r\n                <div class=\"flex min-w-0 max-w-80 flex-wrap gap-2xs\">\r\n                  @for (chip of row.resultChips; track chip.label) {\r\n                    <span\r\n                      class=\"inline-flex h-5 max-w-48 min-w-0 items-center gap-2xs rounded bg-light px-2xs fs-xs font-medium text-dark\"\r\n                    >\r\n                      <ed-icon [name]=\"chip.icon\" [size]=\"12\" color=\"currentColor\" />\r\n                      <span\r\n                        class=\"min-w-0 truncate\"\r\n                        [smartTooltip]=\"chip.label\"\r\n                        [tooltipOnlyWhenTruncated]=\"true\"\r\n                      >{{ chip.label }}</span>\r\n                    </span>\r\n                  } @empty {\r\n                    <span class=\"fs-sm text-light\">\u2014</span>\r\n                  }\r\n                </div>\r\n              </td>\r\n\r\n              <td class=\"whitespace-nowrap tabular-nums fs-sm font-medium\">\r\n                {{ row.durationLabel }}\r\n              </td>\r\n            </tr>\r\n          } @empty {\r\n            <tr class=\"empty-row\">\r\n              <td colspan=\"7\" class=\"py-lg fs-sm text-light\">\r\n                No calls match this filter.\r\n              </td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      }\r\n    </table>\r\n    </div>\r\n  </div>\r\n\r\n  <footer class=\"mt-base flex shrink-0 items-center justify-between border-t border-light pt-sm hidden\">\r\n    <span class=\"fs-sm text-light\">\r\n      Page {{ page() }} of {{ totalPages() }} \u00B7 {{ total() }} total\r\n    </span>\r\n    <div class=\"flex gap-xs\">\r\n      <ed-button\r\n        variant=\"secondary\"\r\n        outline\r\n        size=\"sm\"\r\n        [disabled]=\"page() <= 1\"\r\n        (click$)=\"prevPage()\"\r\n      >\r\n        Previous\r\n      </ed-button>\r\n      <ed-button\r\n        variant=\"secondary\"\r\n        outline\r\n        size=\"sm\"\r\n        [disabled]=\"page() >= totalPages()\"\r\n        (click$)=\"nextPage()\"\r\n      >\r\n        Next\r\n      </ed-button>\r\n    </div>\r\n  </footer>\r\n</div>\r\n", styles: [":host{display:block;height:100%;min-height:0}.call-history-page{height:100%;min-height:24rem}.call-history-page__table{min-height:16rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: EdIconButtonComponent, selector: "ed-icon-button", inputs: ["label", "name", "size", "variant", "allowBubble", "ghost", "outline", "solid", "subtle", "shape", "type", "disabled", "loading", "toggle", "pressed", "id", "title", "nameAttr", "value", "autofocus", "tabIndex"], outputs: ["click", "focus", "blur", "click$", "focus$", "blur$"] }, { 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: EdsSearchFieldComponent, selector: "eds-search-field", inputs: ["value", "inputId", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange", "enter"] }, { 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"] }, { 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: CallHistoryPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-call-history-page', imports: [
+                        FormsModule,
+                        EdAvatarComponent,
+                        IconComponent,
+                        EdIconButtonComponent,
+                        EdButtonComponent,
+                        EdsSearchFieldComponent,
+                        SmartTooltipDirective,
+                        EdSkeletonComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], host: { class: 'block h-full min-h-0' }, template: "<div class=\"call-history-page flex min-h-0 flex-col overflow-hidden bg-lighter p-base space-y-base\">\r\n  <header class=\"relative z-10  flex shrink-0 items-start justify-between gap-base bg-lighter\">\r\n    <div class=\"grid gap-2xs\">\r\n      <h4>Call History</h4>\r\n      <p class=\"fs-sm text-light\">\r\n        Review past conversations and understand what happened during each call\r\n      </p>\r\n    </div>\r\n    <div class=\"flex shrink-0 items-center gap-base\">\r\n      <div class=\"relative w-60\">\r\n        <eds-search-field\r\n          type=\"text\"\r\n          inputClass=\"form-input w-full pr-10\"\r\n          placeholder=\"Search here\"\r\n          ariaLabel=\"Search call history\"\r\n          [value]=\"search()\"\r\n          (valueChange)=\"onSearchInput($event)\"\r\n          (enter)=\"applyFilters()\"\r\n        />\r\n        @if (search()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"absolute inset-y-0 right-2 inline-flex cursor-pointer items-center border-none bg-transparent px-2xs text-lighter\"\r\n            aria-label=\"Clear search\"\r\n            (click)=\"clearSearch()\"\r\n          >\r\n            <ed-icon name=\"close\" [size]=\"16\" color=\"currentColor\" />\r\n          </button>\r\n        } @else {\r\n          <span class=\"pointer-events-none absolute inset-y-0 right-3 inline-flex items-center text-lighter\">\r\n            <ed-icon name=\"search\" [size]=\"20\" color=\"currentColor\" />\r\n          </span>\r\n        }\r\n      </div>\r\n      <div\r\n        class=\"relative\"\r\n        data-history-filters\r\n        (document:click)=\"onFiltersDocClick($event)\"\r\n      >\r\n        <ed-icon-button\r\n          name=\"filter_alt\"\r\n          label=\"Filters\"\r\n          size=\"md\"\r\n          outline\r\n          allowBubble\r\n          [pressed]=\"filtersOpen()\"\r\n          toggle\r\n          (click$)=\"toggleFilters($event)\"\r\n        />\r\n        @if (filtersOpen()) {\r\n          <div\r\n            class=\"absolute right-0 top-[calc(100%+4px)] z-20 w-80 rounded-md border border-light bg-white shadow-md\"\r\n            role=\"dialog\"\r\n            aria-label=\"Filter Options\"\r\n            (click)=\"$event.stopPropagation()\"\r\n          >\r\n            <header class=\"flex items-center justify-between border-b border-light px-base py-sm\">\r\n              <h5 class=\"m-0\">Filter Options</h5>\r\n              <ed-icon-button\r\n                name=\"close\"\r\n                size=\"sm\"\r\n                label=\"Close filters\"\r\n                (click$)=\"closeFilters()\"\r\n              />\r\n            </header>\r\n            <section class=\"grid gap-sm p-base\">\r\n              <!--\r\n              <div class=\"grid gap-2xs\">\r\n                <label class=\"fs-sm font-semibold text-light\" for=\"call-history-direction\">Direction</label>\r\n                <select\r\n                  id=\"call-history-direction\"\r\n                  class=\"form-select is-sm\"\r\n                  [ngModel]=\"direction()\"\r\n                  (ngModelChange)=\"direction.set($event)\"\r\n                  autocomplete=\"off\"\r\n                  aria-label=\"Direction\"\r\n                >\r\n                  <option value=\"\">All directions</option>\r\n                  <option value=\"inbound\">Inbound</option>\r\n                  <option value=\"outbound\">Outbound</option>\r\n                </select>\r\n              </div>\r\n              <div class=\"grid gap-2xs\">\r\n                <label class=\"fs-sm font-semibold text-light\">Outcome</label>\r\n                <eds-search-field\r\n                  type=\"text\"\r\n                  inputClass=\"form-input is-sm\"\r\n                  placeholder=\"Outcome\"\r\n                  ariaLabel=\"Outcome\"\r\n                  [value]=\"outcome()\"\r\n                  (valueChange)=\"outcome.set($event)\"\r\n                  (enter)=\"applyFilters(); closeFilters()\"\r\n                />\r\n              </div>\r\n              -->\r\n              <div class=\"grid gap-2xs\">\r\n                <label class=\"fs-sm font-semibold text-light\">Location</label>\r\n                <eds-search-field\r\n                  type=\"text\"\r\n                  inputClass=\"form-input is-sm\"\r\n                  placeholder=\"Location\"\r\n                  ariaLabel=\"Location\"\r\n                  [value]=\"location()\"\r\n                  (valueChange)=\"location.set($event)\"\r\n                  (enter)=\"applyFilters(); closeFilters()\"\r\n                />\r\n              </div>\r\n            </section>\r\n            <footer class=\"flex flex-row-reverse flex-wrap items-center gap-sm border-t border-light px-base py-sm\">\r\n              <ed-button\r\n                variant=\"primary\"\r\n                fill\r\n                size=\"sm\"\r\n                (click$)=\"applyFilters(); closeFilters()\"\r\n              >\r\n                Apply\r\n              </ed-button>\r\n              <!--\r\n              <ed-button\r\n                variant=\"secondary\"\r\n                outline\r\n                size=\"sm\"\r\n                [disabled]=\"exporting()\"\r\n                (click$)=\"exportCsv()\"\r\n              >\r\n                <ed-icon slot=\"prefix\" name=\"download\" [size]=\"16\" />\r\n                Export CSV\r\n              </ed-button>\r\n              -->\r\n            </footer>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </header>\r\n\r\n  <div class=\"call-history-page__table flex min-h-0 min-w-0 flex-1 flex-col rounded-md bg-white p-base\">\r\n    <div class=\"eds-table-scroll min-h-0 min-w-0 flex-1\">\r\n    <table class=\"table-default eds-sticky-table min-w-5xl w-full\" aria-label=\"Call history\">\r\n      <thead>\r\n        <tr>\r\n          <th>Time</th>\r\n          <th>Patient/Caller</th>\r\n          <th>\r\n            <span class=\"inline-flex items-center justify-center gap-2xs\">\r\n              <ed-icon name=\"call_received\" [size]=\"12\" class=\"text-success\" color=\"currentColor\" />\r\n              <span class=\"text-light\">/</span>\r\n              <ed-icon name=\"call_made\" [size]=\"12\" class=\"text-primary\" color=\"currentColor\" />\r\n            </span>\r\n          </th>\r\n          <th>Goal</th>\r\n          <!-- <th>Handled By</th> -->\r\n          <th>Resolution</th>\r\n          <th>Result</th>\r\n          <th>Duration</th>\r\n        </tr>\r\n      </thead>\r\n      @if (loading()) {\r\n        <tbody aria-busy=\"true\">\r\n          @for (_ of skeletonRows; track _) {\r\n            <tr>\r\n              <td>\r\n                <div class=\"grid gap-2xs py-2xs\">\r\n                  <ed-skeleton class=\"h-3 w-16\"></ed-skeleton>\r\n                  <ed-skeleton class=\"h-3 w-20\"></ed-skeleton>\r\n                </div>\r\n              </td>\r\n              <td>\r\n                <div class=\"flex items-center gap-xs py-2xs\">\r\n                  <ed-skeleton class=\"h-8 w-8 !rounded-md\"></ed-skeleton>\r\n                  <div class=\"grid gap-2xs\">\r\n                    <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\r\n                    <ed-skeleton class=\"h-3 w-36\"></ed-skeleton>\r\n                  </div>\r\n                </div>\r\n              </td>\r\n              <td>\r\n                <div class=\"flex py-2xs\">\r\n                  <ed-skeleton class=\"h-5 w-5 !rounded\"></ed-skeleton>\r\n                </div>\r\n              </td>\r\n              <td><ed-skeleton class=\"h-3 w-32\"></ed-skeleton></td>\r\n              <!-- <td><ed-skeleton class=\"h-5 w-20 !rounded-full\"></ed-skeleton></td> -->\r\n              <td><ed-skeleton class=\"h-5 w-24 !rounded-full\"></ed-skeleton></td>\r\n              <td><ed-skeleton class=\"h-5 w-28 !rounded\"></ed-skeleton></td>\r\n              <td><ed-skeleton class=\"h-3 w-12 ml-auto\"></ed-skeleton></td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      } @else {\r\n      <tbody>\r\n          @for (row of tableRows(); track row.id; let i = $index) {\r\n            <tr\r\n              class=\"focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary\"\r\n              role=\"button\"\r\n              [attr.tabindex]=\"i === 0 ? 0 : -1\"\r\n              [attr.aria-label]=\"'View call details for ' + row.name\"\r\n              (click)=\"openCallDetail(row.id)\"\r\n              (keyup.enter)=\"openCallDetail(row.id)\"\r\n            >\r\n              <td>\r\n                <div class=\"grid gap-2xs whitespace-nowrap\">\r\n                  <span class=\"fs-xs font-medium text-dark\">{{ row.timeLabel }}</span>\r\n                  <span class=\"fs-xs text-light\">{{ row.dateLabel }}</span>\r\n                </div>\r\n              </td>\r\n\r\n              <td>\r\n                <div class=\"flex min-w-52 items-center gap-xs\">\r\n                  <ed-avatar\r\n                    shape=\"box\"\r\n                    size=\"base\"\r\n                    [initials]=\"row.initials\"\r\n                    [tone]=\"row.avatarTone\"\r\n                  />\r\n                  <div class=\"grid min-w-0 gap-2xs\">\r\n                    <div class=\"flex min-w-0 items-center gap-2xs\">\r\n                      <span\r\n                        class=\"inline-block min-w-0 max-w-56 truncate fs-sm font-semibold text-dark\"\r\n                        [smartTooltip]=\"row.name\"\r\n                        [tooltipOnlyWhenTruncated]=\"true\"\r\n                      >{{ row.name }}</span>\r\n                      <!-- <span class=\"inline-flex shrink-0 text-light\">\r\n                        <ed-icon name=\"TagSimple\" [size]=\"14\" color=\"currentColor\" />\r\n                      </span> -->\r\n                    </div>\r\n                    <span\r\n                      class=\"inline-block min-w-0 max-w-64 truncate fs-xs text-light\"\r\n                      [smartTooltip]=\"row.metaLine\"\r\n                      [tooltipOnlyWhenTruncated]=\"true\"\r\n                    >{{ row.metaLine }}</span>\r\n                  </div>\r\n                </div>\r\n              </td>\r\n\r\n              <td>\r\n                <span\r\n                  class=\"inline-flex h-5 w-5 items-center justify-center rounded\"\r\n                  [class.bg-success-50]=\"row.direction === 'inbound'\"\r\n                  [class.text-success]=\"row.direction === 'inbound'\"\r\n                  [class.bg-primary-50]=\"row.direction === 'outbound'\"\r\n                  [class.text-primary]=\"row.direction === 'outbound'\"\r\n                  [smartTooltip]=\"row.directionTitle\"\r\n                  [attr.aria-label]=\"row.directionTitle\"\r\n                >\r\n                  <ed-icon [name]=\"row.directionIcon\" [size]=\"12\" color=\"currentColor\" />\r\n                </span>\r\n              </td>\r\n\r\n              <td>\r\n                <div class=\"grid gap-2xs\">\r\n                  @for (goal of row.goals; track goal) {\r\n                    <span\r\n                      class=\"inline-block min-w-0 max-w-56 truncate fs-sm font-medium text-dark\"\r\n                      [smartTooltip]=\"goal\"\r\n                      [tooltipOnlyWhenTruncated]=\"true\"\r\n                    >{{ goal }}</span>\r\n                  } @empty {\r\n                    <span class=\"fs-sm text-light\">\u2014</span>\r\n                  }\r\n                </div>\r\n              </td>\r\n\r\n              <!--\r\n              <td>\r\n                <ed-badge-2 [attr.variant]=\"row.handledVariant\" pill uppercase>\r\n                  {{ row.handledLabel }}\r\n                </ed-badge-2>\r\n              </td>\r\n              -->\r\n\r\n              <td>\r\n                <ed-badge-2 [attr.variant]=\"row.resolutionVariant\" pill uppercase>\r\n                  {{ row.resolutionLabel }}\r\n                </ed-badge-2>\r\n              </td>\r\n\r\n              <td>\r\n                <div class=\"flex min-w-0 max-w-80 flex-wrap gap-2xs\">\r\n                  @for (chip of row.resultChips; track chip.label) {\r\n                    <span\r\n                      class=\"inline-flex h-5 max-w-48 min-w-0 items-center gap-2xs rounded bg-light px-2xs fs-xs font-medium text-dark\"\r\n                    >\r\n                      <ed-icon [name]=\"chip.icon\" [size]=\"12\" color=\"currentColor\" />\r\n                      <span\r\n                        class=\"min-w-0 truncate\"\r\n                        [smartTooltip]=\"chip.label\"\r\n                        [tooltipOnlyWhenTruncated]=\"true\"\r\n                      >{{ chip.label }}</span>\r\n                    </span>\r\n                  } @empty {\r\n                    <span class=\"fs-sm text-light\">\u2014</span>\r\n                  }\r\n                </div>\r\n              </td>\r\n\r\n              <td class=\"whitespace-nowrap tabular-nums fs-sm font-medium\">\r\n                {{ row.durationLabel }}\r\n              </td>\r\n            </tr>\r\n          } @empty {\r\n            <tr class=\"empty-row\">\r\n              <td colspan=\"7\" class=\"py-lg fs-sm text-light\">\r\n                No calls match this filter.\r\n              </td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      }\r\n    </table>\r\n    </div>\r\n  </div>\r\n\r\n  <footer class=\"mt-base flex shrink-0 items-center justify-between border-t border-light pt-sm hidden\">\r\n    <span class=\"fs-sm text-light\">\r\n      Page {{ page() }} of {{ totalPages() }} \u00B7 {{ total() }} total\r\n    </span>\r\n    <div class=\"flex gap-xs\">\r\n      <ed-button\r\n        variant=\"secondary\"\r\n        outline\r\n        size=\"sm\"\r\n        [disabled]=\"page() <= 1\"\r\n        (click$)=\"prevPage()\"\r\n      >\r\n        Previous\r\n      </ed-button>\r\n      <ed-button\r\n        variant=\"secondary\"\r\n        outline\r\n        size=\"sm\"\r\n        [disabled]=\"page() >= totalPages()\"\r\n        (click$)=\"nextPage()\"\r\n      >\r\n        Next\r\n      </ed-button>\r\n    </div>\r\n  </footer>\r\n</div>\r\n", styles: [":host{display:block;height:100%;min-height:0}.call-history-page{height:100%;min-height:24rem}.call-history-page__table{min-height:16rem}\n"] }]
+        }] });
+
+export { CallHistoryPageComponent };
+//# sourceMappingURL=edvak99-voice-receptionist-widget-call-history-page.component-Cp-Woc1p.mjs.map

package/fesm2022/edvak99-voice-receptionist-widget-call-history-page.component-Cp-Woc1p.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"edvak99-voice-receptionist-widget-call-history-page.component-Cp-Woc1p.mjs","sources":["../../../src/lib/pages/call-history-page/call-history-page.component.ts","../../../src/lib/pages/call-history-page/call-history-page.component.html"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  computed,\r\n  CUSTOM_ELEMENTS_SCHEMA,\r\n  inject,\r\n  OnDestroy,\r\n  OnInit,\r\n  signal,\r\n} from '@angular/core';\r\nimport { ActivatedRoute, Router } from '@angular/router';\r\nimport { FormsModule } from '@angular/forms';\r\n\r\nimport { HistoryCall } from '../../models/ai-receptionist.types';\r\nimport { DEFAULT_PAGE_SIZE, totalPages as calcTotalPages } from '../../models/pagination';\r\nimport { AiReceptionistApiService } from '../../services/ai-receptionist-api.service';\r\nimport { CallReviewService } from '../../services/call-review.service';\r\nimport {\r\n  callerMetaLine,\r\n  historyResolution,\r\n  historyResolutionLabel,\r\n  historyResultChips,\r\n  resultChipIcon,\r\n} from '../../utils/call-history-display.util';\r\nimport { isNeedsReview, ReviewFilterTab } from '../../utils/call-review.util';\r\nimport { EdButtonComponent } from '../../ui/ed-button.component';\r\nimport { EdSkeletonComponent } from '../../ui/ed-skeleton.component';\r\n\r\nimport { SmartTooltipDirective } from '../../shared/smart-tooltip.directive';\r\nimport { TABLE_SKELETON_ROWS } from '../../shared/table-skeleton.constants';\r\nimport { ToastService } from '../../shared/toast.service';\r\nimport { triggerBlobDownload } from '../../utils/csv-download.util';\r\nimport { EdAvatarComponent } from '../../ui/ed-avatar.component';\r\nimport { IconComponent } from '../../ui/ed-icon.component';\r\nimport { EdIconButtonComponent } from '../../ui/ed-icon-button.component';\r\nimport { EdsSearchFieldComponent } from '../../ui/eds-search-field.component';\r\nimport { formatPlaybackTime } from '../../utils/transcript-timing.util';\r\n\r\ninterface HistoryRowVm {\r\n  id: string;\r\n  name: string;\r\n  initials: string;\r\n  avatarTone: 'gray' | 'brand';\r\n  metaLine: string;\r\n  timeLabel: string;\r\n  dateLabel: string;\r\n  direction: 'inbound' | 'outbound';\r\n  directionIcon: string;\r\n  directionTitle: string;\r\n  goals: string[];\r\n  handledLabel: string;\r\n  handledVariant: 'opened' | 'primary';\r\n  resolutionLabel: string;\r\n  resolutionVariant: 'success' | 'warning';\r\n  resultChips: { label: string; icon: string }[];\r\n  durationLabel: string;\r\n  needsReview: boolean;\r\n}\r\n\r\n@Component({\r\n  selector: 'eds-call-history-page',\r\n  imports: [\r\n    FormsModule,\r\n    EdAvatarComponent,\r\n    IconComponent,\r\n    EdIconButtonComponent,\r\n    EdButtonComponent,\r\n    EdsSearchFieldComponent,\r\n    SmartTooltipDirective,\r\n    EdSkeletonComponent,\r\n  ],\r\n  templateUrl: './call-history-page.component.html',\r\n  styleUrl: './call-history-page.component.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\r\n  host: { class: 'block h-full min-h-0' },\r\n})\r\nexport class CallHistoryPageComponent implements OnInit, OnDestroy {\r\n  private readonly api = inject(AiReceptionistApiService);\r\n  private readonly reviewService = inject(CallReviewService);\r\n  private readonly toast = inject(ToastService);\r\n  private readonly route = inject(ActivatedRoute);\r\n  private readonly router = inject(Router);\r\n\r\n  protected readonly pageSize = DEFAULT_PAGE_SIZE;\r\n  protected readonly rows = signal<HistoryCall[]>([]);\r\n  protected readonly total = signal(0);\r\n  protected readonly page = signal(1);\r\n  protected readonly loading = signal(true);\r\n  protected readonly skeletonRows = TABLE_SKELETON_ROWS;\r\n  protected readonly reviewingId = signal<string | null>(null);\r\n  protected readonly search = signal('');\r\n  private searchTimer: ReturnType<typeof setTimeout> | null = null;\r\n  protected readonly direction = signal('');\r\n  protected readonly outcome = signal('');\r\n  protected readonly location = signal('');\r\n  protected readonly reviewTab = signal<ReviewFilterTab>('all');\r\n  protected readonly filtersOpen = signal(false);\r\n  protected readonly exporting = signal(false);\r\n\r\n  protected toggleFilters(event?: Event): void {\r\n    event?.stopPropagation();\r\n    this.filtersOpen.update((open) => !open);\r\n  }\r\n\r\n  protected closeFilters(): void {\r\n    this.filtersOpen.set(false);\r\n  }\r\n\r\n  protected onFiltersDocClick(event: MouseEvent): void {\r\n    const target = event.target as HTMLElement | null;\r\n    if (!target?.closest('[data-history-filters]')) {\r\n      this.filtersOpen.set(false);\r\n    }\r\n  }\r\n\r\n  protected readonly reviewTabs: { id: ReviewFilterTab; label: string }[] = [\r\n    { id: 'all', label: 'All' },\r\n    { id: 'needs', label: 'Needs review' },\r\n    { id: 'reviewed', label: 'Reviewed' },\r\n  ];\r\n\r\n  protected readonly totalPages = computed(() => calcTotalPages(this.total(), DEFAULT_PAGE_SIZE));\r\n\r\n  protected readonly tableRows = computed(() => this.rows().map((row) => this.toRow(row)));\r\n\r\n  ngOnInit(): void {\r\n    const reviewParam = this.route.snapshot.queryParamMap.get('review');\r\n    if (reviewParam === 'needs' || reviewParam === 'reviewed') {\r\n      this.reviewTab.set(reviewParam);\r\n    }\r\n    this.load();\r\n  }\r\n\r\n  protected load(): void {\r\n    this.loading.set(true);\r\n    const tab = this.reviewTab();\r\n    this.api\r\n      .getHistory({\r\n        q: this.search() || undefined,\r\n        dir: this.direction() || undefined,\r\n        outcome: this.outcome() || undefined,\r\n        location: this.location() || undefined,\r\n        review: tab === 'all' ? undefined : tab,\r\n        page: this.page(),\r\n        limit: DEFAULT_PAGE_SIZE,\r\n      })\r\n      .subscribe({\r\n        next: ({ items, total, page }) => {\r\n          this.rows.set(items);\r\n          this.total.set(total);\r\n          this.page.set(page);\r\n          this.loading.set(false);\r\n        },\r\n        error: () => this.loading.set(false),\r\n      });\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    if (this.searchTimer) clearTimeout(this.searchTimer);\r\n  }\r\n\r\n  protected onSearchInput(value: string): void {\r\n    this.search.set(value);\r\n    if (this.searchTimer) clearTimeout(this.searchTimer);\r\n    this.searchTimer = setTimeout(() => {\r\n      this.page.set(1);\r\n      this.load();\r\n    }, value.trim() ? 300 : 0);\r\n  }\r\n\r\n  protected clearSearch(): void {\r\n    this.search.set('');\r\n    this.applyFilters();\r\n  }\r\n\r\n  protected applyFilters(): void {\r\n    if (this.searchTimer) clearTimeout(this.searchTimer);\r\n    this.page.set(1);\r\n    this.load();\r\n  }\r\n\r\n  protected setReviewTab(tab: ReviewFilterTab): void {\r\n    this.reviewTab.set(tab);\r\n    this.page.set(1);\r\n    void this.router.navigate([], {\r\n      relativeTo: this.route,\r\n      queryParams: tab === 'all' ? { review: null } : { review: tab },\r\n      queryParamsHandling: 'merge',\r\n      replaceUrl: true,\r\n    });\r\n    this.load();\r\n  }\r\n\r\n  protected tabBadgeCount(tab: ReviewFilterTab): number | null {\r\n    if (tab !== 'needs' || this.reviewTab() !== 'needs') return null;\r\n    const count = this.total();\r\n    return count > 0 ? count : null;\r\n  }\r\n\r\n  protected prevPage(): void {\r\n    if (this.page() <= 1) return;\r\n    this.page.update((p) => p - 1);\r\n    this.load();\r\n  }\r\n\r\n  protected nextPage(): void {\r\n    if (this.page() >= this.totalPages()) return;\r\n    this.page.update((p) => p + 1);\r\n    this.load();\r\n  }\r\n\r\n  protected markReviewed(row: HistoryCall, event: Event): void {\r\n    event.preventDefault();\r\n    event.stopPropagation();\r\n    if (!isNeedsReview(row.review) || this.reviewingId()) return;\r\n\r\n    this.reviewingId.set(row.id);\r\n    this.rows.update((list) =>\r\n      list.map((r) => (r.id === row.id ? { ...r, review: 'reviewed' as const } : r)),\r\n    );\r\n\r\n    this.reviewService.markReviewed(row.id).subscribe({\r\n      next: () => {\r\n        this.reviewingId.set(null);\r\n        this.toast.show('Call marked as reviewed', 'success');\r\n        if (this.reviewTab() === 'needs') this.load();\r\n      },\r\n      error: () => {\r\n        this.reviewingId.set(null);\r\n        this.rows.update((list) =>\r\n          list.map((r) => (r.id === row.id ? { ...r, review: 'needs' as const } : r)),\r\n        );\r\n        this.toast.show('Failed to mark call as reviewed', 'error');\r\n      },\r\n    });\r\n  }\r\n\r\n  protected openCallDetail(id: string): void {\r\n    void this.router.navigate(['../history', id], { relativeTo: this.route });\r\n  }\r\n\r\n  protected exportCsv(): void {\r\n    if (this.exporting()) return;\r\n    this.exporting.set(true);\r\n    const tab = this.reviewTab();\r\n    this.api\r\n      .exportHistoryCsv({\r\n        q: this.search() || undefined,\r\n        dir: this.direction() || undefined,\r\n        outcome: this.outcome() || undefined,\r\n        location: this.location() || undefined,\r\n        review: tab === 'all' ? undefined : tab,\r\n      })\r\n      .subscribe({\r\n        next: ({ blob, filename }) => {\r\n          triggerBlobDownload(blob, filename);\r\n          this.exporting.set(false);\r\n          this.toast.show('Export downloaded', 'success');\r\n        },\r\n        error: (err: { message?: string }) => {\r\n          this.exporting.set(false);\r\n          this.toast.show(err.message ?? 'Failed to export CSV', 'error');\r\n        },\r\n      });\r\n  }\r\n\r\n  private toRow(row: HistoryCall): HistoryRowVm {\r\n    const resolution = historyResolution({\r\n      outcome: row.outcome,\r\n      resolution: row.resolution,\r\n      risk: row.risk,\r\n    });\r\n    const handledByStaff = row.handledBy === 'staff';\r\n\r\n    return {\r\n      id: row.id,\r\n      name: row.name?.trim() || 'Unknown Caller',\r\n      initials: row.initials || '?',\r\n      avatarTone: this.avatarTone(row),\r\n      metaLine: callerMetaLine({\r\n        dob: row.dob,\r\n        age: row.age,\r\n        gender: row.gender,\r\n        phone: row.phone,\r\n        name: row.name,\r\n      }),\r\n      timeLabel: row.started ? this.formatTime(row.started) : row.whenLabel || '—',\r\n      dateLabel: row.started ? this.formatDate(row.started) : '',\r\n      direction: row.direction,\r\n      directionIcon: row.direction === 'inbound' ? 'call_received' : 'call_made',\r\n      directionTitle: row.direction === 'inbound' ? 'Incoming call' : 'Outgoing call',\r\n      goals: this.goalLines(row.reason),\r\n      handledLabel: handledByStaff ? 'STAFF' : 'AI',\r\n      handledVariant: handledByStaff ? 'primary' : 'opened',\r\n      resolutionLabel: historyResolutionLabel(resolution),\r\n      resolutionVariant: resolution === 'resolved' ? 'success' : 'warning',\r\n      resultChips: historyResultChips(row.results, row.outcome).map((label) => ({\r\n        label,\r\n        icon: resultChipIcon(label),\r\n      })),\r\n      durationLabel: row.durationLabel ?? this.formatDuration(row.duration),\r\n      needsReview: isNeedsReview(row.review),\r\n    };\r\n  }\r\n\r\n  private goalLines(reason: string | undefined): string[] {\r\n    const raw = String(reason ?? '').trim();\r\n    if (!raw) return [];\r\n    return raw\r\n      .split(/[\\n;|/]+/)\r\n      .map((part) => part.trim())\r\n      .filter(Boolean);\r\n  }\r\n\r\n  private avatarTone(row: HistoryCall): 'gray' | 'brand' {\r\n    if (!row.name?.trim() || /^unknown/i.test(row.name) || row.initials === '?') return 'gray';\r\n    return 'brand';\r\n  }\r\n\r\n  private formatTime(ts: number): string {\r\n    return new Date(ts).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });\r\n  }\r\n\r\n  private formatDate(ts: number): string {\r\n    return new Date(ts).toLocaleDateString([], { month: 'short', day: 'numeric', year: 'numeric' });\r\n  }\r\n\r\n  private formatDuration(sec: number): string {\r\n    return formatPlaybackTime(sec);\r\n  }\r\n}\r\n","<div class=\"call-history-page flex min-h-0 flex-col overflow-hidden bg-lighter p-base space-y-base\">\r\n  <header class=\"relative z-10  flex shrink-0 items-start justify-between gap-base bg-lighter\">\r\n    <div class=\"grid gap-2xs\">\r\n      <h4>Call History</h4>\r\n      <p class=\"fs-sm text-light\">\r\n        Review past conversations and understand what happened during each call\r\n      </p>\r\n    </div>\r\n    <div class=\"flex shrink-0 items-center gap-base\">\r\n      <div class=\"relative w-60\">\r\n        <eds-search-field\r\n          type=\"text\"\r\n          inputClass=\"form-input w-full pr-10\"\r\n          placeholder=\"Search here\"\r\n          ariaLabel=\"Search call history\"\r\n          [value]=\"search()\"\r\n          (valueChange)=\"onSearchInput($event)\"\r\n          (enter)=\"applyFilters()\"\r\n        />\r\n        @if (search()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"absolute inset-y-0 right-2 inline-flex cursor-pointer items-center border-none bg-transparent px-2xs text-lighter\"\r\n            aria-label=\"Clear search\"\r\n            (click)=\"clearSearch()\"\r\n          >\r\n            <ed-icon name=\"close\" [size]=\"16\" color=\"currentColor\" />\r\n          </button>\r\n        } @else {\r\n          <span class=\"pointer-events-none absolute inset-y-0 right-3 inline-flex items-center text-lighter\">\r\n            <ed-icon name=\"search\" [size]=\"20\" color=\"currentColor\" />\r\n          </span>\r\n        }\r\n      </div>\r\n      <div\r\n        class=\"relative\"\r\n        data-history-filters\r\n        (document:click)=\"onFiltersDocClick($event)\"\r\n      >\r\n        <ed-icon-button\r\n          name=\"filter_alt\"\r\n          label=\"Filters\"\r\n          size=\"md\"\r\n          outline\r\n          allowBubble\r\n          [pressed]=\"filtersOpen()\"\r\n          toggle\r\n          (click$)=\"toggleFilters($event)\"\r\n        />\r\n        @if (filtersOpen()) {\r\n          <div\r\n            class=\"absolute right-0 top-[calc(100%+4px)] z-20 w-80 rounded-md border border-light bg-white shadow-md\"\r\n            role=\"dialog\"\r\n            aria-label=\"Filter Options\"\r\n            (click)=\"$event.stopPropagation()\"\r\n          >\r\n            <header class=\"flex items-center justify-between border-b border-light px-base py-sm\">\r\n              <h5 class=\"m-0\">Filter Options</h5>\r\n              <ed-icon-button\r\n                name=\"close\"\r\n                size=\"sm\"\r\n                label=\"Close filters\"\r\n                (click$)=\"closeFilters()\"\r\n              />\r\n            </header>\r\n            <section class=\"grid gap-sm p-base\">\r\n              <!--\r\n              <div class=\"grid gap-2xs\">\r\n                <label class=\"fs-sm font-semibold text-light\" for=\"call-history-direction\">Direction</label>\r\n                <select\r\n                  id=\"call-history-direction\"\r\n                  class=\"form-select is-sm\"\r\n                  [ngModel]=\"direction()\"\r\n                  (ngModelChange)=\"direction.set($event)\"\r\n                  autocomplete=\"off\"\r\n                  aria-label=\"Direction\"\r\n                >\r\n                  <option value=\"\">All directions</option>\r\n                  <option value=\"inbound\">Inbound</option>\r\n                  <option value=\"outbound\">Outbound</option>\r\n                </select>\r\n              </div>\r\n              <div class=\"grid gap-2xs\">\r\n                <label class=\"fs-sm font-semibold text-light\">Outcome</label>\r\n                <eds-search-field\r\n                  type=\"text\"\r\n                  inputClass=\"form-input is-sm\"\r\n                  placeholder=\"Outcome\"\r\n                  ariaLabel=\"Outcome\"\r\n                  [value]=\"outcome()\"\r\n                  (valueChange)=\"outcome.set($event)\"\r\n                  (enter)=\"applyFilters(); closeFilters()\"\r\n                />\r\n              </div>\r\n              -->\r\n              <div class=\"grid gap-2xs\">\r\n                <label class=\"fs-sm font-semibold text-light\">Location</label>\r\n                <eds-search-field\r\n                  type=\"text\"\r\n                  inputClass=\"form-input is-sm\"\r\n                  placeholder=\"Location\"\r\n                  ariaLabel=\"Location\"\r\n                  [value]=\"location()\"\r\n                  (valueChange)=\"location.set($event)\"\r\n                  (enter)=\"applyFilters(); closeFilters()\"\r\n                />\r\n              </div>\r\n            </section>\r\n            <footer class=\"flex flex-row-reverse flex-wrap items-center gap-sm border-t border-light px-base py-sm\">\r\n              <ed-button\r\n                variant=\"primary\"\r\n                fill\r\n                size=\"sm\"\r\n                (click$)=\"applyFilters(); closeFilters()\"\r\n              >\r\n                Apply\r\n              </ed-button>\r\n              <!--\r\n              <ed-button\r\n                variant=\"secondary\"\r\n                outline\r\n                size=\"sm\"\r\n                [disabled]=\"exporting()\"\r\n                (click$)=\"exportCsv()\"\r\n              >\r\n                <ed-icon slot=\"prefix\" name=\"download\" [size]=\"16\" />\r\n                Export CSV\r\n              </ed-button>\r\n              -->\r\n            </footer>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </header>\r\n\r\n  <div class=\"call-history-page__table flex min-h-0 min-w-0 flex-1 flex-col rounded-md bg-white p-base\">\r\n    <div class=\"eds-table-scroll min-h-0 min-w-0 flex-1\">\r\n    <table class=\"table-default eds-sticky-table min-w-5xl w-full\" aria-label=\"Call history\">\r\n      <thead>\r\n        <tr>\r\n          <th>Time</th>\r\n          <th>Patient/Caller</th>\r\n          <th>\r\n            <span class=\"inline-flex items-center justify-center gap-2xs\">\r\n              <ed-icon name=\"call_received\" [size]=\"12\" class=\"text-success\" color=\"currentColor\" />\r\n              <span class=\"text-light\">/</span>\r\n              <ed-icon name=\"call_made\" [size]=\"12\" class=\"text-primary\" color=\"currentColor\" />\r\n            </span>\r\n          </th>\r\n          <th>Goal</th>\r\n          <!-- <th>Handled By</th> -->\r\n          <th>Resolution</th>\r\n          <th>Result</th>\r\n          <th>Duration</th>\r\n        </tr>\r\n      </thead>\r\n      @if (loading()) {\r\n        <tbody aria-busy=\"true\">\r\n          @for (_ of skeletonRows; track _) {\r\n            <tr>\r\n              <td>\r\n                <div class=\"grid gap-2xs py-2xs\">\r\n                  <ed-skeleton class=\"h-3 w-16\"></ed-skeleton>\r\n                  <ed-skeleton class=\"h-3 w-20\"></ed-skeleton>\r\n                </div>\r\n              </td>\r\n              <td>\r\n                <div class=\"flex items-center gap-xs py-2xs\">\r\n                  <ed-skeleton class=\"h-8 w-8 !rounded-md\"></ed-skeleton>\r\n                  <div class=\"grid gap-2xs\">\r\n                    <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\r\n                    <ed-skeleton class=\"h-3 w-36\"></ed-skeleton>\r\n                  </div>\r\n                </div>\r\n              </td>\r\n              <td>\r\n                <div class=\"flex py-2xs\">\r\n                  <ed-skeleton class=\"h-5 w-5 !rounded\"></ed-skeleton>\r\n                </div>\r\n              </td>\r\n              <td><ed-skeleton class=\"h-3 w-32\"></ed-skeleton></td>\r\n              <!-- <td><ed-skeleton class=\"h-5 w-20 !rounded-full\"></ed-skeleton></td> -->\r\n              <td><ed-skeleton class=\"h-5 w-24 !rounded-full\"></ed-skeleton></td>\r\n              <td><ed-skeleton class=\"h-5 w-28 !rounded\"></ed-skeleton></td>\r\n              <td><ed-skeleton class=\"h-3 w-12 ml-auto\"></ed-skeleton></td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      } @else {\r\n      <tbody>\r\n          @for (row of tableRows(); track row.id; let i = $index) {\r\n            <tr\r\n              class=\"focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary\"\r\n              role=\"button\"\r\n              [attr.tabindex]=\"i === 0 ? 0 : -1\"\r\n              [attr.aria-label]=\"'View call details for ' + row.name\"\r\n              (click)=\"openCallDetail(row.id)\"\r\n              (keyup.enter)=\"openCallDetail(row.id)\"\r\n            >\r\n              <td>\r\n                <div class=\"grid gap-2xs whitespace-nowrap\">\r\n                  <span class=\"fs-xs font-medium text-dark\">{{ row.timeLabel }}</span>\r\n                  <span class=\"fs-xs text-light\">{{ row.dateLabel }}</span>\r\n                </div>\r\n              </td>\r\n\r\n              <td>\r\n                <div class=\"flex min-w-52 items-center gap-xs\">\r\n                  <ed-avatar\r\n                    shape=\"box\"\r\n                    size=\"base\"\r\n                    [initials]=\"row.initials\"\r\n                    [tone]=\"row.avatarTone\"\r\n                  />\r\n                  <div class=\"grid min-w-0 gap-2xs\">\r\n                    <div class=\"flex min-w-0 items-center gap-2xs\">\r\n                      <span\r\n                        class=\"inline-block min-w-0 max-w-56 truncate fs-sm font-semibold text-dark\"\r\n                        [smartTooltip]=\"row.name\"\r\n                        [tooltipOnlyWhenTruncated]=\"true\"\r\n                      >{{ row.name }}</span>\r\n                      <!-- <span class=\"inline-flex shrink-0 text-light\">\r\n                        <ed-icon name=\"TagSimple\" [size]=\"14\" color=\"currentColor\" />\r\n                      </span> -->\r\n                    </div>\r\n                    <span\r\n                      class=\"inline-block min-w-0 max-w-64 truncate fs-xs text-light\"\r\n                      [smartTooltip]=\"row.metaLine\"\r\n                      [tooltipOnlyWhenTruncated]=\"true\"\r\n                    >{{ row.metaLine }}</span>\r\n                  </div>\r\n                </div>\r\n              </td>\r\n\r\n              <td>\r\n                <span\r\n                  class=\"inline-flex h-5 w-5 items-center justify-center rounded\"\r\n                  [class.bg-success-50]=\"row.direction === 'inbound'\"\r\n                  [class.text-success]=\"row.direction === 'inbound'\"\r\n                  [class.bg-primary-50]=\"row.direction === 'outbound'\"\r\n                  [class.text-primary]=\"row.direction === 'outbound'\"\r\n                  [smartTooltip]=\"row.directionTitle\"\r\n                  [attr.aria-label]=\"row.directionTitle\"\r\n                >\r\n                  <ed-icon [name]=\"row.directionIcon\" [size]=\"12\" color=\"currentColor\" />\r\n                </span>\r\n              </td>\r\n\r\n              <td>\r\n                <div class=\"grid gap-2xs\">\r\n                  @for (goal of row.goals; track goal) {\r\n                    <span\r\n                      class=\"inline-block min-w-0 max-w-56 truncate fs-sm font-medium text-dark\"\r\n                      [smartTooltip]=\"goal\"\r\n                      [tooltipOnlyWhenTruncated]=\"true\"\r\n                    >{{ goal }}</span>\r\n                  } @empty {\r\n                    <span class=\"fs-sm text-light\">—</span>\r\n                  }\r\n                </div>\r\n              </td>\r\n\r\n              <!--\r\n              <td>\r\n                <ed-badge-2 [attr.variant]=\"row.handledVariant\" pill uppercase>\r\n                  {{ row.handledLabel }}\r\n                </ed-badge-2>\r\n              </td>\r\n              -->\r\n\r\n              <td>\r\n                <ed-badge-2 [attr.variant]=\"row.resolutionVariant\" pill uppercase>\r\n                  {{ row.resolutionLabel }}\r\n                </ed-badge-2>\r\n              </td>\r\n\r\n              <td>\r\n                <div class=\"flex min-w-0 max-w-80 flex-wrap gap-2xs\">\r\n                  @for (chip of row.resultChips; track chip.label) {\r\n                    <span\r\n                      class=\"inline-flex h-5 max-w-48 min-w-0 items-center gap-2xs rounded bg-light px-2xs fs-xs font-medium text-dark\"\r\n                    >\r\n                      <ed-icon [name]=\"chip.icon\" [size]=\"12\" color=\"currentColor\" />\r\n                      <span\r\n                        class=\"min-w-0 truncate\"\r\n                        [smartTooltip]=\"chip.label\"\r\n                        [tooltipOnlyWhenTruncated]=\"true\"\r\n                      >{{ chip.label }}</span>\r\n                    </span>\r\n                  } @empty {\r\n                    <span class=\"fs-sm text-light\">—</span>\r\n                  }\r\n                </div>\r\n              </td>\r\n\r\n              <td class=\"whitespace-nowrap tabular-nums fs-sm font-medium\">\r\n                {{ row.durationLabel }}\r\n              </td>\r\n            </tr>\r\n          } @empty {\r\n            <tr class=\"empty-row\">\r\n              <td colspan=\"7\" class=\"py-lg fs-sm text-light\">\r\n                No calls match this filter.\r\n              </td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      }\r\n    </table>\r\n    </div>\r\n  </div>\r\n\r\n  <footer class=\"mt-base flex shrink-0 items-center justify-between border-t border-light pt-sm hidden\">\r\n    <span class=\"fs-sm text-light\">\r\n      Page {{ page() }} of {{ totalPages() }} · {{ total() }} total\r\n    </span>\r\n    <div class=\"flex gap-xs\">\r\n      <ed-button\r\n        variant=\"secondary\"\r\n        outline\r\n        size=\"sm\"\r\n        [disabled]=\"page() <= 1\"\r\n        (click$)=\"prevPage()\"\r\n      >\r\n        Previous\r\n      </ed-button>\r\n      <ed-button\r\n        variant=\"secondary\"\r\n        outline\r\n        size=\"sm\"\r\n        [disabled]=\"page() >= totalPages()\"\r\n        (click$)=\"nextPage()\"\r\n      >\r\n        Next\r\n      </ed-button>\r\n    </div>\r\n  </footer>\r\n</div>\r\n"],"names":["calcTotalPages"],"mappings":"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"}

package/fesm2022/edvak99-voice-receptionist-widget-call-recording-player.component-Dy_81fZi.mjs

@@ -0,0 +1,109 @@
+import * as i0 from '@angular/core';
+import { input, output, viewChild, inject, DestroyRef, signal, ChangeDetectionStrategy, Component } from '@angular/core';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { distinctUntilChanged, tap, switchMap, EMPTY, map, catchError } from 'rxjs';
+import { A as AiReceptionistApiService, I as IconComponent, g as EdSkeletonComponent, p as EdIconButtonComponent } from './edvak99-voice-receptionist-widget-edvak99-voice-receptionist-widget-DOYlRven.mjs';
+import { f as formatPlaybackTime } from './edvak99-voice-receptionist-widget-transcript-timing.util-Bbt6JFKa.mjs';
+
+class CallRecordingPlayerComponent {
+    constructor() {
+        this.callId = input.required();
+        this.currentTimeChange = output();
+        this.durationChange = output();
+        this.audioRef = viewChild('audioEl');
+        this.api = inject(AiReceptionistApiService);
+        this.destroyRef = inject(DestroyRef);
+        this.phase = signal('loading');
+        this.blobUrl = signal(null);
+        this.durationSeconds = signal(null);
+        this.message = signal(null);
+        /** Tracked outside signals so cleanup never reads blobUrl (avoids effect/subscription loops). */
+        this.objectUrl = null;
+        this.formatDuration = formatPlaybackTime;
+        toObservable(this.callId)
+            .pipe(distinctUntilChanged(), tap(() => this.revokeObjectUrl()), switchMap((id) => {
+            if (!id) {
+                this.resetUi();
+                return EMPTY;
+            }
+            this.phase.set('loading');
+            this.message.set(null);
+            return this.api.getCallRecording(id).pipe(switchMap((meta) => {
+                if (meta.status !== 'ready' || !meta.url) {
+                    this.phase.set(meta.status);
+                    this.message.set(meta.message ?? null);
+                    this.durationSeconds.set(meta.durationSeconds ?? null);
+                    return EMPTY;
+                }
+                this.durationSeconds.set(meta.durationSeconds ?? null);
+                return this.api.getCallRecordingBlob(meta.url).pipe(map((blob) => blob), catchError(() => {
+                    this.phase.set('error');
+                    this.message.set('Could not load recording audio.');
+                    return EMPTY;
+                }));
+            }), catchError(() => {
+                this.phase.set('unavailable');
+                this.message.set('Could not load recording metadata.');
+                return EMPTY;
+            }));
+        }), takeUntilDestroyed())
+            .subscribe((blob) => {
+            this.revokeObjectUrl();
+            this.objectUrl = URL.createObjectURL(blob);
+            this.blobUrl.set(this.objectUrl);
+            this.phase.set('ready');
+            this.message.set(null);
+            const dur = this.durationSeconds();
+            if (dur != null && dur > 0) {
+                this.durationChange.emit(dur);
+            }
+        });
+        this.destroyRef.onDestroy(() => this.revokeObjectUrl());
+    }
+    onAudioError() {
+        this.phase.set('error');
+        this.message.set('Playback error — try reloading the page.');
+    }
+    onTimeUpdate(event) {
+        const el = event.target;
+        this.currentTimeChange.emit(el.currentTime);
+    }
+    onLoadedMetadata(event) {
+        const el = event.target;
+        if (Number.isFinite(el.duration) && el.duration > 0) {
+            const duration = Math.floor(el.duration);
+            this.durationSeconds.set(duration);
+            this.durationChange.emit(duration);
+        }
+    }
+    /** Seek playback — used by synced transcript lines. */
+    seekTo(seconds) {
+        const el = this.audioRef()?.nativeElement;
+        if (!el)
+            return;
+        el.currentTime = Math.max(0, seconds);
+        void el.play().catch(() => undefined);
+        this.currentTimeChange.emit(el.currentTime);
+    }
+    revokeObjectUrl() {
+        if (this.objectUrl) {
+            URL.revokeObjectURL(this.objectUrl);
+            this.objectUrl = null;
+        }
+        this.blobUrl.set(null);
+    }
+    resetUi() {
+        this.phase.set('loading');
+        this.durationSeconds.set(null);
+        this.message.set(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CallRecordingPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: CallRecordingPlayerComponent, isStandalone: true, selector: "eds-call-recording-player", inputs: { callId: { classPropertyName: "callId", publicName: "callId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { currentTimeChange: "currentTimeChange", durationChange: "durationChange" }, viewQueries: [{ propertyName: "audioRef", first: true, predicate: ["audioEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<section\r\n  class=\"call-recording-player flex flex-col gap-md rounded-xl bg-white p-md\"\r\n  aria-labelledby=\"call-recording-title\"\r\n>\r\n  <header class=\"flex items-center justify-between gap-sm\">\r\n    <h4 id=\"call-recording-title\" class=\"m-0\">Call Recording</h4>\r\n    @if (durationSeconds(); as dur) {\r\n      <span class=\"inline-flex items-center justify-center rounded-full bg-active px-2xs py-3xs\">\r\n        <span class=\"px-3xs uppercase tracking-widest text-dark\">{{ formatDuration(dur) }}</span>\r\n      </span>\r\n    }\r\n  </header>\r\n\r\n  @switch (phase()) {\r\n    @case ('loading') {\r\n      <div class=\"grid gap-xs\" aria-busy=\"true\">\r\n        <ed-skeleton class=\"h-8 w-full !rounded-full\"></ed-skeleton>\r\n        <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\r\n      </div>\r\n    }\r\n    @case ('ready') {\r\n      @if (blobUrl(); as src) {\r\n        <div class=\"flex items-center gap-md\">\r\n          <audio\r\n            #audioEl\r\n            class=\"call-recording-player__audio\"\r\n            [src]=\"src\"\r\n            (error)=\"onAudioError()\"\r\n            (timeupdate)=\"onTimeUpdate($event)\"\r\n            (loadedmetadata)=\"onLoadedMetadata($event)\"\r\n          >\r\n            Your browser does not support audio playback.\r\n          </audio>\r\n\r\n          <ed-icon-button\r\n            [name]=\"audioEl.paused ? 'play_arrow' : 'pause'\"\r\n            [label]=\"audioEl.paused ? 'Play recording' : 'Pause recording'\"\r\n            variant=\"primary\"\r\n            solid\r\n            shape=\"circle\"\r\n            size=\"base\"\r\n            (click$)=\"audioEl.paused ? audioEl.play() : audioEl.pause()\"\r\n          />\r\n\r\n          <div class=\"flex min-w-0 flex-1 items-center gap-xs\">\r\n            <span class=\"shrink-0 text-dark\">{{ formatDuration(audioEl.currentTime || 0) }}</span>\r\n            <input\r\n              class=\"call-recording-player__scrubber min-w-0 flex-1\"\r\n              type=\"range\"\r\n              min=\"0\"\r\n              step=\"0.1\"\r\n              [attr.max]=\"audioEl.duration || durationSeconds() || 0\"\r\n              [value]=\"audioEl.currentTime || 0\"\r\n              [style.--progress]=\"\r\n                ((audioEl.currentTime || 0) / (audioEl.duration || durationSeconds() || 1)) * 100 + '%'\r\n              \"\r\n              aria-label=\"Playback position\"\r\n              (input)=\"audioEl.currentTime = +$any($event.target).value\"\r\n            />\r\n            <span class=\"shrink-0 text-light\">\r\n              {{ formatDuration(audioEl.duration || durationSeconds() || 0) }}\r\n            </span>\r\n          </div>\r\n\r\n          <a\r\n            class=\"inline-flex size-8 shrink-0 items-center justify-center rounded-full text-dark no-underline hover:bg-lighter\"\r\n            [href]=\"src\"\r\n            download=\"call-recording\"\r\n            aria-label=\"Download recording\"\r\n          >\r\n            <ed-icon name=\"download\" [size]=\"18\" color=\"currentColor\" />\r\n          </a>\r\n        </div>\r\n      }\r\n    }\r\n    @case ('pending') {\r\n      <p class=\"m-0 text-light\">\r\n        {{ message() ?? 'Recording is still processing\u2026' }}\r\n      </p>\r\n    }\r\n    @case ('unavailable') {\r\n      <p class=\"m-0 text-light\">\r\n        {{ message() ?? 'No recording available for this call.' }}\r\n      </p>\r\n    }\r\n    @case ('failed') {\r\n      <p class=\"m-0 text-danger\">\r\n        {{ message() ?? 'Recording could not be retrieved.' }}\r\n      </p>\r\n    }\r\n    @case ('error') {\r\n      <p class=\"m-0 text-danger\">\r\n        {{ message() ?? 'Playback error.' }}\r\n      </p>\r\n    }\r\n  }\r\n</section>\r\n", styles: [":host{display:block}.call-recording-player__audio{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.call-recording-player__scrubber{-webkit-appearance:none;appearance:none;height:8px;border-radius:999px;background:linear-gradient(to right,hsl(var(--color-primary)) 0%,hsl(var(--color-primary)) var(--progress, 0%),hsl(var(--color-primary-100)) var(--progress, 0%),hsl(var(--color-primary-100)) 100%);cursor:pointer}.call-recording-player__scrubber::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:0;height:0;border:0;background:transparent}.call-recording-player__scrubber::-moz-range-thumb{width:0;height:0;border:0;background:transparent}.call-recording-player__scrubber::-moz-range-track{height:8px;border-radius:999px;background:transparent}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ed-icon", inputs: ["name", "size", "color", "cssClass", "decorative", "ariaHidden", "ariaLabel", "title", "desc", "focusable", "tabIndex"] }, { kind: "component", type: EdSkeletonComponent, selector: "ed-skeleton", inputs: ["class"] }, { kind: "component", type: EdIconButtonComponent, selector: "ed-icon-button", inputs: ["label", "name", "size", "variant", "allowBubble", "ghost", "outline", "solid", "subtle", "shape", "type", "disabled", "loading", "toggle", "pressed", "id", "title", "nameAttr", "value", "autofocus", "tabIndex"], outputs: ["click", "focus", "blur", "click$", "focus$", "blur$"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CallRecordingPlayerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-call-recording-player', imports: [IconComponent, EdSkeletonComponent, EdIconButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\r\n  class=\"call-recording-player flex flex-col gap-md rounded-xl bg-white p-md\"\r\n  aria-labelledby=\"call-recording-title\"\r\n>\r\n  <header class=\"flex items-center justify-between gap-sm\">\r\n    <h4 id=\"call-recording-title\" class=\"m-0\">Call Recording</h4>\r\n    @if (durationSeconds(); as dur) {\r\n      <span class=\"inline-flex items-center justify-center rounded-full bg-active px-2xs py-3xs\">\r\n        <span class=\"px-3xs uppercase tracking-widest text-dark\">{{ formatDuration(dur) }}</span>\r\n      </span>\r\n    }\r\n  </header>\r\n\r\n  @switch (phase()) {\r\n    @case ('loading') {\r\n      <div class=\"grid gap-xs\" aria-busy=\"true\">\r\n        <ed-skeleton class=\"h-8 w-full !rounded-full\"></ed-skeleton>\r\n        <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\r\n      </div>\r\n    }\r\n    @case ('ready') {\r\n      @if (blobUrl(); as src) {\r\n        <div class=\"flex items-center gap-md\">\r\n          <audio\r\n            #audioEl\r\n            class=\"call-recording-player__audio\"\r\n            [src]=\"src\"\r\n            (error)=\"onAudioError()\"\r\n            (timeupdate)=\"onTimeUpdate($event)\"\r\n            (loadedmetadata)=\"onLoadedMetadata($event)\"\r\n          >\r\n            Your browser does not support audio playback.\r\n          </audio>\r\n\r\n          <ed-icon-button\r\n            [name]=\"audioEl.paused ? 'play_arrow' : 'pause'\"\r\n            [label]=\"audioEl.paused ? 'Play recording' : 'Pause recording'\"\r\n            variant=\"primary\"\r\n            solid\r\n            shape=\"circle\"\r\n            size=\"base\"\r\n            (click$)=\"audioEl.paused ? audioEl.play() : audioEl.pause()\"\r\n          />\r\n\r\n          <div class=\"flex min-w-0 flex-1 items-center gap-xs\">\r\n            <span class=\"shrink-0 text-dark\">{{ formatDuration(audioEl.currentTime || 0) }}</span>\r\n            <input\r\n              class=\"call-recording-player__scrubber min-w-0 flex-1\"\r\n              type=\"range\"\r\n              min=\"0\"\r\n              step=\"0.1\"\r\n              [attr.max]=\"audioEl.duration || durationSeconds() || 0\"\r\n              [value]=\"audioEl.currentTime || 0\"\r\n              [style.--progress]=\"\r\n                ((audioEl.currentTime || 0) / (audioEl.duration || durationSeconds() || 1)) * 100 + '%'\r\n              \"\r\n              aria-label=\"Playback position\"\r\n              (input)=\"audioEl.currentTime = +$any($event.target).value\"\r\n            />\r\n            <span class=\"shrink-0 text-light\">\r\n              {{ formatDuration(audioEl.duration || durationSeconds() || 0) }}\r\n            </span>\r\n          </div>\r\n\r\n          <a\r\n            class=\"inline-flex size-8 shrink-0 items-center justify-center rounded-full text-dark no-underline hover:bg-lighter\"\r\n            [href]=\"src\"\r\n            download=\"call-recording\"\r\n            aria-label=\"Download recording\"\r\n          >\r\n            <ed-icon name=\"download\" [size]=\"18\" color=\"currentColor\" />\r\n          </a>\r\n        </div>\r\n      }\r\n    }\r\n    @case ('pending') {\r\n      <p class=\"m-0 text-light\">\r\n        {{ message() ?? 'Recording is still processing\u2026' }}\r\n      </p>\r\n    }\r\n    @case ('unavailable') {\r\n      <p class=\"m-0 text-light\">\r\n        {{ message() ?? 'No recording available for this call.' }}\r\n      </p>\r\n    }\r\n    @case ('failed') {\r\n      <p class=\"m-0 text-danger\">\r\n        {{ message() ?? 'Recording could not be retrieved.' }}\r\n      </p>\r\n    }\r\n    @case ('error') {\r\n      <p class=\"m-0 text-danger\">\r\n        {{ message() ?? 'Playback error.' }}\r\n      </p>\r\n    }\r\n  }\r\n</section>\r\n", styles: [":host{display:block}.call-recording-player__audio{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.call-recording-player__scrubber{-webkit-appearance:none;appearance:none;height:8px;border-radius:999px;background:linear-gradient(to right,hsl(var(--color-primary)) 0%,hsl(var(--color-primary)) var(--progress, 0%),hsl(var(--color-primary-100)) var(--progress, 0%),hsl(var(--color-primary-100)) 100%);cursor:pointer}.call-recording-player__scrubber::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:0;height:0;border:0;background:transparent}.call-recording-player__scrubber::-moz-range-thumb{width:0;height:0;border:0;background:transparent}.call-recording-player__scrubber::-moz-range-track{height:8px;border-radius:999px;background:transparent}\n"] }]
+        }], ctorParameters: () => [] });
+
+export { CallRecordingPlayerComponent as C };
+//# sourceMappingURL=edvak99-voice-receptionist-widget-call-recording-player.component-Dy_81fZi.mjs.map

package/fesm2022/edvak99-voice-receptionist-widget-call-recording-player.component-Dy_81fZi.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"edvak99-voice-receptionist-widget-call-recording-player.component-Dy_81fZi.mjs","sources":["../../../src/lib/components/call-recording-player/call-recording-player.component.ts","../../../src/lib/components/call-recording-player/call-recording-player.component.html"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  DestroyRef,\r\n  ElementRef,\r\n  inject,\r\n  input,\r\n  output,\r\n  signal,\r\n  viewChild,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\r\nimport { catchError, distinctUntilChanged, EMPTY, map, switchMap, tap } from 'rxjs';\r\n\r\nimport { EdSkeletonComponent } from '../../ui/ed-skeleton.component';\r\nimport { EdIconButtonComponent } from '../../ui/ed-icon-button.component';\r\n\r\nimport { CallRecordingStatus } from '../../models/ai-receptionist.types';\r\nimport { AiReceptionistApiService } from '../../services/ai-receptionist-api.service';\r\nimport { IconComponent } from '../../ui/ed-icon.component';\r\nimport { formatPlaybackTime } from '../../utils/transcript-timing.util';\r\n\r\ntype PlayerPhase = 'loading' | CallRecordingStatus | 'error';\r\n\r\n@Component({\r\n    selector: 'eds-call-recording-player',\r\n    imports: [IconComponent, EdSkeletonComponent, EdIconButtonComponent],\r\n    templateUrl: './call-recording-player.component.html',\r\n    styleUrl: './call-recording-player.component.scss',\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class CallRecordingPlayerComponent {\r\n  readonly callId = input.required<string>();\r\n  readonly currentTimeChange = output<number>();\r\n  readonly durationChange = output<number>();\r\n\r\n  private readonly audioRef = viewChild<ElementRef<HTMLAudioElement>>('audioEl');\r\n\r\n  private readonly api = inject(AiReceptionistApiService);\r\n  private readonly destroyRef = inject(DestroyRef);\r\n\r\n  protected readonly phase = signal<PlayerPhase>('loading');\r\n  protected readonly blobUrl = signal<string | null>(null);\r\n  protected readonly durationSeconds = signal<number | null>(null);\r\n  protected readonly message = signal<string | null>(null);\r\n\r\n  /** Tracked outside signals so cleanup never reads blobUrl (avoids effect/subscription loops). */\r\n  private objectUrl: string | null = null;\r\n\r\n  constructor() {\r\n    toObservable(this.callId)\r\n      .pipe(\r\n        distinctUntilChanged(),\r\n        tap(() => this.revokeObjectUrl()),\r\n        switchMap((id) => {\r\n          if (!id) {\r\n            this.resetUi();\r\n            return EMPTY;\r\n          }\r\n          this.phase.set('loading');\r\n          this.message.set(null);\r\n          return this.api.getCallRecording(id).pipe(\r\n            switchMap((meta) => {\r\n              if (meta.status !== 'ready' || !meta.url) {\r\n                this.phase.set(meta.status);\r\n                this.message.set(meta.message ?? null);\r\n                this.durationSeconds.set(meta.durationSeconds ?? null);\r\n                return EMPTY;\r\n              }\r\n              this.durationSeconds.set(meta.durationSeconds ?? null);\r\n              return this.api.getCallRecordingBlob(meta.url).pipe(\r\n                map((blob) => blob),\r\n                catchError(() => {\r\n                  this.phase.set('error');\r\n                  this.message.set('Could not load recording audio.');\r\n                  return EMPTY;\r\n                }),\r\n              );\r\n            }),\r\n            catchError(() => {\r\n              this.phase.set('unavailable');\r\n              this.message.set('Could not load recording metadata.');\r\n              return EMPTY;\r\n            }),\r\n          );\r\n        }),\r\n        takeUntilDestroyed(),\r\n      )\r\n      .subscribe((blob) => {\r\n        this.revokeObjectUrl();\r\n        this.objectUrl = URL.createObjectURL(blob);\r\n        this.blobUrl.set(this.objectUrl);\r\n        this.phase.set('ready');\r\n        this.message.set(null);\r\n        const dur = this.durationSeconds();\r\n        if (dur != null && dur > 0) {\r\n          this.durationChange.emit(dur);\r\n        }\r\n      });\r\n\r\n    this.destroyRef.onDestroy(() => this.revokeObjectUrl());\r\n  }\r\n\r\n  protected readonly formatDuration = formatPlaybackTime;\r\n\r\n  protected onAudioError(): void {\r\n    this.phase.set('error');\r\n    this.message.set('Playback error — try reloading the page.');\r\n  }\r\n\r\n  protected onTimeUpdate(event: Event): void {\r\n    const el = event.target as HTMLAudioElement;\r\n    this.currentTimeChange.emit(el.currentTime);\r\n  }\r\n\r\n  protected onLoadedMetadata(event: Event): void {\r\n    const el = event.target as HTMLAudioElement;\r\n    if (Number.isFinite(el.duration) && el.duration > 0) {\r\n      const duration = Math.floor(el.duration);\r\n      this.durationSeconds.set(duration);\r\n      this.durationChange.emit(duration);\r\n    }\r\n  }\r\n\r\n  /** Seek playback — used by synced transcript lines. */\r\n  seekTo(seconds: number): void {\r\n    const el = this.audioRef()?.nativeElement;\r\n    if (!el) return;\r\n    el.currentTime = Math.max(0, seconds);\r\n    void el.play().catch(() => undefined);\r\n    this.currentTimeChange.emit(el.currentTime);\r\n  }\r\n\r\n  private revokeObjectUrl(): void {\r\n    if (this.objectUrl) {\r\n      URL.revokeObjectURL(this.objectUrl);\r\n      this.objectUrl = null;\r\n    }\r\n    this.blobUrl.set(null);\r\n  }\r\n\r\n  private resetUi(): void {\r\n    this.phase.set('loading');\r\n    this.durationSeconds.set(null);\r\n    this.message.set(null);\r\n  }\r\n}\r\n","<section\r\n  class=\"call-recording-player flex flex-col gap-md rounded-xl bg-white p-md\"\r\n  aria-labelledby=\"call-recording-title\"\r\n>\r\n  <header class=\"flex items-center justify-between gap-sm\">\r\n    <h4 id=\"call-recording-title\" class=\"m-0\">Call Recording</h4>\r\n    @if (durationSeconds(); as dur) {\r\n      <span class=\"inline-flex items-center justify-center rounded-full bg-active px-2xs py-3xs\">\r\n        <span class=\"px-3xs uppercase tracking-widest text-dark\">{{ formatDuration(dur) }}</span>\r\n      </span>\r\n    }\r\n  </header>\r\n\r\n  @switch (phase()) {\r\n    @case ('loading') {\r\n      <div class=\"grid gap-xs\" aria-busy=\"true\">\r\n        <ed-skeleton class=\"h-8 w-full !rounded-full\"></ed-skeleton>\r\n        <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\r\n      </div>\r\n    }\r\n    @case ('ready') {\r\n      @if (blobUrl(); as src) {\r\n        <div class=\"flex items-center gap-md\">\r\n          <audio\r\n            #audioEl\r\n            class=\"call-recording-player__audio\"\r\n            [src]=\"src\"\r\n            (error)=\"onAudioError()\"\r\n            (timeupdate)=\"onTimeUpdate($event)\"\r\n            (loadedmetadata)=\"onLoadedMetadata($event)\"\r\n          >\r\n            Your browser does not support audio playback.\r\n          </audio>\r\n\r\n          <ed-icon-button\r\n            [name]=\"audioEl.paused ? 'play_arrow' : 'pause'\"\r\n            [label]=\"audioEl.paused ? 'Play recording' : 'Pause recording'\"\r\n            variant=\"primary\"\r\n            solid\r\n            shape=\"circle\"\r\n            size=\"base\"\r\n            (click$)=\"audioEl.paused ? audioEl.play() : audioEl.pause()\"\r\n          />\r\n\r\n          <div class=\"flex min-w-0 flex-1 items-center gap-xs\">\r\n            <span class=\"shrink-0 text-dark\">{{ formatDuration(audioEl.currentTime || 0) }}</span>\r\n            <input\r\n              class=\"call-recording-player__scrubber min-w-0 flex-1\"\r\n              type=\"range\"\r\n              min=\"0\"\r\n              step=\"0.1\"\r\n              [attr.max]=\"audioEl.duration || durationSeconds() || 0\"\r\n              [value]=\"audioEl.currentTime || 0\"\r\n              [style.--progress]=\"\r\n                ((audioEl.currentTime || 0) / (audioEl.duration || durationSeconds() || 1)) * 100 + '%'\r\n              \"\r\n              aria-label=\"Playback position\"\r\n              (input)=\"audioEl.currentTime = +$any($event.target).value\"\r\n            />\r\n            <span class=\"shrink-0 text-light\">\r\n              {{ formatDuration(audioEl.duration || durationSeconds() || 0) }}\r\n            </span>\r\n          </div>\r\n\r\n          <a\r\n            class=\"inline-flex size-8 shrink-0 items-center justify-center rounded-full text-dark no-underline hover:bg-lighter\"\r\n            [href]=\"src\"\r\n            download=\"call-recording\"\r\n            aria-label=\"Download recording\"\r\n          >\r\n            <ed-icon name=\"download\" [size]=\"18\" color=\"currentColor\" />\r\n          </a>\r\n        </div>\r\n      }\r\n    }\r\n    @case ('pending') {\r\n      <p class=\"m-0 text-light\">\r\n        {{ message() ?? 'Recording is still processing…' }}\r\n      </p>\r\n    }\r\n    @case ('unavailable') {\r\n      <p class=\"m-0 text-light\">\r\n        {{ message() ?? 'No recording available for this call.' }}\r\n      </p>\r\n    }\r\n    @case ('failed') {\r\n      <p class=\"m-0 text-danger\">\r\n        {{ message() ?? 'Recording could not be retrieved.' }}\r\n      </p>\r\n    }\r\n    @case ('error') {\r\n      <p class=\"m-0 text-danger\">\r\n        {{ message() ?? 'Playback error.' }}\r\n      </p>\r\n    }\r\n  }\r\n</section>\r\n"],"names":[],"mappings":"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"}