@edvak99/voice-receptionist-widget 1.1.2 → 1.1.4

package/styles/eds.scss

@@ -1,163 +1,221 @@
-/* EDS Design System — AI Receptionist */
-
-:root {
+/* EDS Design System — AI Receptionist
+ *
+ * Tokens are scoped to eds-app-shell / .voice-receptionist-host only.
+ * Never set unprefixed --color-primary / --gray-* / --text-primary on :root —
+ * those collide with host apps (e.g. EHR Tailwind hsl(var(--color-primary))).
+ */
+
+eds-app-shell,
+.voice-receptionist-host {
   /* Brand */
-  --brand-500: #3681f4;
-  --brand-600: #2162f0;
-  --violet-500: #8e51ff;
-  --green-500: #0abf52;
-  --red-500: #f03740;
-  --amber-400: #ffb900;
-
-  /* Gray scale */
-  --gray-50: #f9fafb;
-  --gray-100: #f4f4f5;
-  --gray-200: #e4e4e7;
-  --gray-300: #d4d4d8;
-  --gray-400: #a1a1aa;
-  --gray-500: #71717a;
-  --gray-600: #52525b;
-  --gray-700: #3f3f46;
-  --gray-800: #27272a;
-  --gray-900: #18181b;
-  --slate-950: #030717;
-  --slate-900: #121828;
-  --slate-800: #212a39;
-  --slate-700: #384251;
-  --slate-600: #4e5763;
-  --slate-500: #63748b;
-  --slate-400: #99a2b0;
-  --slate-300: #cad5e2;
-  --brand-400: #5aa3f6;
-  --brand-300: #94c5f9;
-  --violet-400: #a684ff;
-  --purple-300: #c4b5fd;
-  --green-400: #34d399;
-  --red-400: #f87171;
-  --red-300: #fca5a5;
-  --amber-300: #fcd34d;
-
-  /* Radius aliases */
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
-  --radius-pill: 999px;
-  --space-4: 16px;
-  --space-5: 20px;
-  --font-sans: var(--font-inter);
-  --font-body: var(--font-dm);
-  --font-display: var(--font-figtree);
-
-  /* Surfaces */
-  --surface-l0: #ffffff;
-  --surface-l1: #f9fafb;
-  --surface-l2: #f4f4f5;
-  --text-primary: var(--gray-700);
-  --text-secondary: var(--gray-600);
-  --text-brand: var(--brand-600);
-  --border-default: var(--gray-200);
-  --bg-brand: var(--brand-500);
-
-  /* Radius */
+  --eds-brand-500: #2162f0;
+  --eds-brand-600: #2162f0;
+  --eds-brand-400: #4b82f3;
+  --eds-brand-300: #8aaff8;
+  --eds-brand: var(--eds-brand-600);
+  --eds-violet-500: #8e51ff;
+  --eds-violet-400: #a684ff;
+  --eds-green-500: #0abf52;
+  --eds-green-400: #34d399;
+  --eds-green-600: #16a34a;
+  --eds-red-500: #f03740;
+  --eds-red-400: #f87171;
+  --eds-red-300: #fca5a5;
+  --eds-amber-500: #f59e0b;
+  --eds-amber-400: #ffb900;
+  --eds-amber-300: #fcd34d;
+  --eds-purple-300: #c4b5fd;
+
+  /* Gray / slate */
+  --eds-gray-50: #f7f9fa;
+  --eds-gray-100: #f7f9fa;
+  --eds-gray-200: #e5e5e5;
+  --eds-gray-300: #d4d4d8;
+  --eds-gray-400: #a1a1aa;
+  --eds-gray-500: #767676;
+  --eds-gray-600: #53575c;
+  --eds-gray-700: #41464c;
+  --eds-gray-800: #2f3338;
+  --eds-gray-900: #1f2328;
+  --eds-slate-950: #030717;
+  --eds-slate-900: #121828;
+  --eds-slate-800: #212a39;
+  --eds-slate-700: #384251;
+  --eds-slate-600: #4e5763;
+  --eds-slate-500: #63748b;
+  --eds-slate-400: #99a2b0;
+  --eds-slate-300: #cad5e2;
+
+  /* App color tokens (legacy names → eds-prefixed) */
+  --eds-color-primary: #2162f0;
+  --eds-color-primary-hover: #1a52d4;
+  --eds-color-primary-light: #eaf1fe;
+  --eds-color-primary-soft: var(--eds-color-primary-light);
+  --eds-color-accent: #4b82f3;
+  --eds-color-accent-light: #dce8fd;
+  --eds-color-bg: #f7f9fa;
+  --eds-color-surface: #ffffff;
+  --eds-color-surface-alt: #f7f9fa;
+  --eds-color-sidebar-bg: #0f172a;
+  --eds-color-chat-ai: #f1f5f9;
+  --eds-color-text: #41464c;
+  --eds-color-text-muted: #53575c;
+  --eds-color-text-soft: #767676;
+  --eds-color-border: #e5e5e5;
+  --eds-color-border-strong: #d4d4d8;
+  --eds-color-success: #22c55e;
+  --eds-color-success-soft: #ecfdf3;
+  --eds-color-warning: #f59e0b;
+  --eds-color-warning-soft: #fffbeb;
+  --eds-color-danger: #ef4444;
+  --eds-color-danger-soft: #fef2f2;
+  --eds-color-info: #2162f0;
+  --eds-color-info-soft: #eaf1fe;
+
+  /* Surfaces / text / borders — product palette */
+  --eds-surface-l0: #ffffff; /* Primary BG */
+  --eds-surface-l1: #f7f9fa; /* Secondary BG */
+  --eds-surface-l2: #f7f9fa;
+  --eds-surface-card: var(--eds-surface-l0);
+  --eds-surface-muted: var(--eds-surface-l1);
+  --eds-surface-hover: var(--eds-surface-l1);
+  --eds-text-primary: #41464c;
+  --eds-text-secondary: #53575c;
+  --eds-text-tertiary: #767676;
+  --eds-text-brand: #2162f0;
+  --eds-border-default: #e5e5e5;
+  --eds-border-subtle: #e5e5e5;
+  --eds-bg-brand: #2162f0;
+
+  /* Radius / space / shadow */
   --eds-radius-sm: 4px;
   --eds-radius-md: 6px;
   --eds-radius-lg: 8px;
-
-  /* Shadows */
+  --eds-radius-xl: 16px;
+  --eds-radius-pill: 999px;
+  --eds-space-sm: 16px;
+  --eds-space-md: 24px;
+  --eds-space-lg: 32px;
+  --eds-space-4: 16px;
+  --eds-space-5: 20px;
   --eds-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.04);
   --eds-shadow-md: 0 2px 8px rgba(17, 24, 39, 0.06);
+  --eds-shadow-card: 0 2px 6px rgba(0, 0, 0, 0.05);
+  --eds-shadow-modal: 0 6px 16px rgba(0, 0, 0, 0.08);
 
   /* Layout */
   --eds-rail-width: 64px;
   --eds-nav-width: 244px;
-  --eds-topbar-height: 60px;
-
-  /* Fonts */
-  --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  --font-dm: 'DM Sans', var(--font-inter);
-  --font-figtree: 'Figtree', var(--font-inter);
-  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
+  --eds-topbar-height: 0px;
+  --eds-sidebar-width: 240px;
+  --eds-monitor-text: var(--eds-text-primary);
+
+  /* Fonts — Inter only (EHR dashboard parity; no DM Sans / Figtree) */
+  --eds-font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --eds-font-dm: var(--eds-font-inter);
+  --eds-font-figtree: var(--eds-font-inter);
+  --eds-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
+  --eds-font-sans: var(--eds-font-inter);
+  --eds-font-body: var(--eds-font-inter);
+  --eds-font-display: var(--eds-font-inter);
+
+  /* Type scale — match EHR Tailwind utilities */
+  --eds-font-size-xs: 10px; /* fs-xs */
+  --eds-font-size-sm: 12px; /* fs-sm */
+  --eds-font-size-base: 13px; /* fs-base */
+  --eds-font-size-md: 15px; /* fs-md */
+  --eds-font-size-lg: 18px;
+  --eds-font-size-xl: 24px;
+  --eds-font-weight-regular: 400;
+  --eds-font-weight-medium: 500;
+  --eds-font-weight-semibold: 600;
+  --eds-font-weight-bold: 700;
+  /* EHR table-default header muted */
+  --eds-text-table-header: #4d5573;
 }
 
