@edvak99/voice-receptionist-widget 1.1.26 → 1.1.29

package/fesm2022/{edvak99-voice-receptionist-widget-edvak99-voice-receptionist-widget-CabSa0_n.mjs → edvak99-voice-receptionist-widget-edvak99-voice-receptionist-widget-DOYlRven.mjs}

@@ -1230,7 +1230,7 @@ const DEFAULT_BOOKING_MODE_OPTIONS = [
     {
         value: 'pending',
         label: 'Pending appointment',
-        description: 'Submits an Online Request for staff review (req-auto-new-appointment). Do not tell the caller the visit is confirmed.',
+        description: 'Submits an Online Request for staff review. Do not tell the caller the visit is confirmed.',
     },
 ];
 function unwrapBookingModePayload(body) {
@@ -2749,7 +2749,7 @@ class AiReceptionistApiMockService {
                 {
                     value: 'pending',
                     label: 'Pending appointment',
-                    description: 'Submits an Online Request for staff review (req-auto-new-appointment). Do not tell the caller the visit is confirmed.',
+                    description: 'Submits an Online Request for staff review. Do not tell the caller the visit is confirmed.',
                 },
             ],
         });
@@ -3890,11 +3890,11 @@ class ToastContainerComponent {
         this.toastService = inject(ToastService);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ToastContainerComponent, isStandalone: true, selector: "app-toast-container", ngImport: i0, template: "<div class=\"fixed bottom-6 right-6 z-[1100] flex max-w-[380px] flex-col gap-3 pointer-events-none\" aria-live=\"polite\" aria-atomic=\"false\">\n  @for (toast of toastService.toasts(); track toast.id) {\n    <div\n      class=\"toast pointer-events-auto flex items-start gap-3 rounded-lg border border-base bg-white px-4 py-3 text-[13px] text-dark shadow-[0_6px_24px_rgba(20,30,50,0.12)]\"\n      role=\"status\"\n    >\n      <span\n        class=\"inline-flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-full\"\n        [class]=\"toast.variant === 'success' ? 'bg-emerald-50 text-emerald-600' : toast.variant === 'error' ? 'bg-red-50 text-red-600' : 'bg-blue-50 text-blue-600'\"\n        aria-hidden=\"true\"\n      >\n        @switch (toast.variant) {\n          @case ('success') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                 stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <polyline points=\"20 6 9 17 4 12\" />\n            </svg>\n          }\n          @case ('error') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                 stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\" />\n              <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"13\" />\n              <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\" />\n            </svg>\n          }\n          @default {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                 stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\" />\n              <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\" />\n              <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\" />\n            </svg>\n          }\n        }\n      </span>\n      <span class=\"flex-1 leading-snug\">{{ toast.text }}</span>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-none bg-transparent text-light transition-colors duration-150 hover:bg-lighter hover:text-dark\"\n        (click)=\"toastService.dismiss(toast.id)\"\n        aria-label=\"Dismiss notification\"\n      >\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n             stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n        </svg>\n      </button>\n    </div>\n  }\n</div>\n", styles: [".toast{animation:slide-in .16s ease}@keyframes slide-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ToastContainerComponent, isStandalone: true, selector: "app-toast-container", ngImport: i0, template: "<div class=\"fixed bottom-6 right-6 z-[1100] flex max-w-[380px] flex-col gap-3 pointer-events-none\" aria-live=\"polite\" aria-atomic=\"false\">\r\n  @for (toast of toastService.toasts(); track toast.id) {\r\n    <div\r\n      class=\"toast pointer-events-auto flex items-start gap-3 rounded-lg border border-base bg-white px-4 py-3 text-[13px] text-dark shadow-[0_6px_24px_rgba(20,30,50,0.12)]\"\r\n      role=\"status\"\r\n    >\r\n      <span\r\n        class=\"inline-flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-full\"\r\n        [class]=\"toast.variant === 'success' ? 'bg-emerald-50 text-emerald-600' : toast.variant === 'error' ? 'bg-red-50 text-red-600' : 'bg-blue-50 text-blue-600'\"\r\n        aria-hidden=\"true\"\r\n      >\r\n        @switch (toast.variant) {\r\n          @case ('success') {\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                 stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <polyline points=\"20 6 9 17 4 12\" />\r\n            </svg>\r\n          }\r\n          @case ('error') {\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                 stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <circle cx=\"12\" cy=\"12\" r=\"10\" />\r\n              <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"13\" />\r\n              <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\" />\r\n            </svg>\r\n          }\r\n          @default {\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                 stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <circle cx=\"12\" cy=\"12\" r=\"10\" />\r\n              <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\" />\r\n              <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\" />\r\n            </svg>\r\n          }\r\n        }\r\n      </span>\r\n      <span class=\"flex-1 leading-snug\">{{ toast.text }}</span>\r\n      <button\r\n        type=\"button\"\r\n        class=\"inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-none bg-transparent text-light transition-colors duration-150 hover:bg-lighter hover:text-dark\"\r\n        (click)=\"toastService.dismiss(toast.id)\"\r\n        aria-label=\"Dismiss notification\"\r\n      >\r\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n             stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\r\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\r\n        </svg>\r\n      </button>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".toast{animation:slide-in .16s ease}@keyframes slide-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ToastContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-toast-container', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fixed bottom-6 right-6 z-[1100] flex max-w-[380px] flex-col gap-3 pointer-events-none\" aria-live=\"polite\" aria-atomic=\"false\">\n  @for (toast of toastService.toasts(); track toast.id) {\n    <div\n      class=\"toast pointer-events-auto flex items-start gap-3 rounded-lg border border-base bg-white px-4 py-3 text-[13px] text-dark shadow-[0_6px_24px_rgba(20,30,50,0.12)]\"\n      role=\"status\"\n    >\n      <span\n        class=\"inline-flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-full\"\n        [class]=\"toast.variant === 'success' ? 'bg-emerald-50 text-emerald-600' : toast.variant === 'error' ? 'bg-red-50 text-red-600' : 'bg-blue-50 text-blue-600'\"\n        aria-hidden=\"true\"\n      >\n        @switch (toast.variant) {\n          @case ('success') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                 stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <polyline points=\"20 6 9 17 4 12\" />\n            </svg>\n          }\n          @case ('error') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                 stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\" />\n              <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"13\" />\n              <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\" />\n            </svg>\n          }\n          @default {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                 stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\" />\n              <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\" />\n              <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\" />\n            </svg>\n          }\n        }\n      </span>\n      <span class=\"flex-1 leading-snug\">{{ toast.text }}</span>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-none bg-transparent text-light transition-colors duration-150 hover:bg-lighter hover:text-dark\"\n        (click)=\"toastService.dismiss(toast.id)\"\n        aria-label=\"Dismiss notification\"\n      >\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n             stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n        </svg>\n      </button>\n    </div>\n  }\n</div>\n", styles: [".toast{animation:slide-in .16s ease}@keyframes slide-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+            args: [{ selector: 'app-toast-container', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fixed bottom-6 right-6 z-[1100] flex max-w-[380px] flex-col gap-3 pointer-events-none\" aria-live=\"polite\" aria-atomic=\"false\">\r\n  @for (toast of toastService.toasts(); track toast.id) {\r\n    <div\r\n      class=\"toast pointer-events-auto flex items-start gap-3 rounded-lg border border-base bg-white px-4 py-3 text-[13px] text-dark shadow-[0_6px_24px_rgba(20,30,50,0.12)]\"\r\n      role=\"status\"\r\n    >\r\n      <span\r\n        class=\"inline-flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-full\"\r\n        [class]=\"toast.variant === 'success' ? 'bg-emerald-50 text-emerald-600' : toast.variant === 'error' ? 'bg-red-50 text-red-600' : 'bg-blue-50 text-blue-600'\"\r\n        aria-hidden=\"true\"\r\n      >\r\n        @switch (toast.variant) {\r\n          @case ('success') {\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                 stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <polyline points=\"20 6 9 17 4 12\" />\r\n            </svg>\r\n          }\r\n          @case ('error') {\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                 stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <circle cx=\"12\" cy=\"12\" r=\"10\" />\r\n              <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"13\" />\r\n              <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\" />\r\n            </svg>\r\n          }\r\n          @default {\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                 stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <circle cx=\"12\" cy=\"12\" r=\"10\" />\r\n              <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\" />\r\n              <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\" />\r\n            </svg>\r\n          }\r\n        }\r\n      </span>\r\n      <span class=\"flex-1 leading-snug\">{{ toast.text }}</span>\r\n      <button\r\n        type=\"button\"\r\n        class=\"inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-none bg-transparent text-light transition-colors duration-150 hover:bg-lighter hover:text-dark\"\r\n        (click)=\"toastService.dismiss(toast.id)\"\r\n        aria-label=\"Dismiss notification\"\r\n      >\r\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n             stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\r\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\r\n        </svg>\r\n      </button>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".toast{animation:slide-in .16s ease}@keyframes slide-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }] });
 
 /** Coerce `[loading]` so attributes like `loading`, `loading="true"|"false"`, or a label work. */
@@ -4038,11 +4038,11 @@ class EdButtonComponent {
         this.clicked.emit(evt);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EdButtonComponent, isStandalone: true, selector: "ed-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ghost: { classPropertyName: "ghost", publicName: "ghost", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, subtle: { classPropertyName: "subtle", publicName: "subtle", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, download: { classPropertyName: "download", publicName: "download", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "click$" }, ngImport: i0, template: "<ng-template #slotPrefix>\n  <ng-content select='[slot=\"prefix\"]' />\n</ng-template>\n<ng-template #slotDefault>\n  <ng-content />\n</ng-template>\n<ng-template #slotSuffix>\n  <ng-content select='[slot=\"suffix\"]' />\n</ng-template>\n\n@if (!asAnchor()) {\n  <button\n    class=\"btn\"\n    [attr.variant]=\"variant()\"\n    [attr.size]=\"size()\"\n    [class.is-block]=\"block()\"\n    [class.is-elevated]=\"elevated()\"\n    [class.shape-pill]=\"shape() === 'pill'\"\n    [class.shape-square]=\"shape() === 'square'\"\n    [disabled]=\"disabled() || loadingOn()\"\n    [attr.type]=\"type()\"\n    [attr.aria-busy]=\"loadingOn() ? 'true' : null\"\n    [attr.inert]=\"(disabled() || loadingOn()) ? '' : null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    (click)=\"onClick($event)\"\n    [style.height.px]=\"btnHeightPx()\"\n    [style.minHeight.px]=\"24\"\n    [style.minWidth.px]=\"24\"\n    [style.--btn-icon.px]=\"iconPx()\"\n    [attr.ghost]=\"ghost() ? '' : null\"\n    [attr.subtle]=\"subtle() ? '' : null\"\n    [attr.fill]=\"fill() ? '' : null\"\n    [attr.outline]=\"(outline() || (!ghost() && !subtle() && !fill())) ? '' : null\">\n    @if (loadingOn()) {\n      <span class=\"spinner\" aria-hidden=\"true\"></span>\n    }\n\n    @if (loadingOn()) {\n      <span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n        {{ loadingLabel() }}\n      </span>\n    }\n\n    <span class=\"btn-inner\">\n      <ng-container [ngTemplateOutlet]=\"slotPrefix\"></ng-container>\n\n      <span class=\"label\">\n        @if (loadingOn()) {\n          {{ loadingLabel() }}\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"slotDefault\"></ng-container>\n        }\n      </span>\n\n      <ng-container [ngTemplateOutlet]=\"slotSuffix\"></ng-container>\n    </span>\n  </button>\n} @else {\n  <a\n    class=\"btn\"\n    [attr.variant]=\"variant()\"\n    [attr.size]=\"size()\"\n    [class.is-block]=\"block()\"\n    [class.is-elevated]=\"elevated()\"\n    [class.shape-pill]=\"shape() === 'pill'\"\n    [class.shape-square]=\"shape() === 'square'\"\n    [attr.href]=\"effectiveHref()\"\n    [routerLink]=\"effectiveRouterLink()\"\n    [attr.rel]=\"safeRel()\"\n    [attr.target]=\"target() || null\"\n    [attr.download]=\"downloadAttr()\"\n    [attr.tabindex]=\"(disabled() || loadingOn()) ? -1 : 0\"\n    [attr.aria-disabled]=\"(disabled() || loadingOn()) ? 'true' : null\"\n    [attr.aria-busy]=\"loadingOn() ? 'true' : null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    (click)=\"onClick($event)\"\n    [style.height.px]=\"btnHeightPx()\"\n    [style.minHeight.px]=\"24\"\n    [style.minWidth.px]=\"24\"\n    [style.--btn-icon.px]=\"iconPx()\"\n    [attr.ghost]=\"ghost() ? '' : null\"\n    [attr.subtle]=\"subtle() ? '' : null\"\n    [attr.fill]=\"fill() ? '' : null\"\n    [attr.outline]=\"(outline() || (!ghost() && !subtle() && !fill())) ? '' : null\">\n    @if (loadingOn()) {\n      <span class=\"spinner\" aria-hidden=\"true\"></span>\n    }\n\n    @if (loadingOn()) {\n      <span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n        {{ loadingLabel() }}\n      </span>\n    }\n\n    <span class=\"btn-inner\">\n      <ng-container [ngTemplateOutlet]=\"slotPrefix\"></ng-container>\n\n      <span class=\"label\">\n        @if (loadingOn()) {\n          {{ loadingLabel() }}\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"slotDefault\"></ng-container>\n        }\n      </span>\n\n      <ng-container [ngTemplateOutlet]=\"slotSuffix\"></ng-container>\n    </span>\n  </a>\n}\n", styles: ["@charset \"UTF-8\";.btn{position:relative;display:inline-flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;border-width:1px;border-style:solid;border-color:transparent;font-weight:500;line-height:1.5;outline:2px solid transparent;outline-offset:2px;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-timing-function:cubic-bezier(0,0,.2,1);font-size:.75rem;line-height:1rem}.btn[size=xs]{gap:.125rem;border-radius:.25rem;padding-left:.5rem;padding-right:.625rem;font-size:.625rem}.btn[size=sm]{gap:.125rem;border-radius:.25rem;padding-left:.625rem;padding-right:.75rem;font-size:.75rem;line-height:1rem}.btn[size=base]{gap:.5rem;border-radius:.375rem;padding-left:.75rem;padding-right:.875rem;font-size:.8125rem;line-height:1.25rem}.btn[size=md]{gap:.5rem;border-radius:.5rem;padding-left:.75rem;padding-right:1rem;font-size:.9375rem;line-height:1.5rem}.btn[size=lg]{gap:.75rem;border-radius:.5rem;padding-left:1rem;padding-right:1.25rem;font-size:.9375rem;line-height:1.5rem}.btn.shape-pill{border-radius:9999px}.btn.shape-square{border-radius:0}.btn.is-block{width:100%}.btn.is-elevated[fill]{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.btn.is-elevated[fill]:hover{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.btn:focus-visible{outline-style:solid;outline-width:2px;outline-offset:2px;outline-color:hsl(var(--color-primary-500) / 1)}@media(forced-colors:active){.btn:focus-visible{outline-color:CanvasText}.btn[fill]{background:ButtonFace;color:ButtonText;border-color:ButtonText}.btn[outline],.btn[ghost],.btn[subtle]{background:Canvas;color:CanvasText;border-color:CanvasText}}.btn:disabled,.btn[aria-disabled=true],.btn[disabled=true]{pointer-events:none;cursor:not-allowed;opacity:.5}.btn .btn-inner{display:inline-flex;max-width:100%;align-items:center;gap:.25rem}.btn .label{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn .btn-inner>[slot=prefix],.btn .btn-inner>[slot=suffix]{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--btn-icon);block-size:var(--btn-icon)}.btn .btn-inner>[slot=prefix] svg,.btn .btn-inner>[slot=suffix] svg,.btn .btn-inner>[slot=prefix] i,.btn .btn-inner>[slot=suffix] i{width:100%;height:100%}.btn .spinner{display:inline-block;border-radius:9999px;border-width:2px;border-color:transparent;width:var(--btn-icon);height:var(--btn-icon);border-top-color:currentColor;animation:edspin .9s linear infinite}@media(prefers-reduced-motion:reduce){.btn{transition-duration:1ms}.btn .spinner{animation:none}}@keyframes edspin{to{transform:rotate(360deg)}}.btn[ghost][variant=default]{color:hsl(var(--text-foreground))}.btn[ghost][variant=default]:hover{--tw-border-opacity: 1;border-color:rgb(214 211 209 / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[ghost][variant=default]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1))}.btn[ghost][variant=primary]{--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[ghost][variant=primary]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[ghost][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1))}.btn[ghost][variant=secondary]{color:hsl(var(--text-foreground))}.btn[ghost][variant=secondary]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-100) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[ghost][variant=secondary]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-200) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-100) / var(--tw-bg-opacity, 1))}.btn[ghost][variant=success]{--tw-text-opacity: 1;color:hsl(var(--color-success) / var(--tw-text-opacity, 1))}.btn[ghost][variant=success]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-success-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-success-600) / var(--tw-text-opacity, 1))}.btn[ghost][variant=success]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-success-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-success-50) / var(--tw-bg-opacity, 1))}.btn[ghost][variant=warning]{--tw-text-opacity: 1;color:hsl(var(--color-warning) / var(--tw-text-opacity, 1))}.btn[ghost][variant=warning]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-warning-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-warning-600) / var(--tw-text-opacity, 1))}.btn[ghost][variant=warning]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-warning-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-50) / var(--tw-bg-opacity, 1))}.btn[ghost][variant=danger]{--tw-text-opacity: 1;color:hsl(var(--color-danger-400) / var(--tw-text-opacity, 1))}.btn[ghost][variant=danger]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-danger-100) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-danger-600) / var(--tw-text-opacity, 1))}.btn[ghost][variant=danger]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-danger-200) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-50) / var(--tw-bg-opacity, 1))}.btn[ghost][variant=info]{--tw-text-opacity: 1;color:hsl(var(--color-info-400) / var(--tw-text-opacity, 1))}.btn[ghost][variant=info]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-info-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-info-600) / var(--tw-text-opacity, 1))}.btn[ghost][variant=info]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-info-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-info-50) / var(--tw-bg-opacity, 1))}.btn[ghost][variant=accent]{--tw-text-opacity: 1;color:hsl(var(--color-secondary) / var(--tw-text-opacity, 1))}.btn[ghost][variant=accent]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-secondary-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary-700) / var(--tw-text-opacity, 1))}.btn[ghost][variant=accent]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-secondary-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-50) / var(--tw-bg-opacity, 1))}.btn[subtle][variant=default]{--tw-bg-opacity: 1;background-color:rgb(250 250 249 / var(--tw-bg-opacity, 1));color:hsl(var(--text-foreground))}.btn[subtle][variant=default]:hover{--tw-bg-opacity: 1;background-color:rgb(245 245 244 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[subtle][variant=default]:active{--tw-bg-opacity: 1;background-color:rgb(231 229 228 / var(--tw-bg-opacity, 1))}.btn[subtle][variant=primary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[subtle][variant=primary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary-700) / var(--tw-text-opacity, 1))}.btn[subtle][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-200) / var(--tw-bg-opacity, 1))}.btn[subtle][variant=secondary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary) / var(--tw-text-opacity, 1))}.btn[subtle][variant=secondary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary-700) / var(--tw-text-opacity, 1))}.btn[subtle][variant=secondary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-200) / var(--tw-bg-opacity, 1))}.btn[subtle][variant=success]{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-success) / var(--tw-text-opacity, 1))}.btn[subtle][variant=success]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-success-700) / var(--tw-text-opacity, 1))}.btn[subtle][variant=success]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-200) / var(--tw-bg-opacity, 1))}.btn[subtle][variant=warning]{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-warning-700) / var(--tw-text-opacity, 1))}.btn[subtle][variant=warning]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-warning-800) / var(--tw-text-opacity, 1))}.btn[subtle][variant=warning]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-200) / var(--tw-bg-opacity, 1))}.btn[subtle][variant=danger]{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-danger-600) / var(--tw-text-opacity, 1))}.btn[subtle][variant=danger]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-danger-700) / var(--tw-text-opacity, 1))}.btn[subtle][variant=danger]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-200) / var(--tw-bg-opacity, 1))}.btn[subtle][variant=info]{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-info-600) / var(--tw-text-opacity, 1))}.btn[subtle][variant=info]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-info-700) / var(--tw-text-opacity, 1))}.btn[subtle][variant=info]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-200) / var(--tw-bg-opacity, 1))}.btn[subtle][variant=accent]{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary) / var(--tw-text-opacity, 1))}.btn[subtle][variant=accent]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary-700) / var(--tw-text-opacity, 1))}.btn[subtle][variant=accent]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-200) / var(--tw-bg-opacity, 1))}.btn[outline][variant=default]{--tw-border-opacity: 1;border-color:rgb(214 211 209 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));color:hsl(var(--text-foreground))}.btn[outline][variant=default]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-400) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[outline][variant=default]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-100) / var(--tw-bg-opacity, 1))}.btn[outline][variant=primary]{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[outline][variant=primary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1))}.btn[outline][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-100) / var(--tw-bg-opacity, 1))}.btn[outline][variant=secondary]{--tw-border-opacity: 1;border-color:hsl(var(--color-secondary-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary) / var(--tw-text-opacity, 1))}.btn[outline][variant=secondary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-50) / var(--tw-bg-opacity, 1))}.btn[outline][variant=secondary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-100) / var(--tw-bg-opacity, 1))}.btn[outline][variant=success]{--tw-border-opacity: 1;border-color:hsl(var(--color-success-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-success) / var(--tw-text-opacity, 1))}.btn[outline][variant=success]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-50) / var(--tw-bg-opacity, 1))}.btn[outline][variant=success]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-100) / var(--tw-bg-opacity, 1))}.btn[outline][variant=warning]{--tw-border-opacity: 1;border-color:hsl(var(--color-warning-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-warning-700) / var(--tw-text-opacity, 1))}.btn[outline][variant=warning]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-50) / var(--tw-bg-opacity, 1))}.btn[outline][variant=warning]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-100) / var(--tw-bg-opacity, 1))}.btn[outline][variant=danger]{--tw-border-opacity: 1;border-color:hsl(var(--color-danger-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-danger-600) / var(--tw-text-opacity, 1))}.btn[outline][variant=danger]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-50) / var(--tw-bg-opacity, 1))}.btn[outline][variant=danger]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-100) / var(--tw-bg-opacity, 1))}.btn[outline][variant=info]{--tw-border-opacity: 1;border-color:hsl(var(--color-info-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-info-600) / var(--tw-text-opacity, 1))}.btn[outline][variant=info]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-50) / var(--tw-bg-opacity, 1))}.btn[outline][variant=info]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-100) / var(--tw-bg-opacity, 1))}.btn[outline][variant=accent]{--tw-border-opacity: 1;border-color:hsl(var(--color-secondary-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary) / var(--tw-text-opacity, 1))}.btn[outline][variant=accent]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-50) / var(--tw-bg-opacity, 1))}.btn[outline][variant=accent]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-100) / var(--tw-bg-opacity, 1))}.btn[fill][variant=default]{--tw-bg-opacity: 1;background-color:rgb(41 37 36 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=default]:hover{--tw-bg-opacity: 1;background-color:rgb(28 25 23 / var(--tw-bg-opacity, 1))}.btn[fill][variant=default]:active{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.btn[fill][variant=primary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=primary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-600) / var(--tw-bg-opacity, 1))}.btn[fill][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-700) / var(--tw-bg-opacity, 1))}.btn[fill][variant=secondary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=secondary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-600) / var(--tw-bg-opacity, 1))}.btn[fill][variant=secondary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-700) / var(--tw-bg-opacity, 1))}.btn[fill][variant=success]{--tw-bg-opacity: 1;background-color:hsl(var(--color-success) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=success]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-600) / var(--tw-bg-opacity, 1))}.btn[fill][variant=success]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-700) / var(--tw-bg-opacity, 1))}.btn[fill][variant=warning]{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-600) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=warning]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-700) / var(--tw-bg-opacity, 1))}.btn[fill][variant=warning]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-800) / var(--tw-bg-opacity, 1))}.btn[fill][variant=danger]{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-600) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=danger]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-700) / var(--tw-bg-opacity, 1))}.btn[fill][variant=danger]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-800) / var(--tw-bg-opacity, 1))}.btn[fill][variant=info]{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-600) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=info]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-700) / var(--tw-bg-opacity, 1))}.btn[fill][variant=info]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-800) / var(--tw-bg-opacity, 1))}.btn[fill][variant=accent]{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=accent]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-600) / var(--tw-bg-opacity, 1))}.btn[fill][variant=accent]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-700) / var(--tw-bg-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EdButtonComponent, isStandalone: true, selector: "ed-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ghost: { classPropertyName: "ghost", publicName: "ghost", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, subtle: { classPropertyName: "subtle", publicName: "subtle", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, download: { classPropertyName: "download", publicName: "download", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "click$" }, ngImport: i0, template: "<ng-template #slotPrefix>\r\n  <ng-content select='[slot=\"prefix\"]' />\r\n</ng-template>\r\n<ng-template #slotDefault>\r\n  <ng-content />\r\n</ng-template>\r\n<ng-template #slotSuffix>\r\n  <ng-content select='[slot=\"suffix\"]' />\r\n</ng-template>\r\n\r\n@if (!asAnchor()) {\r\n  <button\r\n    class=\"btn\"\r\n    [attr.variant]=\"variant()\"\r\n    [attr.size]=\"size()\"\r\n    [class.is-block]=\"block()\"\r\n    [class.is-elevated]=\"elevated()\"\r\n    [class.shape-pill]=\"shape() === 'pill'\"\r\n    [class.shape-square]=\"shape() === 'square'\"\r\n    [disabled]=\"disabled() || loadingOn()\"\r\n    [attr.type]=\"type()\"\r\n    [attr.aria-busy]=\"loadingOn() ? 'true' : null\"\r\n    [attr.inert]=\"(disabled() || loadingOn()) ? '' : null\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    (click)=\"onClick($event)\"\r\n    [style.height.px]=\"btnHeightPx()\"\r\n    [style.minHeight.px]=\"24\"\r\n    [style.minWidth.px]=\"24\"\r\n    [style.--btn-icon.px]=\"iconPx()\"\r\n    [attr.ghost]=\"ghost() ? '' : null\"\r\n    [attr.subtle]=\"subtle() ? '' : null\"\r\n    [attr.fill]=\"fill() ? '' : null\"\r\n    [attr.outline]=\"(outline() || (!ghost() && !subtle() && !fill())) ? '' : null\">\r\n    @if (loadingOn()) {\r\n      <span class=\"spinner\" aria-hidden=\"true\"></span>\r\n    }\r\n\r\n    @if (loadingOn()) {\r\n      <span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\r\n        {{ loadingLabel() }}\r\n      </span>\r\n    }\r\n\r\n    <span class=\"btn-inner\">\r\n      <ng-container [ngTemplateOutlet]=\"slotPrefix\"></ng-container>\r\n\r\n      <span class=\"label\">\r\n        @if (loadingOn()) {\r\n          {{ loadingLabel() }}\r\n        } @else {\r\n          <ng-container [ngTemplateOutlet]=\"slotDefault\"></ng-container>\r\n        }\r\n      </span>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"slotSuffix\"></ng-container>\r\n    </span>\r\n  </button>\r\n} @else {\r\n  <a\r\n    class=\"btn\"\r\n    [attr.variant]=\"variant()\"\r\n    [attr.size]=\"size()\"\r\n    [class.is-block]=\"block()\"\r\n    [class.is-elevated]=\"elevated()\"\r\n    [class.shape-pill]=\"shape() === 'pill'\"\r\n    [class.shape-square]=\"shape() === 'square'\"\r\n    [attr.href]=\"effectiveHref()\"\r\n    [routerLink]=\"effectiveRouterLink()\"\r\n    [attr.rel]=\"safeRel()\"\r\n    [attr.target]=\"target() || null\"\r\n    [attr.download]=\"downloadAttr()\"\r\n    [attr.tabindex]=\"(disabled() || loadingOn()) ? -1 : 0\"\r\n    [attr.aria-disabled]=\"(disabled() || loadingOn()) ? 'true' : null\"\r\n    [attr.aria-busy]=\"loadingOn() ? 'true' : null\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    (click)=\"onClick($event)\"\r\n    [style.height.px]=\"btnHeightPx()\"\r\n    [style.minHeight.px]=\"24\"\r\n    [style.minWidth.px]=\"24\"\r\n    [style.--btn-icon.px]=\"iconPx()\"\r\n    [attr.ghost]=\"ghost() ? '' : null\"\r\n    [attr.subtle]=\"subtle() ? '' : null\"\r\n    [attr.fill]=\"fill() ? '' : null\"\r\n    [attr.outline]=\"(outline() || (!ghost() && !subtle() && !fill())) ? '' : null\">\r\n    @if (loadingOn()) {\r\n      <span class=\"spinner\" aria-hidden=\"true\"></span>\r\n    }\r\n\r\n    @if (loadingOn()) {\r\n      <span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\r\n        {{ loadingLabel() }}\r\n      </span>\r\n    }\r\n\r\n    <span class=\"btn-inner\">\r\n      <ng-container [ngTemplateOutlet]=\"slotPrefix\"></ng-container>\r\n\r\n      <span class=\"label\">\r\n        @if (loadingOn()) {\r\n          {{ loadingLabel() }}\r\n        } @else {\r\n          <ng-container [ngTemplateOutlet]=\"slotDefault\"></ng-container>\r\n        }\r\n      </span>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"slotSuffix\"></ng-container>\r\n    </span>\r\n  </a>\r\n}\r\n", styles: ["@charset \"UTF-8\";.btn{position:relative;display:inline-flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;border-width:1px;border-style:solid;border-color:transparent;font-weight:500;line-height:1.5;outline:2px solid transparent;outline-offset:2px;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-timing-function:cubic-bezier(0,0,.2,1);font-size:.75rem;line-height:1rem}.btn[size=xs]{gap:.125rem;border-radius:.25rem;padding-left:.5rem;padding-right:.625rem;font-size:.625rem}.btn[size=sm]{gap:.125rem;border-radius:.25rem;padding-left:.625rem;padding-right:.75rem;font-size:.75rem;line-height:1rem}.btn[size=base]{gap:.5rem;border-radius:.375rem;padding-left:.75rem;padding-right:.875rem;font-size:.8125rem;line-height:1.25rem}.btn[size=md]{gap:.5rem;border-radius:.5rem;padding-left:.75rem;padding-right:1rem;font-size:.9375rem;line-height:1.5rem}.btn[size=lg]{gap:.75rem;border-radius:.5rem;padding-left:1rem;padding-right:1.25rem;font-size:.9375rem;line-height:1.5rem}.btn.shape-pill{border-radius:9999px}.btn.shape-square{border-radius:0}.btn.is-block{width:100%}.btn.is-elevated[fill]{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.btn.is-elevated[fill]:hover{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.btn:focus-visible{outline-style:solid;outline-width:2px;outline-offset:2px;outline-color:hsl(var(--color-primary-500) / 1)}@media(forced-colors:active){.btn:focus-visible{outline-color:CanvasText}.btn[fill]{background:ButtonFace;color:ButtonText;border-color:ButtonText}.btn[outline],.btn[ghost],.btn[subtle]{background:Canvas;color:CanvasText;border-color:CanvasText}}.btn:disabled,.btn[aria-disabled=true],.btn[disabled=true]{pointer-events:none;cursor:not-allowed;opacity:.5}.btn .btn-inner{display:inline-flex;max-width:100%;align-items:center;gap:.25rem}.btn .label{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn .btn-inner>[slot=prefix],.btn .btn-inner>[slot=suffix]{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--btn-icon);block-size:var(--btn-icon)}.btn .btn-inner>[slot=prefix] svg,.btn .btn-inner>[slot=suffix] svg,.btn .btn-inner>[slot=prefix] i,.btn .btn-inner>[slot=suffix] i{width:100%;height:100%}.btn .spinner{display:inline-block;border-radius:9999px;border-width:2px;border-color:transparent;width:var(--btn-icon);height:var(--btn-icon);border-top-color:currentColor;animation:edspin .9s linear infinite}@media(prefers-reduced-motion:reduce){.btn{transition-duration:1ms}.btn .spinner{animation:none}}@keyframes edspin{to{transform:rotate(360deg)}}.btn[ghost][variant=default]{color:hsl(var(--text-foreground))}.btn[ghost][variant=default]:hover{--tw-border-opacity: 1;border-color:rgb(214 211 209 / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[ghost][variant=default]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1))}.btn[ghost][variant=primary]{--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[ghost][variant=primary]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[ghost][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1))}.btn[ghost][variant=secondary]{color:hsl(var(--text-foreground))}.btn[ghost][variant=secondary]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-100) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[ghost][variant=secondary]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-200) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-100) / var(--tw-bg-opacity, 1))}.btn[ghost][variant=success]{--tw-text-opacity: 1;color:hsl(var(--color-success) / var(--tw-text-opacity, 1))}.btn[ghost][variant=success]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-success-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-success-600) / var(--tw-text-opacity, 1))}.btn[ghost][variant=success]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-success-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-success-50) / var(--tw-bg-opacity, 1))}.btn[ghost][variant=warning]{--tw-text-opacity: 1;color:hsl(var(--color-warning) / var(--tw-text-opacity, 1))}.btn[ghost][variant=warning]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-warning-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-warning-600) / var(--tw-text-opacity, 1))}.btn[ghost][variant=warning]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-warning-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-50) / var(--tw-bg-opacity, 1))}.btn[ghost][variant=danger]{--tw-text-opacity: 1;color:hsl(var(--color-danger-400) / var(--tw-text-opacity, 1))}.btn[ghost][variant=danger]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-danger-100) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-danger-600) / var(--tw-text-opacity, 1))}.btn[ghost][variant=danger]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-danger-200) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-50) / var(--tw-bg-opacity, 1))}.btn[ghost][variant=info]{--tw-text-opacity: 1;color:hsl(var(--color-info-400) / var(--tw-text-opacity, 1))}.btn[ghost][variant=info]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-info-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-info-600) / var(--tw-text-opacity, 1))}.btn[ghost][variant=info]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-info-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-info-50) / var(--tw-bg-opacity, 1))}.btn[ghost][variant=accent]{--tw-text-opacity: 1;color:hsl(var(--color-secondary) / var(--tw-text-opacity, 1))}.btn[ghost][variant=accent]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-secondary-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary-700) / var(--tw-text-opacity, 1))}.btn[ghost][variant=accent]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-secondary-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-50) / var(--tw-bg-opacity, 1))}.btn[subtle][variant=default]{--tw-bg-opacity: 1;background-color:rgb(250 250 249 / var(--tw-bg-opacity, 1));color:hsl(var(--text-foreground))}.btn[subtle][variant=default]:hover{--tw-bg-opacity: 1;background-color:rgb(245 245 244 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[subtle][variant=default]:active{--tw-bg-opacity: 1;background-color:rgb(231 229 228 / var(--tw-bg-opacity, 1))}.btn[subtle][variant=primary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[subtle][variant=primary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary-700) / var(--tw-text-opacity, 1))}.btn[subtle][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-200) / var(--tw-bg-opacity, 1))}.btn[subtle][variant=secondary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary) / var(--tw-text-opacity, 1))}.btn[subtle][variant=secondary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary-700) / var(--tw-text-opacity, 1))}.btn[subtle][variant=secondary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-200) / var(--tw-bg-opacity, 1))}.btn[subtle][variant=success]{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-success) / var(--tw-text-opacity, 1))}.btn[subtle][variant=success]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-success-700) / var(--tw-text-opacity, 1))}.btn[subtle][variant=success]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-200) / var(--tw-bg-opacity, 1))}.btn[subtle][variant=warning]{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-warning-700) / var(--tw-text-opacity, 1))}.btn[subtle][variant=warning]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-warning-800) / var(--tw-text-opacity, 1))}.btn[subtle][variant=warning]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-200) / var(--tw-bg-opacity, 1))}.btn[subtle][variant=danger]{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-danger-600) / var(--tw-text-opacity, 1))}.btn[subtle][variant=danger]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-danger-700) / var(--tw-text-opacity, 1))}.btn[subtle][variant=danger]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-200) / var(--tw-bg-opacity, 1))}.btn[subtle][variant=info]{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-info-600) / var(--tw-text-opacity, 1))}.btn[subtle][variant=info]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-info-700) / var(--tw-text-opacity, 1))}.btn[subtle][variant=info]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-200) / var(--tw-bg-opacity, 1))}.btn[subtle][variant=accent]{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary) / var(--tw-text-opacity, 1))}.btn[subtle][variant=accent]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary-700) / var(--tw-text-opacity, 1))}.btn[subtle][variant=accent]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-200) / var(--tw-bg-opacity, 1))}.btn[outline][variant=default]{--tw-border-opacity: 1;border-color:rgb(214 211 209 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));color:hsl(var(--text-foreground))}.btn[outline][variant=default]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-400) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[outline][variant=default]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-100) / var(--tw-bg-opacity, 1))}.btn[outline][variant=primary]{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[outline][variant=primary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1))}.btn[outline][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-100) / var(--tw-bg-opacity, 1))}.btn[outline][variant=secondary]{--tw-border-opacity: 1;border-color:hsl(var(--color-secondary-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary) / var(--tw-text-opacity, 1))}.btn[outline][variant=secondary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-50) / var(--tw-bg-opacity, 1))}.btn[outline][variant=secondary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-100) / var(--tw-bg-opacity, 1))}.btn[outline][variant=success]{--tw-border-opacity: 1;border-color:hsl(var(--color-success-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-success) / var(--tw-text-opacity, 1))}.btn[outline][variant=success]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-50) / var(--tw-bg-opacity, 1))}.btn[outline][variant=success]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-100) / var(--tw-bg-opacity, 1))}.btn[outline][variant=warning]{--tw-border-opacity: 1;border-color:hsl(var(--color-warning-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-warning-700) / var(--tw-text-opacity, 1))}.btn[outline][variant=warning]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-50) / var(--tw-bg-opacity, 1))}.btn[outline][variant=warning]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-100) / var(--tw-bg-opacity, 1))}.btn[outline][variant=danger]{--tw-border-opacity: 1;border-color:hsl(var(--color-danger-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-danger-600) / var(--tw-text-opacity, 1))}.btn[outline][variant=danger]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-50) / var(--tw-bg-opacity, 1))}.btn[outline][variant=danger]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-100) / var(--tw-bg-opacity, 1))}.btn[outline][variant=info]{--tw-border-opacity: 1;border-color:hsl(var(--color-info-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-info-600) / var(--tw-text-opacity, 1))}.btn[outline][variant=info]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-50) / var(--tw-bg-opacity, 1))}.btn[outline][variant=info]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-100) / var(--tw-bg-opacity, 1))}.btn[outline][variant=accent]{--tw-border-opacity: 1;border-color:hsl(var(--color-secondary-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary) / var(--tw-text-opacity, 1))}.btn[outline][variant=accent]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-50) / var(--tw-bg-opacity, 1))}.btn[outline][variant=accent]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-100) / var(--tw-bg-opacity, 1))}.btn[fill][variant=default]{--tw-bg-opacity: 1;background-color:rgb(41 37 36 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=default]:hover{--tw-bg-opacity: 1;background-color:rgb(28 25 23 / var(--tw-bg-opacity, 1))}.btn[fill][variant=default]:active{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.btn[fill][variant=primary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=primary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-600) / var(--tw-bg-opacity, 1))}.btn[fill][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-700) / var(--tw-bg-opacity, 1))}.btn[fill][variant=secondary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=secondary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-600) / var(--tw-bg-opacity, 1))}.btn[fill][variant=secondary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-700) / var(--tw-bg-opacity, 1))}.btn[fill][variant=success]{--tw-bg-opacity: 1;background-color:hsl(var(--color-success) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=success]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-600) / var(--tw-bg-opacity, 1))}.btn[fill][variant=success]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-700) / var(--tw-bg-opacity, 1))}.btn[fill][variant=warning]{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-600) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=warning]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-700) / var(--tw-bg-opacity, 1))}.btn[fill][variant=warning]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-800) / var(--tw-bg-opacity, 1))}.btn[fill][variant=danger]{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-600) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=danger]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-700) / var(--tw-bg-opacity, 1))}.btn[fill][variant=danger]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-800) / var(--tw-bg-opacity, 1))}.btn[fill][variant=info]{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-600) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=info]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-700) / var(--tw-bg-opacity, 1))}.btn[fill][variant=info]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-800) / var(--tw-bg-opacity, 1))}.btn[fill][variant=accent]{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=accent]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-600) / var(--tw-bg-opacity, 1))}.btn[fill][variant=accent]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-700) / var(--tw-bg-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ed-button', standalone: true, imports: [CommonModule, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #slotPrefix>\n  <ng-content select='[slot=\"prefix\"]' />\n</ng-template>\n<ng-template #slotDefault>\n  <ng-content />\n</ng-template>\n<ng-template #slotSuffix>\n  <ng-content select='[slot=\"suffix\"]' />\n</ng-template>\n\n@if (!asAnchor()) {\n  <button\n    class=\"btn\"\n    [attr.variant]=\"variant()\"\n    [attr.size]=\"size()\"\n    [class.is-block]=\"block()\"\n    [class.is-elevated]=\"elevated()\"\n    [class.shape-pill]=\"shape() === 'pill'\"\n    [class.shape-square]=\"shape() === 'square'\"\n    [disabled]=\"disabled() || loadingOn()\"\n    [attr.type]=\"type()\"\n    [attr.aria-busy]=\"loadingOn() ? 'true' : null\"\n    [attr.inert]=\"(disabled() || loadingOn()) ? '' : null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    (click)=\"onClick($event)\"\n    [style.height.px]=\"btnHeightPx()\"\n    [style.minHeight.px]=\"24\"\n    [style.minWidth.px]=\"24\"\n    [style.--btn-icon.px]=\"iconPx()\"\n    [attr.ghost]=\"ghost() ? '' : null\"\n    [attr.subtle]=\"subtle() ? '' : null\"\n    [attr.fill]=\"fill() ? '' : null\"\n    [attr.outline]=\"(outline() || (!ghost() && !subtle() && !fill())) ? '' : null\">\n    @if (loadingOn()) {\n      <span class=\"spinner\" aria-hidden=\"true\"></span>\n    }\n\n    @if (loadingOn()) {\n      <span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n        {{ loadingLabel() }}\n      </span>\n    }\n\n    <span class=\"btn-inner\">\n      <ng-container [ngTemplateOutlet]=\"slotPrefix\"></ng-container>\n\n      <span class=\"label\">\n        @if (loadingOn()) {\n          {{ loadingLabel() }}\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"slotDefault\"></ng-container>\n        }\n      </span>\n\n      <ng-container [ngTemplateOutlet]=\"slotSuffix\"></ng-container>\n    </span>\n  </button>\n} @else {\n  <a\n    class=\"btn\"\n    [attr.variant]=\"variant()\"\n    [attr.size]=\"size()\"\n    [class.is-block]=\"block()\"\n    [class.is-elevated]=\"elevated()\"\n    [class.shape-pill]=\"shape() === 'pill'\"\n    [class.shape-square]=\"shape() === 'square'\"\n    [attr.href]=\"effectiveHref()\"\n    [routerLink]=\"effectiveRouterLink()\"\n    [attr.rel]=\"safeRel()\"\n    [attr.target]=\"target() || null\"\n    [attr.download]=\"downloadAttr()\"\n    [attr.tabindex]=\"(disabled() || loadingOn()) ? -1 : 0\"\n    [attr.aria-disabled]=\"(disabled() || loadingOn()) ? 'true' : null\"\n    [attr.aria-busy]=\"loadingOn() ? 'true' : null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    (click)=\"onClick($event)\"\n    [style.height.px]=\"btnHeightPx()\"\n    [style.minHeight.px]=\"24\"\n    [style.minWidth.px]=\"24\"\n    [style.--btn-icon.px]=\"iconPx()\"\n    [attr.ghost]=\"ghost() ? '' : null\"\n    [attr.subtle]=\"subtle() ? '' : null\"\n    [attr.fill]=\"fill() ? '' : null\"\n    [attr.outline]=\"(outline() || (!ghost() && !subtle() && !fill())) ? '' : null\">\n    @if (loadingOn()) {\n      <span class=\"spinner\" aria-hidden=\"true\"></span>\n    }\n\n    @if (loadingOn()) {\n      <span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n        {{ loadingLabel() }}\n      </span>\n    }\n\n    <span class=\"btn-inner\">\n      <ng-container [ngTemplateOutlet]=\"slotPrefix\"></ng-container>\n\n      <span class=\"label\">\n        @if (loadingOn()) {\n          {{ loadingLabel() }}\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"slotDefault\"></ng-container>\n        }\n      </span>\n\n      <ng-container [ngTemplateOutlet]=\"slotSuffix\"></ng-container>\n    </span>\n  </a>\n}\n", styles: ["@charset \"UTF-8\";.btn{position:relative;display:inline-flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;border-width:1px;border-style:solid;border-color:transparent;font-weight:500;line-height:1.5;outline:2px solid transparent;outline-offset:2px;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-timing-function:cubic-bezier(0,0,.2,1);font-size:.75rem;line-height:1rem}.btn[size=xs]{gap:.125rem;border-radius:.25rem;padding-left:.5rem;padding-right:.625rem;font-size:.625rem}.btn[size=sm]{gap:.125rem;border-radius:.25rem;padding-left:.625rem;padding-right:.75rem;font-size:.75rem;line-height:1rem}.btn[size=base]{gap:.5rem;border-radius:.375rem;padding-left:.75rem;padding-right:.875rem;font-size:.8125rem;line-height:1.25rem}.btn[size=md]{gap:.5rem;border-radius:.5rem;padding-left:.75rem;padding-right:1rem;font-size:.9375rem;line-height:1.5rem}.btn[size=lg]{gap:.75rem;border-radius:.5rem;padding-left:1rem;padding-right:1.25rem;font-size:.9375rem;line-height:1.5rem}.btn.shape-pill{border-radius:9999px}.btn.shape-square{border-radius:0}.btn.is-block{width:100%}.btn.is-elevated[fill]{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.btn.is-elevated[fill]:hover{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.btn:focus-visible{outline-style:solid;outline-width:2px;outline-offset:2px;outline-color:hsl(var(--color-primary-500) / 1)}@media(forced-colors:active){.btn:focus-visible{outline-color:CanvasText}.btn[fill]{background:ButtonFace;color:ButtonText;border-color:ButtonText}.btn[outline],.btn[ghost],.btn[subtle]{background:Canvas;color:CanvasText;border-color:CanvasText}}.btn:disabled,.btn[aria-disabled=true],.btn[disabled=true]{pointer-events:none;cursor:not-allowed;opacity:.5}.btn .btn-inner{display:inline-flex;max-width:100%;align-items:center;gap:.25rem}.btn .label{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn .btn-inner>[slot=prefix],.btn .btn-inner>[slot=suffix]{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--btn-icon);block-size:var(--btn-icon)}.btn .btn-inner>[slot=prefix] svg,.btn .btn-inner>[slot=suffix] svg,.btn .btn-inner>[slot=prefix] i,.btn .btn-inner>[slot=suffix] i{width:100%;height:100%}.btn .spinner{display:inline-block;border-radius:9999px;border-width:2px;border-color:transparent;width:var(--btn-icon);height:var(--btn-icon);border-top-color:currentColor;animation:edspin .9s linear infinite}@media(prefers-reduced-motion:reduce){.btn{transition-duration:1ms}.btn .spinner{animation:none}}@keyframes edspin{to{transform:rotate(360deg)}}.btn[ghost][variant=default]{color:hsl(var(--text-foreground))}.btn[ghost][variant=default]:hover{--tw-border-opacity: 1;border-color:rgb(214 211 209 / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[ghost][variant=default]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1))}.btn[ghost][variant=primary]{--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[ghost][variant=primary]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[ghost][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1))}.btn[ghost][variant=secondary]{color:hsl(var(--text-foreground))}.btn[ghost][variant=secondary]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-100) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[ghost][variant=secondary]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-200) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-100) / var(--tw-bg-opacity, 1))}.btn[ghost][variant=success]{--tw-text-opacity: 1;color:hsl(var(--color-success) / var(--tw-text-opacity, 1))}.btn[ghost][variant=success]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-success-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-success-600) / var(--tw-text-opacity, 1))}.btn[ghost][variant=success]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-success-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-success-50) / var(--tw-bg-opacity, 1))}.btn[ghost][variant=warning]{--tw-text-opacity: 1;color:hsl(var(--color-warning) / var(--tw-text-opacity, 1))}.btn[ghost][variant=warning]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-warning-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-warning-600) / var(--tw-text-opacity, 1))}.btn[ghost][variant=warning]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-warning-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-50) / var(--tw-bg-opacity, 1))}.btn[ghost][variant=danger]{--tw-text-opacity: 1;color:hsl(var(--color-danger-400) / var(--tw-text-opacity, 1))}.btn[ghost][variant=danger]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-danger-100) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-danger-600) / var(--tw-text-opacity, 1))}.btn[ghost][variant=danger]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-danger-200) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-50) / var(--tw-bg-opacity, 1))}.btn[ghost][variant=info]{--tw-text-opacity: 1;color:hsl(var(--color-info-400) / var(--tw-text-opacity, 1))}.btn[ghost][variant=info]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-info-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-info-600) / var(--tw-text-opacity, 1))}.btn[ghost][variant=info]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-info-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-info-50) / var(--tw-bg-opacity, 1))}.btn[ghost][variant=accent]{--tw-text-opacity: 1;color:hsl(var(--color-secondary) / var(--tw-text-opacity, 1))}.btn[ghost][variant=accent]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-secondary-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary-700) / var(--tw-text-opacity, 1))}.btn[ghost][variant=accent]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-secondary-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-50) / var(--tw-bg-opacity, 1))}.btn[subtle][variant=default]{--tw-bg-opacity: 1;background-color:rgb(250 250 249 / var(--tw-bg-opacity, 1));color:hsl(var(--text-foreground))}.btn[subtle][variant=default]:hover{--tw-bg-opacity: 1;background-color:rgb(245 245 244 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[subtle][variant=default]:active{--tw-bg-opacity: 1;background-color:rgb(231 229 228 / var(--tw-bg-opacity, 1))}.btn[subtle][variant=primary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[subtle][variant=primary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary-700) / var(--tw-text-opacity, 1))}.btn[subtle][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-200) / var(--tw-bg-opacity, 1))}.btn[subtle][variant=secondary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary) / var(--tw-text-opacity, 1))}.btn[subtle][variant=secondary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary-700) / var(--tw-text-opacity, 1))}.btn[subtle][variant=secondary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-200) / var(--tw-bg-opacity, 1))}.btn[subtle][variant=success]{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-success) / var(--tw-text-opacity, 1))}.btn[subtle][variant=success]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-success-700) / var(--tw-text-opacity, 1))}.btn[subtle][variant=success]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-200) / var(--tw-bg-opacity, 1))}.btn[subtle][variant=warning]{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-warning-700) / var(--tw-text-opacity, 1))}.btn[subtle][variant=warning]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-warning-800) / var(--tw-text-opacity, 1))}.btn[subtle][variant=warning]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-200) / var(--tw-bg-opacity, 1))}.btn[subtle][variant=danger]{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-danger-600) / var(--tw-text-opacity, 1))}.btn[subtle][variant=danger]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-danger-700) / var(--tw-text-opacity, 1))}.btn[subtle][variant=danger]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-200) / var(--tw-bg-opacity, 1))}.btn[subtle][variant=info]{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-info-600) / var(--tw-text-opacity, 1))}.btn[subtle][variant=info]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-info-700) / var(--tw-text-opacity, 1))}.btn[subtle][variant=info]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-200) / var(--tw-bg-opacity, 1))}.btn[subtle][variant=accent]{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary) / var(--tw-text-opacity, 1))}.btn[subtle][variant=accent]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary-700) / var(--tw-text-opacity, 1))}.btn[subtle][variant=accent]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-200) / var(--tw-bg-opacity, 1))}.btn[outline][variant=default]{--tw-border-opacity: 1;border-color:rgb(214 211 209 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));color:hsl(var(--text-foreground))}.btn[outline][variant=default]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-400) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[outline][variant=default]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-100) / var(--tw-bg-opacity, 1))}.btn[outline][variant=primary]{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[outline][variant=primary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1))}.btn[outline][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-100) / var(--tw-bg-opacity, 1))}.btn[outline][variant=secondary]{--tw-border-opacity: 1;border-color:hsl(var(--color-secondary-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary) / var(--tw-text-opacity, 1))}.btn[outline][variant=secondary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-50) / var(--tw-bg-opacity, 1))}.btn[outline][variant=secondary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-100) / var(--tw-bg-opacity, 1))}.btn[outline][variant=success]{--tw-border-opacity: 1;border-color:hsl(var(--color-success-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-success) / var(--tw-text-opacity, 1))}.btn[outline][variant=success]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-50) / var(--tw-bg-opacity, 1))}.btn[outline][variant=success]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-100) / var(--tw-bg-opacity, 1))}.btn[outline][variant=warning]{--tw-border-opacity: 1;border-color:hsl(var(--color-warning-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-warning-700) / var(--tw-text-opacity, 1))}.btn[outline][variant=warning]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-50) / var(--tw-bg-opacity, 1))}.btn[outline][variant=warning]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-100) / var(--tw-bg-opacity, 1))}.btn[outline][variant=danger]{--tw-border-opacity: 1;border-color:hsl(var(--color-danger-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-danger-600) / var(--tw-text-opacity, 1))}.btn[outline][variant=danger]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-50) / var(--tw-bg-opacity, 1))}.btn[outline][variant=danger]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-100) / var(--tw-bg-opacity, 1))}.btn[outline][variant=info]{--tw-border-opacity: 1;border-color:hsl(var(--color-info-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-info-600) / var(--tw-text-opacity, 1))}.btn[outline][variant=info]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-50) / var(--tw-bg-opacity, 1))}.btn[outline][variant=info]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-100) / var(--tw-bg-opacity, 1))}.btn[outline][variant=accent]{--tw-border-opacity: 1;border-color:hsl(var(--color-secondary-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary) / var(--tw-text-opacity, 1))}.btn[outline][variant=accent]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-50) / var(--tw-bg-opacity, 1))}.btn[outline][variant=accent]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-100) / var(--tw-bg-opacity, 1))}.btn[fill][variant=default]{--tw-bg-opacity: 1;background-color:rgb(41 37 36 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=default]:hover{--tw-bg-opacity: 1;background-color:rgb(28 25 23 / var(--tw-bg-opacity, 1))}.btn[fill][variant=default]:active{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.btn[fill][variant=primary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=primary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-600) / var(--tw-bg-opacity, 1))}.btn[fill][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-700) / var(--tw-bg-opacity, 1))}.btn[fill][variant=secondary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=secondary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-600) / var(--tw-bg-opacity, 1))}.btn[fill][variant=secondary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-700) / var(--tw-bg-opacity, 1))}.btn[fill][variant=success]{--tw-bg-opacity: 1;background-color:hsl(var(--color-success) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=success]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-600) / var(--tw-bg-opacity, 1))}.btn[fill][variant=success]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-700) / var(--tw-bg-opacity, 1))}.btn[fill][variant=warning]{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-600) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=warning]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-700) / var(--tw-bg-opacity, 1))}.btn[fill][variant=warning]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-800) / var(--tw-bg-opacity, 1))}.btn[fill][variant=danger]{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-600) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=danger]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-700) / var(--tw-bg-opacity, 1))}.btn[fill][variant=danger]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-800) / var(--tw-bg-opacity, 1))}.btn[fill][variant=info]{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-600) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=info]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-700) / var(--tw-bg-opacity, 1))}.btn[fill][variant=info]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-800) / var(--tw-bg-opacity, 1))}.btn[fill][variant=accent]{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=accent]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-600) / var(--tw-bg-opacity, 1))}.btn[fill][variant=accent]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-700) / var(--tw-bg-opacity, 1))}\n"] }]
+            args: [{ selector: 'ed-button', standalone: true, imports: [CommonModule, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #slotPrefix>\r\n  <ng-content select='[slot=\"prefix\"]' />\r\n</ng-template>\r\n<ng-template #slotDefault>\r\n  <ng-content />\r\n</ng-template>\r\n<ng-template #slotSuffix>\r\n  <ng-content select='[slot=\"suffix\"]' />\r\n</ng-template>\r\n\r\n@if (!asAnchor()) {\r\n  <button\r\n    class=\"btn\"\r\n    [attr.variant]=\"variant()\"\r\n    [attr.size]=\"size()\"\r\n    [class.is-block]=\"block()\"\r\n    [class.is-elevated]=\"elevated()\"\r\n    [class.shape-pill]=\"shape() === 'pill'\"\r\n    [class.shape-square]=\"shape() === 'square'\"\r\n    [disabled]=\"disabled() || loadingOn()\"\r\n    [attr.type]=\"type()\"\r\n    [attr.aria-busy]=\"loadingOn() ? 'true' : null\"\r\n    [attr.inert]=\"(disabled() || loadingOn()) ? '' : null\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    (click)=\"onClick($event)\"\r\n    [style.height.px]=\"btnHeightPx()\"\r\n    [style.minHeight.px]=\"24\"\r\n    [style.minWidth.px]=\"24\"\r\n    [style.--btn-icon.px]=\"iconPx()\"\r\n    [attr.ghost]=\"ghost() ? '' : null\"\r\n    [attr.subtle]=\"subtle() ? '' : null\"\r\n    [attr.fill]=\"fill() ? '' : null\"\r\n    [attr.outline]=\"(outline() || (!ghost() && !subtle() && !fill())) ? '' : null\">\r\n    @if (loadingOn()) {\r\n      <span class=\"spinner\" aria-hidden=\"true\"></span>\r\n    }\r\n\r\n    @if (loadingOn()) {\r\n      <span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\r\n        {{ loadingLabel() }}\r\n      </span>\r\n    }\r\n\r\n    <span class=\"btn-inner\">\r\n      <ng-container [ngTemplateOutlet]=\"slotPrefix\"></ng-container>\r\n\r\n      <span class=\"label\">\r\n        @if (loadingOn()) {\r\n          {{ loadingLabel() }}\r\n        } @else {\r\n          <ng-container [ngTemplateOutlet]=\"slotDefault\"></ng-container>\r\n        }\r\n      </span>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"slotSuffix\"></ng-container>\r\n    </span>\r\n  </button>\r\n} @else {\r\n  <a\r\n    class=\"btn\"\r\n    [attr.variant]=\"variant()\"\r\n    [attr.size]=\"size()\"\r\n    [class.is-block]=\"block()\"\r\n    [class.is-elevated]=\"elevated()\"\r\n    [class.shape-pill]=\"shape() === 'pill'\"\r\n    [class.shape-square]=\"shape() === 'square'\"\r\n    [attr.href]=\"effectiveHref()\"\r\n    [routerLink]=\"effectiveRouterLink()\"\r\n    [attr.rel]=\"safeRel()\"\r\n    [attr.target]=\"target() || null\"\r\n    [attr.download]=\"downloadAttr()\"\r\n    [attr.tabindex]=\"(disabled() || loadingOn()) ? -1 : 0\"\r\n    [attr.aria-disabled]=\"(disabled() || loadingOn()) ? 'true' : null\"\r\n    [attr.aria-busy]=\"loadingOn() ? 'true' : null\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    (click)=\"onClick($event)\"\r\n    [style.height.px]=\"btnHeightPx()\"\r\n    [style.minHeight.px]=\"24\"\r\n    [style.minWidth.px]=\"24\"\r\n    [style.--btn-icon.px]=\"iconPx()\"\r\n    [attr.ghost]=\"ghost() ? '' : null\"\r\n    [attr.subtle]=\"subtle() ? '' : null\"\r\n    [attr.fill]=\"fill() ? '' : null\"\r\n    [attr.outline]=\"(outline() || (!ghost() && !subtle() && !fill())) ? '' : null\">\r\n    @if (loadingOn()) {\r\n      <span class=\"spinner\" aria-hidden=\"true\"></span>\r\n    }\r\n\r\n    @if (loadingOn()) {\r\n      <span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\r\n        {{ loadingLabel() }}\r\n      </span>\r\n    }\r\n\r\n    <span class=\"btn-inner\">\r\n      <ng-container [ngTemplateOutlet]=\"slotPrefix\"></ng-container>\r\n\r\n      <span class=\"label\">\r\n        @if (loadingOn()) {\r\n          {{ loadingLabel() }}\r\n        } @else {\r\n          <ng-container [ngTemplateOutlet]=\"slotDefault\"></ng-container>\r\n        }\r\n      </span>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"slotSuffix\"></ng-container>\r\n    </span>\r\n  </a>\r\n}\r\n", styles: ["@charset \"UTF-8\";.btn{position:relative;display:inline-flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;border-width:1px;border-style:solid;border-color:transparent;font-weight:500;line-height:1.5;outline:2px solid transparent;outline-offset:2px;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-timing-function:cubic-bezier(0,0,.2,1);font-size:.75rem;line-height:1rem}.btn[size=xs]{gap:.125rem;border-radius:.25rem;padding-left:.5rem;padding-right:.625rem;font-size:.625rem}.btn[size=sm]{gap:.125rem;border-radius:.25rem;padding-left:.625rem;padding-right:.75rem;font-size:.75rem;line-height:1rem}.btn[size=base]{gap:.5rem;border-radius:.375rem;padding-left:.75rem;padding-right:.875rem;font-size:.8125rem;line-height:1.25rem}.btn[size=md]{gap:.5rem;border-radius:.5rem;padding-left:.75rem;padding-right:1rem;font-size:.9375rem;line-height:1.5rem}.btn[size=lg]{gap:.75rem;border-radius:.5rem;padding-left:1rem;padding-right:1.25rem;font-size:.9375rem;line-height:1.5rem}.btn.shape-pill{border-radius:9999px}.btn.shape-square{border-radius:0}.btn.is-block{width:100%}.btn.is-elevated[fill]{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.btn.is-elevated[fill]:hover{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.btn:focus-visible{outline-style:solid;outline-width:2px;outline-offset:2px;outline-color:hsl(var(--color-primary-500) / 1)}@media(forced-colors:active){.btn:focus-visible{outline-color:CanvasText}.btn[fill]{background:ButtonFace;color:ButtonText;border-color:ButtonText}.btn[outline],.btn[ghost],.btn[subtle]{background:Canvas;color:CanvasText;border-color:CanvasText}}.btn:disabled,.btn[aria-disabled=true],.btn[disabled=true]{pointer-events:none;cursor:not-allowed;opacity:.5}.btn .btn-inner{display:inline-flex;max-width:100%;align-items:center;gap:.25rem}.btn .label{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn .btn-inner>[slot=prefix],.btn .btn-inner>[slot=suffix]{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--btn-icon);block-size:var(--btn-icon)}.btn .btn-inner>[slot=prefix] svg,.btn .btn-inner>[slot=suffix] svg,.btn .btn-inner>[slot=prefix] i,.btn .btn-inner>[slot=suffix] i{width:100%;height:100%}.btn .spinner{display:inline-block;border-radius:9999px;border-width:2px;border-color:transparent;width:var(--btn-icon);height:var(--btn-icon);border-top-color:currentColor;animation:edspin .9s linear infinite}@media(prefers-reduced-motion:reduce){.btn{transition-duration:1ms}.btn .spinner{animation:none}}@keyframes edspin{to{transform:rotate(360deg)}}.btn[ghost][variant=default]{color:hsl(var(--text-foreground))}.btn[ghost][variant=default]:hover{--tw-border-opacity: 1;border-color:rgb(214 211 209 / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[ghost][variant=default]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1))}.btn[ghost][variant=primary]{--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[ghost][variant=primary]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[ghost][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1))}.btn[ghost][variant=secondary]{color:hsl(var(--text-foreground))}.btn[ghost][variant=secondary]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-100) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[ghost][variant=secondary]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-200) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-100) / var(--tw-bg-opacity, 1))}.btn[ghost][variant=success]{--tw-text-opacity: 1;color:hsl(var(--color-success) / var(--tw-text-opacity, 1))}.btn[ghost][variant=success]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-success-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-success-600) / var(--tw-text-opacity, 1))}.btn[ghost][variant=success]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-success-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-success-50) / var(--tw-bg-opacity, 1))}.btn[ghost][variant=warning]{--tw-text-opacity: 1;color:hsl(var(--color-warning) / var(--tw-text-opacity, 1))}.btn[ghost][variant=warning]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-warning-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-warning-600) / var(--tw-text-opacity, 1))}.btn[ghost][variant=warning]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-warning-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-50) / var(--tw-bg-opacity, 1))}.btn[ghost][variant=danger]{--tw-text-opacity: 1;color:hsl(var(--color-danger-400) / var(--tw-text-opacity, 1))}.btn[ghost][variant=danger]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-danger-100) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-danger-600) / var(--tw-text-opacity, 1))}.btn[ghost][variant=danger]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-danger-200) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-50) / var(--tw-bg-opacity, 1))}.btn[ghost][variant=info]{--tw-text-opacity: 1;color:hsl(var(--color-info-400) / var(--tw-text-opacity, 1))}.btn[ghost][variant=info]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-info-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-info-600) / var(--tw-text-opacity, 1))}.btn[ghost][variant=info]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-info-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-info-50) / var(--tw-bg-opacity, 1))}.btn[ghost][variant=accent]{--tw-text-opacity: 1;color:hsl(var(--color-secondary) / var(--tw-text-opacity, 1))}.btn[ghost][variant=accent]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-secondary-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary-700) / var(--tw-text-opacity, 1))}.btn[ghost][variant=accent]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-secondary-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-50) / var(--tw-bg-opacity, 1))}.btn[subtle][variant=default]{--tw-bg-opacity: 1;background-color:rgb(250 250 249 / var(--tw-bg-opacity, 1));color:hsl(var(--text-foreground))}.btn[subtle][variant=default]:hover{--tw-bg-opacity: 1;background-color:rgb(245 245 244 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[subtle][variant=default]:active{--tw-bg-opacity: 1;background-color:rgb(231 229 228 / var(--tw-bg-opacity, 1))}.btn[subtle][variant=primary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[subtle][variant=primary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary-700) / var(--tw-text-opacity, 1))}.btn[subtle][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-200) / var(--tw-bg-opacity, 1))}.btn[subtle][variant=secondary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary) / var(--tw-text-opacity, 1))}.btn[subtle][variant=secondary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary-700) / var(--tw-text-opacity, 1))}.btn[subtle][variant=secondary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-200) / var(--tw-bg-opacity, 1))}.btn[subtle][variant=success]{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-success) / var(--tw-text-opacity, 1))}.btn[subtle][variant=success]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-success-700) / var(--tw-text-opacity, 1))}.btn[subtle][variant=success]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-200) / var(--tw-bg-opacity, 1))}.btn[subtle][variant=warning]{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-warning-700) / var(--tw-text-opacity, 1))}.btn[subtle][variant=warning]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-warning-800) / var(--tw-text-opacity, 1))}.btn[subtle][variant=warning]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-200) / var(--tw-bg-opacity, 1))}.btn[subtle][variant=danger]{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-danger-600) / var(--tw-text-opacity, 1))}.btn[subtle][variant=danger]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-danger-700) / var(--tw-text-opacity, 1))}.btn[subtle][variant=danger]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-200) / var(--tw-bg-opacity, 1))}.btn[subtle][variant=info]{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-info-600) / var(--tw-text-opacity, 1))}.btn[subtle][variant=info]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-info-700) / var(--tw-text-opacity, 1))}.btn[subtle][variant=info]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-200) / var(--tw-bg-opacity, 1))}.btn[subtle][variant=accent]{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary) / var(--tw-text-opacity, 1))}.btn[subtle][variant=accent]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary-700) / var(--tw-text-opacity, 1))}.btn[subtle][variant=accent]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-200) / var(--tw-bg-opacity, 1))}.btn[outline][variant=default]{--tw-border-opacity: 1;border-color:rgb(214 211 209 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));color:hsl(var(--text-foreground))}.btn[outline][variant=default]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-400) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[outline][variant=default]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-100) / var(--tw-bg-opacity, 1))}.btn[outline][variant=primary]{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.btn[outline][variant=primary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1))}.btn[outline][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-100) / var(--tw-bg-opacity, 1))}.btn[outline][variant=secondary]{--tw-border-opacity: 1;border-color:hsl(var(--color-secondary-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary) / var(--tw-text-opacity, 1))}.btn[outline][variant=secondary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-50) / var(--tw-bg-opacity, 1))}.btn[outline][variant=secondary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-100) / var(--tw-bg-opacity, 1))}.btn[outline][variant=success]{--tw-border-opacity: 1;border-color:hsl(var(--color-success-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-success) / var(--tw-text-opacity, 1))}.btn[outline][variant=success]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-50) / var(--tw-bg-opacity, 1))}.btn[outline][variant=success]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-100) / var(--tw-bg-opacity, 1))}.btn[outline][variant=warning]{--tw-border-opacity: 1;border-color:hsl(var(--color-warning-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-warning-700) / var(--tw-text-opacity, 1))}.btn[outline][variant=warning]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-50) / var(--tw-bg-opacity, 1))}.btn[outline][variant=warning]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-100) / var(--tw-bg-opacity, 1))}.btn[outline][variant=danger]{--tw-border-opacity: 1;border-color:hsl(var(--color-danger-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-danger-600) / var(--tw-text-opacity, 1))}.btn[outline][variant=danger]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-50) / var(--tw-bg-opacity, 1))}.btn[outline][variant=danger]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-100) / var(--tw-bg-opacity, 1))}.btn[outline][variant=info]{--tw-border-opacity: 1;border-color:hsl(var(--color-info-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-info-600) / var(--tw-text-opacity, 1))}.btn[outline][variant=info]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-50) / var(--tw-bg-opacity, 1))}.btn[outline][variant=info]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-100) / var(--tw-bg-opacity, 1))}.btn[outline][variant=accent]{--tw-border-opacity: 1;border-color:hsl(var(--color-secondary-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary) / var(--tw-text-opacity, 1))}.btn[outline][variant=accent]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-50) / var(--tw-bg-opacity, 1))}.btn[outline][variant=accent]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-100) / var(--tw-bg-opacity, 1))}.btn[fill][variant=default]{--tw-bg-opacity: 1;background-color:rgb(41 37 36 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=default]:hover{--tw-bg-opacity: 1;background-color:rgb(28 25 23 / var(--tw-bg-opacity, 1))}.btn[fill][variant=default]:active{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.btn[fill][variant=primary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=primary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-600) / var(--tw-bg-opacity, 1))}.btn[fill][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-700) / var(--tw-bg-opacity, 1))}.btn[fill][variant=secondary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=secondary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-600) / var(--tw-bg-opacity, 1))}.btn[fill][variant=secondary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-700) / var(--tw-bg-opacity, 1))}.btn[fill][variant=success]{--tw-bg-opacity: 1;background-color:hsl(var(--color-success) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=success]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-600) / var(--tw-bg-opacity, 1))}.btn[fill][variant=success]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-700) / var(--tw-bg-opacity, 1))}.btn[fill][variant=warning]{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-600) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=warning]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-700) / var(--tw-bg-opacity, 1))}.btn[fill][variant=warning]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-800) / var(--tw-bg-opacity, 1))}.btn[fill][variant=danger]{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-600) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=danger]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-700) / var(--tw-bg-opacity, 1))}.btn[fill][variant=danger]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-800) / var(--tw-bg-opacity, 1))}.btn[fill][variant=info]{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-600) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=info]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-700) / var(--tw-bg-opacity, 1))}.btn[fill][variant=info]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-800) / var(--tw-bg-opacity, 1))}.btn[fill][variant=accent]{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn[fill][variant=accent]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-600) / var(--tw-bg-opacity, 1))}.btn[fill][variant=accent]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-700) / var(--tw-bg-opacity, 1))}\n"] }]
         }], ctorParameters: () => [], propDecorators: { clicked: [{
                 type: Output,
                 args: ['click$']
@@ -4546,11 +4546,11 @@ class ModalComponent {
         this.closed.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ModalComponent, isStandalone: true, selector: "app-modal", inputs: { title: "title", subtitle: "subtitle", maxWidth: "maxWidth" }, outputs: { closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "backdrop", first: true, predicate: ["backdrop"], descendants: true, static: true }], ngImport: i0, template: "<div\n  #backdrop\n  class=\"modal-backdrop fixed left-0 top-0 z-[100100] flex h-[100vh] w-[100vw] items-center justify-center bg-[rgba(20,30,50,0.42)] p-6 backdrop-blur-[2px]\"\n  (click)=\"onBackdropClick($event)\"\n  role=\"presentation\"\n>\n  <div\n    class=\"modal-card flex w-full max-h-[calc(100vh-48px)] flex-col overflow-hidden rounded-lg border border-base bg-white shadow-sm\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"title\"\n    [style.max-width]=\"maxWidth\"\n  >\n    <header class=\"modal-header flex shrink-0 items-start justify-between gap-4 border-b border-base px-6 pb-4 pt-5\">\n      <div class=\"flex min-w-0 flex-col gap-1\">\n        <h2 class=\"m-0 text-base font-semibold tracking-tight text-dark\">{{ title }}</h2>\n        @if (subtitle) {\n          <p class=\"m-0 text-[13px] text-light\">{{ subtitle }}</p>\n        }\n      </div>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-transparent bg-transparent text-light transition-colors duration-150 hover:bg-lighter hover:text-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600\"\n        (click)=\"close()\"\n        aria-label=\"Close dialog\"\n      >\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n             stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n        </svg>\n      </button>\n    </header>\n\n    <div class=\"modal-sticky-top shrink-0 empty:hidden\">\n      <ng-content select=\"[modalStickyTop]\" />\n    </div>\n\n    <div class=\"modal-body min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 pb-6 pt-5\">\n      <ng-content />\n    </div>\n\n    <div class=\"modal-footer shrink-0 empty:hidden\">\n      <ng-content select=\"[modalFooter]\" />\n    </div>\n  </div>\n</div>\n", styles: [":host{display:contents}.modal-backdrop{inset:0;animation:fade-in .14s ease}.modal-card{animation:pop-in .14s ease}.modal-sticky-top:empty,.modal-footer:empty{display:none}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes pop-in{0%{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ModalComponent, isStandalone: true, selector: "app-modal", inputs: { title: "title", subtitle: "subtitle", maxWidth: "maxWidth" }, outputs: { closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "backdrop", first: true, predicate: ["backdrop"], descendants: true, static: true }], ngImport: i0, template: "<div\r\n  #backdrop\r\n  class=\"modal-backdrop fixed left-0 top-0 z-[100100] flex h-[100vh] w-[100vw] items-center justify-center bg-[rgba(20,30,50,0.42)] p-6 backdrop-blur-[2px]\"\r\n  (click)=\"onBackdropClick($event)\"\r\n  role=\"presentation\"\r\n>\r\n  <div\r\n    class=\"modal-card flex w-full max-h-[calc(100vh-48px)] flex-col overflow-hidden rounded-lg border border-base bg-white shadow-sm\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    [attr.aria-label]=\"title\"\r\n    [style.max-width]=\"maxWidth\"\r\n  >\r\n    <header class=\"modal-header flex shrink-0 items-start justify-between gap-4 border-b border-base px-6 pb-4 pt-5\">\r\n      <div class=\"flex min-w-0 flex-col gap-1\">\r\n        <h2 class=\"m-0 text-base font-semibold tracking-tight text-dark\">{{ title }}</h2>\r\n        @if (subtitle) {\r\n          <p class=\"m-0 text-[13px] text-light\">{{ subtitle }}</p>\r\n        }\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-transparent bg-transparent text-light transition-colors duration-150 hover:bg-lighter hover:text-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600\"\r\n        (click)=\"close()\"\r\n        aria-label=\"Close dialog\"\r\n      >\r\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n             stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\r\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\r\n        </svg>\r\n      </button>\r\n    </header>\r\n\r\n    <div class=\"modal-sticky-top shrink-0 empty:hidden\">\r\n      <ng-content select=\"[modalStickyTop]\" />\r\n    </div>\r\n\r\n    <div class=\"modal-body min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 pb-6 pt-5\">\r\n      <ng-content />\r\n    </div>\r\n\r\n    <div class=\"modal-footer shrink-0 empty:hidden\">\r\n      <ng-content select=\"[modalFooter]\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:contents}.modal-backdrop{inset:0;animation:fade-in .14s ease}.modal-card{animation:pop-in .14s ease}.modal-sticky-top:empty,.modal-footer:empty{display:none}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes pop-in{0%{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-modal', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  #backdrop\n  class=\"modal-backdrop fixed left-0 top-0 z-[100100] flex h-[100vh] w-[100vw] items-center justify-center bg-[rgba(20,30,50,0.42)] p-6 backdrop-blur-[2px]\"\n  (click)=\"onBackdropClick($event)\"\n  role=\"presentation\"\n>\n  <div\n    class=\"modal-card flex w-full max-h-[calc(100vh-48px)] flex-col overflow-hidden rounded-lg border border-base bg-white shadow-sm\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"title\"\n    [style.max-width]=\"maxWidth\"\n  >\n    <header class=\"modal-header flex shrink-0 items-start justify-between gap-4 border-b border-base px-6 pb-4 pt-5\">\n      <div class=\"flex min-w-0 flex-col gap-1\">\n        <h2 class=\"m-0 text-base font-semibold tracking-tight text-dark\">{{ title }}</h2>\n        @if (subtitle) {\n          <p class=\"m-0 text-[13px] text-light\">{{ subtitle }}</p>\n        }\n      </div>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-transparent bg-transparent text-light transition-colors duration-150 hover:bg-lighter hover:text-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600\"\n        (click)=\"close()\"\n        aria-label=\"Close dialog\"\n      >\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n             stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n        </svg>\n      </button>\n    </header>\n\n    <div class=\"modal-sticky-top shrink-0 empty:hidden\">\n      <ng-content select=\"[modalStickyTop]\" />\n    </div>\n\n    <div class=\"modal-body min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 pb-6 pt-5\">\n      <ng-content />\n    </div>\n\n    <div class=\"modal-footer shrink-0 empty:hidden\">\n      <ng-content select=\"[modalFooter]\" />\n    </div>\n  </div>\n</div>\n", styles: [":host{display:contents}.modal-backdrop{inset:0;animation:fade-in .14s ease}.modal-card{animation:pop-in .14s ease}.modal-sticky-top:empty,.modal-footer:empty{display:none}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes pop-in{0%{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
+            args: [{ selector: 'app-modal', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  #backdrop\r\n  class=\"modal-backdrop fixed left-0 top-0 z-[100100] flex h-[100vh] w-[100vw] items-center justify-center bg-[rgba(20,30,50,0.42)] p-6 backdrop-blur-[2px]\"\r\n  (click)=\"onBackdropClick($event)\"\r\n  role=\"presentation\"\r\n>\r\n  <div\r\n    class=\"modal-card flex w-full max-h-[calc(100vh-48px)] flex-col overflow-hidden rounded-lg border border-base bg-white shadow-sm\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    [attr.aria-label]=\"title\"\r\n    [style.max-width]=\"maxWidth\"\r\n  >\r\n    <header class=\"modal-header flex shrink-0 items-start justify-between gap-4 border-b border-base px-6 pb-4 pt-5\">\r\n      <div class=\"flex min-w-0 flex-col gap-1\">\r\n        <h2 class=\"m-0 text-base font-semibold tracking-tight text-dark\">{{ title }}</h2>\r\n        @if (subtitle) {\r\n          <p class=\"m-0 text-[13px] text-light\">{{ subtitle }}</p>\r\n        }\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-transparent bg-transparent text-light transition-colors duration-150 hover:bg-lighter hover:text-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600\"\r\n        (click)=\"close()\"\r\n        aria-label=\"Close dialog\"\r\n      >\r\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n             stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\r\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\r\n        </svg>\r\n      </button>\r\n    </header>\r\n\r\n    <div class=\"modal-sticky-top shrink-0 empty:hidden\">\r\n      <ng-content select=\"[modalStickyTop]\" />\r\n    </div>\r\n\r\n    <div class=\"modal-body min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 pb-6 pt-5\">\r\n      <ng-content />\r\n    </div>\r\n\r\n    <div class=\"modal-footer shrink-0 empty:hidden\">\r\n      <ng-content select=\"[modalFooter]\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:contents}.modal-backdrop{inset:0;animation:fade-in .14s ease}.modal-card{animation:pop-in .14s ease}.modal-sticky-top:empty,.modal-footer:empty{display:none}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes pop-in{0%{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
         }], propDecorators: { title: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4681,11 +4681,11 @@ class KnowledgeTestModalComponent {
         this.playing.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KnowledgeTestModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: KnowledgeTestModalComponent, isStandalone: true, selector: "eds-knowledge-test-modal", inputs: { open: "open", whatToSay: "whatToSay", whatNotToSay: "whatNotToSay", voiceId: "voiceId" }, outputs: { closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "@if (open) {\n  <app-modal\n    title=\"Test Knowledge Base\"\n    subtitle=\"Ask a sample caller question \u2014 hear how the agent answers with your guidance and voice\"\n    maxWidth=\"560px\"\n    (closed)=\"close()\"\n  >\n    <form id=\"knowledge-test-form\" class=\"flex flex-col gap-4\" (ngSubmit)=\"runTest()\" novalidate autocomplete=\"off\">\n      <div class=\"mb-sm\">\n        <label>What might a caller ask?<span required></span></label>\n        <textarea\n          class=\"form-textarea min-h-[84px]\"\n          rows=\"3\"\n          [maxlength]=\"questionMax\"\n          [ngModel]=\"question()\"\n          (ngModelChange)=\"onQuestionChange($event)\"\n          name=\"question\"\n          placeholder=\"e.g. What are your Saturday hours? Is parking free?\"\n          [disabled]=\"testing()\"\n          autocomplete=\"off\"\n        ></textarea>\n        <span class=\"kb-test__hint self-end text-xs\">{{ question().length }}/{{ questionMax }}</span>\n      </div>\n\n      @if (answer(); as spoken) {\n        <div class=\"kb-test__answer rounded-lg border px-4 py-3\" role=\"status\">\n          <div class=\"mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide\">\n            <ed-icon name=\"graph_new\" [size]=\"18\" />\n            <span>Agent reply</span>\n            @if (playing()) {\n              <span class=\"kb-test__playing ml-auto font-medium normal-case tracking-normal\">Playing\u2026</span>\n            } @else {\n              <button type=\"button\" class=\"kb-test__replay ml-auto cursor-pointer border-none bg-transparent px-1 py-1 text-[13px] font-semibold normal-case tracking-normal\" (click)=\"replay()\">\n                Replay\n              </button>\n            }\n          </div>\n          <p class=\"m-0 text-sm leading-[1.55]\">{{ spoken }}</p>\n        </div>\n      }\n    </form>\n\n    <div modalFooter class=\"border-t border-base bg-white px-6 py-4\">\n      <div class=\"flex justify-end gap-2\">\n        <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"close()\" [disabled]=\"testing()\">\n          Close\n        </ed-button>\n        <ed-button\n          type=\"button\"\n          variant=\"primary\"\n          fill\n          size=\"sm\"\n          [disabled]=\"testing() || !question().trim()\"\n          (click$)=\"runTest()\"\n        >\n          @if (testing()) {\n            Generating\u2026\n          } @else {\n            <ed-icon slot=\"prefix\" name=\"play_arrow\" [size]=\"16\" />\n            Test\n          }\n        </ed-button>\n      </div>\n    </div>\n  </app-modal>\n}\n", styles: [".kb-test__hint{color:var(--eds-color-text-muted, #64748b)}.kb-test__answer{border-color:var(--eds-color-border, #e2e8f0);background:var(--eds-color-surface-alt, #f8fafc)}.kb-test__answer-head{color:var(--eds-color-text-muted, #64748b)}.kb-test__playing,.kb-test__replay{color:var(--eds-primary, #2563eb)}.kb-test__answer-text{color:var(--eds-color-text, #0f172a)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ModalComponent, selector: "app-modal", inputs: ["title", "subtitle", "maxWidth"], outputs: ["closed"] }, { kind: "component", type: IconComponent, selector: "ed-icon", inputs: ["name", "size", "color", "cssClass", "decorative", "ariaHidden", "ariaLabel", "title", "desc", "focusable", "tabIndex"] }, { 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$"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: KnowledgeTestModalComponent, isStandalone: true, selector: "eds-knowledge-test-modal", inputs: { open: "open", whatToSay: "whatToSay", whatNotToSay: "whatNotToSay", voiceId: "voiceId" }, outputs: { closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "@if (open) {\r\n  <app-modal\r\n    title=\"Test Knowledge Base\"\r\n    subtitle=\"Ask a sample caller question \u2014 hear how the agent answers with your guidance and voice\"\r\n    maxWidth=\"560px\"\r\n    (closed)=\"close()\"\r\n  >\r\n    <form id=\"knowledge-test-form\" class=\"flex flex-col gap-4\" (ngSubmit)=\"runTest()\" novalidate autocomplete=\"off\">\r\n      <div class=\"mb-sm\">\r\n        <label><span required>What might a caller ask?</span></label>\r\n        <textarea\r\n          class=\"form-textarea min-h-[84px]\"\r\n          rows=\"3\"\r\n          [maxlength]=\"questionMax\"\r\n          [ngModel]=\"question()\"\r\n          (ngModelChange)=\"onQuestionChange($event)\"\r\n          name=\"question\"\r\n          placeholder=\"e.g. What are your Saturday hours? Is parking free?\"\r\n          [disabled]=\"testing()\"\r\n          autocomplete=\"off\"\r\n        ></textarea>\r\n        <span class=\"kb-test__hint self-end text-xs\">{{ question().length }}/{{ questionMax }}</span>\r\n      </div>\r\n\r\n      @if (answer(); as spoken) {\r\n        <div class=\"kb-test__answer rounded-lg border px-4 py-3\" role=\"status\">\r\n          <div class=\"mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide\">\r\n            <ed-icon name=\"graph_new\" [size]=\"18\" />\r\n            <span>Agent reply</span>\r\n            @if (playing()) {\r\n              <span class=\"kb-test__playing ml-auto font-medium normal-case tracking-normal\">Playing\u2026</span>\r\n            } @else {\r\n              <button type=\"button\" class=\"kb-test__replay ml-auto cursor-pointer border-none bg-transparent px-1 py-1 text-[13px] font-semibold normal-case tracking-normal\" (click)=\"replay()\">\r\n                Replay\r\n              </button>\r\n            }\r\n          </div>\r\n          <p class=\"m-0 text-sm leading-[1.55]\">{{ spoken }}</p>\r\n        </div>\r\n      }\r\n    </form>\r\n\r\n    <div modalFooter class=\"border-t border-base bg-white px-6 py-4\">\r\n      <div class=\"flex justify-end gap-2\">\r\n        <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"close()\" [disabled]=\"testing()\">\r\n          Close\r\n        </ed-button>\r\n        <ed-button\r\n          type=\"button\"\r\n          variant=\"primary\"\r\n          fill\r\n          size=\"sm\"\r\n          [disabled]=\"testing() || !question().trim()\"\r\n          (click$)=\"runTest()\"\r\n        >\r\n          @if (testing()) {\r\n            Generating\u2026\r\n          } @else {\r\n            <ed-icon slot=\"prefix\" name=\"play_arrow\" [size]=\"16\" />\r\n            Test\r\n          }\r\n        </ed-button>\r\n      </div>\r\n    </div>\r\n  </app-modal>\r\n}\r\n", styles: [".kb-test__hint{color:var(--eds-color-text-muted, #64748b)}.kb-test__answer{border-color:var(--eds-color-border, #e2e8f0);background:var(--eds-color-surface-alt, #f8fafc)}.kb-test__answer-head{color:var(--eds-color-text-muted, #64748b)}.kb-test__playing,.kb-test__replay{color:var(--eds-primary, #2563eb)}.kb-test__answer-text{color:var(--eds-color-text, #0f172a)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ModalComponent, selector: "app-modal", inputs: ["title", "subtitle", "maxWidth"], outputs: ["closed"] }, { kind: "component", type: IconComponent, selector: "ed-icon", inputs: ["name", "size", "color", "cssClass", "decorative", "ariaHidden", "ariaLabel", "title", "desc", "focusable", "tabIndex"] }, { 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$"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KnowledgeTestModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eds-knowledge-test-modal', imports: [FormsModule, ModalComponent, IconComponent, EdButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open) {\n  <app-modal\n    title=\"Test Knowledge Base\"\n    subtitle=\"Ask a sample caller question \u2014 hear how the agent answers with your guidance and voice\"\n    maxWidth=\"560px\"\n    (closed)=\"close()\"\n  >\n    <form id=\"knowledge-test-form\" class=\"flex flex-col gap-4\" (ngSubmit)=\"runTest()\" novalidate autocomplete=\"off\">\n      <div class=\"mb-sm\">\n        <label>What might a caller ask?<span required></span></label>\n        <textarea\n          class=\"form-textarea min-h-[84px]\"\n          rows=\"3\"\n          [maxlength]=\"questionMax\"\n          [ngModel]=\"question()\"\n          (ngModelChange)=\"onQuestionChange($event)\"\n          name=\"question\"\n          placeholder=\"e.g. What are your Saturday hours? Is parking free?\"\n          [disabled]=\"testing()\"\n          autocomplete=\"off\"\n        ></textarea>\n        <span class=\"kb-test__hint self-end text-xs\">{{ question().length }}/{{ questionMax }}</span>\n      </div>\n\n      @if (answer(); as spoken) {\n        <div class=\"kb-test__answer rounded-lg border px-4 py-3\" role=\"status\">\n          <div class=\"mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide\">\n            <ed-icon name=\"graph_new\" [size]=\"18\" />\n            <span>Agent reply</span>\n            @if (playing()) {\n              <span class=\"kb-test__playing ml-auto font-medium normal-case tracking-normal\">Playing\u2026</span>\n            } @else {\n              <button type=\"button\" class=\"kb-test__replay ml-auto cursor-pointer border-none bg-transparent px-1 py-1 text-[13px] font-semibold normal-case tracking-normal\" (click)=\"replay()\">\n                Replay\n              </button>\n            }\n          </div>\n          <p class=\"m-0 text-sm leading-[1.55]\">{{ spoken }}</p>\n        </div>\n      }\n    </form>\n\n    <div modalFooter class=\"border-t border-base bg-white px-6 py-4\">\n      <div class=\"flex justify-end gap-2\">\n        <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"close()\" [disabled]=\"testing()\">\n          Close\n        </ed-button>\n        <ed-button\n          type=\"button\"\n          variant=\"primary\"\n          fill\n          size=\"sm\"\n          [disabled]=\"testing() || !question().trim()\"\n          (click$)=\"runTest()\"\n        >\n          @if (testing()) {\n            Generating\u2026\n          } @else {\n            <ed-icon slot=\"prefix\" name=\"play_arrow\" [size]=\"16\" />\n            Test\n          }\n        </ed-button>\n      </div>\n    </div>\n  </app-modal>\n}\n", styles: [".kb-test__hint{color:var(--eds-color-text-muted, #64748b)}.kb-test__answer{border-color:var(--eds-color-border, #e2e8f0);background:var(--eds-color-surface-alt, #f8fafc)}.kb-test__answer-head{color:var(--eds-color-text-muted, #64748b)}.kb-test__playing,.kb-test__replay{color:var(--eds-primary, #2563eb)}.kb-test__answer-text{color:var(--eds-color-text, #0f172a)}\n"] }]
+            args: [{ selector: 'eds-knowledge-test-modal', imports: [FormsModule, ModalComponent, IconComponent, EdButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open) {\r\n  <app-modal\r\n    title=\"Test Knowledge Base\"\r\n    subtitle=\"Ask a sample caller question \u2014 hear how the agent answers with your guidance and voice\"\r\n    maxWidth=\"560px\"\r\n    (closed)=\"close()\"\r\n  >\r\n    <form id=\"knowledge-test-form\" class=\"flex flex-col gap-4\" (ngSubmit)=\"runTest()\" novalidate autocomplete=\"off\">\r\n      <div class=\"mb-sm\">\r\n        <label><span required>What might a caller ask?</span></label>\r\n        <textarea\r\n          class=\"form-textarea min-h-[84px]\"\r\n          rows=\"3\"\r\n          [maxlength]=\"questionMax\"\r\n          [ngModel]=\"question()\"\r\n          (ngModelChange)=\"onQuestionChange($event)\"\r\n          name=\"question\"\r\n          placeholder=\"e.g. What are your Saturday hours? Is parking free?\"\r\n          [disabled]=\"testing()\"\r\n          autocomplete=\"off\"\r\n        ></textarea>\r\n        <span class=\"kb-test__hint self-end text-xs\">{{ question().length }}/{{ questionMax }}</span>\r\n      </div>\r\n\r\n      @if (answer(); as spoken) {\r\n        <div class=\"kb-test__answer rounded-lg border px-4 py-3\" role=\"status\">\r\n          <div class=\"mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide\">\r\n            <ed-icon name=\"graph_new\" [size]=\"18\" />\r\n            <span>Agent reply</span>\r\n            @if (playing()) {\r\n              <span class=\"kb-test__playing ml-auto font-medium normal-case tracking-normal\">Playing\u2026</span>\r\n            } @else {\r\n              <button type=\"button\" class=\"kb-test__replay ml-auto cursor-pointer border-none bg-transparent px-1 py-1 text-[13px] font-semibold normal-case tracking-normal\" (click)=\"replay()\">\r\n                Replay\r\n              </button>\r\n            }\r\n          </div>\r\n          <p class=\"m-0 text-sm leading-[1.55]\">{{ spoken }}</p>\r\n        </div>\r\n      }\r\n    </form>\r\n\r\n    <div modalFooter class=\"border-t border-base bg-white px-6 py-4\">\r\n      <div class=\"flex justify-end gap-2\">\r\n        <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"close()\" [disabled]=\"testing()\">\r\n          Close\r\n        </ed-button>\r\n        <ed-button\r\n          type=\"button\"\r\n          variant=\"primary\"\r\n          fill\r\n          size=\"sm\"\r\n          [disabled]=\"testing() || !question().trim()\"\r\n          (click$)=\"runTest()\"\r\n        >\r\n          @if (testing()) {\r\n            Generating\u2026\r\n          } @else {\r\n            <ed-icon slot=\"prefix\" name=\"play_arrow\" [size]=\"16\" />\r\n            Test\r\n          }\r\n        </ed-button>\r\n      </div>\r\n    </div>\r\n  </app-modal>\r\n}\r\n", styles: [".kb-test__hint{color:var(--eds-color-text-muted, #64748b)}.kb-test__answer{border-color:var(--eds-color-border, #e2e8f0);background:var(--eds-color-surface-alt, #f8fafc)}.kb-test__answer-head{color:var(--eds-color-text-muted, #64748b)}.kb-test__playing,.kb-test__replay{color:var(--eds-primary, #2563eb)}.kb-test__answer-text{color:var(--eds-color-text, #0f172a)}\n"] }]
         }], propDecorators: { open: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4966,7 +4966,7 @@ const SETTINGS_FIELDS = {
         {
             key: 'allowSameDay',
             label: 'Allow same-day booking',
-            description: 'Let patients book appointments later today.',
+            description: 'Let patients book appointments today.',
             type: 'boolean',
         },
     ],
@@ -5338,7 +5338,7 @@ class SettingsPageComponent {
                         {
                             value: 'pending',
                             label: 'Pending appointment',
-                            description: 'Submits an Online Request for staff review (req-auto-new-appointment). Do not tell the caller the visit is confirmed.',
+                            description: 'Submits an Online Request for staff review. Do not tell the caller the visit is confirmed.',
                         },
                     ]);
                 }
@@ -5673,7 +5673,7 @@ class SettingsPageComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SettingsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SettingsPageComponent, isStandalone: true, selector: "eds-settings-page", inputs: { presentation: { classPropertyName: "presentation", publicName: "presentation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { savedSuccessfully: "savedSuccessfully" }, host: { properties: { "class.settings-page-host--drawer": "presentation() === \"drawer\"" } }, ngImport: i0, template: "<div\n  class=\"settings-page\"\n  [class.p-base]=\"presentation() === 'page'\"\n  [class.bg-lighter]=\"presentation() === 'page'\"\n  [class.min-h-full]=\"presentation() === 'page'\"\n  [class.h-full]=\"presentation() === 'page'\"\n  [class.min-h-0]=\"presentation() === 'page'\"\n  [class.overflow-auto]=\"presentation() === 'page'\"\n  [class.flex]=\"presentation() === 'drawer'\"\n  [class.h-full]=\"presentation() === 'drawer'\"\n  [class.min-h-0]=\"presentation() === 'drawer'\"\n  [class.flex-col]=\"presentation() === 'drawer'\"\n>\n  @if (presentation() === 'page') {\n    <header class=\"mb-6 flex items-start justify-between gap-4\">\n      <div>\n        <h4>Agent settings</h4>\n        <p class=\"mt-2 text-base leading-normal text-zinc-500\">Configure AI receptionist behavior and safety</p>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-3\">\n        @if (saved()) {\n          <span class=\"text-sm font-medium text-green-500\">Saved</span>\n        }\n        <ed-button variant=\"primary\" fill size=\"sm\" [disabled]=\"saving()\" (click$)=\"save()\">\n          <ed-icon slot=\"prefix\" name=\"save\" [size]=\"16\" />\n          {{ saving() ? 'Saving\u2026' : 'Save changes' }}\n        </ed-button>\n      </div>\n    </header>\n  }\n\n  @if (loading()) {\n    @if (presentation() === 'drawer') {\n      <div class=\"flex min-h-0 flex-1\" aria-busy=\"true\">\n        <nav class=\"w-[220px] h-full shrink-0 overflow-y-auto p-base bg-lighter-2\" aria-label=\"Settings sections\">\n          <ul role=\"presentation\">\n            @for (_ of navSkeletonRows; track _) {\n              <li class=\"mb-1\">\n                <ed-skeleton class=\"h-8 w-full !rounded-md\"></ed-skeleton>\n              </li>\n            }\n          </ul>\n        </nav>\n        <article class=\"flex min-h-0 min-w-0 flex-1 flex-col gap-md overflow-y-auto bg-white p-base\">\n          <header class=\"grid gap-2xs\">\n            <ed-skeleton class=\"h-5 w-40\"></ed-skeleton>\n            <ed-skeleton class=\"h-3 w-72\"></ed-skeleton>\n          </header>\n          @for (_ of fieldSkeletonRows; track _) {\n            <div class=\"grid gap-2xs\">\n              <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\n              <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\n            </div>\n          }\n        </article>\n      </div>\n    } @else {\n      <div\n        class=\"grid grid-cols-[240px_minmax(0,1fr)] max-[960px]:grid-cols-1 items-start gap-5\"\n        aria-busy=\"true\"\n      >\n        <nav class=\"flex flex-col gap-1 rounded-lg border border-base bg-white p-2 shadow-sm\" aria-label=\"Settings sections\">\n          @for (_ of navSkeletonRows; track _) {\n            <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\n          }\n        </nav>\n        <article class=\"flex min-h-96 flex-col gap-md overflow-hidden rounded-lg border border-light bg-white p-base\">\n          <header class=\"grid gap-2xs\">\n            <ed-skeleton class=\"h-5 w-40\"></ed-skeleton>\n            <ed-skeleton class=\"h-3 w-72\"></ed-skeleton>\n          </header>\n          @for (_ of fieldSkeletonRows; track _) {\n            <div class=\"grid gap-2xs\">\n              <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\n              <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\n            </div>\n          }\n        </article>\n      </div>\n    }\n  } @else if (settings()) {\n    @if (presentation() === 'drawer') {\n      <div class=\"flex min-h-0 flex-1\">\n        <nav class=\"w-[220px] h-full shrink-0 overflow-y-auto p-base bg-lighter-2\" aria-label=\"Settings sections\">\n          <ul role=\"tablist\" aria-label=\"Settings sections\">\n            @for (t of tabs; track t.id) {\n              <li\n                role=\"presentation\"\n                [class.cursor-pointer]=\"!isTabDisabled(t.id)\"\n                [class.cursor-not-allowed]=\"isTabDisabled(t.id)\"\n              >\n                <div\n                  class=\"kpi-menu\"\n                  role=\"tab\"\n                  [attr.id]=\"'agent-settings-tab-' + t.id\"\n                  [attr.aria-selected]=\"tab() === t.id\"\n                  [attr.aria-disabled]=\"isTabDisabled(t.id)\"\n                  [attr.tabindex]=\"tab() === t.id ? 0 : -1\"\n                  [attr.title]=\"isTabDisabled(t.id) ? 'This section is currently disabled' : null\"\n                  [class.kpi-menu-active]=\"tab() === t.id\"\n                  [class.opacity-45]=\"isTabDisabled(t.id)\"\n                  (click)=\"setTab(t.id)\"\n                  (keydown.enter)=\"setTab(t.id)\"\n                  (keydown.space)=\"$event.preventDefault(); setTab(t.id)\"\n                >\n                  <div class=\"flex items-center gap-xs w-full\">\n                    <span class=\"whitespace-nowrap flex-1 truncate\">{{ t.label }}</span>\n                    @if (isTabDisabled(t.id)) {\n                      <span class=\"shrink-0 fs-2xs font-medium uppercase tracking-wide text-lighter\">Off</span>\n                    }\n                  </div>\n                </div>\n              </li>\n            }\n          </ul>\n        </nav>\n\n        <article\n          class=\"flex min-h-0 min-w-0 flex-1 flex-col gap-md bg-white p-base\"\n          [class.overflow-y-auto]=\"!locationsMenuOpen()\"\n          [class.overflow-visible]=\"locationsMenuOpen()\"\n        >\n          <header class=\"flex shrink-0 items-start justify-between gap-base\">\n            <div class=\"min-w-0\">\n              <h5 class=\"m-0\">{{ sectionMeta().title }}</h5>\n              @if (tab() !== 'knowledge' && tab() !== 'general' && tab() !== 'phone' && tab() !== 'transcripts') {\n                <p class=\"m-0 mt-2xs max-w-2xl fs-sm text-light\">{{ sectionMeta().description }}</p>\n              }\n            </div>\n            @if (tab() === 'knowledge') {\n              <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"openTestCall()\">\n                <ed-icon slot=\"prefix\" name=\"phone_call\" [size]=\"16\" />\n                Test Call\n              </ed-button>\n            }\n          </header>\n\n          @if (sectionIsReadOnly(tab())) {\n            <p class=\"flex items-center gap-sm rounded-md border border-light bg-lighter px-base py-sm fs-sm text-light\">\n              <ed-icon name=\"lock\" [size]=\"18\" />\n              These settings are managed by Edvak. Contact support to request changes.\n            </p>\n          }\n\n          <ng-container [ngTemplateOutlet]=\"settingsPanels\" />\n        </article>\n      </div>\n    } @else {\n      <div class=\"grid grid-cols-[240px_minmax(0,1fr)] max-[960px]:grid-cols-1 items-start gap-5\">\n        <nav\n          class=\"sticky top-4 flex max-h-[calc(100vh-120px)] max-[960px]:static max-[960px]:max-h-none max-[960px]:flex-row max-[960px]:flex-wrap flex-col gap-1 overflow-y-auto rounded-lg border border-base bg-white p-2 shadow-sm\"\n          aria-label=\"Settings sections\"\n        >\n          @for (t of tabs; track t.id) {\n            <button\n              type=\"button\"\n              class=\"settings-page__nav-item flex w-full max-[960px]:w-auto max-[960px]:flex-1 cursor-pointer items-center justify-between gap-3 rounded-md border-none bg-transparent px-4 py-3 text-left text-sm font-medium leading-snug text-zinc-600\"\n              [class.settings-page__nav-item--active]=\"tab() === t.id\"\n              [class.settings-page__nav-item--disabled]=\"isTabDisabled(t.id)\"\n              [disabled]=\"isTabDisabled(t.id)\"\n              [attr.title]=\"isTabDisabled(t.id) ? 'This section is currently disabled' : null\"\n              (click)=\"setTab(t.id)\"\n            >\n              {{ t.label }}\n              @if (isTabDisabled(t.id)) {\n                <span class=\"ml-auto text-xs font-medium uppercase tracking-wide text-zinc-400\">Disabled</span>\n              }\n            </button>\n          }\n        </nav>\n\n        <article class=\"flex min-h-96 flex-col gap-md overflow-hidden rounded-lg border border-light bg-white p-base\">\n          <header class=\"flex items-start justify-between gap-base\">\n            <div class=\"min-w-0\">\n              <h5 class=\"m-0\">{{ sectionMeta().title }}</h5>\n              @if (tab() !== 'knowledge' && tab() !== 'general' && tab() !== 'phone' && tab() !== 'transcripts') {\n                <p class=\"m-0 mt-2xs max-w-2xl fs-sm text-light\">{{ sectionMeta().description }}</p>\n              }\n            </div>\n            @if (tab() === 'knowledge') {\n              <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"openTestCall()\">\n                <ed-icon slot=\"prefix\" name=\"phone_call\" [size]=\"16\" />\n                Test Call\n              </ed-button>\n            }\n          </header>\n\n          @if (sectionIsReadOnly(tab())) {\n            <p class=\"flex items-center gap-sm rounded-md border border-light bg-lighter px-base py-sm fs-sm text-light\">\n              <ed-icon name=\"lock\" [size]=\"18\" />\n              These settings are managed by Edvak. Contact support to request changes.\n            </p>\n          }\n\n          <ng-container [ngTemplateOutlet]=\"settingsPanels\" />\n        </article>\n      </div>\n    }\n  }\n</div>\n\n<ng-template #settingsPanels>\n        @if (tab() === 'knowledge') {\n          <div class=\"flex w-full max-w-4xl flex-col gap-md\">\n            <div class=\"flex flex-col gap-xs\">\n              <label>What to say<span required></span></label>\n              <textarea\n                class=\"form-textarea min-h-56\"\n                rows=\"10\"\n                [maxlength]=\"knowledgeMax\"\n                [ngModel]=\"whatToSay()\"\n                (ngModelChange)=\"updateKnowledgeField('whatToSay', $event)\"\n                placeholder=\"Hours, parking, payment options, arrival instructions, emergencies\u2026\"\n                autocomplete=\"off\"\n              ></textarea>\n              <span class=\"block text-right fs-xs text-light\">{{ whatToSay().length }}/{{ knowledgeMax }}</span>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>What not to say<span required></span></label>\n              <textarea\n                class=\"form-textarea min-h-56\"\n                rows=\"10\"\n                [maxlength]=\"knowledgeMax\"\n                [ngModel]=\"whatNotToSay()\"\n                (ngModelChange)=\"updateKnowledgeField('whatNotToSay', $event)\"\n                placeholder=\"Clinical advice, unverified prices, PHI, promises the practice cannot keep\u2026\"\n                autocomplete=\"off\"\n              ></textarea>\n              <span class=\"block text-right fs-xs text-light\">{{ whatNotToSay().length }}/{{ knowledgeMax }}</span>\n            </div>\n          </div>\n        } @else if (tab() === 'general') {\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\n            <div class=\"flex flex-col gap-xs\">\n              <div class=\"flex items-center justify-between gap-xs\">\n                <label class=\"m-0\">\n                  Name<span required></span>\n                </label>\n                <ed-icon\n                  name=\"info\"\n                  [size]=\"16\"\n                  class=\"text-light\"\n                  title=\"How the AI introduces itself on calls\"\n                />\n              </div>\n              <input\n                class=\"form-input is-sm\"\n                type=\"text\"\n                [ngModel]=\"fieldValue('general', 'agentName')\"\n                (ngModelChange)=\"updateField('general', 'agentName', $event)\"\n                autocomplete=\"off\"\n              />\n            </div>\n\n            <div class=\"flex items-end gap-sm\">\n              <div class=\"flex min-w-0 flex-1 flex-col gap-xs\">\n                <label>Voice<span required></span></label>\n                <select\n                  class=\"form-select is-sm settings-page__select\"\n                  [ngModel]=\"selectedVoiceId()\"\n                  (ngModelChange)=\"onVoiceChange($event)\"\n                  autocomplete=\"off\"\n                >\n                  @for (v of voicePresets; track v.id) {\n                    <option [ngValue]=\"v.id\">{{ v.gender }} \u00B7 {{ v.label }}</option>\n                  }\n                </select>\n              </div>\n              <button\n                type=\"button\"\n                class=\"settings-page__voice-play inline-flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-md border border-base bg-white disabled:cursor-wait disabled:opacity-60\"\n                [disabled]=\"!selectedVoiceId() || voicePreviewBusy()\"\n                [attr.aria-label]=\"voicePreviewPlaying() ? 'Stop voice preview' : 'Play voice preview'\"\n                [title]=\"voicePreviewPlaying() ? 'Stop preview' : 'Play sample'\"\n                (click)=\"toggleVoicePreview()\"\n              >\n                <ed-icon [name]=\"voicePreviewPlaying() ? 'stop' : 'play_arrow'\" [size]=\"20\" />\n              </button>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Tone</label>\n              <div class=\"flex flex-wrap gap-xs\" role=\"radiogroup\" aria-label=\"Tone\">\n                @for (tone of toneOptions; track tone.value) {\n                  <button\n                    type=\"button\"\n                    class=\"settings-page__tone cursor-pointer rounded-full border border-transparent bg-lighter px-sm py-2xs fs-xs font-medium text-body\"\n                    [class.settings-page__tone--active]=\"selectedTone() === tone.value\"\n                    [class.font-semibold]=\"selectedTone() === tone.value\"\n                    [attr.aria-checked]=\"selectedTone() === tone.value\"\n                    role=\"radio\"\n                    (click)=\"setTone(tone.value)\"\n                  >\n                    {{ tone.label }}\n                  </button>\n                }\n              </div>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Inbound Greetings<span required></span></label>\n              <textarea\n                class=\"form-textarea min-h-24\"\n                rows=\"4\"\n                spellcheck=\"false\"\n                [maxlength]=\"welcomeMax\"\n                [placeholder]=\"welcomePlaceholder()\"\n                [ngModel]=\"welcomeMessage()\"\n                (ngModelChange)=\"updateWelcomeMessage($event)\"\n                autocomplete=\"off\"\n              ></textarea>\n              <span class=\"block text-right fs-xs text-light\">{{ welcomeMessage().length }}/{{ welcomeMax }}</span>\n              <div class=\"flex flex-wrap items-center gap-xs\">\n                <span class=\"fs-xs font-medium text-dark\">Variables:</span>\n                @for (v of greetingVariables; track v.key) {\n                  <button\n                    type=\"button\"\n                    class=\"settings-page__var-chip inline-flex h-5 cursor-pointer items-center rounded border border-base bg-white px-2xs fs-xs font-medium text-dark\"\n                    (click)=\"insertGreetingVariable(v.token)\"\n                    [title]=\"'Insert ' + v.token\"\n                  >\n                    {{ v.label }}\n                  </button>\n                }\n              </div>\n            </div>\n          </div>\n        } @else if (tab() === 'phone') {\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\n            <div class=\"flex flex-col gap-xs\">\n              <div class=\"flex items-center justify-between gap-xs\">\n                <label class=\"m-0\">AI Answer Mode<span required></span></label>\n                <ed-icon name=\"info\" [size]=\"16\" class=\"text-light\" title=\"When the AI picks up inbound calls\" />\n              </div>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"fieldValue('phone', 'answerMode')\"\n                (ngModelChange)=\"updateField('phone', 'answerMode', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of answerModeOptions; track opt.value) {\n                  <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>AI Phone Number<span required></span></label>\n              <input\n                class=\"form-input is-sm\"\n                type=\"text\"\n                [disabled]=\"isFieldReadOnly('phone', 'mainNumber')\"\n                [ngModel]=\"fieldValue('phone', 'mainNumber')\"\n                (ngModelChange)=\"updateField('phone', 'mainNumber', $event)\"\n                autocomplete=\"off\"\n              />\n              <span class=\"fs-xs text-light\">Number patients dial for the AI receptionist. Locked (managed by platform).</span>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Transfer Number<span required></span></label>\n              <input\n                class=\"form-input is-sm\"\n                type=\"text\"\n                [disabled]=\"isFieldReadOnly('phone', 'transferNumber')\"\n                [ngModel]=\"fieldValue('phone', 'transferNumber')\"\n                (ngModelChange)=\"updateField('phone', 'transferNumber', $event)\"\n                autocomplete=\"off\"\n              />\n              <span class=\"fs-xs text-light\">Staff / front-desk handoff number. Locked.</span>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Ringing Time Wait<span required></span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('phone', 'ringTimeout')\"\n                (ngModelChange)=\"selectNumberField('phone', 'ringTimeout', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of ringTimeoutOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex items-center gap-sm rounded-md border border-base bg-white p-sm\">\n              <ed-icon name=\"event_available\" [size]=\"20\" class=\"shrink-0 text-primary\" />\n              <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                <span class=\"fs-sm text-dark\">Create Follow-up Task</span>\n                <span class=\"fs-xs text-light\">\n                  If no one answers in time, the agent auto-creates a high priority task.\n                </span>\n              </div>\n              <button\n                type=\"button\"\n                class=\"settings-page__switch shrink-0\"\n                [class.settings-page__switch--on]=\"!!fieldValue('phone', 'createFollowUpTask')\"\n                [attr.aria-pressed]=\"!!fieldValue('phone', 'createFollowUpTask')\"\n                aria-label=\"Create Follow-up Task\"\n                (click)=\"updateField('phone', 'createFollowUpTask', !fieldValue('phone', 'createFollowUpTask'))\"\n              >\n                <span class=\"settings-page__switch-thumb\"></span>\n              </button>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Location Handled<span required></span></label>\n              <div class=\"relative\" data-locations-dd (document:click)=\"onLocationsDocClick($event)\">\n                <div\n                  class=\"form-input flex h-auto w-full cursor-pointer items-center justify-between gap-xs py-2xs text-left\"\n                  role=\"combobox\"\n                  tabindex=\"0\"\n                  [class.opacity-55]=\"locations().length === 0\"\n                  [attr.aria-expanded]=\"locationsMenuOpen()\"\n                  [attr.aria-disabled]=\"locations().length === 0\"\n                  [attr.title]=\"locationSummary()\"\n                  aria-haspopup=\"listbox\"\n                  aria-label=\"Locations handled\"\n                  (click)=\"$event.stopPropagation(); locations().length && toggleLocationsMenu()\"\n                  (keydown.enter)=\"$event.preventDefault(); locations().length && toggleLocationsMenu()\"\n                  (keydown.space)=\"$event.preventDefault(); locations().length && toggleLocationsMenu()\"\n                >\n                  <span class=\"flex min-w-0 flex-1 flex-wrap items-center gap-2xs overflow-hidden\">\n                    @if (locations().length === 0) {\n                      <span class=\"fs-sm text-light\">No locations available.</span>\n                    } @else if (selectedLocations().length === 0) {\n                      <span class=\"fs-sm text-light\">Select locations</span>\n                    } @else {\n                      @for (loc of visibleSelectedLocations(); track loc.id) {\n                        <span class=\"inline-flex h-5 items-center gap-2xs rounded bg-primary-50 px-2xs text-primary\">\n                          <span class=\"fs-xs font-medium\">{{ loc.name }}</span>\n                          <button\n                            type=\"button\"\n                            class=\"inline-flex h-3 w-3 shrink-0 cursor-pointer items-center justify-center border-none bg-transparent p-0 text-primary\"\n                            [attr.aria-label]=\"'Remove ' + loc.name\"\n                            (click)=\"$event.stopPropagation(); toggleLocation(loc.id)\"\n                          >\n                            <ed-icon name=\"close\" [size]=\"12\" color=\"currentColor\" />\n                          </button>\n                        </span>\n                      }\n                      @if (hiddenLocationCount() > 0) {\n                        <span class=\"inline-flex h-5 items-center rounded bg-primary-50 px-2xs fs-xs font-medium text-primary\">\n                          +{{ hiddenLocationCount() }}\n                        </span>\n                      }\n                    }\n                  </span>\n                  <ed-icon name=\"expand_more\" [size]=\"16\" class=\"shrink-0 text-light\" />\n                </div>\n                @if (locationsMenuOpen()) {\n                  <ul\n                    class=\"settings-page__locations-menu absolute bottom-full z-50 m-0 mb-1 max-h-56 w-full list-none overflow-auto rounded-md border border-zinc-300 bg-white p-2xs shadow-lg\"\n                    role=\"listbox\"\n                    aria-multiselectable=\"true\"\n                  >\n                    @for (loc of locations(); track loc.id) {\n                      <li role=\"option\" [attr.aria-selected]=\"selectedLocationIds().includes(loc.id)\">\n                        <label class=\"flex cursor-pointer items-center gap-xs rounded px-xs py-2xs fs-sm text-dark hover:bg-lighter\">\n                          <input\n                            type=\"checkbox\"\n                            class=\"h-4 w-4 accent-blue-600\"\n                            [checked]=\"selectedLocationIds().includes(loc.id)\"\n                            (change)=\"toggleLocation(loc.id)\"\n                          />\n                          <span class=\"min-w-0 truncate\">{{ loc.name }}</span>\n                        </label>\n                      </li>\n                    }\n                  </ul>\n                }\n              </div>\n              @if (locations().length === 0) {\n                <p class=\"m-0 fs-sm text-light\">No locations available.</p>\n              }\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Max AI Call Duration<span required></span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('phone', 'maxCallDurationMin')\"\n                (ngModelChange)=\"selectNumberField('phone', 'maxCallDurationMin', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of maxCallDurationOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Silence Timeout<span required></span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('phone', 'silenceTimeoutSec')\"\n                (ngModelChange)=\"selectNumberField('phone', 'silenceTimeoutSec', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of silenceTimeoutOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>After-Hours Behaviour<span required></span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"fieldValue('phone', 'afterHoursBehavior')\"\n                (ngModelChange)=\"updateField('phone', 'afterHoursBehavior', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of afterHoursOptions; track opt.value) {\n                  <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-md border-t border-light pt-md\">\n              <div class=\"settings-page__booking-mode flex flex-col gap-sm\">\n                <div class=\"flex flex-col gap-2xs\">\n                  <span class=\"fs-sm font-medium text-dark\">Appointment booking mode</span>\n                  <span class=\"fs-xs text-light\">\n                    Controls how the voice agent writes bookings to the EHR for this practice.\n                    Applied when you click Save changes.\n                  </span>\n                </div>\n\n                @if (bookingModeLoading()) {\n                  <p class=\"m-0 fs-sm text-light\">Loading booking mode\u2026</p>\n                } @else {\n                  <div class=\"flex flex-col gap-xs\" role=\"radiogroup\" aria-label=\"Appointment booking mode\">\n                    @for (opt of bookingModeOptions(); track opt.value) {\n                      <button\n                        type=\"button\"\n                        class=\"settings-page__booking-option flex w-full cursor-pointer items-start gap-sm rounded-md border border-base bg-white p-sm text-left\"\n                        [class.settings-page__booking-option--active]=\"bookingMode() === opt.value\"\n                        [disabled]=\"saving()\"\n                        role=\"radio\"\n                        [attr.aria-checked]=\"bookingMode() === opt.value\"\n                        (click)=\"selectBookingMode(opt.value)\"\n                      >\n                        <span\n                          class=\"settings-page__booking-radio mt-2xs flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-zinc-300\"\n                          [class.settings-page__booking-radio--on]=\"bookingMode() === opt.value\"\n                          aria-hidden=\"true\"\n                        ></span>\n                        <span class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                          <span class=\"fs-sm font-medium text-dark\">{{ opt.label }}</span>\n                          @if (opt.description) {\n                            <span class=\"fs-xs text-light\">{{ opt.description }}</span>\n                          }\n                        </span>\n                      </button>\n                    }\n                  </div>\n                }\n\n                @if (bookingModeError(); as err) {\n                  <p class=\"m-0 rounded-md border border-red-200 bg-red-50 px-sm py-xs fs-sm text-red-600\" role=\"alert\">\n                    {{ err }}\n                  </p>\n                }\n              </div>\n\n              <div class=\"flex flex-col gap-xs\">\n                <label>Minimum lead time (hours)</label>\n                <input\n                  class=\"form-input is-sm\"\n                  type=\"number\"\n                  min=\"0\"\n                  [ngModel]=\"fieldValue('scheduling', 'leadTimeHours')\"\n                  (ngModelChange)=\"updateField('scheduling', 'leadTimeHours', +$event)\"\n                  autocomplete=\"off\"\n                />\n                <span class=\"fs-xs text-light\">Earliest bookable slot from now.</span>\n              </div>\n\n              <div class=\"flex items-center gap-sm rounded-md border border-base bg-white p-sm\">\n                  <ed-icon name=\"calendar_month\" [size]=\"20\" class=\"shrink-0 text-primary\" />\n                <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                  <span class=\"fs-sm text-dark\">Allow same-day booking</span>\n                  <span class=\"fs-xs text-light\">\n                    Let patients book appointments later today.\n                  </span>\n                </div>\n                <button\n                  type=\"button\"\n                  class=\"settings-page__switch shrink-0\"\n                  [class.settings-page__switch--on]=\"!!fieldValue('scheduling', 'allowSameDay')\"\n                  [attr.aria-pressed]=\"!!fieldValue('scheduling', 'allowSameDay')\"\n                  aria-label=\"Allow same-day booking\"\n                  (click)=\"updateField('scheduling', 'allowSameDay', !fieldValue('scheduling', 'allowSameDay'))\"\n                >\n                  <span class=\"settings-page__switch-thumb\"></span>\n                </button>\n              </div>\n            </div>\n          </div>\n        } @else if (tab() === 'transcripts') {\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\n            <div class=\"flex flex-col gap-xs\">\n              <label>Keep Call Recordings<span required></span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('transcripts', 'recordingRetainDays')\"\n                (ngModelChange)=\"selectNumberField('transcripts', 'recordingRetainDays', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of retentionOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Keep Transcripts<span required></span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('transcripts', 'transcriptRetainDays')\"\n                (ngModelChange)=\"selectNumberField('transcripts', 'transcriptRetainDays', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of retentionOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <div class=\"flex items-center gap-xs\">\n                <label class=\"m-0\">Disclosure Warning</label>\n                <button\n                  type=\"button\"\n                  class=\"settings-page__switch shrink-0\"\n                  [class.settings-page__switch--on]=\"disclosureEnabled()\"\n                  [attr.aria-pressed]=\"disclosureEnabled()\"\n                  aria-label=\"Disclosure Warning\"\n                  (click)=\"setDisclosureEnabled(!disclosureEnabled())\"\n                >\n                  <span class=\"settings-page__switch-thumb\"></span>\n                </button>\n              </div>\n              @if (disclosureEnabled()) {\n                <textarea\n                  class=\"form-textarea min-h-24\"\n                  rows=\"4\"\n                  [maxlength]=\"disclosureMax\"\n                  [ngModel]=\"disclosureText()\"\n                  (ngModelChange)=\"updateDisclosureText($event)\"\n                  autocomplete=\"off\"\n                ></textarea>\n              }\n            </div>\n          </div>\n        } @else if (tab() === 'advanced') {\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\n            <div class=\"flex items-center gap-sm rounded-md border border-base bg-white p-sm\">\n              <span class=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary-50 text-primary\" aria-hidden=\"true\">\n                <ed-icon name=\"sparkle\" [size]=\"20\" />\n              </span>\n              <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                <span class=\"fs-sm text-dark\">\n                  @if (toggling()) {\n                    Updating\u2026\n                  } @else if (online() === true) {\n                    Agent online\n                  } @else if (online() === false) {\n                    Agent offline\n                  } @else {\n                    Status unknown\n                  }\n                </span>\n                <span class=\"fs-xs text-light\">\n                  @if (online() === true) {\n                    AI receptionist is answering inbound calls.\n                  } @else if (online() === false) {\n                    AI is offline \u2014 calls go to the front desk.\n                  } @else {\n                    Checking agent status\u2026\n                  }\n                </span>\n              </div>\n              <button\n                type=\"button\"\n                class=\"settings-page__switch shrink-0\"\n                [class.settings-page__switch--on]=\"online() === true\"\n                [disabled]=\"agentSwitchDisabled()\"\n                [attr.aria-pressed]=\"online() === true\"\n                aria-label=\"Agent online\"\n                (click)=\"onAgentToggleClick()\"\n              >\n                <span class=\"settings-page__switch-thumb\"></span>\n              </button>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Model version</label>\n              <input\n                class=\"form-input is-sm\"\n                type=\"text\"\n                [ngModel]=\"fieldValue('advanced', 'modelVersion')\"\n                disabled\n                autocomplete=\"off\"\n              />\n              <span class=\"fs-xs text-light\">Set by Edvak support.</span>\n            </div>\n\n            <div class=\"flex items-center gap-sm rounded-md border border-base bg-lighter px-base py-sm opacity-90\">\n              <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                <span class=\"fs-sm text-dark\">Debug mode</span>\n                <span class=\"fs-xs text-light\">Verbose logging \u2014 contact Edvak to change.</span>\n              </div>\n              <button\n                type=\"button\"\n                class=\"settings-page__switch shrink-0\"\n                [class.settings-page__switch--on]=\"!!fieldValue('advanced', 'debugMode')\"\n                disabled\n                [attr.aria-pressed]=\"!!fieldValue('advanced', 'debugMode')\"\n                aria-label=\"Debug mode\"\n              >\n                <span class=\"settings-page__switch-thumb\"></span>\n              </button>\n            </div>\n          </div>\n        } @else {\n          <div class=\"grid grid-cols-2 gap-x-md gap-y-md below-md:grid-cols-1\">\n            @for (field of fieldsForTab(); track field.key) {\n              @if (field.type === 'boolean') {\n                <label\n                  class=\"col-span-full flex cursor-pointer items-center justify-between gap-base rounded-md border border-base bg-lighter px-base py-sm\"\n                  [class.cursor-default]=\"fieldIsReadOnly(tab(), field.key)\"\n                  [class.opacity-90]=\"fieldIsReadOnly(tab(), field.key)\"\n                >\n                  <div class=\"flex min-w-0 flex-col gap-2xs\">\n                    <span class=\"fs-sm text-dark\">{{ field.label }}</span>\n                    @if (field.description) {\n                      <span\n                        class=\"fs-sm text-light\"\n                        [class.text-lighter]=\"fieldIsReadOnly(tab(), field.key)\"\n                      >{{ field.description }}</span>\n                    }\n                  </div>\n                  <input\n                    type=\"checkbox\"\n                    class=\"h-4 w-4 shrink-0 accent-blue-600 disabled:cursor-not-allowed\"\n                    [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\n                    [ngModel]=\"fieldValue(tab(), field.key)\"\n                    (ngModelChange)=\"updateField(tab(), field.key, $event)\"\n                    autocomplete=\"off\"\n                  />\n                </label>\n              } @else if (field.type === 'select' && field.options?.length) {\n                <div class=\"flex flex-col gap-xs\">\n                  <label>{{ field.label }}</label>\n                  @if (field.description) {\n                    <span\n                      class=\"fs-sm text-light\"\n                      [class.text-lighter]=\"fieldIsReadOnly(tab(), field.key)\"\n                    >{{ field.description }}</span>\n                  }\n                  <select\n                    class=\"form-select is-sm\"\n                    [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\n                    [ngModel]=\"fieldValue(tab(), field.key)\"\n                    (ngModelChange)=\"updateField(tab(), field.key, $event)\"\n                    autocomplete=\"off\"\n                  >\n                    @for (opt of field.options; track opt.value) {\n                      <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                    }\n                  </select>\n                </div>\n              } @else {\n                <div class=\"flex flex-col gap-xs\">\n                  <label>{{ field.label }}</label>\n                  @if (field.description) {\n                    <span\n                      class=\"fs-sm text-light\"\n                      [class.text-lighter]=\"fieldIsReadOnly(tab(), field.key)\"\n                    >{{ field.description }}</span>\n                  }\n                  @if (field.type === 'number') {\n                    <input\n                      class=\"form-input is-sm\"\n                      type=\"number\"\n                      [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\n                      [ngModel]=\"fieldValue(tab(), field.key)\"\n                      (ngModelChange)=\"updateField(tab(), field.key, +$event)\"\n                      autocomplete=\"off\"\n                    />\n                  } @else {\n                    <input\n                      class=\"form-input is-sm\"\n                      type=\"text\"\n                      [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\n                      [ngModel]=\"fieldValue(tab(), field.key)\"\n                      (ngModelChange)=\"updateField(tab(), field.key, $event)\"\n                      autocomplete=\"off\"\n                    />\n                  }\n                </div>\n              }\n            }\n          </div>\n        }\n</ng-template>\n\n<eds-knowledge-test-modal\n  [open]=\"knowledgeTestOpen()\"\n  [whatToSay]=\"whatToSay()\"\n  [whatNotToSay]=\"whatNotToSay()\"\n  [voiceId]=\"selectedVoiceId()\"\n  (closed)=\"closeTestCall()\"\n/>\n\n@if (confirmOffOpen()) {\n  <app-modal\n    title=\"Turn off AI receptionist?\"\n    subtitle=\"Inbound callers will be transferred to the front desk instead of the AI.\"\n    maxWidth=\"480px\"\n    (closed)=\"cancelConfirmOff()\"\n  >\n    <p class=\"mb-4 m-0 text-sm leading-normal text-zinc-500\">While offline, the AI will not answer calls. Callers are routed to the human receptionist.</p>\n    <div class=\"flex justify-end gap-2\">\n      <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"cancelConfirmOff()\">Cancel</ed-button>\n      <ed-button variant=\"danger\" fill size=\"sm\" [disabled]=\"toggling()\" (click$)=\"confirmTurnOff()\">\n        Turn off AI receptionist\n      </ed-button>\n    </div>\n  </app-modal>\n}\n", styles: [":host{display:block}:host.settings-page-host--drawer{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.settings-page__layout{grid-template-columns:240px minmax(0,1fr)}.settings-page__nav-item:hover{background:var(--eds-surface-l1, #f7f9fa);color:var(--eds-text-primary, #41464c)}.settings-page__nav-item--active{background:var(--eds-color-primary-light, #eaf1fe);color:var(--eds-text-brand, #2162f0)}.settings-page__nav-item--disabled,.settings-page__nav-item:disabled{opacity:.45;cursor:not-allowed;color:var(--eds-text-tertiary, #767676)}.settings-page__nav-item--disabled:hover,.settings-page__nav-item:disabled:hover{background:none;color:var(--eds-text-tertiary, #767676)}.settings-page__select{min-height:2.25rem;background:#fff;border:1px solid #c5c7d0;color:#1f2328}.settings-page__locations-menu{box-shadow:0 8px 24px #0f172a29}.settings-page__voice-play{color:var(--eds-text-primary, #41464c)}.settings-page__voice-play:hover:not(:disabled){border-color:var(--eds-brand-600, #2162f0);color:var(--eds-brand-600, #2162f0)}.settings-page__tone--active{background:var(--eds-surface-l0, #fff);border-color:var(--eds-brand-600, #2162f0);color:var(--eds-brand-600, #2162f0)}.settings-page__var-chip:hover{border-color:var(--eds-brand-300, #94c5f9);color:var(--eds-brand-600, #2162f0)}.settings-page__switch{width:44px;height:26px;border-radius:999px;border:none;background:var(--eds-gray-300, #cbd5e1);padding:3px;cursor:pointer;transition:background .15s ease}.settings-page__switch--on{background:var(--eds-brand-600, #2162f0)}.settings-page__switch:disabled{opacity:.55;cursor:not-allowed}.settings-page__switch-thumb{display:block;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0f172a33;transition:transform .15s ease}.settings-page__switch--on .settings-page__switch-thumb{transform:translate(18px)}.settings-page__booking-option:hover:not(:disabled){border-color:#94c5f9;background:#f8fbff}.settings-page__booking-option--active{border-color:var(--eds-brand-600, #2162f0);background:var(--eds-color-primary-light, #eaf1fe)}.settings-page__booking-option:disabled{opacity:.7;cursor:wait}.settings-page__booking-radio--on{border-color:var(--eds-brand-600, #2162f0);background:var(--eds-brand-600, #2162f0);box-shadow:inset 0 0 0 3px #fff}.form-input:disabled,.form-select:disabled{color:var(--eds-color-text-muted, #64748b);background:var(--eds-color-surface-alt, #f1f5f9);border-color:var(--eds-color-border, #e2e8f0);cursor:not-allowed;opacity:1}@media(max-width:960px){.settings-page__layout{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ed-icon", inputs: ["name", "size", "color", "cssClass", "decorative", "ariaHidden", "ariaLabel", "title", "desc", "focusable", "tabIndex"] }, { 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: KnowledgeTestModalComponent, selector: "eds-knowledge-test-modal", inputs: ["open", "whatToSay", "whatNotToSay", "voiceId"], outputs: ["closed"] }, { kind: "component", type: ModalComponent, selector: "app-modal", inputs: ["title", "subtitle", "maxWidth"], outputs: ["closed"] }, { kind: "component", type: EdSkeletonComponent, selector: "ed-skeleton", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SettingsPageComponent, isStandalone: true, selector: "eds-settings-page", inputs: { presentation: { classPropertyName: "presentation", publicName: "presentation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { savedSuccessfully: "savedSuccessfully" }, host: { properties: { "class.settings-page-host--drawer": "presentation() === \"drawer\"" } }, ngImport: i0, template: "<div\r\n  class=\"settings-page\"\r\n  [class.p-base]=\"presentation() === 'page'\"\r\n  [class.bg-lighter]=\"presentation() === 'page'\"\r\n  [class.min-h-full]=\"presentation() === 'page'\"\r\n  [class.h-full]=\"presentation() === 'page'\"\r\n  [class.min-h-0]=\"presentation() === 'page'\"\r\n  [class.overflow-auto]=\"presentation() === 'page'\"\r\n  [class.flex]=\"presentation() === 'drawer'\"\r\n  [class.h-full]=\"presentation() === 'drawer'\"\r\n  [class.min-h-0]=\"presentation() === 'drawer'\"\r\n  [class.flex-col]=\"presentation() === 'drawer'\"\r\n>\r\n  @if (presentation() === 'page') {\r\n    <header class=\"mb-6 flex items-start justify-between gap-4\">\r\n      <div>\r\n        <h4>Agent settings</h4>\r\n        <p class=\"mt-2 text-base leading-normal text-zinc-500\">Configure AI receptionist behavior and safety</p>\r\n      </div>\r\n      <div class=\"flex shrink-0 items-center gap-3\">\r\n        @if (saved()) {\r\n          <span class=\"text-sm font-medium text-green-500\">Saved</span>\r\n        }\r\n        <ed-button variant=\"primary\" fill size=\"sm\" [disabled]=\"saving()\" (click$)=\"save()\">\r\n          <ed-icon slot=\"prefix\" name=\"save\" [size]=\"16\" />\r\n          {{ saving() ? 'Saving\u2026' : 'Save changes' }}\r\n        </ed-button>\r\n      </div>\r\n    </header>\r\n  }\r\n\r\n  @if (loading()) {\r\n    @if (presentation() === 'drawer') {\r\n      <div class=\"flex min-h-0 flex-1\" aria-busy=\"true\">\r\n        <nav class=\"w-[220px] h-full shrink-0 overflow-y-auto p-base bg-lighter-2\" aria-label=\"Settings sections\">\r\n          <ul role=\"presentation\">\r\n            @for (_ of navSkeletonRows; track _) {\r\n              <li class=\"mb-1\">\r\n                <ed-skeleton class=\"h-8 w-full !rounded-md\"></ed-skeleton>\r\n              </li>\r\n            }\r\n          </ul>\r\n        </nav>\r\n        <article class=\"flex min-h-0 min-w-0 flex-1 flex-col gap-md overflow-y-auto bg-white p-base\">\r\n          <header class=\"grid gap-2xs\">\r\n            <ed-skeleton class=\"h-5 w-40\"></ed-skeleton>\r\n            <ed-skeleton class=\"h-3 w-72\"></ed-skeleton>\r\n          </header>\r\n          @for (_ of fieldSkeletonRows; track _) {\r\n            <div class=\"grid gap-2xs\">\r\n              <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\r\n              <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\r\n            </div>\r\n          }\r\n        </article>\r\n      </div>\r\n    } @else {\r\n      <div\r\n        class=\"grid grid-cols-[240px_minmax(0,1fr)] max-[960px]:grid-cols-1 items-start gap-5\"\r\n        aria-busy=\"true\"\r\n      >\r\n        <nav class=\"flex flex-col gap-1 rounded-lg border border-base bg-white p-2 shadow-sm\" aria-label=\"Settings sections\">\r\n          @for (_ of navSkeletonRows; track _) {\r\n            <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\r\n          }\r\n        </nav>\r\n        <article class=\"flex min-h-96 flex-col gap-md overflow-hidden rounded-lg border border-light bg-white p-base\">\r\n          <header class=\"grid gap-2xs\">\r\n            <ed-skeleton class=\"h-5 w-40\"></ed-skeleton>\r\n            <ed-skeleton class=\"h-3 w-72\"></ed-skeleton>\r\n          </header>\r\n          @for (_ of fieldSkeletonRows; track _) {\r\n            <div class=\"grid gap-2xs\">\r\n              <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\r\n              <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\r\n            </div>\r\n          }\r\n        </article>\r\n      </div>\r\n    }\r\n  } @else if (settings()) {\r\n    @if (presentation() === 'drawer') {\r\n      <div class=\"flex min-h-0 flex-1\">\r\n        <nav class=\"w-[220px] h-full shrink-0 overflow-y-auto p-base bg-lighter-2\" aria-label=\"Settings sections\">\r\n          <ul role=\"tablist\" aria-label=\"Settings sections\">\r\n            @for (t of tabs; track t.id) {\r\n              <li\r\n                role=\"presentation\"\r\n                [class.cursor-pointer]=\"!isTabDisabled(t.id)\"\r\n                [class.cursor-not-allowed]=\"isTabDisabled(t.id)\"\r\n              >\r\n                <div\r\n                  class=\"kpi-menu\"\r\n                  role=\"tab\"\r\n                  [attr.id]=\"'agent-settings-tab-' + t.id\"\r\n                  [attr.aria-selected]=\"tab() === t.id\"\r\n                  [attr.aria-disabled]=\"isTabDisabled(t.id)\"\r\n                  [attr.tabindex]=\"tab() === t.id ? 0 : -1\"\r\n                  [attr.title]=\"isTabDisabled(t.id) ? 'This section is currently disabled' : null\"\r\n                  [class.kpi-menu-active]=\"tab() === t.id\"\r\n                  [class.opacity-45]=\"isTabDisabled(t.id)\"\r\n                  (click)=\"setTab(t.id)\"\r\n                  (keydown.enter)=\"setTab(t.id)\"\r\n                  (keydown.space)=\"$event.preventDefault(); setTab(t.id)\"\r\n                >\r\n                  <div class=\"flex items-center gap-xs w-full\">\r\n                    <span class=\"whitespace-nowrap flex-1 truncate\">{{ t.label }}</span>\r\n                    @if (isTabDisabled(t.id)) {\r\n                      <span class=\"shrink-0 fs-2xs font-medium uppercase tracking-wide text-lighter\">Off</span>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              </li>\r\n            }\r\n          </ul>\r\n        </nav>\r\n\r\n        <article\r\n          class=\"flex min-h-0 min-w-0 flex-1 flex-col gap-md bg-white p-base\"\r\n          [class.overflow-y-auto]=\"!locationsMenuOpen()\"\r\n          [class.overflow-visible]=\"locationsMenuOpen()\"\r\n        >\r\n          <header class=\"flex shrink-0 items-start justify-between gap-base\">\r\n            <div class=\"min-w-0\">\r\n              <h5 class=\"m-0\">{{ sectionMeta().title }}</h5>\r\n              @if (tab() !== 'knowledge' && tab() !== 'general' && tab() !== 'phone' && tab() !== 'transcripts') {\r\n                <p class=\"m-0 mt-2xs max-w-2xl fs-sm text-light\">{{ sectionMeta().description }}</p>\r\n              }\r\n            </div>\r\n            @if (tab() === 'knowledge') {\r\n              <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"openTestCall()\">\r\n                <ed-icon slot=\"prefix\" name=\"phone_call\" [size]=\"16\" />\r\n                Test Call\r\n              </ed-button>\r\n            }\r\n          </header>\r\n\r\n          @if (sectionIsReadOnly(tab())) {\r\n            <p class=\"flex items-center gap-sm rounded-md border border-light bg-lighter px-base py-sm fs-sm text-light\">\r\n              <ed-icon name=\"lock\" [size]=\"18\" />\r\n              These settings are managed by Edvak. Contact support to request changes.\r\n            </p>\r\n          }\r\n\r\n          <ng-container [ngTemplateOutlet]=\"settingsPanels\" />\r\n        </article>\r\n      </div>\r\n    } @else {\r\n      <div class=\"grid grid-cols-[240px_minmax(0,1fr)] max-[960px]:grid-cols-1 items-start gap-5\">\r\n        <nav\r\n          class=\"sticky top-4 flex max-h-[calc(100vh-120px)] max-[960px]:static max-[960px]:max-h-none max-[960px]:flex-row max-[960px]:flex-wrap flex-col gap-1 overflow-y-auto rounded-lg border border-base bg-white p-2 shadow-sm\"\r\n          aria-label=\"Settings sections\"\r\n        >\r\n          @for (t of tabs; track t.id) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"settings-page__nav-item flex w-full max-[960px]:w-auto max-[960px]:flex-1 cursor-pointer items-center justify-between gap-3 rounded-md border-none bg-transparent px-4 py-3 text-left text-sm font-medium leading-snug text-zinc-600\"\r\n              [class.settings-page__nav-item--active]=\"tab() === t.id\"\r\n              [class.settings-page__nav-item--disabled]=\"isTabDisabled(t.id)\"\r\n              [disabled]=\"isTabDisabled(t.id)\"\r\n              [attr.title]=\"isTabDisabled(t.id) ? 'This section is currently disabled' : null\"\r\n              (click)=\"setTab(t.id)\"\r\n            >\r\n              {{ t.label }}\r\n              @if (isTabDisabled(t.id)) {\r\n                <span class=\"ml-auto text-xs font-medium uppercase tracking-wide text-zinc-400\">Disabled</span>\r\n              }\r\n            </button>\r\n          }\r\n        </nav>\r\n\r\n        <article class=\"flex min-h-96 flex-col gap-md overflow-hidden rounded-lg border border-light bg-white p-base\">\r\n          <header class=\"flex items-start justify-between gap-base\">\r\n            <div class=\"min-w-0\">\r\n              <h5 class=\"m-0\">{{ sectionMeta().title }}</h5>\r\n              @if (tab() !== 'knowledge' && tab() !== 'general' && tab() !== 'phone' && tab() !== 'transcripts') {\r\n                <p class=\"m-0 mt-2xs max-w-2xl fs-sm text-light\">{{ sectionMeta().description }}</p>\r\n              }\r\n            </div>\r\n            @if (tab() === 'knowledge') {\r\n              <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"openTestCall()\">\r\n                <ed-icon slot=\"prefix\" name=\"phone_call\" [size]=\"16\" />\r\n                Test Call\r\n              </ed-button>\r\n            }\r\n          </header>\r\n\r\n          @if (sectionIsReadOnly(tab())) {\r\n            <p class=\"flex items-center gap-sm rounded-md border border-light bg-lighter px-base py-sm fs-sm text-light\">\r\n              <ed-icon name=\"lock\" [size]=\"18\" />\r\n              These settings are managed by Edvak. Contact support to request changes.\r\n            </p>\r\n          }\r\n\r\n          <ng-container [ngTemplateOutlet]=\"settingsPanels\" />\r\n        </article>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #settingsPanels>\r\n        @if (tab() === 'knowledge') {\r\n          <div class=\"flex w-full max-w-4xl flex-col gap-md\">\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <label><span required>What to say</span></label>\r\n              <textarea\r\n                class=\"form-textarea min-h-56\"\r\n                rows=\"10\"\r\n                [maxlength]=\"knowledgeMax\"\r\n                [ngModel]=\"whatToSay()\"\r\n                (ngModelChange)=\"updateKnowledgeField('whatToSay', $event)\"\r\n                placeholder=\"Hours, parking, payment options, arrival instructions, emergencies\u2026\"\r\n                autocomplete=\"off\"\r\n              ></textarea>\r\n              <span class=\"block text-right fs-xs text-light\">{{ whatToSay().length }}/{{ knowledgeMax }}</span>\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <label><span required>What not to say</span></label>\r\n              <textarea\r\n                class=\"form-textarea min-h-56\"\r\n                rows=\"10\"\r\n                [maxlength]=\"knowledgeMax\"\r\n                [ngModel]=\"whatNotToSay()\"\r\n                (ngModelChange)=\"updateKnowledgeField('whatNotToSay', $event)\"\r\n                placeholder=\"Clinical advice, unverified prices, PHI, promises the practice cannot keep\u2026\"\r\n                autocomplete=\"off\"\r\n              ></textarea>\r\n              <span class=\"block text-right fs-xs text-light\">{{ whatNotToSay().length }}/{{ knowledgeMax }}</span>\r\n            </div>\r\n          </div>\r\n        } @else if (tab() === 'general') {\r\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <div class=\"flex items-center justify-between gap-xs\">\r\n                <label class=\"m-0\">\r\n                  <span required>Name</span>\r\n                </label>\r\n                <ed-icon\r\n                  name=\"info\"\r\n                  [size]=\"16\"\r\n                  class=\"text-light\"\r\n                  title=\"How the AI introduces itself on calls\"\r\n                />\r\n              </div>\r\n              <input\r\n                class=\"form-input is-sm\"\r\n                type=\"text\"\r\n                [ngModel]=\"fieldValue('general', 'agentName')\"\r\n                (ngModelChange)=\"updateField('general', 'agentName', $event)\"\r\n                autocomplete=\"off\"\r\n              />\r\n            </div>\r\n\r\n            <div class=\"flex items-end gap-sm\">\r\n              <div class=\"flex min-w-0 flex-1 flex-col gap-xs\">\r\n                <label><span required>Voice</span></label>\r\n                <select\r\n                  class=\"form-select is-sm settings-page__select\"\r\n                  [ngModel]=\"selectedVoiceId()\"\r\n                  (ngModelChange)=\"onVoiceChange($event)\"\r\n                  autocomplete=\"off\"\r\n                >\r\n                  @for (v of voicePresets; track v.id) {\r\n                    <option [ngValue]=\"v.id\">{{ v.gender }} \u00B7 {{ v.label }}</option>\r\n                  }\r\n                </select>\r\n              </div>\r\n              <button\r\n                type=\"button\"\r\n                class=\"settings-page__voice-play inline-flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-md border border-base bg-white disabled:cursor-wait disabled:opacity-60\"\r\n                [disabled]=\"!selectedVoiceId() || voicePreviewBusy()\"\r\n                [attr.aria-label]=\"voicePreviewPlaying() ? 'Stop voice preview' : 'Play voice preview'\"\r\n                [title]=\"voicePreviewPlaying() ? 'Stop preview' : 'Play sample'\"\r\n                (click)=\"toggleVoicePreview()\"\r\n              >\r\n                <ed-icon [name]=\"voicePreviewPlaying() ? 'stop' : 'play_arrow'\" [size]=\"20\" />\r\n              </button>\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <label>Tone</label>\r\n              <div class=\"flex flex-wrap gap-xs\" role=\"radiogroup\" aria-label=\"Tone\">\r\n                @for (tone of toneOptions; track tone.value) {\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"settings-page__tone cursor-pointer rounded-full border border-transparent bg-lighter px-sm py-2xs fs-xs font-medium text-body\"\r\n                    [class.settings-page__tone--active]=\"selectedTone() === tone.value\"\r\n                    [class.font-semibold]=\"selectedTone() === tone.value\"\r\n                    [attr.aria-checked]=\"selectedTone() === tone.value\"\r\n                    role=\"radio\"\r\n                    (click)=\"setTone(tone.value)\"\r\n                  >\r\n                    {{ tone.label }}\r\n                  </button>\r\n                }\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <label><span required>Inbound Greetings</span></label>\r\n              <textarea\r\n                class=\"form-textarea min-h-24\"\r\n                rows=\"4\"\r\n                spellcheck=\"false\"\r\n                [maxlength]=\"welcomeMax\"\r\n                [placeholder]=\"welcomePlaceholder()\"\r\n                [ngModel]=\"welcomeMessage()\"\r\n                (ngModelChange)=\"updateWelcomeMessage($event)\"\r\n                autocomplete=\"off\"\r\n              ></textarea>\r\n              <span class=\"block text-right fs-xs text-light\">{{ welcomeMessage().length }}/{{ welcomeMax }}</span>\r\n              <div class=\"flex flex-wrap items-center gap-xs\">\r\n                <span class=\"fs-xs font-medium text-dark\">Variables:</span>\r\n                @for (v of greetingVariables; track v.key) {\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"settings-page__var-chip inline-flex h-5 cursor-pointer items-center rounded border border-base bg-white px-2xs fs-xs font-medium text-dark\"\r\n                    (click)=\"insertGreetingVariable(v.token)\"\r\n                    [title]=\"'Insert ' + v.token\"\r\n                  >\r\n                    {{ v.label }}\r\n                  </button>\r\n                }\r\n              </div>\r\n            </div>\r\n          </div>\r\n        } @else if (tab() === 'phone') {\r\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <div class=\"flex items-center justify-between gap-xs\">\r\n                <label class=\"m-0\"><span required>AI Answer Mode</span></label>\r\n                <ed-icon name=\"info\" [size]=\"16\" class=\"text-light\" title=\"When the AI picks up inbound calls\" />\r\n              </div>\r\n              <select\r\n                class=\"form-select is-sm\"\r\n                [ngModel]=\"fieldValue('phone', 'answerMode')\"\r\n                (ngModelChange)=\"updateField('phone', 'answerMode', $event)\"\r\n                autocomplete=\"off\"\r\n              >\r\n                @for (opt of answerModeOptions; track opt.value) {\r\n                  <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\r\n                }\r\n              </select>\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <label><span required>AI Phone Number</span></label>\r\n              <input\r\n                class=\"form-input is-sm\"\r\n                type=\"text\"\r\n                [disabled]=\"isFieldReadOnly('phone', 'mainNumber')\"\r\n                [ngModel]=\"fieldValue('phone', 'mainNumber')\"\r\n                (ngModelChange)=\"updateField('phone', 'mainNumber', $event)\"\r\n                autocomplete=\"off\"\r\n              />\r\n              <span class=\"fs-xs text-light\">Number patients dial for the AI receptionist. Locked (managed by platform).</span>\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <label><span required>Transfer Number</span></label>\r\n              <input\r\n                class=\"form-input is-sm\"\r\n                type=\"text\"\r\n                [disabled]=\"isFieldReadOnly('phone', 'transferNumber')\"\r\n                [ngModel]=\"fieldValue('phone', 'transferNumber')\"\r\n                (ngModelChange)=\"updateField('phone', 'transferNumber', $event)\"\r\n                autocomplete=\"off\"\r\n              />\r\n              <span class=\"fs-xs text-light\">Staff / front-desk handoff number. Locked.</span>\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <label><span required>Ringing Time Wait</span></label>\r\n              <select\r\n                class=\"form-select is-sm\"\r\n                [ngModel]=\"numberFieldAsString('phone', 'ringTimeout')\"\r\n                (ngModelChange)=\"selectNumberField('phone', 'ringTimeout', $event)\"\r\n                autocomplete=\"off\"\r\n              >\r\n                @for (opt of ringTimeoutOptions; track opt.value) {\r\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\r\n                }\r\n              </select>\r\n            </div>\r\n\r\n            <div class=\"flex items-center gap-sm rounded-md border border-base bg-white p-sm\">\r\n              <ed-icon name=\"event_available\" [size]=\"20\" class=\"shrink-0 text-primary\" />\r\n              <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\r\n                <span class=\"fs-sm text-dark\">Create Follow-up Task</span>\r\n                <span class=\"fs-xs text-light\">\r\n                  If no one answers in time, the agent auto-creates a high priority task.\r\n                </span>\r\n              </div>\r\n              <button\r\n                type=\"button\"\r\n                class=\"settings-page__switch shrink-0\"\r\n                [class.settings-page__switch--on]=\"!!fieldValue('phone', 'createFollowUpTask')\"\r\n                [attr.aria-pressed]=\"!!fieldValue('phone', 'createFollowUpTask')\"\r\n                aria-label=\"Create Follow-up Task\"\r\n                (click)=\"updateField('phone', 'createFollowUpTask', !fieldValue('phone', 'createFollowUpTask'))\"\r\n              >\r\n                <span class=\"settings-page__switch-thumb\"></span>\r\n              </button>\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <label><span required>Location Handled</span></label>\r\n              <div class=\"relative\" data-locations-dd (document:click)=\"onLocationsDocClick($event)\">\r\n                <div\r\n                  class=\"form-input flex h-auto w-full cursor-pointer items-center justify-between gap-xs py-2xs text-left\"\r\n                  role=\"combobox\"\r\n                  tabindex=\"0\"\r\n                  [class.opacity-55]=\"locations().length === 0\"\r\n                  [attr.aria-expanded]=\"locationsMenuOpen()\"\r\n                  [attr.aria-disabled]=\"locations().length === 0\"\r\n                  [attr.title]=\"locationSummary()\"\r\n                  aria-haspopup=\"listbox\"\r\n                  aria-label=\"Locations handled\"\r\n                  (click)=\"$event.stopPropagation(); locations().length && toggleLocationsMenu()\"\r\n                  (keydown.enter)=\"$event.preventDefault(); locations().length && toggleLocationsMenu()\"\r\n                  (keydown.space)=\"$event.preventDefault(); locations().length && toggleLocationsMenu()\"\r\n                >\r\n                  <span class=\"flex min-w-0 flex-1 flex-wrap items-center gap-2xs overflow-hidden\">\r\n                    @if (locations().length === 0) {\r\n                      <span class=\"fs-sm text-light\">No locations available.</span>\r\n                    } @else if (selectedLocations().length === 0) {\r\n                      <span class=\"fs-sm text-light\">Select locations</span>\r\n                    } @else {\r\n                      @for (loc of visibleSelectedLocations(); track loc.id) {\r\n                        <span class=\"inline-flex h-5 items-center gap-2xs rounded bg-primary-50 px-2xs text-primary\">\r\n                          <span class=\"fs-xs font-medium\">{{ loc.name }}</span>\r\n                          <button\r\n                            type=\"button\"\r\n                            class=\"inline-flex h-3 w-3 shrink-0 cursor-pointer items-center justify-center border-none bg-transparent p-0 text-primary\"\r\n                            [attr.aria-label]=\"'Remove ' + loc.name\"\r\n                            (click)=\"$event.stopPropagation(); toggleLocation(loc.id)\"\r\n                          >\r\n                            <ed-icon name=\"close\" [size]=\"12\" color=\"currentColor\" />\r\n                          </button>\r\n                        </span>\r\n                      }\r\n                      @if (hiddenLocationCount() > 0) {\r\n                        <span class=\"inline-flex h-5 items-center rounded bg-primary-50 px-2xs fs-xs font-medium text-primary\">\r\n                          +{{ hiddenLocationCount() }}\r\n                        </span>\r\n                      }\r\n                    }\r\n                  </span>\r\n                  <ed-icon name=\"expand_more\" [size]=\"16\" class=\"shrink-0 text-light\" />\r\n                </div>\r\n                @if (locationsMenuOpen()) {\r\n                  <ul\r\n                    class=\"settings-page__locations-menu absolute bottom-full z-50 m-0 mb-1 max-h-56 w-full list-none overflow-auto rounded-md border border-zinc-300 bg-white p-2xs shadow-lg\"\r\n                    role=\"listbox\"\r\n                    aria-multiselectable=\"true\"\r\n                  >\r\n                    @for (loc of locations(); track loc.id) {\r\n                      <li role=\"option\" [attr.aria-selected]=\"selectedLocationIds().includes(loc.id)\">\r\n                        <label class=\"flex cursor-pointer items-center gap-xs rounded px-xs py-2xs fs-sm text-dark hover:bg-lighter\">\r\n                          <input\r\n                            type=\"checkbox\"\r\n                            class=\"h-4 w-4 accent-blue-600\"\r\n                            [checked]=\"selectedLocationIds().includes(loc.id)\"\r\n                            (change)=\"toggleLocation(loc.id)\"\r\n                          />\r\n                          <span class=\"min-w-0 truncate\">{{ loc.name }}</span>\r\n                        </label>\r\n                      </li>\r\n                    }\r\n                  </ul>\r\n                }\r\n              </div>\r\n              @if (locations().length === 0) {\r\n                <p class=\"m-0 fs-sm text-light\">No locations available.</p>\r\n              }\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <label><span required>Max AI Call Duration</span></label>\r\n              <select\r\n                class=\"form-select is-sm\"\r\n                [ngModel]=\"numberFieldAsString('phone', 'maxCallDurationMin')\"\r\n                (ngModelChange)=\"selectNumberField('phone', 'maxCallDurationMin', $event)\"\r\n                autocomplete=\"off\"\r\n              >\r\n                @for (opt of maxCallDurationOptions; track opt.value) {\r\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\r\n                }\r\n              </select>\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <label><span required>Silence Timeout</span></label>\r\n              <select\r\n                class=\"form-select is-sm\"\r\n                [ngModel]=\"numberFieldAsString('phone', 'silenceTimeoutSec')\"\r\n                (ngModelChange)=\"selectNumberField('phone', 'silenceTimeoutSec', $event)\"\r\n                autocomplete=\"off\"\r\n              >\r\n                @for (opt of silenceTimeoutOptions; track opt.value) {\r\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\r\n                }\r\n              </select>\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <label><span required>After-Hours Behaviour</span></label>\r\n              <select\r\n                class=\"form-select is-sm\"\r\n                [ngModel]=\"fieldValue('phone', 'afterHoursBehavior')\"\r\n                (ngModelChange)=\"updateField('phone', 'afterHoursBehavior', $event)\"\r\n                autocomplete=\"off\"\r\n              >\r\n                @for (opt of afterHoursOptions; track opt.value) {\r\n                  <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\r\n                }\r\n              </select>\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-md border-t border-light pt-md\">\r\n              <div class=\"settings-page__booking-mode flex flex-col gap-sm\">\r\n                <div class=\"flex flex-col gap-2xs\">\r\n                  <span class=\"fs-sm font-medium text-dark\">Appointment booking mode</span>\r\n                  <span class=\"fs-xs text-light\">\r\n                    Controls how the voice agent writes bookings to the EHR for this practice.\r\n                    Applied when you click Save changes.\r\n                  </span>\r\n                </div>\r\n\r\n                @if (bookingModeLoading()) {\r\n                  <p class=\"m-0 fs-sm text-light\">Loading booking mode\u2026</p>\r\n                } @else {\r\n                  <div class=\"flex flex-col gap-xs\" role=\"radiogroup\" aria-label=\"Appointment booking mode\">\r\n                    @for (opt of bookingModeOptions(); track opt.value) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"settings-page__booking-option flex w-full cursor-pointer items-start gap-sm rounded-md border border-base bg-white p-sm text-left\"\r\n                        [class.settings-page__booking-option--active]=\"bookingMode() === opt.value\"\r\n                        [disabled]=\"saving()\"\r\n                        role=\"radio\"\r\n                        [attr.aria-checked]=\"bookingMode() === opt.value\"\r\n                        (click)=\"selectBookingMode(opt.value)\"\r\n                      >\r\n                        <span\r\n                          class=\"settings-page__booking-radio mt-2xs flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-zinc-300\"\r\n                          [class.settings-page__booking-radio--on]=\"bookingMode() === opt.value\"\r\n                          aria-hidden=\"true\"\r\n                        ></span>\r\n                        <span class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\r\n                          <span class=\"fs-sm font-medium text-dark\">{{ opt.label }}</span>\r\n                          @if (opt.description) {\r\n                            <span class=\"fs-xs text-light\">{{ opt.description }}</span>\r\n                          }\r\n                        </span>\r\n                      </button>\r\n                    }\r\n                  </div>\r\n                }\r\n\r\n                @if (bookingModeError(); as err) {\r\n                  <p class=\"m-0 rounded-md border border-red-200 bg-red-50 px-sm py-xs fs-sm text-red-600\" role=\"alert\">\r\n                    {{ err }}\r\n                  </p>\r\n                }\r\n              </div>\r\n\r\n              <div class=\"flex flex-col gap-xs\">\r\n                <label>Minimum lead time (hours)</label>\r\n                <input\r\n                  class=\"form-input is-sm\"\r\n                  type=\"number\"\r\n                  min=\"0\"\r\n                  [ngModel]=\"fieldValue('scheduling', 'leadTimeHours')\"\r\n                  (ngModelChange)=\"updateField('scheduling', 'leadTimeHours', +$event)\"\r\n                  autocomplete=\"off\"\r\n                />\r\n                <span class=\"fs-xs text-light\">Earliest bookable slot from now.</span>\r\n              </div>\r\n\r\n              <div class=\"flex items-center gap-sm rounded-md border border-base bg-white p-sm\">\r\n                  <ed-icon name=\"calendar_month\" [size]=\"20\" class=\"shrink-0 text-primary\" />\r\n                <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\r\n                  <span class=\"fs-sm text-dark\">Allow same-day booking</span>\r\n                  <span class=\"fs-xs text-light\">\r\n                    Let patients book appointments today.\r\n                  </span>\r\n                </div>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"settings-page__switch shrink-0\"\r\n                  [class.settings-page__switch--on]=\"!!fieldValue('scheduling', 'allowSameDay')\"\r\n                  [attr.aria-pressed]=\"!!fieldValue('scheduling', 'allowSameDay')\"\r\n                  aria-label=\"Allow same-day booking\"\r\n                  (click)=\"updateField('scheduling', 'allowSameDay', !fieldValue('scheduling', 'allowSameDay'))\"\r\n                >\r\n                  <span class=\"settings-page__switch-thumb\"></span>\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        } @else if (tab() === 'transcripts') {\r\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <label><span required>Keep Call Recordings</span></label>\r\n              <select\r\n                class=\"form-select is-sm\"\r\n                [ngModel]=\"numberFieldAsString('transcripts', 'recordingRetainDays')\"\r\n                (ngModelChange)=\"selectNumberField('transcripts', 'recordingRetainDays', $event)\"\r\n                autocomplete=\"off\"\r\n              >\r\n                @for (opt of retentionOptions; track opt.value) {\r\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\r\n                }\r\n              </select>\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <label><span required>Keep Transcripts</span></label>\r\n              <select\r\n                class=\"form-select is-sm\"\r\n                [ngModel]=\"numberFieldAsString('transcripts', 'transcriptRetainDays')\"\r\n                (ngModelChange)=\"selectNumberField('transcripts', 'transcriptRetainDays', $event)\"\r\n                autocomplete=\"off\"\r\n              >\r\n                @for (opt of retentionOptions; track opt.value) {\r\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\r\n                }\r\n              </select>\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <div class=\"flex items-center gap-xs\">\r\n                <label class=\"m-0\">Disclosure Warning</label>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"settings-page__switch shrink-0\"\r\n                  [class.settings-page__switch--on]=\"disclosureEnabled()\"\r\n                  [attr.aria-pressed]=\"disclosureEnabled()\"\r\n                  aria-label=\"Disclosure Warning\"\r\n                  (click)=\"setDisclosureEnabled(!disclosureEnabled())\"\r\n                >\r\n                  <span class=\"settings-page__switch-thumb\"></span>\r\n                </button>\r\n              </div>\r\n              @if (disclosureEnabled()) {\r\n                <textarea\r\n                  class=\"form-textarea min-h-24\"\r\n                  rows=\"4\"\r\n                  [maxlength]=\"disclosureMax\"\r\n                  [ngModel]=\"disclosureText()\"\r\n                  (ngModelChange)=\"updateDisclosureText($event)\"\r\n                  autocomplete=\"off\"\r\n                ></textarea>\r\n              }\r\n            </div>\r\n          </div>\r\n        } @else if (tab() === 'advanced') {\r\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\r\n            <div class=\"flex items-center gap-sm rounded-md border border-base bg-white p-sm\">\r\n              <span class=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary-50 text-primary\" aria-hidden=\"true\">\r\n                <ed-icon name=\"sparkle\" [size]=\"20\" />\r\n              </span>\r\n              <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\r\n                <span class=\"fs-sm text-dark\">\r\n                  @if (toggling()) {\r\n                    Updating\u2026\r\n                  } @else if (online() === true) {\r\n                    Agent online\r\n                  } @else if (online() === false) {\r\n                    Agent offline\r\n                  } @else {\r\n                    Status unknown\r\n                  }\r\n                </span>\r\n                <span class=\"fs-xs text-light\">\r\n                  @if (online() === true) {\r\n                    AI receptionist is answering inbound calls.\r\n                  } @else if (online() === false) {\r\n                    AI is offline \u2014 calls go to the front desk.\r\n                  } @else {\r\n                    Checking agent status\u2026\r\n                  }\r\n                </span>\r\n              </div>\r\n              <button\r\n                type=\"button\"\r\n                class=\"settings-page__switch shrink-0\"\r\n                [class.settings-page__switch--on]=\"online() === true\"\r\n                [disabled]=\"agentSwitchDisabled()\"\r\n                [attr.aria-pressed]=\"online() === true\"\r\n                aria-label=\"Agent online\"\r\n                (click)=\"onAgentToggleClick()\"\r\n              >\r\n                <span class=\"settings-page__switch-thumb\"></span>\r\n              </button>\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <label>Model version</label>\r\n              <input\r\n                class=\"form-input is-sm\"\r\n                type=\"text\"\r\n                [ngModel]=\"fieldValue('advanced', 'modelVersion')\"\r\n                disabled\r\n                autocomplete=\"off\"\r\n              />\r\n              <span class=\"fs-xs text-light\">Set by Edvak support.</span>\r\n            </div>\r\n\r\n            <div class=\"flex items-center gap-sm rounded-md border border-base bg-lighter px-base py-sm opacity-90\">\r\n              <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\r\n                <span class=\"fs-sm text-dark\">Debug mode</span>\r\n                <span class=\"fs-xs text-light\">Verbose logging \u2014 contact Edvak to change.</span>\r\n              </div>\r\n              <button\r\n                type=\"button\"\r\n                class=\"settings-page__switch shrink-0\"\r\n                [class.settings-page__switch--on]=\"!!fieldValue('advanced', 'debugMode')\"\r\n                disabled\r\n                [attr.aria-pressed]=\"!!fieldValue('advanced', 'debugMode')\"\r\n                aria-label=\"Debug mode\"\r\n              >\r\n                <span class=\"settings-page__switch-thumb\"></span>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        } @else {\r\n          <div class=\"grid grid-cols-2 gap-x-md gap-y-md below-md:grid-cols-1\">\r\n            @for (field of fieldsForTab(); track field.key) {\r\n              @if (field.type === 'boolean') {\r\n                <label\r\n                  class=\"col-span-full flex cursor-pointer items-center justify-between gap-base rounded-md border border-base bg-lighter px-base py-sm\"\r\n                  [class.cursor-default]=\"fieldIsReadOnly(tab(), field.key)\"\r\n                  [class.opacity-90]=\"fieldIsReadOnly(tab(), field.key)\"\r\n                >\r\n                  <div class=\"flex min-w-0 flex-col gap-2xs\">\r\n                    <span class=\"fs-sm text-dark\">{{ field.label }}</span>\r\n                    @if (field.description) {\r\n                      <span\r\n                        class=\"fs-sm text-light\"\r\n                        [class.text-lighter]=\"fieldIsReadOnly(tab(), field.key)\"\r\n                      >{{ field.description }}</span>\r\n                    }\r\n                  </div>\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    class=\"h-4 w-4 shrink-0 accent-blue-600 disabled:cursor-not-allowed\"\r\n                    [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\r\n                    [ngModel]=\"fieldValue(tab(), field.key)\"\r\n                    (ngModelChange)=\"updateField(tab(), field.key, $event)\"\r\n                    autocomplete=\"off\"\r\n                  />\r\n                </label>\r\n              } @else if (field.type === 'select' && field.options?.length) {\r\n                <div class=\"flex flex-col gap-xs\">\r\n                  <label>{{ field.label }}</label>\r\n                  @if (field.description) {\r\n                    <span\r\n                      class=\"fs-sm text-light\"\r\n                      [class.text-lighter]=\"fieldIsReadOnly(tab(), field.key)\"\r\n                    >{{ field.description }}</span>\r\n                  }\r\n                  <select\r\n                    class=\"form-select is-sm\"\r\n                    [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\r\n                    [ngModel]=\"fieldValue(tab(), field.key)\"\r\n                    (ngModelChange)=\"updateField(tab(), field.key, $event)\"\r\n                    autocomplete=\"off\"\r\n                  >\r\n                    @for (opt of field.options; track opt.value) {\r\n                      <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\r\n                    }\r\n                  </select>\r\n                </div>\r\n              } @else {\r\n                <div class=\"flex flex-col gap-xs\">\r\n                  <label>{{ field.label }}</label>\r\n                  @if (field.description) {\r\n                    <span\r\n                      class=\"fs-sm text-light\"\r\n                      [class.text-lighter]=\"fieldIsReadOnly(tab(), field.key)\"\r\n                    >{{ field.description }}</span>\r\n                  }\r\n                  @if (field.type === 'number') {\r\n                    <input\r\n                      class=\"form-input is-sm\"\r\n                      type=\"number\"\r\n                      [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\r\n                      [ngModel]=\"fieldValue(tab(), field.key)\"\r\n                      (ngModelChange)=\"updateField(tab(), field.key, +$event)\"\r\n                      autocomplete=\"off\"\r\n                    />\r\n                  } @else {\r\n                    <input\r\n                      class=\"form-input is-sm\"\r\n                      type=\"text\"\r\n                      [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\r\n                      [ngModel]=\"fieldValue(tab(), field.key)\"\r\n                      (ngModelChange)=\"updateField(tab(), field.key, $event)\"\r\n                      autocomplete=\"off\"\r\n                    />\r\n                  }\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        }\r\n</ng-template>\r\n\r\n<eds-knowledge-test-modal\r\n  [open]=\"knowledgeTestOpen()\"\r\n  [whatToSay]=\"whatToSay()\"\r\n  [whatNotToSay]=\"whatNotToSay()\"\r\n  [voiceId]=\"selectedVoiceId()\"\r\n  (closed)=\"closeTestCall()\"\r\n/>\r\n\r\n@if (confirmOffOpen()) {\r\n  <app-modal\r\n    title=\"Turn off AI receptionist?\"\r\n    subtitle=\"Inbound callers will be transferred to the front desk instead of the AI.\"\r\n    maxWidth=\"480px\"\r\n    (closed)=\"cancelConfirmOff()\"\r\n  >\r\n    <p class=\"mb-4 m-0 text-sm leading-normal text-zinc-500\">While offline, the AI will not answer calls. Callers are routed to the human receptionist.</p>\r\n    <div class=\"flex justify-end gap-2\">\r\n      <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"cancelConfirmOff()\">Cancel</ed-button>\r\n      <ed-button variant=\"danger\" fill size=\"sm\" [disabled]=\"toggling()\" (click$)=\"confirmTurnOff()\">\r\n        Turn off AI receptionist\r\n      </ed-button>\r\n    </div>\r\n  </app-modal>\r\n}\r\n", styles: [":host{display:block}:host.settings-page-host--drawer{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.settings-page__layout{grid-template-columns:240px minmax(0,1fr)}.settings-page__nav-item:hover{background:var(--eds-surface-l1, #f7f9fa);color:var(--eds-text-primary, #41464c)}.settings-page__nav-item--active{background:var(--eds-color-primary-light, #eaf1fe);color:var(--eds-text-brand, #2162f0)}.settings-page__nav-item--disabled,.settings-page__nav-item:disabled{opacity:.45;cursor:not-allowed;color:var(--eds-text-tertiary, #767676)}.settings-page__nav-item--disabled:hover,.settings-page__nav-item:disabled:hover{background:none;color:var(--eds-text-tertiary, #767676)}.settings-page__select{min-height:2.25rem;background:#fff;border:1px solid #c5c7d0;color:#1f2328}.settings-page__locations-menu{box-shadow:0 8px 24px #0f172a29}.settings-page__voice-play{color:var(--eds-text-primary, #41464c)}.settings-page__voice-play:hover:not(:disabled){border-color:var(--eds-brand-600, #2162f0);color:var(--eds-brand-600, #2162f0)}.settings-page__tone--active{background:var(--eds-surface-l0, #fff);border-color:var(--eds-brand-600, #2162f0);color:var(--eds-brand-600, #2162f0)}.settings-page__var-chip:hover{border-color:var(--eds-brand-300, #94c5f9);color:var(--eds-brand-600, #2162f0)}.settings-page__switch{width:44px;height:26px;border-radius:999px;border:none;background:var(--eds-gray-300, #cbd5e1);padding:3px;cursor:pointer;transition:background .15s ease}.settings-page__switch--on{background:var(--eds-brand-600, #2162f0)}.settings-page__switch:disabled{opacity:.55;cursor:not-allowed}.settings-page__switch-thumb{display:block;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0f172a33;transition:transform .15s ease}.settings-page__switch--on .settings-page__switch-thumb{transform:translate(18px)}.settings-page__booking-option:hover:not(:disabled){border-color:#94c5f9;background:#f8fbff}.settings-page__booking-option--active{border-color:var(--eds-brand-600, #2162f0);background:var(--eds-color-primary-light, #eaf1fe)}.settings-page__booking-option:disabled{opacity:.7;cursor:wait}.settings-page__booking-radio--on{border-color:var(--eds-brand-600, #2162f0);background:var(--eds-brand-600, #2162f0);box-shadow:inset 0 0 0 3px #fff}.form-input:disabled,.form-select:disabled{color:var(--eds-color-text-muted, #64748b);background:var(--eds-color-surface-alt, #f1f5f9);border-color:var(--eds-color-border, #e2e8f0);cursor:not-allowed;opacity:1}@media(max-width:960px){.settings-page__layout{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ed-icon", inputs: ["name", "size", "color", "cssClass", "decorative", "ariaHidden", "ariaLabel", "title", "desc", "focusable", "tabIndex"] }, { 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: KnowledgeTestModalComponent, selector: "eds-knowledge-test-modal", inputs: ["open", "whatToSay", "whatNotToSay", "voiceId"], outputs: ["closed"] }, { kind: "component", type: ModalComponent, selector: "app-modal", inputs: ["title", "subtitle", "maxWidth"], outputs: ["closed"] }, { 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: SettingsPageComponent, decorators: [{
             type: Component,
@@ -5687,7 +5687,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         EdSkeletonComponent,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.settings-page-host--drawer]': 'presentation() === "drawer"',
-                    }, template: "<div\n  class=\"settings-page\"\n  [class.p-base]=\"presentation() === 'page'\"\n  [class.bg-lighter]=\"presentation() === 'page'\"\n  [class.min-h-full]=\"presentation() === 'page'\"\n  [class.h-full]=\"presentation() === 'page'\"\n  [class.min-h-0]=\"presentation() === 'page'\"\n  [class.overflow-auto]=\"presentation() === 'page'\"\n  [class.flex]=\"presentation() === 'drawer'\"\n  [class.h-full]=\"presentation() === 'drawer'\"\n  [class.min-h-0]=\"presentation() === 'drawer'\"\n  [class.flex-col]=\"presentation() === 'drawer'\"\n>\n  @if (presentation() === 'page') {\n    <header class=\"mb-6 flex items-start justify-between gap-4\">\n      <div>\n        <h4>Agent settings</h4>\n        <p class=\"mt-2 text-base leading-normal text-zinc-500\">Configure AI receptionist behavior and safety</p>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-3\">\n        @if (saved()) {\n          <span class=\"text-sm font-medium text-green-500\">Saved</span>\n        }\n        <ed-button variant=\"primary\" fill size=\"sm\" [disabled]=\"saving()\" (click$)=\"save()\">\n          <ed-icon slot=\"prefix\" name=\"save\" [size]=\"16\" />\n          {{ saving() ? 'Saving\u2026' : 'Save changes' }}\n        </ed-button>\n      </div>\n    </header>\n  }\n\n  @if (loading()) {\n    @if (presentation() === 'drawer') {\n      <div class=\"flex min-h-0 flex-1\" aria-busy=\"true\">\n        <nav class=\"w-[220px] h-full shrink-0 overflow-y-auto p-base bg-lighter-2\" aria-label=\"Settings sections\">\n          <ul role=\"presentation\">\n            @for (_ of navSkeletonRows; track _) {\n              <li class=\"mb-1\">\n                <ed-skeleton class=\"h-8 w-full !rounded-md\"></ed-skeleton>\n              </li>\n            }\n          </ul>\n        </nav>\n        <article class=\"flex min-h-0 min-w-0 flex-1 flex-col gap-md overflow-y-auto bg-white p-base\">\n          <header class=\"grid gap-2xs\">\n            <ed-skeleton class=\"h-5 w-40\"></ed-skeleton>\n            <ed-skeleton class=\"h-3 w-72\"></ed-skeleton>\n          </header>\n          @for (_ of fieldSkeletonRows; track _) {\n            <div class=\"grid gap-2xs\">\n              <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\n              <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\n            </div>\n          }\n        </article>\n      </div>\n    } @else {\n      <div\n        class=\"grid grid-cols-[240px_minmax(0,1fr)] max-[960px]:grid-cols-1 items-start gap-5\"\n        aria-busy=\"true\"\n      >\n        <nav class=\"flex flex-col gap-1 rounded-lg border border-base bg-white p-2 shadow-sm\" aria-label=\"Settings sections\">\n          @for (_ of navSkeletonRows; track _) {\n            <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\n          }\n        </nav>\n        <article class=\"flex min-h-96 flex-col gap-md overflow-hidden rounded-lg border border-light bg-white p-base\">\n          <header class=\"grid gap-2xs\">\n            <ed-skeleton class=\"h-5 w-40\"></ed-skeleton>\n            <ed-skeleton class=\"h-3 w-72\"></ed-skeleton>\n          </header>\n          @for (_ of fieldSkeletonRows; track _) {\n            <div class=\"grid gap-2xs\">\n              <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\n              <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\n            </div>\n          }\n        </article>\n      </div>\n    }\n  } @else if (settings()) {\n    @if (presentation() === 'drawer') {\n      <div class=\"flex min-h-0 flex-1\">\n        <nav class=\"w-[220px] h-full shrink-0 overflow-y-auto p-base bg-lighter-2\" aria-label=\"Settings sections\">\n          <ul role=\"tablist\" aria-label=\"Settings sections\">\n            @for (t of tabs; track t.id) {\n              <li\n                role=\"presentation\"\n                [class.cursor-pointer]=\"!isTabDisabled(t.id)\"\n                [class.cursor-not-allowed]=\"isTabDisabled(t.id)\"\n              >\n                <div\n                  class=\"kpi-menu\"\n                  role=\"tab\"\n                  [attr.id]=\"'agent-settings-tab-' + t.id\"\n                  [attr.aria-selected]=\"tab() === t.id\"\n                  [attr.aria-disabled]=\"isTabDisabled(t.id)\"\n                  [attr.tabindex]=\"tab() === t.id ? 0 : -1\"\n                  [attr.title]=\"isTabDisabled(t.id) ? 'This section is currently disabled' : null\"\n                  [class.kpi-menu-active]=\"tab() === t.id\"\n                  [class.opacity-45]=\"isTabDisabled(t.id)\"\n                  (click)=\"setTab(t.id)\"\n                  (keydown.enter)=\"setTab(t.id)\"\n                  (keydown.space)=\"$event.preventDefault(); setTab(t.id)\"\n                >\n                  <div class=\"flex items-center gap-xs w-full\">\n                    <span class=\"whitespace-nowrap flex-1 truncate\">{{ t.label }}</span>\n                    @if (isTabDisabled(t.id)) {\n                      <span class=\"shrink-0 fs-2xs font-medium uppercase tracking-wide text-lighter\">Off</span>\n                    }\n                  </div>\n                </div>\n              </li>\n            }\n          </ul>\n        </nav>\n\n        <article\n          class=\"flex min-h-0 min-w-0 flex-1 flex-col gap-md bg-white p-base\"\n          [class.overflow-y-auto]=\"!locationsMenuOpen()\"\n          [class.overflow-visible]=\"locationsMenuOpen()\"\n        >\n          <header class=\"flex shrink-0 items-start justify-between gap-base\">\n            <div class=\"min-w-0\">\n              <h5 class=\"m-0\">{{ sectionMeta().title }}</h5>\n              @if (tab() !== 'knowledge' && tab() !== 'general' && tab() !== 'phone' && tab() !== 'transcripts') {\n                <p class=\"m-0 mt-2xs max-w-2xl fs-sm text-light\">{{ sectionMeta().description }}</p>\n              }\n            </div>\n            @if (tab() === 'knowledge') {\n              <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"openTestCall()\">\n                <ed-icon slot=\"prefix\" name=\"phone_call\" [size]=\"16\" />\n                Test Call\n              </ed-button>\n            }\n          </header>\n\n          @if (sectionIsReadOnly(tab())) {\n            <p class=\"flex items-center gap-sm rounded-md border border-light bg-lighter px-base py-sm fs-sm text-light\">\n              <ed-icon name=\"lock\" [size]=\"18\" />\n              These settings are managed by Edvak. Contact support to request changes.\n            </p>\n          }\n\n          <ng-container [ngTemplateOutlet]=\"settingsPanels\" />\n        </article>\n      </div>\n    } @else {\n      <div class=\"grid grid-cols-[240px_minmax(0,1fr)] max-[960px]:grid-cols-1 items-start gap-5\">\n        <nav\n          class=\"sticky top-4 flex max-h-[calc(100vh-120px)] max-[960px]:static max-[960px]:max-h-none max-[960px]:flex-row max-[960px]:flex-wrap flex-col gap-1 overflow-y-auto rounded-lg border border-base bg-white p-2 shadow-sm\"\n          aria-label=\"Settings sections\"\n        >\n          @for (t of tabs; track t.id) {\n            <button\n              type=\"button\"\n              class=\"settings-page__nav-item flex w-full max-[960px]:w-auto max-[960px]:flex-1 cursor-pointer items-center justify-between gap-3 rounded-md border-none bg-transparent px-4 py-3 text-left text-sm font-medium leading-snug text-zinc-600\"\n              [class.settings-page__nav-item--active]=\"tab() === t.id\"\n              [class.settings-page__nav-item--disabled]=\"isTabDisabled(t.id)\"\n              [disabled]=\"isTabDisabled(t.id)\"\n              [attr.title]=\"isTabDisabled(t.id) ? 'This section is currently disabled' : null\"\n              (click)=\"setTab(t.id)\"\n            >\n              {{ t.label }}\n              @if (isTabDisabled(t.id)) {\n                <span class=\"ml-auto text-xs font-medium uppercase tracking-wide text-zinc-400\">Disabled</span>\n              }\n            </button>\n          }\n        </nav>\n\n        <article class=\"flex min-h-96 flex-col gap-md overflow-hidden rounded-lg border border-light bg-white p-base\">\n          <header class=\"flex items-start justify-between gap-base\">\n            <div class=\"min-w-0\">\n              <h5 class=\"m-0\">{{ sectionMeta().title }}</h5>\n              @if (tab() !== 'knowledge' && tab() !== 'general' && tab() !== 'phone' && tab() !== 'transcripts') {\n                <p class=\"m-0 mt-2xs max-w-2xl fs-sm text-light\">{{ sectionMeta().description }}</p>\n              }\n            </div>\n            @if (tab() === 'knowledge') {\n              <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"openTestCall()\">\n                <ed-icon slot=\"prefix\" name=\"phone_call\" [size]=\"16\" />\n                Test Call\n              </ed-button>\n            }\n          </header>\n\n          @if (sectionIsReadOnly(tab())) {\n            <p class=\"flex items-center gap-sm rounded-md border border-light bg-lighter px-base py-sm fs-sm text-light\">\n              <ed-icon name=\"lock\" [size]=\"18\" />\n              These settings are managed by Edvak. Contact support to request changes.\n            </p>\n          }\n\n          <ng-container [ngTemplateOutlet]=\"settingsPanels\" />\n        </article>\n      </div>\n    }\n  }\n</div>\n\n<ng-template #settingsPanels>\n        @if (tab() === 'knowledge') {\n          <div class=\"flex w-full max-w-4xl flex-col gap-md\">\n            <div class=\"flex flex-col gap-xs\">\n              <label>What to say<span required></span></label>\n              <textarea\n                class=\"form-textarea min-h-56\"\n                rows=\"10\"\n                [maxlength]=\"knowledgeMax\"\n                [ngModel]=\"whatToSay()\"\n                (ngModelChange)=\"updateKnowledgeField('whatToSay', $event)\"\n                placeholder=\"Hours, parking, payment options, arrival instructions, emergencies\u2026\"\n                autocomplete=\"off\"\n              ></textarea>\n              <span class=\"block text-right fs-xs text-light\">{{ whatToSay().length }}/{{ knowledgeMax }}</span>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>What not to say<span required></span></label>\n              <textarea\n                class=\"form-textarea min-h-56\"\n                rows=\"10\"\n                [maxlength]=\"knowledgeMax\"\n                [ngModel]=\"whatNotToSay()\"\n                (ngModelChange)=\"updateKnowledgeField('whatNotToSay', $event)\"\n                placeholder=\"Clinical advice, unverified prices, PHI, promises the practice cannot keep\u2026\"\n                autocomplete=\"off\"\n              ></textarea>\n              <span class=\"block text-right fs-xs text-light\">{{ whatNotToSay().length }}/{{ knowledgeMax }}</span>\n            </div>\n          </div>\n        } @else if (tab() === 'general') {\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\n            <div class=\"flex flex-col gap-xs\">\n              <div class=\"flex items-center justify-between gap-xs\">\n                <label class=\"m-0\">\n                  Name<span required></span>\n                </label>\n                <ed-icon\n                  name=\"info\"\n                  [size]=\"16\"\n                  class=\"text-light\"\n                  title=\"How the AI introduces itself on calls\"\n                />\n              </div>\n              <input\n                class=\"form-input is-sm\"\n                type=\"text\"\n                [ngModel]=\"fieldValue('general', 'agentName')\"\n                (ngModelChange)=\"updateField('general', 'agentName', $event)\"\n                autocomplete=\"off\"\n              />\n            </div>\n\n            <div class=\"flex items-end gap-sm\">\n              <div class=\"flex min-w-0 flex-1 flex-col gap-xs\">\n                <label>Voice<span required></span></label>\n                <select\n                  class=\"form-select is-sm settings-page__select\"\n                  [ngModel]=\"selectedVoiceId()\"\n                  (ngModelChange)=\"onVoiceChange($event)\"\n                  autocomplete=\"off\"\n                >\n                  @for (v of voicePresets; track v.id) {\n                    <option [ngValue]=\"v.id\">{{ v.gender }} \u00B7 {{ v.label }}</option>\n                  }\n                </select>\n              </div>\n              <button\n                type=\"button\"\n                class=\"settings-page__voice-play inline-flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-md border border-base bg-white disabled:cursor-wait disabled:opacity-60\"\n                [disabled]=\"!selectedVoiceId() || voicePreviewBusy()\"\n                [attr.aria-label]=\"voicePreviewPlaying() ? 'Stop voice preview' : 'Play voice preview'\"\n                [title]=\"voicePreviewPlaying() ? 'Stop preview' : 'Play sample'\"\n                (click)=\"toggleVoicePreview()\"\n              >\n                <ed-icon [name]=\"voicePreviewPlaying() ? 'stop' : 'play_arrow'\" [size]=\"20\" />\n              </button>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Tone</label>\n              <div class=\"flex flex-wrap gap-xs\" role=\"radiogroup\" aria-label=\"Tone\">\n                @for (tone of toneOptions; track tone.value) {\n                  <button\n                    type=\"button\"\n                    class=\"settings-page__tone cursor-pointer rounded-full border border-transparent bg-lighter px-sm py-2xs fs-xs font-medium text-body\"\n                    [class.settings-page__tone--active]=\"selectedTone() === tone.value\"\n                    [class.font-semibold]=\"selectedTone() === tone.value\"\n                    [attr.aria-checked]=\"selectedTone() === tone.value\"\n                    role=\"radio\"\n                    (click)=\"setTone(tone.value)\"\n                  >\n                    {{ tone.label }}\n                  </button>\n                }\n              </div>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Inbound Greetings<span required></span></label>\n              <textarea\n                class=\"form-textarea min-h-24\"\n                rows=\"4\"\n                spellcheck=\"false\"\n                [maxlength]=\"welcomeMax\"\n                [placeholder]=\"welcomePlaceholder()\"\n                [ngModel]=\"welcomeMessage()\"\n                (ngModelChange)=\"updateWelcomeMessage($event)\"\n                autocomplete=\"off\"\n              ></textarea>\n              <span class=\"block text-right fs-xs text-light\">{{ welcomeMessage().length }}/{{ welcomeMax }}</span>\n              <div class=\"flex flex-wrap items-center gap-xs\">\n                <span class=\"fs-xs font-medium text-dark\">Variables:</span>\n                @for (v of greetingVariables; track v.key) {\n                  <button\n                    type=\"button\"\n                    class=\"settings-page__var-chip inline-flex h-5 cursor-pointer items-center rounded border border-base bg-white px-2xs fs-xs font-medium text-dark\"\n                    (click)=\"insertGreetingVariable(v.token)\"\n                    [title]=\"'Insert ' + v.token\"\n                  >\n                    {{ v.label }}\n                  </button>\n                }\n              </div>\n            </div>\n          </div>\n        } @else if (tab() === 'phone') {\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\n            <div class=\"flex flex-col gap-xs\">\n              <div class=\"flex items-center justify-between gap-xs\">\n                <label class=\"m-0\">AI Answer Mode<span required></span></label>\n                <ed-icon name=\"info\" [size]=\"16\" class=\"text-light\" title=\"When the AI picks up inbound calls\" />\n              </div>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"fieldValue('phone', 'answerMode')\"\n                (ngModelChange)=\"updateField('phone', 'answerMode', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of answerModeOptions; track opt.value) {\n                  <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>AI Phone Number<span required></span></label>\n              <input\n                class=\"form-input is-sm\"\n                type=\"text\"\n                [disabled]=\"isFieldReadOnly('phone', 'mainNumber')\"\n                [ngModel]=\"fieldValue('phone', 'mainNumber')\"\n                (ngModelChange)=\"updateField('phone', 'mainNumber', $event)\"\n                autocomplete=\"off\"\n              />\n              <span class=\"fs-xs text-light\">Number patients dial for the AI receptionist. Locked (managed by platform).</span>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Transfer Number<span required></span></label>\n              <input\n                class=\"form-input is-sm\"\n                type=\"text\"\n                [disabled]=\"isFieldReadOnly('phone', 'transferNumber')\"\n                [ngModel]=\"fieldValue('phone', 'transferNumber')\"\n                (ngModelChange)=\"updateField('phone', 'transferNumber', $event)\"\n                autocomplete=\"off\"\n              />\n              <span class=\"fs-xs text-light\">Staff / front-desk handoff number. Locked.</span>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Ringing Time Wait<span required></span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('phone', 'ringTimeout')\"\n                (ngModelChange)=\"selectNumberField('phone', 'ringTimeout', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of ringTimeoutOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex items-center gap-sm rounded-md border border-base bg-white p-sm\">\n              <ed-icon name=\"event_available\" [size]=\"20\" class=\"shrink-0 text-primary\" />\n              <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                <span class=\"fs-sm text-dark\">Create Follow-up Task</span>\n                <span class=\"fs-xs text-light\">\n                  If no one answers in time, the agent auto-creates a high priority task.\n                </span>\n              </div>\n              <button\n                type=\"button\"\n                class=\"settings-page__switch shrink-0\"\n                [class.settings-page__switch--on]=\"!!fieldValue('phone', 'createFollowUpTask')\"\n                [attr.aria-pressed]=\"!!fieldValue('phone', 'createFollowUpTask')\"\n                aria-label=\"Create Follow-up Task\"\n                (click)=\"updateField('phone', 'createFollowUpTask', !fieldValue('phone', 'createFollowUpTask'))\"\n              >\n                <span class=\"settings-page__switch-thumb\"></span>\n              </button>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Location Handled<span required></span></label>\n              <div class=\"relative\" data-locations-dd (document:click)=\"onLocationsDocClick($event)\">\n                <div\n                  class=\"form-input flex h-auto w-full cursor-pointer items-center justify-between gap-xs py-2xs text-left\"\n                  role=\"combobox\"\n                  tabindex=\"0\"\n                  [class.opacity-55]=\"locations().length === 0\"\n                  [attr.aria-expanded]=\"locationsMenuOpen()\"\n                  [attr.aria-disabled]=\"locations().length === 0\"\n                  [attr.title]=\"locationSummary()\"\n                  aria-haspopup=\"listbox\"\n                  aria-label=\"Locations handled\"\n                  (click)=\"$event.stopPropagation(); locations().length && toggleLocationsMenu()\"\n                  (keydown.enter)=\"$event.preventDefault(); locations().length && toggleLocationsMenu()\"\n                  (keydown.space)=\"$event.preventDefault(); locations().length && toggleLocationsMenu()\"\n                >\n                  <span class=\"flex min-w-0 flex-1 flex-wrap items-center gap-2xs overflow-hidden\">\n                    @if (locations().length === 0) {\n                      <span class=\"fs-sm text-light\">No locations available.</span>\n                    } @else if (selectedLocations().length === 0) {\n                      <span class=\"fs-sm text-light\">Select locations</span>\n                    } @else {\n                      @for (loc of visibleSelectedLocations(); track loc.id) {\n                        <span class=\"inline-flex h-5 items-center gap-2xs rounded bg-primary-50 px-2xs text-primary\">\n                          <span class=\"fs-xs font-medium\">{{ loc.name }}</span>\n                          <button\n                            type=\"button\"\n                            class=\"inline-flex h-3 w-3 shrink-0 cursor-pointer items-center justify-center border-none bg-transparent p-0 text-primary\"\n                            [attr.aria-label]=\"'Remove ' + loc.name\"\n                            (click)=\"$event.stopPropagation(); toggleLocation(loc.id)\"\n                          >\n                            <ed-icon name=\"close\" [size]=\"12\" color=\"currentColor\" />\n                          </button>\n                        </span>\n                      }\n                      @if (hiddenLocationCount() > 0) {\n                        <span class=\"inline-flex h-5 items-center rounded bg-primary-50 px-2xs fs-xs font-medium text-primary\">\n                          +{{ hiddenLocationCount() }}\n                        </span>\n                      }\n                    }\n                  </span>\n                  <ed-icon name=\"expand_more\" [size]=\"16\" class=\"shrink-0 text-light\" />\n                </div>\n                @if (locationsMenuOpen()) {\n                  <ul\n                    class=\"settings-page__locations-menu absolute bottom-full z-50 m-0 mb-1 max-h-56 w-full list-none overflow-auto rounded-md border border-zinc-300 bg-white p-2xs shadow-lg\"\n                    role=\"listbox\"\n                    aria-multiselectable=\"true\"\n                  >\n                    @for (loc of locations(); track loc.id) {\n                      <li role=\"option\" [attr.aria-selected]=\"selectedLocationIds().includes(loc.id)\">\n                        <label class=\"flex cursor-pointer items-center gap-xs rounded px-xs py-2xs fs-sm text-dark hover:bg-lighter\">\n                          <input\n                            type=\"checkbox\"\n                            class=\"h-4 w-4 accent-blue-600\"\n                            [checked]=\"selectedLocationIds().includes(loc.id)\"\n                            (change)=\"toggleLocation(loc.id)\"\n                          />\n                          <span class=\"min-w-0 truncate\">{{ loc.name }}</span>\n                        </label>\n                      </li>\n                    }\n                  </ul>\n                }\n              </div>\n              @if (locations().length === 0) {\n                <p class=\"m-0 fs-sm text-light\">No locations available.</p>\n              }\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Max AI Call Duration<span required></span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('phone', 'maxCallDurationMin')\"\n                (ngModelChange)=\"selectNumberField('phone', 'maxCallDurationMin', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of maxCallDurationOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Silence Timeout<span required></span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('phone', 'silenceTimeoutSec')\"\n                (ngModelChange)=\"selectNumberField('phone', 'silenceTimeoutSec', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of silenceTimeoutOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>After-Hours Behaviour<span required></span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"fieldValue('phone', 'afterHoursBehavior')\"\n                (ngModelChange)=\"updateField('phone', 'afterHoursBehavior', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of afterHoursOptions; track opt.value) {\n                  <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-md border-t border-light pt-md\">\n              <div class=\"settings-page__booking-mode flex flex-col gap-sm\">\n                <div class=\"flex flex-col gap-2xs\">\n                  <span class=\"fs-sm font-medium text-dark\">Appointment booking mode</span>\n                  <span class=\"fs-xs text-light\">\n                    Controls how the voice agent writes bookings to the EHR for this practice.\n                    Applied when you click Save changes.\n                  </span>\n                </div>\n\n                @if (bookingModeLoading()) {\n                  <p class=\"m-0 fs-sm text-light\">Loading booking mode\u2026</p>\n                } @else {\n                  <div class=\"flex flex-col gap-xs\" role=\"radiogroup\" aria-label=\"Appointment booking mode\">\n                    @for (opt of bookingModeOptions(); track opt.value) {\n                      <button\n                        type=\"button\"\n                        class=\"settings-page__booking-option flex w-full cursor-pointer items-start gap-sm rounded-md border border-base bg-white p-sm text-left\"\n                        [class.settings-page__booking-option--active]=\"bookingMode() === opt.value\"\n                        [disabled]=\"saving()\"\n                        role=\"radio\"\n                        [attr.aria-checked]=\"bookingMode() === opt.value\"\n                        (click)=\"selectBookingMode(opt.value)\"\n                      >\n                        <span\n                          class=\"settings-page__booking-radio mt-2xs flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-zinc-300\"\n                          [class.settings-page__booking-radio--on]=\"bookingMode() === opt.value\"\n                          aria-hidden=\"true\"\n                        ></span>\n                        <span class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                          <span class=\"fs-sm font-medium text-dark\">{{ opt.label }}</span>\n                          @if (opt.description) {\n                            <span class=\"fs-xs text-light\">{{ opt.description }}</span>\n                          }\n                        </span>\n                      </button>\n                    }\n                  </div>\n                }\n\n                @if (bookingModeError(); as err) {\n                  <p class=\"m-0 rounded-md border border-red-200 bg-red-50 px-sm py-xs fs-sm text-red-600\" role=\"alert\">\n                    {{ err }}\n                  </p>\n                }\n              </div>\n\n              <div class=\"flex flex-col gap-xs\">\n                <label>Minimum lead time (hours)</label>\n                <input\n                  class=\"form-input is-sm\"\n                  type=\"number\"\n                  min=\"0\"\n                  [ngModel]=\"fieldValue('scheduling', 'leadTimeHours')\"\n                  (ngModelChange)=\"updateField('scheduling', 'leadTimeHours', +$event)\"\n                  autocomplete=\"off\"\n                />\n                <span class=\"fs-xs text-light\">Earliest bookable slot from now.</span>\n              </div>\n\n              <div class=\"flex items-center gap-sm rounded-md border border-base bg-white p-sm\">\n                  <ed-icon name=\"calendar_month\" [size]=\"20\" class=\"shrink-0 text-primary\" />\n                <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                  <span class=\"fs-sm text-dark\">Allow same-day booking</span>\n                  <span class=\"fs-xs text-light\">\n                    Let patients book appointments later today.\n                  </span>\n                </div>\n                <button\n                  type=\"button\"\n                  class=\"settings-page__switch shrink-0\"\n                  [class.settings-page__switch--on]=\"!!fieldValue('scheduling', 'allowSameDay')\"\n                  [attr.aria-pressed]=\"!!fieldValue('scheduling', 'allowSameDay')\"\n                  aria-label=\"Allow same-day booking\"\n                  (click)=\"updateField('scheduling', 'allowSameDay', !fieldValue('scheduling', 'allowSameDay'))\"\n                >\n                  <span class=\"settings-page__switch-thumb\"></span>\n                </button>\n              </div>\n            </div>\n          </div>\n        } @else if (tab() === 'transcripts') {\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\n            <div class=\"flex flex-col gap-xs\">\n              <label>Keep Call Recordings<span required></span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('transcripts', 'recordingRetainDays')\"\n                (ngModelChange)=\"selectNumberField('transcripts', 'recordingRetainDays', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of retentionOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Keep Transcripts<span required></span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('transcripts', 'transcriptRetainDays')\"\n                (ngModelChange)=\"selectNumberField('transcripts', 'transcriptRetainDays', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of retentionOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <div class=\"flex items-center gap-xs\">\n                <label class=\"m-0\">Disclosure Warning</label>\n                <button\n                  type=\"button\"\n                  class=\"settings-page__switch shrink-0\"\n                  [class.settings-page__switch--on]=\"disclosureEnabled()\"\n                  [attr.aria-pressed]=\"disclosureEnabled()\"\n                  aria-label=\"Disclosure Warning\"\n                  (click)=\"setDisclosureEnabled(!disclosureEnabled())\"\n                >\n                  <span class=\"settings-page__switch-thumb\"></span>\n                </button>\n              </div>\n              @if (disclosureEnabled()) {\n                <textarea\n                  class=\"form-textarea min-h-24\"\n                  rows=\"4\"\n                  [maxlength]=\"disclosureMax\"\n                  [ngModel]=\"disclosureText()\"\n                  (ngModelChange)=\"updateDisclosureText($event)\"\n                  autocomplete=\"off\"\n                ></textarea>\n              }\n            </div>\n          </div>\n        } @else if (tab() === 'advanced') {\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\n            <div class=\"flex items-center gap-sm rounded-md border border-base bg-white p-sm\">\n              <span class=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary-50 text-primary\" aria-hidden=\"true\">\n                <ed-icon name=\"sparkle\" [size]=\"20\" />\n              </span>\n              <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                <span class=\"fs-sm text-dark\">\n                  @if (toggling()) {\n                    Updating\u2026\n                  } @else if (online() === true) {\n                    Agent online\n                  } @else if (online() === false) {\n                    Agent offline\n                  } @else {\n                    Status unknown\n                  }\n                </span>\n                <span class=\"fs-xs text-light\">\n                  @if (online() === true) {\n                    AI receptionist is answering inbound calls.\n                  } @else if (online() === false) {\n                    AI is offline \u2014 calls go to the front desk.\n                  } @else {\n                    Checking agent status\u2026\n                  }\n                </span>\n              </div>\n              <button\n                type=\"button\"\n                class=\"settings-page__switch shrink-0\"\n                [class.settings-page__switch--on]=\"online() === true\"\n                [disabled]=\"agentSwitchDisabled()\"\n                [attr.aria-pressed]=\"online() === true\"\n                aria-label=\"Agent online\"\n                (click)=\"onAgentToggleClick()\"\n              >\n                <span class=\"settings-page__switch-thumb\"></span>\n              </button>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Model version</label>\n              <input\n                class=\"form-input is-sm\"\n                type=\"text\"\n                [ngModel]=\"fieldValue('advanced', 'modelVersion')\"\n                disabled\n                autocomplete=\"off\"\n              />\n              <span class=\"fs-xs text-light\">Set by Edvak support.</span>\n            </div>\n\n            <div class=\"flex items-center gap-sm rounded-md border border-base bg-lighter px-base py-sm opacity-90\">\n              <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                <span class=\"fs-sm text-dark\">Debug mode</span>\n                <span class=\"fs-xs text-light\">Verbose logging \u2014 contact Edvak to change.</span>\n              </div>\n              <button\n                type=\"button\"\n                class=\"settings-page__switch shrink-0\"\n                [class.settings-page__switch--on]=\"!!fieldValue('advanced', 'debugMode')\"\n                disabled\n                [attr.aria-pressed]=\"!!fieldValue('advanced', 'debugMode')\"\n                aria-label=\"Debug mode\"\n              >\n                <span class=\"settings-page__switch-thumb\"></span>\n              </button>\n            </div>\n          </div>\n        } @else {\n          <div class=\"grid grid-cols-2 gap-x-md gap-y-md below-md:grid-cols-1\">\n            @for (field of fieldsForTab(); track field.key) {\n              @if (field.type === 'boolean') {\n                <label\n                  class=\"col-span-full flex cursor-pointer items-center justify-between gap-base rounded-md border border-base bg-lighter px-base py-sm\"\n                  [class.cursor-default]=\"fieldIsReadOnly(tab(), field.key)\"\n                  [class.opacity-90]=\"fieldIsReadOnly(tab(), field.key)\"\n                >\n                  <div class=\"flex min-w-0 flex-col gap-2xs\">\n                    <span class=\"fs-sm text-dark\">{{ field.label }}</span>\n                    @if (field.description) {\n                      <span\n                        class=\"fs-sm text-light\"\n                        [class.text-lighter]=\"fieldIsReadOnly(tab(), field.key)\"\n                      >{{ field.description }}</span>\n                    }\n                  </div>\n                  <input\n                    type=\"checkbox\"\n                    class=\"h-4 w-4 shrink-0 accent-blue-600 disabled:cursor-not-allowed\"\n                    [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\n                    [ngModel]=\"fieldValue(tab(), field.key)\"\n                    (ngModelChange)=\"updateField(tab(), field.key, $event)\"\n                    autocomplete=\"off\"\n                  />\n                </label>\n              } @else if (field.type === 'select' && field.options?.length) {\n                <div class=\"flex flex-col gap-xs\">\n                  <label>{{ field.label }}</label>\n                  @if (field.description) {\n                    <span\n                      class=\"fs-sm text-light\"\n                      [class.text-lighter]=\"fieldIsReadOnly(tab(), field.key)\"\n                    >{{ field.description }}</span>\n                  }\n                  <select\n                    class=\"form-select is-sm\"\n                    [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\n                    [ngModel]=\"fieldValue(tab(), field.key)\"\n                    (ngModelChange)=\"updateField(tab(), field.key, $event)\"\n                    autocomplete=\"off\"\n                  >\n                    @for (opt of field.options; track opt.value) {\n                      <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                    }\n                  </select>\n                </div>\n              } @else {\n                <div class=\"flex flex-col gap-xs\">\n                  <label>{{ field.label }}</label>\n                  @if (field.description) {\n                    <span\n                      class=\"fs-sm text-light\"\n                      [class.text-lighter]=\"fieldIsReadOnly(tab(), field.key)\"\n                    >{{ field.description }}</span>\n                  }\n                  @if (field.type === 'number') {\n                    <input\n                      class=\"form-input is-sm\"\n                      type=\"number\"\n                      [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\n                      [ngModel]=\"fieldValue(tab(), field.key)\"\n                      (ngModelChange)=\"updateField(tab(), field.key, +$event)\"\n                      autocomplete=\"off\"\n                    />\n                  } @else {\n                    <input\n                      class=\"form-input is-sm\"\n                      type=\"text\"\n                      [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\n                      [ngModel]=\"fieldValue(tab(), field.key)\"\n                      (ngModelChange)=\"updateField(tab(), field.key, $event)\"\n                      autocomplete=\"off\"\n                    />\n                  }\n                </div>\n              }\n            }\n          </div>\n        }\n</ng-template>\n\n<eds-knowledge-test-modal\n  [open]=\"knowledgeTestOpen()\"\n  [whatToSay]=\"whatToSay()\"\n  [whatNotToSay]=\"whatNotToSay()\"\n  [voiceId]=\"selectedVoiceId()\"\n  (closed)=\"closeTestCall()\"\n/>\n\n@if (confirmOffOpen()) {\n  <app-modal\n    title=\"Turn off AI receptionist?\"\n    subtitle=\"Inbound callers will be transferred to the front desk instead of the AI.\"\n    maxWidth=\"480px\"\n    (closed)=\"cancelConfirmOff()\"\n  >\n    <p class=\"mb-4 m-0 text-sm leading-normal text-zinc-500\">While offline, the AI will not answer calls. Callers are routed to the human receptionist.</p>\n    <div class=\"flex justify-end gap-2\">\n      <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"cancelConfirmOff()\">Cancel</ed-button>\n      <ed-button variant=\"danger\" fill size=\"sm\" [disabled]=\"toggling()\" (click$)=\"confirmTurnOff()\">\n        Turn off AI receptionist\n      </ed-button>\n    </div>\n  </app-modal>\n}\n", styles: [":host{display:block}:host.settings-page-host--drawer{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.settings-page__layout{grid-template-columns:240px minmax(0,1fr)}.settings-page__nav-item:hover{background:var(--eds-surface-l1, #f7f9fa);color:var(--eds-text-primary, #41464c)}.settings-page__nav-item--active{background:var(--eds-color-primary-light, #eaf1fe);color:var(--eds-text-brand, #2162f0)}.settings-page__nav-item--disabled,.settings-page__nav-item:disabled{opacity:.45;cursor:not-allowed;color:var(--eds-text-tertiary, #767676)}.settings-page__nav-item--disabled:hover,.settings-page__nav-item:disabled:hover{background:none;color:var(--eds-text-tertiary, #767676)}.settings-page__select{min-height:2.25rem;background:#fff;border:1px solid #c5c7d0;color:#1f2328}.settings-page__locations-menu{box-shadow:0 8px 24px #0f172a29}.settings-page__voice-play{color:var(--eds-text-primary, #41464c)}.settings-page__voice-play:hover:not(:disabled){border-color:var(--eds-brand-600, #2162f0);color:var(--eds-brand-600, #2162f0)}.settings-page__tone--active{background:var(--eds-surface-l0, #fff);border-color:var(--eds-brand-600, #2162f0);color:var(--eds-brand-600, #2162f0)}.settings-page__var-chip:hover{border-color:var(--eds-brand-300, #94c5f9);color:var(--eds-brand-600, #2162f0)}.settings-page__switch{width:44px;height:26px;border-radius:999px;border:none;background:var(--eds-gray-300, #cbd5e1);padding:3px;cursor:pointer;transition:background .15s ease}.settings-page__switch--on{background:var(--eds-brand-600, #2162f0)}.settings-page__switch:disabled{opacity:.55;cursor:not-allowed}.settings-page__switch-thumb{display:block;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0f172a33;transition:transform .15s ease}.settings-page__switch--on .settings-page__switch-thumb{transform:translate(18px)}.settings-page__booking-option:hover:not(:disabled){border-color:#94c5f9;background:#f8fbff}.settings-page__booking-option--active{border-color:var(--eds-brand-600, #2162f0);background:var(--eds-color-primary-light, #eaf1fe)}.settings-page__booking-option:disabled{opacity:.7;cursor:wait}.settings-page__booking-radio--on{border-color:var(--eds-brand-600, #2162f0);background:var(--eds-brand-600, #2162f0);box-shadow:inset 0 0 0 3px #fff}.form-input:disabled,.form-select:disabled{color:var(--eds-color-text-muted, #64748b);background:var(--eds-color-surface-alt, #f1f5f9);border-color:var(--eds-color-border, #e2e8f0);cursor:not-allowed;opacity:1}@media(max-width:960px){.settings-page__layout{grid-template-columns:1fr}}\n"] }]
+                    }, template: "<div\r\n  class=\"settings-page\"\r\n  [class.p-base]=\"presentation() === 'page'\"\r\n  [class.bg-lighter]=\"presentation() === 'page'\"\r\n  [class.min-h-full]=\"presentation() === 'page'\"\r\n  [class.h-full]=\"presentation() === 'page'\"\r\n  [class.min-h-0]=\"presentation() === 'page'\"\r\n  [class.overflow-auto]=\"presentation() === 'page'\"\r\n  [class.flex]=\"presentation() === 'drawer'\"\r\n  [class.h-full]=\"presentation() === 'drawer'\"\r\n  [class.min-h-0]=\"presentation() === 'drawer'\"\r\n  [class.flex-col]=\"presentation() === 'drawer'\"\r\n>\r\n  @if (presentation() === 'page') {\r\n    <header class=\"mb-6 flex items-start justify-between gap-4\">\r\n      <div>\r\n        <h4>Agent settings</h4>\r\n        <p class=\"mt-2 text-base leading-normal text-zinc-500\">Configure AI receptionist behavior and safety</p>\r\n      </div>\r\n      <div class=\"flex shrink-0 items-center gap-3\">\r\n        @if (saved()) {\r\n          <span class=\"text-sm font-medium text-green-500\">Saved</span>\r\n        }\r\n        <ed-button variant=\"primary\" fill size=\"sm\" [disabled]=\"saving()\" (click$)=\"save()\">\r\n          <ed-icon slot=\"prefix\" name=\"save\" [size]=\"16\" />\r\n          {{ saving() ? 'Saving\u2026' : 'Save changes' }}\r\n        </ed-button>\r\n      </div>\r\n    </header>\r\n  }\r\n\r\n  @if (loading()) {\r\n    @if (presentation() === 'drawer') {\r\n      <div class=\"flex min-h-0 flex-1\" aria-busy=\"true\">\r\n        <nav class=\"w-[220px] h-full shrink-0 overflow-y-auto p-base bg-lighter-2\" aria-label=\"Settings sections\">\r\n          <ul role=\"presentation\">\r\n            @for (_ of navSkeletonRows; track _) {\r\n              <li class=\"mb-1\">\r\n                <ed-skeleton class=\"h-8 w-full !rounded-md\"></ed-skeleton>\r\n              </li>\r\n            }\r\n          </ul>\r\n        </nav>\r\n        <article class=\"flex min-h-0 min-w-0 flex-1 flex-col gap-md overflow-y-auto bg-white p-base\">\r\n          <header class=\"grid gap-2xs\">\r\n            <ed-skeleton class=\"h-5 w-40\"></ed-skeleton>\r\n            <ed-skeleton class=\"h-3 w-72\"></ed-skeleton>\r\n          </header>\r\n          @for (_ of fieldSkeletonRows; track _) {\r\n            <div class=\"grid gap-2xs\">\r\n              <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\r\n              <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\r\n            </div>\r\n          }\r\n        </article>\r\n      </div>\r\n    } @else {\r\n      <div\r\n        class=\"grid grid-cols-[240px_minmax(0,1fr)] max-[960px]:grid-cols-1 items-start gap-5\"\r\n        aria-busy=\"true\"\r\n      >\r\n        <nav class=\"flex flex-col gap-1 rounded-lg border border-base bg-white p-2 shadow-sm\" aria-label=\"Settings sections\">\r\n          @for (_ of navSkeletonRows; track _) {\r\n            <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\r\n          }\r\n        </nav>\r\n        <article class=\"flex min-h-96 flex-col gap-md overflow-hidden rounded-lg border border-light bg-white p-base\">\r\n          <header class=\"grid gap-2xs\">\r\n            <ed-skeleton class=\"h-5 w-40\"></ed-skeleton>\r\n            <ed-skeleton class=\"h-3 w-72\"></ed-skeleton>\r\n          </header>\r\n          @for (_ of fieldSkeletonRows; track _) {\r\n            <div class=\"grid gap-2xs\">\r\n              <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\r\n              <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\r\n            </div>\r\n          }\r\n        </article>\r\n      </div>\r\n    }\r\n  } @else if (settings()) {\r\n    @if (presentation() === 'drawer') {\r\n      <div class=\"flex min-h-0 flex-1\">\r\n        <nav class=\"w-[220px] h-full shrink-0 overflow-y-auto p-base bg-lighter-2\" aria-label=\"Settings sections\">\r\n          <ul role=\"tablist\" aria-label=\"Settings sections\">\r\n            @for (t of tabs; track t.id) {\r\n              <li\r\n                role=\"presentation\"\r\n                [class.cursor-pointer]=\"!isTabDisabled(t.id)\"\r\n                [class.cursor-not-allowed]=\"isTabDisabled(t.id)\"\r\n              >\r\n                <div\r\n                  class=\"kpi-menu\"\r\n                  role=\"tab\"\r\n                  [attr.id]=\"'agent-settings-tab-' + t.id\"\r\n                  [attr.aria-selected]=\"tab() === t.id\"\r\n                  [attr.aria-disabled]=\"isTabDisabled(t.id)\"\r\n                  [attr.tabindex]=\"tab() === t.id ? 0 : -1\"\r\n                  [attr.title]=\"isTabDisabled(t.id) ? 'This section is currently disabled' : null\"\r\n                  [class.kpi-menu-active]=\"tab() === t.id\"\r\n                  [class.opacity-45]=\"isTabDisabled(t.id)\"\r\n                  (click)=\"setTab(t.id)\"\r\n                  (keydown.enter)=\"setTab(t.id)\"\r\n                  (keydown.space)=\"$event.preventDefault(); setTab(t.id)\"\r\n                >\r\n                  <div class=\"flex items-center gap-xs w-full\">\r\n                    <span class=\"whitespace-nowrap flex-1 truncate\">{{ t.label }}</span>\r\n                    @if (isTabDisabled(t.id)) {\r\n                      <span class=\"shrink-0 fs-2xs font-medium uppercase tracking-wide text-lighter\">Off</span>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              </li>\r\n            }\r\n          </ul>\r\n        </nav>\r\n\r\n        <article\r\n          class=\"flex min-h-0 min-w-0 flex-1 flex-col gap-md bg-white p-base\"\r\n          [class.overflow-y-auto]=\"!locationsMenuOpen()\"\r\n          [class.overflow-visible]=\"locationsMenuOpen()\"\r\n        >\r\n          <header class=\"flex shrink-0 items-start justify-between gap-base\">\r\n            <div class=\"min-w-0\">\r\n              <h5 class=\"m-0\">{{ sectionMeta().title }}</h5>\r\n              @if (tab() !== 'knowledge' && tab() !== 'general' && tab() !== 'phone' && tab() !== 'transcripts') {\r\n                <p class=\"m-0 mt-2xs max-w-2xl fs-sm text-light\">{{ sectionMeta().description }}</p>\r\n              }\r\n            </div>\r\n            @if (tab() === 'knowledge') {\r\n              <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"openTestCall()\">\r\n                <ed-icon slot=\"prefix\" name=\"phone_call\" [size]=\"16\" />\r\n                Test Call\r\n              </ed-button>\r\n            }\r\n          </header>\r\n\r\n          @if (sectionIsReadOnly(tab())) {\r\n            <p class=\"flex items-center gap-sm rounded-md border border-light bg-lighter px-base py-sm fs-sm text-light\">\r\n              <ed-icon name=\"lock\" [size]=\"18\" />\r\n              These settings are managed by Edvak. Contact support to request changes.\r\n            </p>\r\n          }\r\n\r\n          <ng-container [ngTemplateOutlet]=\"settingsPanels\" />\r\n        </article>\r\n      </div>\r\n    } @else {\r\n      <div class=\"grid grid-cols-[240px_minmax(0,1fr)] max-[960px]:grid-cols-1 items-start gap-5\">\r\n        <nav\r\n          class=\"sticky top-4 flex max-h-[calc(100vh-120px)] max-[960px]:static max-[960px]:max-h-none max-[960px]:flex-row max-[960px]:flex-wrap flex-col gap-1 overflow-y-auto rounded-lg border border-base bg-white p-2 shadow-sm\"\r\n          aria-label=\"Settings sections\"\r\n        >\r\n          @for (t of tabs; track t.id) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"settings-page__nav-item flex w-full max-[960px]:w-auto max-[960px]:flex-1 cursor-pointer items-center justify-between gap-3 rounded-md border-none bg-transparent px-4 py-3 text-left text-sm font-medium leading-snug text-zinc-600\"\r\n              [class.settings-page__nav-item--active]=\"tab() === t.id\"\r\n              [class.settings-page__nav-item--disabled]=\"isTabDisabled(t.id)\"\r\n              [disabled]=\"isTabDisabled(t.id)\"\r\n              [attr.title]=\"isTabDisabled(t.id) ? 'This section is currently disabled' : null\"\r\n              (click)=\"setTab(t.id)\"\r\n            >\r\n              {{ t.label }}\r\n              @if (isTabDisabled(t.id)) {\r\n                <span class=\"ml-auto text-xs font-medium uppercase tracking-wide text-zinc-400\">Disabled</span>\r\n              }\r\n            </button>\r\n          }\r\n        </nav>\r\n\r\n        <article class=\"flex min-h-96 flex-col gap-md overflow-hidden rounded-lg border border-light bg-white p-base\">\r\n          <header class=\"flex items-start justify-between gap-base\">\r\n            <div class=\"min-w-0\">\r\n              <h5 class=\"m-0\">{{ sectionMeta().title }}</h5>\r\n              @if (tab() !== 'knowledge' && tab() !== 'general' && tab() !== 'phone' && tab() !== 'transcripts') {\r\n                <p class=\"m-0 mt-2xs max-w-2xl fs-sm text-light\">{{ sectionMeta().description }}</p>\r\n              }\r\n            </div>\r\n            @if (tab() === 'knowledge') {\r\n              <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"openTestCall()\">\r\n                <ed-icon slot=\"prefix\" name=\"phone_call\" [size]=\"16\" />\r\n                Test Call\r\n              </ed-button>\r\n            }\r\n          </header>\r\n\r\n          @if (sectionIsReadOnly(tab())) {\r\n            <p class=\"flex items-center gap-sm rounded-md border border-light bg-lighter px-base py-sm fs-sm text-light\">\r\n              <ed-icon name=\"lock\" [size]=\"18\" />\r\n              These settings are managed by Edvak. Contact support to request changes.\r\n            </p>\r\n          }\r\n\r\n          <ng-container [ngTemplateOutlet]=\"settingsPanels\" />\r\n        </article>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #settingsPanels>\r\n        @if (tab() === 'knowledge') {\r\n          <div class=\"flex w-full max-w-4xl flex-col gap-md\">\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <label><span required>What to say</span></label>\r\n              <textarea\r\n                class=\"form-textarea min-h-56\"\r\n                rows=\"10\"\r\n                [maxlength]=\"knowledgeMax\"\r\n                [ngModel]=\"whatToSay()\"\r\n                (ngModelChange)=\"updateKnowledgeField('whatToSay', $event)\"\r\n                placeholder=\"Hours, parking, payment options, arrival instructions, emergencies\u2026\"\r\n                autocomplete=\"off\"\r\n              ></textarea>\r\n              <span class=\"block text-right fs-xs text-light\">{{ whatToSay().length }}/{{ knowledgeMax }}</span>\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <label><span required>What not to say</span></label>\r\n              <textarea\r\n                class=\"form-textarea min-h-56\"\r\n                rows=\"10\"\r\n                [maxlength]=\"knowledgeMax\"\r\n                [ngModel]=\"whatNotToSay()\"\r\n                (ngModelChange)=\"updateKnowledgeField('whatNotToSay', $event)\"\r\n                placeholder=\"Clinical advice, unverified prices, PHI, promises the practice cannot keep\u2026\"\r\n                autocomplete=\"off\"\r\n              ></textarea>\r\n              <span class=\"block text-right fs-xs text-light\">{{ whatNotToSay().length }}/{{ knowledgeMax }}</span>\r\n            </div>\r\n          </div>\r\n        } @else if (tab() === 'general') {\r\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <div class=\"flex items-center justify-between gap-xs\">\r\n                <label class=\"m-0\">\r\n                  <span required>Name</span>\r\n                </label>\r\n                <ed-icon\r\n                  name=\"info\"\r\n                  [size]=\"16\"\r\n                  class=\"text-light\"\r\n                  title=\"How the AI introduces itself on calls\"\r\n                />\r\n              </div>\r\n              <input\r\n                class=\"form-input is-sm\"\r\n                type=\"text\"\r\n                [ngModel]=\"fieldValue('general', 'agentName')\"\r\n                (ngModelChange)=\"updateField('general', 'agentName', $event)\"\r\n                autocomplete=\"off\"\r\n              />\r\n            </div>\r\n\r\n            <div class=\"flex items-end gap-sm\">\r\n              <div class=\"flex min-w-0 flex-1 flex-col gap-xs\">\r\n                <label><span required>Voice</span></label>\r\n                <select\r\n                  class=\"form-select is-sm settings-page__select\"\r\n                  [ngModel]=\"selectedVoiceId()\"\r\n                  (ngModelChange)=\"onVoiceChange($event)\"\r\n                  autocomplete=\"off\"\r\n                >\r\n                  @for (v of voicePresets; track v.id) {\r\n                    <option [ngValue]=\"v.id\">{{ v.gender }} \u00B7 {{ v.label }}</option>\r\n                  }\r\n                </select>\r\n              </div>\r\n              <button\r\n                type=\"button\"\r\n                class=\"settings-page__voice-play inline-flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-md border border-base bg-white disabled:cursor-wait disabled:opacity-60\"\r\n                [disabled]=\"!selectedVoiceId() || voicePreviewBusy()\"\r\n                [attr.aria-label]=\"voicePreviewPlaying() ? 'Stop voice preview' : 'Play voice preview'\"\r\n                [title]=\"voicePreviewPlaying() ? 'Stop preview' : 'Play sample'\"\r\n                (click)=\"toggleVoicePreview()\"\r\n              >\r\n                <ed-icon [name]=\"voicePreviewPlaying() ? 'stop' : 'play_arrow'\" [size]=\"20\" />\r\n              </button>\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <label>Tone</label>\r\n              <div class=\"flex flex-wrap gap-xs\" role=\"radiogroup\" aria-label=\"Tone\">\r\n                @for (tone of toneOptions; track tone.value) {\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"settings-page__tone cursor-pointer rounded-full border border-transparent bg-lighter px-sm py-2xs fs-xs font-medium text-body\"\r\n                    [class.settings-page__tone--active]=\"selectedTone() === tone.value\"\r\n                    [class.font-semibold]=\"selectedTone() === tone.value\"\r\n                    [attr.aria-checked]=\"selectedTone() === tone.value\"\r\n                    role=\"radio\"\r\n                    (click)=\"setTone(tone.value)\"\r\n                  >\r\n                    {{ tone.label }}\r\n                  </button>\r\n                }\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <label><span required>Inbound Greetings</span></label>\r\n              <textarea\r\n                class=\"form-textarea min-h-24\"\r\n                rows=\"4\"\r\n                spellcheck=\"false\"\r\n                [maxlength]=\"welcomeMax\"\r\n                [placeholder]=\"welcomePlaceholder()\"\r\n                [ngModel]=\"welcomeMessage()\"\r\n                (ngModelChange)=\"updateWelcomeMessage($event)\"\r\n                autocomplete=\"off\"\r\n              ></textarea>\r\n              <span class=\"block text-right fs-xs text-light\">{{ welcomeMessage().length }}/{{ welcomeMax }}</span>\r\n              <div class=\"flex flex-wrap items-center gap-xs\">\r\n                <span class=\"fs-xs font-medium text-dark\">Variables:</span>\r\n                @for (v of greetingVariables; track v.key) {\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"settings-page__var-chip inline-flex h-5 cursor-pointer items-center rounded border border-base bg-white px-2xs fs-xs font-medium text-dark\"\r\n                    (click)=\"insertGreetingVariable(v.token)\"\r\n                    [title]=\"'Insert ' + v.token\"\r\n                  >\r\n                    {{ v.label }}\r\n                  </button>\r\n                }\r\n              </div>\r\n            </div>\r\n          </div>\r\n        } @else if (tab() === 'phone') {\r\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <div class=\"flex items-center justify-between gap-xs\">\r\n                <label class=\"m-0\"><span required>AI Answer Mode</span></label>\r\n                <ed-icon name=\"info\" [size]=\"16\" class=\"text-light\" title=\"When the AI picks up inbound calls\" />\r\n              </div>\r\n              <select\r\n                class=\"form-select is-sm\"\r\n                [ngModel]=\"fieldValue('phone', 'answerMode')\"\r\n                (ngModelChange)=\"updateField('phone', 'answerMode', $event)\"\r\n                autocomplete=\"off\"\r\n              >\r\n                @for (opt of answerModeOptions; track opt.value) {\r\n                  <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\r\n                }\r\n              </select>\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <label><span required>AI Phone Number</span></label>\r\n              <input\r\n                class=\"form-input is-sm\"\r\n                type=\"text\"\r\n                [disabled]=\"isFieldReadOnly('phone', 'mainNumber')\"\r\n                [ngModel]=\"fieldValue('phone', 'mainNumber')\"\r\n                (ngModelChange)=\"updateField('phone', 'mainNumber', $event)\"\r\n                autocomplete=\"off\"\r\n              />\r\n              <span class=\"fs-xs text-light\">Number patients dial for the AI receptionist. Locked (managed by platform).</span>\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <label><span required>Transfer Number</span></label>\r\n              <input\r\n                class=\"form-input is-sm\"\r\n                type=\"text\"\r\n                [disabled]=\"isFieldReadOnly('phone', 'transferNumber')\"\r\n                [ngModel]=\"fieldValue('phone', 'transferNumber')\"\r\n                (ngModelChange)=\"updateField('phone', 'transferNumber', $event)\"\r\n                autocomplete=\"off\"\r\n              />\r\n              <span class=\"fs-xs text-light\">Staff / front-desk handoff number. Locked.</span>\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <label><span required>Ringing Time Wait</span></label>\r\n              <select\r\n                class=\"form-select is-sm\"\r\n                [ngModel]=\"numberFieldAsString('phone', 'ringTimeout')\"\r\n                (ngModelChange)=\"selectNumberField('phone', 'ringTimeout', $event)\"\r\n                autocomplete=\"off\"\r\n              >\r\n                @for (opt of ringTimeoutOptions; track opt.value) {\r\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\r\n                }\r\n              </select>\r\n            </div>\r\n\r\n            <div class=\"flex items-center gap-sm rounded-md border border-base bg-white p-sm\">\r\n              <ed-icon name=\"event_available\" [size]=\"20\" class=\"shrink-0 text-primary\" />\r\n              <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\r\n                <span class=\"fs-sm text-dark\">Create Follow-up Task</span>\r\n                <span class=\"fs-xs text-light\">\r\n                  If no one answers in time, the agent auto-creates a high priority task.\r\n                </span>\r\n              </div>\r\n              <button\r\n                type=\"button\"\r\n                class=\"settings-page__switch shrink-0\"\r\n                [class.settings-page__switch--on]=\"!!fieldValue('phone', 'createFollowUpTask')\"\r\n                [attr.aria-pressed]=\"!!fieldValue('phone', 'createFollowUpTask')\"\r\n                aria-label=\"Create Follow-up Task\"\r\n                (click)=\"updateField('phone', 'createFollowUpTask', !fieldValue('phone', 'createFollowUpTask'))\"\r\n              >\r\n                <span class=\"settings-page__switch-thumb\"></span>\r\n              </button>\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <label><span required>Location Handled</span></label>\r\n              <div class=\"relative\" data-locations-dd (document:click)=\"onLocationsDocClick($event)\">\r\n                <div\r\n                  class=\"form-input flex h-auto w-full cursor-pointer items-center justify-between gap-xs py-2xs text-left\"\r\n                  role=\"combobox\"\r\n                  tabindex=\"0\"\r\n                  [class.opacity-55]=\"locations().length === 0\"\r\n                  [attr.aria-expanded]=\"locationsMenuOpen()\"\r\n                  [attr.aria-disabled]=\"locations().length === 0\"\r\n                  [attr.title]=\"locationSummary()\"\r\n                  aria-haspopup=\"listbox\"\r\n                  aria-label=\"Locations handled\"\r\n                  (click)=\"$event.stopPropagation(); locations().length && toggleLocationsMenu()\"\r\n                  (keydown.enter)=\"$event.preventDefault(); locations().length && toggleLocationsMenu()\"\r\n                  (keydown.space)=\"$event.preventDefault(); locations().length && toggleLocationsMenu()\"\r\n                >\r\n                  <span class=\"flex min-w-0 flex-1 flex-wrap items-center gap-2xs overflow-hidden\">\r\n                    @if (locations().length === 0) {\r\n                      <span class=\"fs-sm text-light\">No locations available.</span>\r\n                    } @else if (selectedLocations().length === 0) {\r\n                      <span class=\"fs-sm text-light\">Select locations</span>\r\n                    } @else {\r\n                      @for (loc of visibleSelectedLocations(); track loc.id) {\r\n                        <span class=\"inline-flex h-5 items-center gap-2xs rounded bg-primary-50 px-2xs text-primary\">\r\n                          <span class=\"fs-xs font-medium\">{{ loc.name }}</span>\r\n                          <button\r\n                            type=\"button\"\r\n                            class=\"inline-flex h-3 w-3 shrink-0 cursor-pointer items-center justify-center border-none bg-transparent p-0 text-primary\"\r\n                            [attr.aria-label]=\"'Remove ' + loc.name\"\r\n                            (click)=\"$event.stopPropagation(); toggleLocation(loc.id)\"\r\n                          >\r\n                            <ed-icon name=\"close\" [size]=\"12\" color=\"currentColor\" />\r\n                          </button>\r\n                        </span>\r\n                      }\r\n                      @if (hiddenLocationCount() > 0) {\r\n                        <span class=\"inline-flex h-5 items-center rounded bg-primary-50 px-2xs fs-xs font-medium text-primary\">\r\n                          +{{ hiddenLocationCount() }}\r\n                        </span>\r\n                      }\r\n                    }\r\n                  </span>\r\n                  <ed-icon name=\"expand_more\" [size]=\"16\" class=\"shrink-0 text-light\" />\r\n                </div>\r\n                @if (locationsMenuOpen()) {\r\n                  <ul\r\n                    class=\"settings-page__locations-menu absolute bottom-full z-50 m-0 mb-1 max-h-56 w-full list-none overflow-auto rounded-md border border-zinc-300 bg-white p-2xs shadow-lg\"\r\n                    role=\"listbox\"\r\n                    aria-multiselectable=\"true\"\r\n                  >\r\n                    @for (loc of locations(); track loc.id) {\r\n                      <li role=\"option\" [attr.aria-selected]=\"selectedLocationIds().includes(loc.id)\">\r\n                        <label class=\"flex cursor-pointer items-center gap-xs rounded px-xs py-2xs fs-sm text-dark hover:bg-lighter\">\r\n                          <input\r\n                            type=\"checkbox\"\r\n                            class=\"h-4 w-4 accent-blue-600\"\r\n                            [checked]=\"selectedLocationIds().includes(loc.id)\"\r\n                            (change)=\"toggleLocation(loc.id)\"\r\n                          />\r\n                          <span class=\"min-w-0 truncate\">{{ loc.name }}</span>\r\n                        </label>\r\n                      </li>\r\n                    }\r\n                  </ul>\r\n                }\r\n              </div>\r\n              @if (locations().length === 0) {\r\n                <p class=\"m-0 fs-sm text-light\">No locations available.</p>\r\n              }\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <label><span required>Max AI Call Duration</span></label>\r\n              <select\r\n                class=\"form-select is-sm\"\r\n                [ngModel]=\"numberFieldAsString('phone', 'maxCallDurationMin')\"\r\n                (ngModelChange)=\"selectNumberField('phone', 'maxCallDurationMin', $event)\"\r\n                autocomplete=\"off\"\r\n              >\r\n                @for (opt of maxCallDurationOptions; track opt.value) {\r\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\r\n                }\r\n              </select>\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <label><span required>Silence Timeout</span></label>\r\n              <select\r\n                class=\"form-select is-sm\"\r\n                [ngModel]=\"numberFieldAsString('phone', 'silenceTimeoutSec')\"\r\n                (ngModelChange)=\"selectNumberField('phone', 'silenceTimeoutSec', $event)\"\r\n                autocomplete=\"off\"\r\n              >\r\n                @for (opt of silenceTimeoutOptions; track opt.value) {\r\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\r\n                }\r\n              </select>\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <label><span required>After-Hours Behaviour</span></label>\r\n              <select\r\n                class=\"form-select is-sm\"\r\n                [ngModel]=\"fieldValue('phone', 'afterHoursBehavior')\"\r\n                (ngModelChange)=\"updateField('phone', 'afterHoursBehavior', $event)\"\r\n                autocomplete=\"off\"\r\n              >\r\n                @for (opt of afterHoursOptions; track opt.value) {\r\n                  <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\r\n                }\r\n              </select>\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-md border-t border-light pt-md\">\r\n              <div class=\"settings-page__booking-mode flex flex-col gap-sm\">\r\n                <div class=\"flex flex-col gap-2xs\">\r\n                  <span class=\"fs-sm font-medium text-dark\">Appointment booking mode</span>\r\n                  <span class=\"fs-xs text-light\">\r\n                    Controls how the voice agent writes bookings to the EHR for this practice.\r\n                    Applied when you click Save changes.\r\n                  </span>\r\n                </div>\r\n\r\n                @if (bookingModeLoading()) {\r\n                  <p class=\"m-0 fs-sm text-light\">Loading booking mode\u2026</p>\r\n                } @else {\r\n                  <div class=\"flex flex-col gap-xs\" role=\"radiogroup\" aria-label=\"Appointment booking mode\">\r\n                    @for (opt of bookingModeOptions(); track opt.value) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"settings-page__booking-option flex w-full cursor-pointer items-start gap-sm rounded-md border border-base bg-white p-sm text-left\"\r\n                        [class.settings-page__booking-option--active]=\"bookingMode() === opt.value\"\r\n                        [disabled]=\"saving()\"\r\n                        role=\"radio\"\r\n                        [attr.aria-checked]=\"bookingMode() === opt.value\"\r\n                        (click)=\"selectBookingMode(opt.value)\"\r\n                      >\r\n                        <span\r\n                          class=\"settings-page__booking-radio mt-2xs flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-zinc-300\"\r\n                          [class.settings-page__booking-radio--on]=\"bookingMode() === opt.value\"\r\n                          aria-hidden=\"true\"\r\n                        ></span>\r\n                        <span class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\r\n                          <span class=\"fs-sm font-medium text-dark\">{{ opt.label }}</span>\r\n                          @if (opt.description) {\r\n                            <span class=\"fs-xs text-light\">{{ opt.description }}</span>\r\n                          }\r\n                        </span>\r\n                      </button>\r\n                    }\r\n                  </div>\r\n                }\r\n\r\n                @if (bookingModeError(); as err) {\r\n                  <p class=\"m-0 rounded-md border border-red-200 bg-red-50 px-sm py-xs fs-sm text-red-600\" role=\"alert\">\r\n                    {{ err }}\r\n                  </p>\r\n                }\r\n              </div>\r\n\r\n              <div class=\"flex flex-col gap-xs\">\r\n                <label>Minimum lead time (hours)</label>\r\n                <input\r\n                  class=\"form-input is-sm\"\r\n                  type=\"number\"\r\n                  min=\"0\"\r\n                  [ngModel]=\"fieldValue('scheduling', 'leadTimeHours')\"\r\n                  (ngModelChange)=\"updateField('scheduling', 'leadTimeHours', +$event)\"\r\n                  autocomplete=\"off\"\r\n                />\r\n                <span class=\"fs-xs text-light\">Earliest bookable slot from now.</span>\r\n              </div>\r\n\r\n              <div class=\"flex items-center gap-sm rounded-md border border-base bg-white p-sm\">\r\n                  <ed-icon name=\"calendar_month\" [size]=\"20\" class=\"shrink-0 text-primary\" />\r\n                <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\r\n                  <span class=\"fs-sm text-dark\">Allow same-day booking</span>\r\n                  <span class=\"fs-xs text-light\">\r\n                    Let patients book appointments today.\r\n                  </span>\r\n                </div>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"settings-page__switch shrink-0\"\r\n                  [class.settings-page__switch--on]=\"!!fieldValue('scheduling', 'allowSameDay')\"\r\n                  [attr.aria-pressed]=\"!!fieldValue('scheduling', 'allowSameDay')\"\r\n                  aria-label=\"Allow same-day booking\"\r\n                  (click)=\"updateField('scheduling', 'allowSameDay', !fieldValue('scheduling', 'allowSameDay'))\"\r\n                >\r\n                  <span class=\"settings-page__switch-thumb\"></span>\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        } @else if (tab() === 'transcripts') {\r\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <label><span required>Keep Call Recordings</span></label>\r\n              <select\r\n                class=\"form-select is-sm\"\r\n                [ngModel]=\"numberFieldAsString('transcripts', 'recordingRetainDays')\"\r\n                (ngModelChange)=\"selectNumberField('transcripts', 'recordingRetainDays', $event)\"\r\n                autocomplete=\"off\"\r\n              >\r\n                @for (opt of retentionOptions; track opt.value) {\r\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\r\n                }\r\n              </select>\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <label><span required>Keep Transcripts</span></label>\r\n              <select\r\n                class=\"form-select is-sm\"\r\n                [ngModel]=\"numberFieldAsString('transcripts', 'transcriptRetainDays')\"\r\n                (ngModelChange)=\"selectNumberField('transcripts', 'transcriptRetainDays', $event)\"\r\n                autocomplete=\"off\"\r\n              >\r\n                @for (opt of retentionOptions; track opt.value) {\r\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\r\n                }\r\n              </select>\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <div class=\"flex items-center gap-xs\">\r\n                <label class=\"m-0\">Disclosure Warning</label>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"settings-page__switch shrink-0\"\r\n                  [class.settings-page__switch--on]=\"disclosureEnabled()\"\r\n                  [attr.aria-pressed]=\"disclosureEnabled()\"\r\n                  aria-label=\"Disclosure Warning\"\r\n                  (click)=\"setDisclosureEnabled(!disclosureEnabled())\"\r\n                >\r\n                  <span class=\"settings-page__switch-thumb\"></span>\r\n                </button>\r\n              </div>\r\n              @if (disclosureEnabled()) {\r\n                <textarea\r\n                  class=\"form-textarea min-h-24\"\r\n                  rows=\"4\"\r\n                  [maxlength]=\"disclosureMax\"\r\n                  [ngModel]=\"disclosureText()\"\r\n                  (ngModelChange)=\"updateDisclosureText($event)\"\r\n                  autocomplete=\"off\"\r\n                ></textarea>\r\n              }\r\n            </div>\r\n          </div>\r\n        } @else if (tab() === 'advanced') {\r\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\r\n            <div class=\"flex items-center gap-sm rounded-md border border-base bg-white p-sm\">\r\n              <span class=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary-50 text-primary\" aria-hidden=\"true\">\r\n                <ed-icon name=\"sparkle\" [size]=\"20\" />\r\n              </span>\r\n              <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\r\n                <span class=\"fs-sm text-dark\">\r\n                  @if (toggling()) {\r\n                    Updating\u2026\r\n                  } @else if (online() === true) {\r\n                    Agent online\r\n                  } @else if (online() === false) {\r\n                    Agent offline\r\n                  } @else {\r\n                    Status unknown\r\n                  }\r\n                </span>\r\n                <span class=\"fs-xs text-light\">\r\n                  @if (online() === true) {\r\n                    AI receptionist is answering inbound calls.\r\n                  } @else if (online() === false) {\r\n                    AI is offline \u2014 calls go to the front desk.\r\n                  } @else {\r\n                    Checking agent status\u2026\r\n                  }\r\n                </span>\r\n              </div>\r\n              <button\r\n                type=\"button\"\r\n                class=\"settings-page__switch shrink-0\"\r\n                [class.settings-page__switch--on]=\"online() === true\"\r\n                [disabled]=\"agentSwitchDisabled()\"\r\n                [attr.aria-pressed]=\"online() === true\"\r\n                aria-label=\"Agent online\"\r\n                (click)=\"onAgentToggleClick()\"\r\n              >\r\n                <span class=\"settings-page__switch-thumb\"></span>\r\n              </button>\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <label>Model version</label>\r\n              <input\r\n                class=\"form-input is-sm\"\r\n                type=\"text\"\r\n                [ngModel]=\"fieldValue('advanced', 'modelVersion')\"\r\n                disabled\r\n                autocomplete=\"off\"\r\n              />\r\n              <span class=\"fs-xs text-light\">Set by Edvak support.</span>\r\n            </div>\r\n\r\n            <div class=\"flex items-center gap-sm rounded-md border border-base bg-lighter px-base py-sm opacity-90\">\r\n              <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\r\n                <span class=\"fs-sm text-dark\">Debug mode</span>\r\n                <span class=\"fs-xs text-light\">Verbose logging \u2014 contact Edvak to change.</span>\r\n              </div>\r\n              <button\r\n                type=\"button\"\r\n                class=\"settings-page__switch shrink-0\"\r\n                [class.settings-page__switch--on]=\"!!fieldValue('advanced', 'debugMode')\"\r\n                disabled\r\n                [attr.aria-pressed]=\"!!fieldValue('advanced', 'debugMode')\"\r\n                aria-label=\"Debug mode\"\r\n              >\r\n                <span class=\"settings-page__switch-thumb\"></span>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        } @else {\r\n          <div class=\"grid grid-cols-2 gap-x-md gap-y-md below-md:grid-cols-1\">\r\n            @for (field of fieldsForTab(); track field.key) {\r\n              @if (field.type === 'boolean') {\r\n                <label\r\n                  class=\"col-span-full flex cursor-pointer items-center justify-between gap-base rounded-md border border-base bg-lighter px-base py-sm\"\r\n                  [class.cursor-default]=\"fieldIsReadOnly(tab(), field.key)\"\r\n                  [class.opacity-90]=\"fieldIsReadOnly(tab(), field.key)\"\r\n                >\r\n                  <div class=\"flex min-w-0 flex-col gap-2xs\">\r\n                    <span class=\"fs-sm text-dark\">{{ field.label }}</span>\r\n                    @if (field.description) {\r\n                      <span\r\n                        class=\"fs-sm text-light\"\r\n                        [class.text-lighter]=\"fieldIsReadOnly(tab(), field.key)\"\r\n                      >{{ field.description }}</span>\r\n                    }\r\n                  </div>\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    class=\"h-4 w-4 shrink-0 accent-blue-600 disabled:cursor-not-allowed\"\r\n                    [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\r\n                    [ngModel]=\"fieldValue(tab(), field.key)\"\r\n                    (ngModelChange)=\"updateField(tab(), field.key, $event)\"\r\n                    autocomplete=\"off\"\r\n                  />\r\n                </label>\r\n              } @else if (field.type === 'select' && field.options?.length) {\r\n                <div class=\"flex flex-col gap-xs\">\r\n                  <label>{{ field.label }}</label>\r\n                  @if (field.description) {\r\n                    <span\r\n                      class=\"fs-sm text-light\"\r\n                      [class.text-lighter]=\"fieldIsReadOnly(tab(), field.key)\"\r\n                    >{{ field.description }}</span>\r\n                  }\r\n                  <select\r\n                    class=\"form-select is-sm\"\r\n                    [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\r\n                    [ngModel]=\"fieldValue(tab(), field.key)\"\r\n                    (ngModelChange)=\"updateField(tab(), field.key, $event)\"\r\n                    autocomplete=\"off\"\r\n                  >\r\n                    @for (opt of field.options; track opt.value) {\r\n                      <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\r\n                    }\r\n                  </select>\r\n                </div>\r\n              } @else {\r\n                <div class=\"flex flex-col gap-xs\">\r\n                  <label>{{ field.label }}</label>\r\n                  @if (field.description) {\r\n                    <span\r\n                      class=\"fs-sm text-light\"\r\n                      [class.text-lighter]=\"fieldIsReadOnly(tab(), field.key)\"\r\n                    >{{ field.description }}</span>\r\n                  }\r\n                  @if (field.type === 'number') {\r\n                    <input\r\n                      class=\"form-input is-sm\"\r\n                      type=\"number\"\r\n                      [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\r\n                      [ngModel]=\"fieldValue(tab(), field.key)\"\r\n                      (ngModelChange)=\"updateField(tab(), field.key, +$event)\"\r\n                      autocomplete=\"off\"\r\n                    />\r\n                  } @else {\r\n                    <input\r\n                      class=\"form-input is-sm\"\r\n                      type=\"text\"\r\n                      [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\r\n                      [ngModel]=\"fieldValue(tab(), field.key)\"\r\n                      (ngModelChange)=\"updateField(tab(), field.key, $event)\"\r\n                      autocomplete=\"off\"\r\n                    />\r\n                  }\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        }\r\n</ng-template>\r\n\r\n<eds-knowledge-test-modal\r\n  [open]=\"knowledgeTestOpen()\"\r\n  [whatToSay]=\"whatToSay()\"\r\n  [whatNotToSay]=\"whatNotToSay()\"\r\n  [voiceId]=\"selectedVoiceId()\"\r\n  (closed)=\"closeTestCall()\"\r\n/>\r\n\r\n@if (confirmOffOpen()) {\r\n  <app-modal\r\n    title=\"Turn off AI receptionist?\"\r\n    subtitle=\"Inbound callers will be transferred to the front desk instead of the AI.\"\r\n    maxWidth=\"480px\"\r\n    (closed)=\"cancelConfirmOff()\"\r\n  >\r\n    <p class=\"mb-4 m-0 text-sm leading-normal text-zinc-500\">While offline, the AI will not answer calls. Callers are routed to the human receptionist.</p>\r\n    <div class=\"flex justify-end gap-2\">\r\n      <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"cancelConfirmOff()\">Cancel</ed-button>\r\n      <ed-button variant=\"danger\" fill size=\"sm\" [disabled]=\"toggling()\" (click$)=\"confirmTurnOff()\">\r\n        Turn off AI receptionist\r\n      </ed-button>\r\n    </div>\r\n  </app-modal>\r\n}\r\n", styles: [":host{display:block}:host.settings-page-host--drawer{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.settings-page__layout{grid-template-columns:240px minmax(0,1fr)}.settings-page__nav-item:hover{background:var(--eds-surface-l1, #f7f9fa);color:var(--eds-text-primary, #41464c)}.settings-page__nav-item--active{background:var(--eds-color-primary-light, #eaf1fe);color:var(--eds-text-brand, #2162f0)}.settings-page__nav-item--disabled,.settings-page__nav-item:disabled{opacity:.45;cursor:not-allowed;color:var(--eds-text-tertiary, #767676)}.settings-page__nav-item--disabled:hover,.settings-page__nav-item:disabled:hover{background:none;color:var(--eds-text-tertiary, #767676)}.settings-page__select{min-height:2.25rem;background:#fff;border:1px solid #c5c7d0;color:#1f2328}.settings-page__locations-menu{box-shadow:0 8px 24px #0f172a29}.settings-page__voice-play{color:var(--eds-text-primary, #41464c)}.settings-page__voice-play:hover:not(:disabled){border-color:var(--eds-brand-600, #2162f0);color:var(--eds-brand-600, #2162f0)}.settings-page__tone--active{background:var(--eds-surface-l0, #fff);border-color:var(--eds-brand-600, #2162f0);color:var(--eds-brand-600, #2162f0)}.settings-page__var-chip:hover{border-color:var(--eds-brand-300, #94c5f9);color:var(--eds-brand-600, #2162f0)}.settings-page__switch{width:44px;height:26px;border-radius:999px;border:none;background:var(--eds-gray-300, #cbd5e1);padding:3px;cursor:pointer;transition:background .15s ease}.settings-page__switch--on{background:var(--eds-brand-600, #2162f0)}.settings-page__switch:disabled{opacity:.55;cursor:not-allowed}.settings-page__switch-thumb{display:block;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0f172a33;transition:transform .15s ease}.settings-page__switch--on .settings-page__switch-thumb{transform:translate(18px)}.settings-page__booking-option:hover:not(:disabled){border-color:#94c5f9;background:#f8fbff}.settings-page__booking-option--active{border-color:var(--eds-brand-600, #2162f0);background:var(--eds-color-primary-light, #eaf1fe)}.settings-page__booking-option:disabled{opacity:.7;cursor:wait}.settings-page__booking-radio--on{border-color:var(--eds-brand-600, #2162f0);background:var(--eds-brand-600, #2162f0);box-shadow:inset 0 0 0 3px #fff}.form-input:disabled,.form-select:disabled{color:var(--eds-color-text-muted, #64748b);background:var(--eds-color-surface-alt, #f1f5f9);border-color:var(--eds-color-border, #e2e8f0);cursor:not-allowed;opacity:1}@media(max-width:960px){.settings-page__layout{grid-template-columns:1fr}}\n"] }]
         }] });
 
 var settingsPage_component = /*#__PURE__*/Object.freeze({
@@ -5851,11 +5851,11 @@ class EdIconButtonComponent {
             e.stopPropagation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EdIconButtonComponent, isStandalone: true, selector: "ed-icon-button", inputs: { label: "label", name: "name", size: "size", variant: "variant", allowBubble: ["allowBubble", "allowBubble", booleanAttribute], ghost: ["ghost", "ghost", booleanAttribute], outline: ["outline", "outline", booleanAttribute], solid: ["solid", "solid", booleanAttribute], subtle: ["subtle", "subtle", booleanAttribute], shape: "shape", type: "type", disabled: ["disabled", "disabled", booleanAttribute], loading: ["loading", "loading", booleanAttribute], toggle: ["toggle", "toggle", booleanAttribute], pressed: ["pressed", "pressed", booleanAttribute], id: "id", title: "title", nameAttr: "nameAttr", value: "value", autofocus: ["autofocus", "autofocus", booleanAttribute], tabIndex: "tabIndex" }, outputs: { click: "click", focus: "focus", blur: "blur", click$: "click$", focus$: "focus$", blur$: "blur$" }, host: { listeners: { "click": "stopClickBubble($event)", "pointerdown": "stopPointerDownBubble($event)", "pointerup": "stopPointerUpBubble($event)", "mousedown": "stopMouseDownBubble($event)", "mouseup": "stopMouseUpBubble($event)" }, properties: { "style.--btn-size": "this.btnSizeVar", "style.--ib-spinner": "this.spinnerSizeVar", "style.--btn-radius": "this.btnRadiusVar" } }, ngImport: i0, template: "<button\n  class=\"icon-btn\"\n  [attr.id]=\"id || null\"\n  [attr.title]=\"title || null\"\n  [type]=\"type\"\n  [disabled]=\"isDisabled\"\n  [attr.autofocus]=\"autofocus ? '' : null\"\n  [attr.tabindex]=\"tabIndex ?? null\"\n  [attr.name]=\"nameAttr || null\"\n  [attr.value]=\"value || null\"\n  [attr.aria-label]=\"label\"\n  [attr.aria-busy]=\"ariaBusy\"\n  [attr.aria-disabled]=\"isDisabled ? 'true' : null\"\n  [attr.aria-pressed]=\"toggle ? (pressed ? 'true' : 'false') : null\"\n  [attr.variant]=\"variant\"\n  [attr.shape]=\"shape\"\n  [attr.size]=\"size\"\n  [attr.ghost]=\"effectiveStyle === 'ghost' ? '' : null\"\n  [attr.outline]=\"effectiveStyle === 'outline' ? '' : null\"\n  [attr.solid]=\"effectiveStyle === 'solid' ? '' : null\"\n  [attr.subtle]=\"effectiveStyle === 'subtle' ? '' : null\"\n  (click)=\"onClick($event)\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  <span class=\"icon-slot\" aria-hidden=\"true\">\n    <ed-icon [name]=\"name\" [size]=\"iconSize\" color=\"currentColor\" />\n  </span>\n\n  @if (loading) {\n    <span aria-live=\"polite\" class=\"sr-only\">Loading\u2026</span>\n    <span class=\"spinner\" aria-hidden=\"true\"></span>\n  }\n</button>\n", styles: [":host{--btn-size: 32px;--btn-radius: 6px;--ib-spinner: 18px;--ib-spinner-stroke: 2px;display:inline-flex}.icon-btn{-webkit-tap-highlight-color:transparent;position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--btn-size);block-size:var(--btn-size);border:1px solid transparent;border-radius:var(--btn-radius);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,transform .06s ease,box-shadow .12s ease}.icon-btn[disabled]{opacity:.45;cursor:not-allowed}.icon-btn[shape=circle]{border-radius:9999px}.icon-btn[ghost][variant=default]{color:hsl(var(--text-foreground))}.icon-btn[ghost][variant=default]:hover{--tw-border-opacity: 1;border-color:rgb(231 229 228 / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=default]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1))}.icon-btn[ghost][variant=primary]{--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=primary]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-primary) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1))}.icon-btn[ghost][variant=secondary]{color:hsl(var(--text-foreground))}.icon-btn[ghost][variant=secondary]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-100) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=secondary]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-200) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-100) / var(--tw-bg-opacity, 1))}.icon-btn[ghost][variant=success]{--tw-text-opacity: 1;color:hsl(var(--color-success) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=success]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-success-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-success-600) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=success]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-success-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-success-50) / var(--tw-bg-opacity, 1))}.icon-btn[ghost][variant=warning]{--tw-text-opacity: 1;color:hsl(var(--color-warning) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=warning]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-warning-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-warning-600) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=warning]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-warning-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-50) / var(--tw-bg-opacity, 1))}.icon-btn[ghost][variant=danger]{--tw-text-opacity: 1;color:hsl(var(--color-danger-400) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=danger]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-danger-100) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-danger-600) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=danger]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-danger-200) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-50) / var(--tw-bg-opacity, 1))}.icon-btn[ghost][variant=info]{--tw-text-opacity: 1;color:hsl(var(--color-info-400) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=info]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-info-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-info-600) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=info]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-info-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-info-50) / var(--tw-bg-opacity, 1))}.icon-btn[subtle][variant=default]{--tw-bg-opacity: 1;background-color:rgb(250 250 249 / var(--tw-bg-opacity, 1));color:hsl(var(--text-foreground))}.icon-btn[subtle][variant=default]:hover{--tw-bg-opacity: 1;background-color:rgb(245 245 244 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=default]:active{--tw-bg-opacity: 1;background-color:rgb(231 229 228 / var(--tw-bg-opacity, 1))}.icon-btn[subtle][variant=primary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=primary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary-700) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-200) / var(--tw-bg-opacity, 1))}.icon-btn[subtle][variant=secondary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=secondary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary-700) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=secondary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-200) / var(--tw-bg-opacity, 1))}.icon-btn[subtle][variant=success]{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-success) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=success]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-success-700) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=success]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-200) / var(--tw-bg-opacity, 1))}.icon-btn[subtle][variant=warning]{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-warning-700) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=warning]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-warning-800) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=warning]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-200) / var(--tw-bg-opacity, 1))}.icon-btn[subtle][variant=danger]{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-danger-600) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=danger]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-danger-700) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=danger]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-200) / var(--tw-bg-opacity, 1))}.icon-btn[subtle][variant=info]{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-info-600) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=info]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-info-700) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=info]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-200) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=default]{--tw-bg-opacity: 1;background-color:rgb(231 229 228 / var(--tw-bg-opacity, 1));color:hsl(var(--text-foreground))}.icon-btn[solid][variant=default]:hover{--tw-bg-opacity: 1;background-color:rgb(214 211 209 / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=default]:active{--tw-bg-opacity: 1;background-color:rgb(168 162 158 / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=primary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[solid][variant=primary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-600) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-700) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=secondary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[solid][variant=secondary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-600) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=secondary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-700) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=success]{--tw-bg-opacity: 1;background-color:hsl(var(--color-success) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[solid][variant=success]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-600) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=success]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-700) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=warning]{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[solid][variant=warning]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-600) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=warning]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-700) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=danger]{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[solid][variant=danger]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-600) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=danger]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-700) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=info]{--tw-bg-opacity: 1;background-color:hsl(var(--color-info) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[solid][variant=info]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-600) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=info]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-700) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=default]{--tw-border-opacity: 1;border-color:rgb(214 211 209 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));color:hsl(var(--text-foreground))}.icon-btn[outline][variant=default]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-400) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[outline][variant=default]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-100) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=primary]{--tw-border-opacity: 1;border-color:hsl(var(--color-primary) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[outline][variant=primary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-600) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-700) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=secondary]{--tw-border-opacity: 1;border-color:hsl(var(--color-primary) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));color:hsl(var(--text-foreground))}.icon-btn[outline][variant=secondary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-600) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=secondary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-700) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=success]{--tw-bg-opacity: 1;background-color:hsl(var(--color-success) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[outline][variant=success]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-600) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=success]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-700) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=warning]{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[outline][variant=warning]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-600) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=warning]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-700) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=danger]{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[outline][variant=danger]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-600) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=danger]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-700) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=info]{--tw-bg-opacity: 1;background-color:hsl(var(--color-info) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[outline][variant=info]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-600) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=info]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-700) / var(--tw-bg-opacity, 1))}.icon-slot{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;transition:opacity .12s ease}.icon-btn[aria-busy=true] .icon-slot{opacity:.35}.spinner{position:absolute;inset:0;margin:auto;inline-size:var(--ib-spinner);block-size:var(--ib-spinner);border-radius:9999px;border:var(--ib-spinner-stroke) solid currentColor;border-right-color:transparent;animation:ib-spin .8s linear infinite;pointer-events:none;z-index:1}@keyframes ib-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation:none}.icon-btn{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ed-icon", inputs: ["name", "size", "color", "cssClass", "decorative", "ariaHidden", "ariaLabel", "title", "desc", "focusable", "tabIndex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EdIconButtonComponent, isStandalone: true, selector: "ed-icon-button", inputs: { label: "label", name: "name", size: "size", variant: "variant", allowBubble: ["allowBubble", "allowBubble", booleanAttribute], ghost: ["ghost", "ghost", booleanAttribute], outline: ["outline", "outline", booleanAttribute], solid: ["solid", "solid", booleanAttribute], subtle: ["subtle", "subtle", booleanAttribute], shape: "shape", type: "type", disabled: ["disabled", "disabled", booleanAttribute], loading: ["loading", "loading", booleanAttribute], toggle: ["toggle", "toggle", booleanAttribute], pressed: ["pressed", "pressed", booleanAttribute], id: "id", title: "title", nameAttr: "nameAttr", value: "value", autofocus: ["autofocus", "autofocus", booleanAttribute], tabIndex: "tabIndex" }, outputs: { click: "click", focus: "focus", blur: "blur", click$: "click$", focus$: "focus$", blur$: "blur$" }, host: { listeners: { "click": "stopClickBubble($event)", "pointerdown": "stopPointerDownBubble($event)", "pointerup": "stopPointerUpBubble($event)", "mousedown": "stopMouseDownBubble($event)", "mouseup": "stopMouseUpBubble($event)" }, properties: { "style.--btn-size": "this.btnSizeVar", "style.--ib-spinner": "this.spinnerSizeVar", "style.--btn-radius": "this.btnRadiusVar" } }, ngImport: i0, template: "<button\r\n  class=\"icon-btn\"\r\n  [attr.id]=\"id || null\"\r\n  [attr.title]=\"title || null\"\r\n  [type]=\"type\"\r\n  [disabled]=\"isDisabled\"\r\n  [attr.autofocus]=\"autofocus ? '' : null\"\r\n  [attr.tabindex]=\"tabIndex ?? null\"\r\n  [attr.name]=\"nameAttr || null\"\r\n  [attr.value]=\"value || null\"\r\n  [attr.aria-label]=\"label\"\r\n  [attr.aria-busy]=\"ariaBusy\"\r\n  [attr.aria-disabled]=\"isDisabled ? 'true' : null\"\r\n  [attr.aria-pressed]=\"toggle ? (pressed ? 'true' : 'false') : null\"\r\n  [attr.variant]=\"variant\"\r\n  [attr.shape]=\"shape\"\r\n  [attr.size]=\"size\"\r\n  [attr.ghost]=\"effectiveStyle === 'ghost' ? '' : null\"\r\n  [attr.outline]=\"effectiveStyle === 'outline' ? '' : null\"\r\n  [attr.solid]=\"effectiveStyle === 'solid' ? '' : null\"\r\n  [attr.subtle]=\"effectiveStyle === 'subtle' ? '' : null\"\r\n  (click)=\"onClick($event)\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <span class=\"icon-slot\" aria-hidden=\"true\">\r\n    <ed-icon [name]=\"name\" [size]=\"iconSize\" color=\"currentColor\" />\r\n  </span>\r\n\r\n  @if (loading) {\r\n    <span aria-live=\"polite\" class=\"sr-only\">Loading\u2026</span>\r\n    <span class=\"spinner\" aria-hidden=\"true\"></span>\r\n  }\r\n</button>\r\n", styles: [":host{--btn-size: 32px;--btn-radius: 6px;--ib-spinner: 18px;--ib-spinner-stroke: 2px;display:inline-flex}.icon-btn{-webkit-tap-highlight-color:transparent;position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--btn-size);block-size:var(--btn-size);border:1px solid transparent;border-radius:var(--btn-radius);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,transform .06s ease,box-shadow .12s ease}.icon-btn[disabled]{opacity:.45;cursor:not-allowed}.icon-btn[shape=circle]{border-radius:9999px}.icon-btn[ghost][variant=default]{color:hsl(var(--text-foreground))}.icon-btn[ghost][variant=default]:hover{--tw-border-opacity: 1;border-color:rgb(231 229 228 / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=default]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1))}.icon-btn[ghost][variant=primary]{--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=primary]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-primary) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1))}.icon-btn[ghost][variant=secondary]{color:hsl(var(--text-foreground))}.icon-btn[ghost][variant=secondary]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-100) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=secondary]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-200) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-100) / var(--tw-bg-opacity, 1))}.icon-btn[ghost][variant=success]{--tw-text-opacity: 1;color:hsl(var(--color-success) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=success]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-success-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-success-600) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=success]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-success-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-success-50) / var(--tw-bg-opacity, 1))}.icon-btn[ghost][variant=warning]{--tw-text-opacity: 1;color:hsl(var(--color-warning) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=warning]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-warning-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-warning-600) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=warning]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-warning-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-50) / var(--tw-bg-opacity, 1))}.icon-btn[ghost][variant=danger]{--tw-text-opacity: 1;color:hsl(var(--color-danger-400) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=danger]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-danger-100) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-danger-600) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=danger]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-danger-200) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-50) / var(--tw-bg-opacity, 1))}.icon-btn[ghost][variant=info]{--tw-text-opacity: 1;color:hsl(var(--color-info-400) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=info]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-info-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-info-600) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=info]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-info-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-info-50) / var(--tw-bg-opacity, 1))}.icon-btn[subtle][variant=default]{--tw-bg-opacity: 1;background-color:rgb(250 250 249 / var(--tw-bg-opacity, 1));color:hsl(var(--text-foreground))}.icon-btn[subtle][variant=default]:hover{--tw-bg-opacity: 1;background-color:rgb(245 245 244 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=default]:active{--tw-bg-opacity: 1;background-color:rgb(231 229 228 / var(--tw-bg-opacity, 1))}.icon-btn[subtle][variant=primary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=primary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary-700) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-200) / var(--tw-bg-opacity, 1))}.icon-btn[subtle][variant=secondary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=secondary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary-700) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=secondary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-200) / var(--tw-bg-opacity, 1))}.icon-btn[subtle][variant=success]{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-success) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=success]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-success-700) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=success]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-200) / var(--tw-bg-opacity, 1))}.icon-btn[subtle][variant=warning]{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-warning-700) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=warning]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-warning-800) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=warning]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-200) / var(--tw-bg-opacity, 1))}.icon-btn[subtle][variant=danger]{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-danger-600) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=danger]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-danger-700) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=danger]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-200) / var(--tw-bg-opacity, 1))}.icon-btn[subtle][variant=info]{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-info-600) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=info]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-info-700) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=info]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-200) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=default]{--tw-bg-opacity: 1;background-color:rgb(231 229 228 / var(--tw-bg-opacity, 1));color:hsl(var(--text-foreground))}.icon-btn[solid][variant=default]:hover{--tw-bg-opacity: 1;background-color:rgb(214 211 209 / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=default]:active{--tw-bg-opacity: 1;background-color:rgb(168 162 158 / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=primary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[solid][variant=primary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-600) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-700) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=secondary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[solid][variant=secondary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-600) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=secondary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-700) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=success]{--tw-bg-opacity: 1;background-color:hsl(var(--color-success) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[solid][variant=success]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-600) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=success]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-700) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=warning]{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[solid][variant=warning]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-600) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=warning]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-700) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=danger]{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[solid][variant=danger]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-600) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=danger]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-700) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=info]{--tw-bg-opacity: 1;background-color:hsl(var(--color-info) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[solid][variant=info]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-600) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=info]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-700) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=default]{--tw-border-opacity: 1;border-color:rgb(214 211 209 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));color:hsl(var(--text-foreground))}.icon-btn[outline][variant=default]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-400) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[outline][variant=default]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-100) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=primary]{--tw-border-opacity: 1;border-color:hsl(var(--color-primary) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[outline][variant=primary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-600) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-700) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=secondary]{--tw-border-opacity: 1;border-color:hsl(var(--color-primary) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));color:hsl(var(--text-foreground))}.icon-btn[outline][variant=secondary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-600) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=secondary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-700) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=success]{--tw-bg-opacity: 1;background-color:hsl(var(--color-success) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[outline][variant=success]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-600) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=success]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-700) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=warning]{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[outline][variant=warning]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-600) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=warning]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-700) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=danger]{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[outline][variant=danger]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-600) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=danger]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-700) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=info]{--tw-bg-opacity: 1;background-color:hsl(var(--color-info) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[outline][variant=info]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-600) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=info]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-700) / var(--tw-bg-opacity, 1))}.icon-slot{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;transition:opacity .12s ease}.icon-btn[aria-busy=true] .icon-slot{opacity:.35}.spinner{position:absolute;inset:0;margin:auto;inline-size:var(--ib-spinner);block-size:var(--ib-spinner);border-radius:9999px;border:var(--ib-spinner-stroke) solid currentColor;border-right-color:transparent;animation:ib-spin .8s linear infinite;pointer-events:none;z-index:1}@keyframes ib-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation:none}.icon-btn{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ed-icon", inputs: ["name", "size", "color", "cssClass", "decorative", "ariaHidden", "ariaLabel", "title", "desc", "focusable", "tabIndex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdIconButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ed-icon-button', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  class=\"icon-btn\"\n  [attr.id]=\"id || null\"\n  [attr.title]=\"title || null\"\n  [type]=\"type\"\n  [disabled]=\"isDisabled\"\n  [attr.autofocus]=\"autofocus ? '' : null\"\n  [attr.tabindex]=\"tabIndex ?? null\"\n  [attr.name]=\"nameAttr || null\"\n  [attr.value]=\"value || null\"\n  [attr.aria-label]=\"label\"\n  [attr.aria-busy]=\"ariaBusy\"\n  [attr.aria-disabled]=\"isDisabled ? 'true' : null\"\n  [attr.aria-pressed]=\"toggle ? (pressed ? 'true' : 'false') : null\"\n  [attr.variant]=\"variant\"\n  [attr.shape]=\"shape\"\n  [attr.size]=\"size\"\n  [attr.ghost]=\"effectiveStyle === 'ghost' ? '' : null\"\n  [attr.outline]=\"effectiveStyle === 'outline' ? '' : null\"\n  [attr.solid]=\"effectiveStyle === 'solid' ? '' : null\"\n  [attr.subtle]=\"effectiveStyle === 'subtle' ? '' : null\"\n  (click)=\"onClick($event)\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  <span class=\"icon-slot\" aria-hidden=\"true\">\n    <ed-icon [name]=\"name\" [size]=\"iconSize\" color=\"currentColor\" />\n  </span>\n\n  @if (loading) {\n    <span aria-live=\"polite\" class=\"sr-only\">Loading\u2026</span>\n    <span class=\"spinner\" aria-hidden=\"true\"></span>\n  }\n</button>\n", styles: [":host{--btn-size: 32px;--btn-radius: 6px;--ib-spinner: 18px;--ib-spinner-stroke: 2px;display:inline-flex}.icon-btn{-webkit-tap-highlight-color:transparent;position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--btn-size);block-size:var(--btn-size);border:1px solid transparent;border-radius:var(--btn-radius);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,transform .06s ease,box-shadow .12s ease}.icon-btn[disabled]{opacity:.45;cursor:not-allowed}.icon-btn[shape=circle]{border-radius:9999px}.icon-btn[ghost][variant=default]{color:hsl(var(--text-foreground))}.icon-btn[ghost][variant=default]:hover{--tw-border-opacity: 1;border-color:rgb(231 229 228 / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=default]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1))}.icon-btn[ghost][variant=primary]{--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=primary]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-primary) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1))}.icon-btn[ghost][variant=secondary]{color:hsl(var(--text-foreground))}.icon-btn[ghost][variant=secondary]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-100) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=secondary]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-200) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-100) / var(--tw-bg-opacity, 1))}.icon-btn[ghost][variant=success]{--tw-text-opacity: 1;color:hsl(var(--color-success) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=success]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-success-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-success-600) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=success]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-success-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-success-50) / var(--tw-bg-opacity, 1))}.icon-btn[ghost][variant=warning]{--tw-text-opacity: 1;color:hsl(var(--color-warning) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=warning]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-warning-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-warning-600) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=warning]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-warning-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-50) / var(--tw-bg-opacity, 1))}.icon-btn[ghost][variant=danger]{--tw-text-opacity: 1;color:hsl(var(--color-danger-400) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=danger]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-danger-100) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-danger-600) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=danger]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-danger-200) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-50) / var(--tw-bg-opacity, 1))}.icon-btn[ghost][variant=info]{--tw-text-opacity: 1;color:hsl(var(--color-info-400) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=info]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-info-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-info-600) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=info]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-info-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-info-50) / var(--tw-bg-opacity, 1))}.icon-btn[subtle][variant=default]{--tw-bg-opacity: 1;background-color:rgb(250 250 249 / var(--tw-bg-opacity, 1));color:hsl(var(--text-foreground))}.icon-btn[subtle][variant=default]:hover{--tw-bg-opacity: 1;background-color:rgb(245 245 244 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=default]:active{--tw-bg-opacity: 1;background-color:rgb(231 229 228 / var(--tw-bg-opacity, 1))}.icon-btn[subtle][variant=primary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=primary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary-700) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-200) / var(--tw-bg-opacity, 1))}.icon-btn[subtle][variant=secondary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=secondary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary-700) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=secondary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-200) / var(--tw-bg-opacity, 1))}.icon-btn[subtle][variant=success]{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-success) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=success]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-success-700) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=success]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-200) / var(--tw-bg-opacity, 1))}.icon-btn[subtle][variant=warning]{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-warning-700) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=warning]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-warning-800) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=warning]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-200) / var(--tw-bg-opacity, 1))}.icon-btn[subtle][variant=danger]{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-danger-600) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=danger]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-danger-700) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=danger]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-200) / var(--tw-bg-opacity, 1))}.icon-btn[subtle][variant=info]{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-info-600) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=info]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-info-700) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=info]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-200) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=default]{--tw-bg-opacity: 1;background-color:rgb(231 229 228 / var(--tw-bg-opacity, 1));color:hsl(var(--text-foreground))}.icon-btn[solid][variant=default]:hover{--tw-bg-opacity: 1;background-color:rgb(214 211 209 / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=default]:active{--tw-bg-opacity: 1;background-color:rgb(168 162 158 / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=primary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[solid][variant=primary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-600) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-700) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=secondary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[solid][variant=secondary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-600) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=secondary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-700) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=success]{--tw-bg-opacity: 1;background-color:hsl(var(--color-success) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[solid][variant=success]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-600) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=success]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-700) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=warning]{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[solid][variant=warning]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-600) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=warning]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-700) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=danger]{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[solid][variant=danger]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-600) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=danger]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-700) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=info]{--tw-bg-opacity: 1;background-color:hsl(var(--color-info) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[solid][variant=info]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-600) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=info]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-700) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=default]{--tw-border-opacity: 1;border-color:rgb(214 211 209 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));color:hsl(var(--text-foreground))}.icon-btn[outline][variant=default]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-400) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[outline][variant=default]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-100) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=primary]{--tw-border-opacity: 1;border-color:hsl(var(--color-primary) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[outline][variant=primary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-600) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-700) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=secondary]{--tw-border-opacity: 1;border-color:hsl(var(--color-primary) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));color:hsl(var(--text-foreground))}.icon-btn[outline][variant=secondary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-600) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=secondary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-700) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=success]{--tw-bg-opacity: 1;background-color:hsl(var(--color-success) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[outline][variant=success]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-600) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=success]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-700) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=warning]{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[outline][variant=warning]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-600) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=warning]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-700) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=danger]{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[outline][variant=danger]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-600) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=danger]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-700) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=info]{--tw-bg-opacity: 1;background-color:hsl(var(--color-info) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[outline][variant=info]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-600) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=info]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-700) / var(--tw-bg-opacity, 1))}.icon-slot{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;transition:opacity .12s ease}.icon-btn[aria-busy=true] .icon-slot{opacity:.35}.spinner{position:absolute;inset:0;margin:auto;inline-size:var(--ib-spinner);block-size:var(--ib-spinner);border-radius:9999px;border:var(--ib-spinner-stroke) solid currentColor;border-right-color:transparent;animation:ib-spin .8s linear infinite;pointer-events:none;z-index:1}@keyframes ib-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation:none}.icon-btn{transition:none}}\n"] }]
+            args: [{ selector: 'ed-icon-button', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  class=\"icon-btn\"\r\n  [attr.id]=\"id || null\"\r\n  [attr.title]=\"title || null\"\r\n  [type]=\"type\"\r\n  [disabled]=\"isDisabled\"\r\n  [attr.autofocus]=\"autofocus ? '' : null\"\r\n  [attr.tabindex]=\"tabIndex ?? null\"\r\n  [attr.name]=\"nameAttr || null\"\r\n  [attr.value]=\"value || null\"\r\n  [attr.aria-label]=\"label\"\r\n  [attr.aria-busy]=\"ariaBusy\"\r\n  [attr.aria-disabled]=\"isDisabled ? 'true' : null\"\r\n  [attr.aria-pressed]=\"toggle ? (pressed ? 'true' : 'false') : null\"\r\n  [attr.variant]=\"variant\"\r\n  [attr.shape]=\"shape\"\r\n  [attr.size]=\"size\"\r\n  [attr.ghost]=\"effectiveStyle === 'ghost' ? '' : null\"\r\n  [attr.outline]=\"effectiveStyle === 'outline' ? '' : null\"\r\n  [attr.solid]=\"effectiveStyle === 'solid' ? '' : null\"\r\n  [attr.subtle]=\"effectiveStyle === 'subtle' ? '' : null\"\r\n  (click)=\"onClick($event)\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <span class=\"icon-slot\" aria-hidden=\"true\">\r\n    <ed-icon [name]=\"name\" [size]=\"iconSize\" color=\"currentColor\" />\r\n  </span>\r\n\r\n  @if (loading) {\r\n    <span aria-live=\"polite\" class=\"sr-only\">Loading\u2026</span>\r\n    <span class=\"spinner\" aria-hidden=\"true\"></span>\r\n  }\r\n</button>\r\n", styles: [":host{--btn-size: 32px;--btn-radius: 6px;--ib-spinner: 18px;--ib-spinner-stroke: 2px;display:inline-flex}.icon-btn{-webkit-tap-highlight-color:transparent;position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--btn-size);block-size:var(--btn-size);border:1px solid transparent;border-radius:var(--btn-radius);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,transform .06s ease,box-shadow .12s ease}.icon-btn[disabled]{opacity:.45;cursor:not-allowed}.icon-btn[shape=circle]{border-radius:9999px}.icon-btn[ghost][variant=default]{color:hsl(var(--text-foreground))}.icon-btn[ghost][variant=default]:hover{--tw-border-opacity: 1;border-color:rgb(231 229 228 / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=default]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1))}.icon-btn[ghost][variant=primary]{--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=primary]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-primary) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1))}.icon-btn[ghost][variant=secondary]{color:hsl(var(--text-foreground))}.icon-btn[ghost][variant=secondary]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-100) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=secondary]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-200) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-100) / var(--tw-bg-opacity, 1))}.icon-btn[ghost][variant=success]{--tw-text-opacity: 1;color:hsl(var(--color-success) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=success]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-success-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-success-600) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=success]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-success-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-success-50) / var(--tw-bg-opacity, 1))}.icon-btn[ghost][variant=warning]{--tw-text-opacity: 1;color:hsl(var(--color-warning) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=warning]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-warning-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-warning-600) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=warning]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-warning-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-50) / var(--tw-bg-opacity, 1))}.icon-btn[ghost][variant=danger]{--tw-text-opacity: 1;color:hsl(var(--color-danger-400) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=danger]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-danger-100) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-danger-600) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=danger]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-danger-200) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-50) / var(--tw-bg-opacity, 1))}.icon-btn[ghost][variant=info]{--tw-text-opacity: 1;color:hsl(var(--color-info-400) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=info]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-info-200) / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-info-600) / var(--tw-text-opacity, 1))}.icon-btn[ghost][variant=info]:active{--tw-border-opacity: 1;border-color:hsl(var(--color-info-300) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-info-50) / var(--tw-bg-opacity, 1))}.icon-btn[subtle][variant=default]{--tw-bg-opacity: 1;background-color:rgb(250 250 249 / var(--tw-bg-opacity, 1));color:hsl(var(--text-foreground))}.icon-btn[subtle][variant=default]:hover{--tw-bg-opacity: 1;background-color:rgb(245 245 244 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=default]:active{--tw-bg-opacity: 1;background-color:rgb(231 229 228 / var(--tw-bg-opacity, 1))}.icon-btn[subtle][variant=primary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=primary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary-700) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-200) / var(--tw-bg-opacity, 1))}.icon-btn[subtle][variant=secondary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=secondary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-secondary-700) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=secondary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-200) / var(--tw-bg-opacity, 1))}.icon-btn[subtle][variant=success]{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-success) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=success]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-success-700) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=success]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-200) / var(--tw-bg-opacity, 1))}.icon-btn[subtle][variant=warning]{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-warning-700) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=warning]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-warning-800) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=warning]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-200) / var(--tw-bg-opacity, 1))}.icon-btn[subtle][variant=danger]{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-danger-600) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=danger]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-danger-700) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=danger]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-200) / var(--tw-bg-opacity, 1))}.icon-btn[subtle][variant=info]{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-info-600) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=info]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-100) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-info-700) / var(--tw-text-opacity, 1))}.icon-btn[subtle][variant=info]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-200) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=default]{--tw-bg-opacity: 1;background-color:rgb(231 229 228 / var(--tw-bg-opacity, 1));color:hsl(var(--text-foreground))}.icon-btn[solid][variant=default]:hover{--tw-bg-opacity: 1;background-color:rgb(214 211 209 / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=default]:active{--tw-bg-opacity: 1;background-color:rgb(168 162 158 / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=primary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[solid][variant=primary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-600) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-700) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=secondary]{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[solid][variant=secondary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-600) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=secondary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-700) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=success]{--tw-bg-opacity: 1;background-color:hsl(var(--color-success) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[solid][variant=success]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-600) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=success]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-700) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=warning]{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[solid][variant=warning]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-600) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=warning]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-700) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=danger]{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[solid][variant=danger]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-600) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=danger]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-700) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=info]{--tw-bg-opacity: 1;background-color:hsl(var(--color-info) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[solid][variant=info]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-600) / var(--tw-bg-opacity, 1))}.icon-btn[solid][variant=info]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-700) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=default]{--tw-border-opacity: 1;border-color:rgb(214 211 209 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));color:hsl(var(--text-foreground))}.icon-btn[outline][variant=default]:hover{--tw-border-opacity: 1;border-color:hsl(var(--color-primary-400) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-50) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[outline][variant=default]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-100) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=primary]{--tw-border-opacity: 1;border-color:hsl(var(--color-primary) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:hsl(var(--color-primary) / var(--tw-text-opacity, 1))}.icon-btn[outline][variant=primary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-600) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=primary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-primary-700) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=secondary]{--tw-border-opacity: 1;border-color:hsl(var(--color-primary) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));color:hsl(var(--text-foreground))}.icon-btn[outline][variant=secondary]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-600) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=secondary]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-secondary-700) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=success]{--tw-bg-opacity: 1;background-color:hsl(var(--color-success) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[outline][variant=success]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-600) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=success]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-success-700) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=warning]{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[outline][variant=warning]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-600) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=warning]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-warning-700) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=danger]{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[outline][variant=danger]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-600) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=danger]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-danger-700) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=info]{--tw-bg-opacity: 1;background-color:hsl(var(--color-info) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.icon-btn[outline][variant=info]:hover{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-600) / var(--tw-bg-opacity, 1))}.icon-btn[outline][variant=info]:active{--tw-bg-opacity: 1;background-color:hsl(var(--color-info-700) / var(--tw-bg-opacity, 1))}.icon-slot{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;transition:opacity .12s ease}.icon-btn[aria-busy=true] .icon-slot{opacity:.35}.spinner{position:absolute;inset:0;margin:auto;inline-size:var(--ib-spinner);block-size:var(--ib-spinner);border-radius:9999px;border:var(--ib-spinner-stroke) solid currentColor;border-right-color:transparent;animation:ib-spin .8s linear infinite;pointer-events:none;z-index:1}@keyframes ib-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation:none}.icon-btn{transition:none}}\n"] }]
         }], propDecorators: { label: [{
                 type: Input,
                 args: [{ required: true }]
@@ -5964,7 +5964,7 @@ class AgentSettingsDrawerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AgentSettingsDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: AgentSettingsDrawerComponent, isStandalone: true, selector: "eds-agent-settings-drawer", viewQueries: [{ propertyName: "settingsForm", first: true, predicate: ["settingsForm"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (open()) {\n  <div\n    edsViewportPortal\n    class=\"eds-drawer-backdrop fixed left-0 top-0 z-[100100] flex h-[100vh] w-[100vw] justify-end\"\n    (click)=\"onBackdropClick($event)\"\n    role=\"presentation\"\n  >\n    <ed-drawer\n      size=\"xl\"\n      class=\"slide-in-rtl ed-main-sidepanel h-full\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Agent Setting\"\n    >\n      <ed-drawer-header class=\"shrink-0 border-b border-zinc-200 bg-white shadow-none\">\n        <h6 data-new-heading=\"true\">Agent Setting</h6>\n        <ed-icon-button\n          name=\"close\"\n          label=\"Close\"\n          size=\"sm\"\n          ghost\n          (click$)=\"close()\"\n        />\n      </ed-drawer-header>\n\n      <ed-drawer-body class=\"min-h-0 flex-1 overflow-hidden p-0\">\n        <eds-settings-page\n          #settingsForm\n          presentation=\"drawer\"\n        />\n      </ed-drawer-body>\n\n      <ed-drawer-footer class=\"shrink-0 flex-row-reverse bg-lighter\">\n        <ed-button\n          variant=\"primary\"\n          fill\n          size=\"sm\"\n          [disabled]=\"settingsForm.saving()\"\n          (click$)=\"settingsForm.save()\"\n        >\n          {{ settingsForm.saving() ? 'Saving\u2026' : 'Save' }}\n        </ed-button>\n        <ed-button\n          variant=\"default\"\n          outline\n          size=\"sm\"\n          (click$)=\"close()\"\n        >\n          Cancel\n        </ed-button>\n        @if (settingsForm.saved()) {\n          <span class=\"mr-auto fs-sm font-medium text-green-500\">Saved</span>\n        }\n      </ed-drawer-footer>\n    </ed-drawer>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.eds-drawer-backdrop{background-color:#0f172a66}\n"], dependencies: [{ kind: "component", type: SettingsPageComponent, selector: "eds-settings-page", inputs: ["presentation"], outputs: ["savedSuccessfully"] }, { 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: 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: "directive", type: ViewportPortalDirective, selector: "[edsViewportPortal]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: AgentSettingsDrawerComponent, isStandalone: true, selector: "eds-agent-settings-drawer", viewQueries: [{ propertyName: "settingsForm", first: true, predicate: ["settingsForm"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (open()) {\r\n  <div\r\n    edsViewportPortal\r\n    class=\"eds-drawer-backdrop fixed left-0 top-0 z-[100100] flex h-[100vh] w-[100vw] justify-end\"\r\n    (click)=\"onBackdropClick($event)\"\r\n    role=\"presentation\"\r\n  >\r\n    <ed-drawer\r\n      size=\"xl\"\r\n      class=\"slide-in-rtl ed-main-sidepanel h-full\"\r\n      role=\"dialog\"\r\n      aria-modal=\"true\"\r\n      aria-label=\"Agent Setting\"\r\n    >\r\n      <ed-drawer-header class=\"shrink-0 border-b border-zinc-200 bg-white shadow-none\">\r\n        <h6 data-new-heading=\"true\">Agent Setting</h6>\r\n        <ed-icon-button\r\n          name=\"close\"\r\n          label=\"Close\"\r\n          size=\"sm\"\r\n          ghost\r\n          (click$)=\"close()\"\r\n        />\r\n      </ed-drawer-header>\r\n\r\n      <ed-drawer-body class=\"min-h-0 flex-1 overflow-hidden p-0\">\r\n        <eds-settings-page\r\n          #settingsForm\r\n          presentation=\"drawer\"\r\n        />\r\n      </ed-drawer-body>\r\n\r\n      <ed-drawer-footer class=\"shrink-0 flex-row-reverse bg-lighter\">\r\n        <ed-button\r\n          variant=\"primary\"\r\n          fill\r\n          size=\"sm\"\r\n          [disabled]=\"settingsForm.saving()\"\r\n          (click$)=\"settingsForm.save()\"\r\n        >\r\n          {{ settingsForm.saving() ? 'Saving\u2026' : 'Save' }}\r\n        </ed-button>\r\n        <ed-button\r\n          variant=\"default\"\r\n          outline\r\n          size=\"sm\"\r\n          (click$)=\"close()\"\r\n        >\r\n          Cancel\r\n        </ed-button>\r\n        @if (settingsForm.saved()) {\r\n          <span class=\"mr-auto fs-sm font-medium text-green-500\">Saved</span>\r\n        }\r\n      </ed-drawer-footer>\r\n    </ed-drawer>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";.eds-drawer-backdrop{background-color:#0f172a66}\n"], dependencies: [{ kind: "component", type: SettingsPageComponent, selector: "eds-settings-page", inputs: ["presentation"], outputs: ["savedSuccessfully"] }, { 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: 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: "directive", type: ViewportPortalDirective, selector: "[edsViewportPortal]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AgentSettingsDrawerComponent, decorators: [{
             type: Component,
@@ -5973,7 +5973,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         EdButtonComponent,
                         EdIconButtonComponent,
                         ViewportPortalDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (open()) {\n  <div\n    edsViewportPortal\n    class=\"eds-drawer-backdrop fixed left-0 top-0 z-[100100] flex h-[100vh] w-[100vw] justify-end\"\n    (click)=\"onBackdropClick($event)\"\n    role=\"presentation\"\n  >\n    <ed-drawer\n      size=\"xl\"\n      class=\"slide-in-rtl ed-main-sidepanel h-full\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Agent Setting\"\n    >\n      <ed-drawer-header class=\"shrink-0 border-b border-zinc-200 bg-white shadow-none\">\n        <h6 data-new-heading=\"true\">Agent Setting</h6>\n        <ed-icon-button\n          name=\"close\"\n          label=\"Close\"\n          size=\"sm\"\n          ghost\n          (click$)=\"close()\"\n        />\n      </ed-drawer-header>\n\n      <ed-drawer-body class=\"min-h-0 flex-1 overflow-hidden p-0\">\n        <eds-settings-page\n          #settingsForm\n          presentation=\"drawer\"\n        />\n      </ed-drawer-body>\n\n      <ed-drawer-footer class=\"shrink-0 flex-row-reverse bg-lighter\">\n        <ed-button\n          variant=\"primary\"\n          fill\n          size=\"sm\"\n          [disabled]=\"settingsForm.saving()\"\n          (click$)=\"settingsForm.save()\"\n        >\n          {{ settingsForm.saving() ? 'Saving\u2026' : 'Save' }}\n        </ed-button>\n        <ed-button\n          variant=\"default\"\n          outline\n          size=\"sm\"\n          (click$)=\"close()\"\n        >\n          Cancel\n        </ed-button>\n        @if (settingsForm.saved()) {\n          <span class=\"mr-auto fs-sm font-medium text-green-500\">Saved</span>\n        }\n      </ed-drawer-footer>\n    </ed-drawer>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.eds-drawer-backdrop{background-color:#0f172a66}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (open()) {\r\n  <div\r\n    edsViewportPortal\r\n    class=\"eds-drawer-backdrop fixed left-0 top-0 z-[100100] flex h-[100vh] w-[100vw] justify-end\"\r\n    (click)=\"onBackdropClick($event)\"\r\n    role=\"presentation\"\r\n  >\r\n    <ed-drawer\r\n      size=\"xl\"\r\n      class=\"slide-in-rtl ed-main-sidepanel h-full\"\r\n      role=\"dialog\"\r\n      aria-modal=\"true\"\r\n      aria-label=\"Agent Setting\"\r\n    >\r\n      <ed-drawer-header class=\"shrink-0 border-b border-zinc-200 bg-white shadow-none\">\r\n        <h6 data-new-heading=\"true\">Agent Setting</h6>\r\n        <ed-icon-button\r\n          name=\"close\"\r\n          label=\"Close\"\r\n          size=\"sm\"\r\n          ghost\r\n          (click$)=\"close()\"\r\n        />\r\n      </ed-drawer-header>\r\n\r\n      <ed-drawer-body class=\"min-h-0 flex-1 overflow-hidden p-0\">\r\n        <eds-settings-page\r\n          #settingsForm\r\n          presentation=\"drawer\"\r\n        />\r\n      </ed-drawer-body>\r\n\r\n      <ed-drawer-footer class=\"shrink-0 flex-row-reverse bg-lighter\">\r\n        <ed-button\r\n          variant=\"primary\"\r\n          fill\r\n          size=\"sm\"\r\n          [disabled]=\"settingsForm.saving()\"\r\n          (click$)=\"settingsForm.save()\"\r\n        >\r\n          {{ settingsForm.saving() ? 'Saving\u2026' : 'Save' }}\r\n        </ed-button>\r\n        <ed-button\r\n          variant=\"default\"\r\n          outline\r\n          size=\"sm\"\r\n          (click$)=\"close()\"\r\n        >\r\n          Cancel\r\n        </ed-button>\r\n        @if (settingsForm.saved()) {\r\n          <span class=\"mr-auto fs-sm font-medium text-green-500\">Saved</span>\r\n        }\r\n      </ed-drawer-footer>\r\n    </ed-drawer>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";.eds-drawer-backdrop{background-color:#0f172a66}\n"] }]
         }] });
 
 class EdsModuleNavComponent {
@@ -6077,7 +6077,7 @@ class EdsModuleNavComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdsModuleNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EdsModuleNavComponent, isStandalone: true, selector: "eds-module-nav", host: { classAttribute: "block shrink-0" }, ngImport: i0, template: "<nav\n  class=\"sticky top-0 flex h-screen min-h-screen w-52 flex-col overflow-y-auto border-r border-base bg-white \"\n  aria-label=\"AI Receptionist\"\n>\n  <div class=\"flex min-h-0 flex-1 flex-col  \">\n    <div\n      class=\"relative shrink-0 p-sm\"\n      data-header-menu\n      (document:click)=\"onHeaderMenuDocClick($event)\"\n    >\n      <button\n        type=\"button\"\n        class=\"ai-receptionist-nav-item flex w-full cursor-pointer items-center justify-between gap-xs rounded-md border-0 bg-transparent p-2xs text-left\"\n        [class.active]=\"brandIconActive()\"\n        [attr.aria-label]=\"headerAriaLabel()\"\n        [attr.aria-expanded]=\"headerMenuOpen()\"\n        aria-haspopup=\"menu\"\n        (mouseenter)=\"brandIconHovered.set(true)\"\n        (mouseleave)=\"brandIconHovered.set(false)\"\n        (click)=\"$event.stopPropagation(); toggleHeaderMenu()\"\n      >\n        <div class=\"flex min-w-0 flex-1 items-center gap-xs\">\n          <span\n            class=\"menu-item-icon relative flex h-9 w-9 shrink-0 items-center justify-center\"\n            aria-hidden=\"true\"\n          >\n            <ed-icon\n              name=\"ai_headset\"\n              [size]=\"20\"\n              [color]=\"brandIconColor()\"\n            />\n            @if (online() === true) {\n              <span class=\"ai-receptionist-live-dot\"></span>\n            } @else if (online() === false) {\n              <span class=\"ai-receptionist-live-dot is-offline\"></span>\n            }\n          </span>\n          <span class=\"min-w-0 truncate fs-base font-semibold text-dark\">AI Receptionist</span>\n        </div>\n        <ed-icon\n          name=\"caret_down\"\n          [size]=\"16\"\n          color=\"currentColor\"\n          class=\"shrink-0 text-light\"\n          aria-hidden=\"true\"\n        />\n      </button>\n      @if (headerMenuOpen()) {\n        <div\n          class=\"fade-in absolute right-0 top-full z-20 mt-2xs flex w-44 origin-top flex-col gap-2xs rounded-md border border-light bg-white p-2xs shadow-md\"\n          role=\"menu\"\n          aria-label=\"AI Receptionist menu\"\n        >\n          <a\n            class=\"flex w-full items-center rounded-sm px-sm py-xs fs-sm text-dark no-underline transition-colors hover:bg-lighter\"\n            routerLink=\"audit\"\n            routerLinkActive=\"bg-lighter\"\n            role=\"menuitem\"\n            (click)=\"closeHeaderMenu()\"\n          >\n            Audit Logs\n          </a>\n          <button\n            type=\"button\"\n            class=\"flex w-full cursor-pointer items-center rounded-sm border-0 bg-transparent px-sm py-xs text-left fs-sm text-dark transition-colors hover:bg-lighter\"\n            role=\"menuitem\"\n            (click)=\"openSettingsDrawer()\"\n          >\n            Settings\n          </button>\n          <div class=\"w-full border-b border-light\" role=\"presentation\"></div>\n          <div class=\"flex w-full items-center gap-2xs px-sm py-xs\" role=\"menuitem\">\n            <span class=\"min-w-0 flex-1 fs-sm text-dark\">\n              @if (online() === true) {\n                Agent is Live\n              } @else if (online() === false) {\n                Agent is Offline\n              } @else {\n                Agent status\n              }\n            </span>\n            <button\n              type=\"button\"\n              class=\"inline-flex h-4 w-8 shrink-0 cursor-pointer items-center rounded-full border border-transparent p-2xs transition-colors disabled:cursor-not-allowed disabled:opacity-55\"\n              [class.bg-primary]=\"online() === true\"\n              [class.justify-end]=\"online() === true\"\n              [class.bg-lighter]=\"online() !== true\"\n              [class.justify-start]=\"online() !== true\"\n              [disabled]=\"agentSwitchDisabled()\"\n              [attr.aria-pressed]=\"online() === true\"\n              [attr.aria-label]=\"online() === true ? 'Turn off AI receptionist' : 'Turn on AI receptionist'\"\n              (click)=\"$event.stopPropagation(); onAgentToggleClick()\"\n            >\n              <span class=\"block h-3 w-3 rounded-full bg-white\"></span>\n            </button>\n          </div>\n        </div>\n      }\n    </div>\n\n    <div class=\"w-full border-b border-light\" role=\"presentation\"></div>\n\n    <ul role=\"menu\" class=\"m-0 list-none p-0\">\n      @for (item of receptionistNav; track item.id) {\n        <li\n          tabindex=\"0\"\n          role=\"menuitem\"\n          class=\"cursor-pointer px-base py-xs text-left fs-base leading-[1.8] hover:bg-lighter active:bg-base\"\n          [attr.data-value]=\"item.label\"\n          [routerLink]=\"item.route\"\n          routerLinkActive=\"bg-light\"\n          [routerLinkActiveOptions]=\"{ exact: item.route === 'dashboard' }\"\n          (keydown.enter)=\"$any($event.target)?.click()\"\n        >{{ item.label }}</li>\n      }\n    </ul>\n\n    @if (includePracticeNav) {\n      <p class=\"mb-0 mt-0 fs-sm font-semibold text-light\">Practice</p>\n      <ul role=\"menu\" class=\"m-0 list-none p-0\">\n        @for (item of practiceNav; track item.id) {\n          @if (showNavItem(item)) {\n            <li\n              tabindex=\"0\"\n              role=\"menuitem\"\n              class=\"cursor-pointer px-base py-xs text-left fs-base leading-[1.8] hover:bg-lighter active:bg-base\"\n              [attr.data-value]=\"item.label\"\n              [routerLink]=\"item.route\"\n              routerLinkActive=\"bg-light\"\n              (keydown.enter)=\"$any($event.target)?.click()\"\n            >{{ item.label }}</li>\n          }\n        }\n      </ul>\n    }\n  </div>\n\n  @if (showLogout()) {\n    <div class=\"mt-auto border-t border-light pt-sm\">\n      @if (userEmail(); as email) {\n        <p class=\"mb-xs truncate px-xs fs-xs text-light\" [title]=\"email\">{{ email }}</p>\n      }\n      <button\n        type=\"button\"\n        class=\"group/link relative flex h-10 w-full cursor-pointer items-center gap-xs rounded-md border-0 bg-transparent px-xs text-left fs-base font-medium text-light transition-colors hover:bg-lighter hover:text-dark\"\n        (click)=\"logout()\"\n        aria-label=\"Log out\"\n        title=\"Log out\"\n      >\n        <ed-icon class=\"shrink-0\" name=\"logout\" [size]=\"24\" color=\"currentColor\" />\n        <span class=\"min-w-0 flex-1\">Log out</span>\n      </button>\n    </div>\n  }\n</nav>\n\n@if (confirmOffOpen()) {\n  <app-modal\n    title=\"Turn off AI receptionist?\"\n    subtitle=\"Inbound callers will be transferred to the front desk instead of the AI.\"\n    maxWidth=\"480px\"\n    (closed)=\"cancelConfirmOff()\"\n  >\n    <p class=\"mb-4 m-0 text-sm leading-normal text-zinc-500\">While offline, the AI will not answer calls. Callers are routed to the human receptionist.</p>\n    <div class=\"flex justify-end gap-2\">\n      <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"cancelConfirmOff()\">Cancel</ed-button>\n      <ed-button variant=\"danger\" fill size=\"sm\" [disabled]=\"toggling()\" (click$)=\"confirmTurnOff()\">\n        Turn off AI receptionist\n      </ed-button>\n    </div>\n  </app-modal>\n}\n\n<eds-agent-settings-drawer />\n", styles: [":host .ai-receptionist-nav-item .menu-item-icon{background-color:#ad46ff1a;border-radius:6px;transition:background-color .2s ease}:host .ai-receptionist-nav-item:hover .menu-item-icon,:host .ai-receptionist-nav-item.active .menu-item-icon,:host .ai-receptionist-nav-item.active:hover .menu-item-icon{background-color:#9810fa}:host .ai-receptionist-nav-item .ai-receptionist-live-dot{position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:999px;background-color:#089e40;border:.5px solid #ffffff;box-sizing:border-box}:host .ai-receptionist-nav-item .ai-receptionist-live-dot.is-offline{background-color:#dc2626}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: IconComponent, selector: "ed-icon", inputs: ["name", "size", "color", "cssClass", "decorative", "ariaHidden", "ariaLabel", "title", "desc", "focusable", "tabIndex"] }, { kind: "component", type: ModalComponent, selector: "app-modal", inputs: ["title", "subtitle", "maxWidth"], outputs: ["closed"] }, { kind: "component", type: AgentSettingsDrawerComponent, selector: "eds-agent-settings-drawer" }, { 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$"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EdsModuleNavComponent, isStandalone: true, selector: "eds-module-nav", host: { classAttribute: "block shrink-0" }, ngImport: i0, template: "<nav\r\n  class=\"sticky top-0 flex h-screen min-h-screen w-52 flex-col overflow-y-auto border-r border-base bg-white \"\r\n  aria-label=\"AI Receptionist\"\r\n>\r\n  <div class=\"flex min-h-0 flex-1 flex-col  \">\r\n    <div\r\n      class=\"relative shrink-0 p-sm\"\r\n      data-header-menu\r\n      (document:click)=\"onHeaderMenuDocClick($event)\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"ai-receptionist-nav-item flex w-full cursor-pointer items-center justify-between gap-xs rounded-md border-0 bg-transparent p-2xs text-left\"\r\n        [class.active]=\"brandIconActive()\"\r\n        [attr.aria-label]=\"headerAriaLabel()\"\r\n        [attr.aria-expanded]=\"headerMenuOpen()\"\r\n        aria-haspopup=\"menu\"\r\n        (mouseenter)=\"brandIconHovered.set(true)\"\r\n        (mouseleave)=\"brandIconHovered.set(false)\"\r\n        (click)=\"$event.stopPropagation(); toggleHeaderMenu()\"\r\n      >\r\n        <div class=\"flex min-w-0 flex-1 items-center gap-xs\">\r\n          <span\r\n            class=\"menu-item-icon relative flex h-9 w-9 shrink-0 items-center justify-center\"\r\n            aria-hidden=\"true\"\r\n          >\r\n            <ed-icon\r\n              name=\"ai_headset\"\r\n              [size]=\"20\"\r\n              [color]=\"brandIconColor()\"\r\n            />\r\n            @if (online() === true) {\r\n              <span class=\"ai-receptionist-live-dot\"></span>\r\n            } @else if (online() === false) {\r\n              <span class=\"ai-receptionist-live-dot is-offline\"></span>\r\n            }\r\n          </span>\r\n          <span class=\"min-w-0 truncate fs-base font-semibold text-dark\">AI Receptionist</span>\r\n        </div>\r\n        <ed-icon\r\n          name=\"caret_down\"\r\n          [size]=\"16\"\r\n          color=\"currentColor\"\r\n          class=\"shrink-0 text-light\"\r\n          aria-hidden=\"true\"\r\n        />\r\n      </button>\r\n      @if (headerMenuOpen()) {\r\n        <div\r\n          class=\"fade-in absolute right-0 top-full z-20 mt-2xs flex w-44 origin-top flex-col gap-2xs rounded-md border border-light bg-white p-2xs shadow-md\"\r\n          role=\"menu\"\r\n          aria-label=\"AI Receptionist menu\"\r\n        >\r\n          <a\r\n            class=\"flex w-full items-center rounded-sm px-sm py-xs fs-sm text-dark no-underline transition-colors hover:bg-lighter\"\r\n            routerLink=\"audit\"\r\n            routerLinkActive=\"bg-lighter\"\r\n            role=\"menuitem\"\r\n            (click)=\"closeHeaderMenu()\"\r\n          >\r\n            Audit Logs\r\n          </a>\r\n          <button\r\n            type=\"button\"\r\n            class=\"flex w-full cursor-pointer items-center rounded-sm border-0 bg-transparent px-sm py-xs text-left fs-sm text-dark transition-colors hover:bg-lighter\"\r\n            role=\"menuitem\"\r\n            (click)=\"openSettingsDrawer()\"\r\n          >\r\n            Settings\r\n          </button>\r\n          <div class=\"w-full border-b border-light\" role=\"presentation\"></div>\r\n          <div class=\"flex w-full items-center gap-2xs px-sm py-xs\" role=\"menuitem\">\r\n            <span class=\"min-w-0 flex-1 fs-sm text-dark\">\r\n              @if (online() === true) {\r\n                Agent is Live\r\n              } @else if (online() === false) {\r\n                Agent is Offline\r\n              } @else {\r\n                Agent status\r\n              }\r\n            </span>\r\n            <button\r\n              type=\"button\"\r\n              class=\"inline-flex h-4 w-8 shrink-0 cursor-pointer items-center rounded-full border border-transparent p-2xs transition-colors disabled:cursor-not-allowed disabled:opacity-55\"\r\n              [class.bg-primary]=\"online() === true\"\r\n              [class.justify-end]=\"online() === true\"\r\n              [class.bg-lighter]=\"online() !== true\"\r\n              [class.justify-start]=\"online() !== true\"\r\n              [disabled]=\"agentSwitchDisabled()\"\r\n              [attr.aria-pressed]=\"online() === true\"\r\n              [attr.aria-label]=\"online() === true ? 'Turn off AI receptionist' : 'Turn on AI receptionist'\"\r\n              (click)=\"$event.stopPropagation(); onAgentToggleClick()\"\r\n            >\r\n              <span class=\"block h-3 w-3 rounded-full bg-white\"></span>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"w-full border-b border-light\" role=\"presentation\"></div>\r\n\r\n    <ul role=\"menu\" class=\"m-0 list-none p-0\">\r\n      @for (item of receptionistNav; track item.id) {\r\n        <li\r\n          tabindex=\"0\"\r\n          role=\"menuitem\"\r\n          class=\"cursor-pointer px-base py-xs text-left fs-base leading-[1.8] hover:bg-lighter active:bg-base\"\r\n          [attr.data-value]=\"item.label\"\r\n          [routerLink]=\"item.route\"\r\n          routerLinkActive=\"bg-light\"\r\n          [routerLinkActiveOptions]=\"{ exact: item.route === 'dashboard' }\"\r\n          (keydown.enter)=\"$any($event.target)?.click()\"\r\n        >{{ item.label }}</li>\r\n      }\r\n    </ul>\r\n\r\n    @if (includePracticeNav) {\r\n      <p class=\"mb-0 mt-0 fs-sm font-semibold text-light\">Practice</p>\r\n      <ul role=\"menu\" class=\"m-0 list-none p-0\">\r\n        @for (item of practiceNav; track item.id) {\r\n          @if (showNavItem(item)) {\r\n            <li\r\n              tabindex=\"0\"\r\n              role=\"menuitem\"\r\n              class=\"cursor-pointer px-base py-xs text-left fs-base leading-[1.8] hover:bg-lighter active:bg-base\"\r\n              [attr.data-value]=\"item.label\"\r\n              [routerLink]=\"item.route\"\r\n              routerLinkActive=\"bg-light\"\r\n              (keydown.enter)=\"$any($event.target)?.click()\"\r\n            >{{ item.label }}</li>\r\n          }\r\n        }\r\n      </ul>\r\n    }\r\n  </div>\r\n\r\n  @if (showLogout()) {\r\n    <div class=\"mt-auto border-t border-light pt-sm\">\r\n      @if (userEmail(); as email) {\r\n        <p class=\"mb-xs truncate px-xs fs-xs text-light\" [title]=\"email\">{{ email }}</p>\r\n      }\r\n      <button\r\n        type=\"button\"\r\n        class=\"group/link relative flex h-10 w-full cursor-pointer items-center gap-xs rounded-md border-0 bg-transparent px-xs text-left fs-base font-medium text-light transition-colors hover:bg-lighter hover:text-dark\"\r\n        (click)=\"logout()\"\r\n        aria-label=\"Log out\"\r\n        title=\"Log out\"\r\n      >\r\n        <ed-icon class=\"shrink-0\" name=\"logout\" [size]=\"24\" color=\"currentColor\" />\r\n        <span class=\"min-w-0 flex-1\">Log out</span>\r\n      </button>\r\n    </div>\r\n  }\r\n</nav>\r\n\r\n@if (confirmOffOpen()) {\r\n  <app-modal\r\n    title=\"Turn off AI receptionist?\"\r\n    subtitle=\"Inbound callers will be transferred to the front desk instead of the AI.\"\r\n    maxWidth=\"480px\"\r\n    (closed)=\"cancelConfirmOff()\"\r\n  >\r\n    <p class=\"mb-4 m-0 text-sm leading-normal text-zinc-500\">While offline, the AI will not answer calls. Callers are routed to the human receptionist.</p>\r\n    <div class=\"flex justify-end gap-2\">\r\n      <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"cancelConfirmOff()\">Cancel</ed-button>\r\n      <ed-button variant=\"danger\" fill size=\"sm\" [disabled]=\"toggling()\" (click$)=\"confirmTurnOff()\">\r\n        Turn off AI receptionist\r\n      </ed-button>\r\n    </div>\r\n  </app-modal>\r\n}\r\n\r\n<eds-agent-settings-drawer />\r\n", styles: [":host .ai-receptionist-nav-item .menu-item-icon{background-color:#ad46ff1a;border-radius:6px;transition:background-color .2s ease}:host .ai-receptionist-nav-item:hover .menu-item-icon,:host .ai-receptionist-nav-item.active .menu-item-icon,:host .ai-receptionist-nav-item.active:hover .menu-item-icon{background-color:#9810fa}:host .ai-receptionist-nav-item .ai-receptionist-live-dot{position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:999px;background-color:#089e40;border:.5px solid #ffffff;box-sizing:border-box}:host .ai-receptionist-nav-item .ai-receptionist-live-dot.is-offline{background-color:#dc2626}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: IconComponent, selector: "ed-icon", inputs: ["name", "size", "color", "cssClass", "decorative", "ariaHidden", "ariaLabel", "title", "desc", "focusable", "tabIndex"] }, { kind: "component", type: ModalComponent, selector: "app-modal", inputs: ["title", "subtitle", "maxWidth"], outputs: ["closed"] }, { kind: "component", type: AgentSettingsDrawerComponent, selector: "eds-agent-settings-drawer" }, { 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$"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdsModuleNavComponent, decorators: [{
             type: Component,
@@ -6088,7 +6088,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         ModalComponent,
                         AgentSettingsDrawerComponent,
                         EdButtonComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], host: { class: 'block shrink-0' }, template: "<nav\n  class=\"sticky top-0 flex h-screen min-h-screen w-52 flex-col overflow-y-auto border-r border-base bg-white \"\n  aria-label=\"AI Receptionist\"\n>\n  <div class=\"flex min-h-0 flex-1 flex-col  \">\n    <div\n      class=\"relative shrink-0 p-sm\"\n      data-header-menu\n      (document:click)=\"onHeaderMenuDocClick($event)\"\n    >\n      <button\n        type=\"button\"\n        class=\"ai-receptionist-nav-item flex w-full cursor-pointer items-center justify-between gap-xs rounded-md border-0 bg-transparent p-2xs text-left\"\n        [class.active]=\"brandIconActive()\"\n        [attr.aria-label]=\"headerAriaLabel()\"\n        [attr.aria-expanded]=\"headerMenuOpen()\"\n        aria-haspopup=\"menu\"\n        (mouseenter)=\"brandIconHovered.set(true)\"\n        (mouseleave)=\"brandIconHovered.set(false)\"\n        (click)=\"$event.stopPropagation(); toggleHeaderMenu()\"\n      >\n        <div class=\"flex min-w-0 flex-1 items-center gap-xs\">\n          <span\n            class=\"menu-item-icon relative flex h-9 w-9 shrink-0 items-center justify-center\"\n            aria-hidden=\"true\"\n          >\n            <ed-icon\n              name=\"ai_headset\"\n              [size]=\"20\"\n              [color]=\"brandIconColor()\"\n            />\n            @if (online() === true) {\n              <span class=\"ai-receptionist-live-dot\"></span>\n            } @else if (online() === false) {\n              <span class=\"ai-receptionist-live-dot is-offline\"></span>\n            }\n          </span>\n          <span class=\"min-w-0 truncate fs-base font-semibold text-dark\">AI Receptionist</span>\n        </div>\n        <ed-icon\n          name=\"caret_down\"\n          [size]=\"16\"\n          color=\"currentColor\"\n          class=\"shrink-0 text-light\"\n          aria-hidden=\"true\"\n        />\n      </button>\n      @if (headerMenuOpen()) {\n        <div\n          class=\"fade-in absolute right-0 top-full z-20 mt-2xs flex w-44 origin-top flex-col gap-2xs rounded-md border border-light bg-white p-2xs shadow-md\"\n          role=\"menu\"\n          aria-label=\"AI Receptionist menu\"\n        >\n          <a\n            class=\"flex w-full items-center rounded-sm px-sm py-xs fs-sm text-dark no-underline transition-colors hover:bg-lighter\"\n            routerLink=\"audit\"\n            routerLinkActive=\"bg-lighter\"\n            role=\"menuitem\"\n            (click)=\"closeHeaderMenu()\"\n          >\n            Audit Logs\n          </a>\n          <button\n            type=\"button\"\n            class=\"flex w-full cursor-pointer items-center rounded-sm border-0 bg-transparent px-sm py-xs text-left fs-sm text-dark transition-colors hover:bg-lighter\"\n            role=\"menuitem\"\n            (click)=\"openSettingsDrawer()\"\n          >\n            Settings\n          </button>\n          <div class=\"w-full border-b border-light\" role=\"presentation\"></div>\n          <div class=\"flex w-full items-center gap-2xs px-sm py-xs\" role=\"menuitem\">\n            <span class=\"min-w-0 flex-1 fs-sm text-dark\">\n              @if (online() === true) {\n                Agent is Live\n              } @else if (online() === false) {\n                Agent is Offline\n              } @else {\n                Agent status\n              }\n            </span>\n            <button\n              type=\"button\"\n              class=\"inline-flex h-4 w-8 shrink-0 cursor-pointer items-center rounded-full border border-transparent p-2xs transition-colors disabled:cursor-not-allowed disabled:opacity-55\"\n              [class.bg-primary]=\"online() === true\"\n              [class.justify-end]=\"online() === true\"\n              [class.bg-lighter]=\"online() !== true\"\n              [class.justify-start]=\"online() !== true\"\n              [disabled]=\"agentSwitchDisabled()\"\n              [attr.aria-pressed]=\"online() === true\"\n              [attr.aria-label]=\"online() === true ? 'Turn off AI receptionist' : 'Turn on AI receptionist'\"\n              (click)=\"$event.stopPropagation(); onAgentToggleClick()\"\n            >\n              <span class=\"block h-3 w-3 rounded-full bg-white\"></span>\n            </button>\n          </div>\n        </div>\n      }\n    </div>\n\n    <div class=\"w-full border-b border-light\" role=\"presentation\"></div>\n\n    <ul role=\"menu\" class=\"m-0 list-none p-0\">\n      @for (item of receptionistNav; track item.id) {\n        <li\n          tabindex=\"0\"\n          role=\"menuitem\"\n          class=\"cursor-pointer px-base py-xs text-left fs-base leading-[1.8] hover:bg-lighter active:bg-base\"\n          [attr.data-value]=\"item.label\"\n          [routerLink]=\"item.route\"\n          routerLinkActive=\"bg-light\"\n          [routerLinkActiveOptions]=\"{ exact: item.route === 'dashboard' }\"\n          (keydown.enter)=\"$any($event.target)?.click()\"\n        >{{ item.label }}</li>\n      }\n    </ul>\n\n    @if (includePracticeNav) {\n      <p class=\"mb-0 mt-0 fs-sm font-semibold text-light\">Practice</p>\n      <ul role=\"menu\" class=\"m-0 list-none p-0\">\n        @for (item of practiceNav; track item.id) {\n          @if (showNavItem(item)) {\n            <li\n              tabindex=\"0\"\n              role=\"menuitem\"\n              class=\"cursor-pointer px-base py-xs text-left fs-base leading-[1.8] hover:bg-lighter active:bg-base\"\n              [attr.data-value]=\"item.label\"\n              [routerLink]=\"item.route\"\n              routerLinkActive=\"bg-light\"\n              (keydown.enter)=\"$any($event.target)?.click()\"\n            >{{ item.label }}</li>\n          }\n        }\n      </ul>\n    }\n  </div>\n\n  @if (showLogout()) {\n    <div class=\"mt-auto border-t border-light pt-sm\">\n      @if (userEmail(); as email) {\n        <p class=\"mb-xs truncate px-xs fs-xs text-light\" [title]=\"email\">{{ email }}</p>\n      }\n      <button\n        type=\"button\"\n        class=\"group/link relative flex h-10 w-full cursor-pointer items-center gap-xs rounded-md border-0 bg-transparent px-xs text-left fs-base font-medium text-light transition-colors hover:bg-lighter hover:text-dark\"\n        (click)=\"logout()\"\n        aria-label=\"Log out\"\n        title=\"Log out\"\n      >\n        <ed-icon class=\"shrink-0\" name=\"logout\" [size]=\"24\" color=\"currentColor\" />\n        <span class=\"min-w-0 flex-1\">Log out</span>\n      </button>\n    </div>\n  }\n</nav>\n\n@if (confirmOffOpen()) {\n  <app-modal\n    title=\"Turn off AI receptionist?\"\n    subtitle=\"Inbound callers will be transferred to the front desk instead of the AI.\"\n    maxWidth=\"480px\"\n    (closed)=\"cancelConfirmOff()\"\n  >\n    <p class=\"mb-4 m-0 text-sm leading-normal text-zinc-500\">While offline, the AI will not answer calls. Callers are routed to the human receptionist.</p>\n    <div class=\"flex justify-end gap-2\">\n      <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"cancelConfirmOff()\">Cancel</ed-button>\n      <ed-button variant=\"danger\" fill size=\"sm\" [disabled]=\"toggling()\" (click$)=\"confirmTurnOff()\">\n        Turn off AI receptionist\n      </ed-button>\n    </div>\n  </app-modal>\n}\n\n<eds-agent-settings-drawer />\n", styles: [":host .ai-receptionist-nav-item .menu-item-icon{background-color:#ad46ff1a;border-radius:6px;transition:background-color .2s ease}:host .ai-receptionist-nav-item:hover .menu-item-icon,:host .ai-receptionist-nav-item.active .menu-item-icon,:host .ai-receptionist-nav-item.active:hover .menu-item-icon{background-color:#9810fa}:host .ai-receptionist-nav-item .ai-receptionist-live-dot{position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:999px;background-color:#089e40;border:.5px solid #ffffff;box-sizing:border-box}:host .ai-receptionist-nav-item .ai-receptionist-live-dot.is-offline{background-color:#dc2626}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], host: { class: 'block shrink-0' }, template: "<nav\r\n  class=\"sticky top-0 flex h-screen min-h-screen w-52 flex-col overflow-y-auto border-r border-base bg-white \"\r\n  aria-label=\"AI Receptionist\"\r\n>\r\n  <div class=\"flex min-h-0 flex-1 flex-col  \">\r\n    <div\r\n      class=\"relative shrink-0 p-sm\"\r\n      data-header-menu\r\n      (document:click)=\"onHeaderMenuDocClick($event)\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"ai-receptionist-nav-item flex w-full cursor-pointer items-center justify-between gap-xs rounded-md border-0 bg-transparent p-2xs text-left\"\r\n        [class.active]=\"brandIconActive()\"\r\n        [attr.aria-label]=\"headerAriaLabel()\"\r\n        [attr.aria-expanded]=\"headerMenuOpen()\"\r\n        aria-haspopup=\"menu\"\r\n        (mouseenter)=\"brandIconHovered.set(true)\"\r\n        (mouseleave)=\"brandIconHovered.set(false)\"\r\n        (click)=\"$event.stopPropagation(); toggleHeaderMenu()\"\r\n      >\r\n        <div class=\"flex min-w-0 flex-1 items-center gap-xs\">\r\n          <span\r\n            class=\"menu-item-icon relative flex h-9 w-9 shrink-0 items-center justify-center\"\r\n            aria-hidden=\"true\"\r\n          >\r\n            <ed-icon\r\n              name=\"ai_headset\"\r\n              [size]=\"20\"\r\n              [color]=\"brandIconColor()\"\r\n            />\r\n            @if (online() === true) {\r\n              <span class=\"ai-receptionist-live-dot\"></span>\r\n            } @else if (online() === false) {\r\n              <span class=\"ai-receptionist-live-dot is-offline\"></span>\r\n            }\r\n          </span>\r\n          <span class=\"min-w-0 truncate fs-base font-semibold text-dark\">AI Receptionist</span>\r\n        </div>\r\n        <ed-icon\r\n          name=\"caret_down\"\r\n          [size]=\"16\"\r\n          color=\"currentColor\"\r\n          class=\"shrink-0 text-light\"\r\n          aria-hidden=\"true\"\r\n        />\r\n      </button>\r\n      @if (headerMenuOpen()) {\r\n        <div\r\n          class=\"fade-in absolute right-0 top-full z-20 mt-2xs flex w-44 origin-top flex-col gap-2xs rounded-md border border-light bg-white p-2xs shadow-md\"\r\n          role=\"menu\"\r\n          aria-label=\"AI Receptionist menu\"\r\n        >\r\n          <a\r\n            class=\"flex w-full items-center rounded-sm px-sm py-xs fs-sm text-dark no-underline transition-colors hover:bg-lighter\"\r\n            routerLink=\"audit\"\r\n            routerLinkActive=\"bg-lighter\"\r\n            role=\"menuitem\"\r\n            (click)=\"closeHeaderMenu()\"\r\n          >\r\n            Audit Logs\r\n          </a>\r\n          <button\r\n            type=\"button\"\r\n            class=\"flex w-full cursor-pointer items-center rounded-sm border-0 bg-transparent px-sm py-xs text-left fs-sm text-dark transition-colors hover:bg-lighter\"\r\n            role=\"menuitem\"\r\n            (click)=\"openSettingsDrawer()\"\r\n          >\r\n            Settings\r\n          </button>\r\n          <div class=\"w-full border-b border-light\" role=\"presentation\"></div>\r\n          <div class=\"flex w-full items-center gap-2xs px-sm py-xs\" role=\"menuitem\">\r\n            <span class=\"min-w-0 flex-1 fs-sm text-dark\">\r\n              @if (online() === true) {\r\n                Agent is Live\r\n              } @else if (online() === false) {\r\n                Agent is Offline\r\n              } @else {\r\n                Agent status\r\n              }\r\n            </span>\r\n            <button\r\n              type=\"button\"\r\n              class=\"inline-flex h-4 w-8 shrink-0 cursor-pointer items-center rounded-full border border-transparent p-2xs transition-colors disabled:cursor-not-allowed disabled:opacity-55\"\r\n              [class.bg-primary]=\"online() === true\"\r\n              [class.justify-end]=\"online() === true\"\r\n              [class.bg-lighter]=\"online() !== true\"\r\n              [class.justify-start]=\"online() !== true\"\r\n              [disabled]=\"agentSwitchDisabled()\"\r\n              [attr.aria-pressed]=\"online() === true\"\r\n              [attr.aria-label]=\"online() === true ? 'Turn off AI receptionist' : 'Turn on AI receptionist'\"\r\n              (click)=\"$event.stopPropagation(); onAgentToggleClick()\"\r\n            >\r\n              <span class=\"block h-3 w-3 rounded-full bg-white\"></span>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"w-full border-b border-light\" role=\"presentation\"></div>\r\n\r\n    <ul role=\"menu\" class=\"m-0 list-none p-0\">\r\n      @for (item of receptionistNav; track item.id) {\r\n        <li\r\n          tabindex=\"0\"\r\n          role=\"menuitem\"\r\n          class=\"cursor-pointer px-base py-xs text-left fs-base leading-[1.8] hover:bg-lighter active:bg-base\"\r\n          [attr.data-value]=\"item.label\"\r\n          [routerLink]=\"item.route\"\r\n          routerLinkActive=\"bg-light\"\r\n          [routerLinkActiveOptions]=\"{ exact: item.route === 'dashboard' }\"\r\n          (keydown.enter)=\"$any($event.target)?.click()\"\r\n        >{{ item.label }}</li>\r\n      }\r\n    </ul>\r\n\r\n    @if (includePracticeNav) {\r\n      <p class=\"mb-0 mt-0 fs-sm font-semibold text-light\">Practice</p>\r\n      <ul role=\"menu\" class=\"m-0 list-none p-0\">\r\n        @for (item of practiceNav; track item.id) {\r\n          @if (showNavItem(item)) {\r\n            <li\r\n              tabindex=\"0\"\r\n              role=\"menuitem\"\r\n              class=\"cursor-pointer px-base py-xs text-left fs-base leading-[1.8] hover:bg-lighter active:bg-base\"\r\n              [attr.data-value]=\"item.label\"\r\n              [routerLink]=\"item.route\"\r\n              routerLinkActive=\"bg-light\"\r\n              (keydown.enter)=\"$any($event.target)?.click()\"\r\n            >{{ item.label }}</li>\r\n          }\r\n        }\r\n      </ul>\r\n    }\r\n  </div>\r\n\r\n  @if (showLogout()) {\r\n    <div class=\"mt-auto border-t border-light pt-sm\">\r\n      @if (userEmail(); as email) {\r\n        <p class=\"mb-xs truncate px-xs fs-xs text-light\" [title]=\"email\">{{ email }}</p>\r\n      }\r\n      <button\r\n        type=\"button\"\r\n        class=\"group/link relative flex h-10 w-full cursor-pointer items-center gap-xs rounded-md border-0 bg-transparent px-xs text-left fs-base font-medium text-light transition-colors hover:bg-lighter hover:text-dark\"\r\n        (click)=\"logout()\"\r\n        aria-label=\"Log out\"\r\n        title=\"Log out\"\r\n      >\r\n        <ed-icon class=\"shrink-0\" name=\"logout\" [size]=\"24\" color=\"currentColor\" />\r\n        <span class=\"min-w-0 flex-1\">Log out</span>\r\n      </button>\r\n    </div>\r\n  }\r\n</nav>\r\n\r\n@if (confirmOffOpen()) {\r\n  <app-modal\r\n    title=\"Turn off AI receptionist?\"\r\n    subtitle=\"Inbound callers will be transferred to the front desk instead of the AI.\"\r\n    maxWidth=\"480px\"\r\n    (closed)=\"cancelConfirmOff()\"\r\n  >\r\n    <p class=\"mb-4 m-0 text-sm leading-normal text-zinc-500\">While offline, the AI will not answer calls. Callers are routed to the human receptionist.</p>\r\n    <div class=\"flex justify-end gap-2\">\r\n      <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"cancelConfirmOff()\">Cancel</ed-button>\r\n      <ed-button variant=\"danger\" fill size=\"sm\" [disabled]=\"toggling()\" (click$)=\"confirmTurnOff()\">\r\n        Turn off AI receptionist\r\n      </ed-button>\r\n    </div>\r\n  </app-modal>\r\n}\r\n\r\n<eds-agent-settings-drawer />\r\n", styles: [":host .ai-receptionist-nav-item .menu-item-icon{background-color:#ad46ff1a;border-radius:6px;transition:background-color .2s ease}:host .ai-receptionist-nav-item:hover .menu-item-icon,:host .ai-receptionist-nav-item.active .menu-item-icon,:host .ai-receptionist-nav-item.active:hover .menu-item-icon{background-color:#9810fa}:host .ai-receptionist-nav-item .ai-receptionist-live-dot{position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:999px;background-color:#089e40;border:.5px solid #ffffff;box-sizing:border-box}:host .ai-receptionist-nav-item .ai-receptionist-live-dot.is-offline{background-color:#dc2626}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -6125,34 +6125,34 @@ class EdsRouteProgressComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdsRouteProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EdsRouteProgressComponent, isStandalone: true, selector: "eds-route-progress", ngImport: i0, template: `
-    @if (active()) {
-      <div class="eds-route-progress" role="progressbar" aria-busy="true" aria-label="Loading page">
-        <div class="eds-route-progress__bar"></div>
-      </div>
-      <div class="eds-route-progress__veil" aria-hidden="true">
-        <div class="eds-route-progress__panel">
-          <span class="eds-route-progress__spinner"></span>
-          <span class="eds-route-progress__label">Loading…</span>
-        </div>
-      </div>
-    }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EdsRouteProgressComponent, isStandalone: true, selector: "eds-route-progress", ngImport: i0, template: `
+    @if (active()) {
+      <div class="eds-route-progress" role="progressbar" aria-busy="true" aria-label="Loading page">
+        <div class="eds-route-progress__bar"></div>
+      </div>
+      <div class="eds-route-progress__veil" aria-hidden="true">
+        <div class="eds-route-progress__panel">
+          <span class="eds-route-progress__spinner"></span>
+          <span class="eds-route-progress__label">Loading…</span>
+        </div>
+      </div>
+    }
   `, isInline: true, styles: [":host{display:contents}.eds-route-progress{position:fixed;inset:0 0 auto;z-index:9999;height:3px;overflow:hidden;pointer-events:none;background:transparent}.eds-route-progress__bar{height:100%;width:40%;border-radius:0 2px 2px 0;background:linear-gradient(90deg,#2162f0,#8e51ff);animation:eds-route-progress-slide 1.05s ease-in-out infinite}.eds-route-progress__veil{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;pointer-events:all;background:#f7faff8c;backdrop-filter:blur(1px)}.eds-route-progress__panel{display:inline-flex;align-items:center;gap:.75rem;padding:.75rem 1.1rem;border:1px solid #e2e8f0;border-radius:.75rem;background:#fff;box-shadow:0 8px 24px #0f172a14;color:#334155;font-family:Inter,system-ui,sans-serif;font-size:.875rem;font-weight:500}.eds-route-progress__spinner{width:1.1rem;height:1.1rem;border:2px solid #dbeafe;border-top-color:#2162f0;border-radius:999px;animation:eds-route-progress-spin .7s linear infinite}.eds-route-progress__label{letter-spacing:-.01em}@keyframes eds-route-progress-slide{0%{transform:translate(-120%)}to{transform:translate(320%)}}@keyframes eds-route-progress-spin{to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdsRouteProgressComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eds-route-progress', standalone: true, template: `
-    @if (active()) {
-      <div class="eds-route-progress" role="progressbar" aria-busy="true" aria-label="Loading page">
-        <div class="eds-route-progress__bar"></div>
-      </div>
-      <div class="eds-route-progress__veil" aria-hidden="true">
-        <div class="eds-route-progress__panel">
-          <span class="eds-route-progress__spinner"></span>
-          <span class="eds-route-progress__label">Loading…</span>
-        </div>
-      </div>
-    }
+            args: [{ selector: 'eds-route-progress', standalone: true, template: `
+    @if (active()) {
+      <div class="eds-route-progress" role="progressbar" aria-busy="true" aria-label="Loading page">
+        <div class="eds-route-progress__bar"></div>
+      </div>
+      <div class="eds-route-progress__veil" aria-hidden="true">
+        <div class="eds-route-progress__panel">
+          <span class="eds-route-progress__spinner"></span>
+          <span class="eds-route-progress__label">Loading…</span>
+        </div>
+      </div>
+    }
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}.eds-route-progress{position:fixed;inset:0 0 auto;z-index:9999;height:3px;overflow:hidden;pointer-events:none;background:transparent}.eds-route-progress__bar{height:100%;width:40%;border-radius:0 2px 2px 0;background:linear-gradient(90deg,#2162f0,#8e51ff);animation:eds-route-progress-slide 1.05s ease-in-out infinite}.eds-route-progress__veil{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;pointer-events:all;background:#f7faff8c;backdrop-filter:blur(1px)}.eds-route-progress__panel{display:inline-flex;align-items:center;gap:.75rem;padding:.75rem 1.1rem;border:1px solid #e2e8f0;border-radius:.75rem;background:#fff;box-shadow:0 8px 24px #0f172a14;color:#334155;font-family:Inter,system-ui,sans-serif;font-size:.875rem;font-weight:500}.eds-route-progress__spinner{width:1.1rem;height:1.1rem;border:2px solid #dbeafe;border-top-color:#2162f0;border-radius:999px;animation:eds-route-progress-spin .7s linear infinite}.eds-route-progress__label{letter-spacing:-.01em}@keyframes eds-route-progress-slide{0%{transform:translate(-120%)}to{transform:translate(320%)}}@keyframes eds-route-progress-spin{to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: () => [] });
 
@@ -6287,11 +6287,11 @@ class EdsTopbarComponent {
         this.pageTitle.set(PAGE_TITLES[last] ?? 'AI Receptionist');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdsTopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EdsTopbarComponent, isStandalone: true, selector: "eds-topbar", ngImport: i0, template: "<header class=\"sticky top-0 z-10 flex items-center justify-between gap-base border-b border-base bg-white p-sm hidden\">\n  <div class=\"flex shrink-0 items-center gap-base\">\n    <ed-icon name=\"reorder\" [size]=\"24\" color=\"currentColor\" class=\"text-dark\" aria-hidden=\"true\" />\n    <nav class=\"inline-flex items-center gap-2xs fs-base text-light\" aria-label=\"Breadcrumb\">\n      <span>AI Receptionist</span>\n      <ed-icon name=\"chevron_right\" [size]=\"16\" color=\"currentColor\" />\n      <span class=\"font-semibold text-dark\">{{ pageTitle() }}</span>\n    </nav>\n  </div>\n\n  <div class=\"flex items-center gap-xs\">\n    <div class=\"flex items-center gap-xs\">\n      <ed-button variant=\"primary\" fill size=\"sm\">\n        <ed-icon slot=\"prefix\" name=\"add\" [size]=\"16\" />\n        Create\n      </ed-button>\n\n      <div class=\"relative w-72\">\n        <input\n          type=\"search\"\n          class=\"form-input h-9 w-full\"\n          placeholder=\"Search Patient...\"\n          aria-label=\"Search Patient\"\n          autocomplete=\"off\"\n        />\n        <span class=\"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-sm text-light\" aria-hidden=\"true\">\n          <ed-icon name=\"search\" [size]=\"20\" color=\"currentColor\" />\n        </span>\n      </div>\n    </div>\n\n    <div\n      class=\"inline-flex h-9 items-center gap-xs rounded-md border border-dark bg-white px-sm\"\n      [title]=\"statusLabel()\"\n    >\n      <span\n        class=\"h-xs w-xs shrink-0 rounded-full\"\n        [class.bg-success]=\"online() === true\"\n        [class.bg-danger]=\"online() === false\"\n        [class.bg-dark]=\"online() === null\"\n        aria-hidden=\"true\"\n      ></span>\n      <span class=\"whitespace-nowrap fs-base font-semibold text-dark\">\n        @if (loading() && online() === null) {\n          Checking\u2026\n        } @else if (online() === true) {\n          Agent online\n        } @else if (online() === false) {\n          Agent offline\n        } @else {\n          Status unknown\n        }\n      </span>\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"inline-flex h-9 items-center gap-2xs rounded-md border border-dark bg-white px-sm text-light\"\n      aria-label=\"Location\"\n    >\n      <ed-icon name=\"location_on\" [size]=\"20\" color=\"currentColor\" />\n      <span class=\"fs-base font-medium text-light\">Venus Healthcare</span>\n      <ed-icon name=\"caret_down\" [size]=\"20\" color=\"currentColor\" />\n    </button>\n\n    <ed-icon-button name=\"notifications\" label=\"Notifications\" size=\"md\" outline />\n    <ed-icon-button name=\"help\" label=\"Help\" size=\"md\" outline />\n\n    @if (showUser()) {\n      <div class=\"inline-flex max-w-52 items-center gap-xs\" [title]=\"userEmail()!\">\n        <ed-avatar shape=\"circle\" size=\"md\" tone=\"brand\" [initials]=\"userInitials()\" />\n        <span class=\"truncate fs-sm text-light max-[1100px]:hidden\">{{ userEmail() }}</span>\n      </div>\n    }\n\n    @if (showLogout()) {\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 cursor-pointer items-center gap-xs rounded-md border border-dark bg-white px-sm text-light transition-colors hover:bg-lighter hover:text-dark\"\n        (click)=\"logout()\"\n        aria-label=\"Sign out\"\n        title=\"Sign out\"\n      >\n        <ed-icon name=\"logout\" [size]=\"18\" color=\"currentColor\" />\n        <span class=\"fs-base\">Log out</span>\n      </button>\n    }\n  </div>\n</header>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "ed-icon", inputs: ["name", "size", "color", "cssClass", "decorative", "ariaHidden", "ariaLabel", "title", "desc", "focusable", "tabIndex"] }, { 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: 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: EdAvatarComponent, selector: "ed-avatar", inputs: ["initials", "tone", "shape", "size", "gradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EdsTopbarComponent, isStandalone: true, selector: "eds-topbar", ngImport: i0, template: "<header class=\"sticky top-0 z-10 flex items-center justify-between gap-base border-b border-base bg-white p-sm hidden\">\r\n  <div class=\"flex shrink-0 items-center gap-base\">\r\n    <ed-icon name=\"reorder\" [size]=\"24\" color=\"currentColor\" class=\"text-dark\" aria-hidden=\"true\" />\r\n    <nav class=\"inline-flex items-center gap-2xs fs-base text-light\" aria-label=\"Breadcrumb\">\r\n      <span>AI Receptionist</span>\r\n      <ed-icon name=\"chevron_right\" [size]=\"16\" color=\"currentColor\" />\r\n      <span class=\"font-semibold text-dark\">{{ pageTitle() }}</span>\r\n    </nav>\r\n  </div>\r\n\r\n  <div class=\"flex items-center gap-xs\">\r\n    <div class=\"flex items-center gap-xs\">\r\n      <ed-button variant=\"primary\" fill size=\"sm\">\r\n        <ed-icon slot=\"prefix\" name=\"add\" [size]=\"16\" />\r\n        Create\r\n      </ed-button>\r\n\r\n      <div class=\"relative w-72\">\r\n        <input\r\n          type=\"search\"\r\n          class=\"form-input h-9 w-full\"\r\n          placeholder=\"Search Patient...\"\r\n          aria-label=\"Search Patient\"\r\n          autocomplete=\"off\"\r\n        />\r\n        <span class=\"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-sm text-light\" aria-hidden=\"true\">\r\n          <ed-icon name=\"search\" [size]=\"20\" color=\"currentColor\" />\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      class=\"inline-flex h-9 items-center gap-xs rounded-md border border-dark bg-white px-sm\"\r\n      [title]=\"statusLabel()\"\r\n    >\r\n      <span\r\n        class=\"h-xs w-xs shrink-0 rounded-full\"\r\n        [class.bg-success]=\"online() === true\"\r\n        [class.bg-danger]=\"online() === false\"\r\n        [class.bg-dark]=\"online() === null\"\r\n        aria-hidden=\"true\"\r\n      ></span>\r\n      <span class=\"whitespace-nowrap fs-base font-semibold text-dark\">\r\n        @if (loading() && online() === null) {\r\n          Checking\u2026\r\n        } @else if (online() === true) {\r\n          Agent online\r\n        } @else if (online() === false) {\r\n          Agent offline\r\n        } @else {\r\n          Status unknown\r\n        }\r\n      </span>\r\n    </div>\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"inline-flex h-9 items-center gap-2xs rounded-md border border-dark bg-white px-sm text-light\"\r\n      aria-label=\"Location\"\r\n    >\r\n      <ed-icon name=\"location_on\" [size]=\"20\" color=\"currentColor\" />\r\n      <span class=\"fs-base font-medium text-light\">Venus Healthcare</span>\r\n      <ed-icon name=\"caret_down\" [size]=\"20\" color=\"currentColor\" />\r\n    </button>\r\n\r\n    <ed-icon-button name=\"notifications\" label=\"Notifications\" size=\"md\" outline />\r\n    <ed-icon-button name=\"help\" label=\"Help\" size=\"md\" outline />\r\n\r\n    @if (showUser()) {\r\n      <div class=\"inline-flex max-w-52 items-center gap-xs\" [title]=\"userEmail()!\">\r\n        <ed-avatar shape=\"circle\" size=\"md\" tone=\"brand\" [initials]=\"userInitials()\" />\r\n        <span class=\"truncate fs-sm text-light max-[1100px]:hidden\">{{ userEmail() }}</span>\r\n      </div>\r\n    }\r\n\r\n    @if (showLogout()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"inline-flex h-9 cursor-pointer items-center gap-xs rounded-md border border-dark bg-white px-sm text-light transition-colors hover:bg-lighter hover:text-dark\"\r\n        (click)=\"logout()\"\r\n        aria-label=\"Sign out\"\r\n        title=\"Sign out\"\r\n      >\r\n        <ed-icon name=\"logout\" [size]=\"18\" color=\"currentColor\" />\r\n        <span class=\"fs-base\">Log out</span>\r\n      </button>\r\n    }\r\n  </div>\r\n</header>\r\n", dependencies: [{ kind: "component", type: IconComponent, selector: "ed-icon", inputs: ["name", "size", "color", "cssClass", "decorative", "ariaHidden", "ariaLabel", "title", "desc", "focusable", "tabIndex"] }, { 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: 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: EdAvatarComponent, selector: "ed-avatar", inputs: ["initials", "tone", "shape", "size", "gradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdsTopbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eds-topbar', imports: [IconComponent, EdButtonComponent, EdIconButtonComponent, EdAvatarComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"sticky top-0 z-10 flex items-center justify-between gap-base border-b border-base bg-white p-sm hidden\">\n  <div class=\"flex shrink-0 items-center gap-base\">\n    <ed-icon name=\"reorder\" [size]=\"24\" color=\"currentColor\" class=\"text-dark\" aria-hidden=\"true\" />\n    <nav class=\"inline-flex items-center gap-2xs fs-base text-light\" aria-label=\"Breadcrumb\">\n      <span>AI Receptionist</span>\n      <ed-icon name=\"chevron_right\" [size]=\"16\" color=\"currentColor\" />\n      <span class=\"font-semibold text-dark\">{{ pageTitle() }}</span>\n    </nav>\n  </div>\n\n  <div class=\"flex items-center gap-xs\">\n    <div class=\"flex items-center gap-xs\">\n      <ed-button variant=\"primary\" fill size=\"sm\">\n        <ed-icon slot=\"prefix\" name=\"add\" [size]=\"16\" />\n        Create\n      </ed-button>\n\n      <div class=\"relative w-72\">\n        <input\n          type=\"search\"\n          class=\"form-input h-9 w-full\"\n          placeholder=\"Search Patient...\"\n          aria-label=\"Search Patient\"\n          autocomplete=\"off\"\n        />\n        <span class=\"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-sm text-light\" aria-hidden=\"true\">\n          <ed-icon name=\"search\" [size]=\"20\" color=\"currentColor\" />\n        </span>\n      </div>\n    </div>\n\n    <div\n      class=\"inline-flex h-9 items-center gap-xs rounded-md border border-dark bg-white px-sm\"\n      [title]=\"statusLabel()\"\n    >\n      <span\n        class=\"h-xs w-xs shrink-0 rounded-full\"\n        [class.bg-success]=\"online() === true\"\n        [class.bg-danger]=\"online() === false\"\n        [class.bg-dark]=\"online() === null\"\n        aria-hidden=\"true\"\n      ></span>\n      <span class=\"whitespace-nowrap fs-base font-semibold text-dark\">\n        @if (loading() && online() === null) {\n          Checking\u2026\n        } @else if (online() === true) {\n          Agent online\n        } @else if (online() === false) {\n          Agent offline\n        } @else {\n          Status unknown\n        }\n      </span>\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"inline-flex h-9 items-center gap-2xs rounded-md border border-dark bg-white px-sm text-light\"\n      aria-label=\"Location\"\n    >\n      <ed-icon name=\"location_on\" [size]=\"20\" color=\"currentColor\" />\n      <span class=\"fs-base font-medium text-light\">Venus Healthcare</span>\n      <ed-icon name=\"caret_down\" [size]=\"20\" color=\"currentColor\" />\n    </button>\n\n    <ed-icon-button name=\"notifications\" label=\"Notifications\" size=\"md\" outline />\n    <ed-icon-button name=\"help\" label=\"Help\" size=\"md\" outline />\n\n    @if (showUser()) {\n      <div class=\"inline-flex max-w-52 items-center gap-xs\" [title]=\"userEmail()!\">\n        <ed-avatar shape=\"circle\" size=\"md\" tone=\"brand\" [initials]=\"userInitials()\" />\n        <span class=\"truncate fs-sm text-light max-[1100px]:hidden\">{{ userEmail() }}</span>\n      </div>\n    }\n\n    @if (showLogout()) {\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 cursor-pointer items-center gap-xs rounded-md border border-dark bg-white px-sm text-light transition-colors hover:bg-lighter hover:text-dark\"\n        (click)=\"logout()\"\n        aria-label=\"Sign out\"\n        title=\"Sign out\"\n      >\n        <ed-icon name=\"logout\" [size]=\"18\" color=\"currentColor\" />\n        <span class=\"fs-base\">Log out</span>\n      </button>\n    }\n  </div>\n</header>\n" }]
+            args: [{ selector: 'eds-topbar', imports: [IconComponent, EdButtonComponent, EdIconButtonComponent, EdAvatarComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"sticky top-0 z-10 flex items-center justify-between gap-base border-b border-base bg-white p-sm hidden\">\r\n  <div class=\"flex shrink-0 items-center gap-base\">\r\n    <ed-icon name=\"reorder\" [size]=\"24\" color=\"currentColor\" class=\"text-dark\" aria-hidden=\"true\" />\r\n    <nav class=\"inline-flex items-center gap-2xs fs-base text-light\" aria-label=\"Breadcrumb\">\r\n      <span>AI Receptionist</span>\r\n      <ed-icon name=\"chevron_right\" [size]=\"16\" color=\"currentColor\" />\r\n      <span class=\"font-semibold text-dark\">{{ pageTitle() }}</span>\r\n    </nav>\r\n  </div>\r\n\r\n  <div class=\"flex items-center gap-xs\">\r\n    <div class=\"flex items-center gap-xs\">\r\n      <ed-button variant=\"primary\" fill size=\"sm\">\r\n        <ed-icon slot=\"prefix\" name=\"add\" [size]=\"16\" />\r\n        Create\r\n      </ed-button>\r\n\r\n      <div class=\"relative w-72\">\r\n        <input\r\n          type=\"search\"\r\n          class=\"form-input h-9 w-full\"\r\n          placeholder=\"Search Patient...\"\r\n          aria-label=\"Search Patient\"\r\n          autocomplete=\"off\"\r\n        />\r\n        <span class=\"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-sm text-light\" aria-hidden=\"true\">\r\n          <ed-icon name=\"search\" [size]=\"20\" color=\"currentColor\" />\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      class=\"inline-flex h-9 items-center gap-xs rounded-md border border-dark bg-white px-sm\"\r\n      [title]=\"statusLabel()\"\r\n    >\r\n      <span\r\n        class=\"h-xs w-xs shrink-0 rounded-full\"\r\n        [class.bg-success]=\"online() === true\"\r\n        [class.bg-danger]=\"online() === false\"\r\n        [class.bg-dark]=\"online() === null\"\r\n        aria-hidden=\"true\"\r\n      ></span>\r\n      <span class=\"whitespace-nowrap fs-base font-semibold text-dark\">\r\n        @if (loading() && online() === null) {\r\n          Checking\u2026\r\n        } @else if (online() === true) {\r\n          Agent online\r\n        } @else if (online() === false) {\r\n          Agent offline\r\n        } @else {\r\n          Status unknown\r\n        }\r\n      </span>\r\n    </div>\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"inline-flex h-9 items-center gap-2xs rounded-md border border-dark bg-white px-sm text-light\"\r\n      aria-label=\"Location\"\r\n    >\r\n      <ed-icon name=\"location_on\" [size]=\"20\" color=\"currentColor\" />\r\n      <span class=\"fs-base font-medium text-light\">Venus Healthcare</span>\r\n      <ed-icon name=\"caret_down\" [size]=\"20\" color=\"currentColor\" />\r\n    </button>\r\n\r\n    <ed-icon-button name=\"notifications\" label=\"Notifications\" size=\"md\" outline />\r\n    <ed-icon-button name=\"help\" label=\"Help\" size=\"md\" outline />\r\n\r\n    @if (showUser()) {\r\n      <div class=\"inline-flex max-w-52 items-center gap-xs\" [title]=\"userEmail()!\">\r\n        <ed-avatar shape=\"circle\" size=\"md\" tone=\"brand\" [initials]=\"userInitials()\" />\r\n        <span class=\"truncate fs-sm text-light max-[1100px]:hidden\">{{ userEmail() }}</span>\r\n      </div>\r\n    }\r\n\r\n    @if (showLogout()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"inline-flex h-9 cursor-pointer items-center gap-xs rounded-md border border-dark bg-white px-sm text-light transition-colors hover:bg-lighter hover:text-dark\"\r\n        (click)=\"logout()\"\r\n        aria-label=\"Sign out\"\r\n        title=\"Sign out\"\r\n      >\r\n        <ed-icon name=\"logout\" [size]=\"18\" color=\"currentColor\" />\r\n        <span class=\"fs-base\">Log out</span>\r\n      </button>\r\n    }\r\n  </div>\r\n</header>\r\n" }]
         }], ctorParameters: () => [] });
 
 class EdsAppShellComponent {
@@ -6306,7 +6306,7 @@ class EdsAppShellComponent {
         inject(AgentOnlineService).refresh();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdsAppShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EdsAppShellComponent, isStandalone: true, selector: "eds-app-shell", ngImport: i0, template: "<div class=\"eds-layout flex h-screen overflow-hidden\">\n  @if (showRouteProgress) {\n    <eds-route-progress />\n  }\n  @if (showModuleNav) {\n    <eds-module-nav />\n  }\n  <div class=\"eds-main flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden\">\n    @if (showModuleNav) {\n      <eds-topbar />\n    }\n    <div class=\"eds-content flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto\">\n      <router-outlet />\n    </div>\n  </div>\n  <app-toast-container />\n</div>\n", styles: [":host{display:block}.eds-layout{background:var(--eds-surface-l1);font-family:var(--eds-font-inter, \"Inter\", sans-serif);font-size:var(--eds-font-size-base, 13px);font-weight:var(--eds-font-weight-regular, 400);color:var(--eds-text-primary, #41464c)}.eds-content>*:not(router-outlet){flex:1 1 auto;min-height:0;width:100%}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: EdsModuleNavComponent, selector: "eds-module-nav" }, { kind: "component", type: EdsTopbarComponent, selector: "eds-topbar" }, { kind: "component", type: ToastContainerComponent, selector: "app-toast-container" }, { kind: "component", type: EdsRouteProgressComponent, selector: "eds-route-progress" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EdsAppShellComponent, isStandalone: true, selector: "eds-app-shell", ngImport: i0, template: "<div class=\"eds-layout flex h-screen overflow-hidden\">\r\n  @if (showRouteProgress) {\r\n    <eds-route-progress />\r\n  }\r\n  @if (showModuleNav) {\r\n    <eds-module-nav />\r\n  }\r\n  <div class=\"eds-main flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden\">\r\n    @if (showModuleNav) {\r\n      <eds-topbar />\r\n    }\r\n    <div class=\"eds-content flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto\">\r\n      <router-outlet />\r\n    </div>\r\n  </div>\r\n  <app-toast-container />\r\n</div>\r\n", styles: [":host{display:block}.eds-layout{background:var(--eds-surface-l1);font-family:var(--eds-font-inter, \"Inter\", sans-serif);font-size:var(--eds-font-size-base, 13px);font-weight:var(--eds-font-weight-regular, 400);color:var(--eds-text-primary, #41464c)}.eds-content>*:not(router-outlet){flex:1 1 auto;min-height:0;width:100%}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: EdsModuleNavComponent, selector: "eds-module-nav" }, { kind: "component", type: EdsTopbarComponent, selector: "eds-topbar" }, { kind: "component", type: ToastContainerComponent, selector: "app-toast-container" }, { kind: "component", type: EdsRouteProgressComponent, selector: "eds-route-progress" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdsAppShellComponent, decorators: [{
             type: Component,
@@ -6316,7 +6316,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         EdsTopbarComponent,
                         ToastContainerComponent,
                         EdsRouteProgressComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"eds-layout flex h-screen overflow-hidden\">\n  @if (showRouteProgress) {\n    <eds-route-progress />\n  }\n  @if (showModuleNav) {\n    <eds-module-nav />\n  }\n  <div class=\"eds-main flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden\">\n    @if (showModuleNav) {\n      <eds-topbar />\n    }\n    <div class=\"eds-content flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto\">\n      <router-outlet />\n    </div>\n  </div>\n  <app-toast-container />\n</div>\n", styles: [":host{display:block}.eds-layout{background:var(--eds-surface-l1);font-family:var(--eds-font-inter, \"Inter\", sans-serif);font-size:var(--eds-font-size-base, 13px);font-weight:var(--eds-font-weight-regular, 400);color:var(--eds-text-primary, #41464c)}.eds-content>*:not(router-outlet){flex:1 1 auto;min-height:0;width:100%}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"eds-layout flex h-screen overflow-hidden\">\r\n  @if (showRouteProgress) {\r\n    <eds-route-progress />\r\n  }\r\n  @if (showModuleNav) {\r\n    <eds-module-nav />\r\n  }\r\n  <div class=\"eds-main flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden\">\r\n    @if (showModuleNav) {\r\n      <eds-topbar />\r\n    }\r\n    <div class=\"eds-content flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto\">\r\n      <router-outlet />\r\n    </div>\r\n  </div>\r\n  <app-toast-container />\r\n</div>\r\n", styles: [":host{display:block}.eds-layout{background:var(--eds-surface-l1);font-family:var(--eds-font-inter, \"Inter\", sans-serif);font-size:var(--eds-font-size-base, 13px);font-weight:var(--eds-font-weight-regular, 400);color:var(--eds-text-primary, #41464c)}.eds-content>*:not(router-outlet){flex:1 1 auto;min-height:0;width:100%}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -6572,7 +6572,7 @@ const VOICE_RECEPTIONIST_FEATURE_ROUTES = [
     { path: '', pathMatch: 'full', redirectTo: 'dashboard' },
     {
         path: 'dashboard',
-        loadComponent: () => import('./edvak99-voice-receptionist-widget-dashboard-page.component-CoqHpfH4.mjs').then((m) => m.DashboardPageComponent),
+        loadComponent: () => import('./edvak99-voice-receptionist-widget-dashboard-page.component-Cwunrodb.mjs').then((m) => m.DashboardPageComponent),
     },
     {
         path: 'live',
@@ -6581,37 +6581,37 @@ const VOICE_RECEPTIONIST_FEATURE_ROUTES = [
             {
                 path: '',
                 pathMatch: 'full',
-                loadComponent: () => import('./edvak99-voice-receptionist-widget-live-calls-page.component-BLJTOY-p.mjs').then((m) => m.LiveCallsPageComponent),
+                loadComponent: () => import('./edvak99-voice-receptionist-widget-live-calls-page.component-tJU0GeMR.mjs').then((m) => m.LiveCallsPageComponent),
             },
             {
                 path: ':id',
-                loadComponent: () => import('./edvak99-voice-receptionist-widget-live-monitor-page.component-MS9bpOBv.mjs').then((m) => m.LiveMonitorPageComponent),
+                loadComponent: () => import('./edvak99-voice-receptionist-widget-live-monitor-page.component-CsZ2GN-b.mjs').then((m) => m.LiveMonitorPageComponent),
             },
         ],
     },
     {
         path: 'history',
-        loadComponent: () => import('./edvak99-voice-receptionist-widget-call-history-page.component-CtdkYCXC.mjs').then((m) => m.CallHistoryPageComponent),
+        loadComponent: () => import('./edvak99-voice-receptionist-widget-call-history-page.component-Cp-Woc1p.mjs').then((m) => m.CallHistoryPageComponent),
     },
     {
         path: 'history/:id',
-        loadComponent: () => import('./edvak99-voice-receptionist-widget-call-history-detail-page.component-pRSrt5C2.mjs').then((m) => m.CallHistoryDetailPageComponent),
+        loadComponent: () => import('./edvak99-voice-receptionist-widget-call-history-detail-page.component-DtCUvToS.mjs').then((m) => m.CallHistoryDetailPageComponent),
     },
     {
         path: 'activities',
-        loadComponent: () => import('./edvak99-voice-receptionist-widget-activities-page.component-BlOth9CN.mjs').then((m) => m.ActivitiesPageComponent),
+        loadComponent: () => import('./edvak99-voice-receptionist-widget-activities-page.component-W_1bE_i2.mjs').then((m) => m.ActivitiesPageComponent),
     },
     {
         path: 'tasks',
-        loadComponent: () => import('./edvak99-voice-receptionist-widget-tasks-page.component-9X8YjNaO.mjs').then((m) => m.TasksPageComponent),
+        loadComponent: () => import('./edvak99-voice-receptionist-widget-tasks-page.component-COk5Tyy3.mjs').then((m) => m.TasksPageComponent),
     },
     {
         path: 'analytics',
-        loadComponent: () => import('./edvak99-voice-receptionist-widget-analytics-page.component-Cr02cCqy.mjs').then((m) => m.AnalyticsPageComponent),
+        loadComponent: () => import('./edvak99-voice-receptionist-widget-analytics-page.component-BYnys-zI.mjs').then((m) => m.AnalyticsPageComponent),
     },
     {
         path: 'audit',
-        loadComponent: () => import('./edvak99-voice-receptionist-widget-audit-page.component-IKR5CpVe.mjs').then((m) => m.AuditPageComponent),
+        loadComponent: () => import('./edvak99-voice-receptionist-widget-audit-page.component-CT-iaUNh.mjs').then((m) => m.AuditPageComponent),
     },
     {
         path: 'settings',
@@ -6619,7 +6619,7 @@ const VOICE_RECEPTIONIST_FEATURE_ROUTES = [
     },
     {
         path: 'settings/outbound-purposes',
-        loadComponent: () => import('./edvak99-voice-receptionist-widget-outbound-purposes-page.component-Wxq3Aqip.mjs').then((m) => m.OutboundPurposesPageComponent),
+        loadComponent: () => import('./edvak99-voice-receptionist-widget-outbound-purposes-page.component-xTutBkx7.mjs').then((m) => m.OutboundPurposesPageComponent),
     },
     {
         path: 'knowledge',
@@ -6628,7 +6628,7 @@ const VOICE_RECEPTIONIST_FEATURE_ROUTES = [
     },
     {
         path: 'wizard',
-        loadComponent: () => import('./edvak99-voice-receptionist-widget-wizard-page.component-CktmVrGt.mjs').then((m) => m.WizardPageComponent),
+        loadComponent: () => import('./edvak99-voice-receptionist-widget-wizard-page.component-DhRrm_1S.mjs').then((m) => m.WizardPageComponent),
     },
 ];
 /**
@@ -6662,18 +6662,18 @@ class EdsButtonComponent {
         this.disabled = input(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: EdsButtonComponent, isStandalone: true, selector: "eds-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <button [type]="type()" [disabled]="disabled()" [attr.data-variant]="variant()" class="eds-btn inline-flex items-center justify-center gap-2 py-2 px-4">
-      <ng-content />
-    </button>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: EdsButtonComponent, isStandalone: true, selector: "eds-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <button [type]="type()" [disabled]="disabled()" [attr.data-variant]="variant()" class="eds-btn inline-flex items-center justify-center gap-2 py-2 px-4">
+      <ng-content />
+    </button>
   `, isInline: true, styles: [".eds-btn{border-radius:var(--eds-radius-md);border:1px solid transparent;font-family:var(--eds-font-inter);font-size:13px;font-weight:500;cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease}.eds-btn:disabled{opacity:.5;cursor:not-allowed}.eds-btn[data-variant=primary]{background:var(--eds-brand-600);color:#fff}.eds-btn[data-variant=primary]:hover:not(:disabled){background:var(--eds-brand-500)}.eds-btn[data-variant=secondary]{background:var(--eds-surface-l0);color:var(--eds-text-primary);border-color:var(--eds-border-default)}.eds-btn[data-variant=secondary]:hover:not(:disabled){background:var(--eds-surface-l1)}.eds-btn[data-variant=ghost]{background:transparent;color:var(--eds-text-secondary)}.eds-btn[data-variant=ghost]:hover:not(:disabled){background:var(--eds-gray-100);color:var(--eds-text-primary)}.eds-btn[data-variant=danger]{background:#f037401a;color:var(--eds-red-500);border-color:#f0374040}.eds-btn[data-variant=positive]{background:#0abf521f;color:var(--eds-green-500);border-color:#0abf5240}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EdsButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eds-button', standalone: true, template: `
-    <button [type]="type()" [disabled]="disabled()" [attr.data-variant]="variant()" class="eds-btn inline-flex items-center justify-center gap-2 py-2 px-4">
-      <ng-content />
-    </button>
+            args: [{ selector: 'eds-button', standalone: true, template: `
+    <button [type]="type()" [disabled]="disabled()" [attr.data-variant]="variant()" class="eds-btn inline-flex items-center justify-center gap-2 py-2 px-4">
+      <ng-content />
+    </button>
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eds-btn{border-radius:var(--eds-radius-md);border:1px solid transparent;font-family:var(--eds-font-inter);font-size:13px;font-weight:500;cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease}.eds-btn:disabled{opacity:.5;cursor:not-allowed}.eds-btn[data-variant=primary]{background:var(--eds-brand-600);color:#fff}.eds-btn[data-variant=primary]:hover:not(:disabled){background:var(--eds-brand-500)}.eds-btn[data-variant=secondary]{background:var(--eds-surface-l0);color:var(--eds-text-primary);border-color:var(--eds-border-default)}.eds-btn[data-variant=secondary]:hover:not(:disabled){background:var(--eds-surface-l1)}.eds-btn[data-variant=ghost]{background:transparent;color:var(--eds-text-secondary)}.eds-btn[data-variant=ghost]:hover:not(:disabled){background:var(--eds-gray-100);color:var(--eds-text-primary)}.eds-btn[data-variant=danger]{background:#f037401a;color:var(--eds-red-500);border-color:#f0374040}.eds-btn[data-variant=positive]{background:#0abf521f;color:var(--eds-green-500);border-color:#0abf5240}\n"] }]
         }] });
 
@@ -6690,4 +6690,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
  */
 
 export { AiReceptionistApiService as A, ToastContainerComponent as B, VOICE_RECEPTIONIST_FEATURE_ROUTES as C, DashboardSocketService as D, EdAvatarComponent as E, VOICE_RECEPTIONIST_ROUTES as F, VOICE_RECEPTIONIST_SESSION as G, provideVoiceReceptionist as H, IconComponent as I, LiveCallsListService as L, ModalComponent as M, ToastService as T, VOICE_RECEPTIONIST_CONFIG as V, AgentOnlineService as a, ageFromDob as b, callerMetaLine as c, historyResultChips as d, historyResolutionLabel as e, EdButtonComponent as f, EdSkeletonComponent as g, historyResolution as h, isUnknownCaller as i, toE164Phone as j, resolveToolKey as k, resolveToolDisplayName as l, toolEventTrackKey as m, DEFAULT_PAGE_SIZE as n, totalPages as o, EdIconButtonComponent as p, activityTypeLabel as q, resultChipIcon as r, ViewportPortalDirective as s, triggerBlobDownload as t, initialsFromName as u, DEFAULT_PLACEHOLDERS as v, EdsAppShellComponent as w, EdsBadgeComponent as x, EdsButtonComponent as y, EdsRouteProgressComponent as z };
-//# sourceMappingURL=edvak99-voice-receptionist-widget-edvak99-voice-receptionist-widget-CabSa0_n.mjs.map
+//# sourceMappingURL=edvak99-voice-receptionist-widget-edvak99-voice-receptionist-widget-DOYlRven.mjs.map