-/* Typography */
+/* Typography — EHR weight scale: body 400, medium 500, semibold 600, bold 700 */
 .eds-h1 {
-  font-family: var(--font-inter);
-  font-size: 24px;
-  font-weight: 600;
+  font-family: var(--eds-font-inter);
+  font-size: var(--eds-font-size-xl);
+  font-weight: var(--eds-font-weight-bold);
   letter-spacing: -0.02em;
-  color: var(--text-primary);
+  color: var(--eds-text-primary);
   margin: 0;
 }
 
 .eds-h2 {
-  font-family: var(--font-inter);
-  font-size: 18px;
-  font-weight: 600;
+  font-family: var(--eds-font-inter);
+  font-size: var(--eds-font-size-lg);
+  font-weight: var(--eds-font-weight-bold);
   letter-spacing: -0.01em;
-  color: var(--text-primary);
+  color: var(--eds-text-primary);
   margin: 0;
 }
 
 .eds-h3 {
-  font-family: var(--font-inter);
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--text-primary);
+  font-family: var(--eds-font-inter);
+  font-size: var(--eds-font-size-md);
+  font-weight: var(--eds-font-weight-semibold);
+  color: var(--eds-text-primary);
   margin: 0;
 }
 
 .eds-h4 {
-  font-family: var(--font-inter);
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-primary);
+  font-family: var(--eds-font-inter);
+  font-size: var(--eds-font-size-base);
+  font-weight: var(--eds-font-weight-semibold);
+  color: var(--eds-text-primary);
   margin: 0;
 }
 
 .eds-body {
-  font-family: var(--font-dm);
-  font-size: 14px;
+  font-family: var(--eds-font-inter);
+  font-size: var(--eds-font-size-base);
+  font-weight: var(--eds-font-weight-regular);
   line-height: 1.5;
-  color: var(--text-primary);
+  color: var(--eds-text-primary);
 }
 
 .eds-body-bold {
   @extend .eds-body;
-  font-weight: 600;
+  font-weight: var(--eds-font-weight-semibold);
 }
 
 .eds-body-sm {
-  font-family: var(--font-dm);
-  font-size: 13px;
+  font-family: var(--eds-font-inter);
+  font-size: var(--eds-font-size-sm);
+  font-weight: var(--eds-font-weight-regular);
   line-height: 1.45;
-  color: var(--text-secondary);
+  color: var(--eds-text-secondary);
 }
 
 .eds-body-sm-bold {
   @extend .eds-body-sm;
-  font-weight: 600;
-  color: var(--text-primary);
+  font-weight: var(--eds-font-weight-semibold);
+  color: var(--eds-text-primary);
 }
 
 .eds-mono {
-  font-family: var(--font-mono);
-  font-size: 13px;
-  color: var(--text-secondary);
+  font-family: var(--eds-font-mono);
+  font-size: var(--eds-font-size-base);
+  color: var(--eds-text-secondary);
 }
 
 .eds-mono-sm {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--text-secondary);
+  font-family: var(--eds-font-mono);
+  font-size: var(--eds-font-size-sm);
+  color: var(--eds-text-secondary);
 }
 
+/* Section / field labels — EHR table-default style (not 11px uppercase) */
 .eds-label {
-  font-family: var(--font-inter);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--gray-500);
+  font-family: var(--eds-font-inter);
+  font-size: var(--eds-font-size-base);
+  font-weight: var(--eds-font-weight-semibold);
+  letter-spacing: normal;
+  text-transform: none;
+  color: var(--eds-text-table-header, #4d5573);
 }
 
 .eds-icon {
@@ -277,17 +335,21 @@
 }
 
 .eds-gradient-brand {
-  background: linear-gradient(135deg, var(--brand-500), var(--violet-500));
+  background: linear-gradient(135deg, var(--eds-brand-500), var(--eds-violet-500));
 }
 
 .eds-page {
   min-height: calc(100vh - var(--eds-topbar-height));
-  background: var(--surface-l1);
+  background: var(--eds-surface-l1);
   padding: 24px;
+  font-family: var(--eds-font-inter);
+  font-size: var(--eds-font-size-base, 13px);
+  font-weight: var(--eds-font-weight-regular, 400);
+  color: var(--eds-text-primary);
 }
 
 .eds-page--dark {
-  background: var(--slate-950);
+  background: var(--eds-slate-950);
   color: #e4e4e7;
 }
 
@@ -296,28 +358,35 @@
   border-collapse: collapse;
 
   thead th {
-    @extend .eds-label;
+    font-family: var(--eds-font-inter);
+    font-size: var(--eds-font-size-base, 13px);
+    font-weight: var(--eds-font-weight-semibold, 600);
+    letter-spacing: normal;
+    text-transform: none;
+    color: var(--eds-text-table-header, #4d5573);
     text-align: left;
     padding: 10px 16px;
-    border-bottom: 1px solid var(--border-default);
-    background: var(--surface-l0);
+    border-bottom: 1px solid var(--eds-border-default);
+    background: var(--eds-surface-l0);
   }
 
   tbody td {
     padding: 12px 16px;
-    font-size: 13px;
-    color: var(--text-primary);
-    border-bottom: 1px solid var(--border-default);
+    font-family: var(--eds-font-inter);
+    font-size: var(--eds-font-size-base, 13px);
+    font-weight: var(--eds-font-weight-regular, 400);
+    color: var(--eds-text-primary);
+    border-bottom: 1px solid var(--eds-border-default);
   }
 
   tbody tr:hover td {
-    background: var(--surface-l1);
+    background: var(--eds-surface-l1);
   }
 }
 
 .eds-card {
-  background: var(--surface-l0);
-  border: 1px solid var(--border-default);
+  background: var(--eds-surface-l0);
+  border: 1px solid var(--eds-border-default);
   border-radius: var(--eds-radius-lg);
   box-shadow: var(--eds-shadow-sm);
   transition: box-shadow 150ms ease;

package/fesm2022/edvak99-voice-receptionist-widget-analytics-page.component-CW5OKmik.mjs

@@ -1,113 +0,0 @@
-import * as i0 from '@angular/core';
-import { inject, signal, ChangeDetectionStrategy, Component } from '@angular/core';
-import { A as AiReceptionistApiService, b as EdsIconComponent } from './edvak99-voice-receptionist-widget-edvak99-voice-receptionist-widget-CMhknpGf.mjs';
-
-class AnalyticsPageComponent {
-    constructor() {
-        this.api = inject(AiReceptionistApiService);
-        this.data = signal(null);
-        this.range = signal('30d');
-        this.loading = signal(true);
-        this.ranges = [
-            { id: '7d', label: '7 days' },
-            { id: '30d', label: '30 days' },
-            { id: '90d', label: '90 days' },
-        ];
-    }
-    ngOnInit() {
-        this.load();
-    }
-    setRange(id) {
-        this.range.set(id);
-        this.load();
-    }
-    maxCount(items) {
-        return Math.max(...items.map((i) => i.count), 1);
-    }
-    barHeightPercent(point, points) {
-        if (point.count <= 0)
-            return 0;
-        return (point.count / this.maxCount(points)) * 100;
-    }
-    /** Hide inline counts when bars are too narrow to stay readable. */
-    showBarValue(point, points) {
-        return point.count > 0 && points.length <= 21;
-    }
-    maxValue(items) {
-        return Math.max(...items.map((i) => i.value), 1);
-    }
-    volumeTooltip(point) {
-        const datePart = point.date ? this.formatChartDate(point.date) : point.label;
-        return `${datePart}: ${point.count} call${point.count === 1 ? '' : 's'}`;
-    }
-    peakTooltip(point) {
-        return `${point.label}: ${point.count} call${point.count === 1 ? '' : 's'}`;
-    }
-    /** ISO or YYYY-MM-DD → MM/DD (zero-padded). */
-    formatChartDate(date) {
-        const iso = /^(\d{4})-(\d{2})-(\d{2})/.exec(date.trim());
-        if (iso) {
-            return `${iso[2]}/${iso[3]}`;
-        }
-        return date;
-    }
-    /** Compact x-axis for volume — full labels on 7d, sparse dates on longer ranges. */
-    volumeAxisLabel(point, index, total) {
-        if (point.date) {
-            if (total <= 7)
-                return this.formatChartDate(point.date);
-            const step = total <= 14 ? 2 : total <= 31 ? 5 : 7;
-            if (index % step !== 0 && index !== total - 1)
-                return '';
-            return this.formatChartDate(point.date);
-        }
-        if (total <= 7)
-            return point.day;
-        const step = total <= 14 ? 2 : total <= 31 ? 5 : 7;
-        if (index % step !== 0 && index !== total - 1)
-            return '';
-        return point.day;
-    }
-    showPeakAxisLabel(index, total) {
-        if (total <= 12)
-            return true;
-        const step = total <= 24 ? 3 : 4;
-        return index % step === 0 || index === total - 1;
-    }
-    volumeRangeLabel() {
-        const vol = this.data()?.volume;
-        if (!vol?.startDate || !vol?.endDate)
-            return 'Calls per day';
-        const start = this.formatChartDate(vol.startDate);
-        const end = this.formatChartDate(vol.endDate);
-        return `${start} – ${end}${vol.timezone ? ` (${vol.timezone})` : ''}`;
-    }
-    kpiIcon(label) {
-        const key = label.toLowerCase();
-        if (key.includes('call') || key.includes('handled'))
-            return 'call';
-        if (key.includes('time') || key.includes('duration'))
-            return 'schedule';
-        if (key.includes('resolution') || key.includes('book'))
-            return 'event_available';
-        if (key.includes('transfer'))
-            return 'phone_forwarded';
-        return 'monitoring';
-    }
-    load() {
-        this.loading.set(true);
-        this.api.getAnalytics(this.range()).subscribe(({ data }) => {
-            this.data.set(data);
-            this.loading.set(false);
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AnalyticsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: AnalyticsPageComponent, isStandalone: true, selector: "eds-analytics-page", ngImport: i0, template: "<div class=\"eds-page analytics-page\">\n  <header class=\"analytics-page__header\">\n    <div>\n      <h1 class=\"eds-h1\">Analytics</h1>\n      <p class=\"eds-body-sm\">Call volume, outcomes, and performance KPIs</p>\n    </div>\n    <div class=\"analytics-page__range\">\n      @for (r of ranges; track r.id) {\n        <button\n          type=\"button\"\n          class=\"analytics-page__range-btn\"\n          [class.analytics-page__range-btn--active]=\"range() === r.id\"\n          (click)=\"setRange(r.id)\"\n        >\n          {{ r.label }}\n        </button>\n      }\n    </div>\n  </header>\n\n  @if (loading()) {\n    <p class=\"eds-body-sm\">Loading analytics\u2026</p>\n  } @else if (data()) {\n    <section class=\"analytics-page__kpis\">\n      @for (kpi of data()!.kpiCards; track kpi.label) {\n        <article class=\"eds-card analytics-page__kpi\">\n          <eds-icon [name]=\"kpiIcon(kpi.label)\" [size]=\"22\" />\n          <span class=\"eds-label\">{{ kpi.label }}</span>\n          <span class=\"analytics-page__kpi-value\">{{ kpi.value }}</span>\n          @if (kpi.delta) {\n            <span class=\"analytics-page__kpi-delta\" [attr.data-tone]=\"kpi.tone\">{{ kpi.delta }}</span>\n          }\n          @if (kpi.sub) {\n            <span class=\"analytics-page__kpi-sub\">{{ kpi.sub }}</span>\n          }\n        </article>\n      }\n    </section>\n\n    <div class=\"analytics-page__charts\">\n      <article class=\"eds-card analytics-page__chart\">\n        <div class=\"analytics-page__chart-head\">\n          <h2 class=\"eds-h2\">Call volume</h2>\n          <span class=\"eds-label\">{{ volumeRangeLabel() }}</span>\n        </div>\n        <div class=\"analytics-page__volume-chart\">\n          <div class=\"analytics-page__plot\">\n            <div class=\"analytics-page__grid\" aria-hidden=\"true\"></div>\n            <div class=\"analytics-page__bars\" role=\"list\" aria-label=\"Call volume by day\">\n              @for (point of data()!.volume.points; track point.date || point.label; let i = $index) {\n                <div\n                  class=\"analytics-page__bar-col\"\n                  role=\"listitem\"\n                  [attr.aria-label]=\"volumeTooltip(point)\"\n                >\n                  <div class=\"analytics-page__bar-wrap\">\n                    @if (point.count > 0) {\n                      <div\n                        class=\"analytics-page__bar-stack\"\n                        [style.height.%]=\"barHeightPercent(point, data()!.volume.points)\"\n                      >\n                        @if (showBarValue(point, data()!.volume.points)) {\n                          <span class=\"analytics-page__bar-value eds-mono-sm\">{{ point.count }}</span>\n                        }\n                        <div class=\"analytics-page__bar\"></div>\n                      </div>\n                    }\n                    <span class=\"analytics-page__tooltip\">{{ volumeTooltip(point) }}</span>\n                  </div>\n                  <span class=\"eds-mono-sm analytics-page__bar-axis\">\n                    {{ volumeAxisLabel(point, i, data()!.volume.points.length) }}\n                  </span>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n        <!-- <p class=\"analytics-page__axis-note eds-label\">(MM/DD)/calls per day</p> -->\n      </article>\n\n      <article class=\"eds-card analytics-page__chart\">\n        <h2 class=\"eds-h2\">Outcomes</h2>\n        <div class=\"analytics-page__bars analytics-page__bars--horizontal\">\n          @for (item of data()!.outcomes; track item.label) {\n            <div class=\"analytics-page__hbar-row\">\n              <span class=\"eds-body-sm\">{{ item.label }}</span>\n              <div class=\"analytics-page__hbar-track\">\n                <span\n                  class=\"analytics-page__hbar-fill\"\n                  [style.width.%]=\"(item.value / maxValue(data()!.outcomes)) * 100\"\n                  [style.background]=\"item.color\"\n                ></span>\n              </div>\n              <span class=\"eds-mono-sm\">{{ item.value }}%</span>\n            </div>\n          }\n        </div>\n      </article>\n\n      <article class=\"eds-card analytics-page__chart\">\n        <h2 class=\"eds-h2\">Top reasons</h2>\n        <div class=\"analytics-page__bars analytics-page__bars--horizontal\">\n          @for (item of data()!.reasons; track item.label) {\n            <div class=\"analytics-page__hbar-row\">\n              <span class=\"eds-body-sm\">{{ item.label }}</span>\n              <div class=\"analytics-page__hbar-track\">\n                <span\n                  class=\"analytics-page__hbar-fill\"\n                  [style.width.%]=\"(item.value / maxValue(data()!.reasons)) * 100\"\n                ></span>\n              </div>\n              <span class=\"eds-mono-sm\">{{ item.value }}%</span>\n            </div>\n          }\n        </div>\n      </article>\n\n      <article class=\"eds-card analytics-page__chart\">\n        <div class=\"analytics-page__chart-head\">\n          <h2 class=\"eds-h2\">Peak hours</h2>\n          <span class=\"eds-label\">\n            @if (data()!.peakHours.timezone) {\n              {{ data()!.peakHours.timezone }}\n            } @else {\n              Calls per hour\n            }\n          </span>\n        </div>\n        <div class=\"analytics-page__volume-chart analytics-page__volume-chart--peak\">\n          <div class=\"analytics-page__plot\">\n            <div class=\"analytics-page__grid\" aria-hidden=\"true\"></div>\n            <div class=\"analytics-page__bars analytics-page__bars--peak\" role=\"list\" aria-label=\"Call volume by hour\">\n              @for (point of data()!.peakHours.points; track point.hour) {\n                <div\n                  class=\"analytics-page__bar-col analytics-page__bar-col--peak\"\n                  role=\"listitem\"\n                  [attr.aria-label]=\"peakTooltip(point)\"\n                >\n                  <div class=\"analytics-page__bar-wrap\">\n                    @if (point.count > 0) {\n                      <div\n                        class=\"analytics-page__bar-stack\"\n                        [style.height.%]=\"barHeightPercent(point, data()!.peakHours.points)\"\n                      >\n                        <div class=\"analytics-page__bar\"></div>\n                      </div>\n                    }\n                    <span class=\"analytics-page__tooltip\">{{ peakTooltip(point) }}</span>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n        <div class=\"analytics-page__peak-axis\">\n          @for (point of data()!.peakHours.points; track point.hour; let i = $index) {\n            <span class=\"analytics-page__peak-tick eds-mono-sm\">\n              @if (showPeakAxisLabel(i, data()!.peakHours.points.length)) {\n                {{ point.label }}\n              }\n            </span>\n          }\n        </div>\n      </article>\n    </div>\n  }\n</div>\n", styles: [".analytics-page__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}.analytics-page__range{display:flex;gap:4px;background:var(--surface-l0);border:1px solid var(--border-default);border-radius:var(--eds-radius-md);padding:4px}.analytics-page__range-btn{padding:6px 12px;border:none;background:none;font-size:13px;border-radius:var(--eds-radius-sm);cursor:pointer;color:var(--text-secondary)}.analytics-page__range-btn--active{background:var(--brand-500);color:#fff}.analytics-page__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}.analytics-page__kpi{display:flex;flex-direction:column;gap:6px;padding:16px}.analytics-page__kpi-value{font-size:24px;font-weight:600;color:var(--text-primary)}.analytics-page__kpi-delta{font-size:12px;font-weight:600}.analytics-page__kpi-delta[data-tone=pos]{color:var(--green-500, #16a34a)}.analytics-page__kpi-delta[data-tone=warn]{color:var(--amber-500, #d97706)}.analytics-page__kpi-delta[data-tone=neutral]{color:var(--text-secondary)}.analytics-page__kpi-sub{font-size:12px;color:var(--text-secondary)}.analytics-page__charts{display:grid;grid-template-columns:1fr 1fr;gap:16px}.analytics-page__chart{padding:16px}.analytics-page__chart .eds-h2{margin-bottom:0}.analytics-page__chart-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}.analytics-page__volume-chart--peak .analytics-page__grid{inset:0}.analytics-page__plot{position:relative;width:100%;min-width:0}.analytics-page__grid{position:absolute;inset:0 0 24px;pointer-events:none;background-image:linear-gradient(to top,var(--border-default) 1px,transparent 1px);background-size:100% 25%;opacity:.45}.analytics-page__bars{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;height:160px;position:relative;z-index:1}.analytics-page__bars--horizontal{flex-direction:column;height:auto;align-items:stretch;gap:10px}.analytics-page__bars--peak{height:100px}.analytics-page__bars--peak .analytics-page__bar{max-width:100%}.analytics-page__bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;min-width:0;cursor:default}.analytics-page__bar-col:hover .analytics-page__tooltip,.analytics-page__bar-col:focus-within .analytics-page__tooltip{opacity:1}.analytics-page__bar-col--peak{min-width:0}.analytics-page__bar-value{flex-shrink:0;color:var(--text-primary);font-size:11px;font-weight:600;line-height:1}.analytics-page__bar-wrap{position:relative;width:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-height:0}.analytics-page__bar-stack{width:100%;max-width:32px;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:4px;min-height:0}.analytics-page__bar-axis{flex-shrink:0;min-height:16px;color:var(--text-secondary);font-size:10px;text-align:center;line-height:1.2}.analytics-page__tooltip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);padding:4px 8px;background:var(--gray-900, #18181b);color:#fafafa;font-size:11px;font-weight:500;line-height:1.3;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s ease;z-index:2;box-shadow:0 2px 8px #00000026}.analytics-page__tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:var(--gray-900, #18181b)}.analytics-page__peak-axis{display:flex;justify-content:space-between;gap:2px;margin-top:8px}.analytics-page__peak-tick{flex:1;text-align:center;min-height:16px;color:var(--text-secondary);font-size:10px}.analytics-page__bar{width:100%;flex:1 1 auto;min-height:3px;background:linear-gradient(180deg,var(--brand-500),var(--violet-500));border-radius:4px 4px 0 0;animation:eds-bar-grow .5s ease forwards;transform-origin:bottom}.analytics-page__hbar-row{display:grid;grid-template-columns:120px 1fr 40px;align-items:center;gap:10px}.analytics-page__hbar-track{height:8px;background:var(--surface-l2);border-radius:4px;overflow:hidden}.analytics-page__hbar-fill{display:block;height:100%;background:var(--brand-500);border-radius:4px;animation:eds-bar-grow .5s ease forwards;transform-origin:left}@media(max-width:1000px){.analytics-page__kpis{grid-template-columns:repeat(2,1fr)}.analytics-page__charts{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "component", type: EdsIconComponent, selector: "eds-icon", inputs: ["name", "size", "fill", "weight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AnalyticsPageComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'eds-analytics-page', imports: [EdsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"eds-page analytics-page\">\n  <header class=\"analytics-page__header\">\n    <div>\n      <h1 class=\"eds-h1\">Analytics</h1>\n      <p class=\"eds-body-sm\">Call volume, outcomes, and performance KPIs</p>\n    </div>\n    <div class=\"analytics-page__range\">\n      @for (r of ranges; track r.id) {\n        <button\n          type=\"button\"\n          class=\"analytics-page__range-btn\"\n          [class.analytics-page__range-btn--active]=\"range() === r.id\"\n          (click)=\"setRange(r.id)\"\n        >\n          {{ r.label }}\n        </button>\n      }\n    </div>\n  </header>\n\n  @if (loading()) {\n    <p class=\"eds-body-sm\">Loading analytics\u2026</p>\n  } @else if (data()) {\n    <section class=\"analytics-page__kpis\">\n      @for (kpi of data()!.kpiCards; track kpi.label) {\n        <article class=\"eds-card analytics-page__kpi\">\n          <eds-icon [name]=\"kpiIcon(kpi.label)\" [size]=\"22\" />\n          <span class=\"eds-label\">{{ kpi.label }}</span>\n          <span class=\"analytics-page__kpi-value\">{{ kpi.value }}</span>\n          @if (kpi.delta) {\n            <span class=\"analytics-page__kpi-delta\" [attr.data-tone]=\"kpi.tone\">{{ kpi.delta }}</span>\n          }\n          @if (kpi.sub) {\n            <span class=\"analytics-page__kpi-sub\">{{ kpi.sub }}</span>\n          }\n        </article>\n      }\n    </section>\n\n    <div class=\"analytics-page__charts\">\n      <article class=\"eds-card analytics-page__chart\">\n        <div class=\"analytics-page__chart-head\">\n          <h2 class=\"eds-h2\">Call volume</h2>\n          <span class=\"eds-label\">{{ volumeRangeLabel() }}</span>\n        </div>\n        <div class=\"analytics-page__volume-chart\">\n          <div class=\"analytics-page__plot\">\n            <div class=\"analytics-page__grid\" aria-hidden=\"true\"></div>\n            <div class=\"analytics-page__bars\" role=\"list\" aria-label=\"Call volume by day\">\n              @for (point of data()!.volume.points; track point.date || point.label; let i = $index) {\n                <div\n                  class=\"analytics-page__bar-col\"\n                  role=\"listitem\"\n                  [attr.aria-label]=\"volumeTooltip(point)\"\n                >\n                  <div class=\"analytics-page__bar-wrap\">\n                    @if (point.count > 0) {\n                      <div\n                        class=\"analytics-page__bar-stack\"\n                        [style.height.%]=\"barHeightPercent(point, data()!.volume.points)\"\n                      >\n                        @if (showBarValue(point, data()!.volume.points)) {\n                          <span class=\"analytics-page__bar-value eds-mono-sm\">{{ point.count }}</span>\n                        }\n                        <div class=\"analytics-page__bar\"></div>\n                      </div>\n                    }\n                    <span class=\"analytics-page__tooltip\">{{ volumeTooltip(point) }}</span>\n                  </div>\n                  <span class=\"eds-mono-sm analytics-page__bar-axis\">\n                    {{ volumeAxisLabel(point, i, data()!.volume.points.length) }}\n                  </span>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n        <!-- <p class=\"analytics-page__axis-note eds-label\">(MM/DD)/calls per day</p> -->\n      </article>\n\n      <article class=\"eds-card analytics-page__chart\">\n        <h2 class=\"eds-h2\">Outcomes</h2>\n        <div class=\"analytics-page__bars analytics-page__bars--horizontal\">\n          @for (item of data()!.outcomes; track item.label) {\n            <div class=\"analytics-page__hbar-row\">\n              <span class=\"eds-body-sm\">{{ item.label }}</span>\n              <div class=\"analytics-page__hbar-track\">\n                <span\n                  class=\"analytics-page__hbar-fill\"\n                  [style.width.%]=\"(item.value / maxValue(data()!.outcomes)) * 100\"\n                  [style.background]=\"item.color\"\n                ></span>\n              </div>\n              <span class=\"eds-mono-sm\">{{ item.value }}%</span>\n            </div>\n          }\n        </div>\n      </article>\n\n      <article class=\"eds-card analytics-page__chart\">\n        <h2 class=\"eds-h2\">Top reasons</h2>\n        <div class=\"analytics-page__bars analytics-page__bars--horizontal\">\n          @for (item of data()!.reasons; track item.label) {\n            <div class=\"analytics-page__hbar-row\">\n              <span class=\"eds-body-sm\">{{ item.label }}</span>\n              <div class=\"analytics-page__hbar-track\">\n                <span\n                  class=\"analytics-page__hbar-fill\"\n                  [style.width.%]=\"(item.value / maxValue(data()!.reasons)) * 100\"\n                ></span>\n              </div>\n              <span class=\"eds-mono-sm\">{{ item.value }}%</span>\n            </div>\n          }\n        </div>\n      </article>\n\n      <article class=\"eds-card analytics-page__chart\">\n        <div class=\"analytics-page__chart-head\">\n          <h2 class=\"eds-h2\">Peak hours</h2>\n          <span class=\"eds-label\">\n            @if (data()!.peakHours.timezone) {\n              {{ data()!.peakHours.timezone }}\n            } @else {\n              Calls per hour\n            }\n          </span>\n        </div>\n        <div class=\"analytics-page__volume-chart analytics-page__volume-chart--peak\">\n          <div class=\"analytics-page__plot\">\n            <div class=\"analytics-page__grid\" aria-hidden=\"true\"></div>\n            <div class=\"analytics-page__bars analytics-page__bars--peak\" role=\"list\" aria-label=\"Call volume by hour\">\n              @for (point of data()!.peakHours.points; track point.hour) {\n                <div\n                  class=\"analytics-page__bar-col analytics-page__bar-col--peak\"\n                  role=\"listitem\"\n                  [attr.aria-label]=\"peakTooltip(point)\"\n                >\n                  <div class=\"analytics-page__bar-wrap\">\n                    @if (point.count > 0) {\n                      <div\n                        class=\"analytics-page__bar-stack\"\n                        [style.height.%]=\"barHeightPercent(point, data()!.peakHours.points)\"\n                      >\n                        <div class=\"analytics-page__bar\"></div>\n                      </div>\n                    }\n                    <span class=\"analytics-page__tooltip\">{{ peakTooltip(point) }}</span>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n        <div class=\"analytics-page__peak-axis\">\n          @for (point of data()!.peakHours.points; track point.hour; let i = $index) {\n            <span class=\"analytics-page__peak-tick eds-mono-sm\">\n              @if (showPeakAxisLabel(i, data()!.peakHours.points.length)) {\n                {{ point.label }}\n              }\n            </span>\n          }\n        </div>\n      </article>\n    </div>\n  }\n</div>\n", styles: [".analytics-page__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}.analytics-page__range{display:flex;gap:4px;background:var(--surface-l0);border:1px solid var(--border-default);border-radius:var(--eds-radius-md);padding:4px}.analytics-page__range-btn{padding:6px 12px;border:none;background:none;font-size:13px;border-radius:var(--eds-radius-sm);cursor:pointer;color:var(--text-secondary)}.analytics-page__range-btn--active{background:var(--brand-500);color:#fff}.analytics-page__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}.analytics-page__kpi{display:flex;flex-direction:column;gap:6px;padding:16px}.analytics-page__kpi-value{font-size:24px;font-weight:600;color:var(--text-primary)}.analytics-page__kpi-delta{font-size:12px;font-weight:600}.analytics-page__kpi-delta[data-tone=pos]{color:var(--green-500, #16a34a)}.analytics-page__kpi-delta[data-tone=warn]{color:var(--amber-500, #d97706)}.analytics-page__kpi-delta[data-tone=neutral]{color:var(--text-secondary)}.analytics-page__kpi-sub{font-size:12px;color:var(--text-secondary)}.analytics-page__charts{display:grid;grid-template-columns:1fr 1fr;gap:16px}.analytics-page__chart{padding:16px}.analytics-page__chart .eds-h2{margin-bottom:0}.analytics-page__chart-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}.analytics-page__volume-chart--peak .analytics-page__grid{inset:0}.analytics-page__plot{position:relative;width:100%;min-width:0}.analytics-page__grid{position:absolute;inset:0 0 24px;pointer-events:none;background-image:linear-gradient(to top,var(--border-default) 1px,transparent 1px);background-size:100% 25%;opacity:.45}.analytics-page__bars{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;height:160px;position:relative;z-index:1}.analytics-page__bars--horizontal{flex-direction:column;height:auto;align-items:stretch;gap:10px}.analytics-page__bars--peak{height:100px}.analytics-page__bars--peak .analytics-page__bar{max-width:100%}.analytics-page__bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;min-width:0;cursor:default}.analytics-page__bar-col:hover .analytics-page__tooltip,.analytics-page__bar-col:focus-within .analytics-page__tooltip{opacity:1}.analytics-page__bar-col--peak{min-width:0}.analytics-page__bar-value{flex-shrink:0;color:var(--text-primary);font-size:11px;font-weight:600;line-height:1}.analytics-page__bar-wrap{position:relative;width:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-height:0}.analytics-page__bar-stack{width:100%;max-width:32px;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:4px;min-height:0}.analytics-page__bar-axis{flex-shrink:0;min-height:16px;color:var(--text-secondary);font-size:10px;text-align:center;line-height:1.2}.analytics-page__tooltip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);padding:4px 8px;background:var(--gray-900, #18181b);color:#fafafa;font-size:11px;font-weight:500;line-height:1.3;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s ease;z-index:2;box-shadow:0 2px 8px #00000026}.analytics-page__tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:var(--gray-900, #18181b)}.analytics-page__peak-axis{display:flex;justify-content:space-between;gap:2px;margin-top:8px}.analytics-page__peak-tick{flex:1;text-align:center;min-height:16px;color:var(--text-secondary);font-size:10px}.analytics-page__bar{width:100%;flex:1 1 auto;min-height:3px;background:linear-gradient(180deg,var(--brand-500),var(--violet-500));border-radius:4px 4px 0 0;animation:eds-bar-grow .5s ease forwards;transform-origin:bottom}.analytics-page__hbar-row{display:grid;grid-template-columns:120px 1fr 40px;align-items:center;gap:10px}.analytics-page__hbar-track{height:8px;background:var(--surface-l2);border-radius:4px;overflow:hidden}.analytics-page__hbar-fill{display:block;height:100%;background:var(--brand-500);border-radius:4px;animation:eds-bar-grow .5s ease forwards;transform-origin:left}@media(max-width:1000px){.analytics-page__kpis{grid-template-columns:repeat(2,1fr)}.analytics-page__charts{grid-template-columns:1fr}}\n"] }]
-        }] });
-
-export { AnalyticsPageComponent };
-//# sourceMappingURL=edvak99-voice-receptionist-widget-analytics-page.component-CW5OKmik.mjs.map

package/fesm2022/edvak99-voice-receptionist-widget-analytics-page.component-CW5OKmik.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"edvak99-voice-receptionist-widget-analytics-page.component-CW5OKmik.mjs","sources":["../../../projects/voice-receptionist-widget/src/lib/pages/analytics-page/analytics-page.component.ts","../../../projects/voice-receptionist-widget/src/lib/pages/analytics-page/analytics-page.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, inject, OnInit, signal } from '@angular/core';\n\nimport {\n  AnalyticsData,\n  AnalyticsPeakPoint,\n  AnalyticsVolumePoint,\n} from '../../models/ai-receptionist.types';\nimport { AiReceptionistApiService } from '../../services/ai-receptionist-api.service';\nimport { EdsIconComponent } from '../../ui/eds-icon.component';\n\n@Component({\n    selector: 'eds-analytics-page',\n    imports: [EdsIconComponent],\n    templateUrl: './analytics-page.component.html',\n    styleUrl: './analytics-page.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class AnalyticsPageComponent implements OnInit {\n  private readonly api = inject(AiReceptionistApiService);\n\n  protected readonly data = signal<AnalyticsData | null>(null);\n  protected readonly range = signal('30d');\n  protected readonly loading = signal(true);\n\n  protected readonly ranges = [\n    { id: '7d', label: '7 days' },\n    { id: '30d', label: '30 days' },\n    { id: '90d', label: '90 days' },\n  ];\n\n  ngOnInit(): void {\n    this.load();\n  }\n\n  protected setRange(id: string): void {\n    this.range.set(id);\n    this.load();\n  }\n\n  protected maxCount(items: { count: number }[]): number {\n    return Math.max(...items.map((i) => i.count), 1);\n  }\n\n  protected barHeightPercent(point: { count: number }, points: { count: number }[]): number {\n    if (point.count <= 0) return 0;\n    return (point.count / this.maxCount(points)) * 100;\n  }\n\n  /** Hide inline counts when bars are too narrow to stay readable. */\n  protected showBarValue(point: { count: number }, points: { count: number }[]): boolean {\n    return point.count > 0 && points.length <= 21;\n  }\n\n  protected maxValue(items: { value: number }[]): number {\n    return Math.max(...items.map((i) => i.value), 1);\n  }\n\n  protected volumeTooltip(point: AnalyticsVolumePoint): string {\n    const datePart = point.date ? this.formatChartDate(point.date) : point.label;\n    return `${datePart}: ${point.count} call${point.count === 1 ? '' : 's'}`;\n  }\n\n  protected peakTooltip(point: AnalyticsPeakPoint): string {\n    return `${point.label}: ${point.count} call${point.count === 1 ? '' : 's'}`;\n  }\n\n  /** ISO or YYYY-MM-DD → MM/DD (zero-padded). */\n  protected formatChartDate(date: string): string {\n    const iso = /^(\\d{4})-(\\d{2})-(\\d{2})/.exec(date.trim());\n    if (iso) {\n      return `${iso[2]}/${iso[3]}`;\n    }\n    return date;\n  }\n\n  /** Compact x-axis for volume — full labels on 7d, sparse dates on longer ranges. */\n  protected volumeAxisLabel(point: AnalyticsVolumePoint, index: number, total: number): string {\n    if (point.date) {\n      if (total <= 7) return this.formatChartDate(point.date);\n      const step = total <= 14 ? 2 : total <= 31 ? 5 : 7;\n      if (index % step !== 0 && index !== total - 1) return '';\n      return this.formatChartDate(point.date);\n    }\n    if (total <= 7) return point.day;\n    const step = total <= 14 ? 2 : total <= 31 ? 5 : 7;\n    if (index % step !== 0 && index !== total - 1) return '';\n    return point.day;\n  }\n\n  protected showPeakAxisLabel(index: number, total: number): boolean {\n    if (total <= 12) return true;\n    const step = total <= 24 ? 3 : 4;\n    return index % step === 0 || index === total - 1;\n  }\n\n  protected volumeRangeLabel(): string {\n    const vol = this.data()?.volume;\n    if (!vol?.startDate || !vol?.endDate) return 'Calls per day';\n    const start = this.formatChartDate(vol.startDate);\n    const end = this.formatChartDate(vol.endDate);\n    return `${start} – ${end}${vol.timezone ? ` (${vol.timezone})` : ''}`;\n  }\n\n  protected kpiIcon(label: string): string {\n    const key = label.toLowerCase();\n    if (key.includes('call') || key.includes('handled')) return 'call';\n    if (key.includes('time') || key.includes('duration')) return 'schedule';\n    if (key.includes('resolution') || key.includes('book')) return 'event_available';\n    if (key.includes('transfer')) return 'phone_forwarded';\n    return 'monitoring';\n  }\n\n  private load(): void {\n    this.loading.set(true);\n    this.api.getAnalytics(this.range()).subscribe(({ data }) => {\n      this.data.set(data);\n      this.loading.set(false);\n    });\n  }\n}\n","<div class=\"eds-page analytics-page\">\n  <header class=\"analytics-page__header\">\n    <div>\n      <h1 class=\"eds-h1\">Analytics</h1>\n      <p class=\"eds-body-sm\">Call volume, outcomes, and performance KPIs</p>\n    </div>\n    <div class=\"analytics-page__range\">\n      @for (r of ranges; track r.id) {\n        <button\n          type=\"button\"\n          class=\"analytics-page__range-btn\"\n          [class.analytics-page__range-btn--active]=\"range() === r.id\"\n          (click)=\"setRange(r.id)\"\n        >\n          {{ r.label }}\n        </button>\n      }\n    </div>\n  </header>\n\n  @if (loading()) {\n    <p class=\"eds-body-sm\">Loading analytics…</p>\n  } @else if (data()) {\n    <section class=\"analytics-page__kpis\">\n      @for (kpi of data()!.kpiCards; track kpi.label) {\n        <article class=\"eds-card analytics-page__kpi\">\n          <eds-icon [name]=\"kpiIcon(kpi.label)\" [size]=\"22\" />\n          <span class=\"eds-label\">{{ kpi.label }}</span>\n          <span class=\"analytics-page__kpi-value\">{{ kpi.value }}</span>\n          @if (kpi.delta) {\n            <span class=\"analytics-page__kpi-delta\" [attr.data-tone]=\"kpi.tone\">{{ kpi.delta }}</span>\n          }\n          @if (kpi.sub) {\n            <span class=\"analytics-page__kpi-sub\">{{ kpi.sub }}</span>\n          }\n        </article>\n      }\n    </section>\n\n    <div class=\"analytics-page__charts\">\n      <article class=\"eds-card analytics-page__chart\">\n        <div class=\"analytics-page__chart-head\">\n          <h2 class=\"eds-h2\">Call volume</h2>\n          <span class=\"eds-label\">{{ volumeRangeLabel() }}</span>\n        </div>\n        <div class=\"analytics-page__volume-chart\">\n          <div class=\"analytics-page__plot\">\n            <div class=\"analytics-page__grid\" aria-hidden=\"true\"></div>\n            <div class=\"analytics-page__bars\" role=\"list\" aria-label=\"Call volume by day\">\n              @for (point of data()!.volume.points; track point.date || point.label; let i = $index) {\n                <div\n                  class=\"analytics-page__bar-col\"\n                  role=\"listitem\"\n                  [attr.aria-label]=\"volumeTooltip(point)\"\n                >\n                  <div class=\"analytics-page__bar-wrap\">\n                    @if (point.count > 0) {\n                      <div\n                        class=\"analytics-page__bar-stack\"\n                        [style.height.%]=\"barHeightPercent(point, data()!.volume.points)\"\n                      >\n                        @if (showBarValue(point, data()!.volume.points)) {\n                          <span class=\"analytics-page__bar-value eds-mono-sm\">{{ point.count }}</span>\n                        }\n                        <div class=\"analytics-page__bar\"></div>\n                      </div>\n                    }\n                    <span class=\"analytics-page__tooltip\">{{ volumeTooltip(point) }}</span>\n                  </div>\n                  <span class=\"eds-mono-sm analytics-page__bar-axis\">\n                    {{ volumeAxisLabel(point, i, data()!.volume.points.length) }}\n                  </span>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n        <!-- <p class=\"analytics-page__axis-note eds-label\">(MM/DD)/calls per day</p> -->\n      </article>\n\n      <article class=\"eds-card analytics-page__chart\">\n        <h2 class=\"eds-h2\">Outcomes</h2>\n        <div class=\"analytics-page__bars analytics-page__bars--horizontal\">\n          @for (item of data()!.outcomes; track item.label) {\n            <div class=\"analytics-page__hbar-row\">\n              <span class=\"eds-body-sm\">{{ item.label }}</span>\n              <div class=\"analytics-page__hbar-track\">\n                <span\n                  class=\"analytics-page__hbar-fill\"\n                  [style.width.%]=\"(item.value / maxValue(data()!.outcomes)) * 100\"\n                  [style.background]=\"item.color\"\n                ></span>\n              </div>\n              <span class=\"eds-mono-sm\">{{ item.value }}%</span>\n            </div>\n          }\n        </div>\n      </article>\n\n      <article class=\"eds-card analytics-page__chart\">\n        <h2 class=\"eds-h2\">Top reasons</h2>\n        <div class=\"analytics-page__bars analytics-page__bars--horizontal\">\n          @for (item of data()!.reasons; track item.label) {\n            <div class=\"analytics-page__hbar-row\">\n              <span class=\"eds-body-sm\">{{ item.label }}</span>\n              <div class=\"analytics-page__hbar-track\">\n                <span\n                  class=\"analytics-page__hbar-fill\"\n                  [style.width.%]=\"(item.value / maxValue(data()!.reasons)) * 100\"\n                ></span>\n              </div>\n              <span class=\"eds-mono-sm\">{{ item.value }}%</span>\n            </div>\n          }\n        </div>\n      </article>\n\n      <article class=\"eds-card analytics-page__chart\">\n        <div class=\"analytics-page__chart-head\">\n          <h2 class=\"eds-h2\">Peak hours</h2>\n          <span class=\"eds-label\">\n            @if (data()!.peakHours.timezone) {\n              {{ data()!.peakHours.timezone }}\n            } @else {\n              Calls per hour\n            }\n          </span>\n        </div>\n        <div class=\"analytics-page__volume-chart analytics-page__volume-chart--peak\">\n          <div class=\"analytics-page__plot\">\n            <div class=\"analytics-page__grid\" aria-hidden=\"true\"></div>\n            <div class=\"analytics-page__bars analytics-page__bars--peak\" role=\"list\" aria-label=\"Call volume by hour\">\n              @for (point of data()!.peakHours.points; track point.hour) {\n                <div\n                  class=\"analytics-page__bar-col analytics-page__bar-col--peak\"\n                  role=\"listitem\"\n                  [attr.aria-label]=\"peakTooltip(point)\"\n                >\n                  <div class=\"analytics-page__bar-wrap\">\n                    @if (point.count > 0) {\n                      <div\n                        class=\"analytics-page__bar-stack\"\n                        [style.height.%]=\"barHeightPercent(point, data()!.peakHours.points)\"\n                      >\n                        <div class=\"analytics-page__bar\"></div>\n                      </div>\n                    }\n                    <span class=\"analytics-page__tooltip\">{{ peakTooltip(point) }}</span>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n        <div class=\"analytics-page__peak-axis\">\n          @for (point of data()!.peakHours.points; track point.hour; let i = $index) {\n            <span class=\"analytics-page__peak-tick eds-mono-sm\">\n              @if (showPeakAxisLabel(i, data()!.peakHours.points.length)) {\n                {{ point.label }}\n              }\n            </span>\n          }\n        </div>\n      </article>\n    </div>\n  }\n</div>\n"],"names":[],"mappings":"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"}