@acorex/modules 20.2.4-next.8 → 20.3.0-next.0

package/fesm2022/acorex-modules-contact-management.mjs

@@ -1,27 +1,27 @@
 import * as i0 from '@angular/core';
-import { inject, Injector, Injectable, NgModule, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
-import * as i5 from '@angular/common';
+import { Injectable, NgModule, inject, Injector, input, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { AXPSessionService, AXP_PERMISSION_DEFINITION_PROVIDER } from '@acorex/platform/auth';
-import { AXPSearchCommandProvider, createAllQueryView, AXPEntityQueryType, AXP_MENU_PROVIDER, AXP_SEARCH_PROVIDER } from '@acorex/platform/common';
-import { AXPEntityService, AXMEntityCrudServiceImpl, entityMasterCrudActions, entityMasterRecordActions, AXP_ENTITY_DEFINITION_LOADER } from '@acorex/platform/layout/entity';
+import { createAllQueryView, AXPEntityQueryType, AXPSearchCommandProvider, AXP_MENU_PROVIDER, AXP_SEARCH_PROVIDER } from '@acorex/platform/common';
+import { AXMEntityCrudServiceImpl, entityMasterCrudActions, entityMasterRecordActions, AXPEntityService, AXP_ENTITY_DEFINITION_LOADER } from '@acorex/platform/layout/entity';
 import { AXPWidgetsCatalog } from '@acorex/platform/layout/builder';
 import * as i1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { AXPRootLayoutComponent } from '@acorex/platform/themes/default';
-import * as i4 from '@acorex/core/translation';
+import * as i3$1 from '@acorex/core/translation';
 import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
 import { AXPSystemActionType } from '@acorex/platform/core';
 import { AXBadgeModule } from '@acorex/components/badge';
-import * as i1$1 from '@acorex/components/button';
+import * as i2 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
-import * as i2 from '@acorex/components/decorators';
+import * as i3 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i3 from '@acorex/components/loading';
+import * as i2$1 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import { AXFormatModule } from '@acorex/core/format';
-import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex/platform/layout/views';
 import { AXPThemeLayoutBlockComponent } from '@acorex/platform/layout/components';
+import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex/platform/layout/views';
 
 const config = {
     i18n: 'contact-management',
@@ -55,88 +55,6 @@ const RootConfig = {
     },
 };
 
-class AXMContactManagementEntityProvider {
-    constructor() {
-        this.injector = inject(Injector);
-    }
-    preload() {
-        const module = RootConfig.module.name;
-        return Array.from(Object.values(RootConfig.entities)).map((entity) => ({
-            module: module,
-            entity: entity.name,
-        }));
-    }
-    async get(moduleName, entityName) {
-        if (moduleName == RootConfig.module.name) {
-            switch (entityName) {
-                case RootConfig.entities.contactMethodType.name:
-                    return (await Promise.resolve().then(function () { return contactMethodType_entity; })).contactMethodTypeFactory(this.injector);
-                case RootConfig.entities.contactMethod.name:
-                    return (await import('./acorex-modules-contact-management-contact-method.entity-DR6V9Nox.mjs')).contactMethodFactory(this.injector);
-                case RootConfig.entities.emergencyContact.name:
-                    return (await import('./acorex-modules-contact-management-emergency-contact.entity-D75qsDor.mjs')).emergencyContactFactory(this.injector);
-            }
-        }
-        return null;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMContactManagementEntityProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMContactManagementEntityProvider }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMContactManagementEntityProvider, decorators: [{
-            type: Injectable
-        }] });
-
-class AXMContactManagementMenuProvider {
-    constructor() {
-        this.entityService = inject(AXPEntityService);
-        this.sessionService = inject(AXPSessionService);
-    }
-    async provide(context) {
-        const module = RootConfig.module;
-        context.addItems([
-            {
-                priority: 9002,
-                text: '@contact-management:root-menu',
-                icon: module.icon,
-                children: [
-                    {
-                        text: '@contact-management:contact-method-type.plural-title',
-                        path: this.entityService.createPath(module.name, RootConfig.entities.contactMethodType.name),
-                        icon: RootConfig.entities.contactMethodType.icon,
-                        priority: 5,
-                    },
-                    {
-                        text: ``,
-                        type: 'break',
-                        priority: 10,
-                    },
-                    {
-                        text: '@contact-management:emergency-contact.plural-title',
-                        path: this.entityService.createPath(module.name, RootConfig.entities.emergencyContact.name),
-                        icon: RootConfig.entities.emergencyContact.icon,
-                        priority: 12,
-                    },
-                    {
-                        text: '@contact-management:emergency-contact.page.title',
-                        path: `${this.sessionService.application?.name}/emergency-contacts`,
-                        icon: 'fa-light fa-phone-rotary',
-                        priority: 13,
-                    },
-                ],
-            },
-        ]);
-    }
-}
-
-class AXMContactManagementSearchCommandProvider extends AXPSearchCommandProvider {
-    constructor() {
-        super(...arguments);
-        this.commands = [
-        // Commands will be added here following the correct pattern
-        ];
-    }
-}
-
 class AXMContactMethodTypeService extends AXMEntityCrudServiceImpl {
 }
 class AXMContactMethodTypeServiceImpl extends AXMContactMethodTypeService {
@@ -378,9 +296,172 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
             type: Injectable
         }], ctorParameters: () => [] });
 
+class AXMContactMethodTypeEntityModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMContactMethodTypeEntityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: AXMContactMethodTypeEntityModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMContactMethodTypeEntityModule, providers: [
+            {
+                provide: AXMContactMethodTypeService,
+                useClass: AXMContactMethodTypeServiceImpl,
+            },
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMContactMethodTypeEntityModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    exports: [],
+                    declarations: [],
+                    providers: [
+                        {
+                            provide: AXMContactMethodTypeService,
+                            useClass: AXMContactMethodTypeServiceImpl,
+                        },
+                    ],
+                }]
+        }] });
+
+class AXMContactMethodEntityModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMContactMethodEntityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: AXMContactMethodEntityModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMContactMethodEntityModule, providers: [
+            {
+                provide: AXMContactMethodService,
+                useClass: AXMContactMethodServiceImpl,
+            },
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMContactMethodEntityModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    exports: [],
+                    declarations: [],
+                    providers: [
+                        {
+                            provide: AXMContactMethodService,
+                            useClass: AXMContactMethodServiceImpl,
+                        },
+                    ],
+                }]
+        }] });
+
+class AXMEmergencyContactEntityModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMEmergencyContactEntityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: AXMEmergencyContactEntityModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMEmergencyContactEntityModule, providers: [
+            {
+                provide: AXMEmergencyContactService,
+                useClass: AXMEmergencyContactServiceImpl,
+            },
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMEmergencyContactEntityModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    exports: [],
+                    declarations: [],
+                    providers: [
+                        {
+                            provide: AXMEmergencyContactService,
+                            useClass: AXMEmergencyContactServiceImpl,
+                        },
+                    ],
+                }]
+        }] });
+
+// Entity Services
+
+class AXMContactManagementEntityProvider {
+    constructor() {
+        this.injector = inject(Injector);
+    }
+    preload() {
+        const module = RootConfig.module.name;
+        return Array.from(Object.values(RootConfig.entities)).map((entity) => ({
+            module: module,
+            entity: entity.name,
+        }));
+    }
+    async get(moduleName, entityName) {
+        if (moduleName == RootConfig.module.name) {
+            switch (entityName) {
+                case RootConfig.entities.contactMethodType.name:
+                    return (await Promise.resolve().then(function () { return contactMethodType_entity; })).contactMethodTypeFactory(this.injector);
+                case RootConfig.entities.contactMethod.name:
+                    return (await import('./acorex-modules-contact-management-contact-method.entity-DR6V9Nox.mjs')).contactMethodFactory(this.injector);
+                case RootConfig.entities.emergencyContact.name:
+                    return (await import('./acorex-modules-contact-management-emergency-contact.entity-D75qsDor.mjs')).emergencyContactFactory(this.injector);
+            }
+        }
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMContactManagementEntityProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMContactManagementEntityProvider }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMContactManagementEntityProvider, decorators: [{
+            type: Injectable
+        }] });
+
+class AXMContactManagementMenuProvider {
+    constructor() {
+        this.entityService = inject(AXPEntityService);
+        this.sessionService = inject(AXPSessionService);
+    }
+    async provide(context) {
+        const module = RootConfig.module;
+        context.addItems([
+            {
+                priority: 9002,
+                text: '@contact-management:root-menu',
+                icon: module.icon,
+                children: [
+                    {
+                        text: '@contact-management:contact-method-type.plural-title',
+                        path: this.entityService.createPath(module.name, RootConfig.entities.contactMethodType.name),
+                        icon: RootConfig.entities.contactMethodType.icon,
+                        priority: 5,
+                    },
+                    {
+                        text: ``,
+                        type: 'break',
+                        priority: 10,
+                    },
+                    {
+                        text: '@contact-management:emergency-contact.plural-title',
+                        path: this.entityService.createPath(module.name, RootConfig.entities.emergencyContact.name),
+                        icon: RootConfig.entities.emergencyContact.icon,
+                        priority: 12,
+                    },
+                    {
+                        text: '@contact-management:emergency-contact.page.title',
+                        path: `${this.sessionService.application?.name}/emergency-contacts`,
+                        icon: 'fa-light fa-phone-rotary',
+                        priority: 13,
+                    },
+                ],
+            },
+        ]);
+    }
+}
+
+class AXMContactManagementSearchCommandProvider extends AXPSearchCommandProvider {
+    constructor() {
+        super(...arguments);
+        this.commands = [
+        // Commands will be added here following the correct pattern
+        ];
+    }
+}
+
 class AXMContactManagementModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMContactManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: AXMContactManagementModule, imports: [CommonModule, i1.RouterModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: AXMContactManagementModule, imports: [CommonModule,
+            // Entity Modules
+            AXMContactMethodTypeEntityModule,
+            AXMContactMethodEntityModule,
+            AXMEmergencyContactEntityModule, i1.RouterModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMContactManagementModule, providers: [
             // Entity Provider
             {
@@ -410,20 +491,11 @@ class AXMContactManagementModule {
                 },
                 multi: true,
             },
-            // Entity Services
-            {
-                provide: AXMContactMethodTypeService,
-                useClass: AXMContactMethodTypeServiceImpl,
-            },
-            {
-                provide: AXMContactMethodService,
-                useClass: AXMContactMethodServiceImpl,
-            },
-            {
-                provide: AXMEmergencyContactService,
-                useClass: AXMEmergencyContactServiceImpl,
-            },
         ], imports: [CommonModule,
+            // Entity Modules
+            AXMContactMethodTypeEntityModule,
+            AXMContactMethodEntityModule,
+            AXMEmergencyContactEntityModule,
             RouterModule.forChild([{
                     path: ':app/emergency-contacts',
                     component: AXPRootLayoutComponent,
@@ -441,6 +513,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
             args: [{
                     imports: [
                         CommonModule,
+                        // Entity Modules
+                        AXMContactMethodTypeEntityModule,
+                        AXMContactMethodEntityModule,
+                        AXMEmergencyContactEntityModule,
                         RouterModule.forChild([{
                                 path: ':app/emergency-contacts',
                                 component: AXPRootLayoutComponent,
@@ -482,19 +558,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                             },
                             multi: true,
                         },
-                        // Entity Services
-                        {
-                            provide: AXMContactMethodTypeService,
-                            useClass: AXMContactMethodTypeServiceImpl,
-                        },
-                        {
-                            provide: AXMContactMethodService,
-                            useClass: AXMContactMethodServiceImpl,
-                        },
-                        {
-                            provide: AXMEmergencyContactService,
-                            useClass: AXMEmergencyContactServiceImpl,
-                        },
                     ],
                 }]
         }] });
@@ -558,6 +621,100 @@ var permissionDefinition_provider = /*#__PURE__*/Object.freeze({
     AXMPermissionDefinitionProvider: AXMPermissionDefinitionProvider
 });
 
+class AXMEmergencyContactItemComponent {
+    constructor() {
+        this.contact = input.required(...(ngDevMode ? [{ debugName: "contact" }] : []));
+        this.expanded = signal(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+        this.categoryIcon = computed(() => {
+            const c = this.contact()?.categories?.[0];
+            return c?.icon ?? 'fa-light fa-circle-info';
+        }, ...(ngDevMode ? [{ debugName: "categoryIcon" }] : []));
+        this.categoryColor = computed(() => {
+            const c = this.contact()?.categories?.[0];
+            return c?.color ?? 'fa-light fa-circle-info';
+        }, ...(ngDevMode ? [{ debugName: "categoryColor" }] : []));
+        this.messageDisabled = computed(() => {
+            const c = this.contact();
+            const smsNumber = c.textNumber || c.phoneNumber;
+            return !(c.isTextCapable && !!smsNumber);
+        }, ...(ngDevMode ? [{ debugName: "messageDisabled" }] : []));
+        this.callDisabled = computed(() => !this.contact().phoneNumber, ...(ngDevMode ? [{ debugName: "callDisabled" }] : []));
+        this.coverageText = computed(() => {
+            const c = this.contact();
+            const coverage = [];
+            if (c.isNational)
+                coverage.push('National');
+            if (c.isRegional)
+                coverage.push('Regional');
+            if (c.isLocal)
+                coverage.push('Local');
+            return coverage.join(', ');
+        }, ...(ngDevMode ? [{ debugName: "coverageText" }] : []));
+        this.capabilitiesText = computed(() => {
+            const c = this.contact();
+            const caps = [];
+            if (c.isTextCapable)
+                caps.push('Text');
+            if (c.isVideoCallCapable)
+                caps.push('Video');
+            if (!caps.length)
+                return 'Voice Only';
+            return caps.join(' ');
+        }, ...(ngDevMode ? [{ debugName: "capabilitiesText" }] : []));
+    }
+    toggleExpanded() {
+        this.expanded.update((v) => !v);
+    }
+    handleCall() {
+        const number = this.contact().phoneNumber;
+        if (number) {
+            window.open(`tel:${number}`, '_self');
+        }
+    }
+    handleText() {
+        const c = this.contact();
+        const smsNumber = c.textNumber || c.phoneNumber;
+        if (c.isTextCapable && smsNumber) {
+            window.open(`sms:${smsNumber}`, '_self');
+        }
+    }
+    visitWebsite() {
+        const url = this.contact().website;
+        if (url) {
+            window.open(url, '_blank');
+        }
+    }
+    async copyInfo() {
+        const c = this.contact();
+        const info = {
+            name: c.name,
+            phone: c.phoneNumber,
+            text: c.textNumber,
+            email: c.email,
+            website: c.website,
+            availability: c.availability,
+            coverage: this.coverageText(),
+            capabilities: this.capabilitiesText(),
+        };
+        try {
+            if (navigator?.clipboard) {
+                await navigator.clipboard.writeText(JSON.stringify(info, null, 2));
+            }
+        }
+        catch {
+            // ignore
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMEmergencyContactItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXMEmergencyContactItemComponent, isStandalone: true, selector: "axm-emergency-contact-item", inputs: { contact: { classPropertyName: "contact", publicName: "contact", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "\"ax-block ax-rounded-lg ax-border ax-lightest-surface dark:ax-darker-surface ax-shadow-sm\"" } }, ngImport: i0, template: "<div class=\"ax-space-y-3 ax-py-4\">\n  <!-- Header -->\n  <div class=\"ax-flex ax-items-center ax-justify-center ax-gap-3 ax-flex-col\">\n    <div class=\"ax-flex ax-items-start ax-gap-3 ax-min-w-0 ax-px-4 ax-w-full\">\n      <div\n        class=\"ax-flex ax-border ax-items-center ax-justify-center ax-w-10 ax-h-10 ax-rounded-md ax-lighter-surface dark:ax-surface\"\n      >\n        <ax-icon [icon]=\"categoryIcon()\" [style.color]=\"categoryColor()\"></ax-icon>\n      </div>\n      <div class=\"ax-min-w-0\">\n        <div class=\"ax-text-lg ax-font-semibold ax-text-default ax-truncate\">{{ contact().name }}</div>\n        @if (contact().shortName) {\n          <div class=\"ax-text-sm ax-text-muted ax-truncate\">{{ contact().shortName }}</div>\n        }\n      </div>\n    </div>\n    <div class=\"ax-w-full ax-border-t ax-border-lighter dark:ax-border-darker\"></div>\n    <div class=\"ax-flex ax-items-center ax-justify-between ax-sm ax-w-full ax-px-4\">\n      <div class=\"ax-flex ax-items-center ax-gap-2\">\n        <ax-button [look]=\"'blank'\" (onClick)=\"handleText()\" [disabled]=\"messageDisabled()\">\n          <ax-icon icon=\"fa-light fa-message\" class=\"ax-text-primary\"></ax-icon>\n        </ax-button>\n        <ax-button [look]=\"'blank'\" (onClick)=\"handleCall()\" [disabled]=\"callDisabled()\">\n          <ax-icon icon=\"fa-light fa-phone\" class=\"ax-text-primary\"></ax-icon>\n        </ax-button>\n      </div>\n      <ax-button [look]=\"'blank'\" [text]=\"'More details'\" (onClick)=\"toggleExpanded()\">\n        <ax-icon [icon]=\"expanded() ? 'fa-light fa-chevron-up' : 'fa-light fa-chevron-down'\"></ax-icon>\n      </ax-button>\n    </div>\n  </div>\n\n  <!-- Details -->\n  @if (expanded()) {\n    <div class=\"ax-px-6 ax-border-t ax-space-y-4 ax-pt-4 ax-border-lighter dark:ax-border-darker\">\n      <!-- Rowed details; only render when data exists -->\n      <div class=\"ax-grid ax-grid-cols-1 ax-gap-3\">\n        <div class=\"ax-flex ax-items-center ax-gap-2\" *ngIf=\"true\">\n          <ax-icon icon=\"fa-light fa-building\"></ax-icon>\n          <div class=\"ax-text-sm ax-text-muted\">Company Name</div>\n          <div class=\"ax-flex-1 ax-text-sm ax-text-default ax-text-right\">{{ contact().name }}</div>\n        </div>\n\n        @if (contact().phoneNumber || contact().shortName) {\n          <div class=\"ax-flex ax-items-center ax-gap-2\">\n            <ax-icon icon=\"fa-light fa-phone\"></ax-icon>\n            <div class=\"ax-text-sm ax-text-muted\">Phone</div>\n            <div class=\"ax-flex-1 ax-text-sm ax-text-default ax-text-right\">\n              {{ contact().shortName || contact().phoneNumber }}\n            </div>\n          </div>\n        }\n\n        @if (contact().email) {\n          <div class=\"ax-flex ax-items-center ax-gap-2\">\n            <ax-icon icon=\"fa-light fa-envelope\"></ax-icon>\n            <div class=\"ax-text-sm ax-text-muted\">Email</div>\n            <div class=\"ax-flex-1 ax-text-sm ax-text-default ax-text-right\">{{ contact().email }}</div>\n          </div>\n        }\n\n        @if (contact().website) {\n          <div class=\"ax-flex ax-items-center ax-gap-2\">\n            <ax-icon icon=\"fa-light fa-globe\"></ax-icon>\n            <div class=\"ax-text-sm ax-text-muted\">Website</div>\n            <div class=\"ax-flex-1 ax-text-sm ax-text-right\">\n              <a class=\"ax-text-accent ax-hover:underline\" [href]=\"contact().website\" target=\"_blank\">{{\n                contact().website\n              }}</a>\n            </div>\n          </div>\n        }\n\n        @if (coverageText()) {\n          <div class=\"ax-flex ax-items-center ax-gap-2\">\n            <ax-icon icon=\"fa-light fa-location-dot\"></ax-icon>\n            <div class=\"ax-text-sm ax-text-muted\">Coverage</div>\n            <div class=\"ax-flex-1 ax-text-sm ax-text-default ax-text-right\">{{ coverageText() }}</div>\n          </div>\n        }\n\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\n          <ax-icon icon=\"fa-light fa-wand-magic-sparkles\"></ax-icon>\n          <div class=\"ax-text-sm ax-text-muted\">Capabilities</div>\n          <div class=\"ax-flex-1 ax-text-sm ax-text-default ax-text-right\">{{ capabilitiesText() }}</div>\n        </div>\n\n        @if (contact().availability) {\n          <div class=\"ax-flex ax-items-center ax-gap-2\">\n            <ax-icon icon=\"fa-light fa-clock\"></ax-icon>\n            <div class=\"ax-text-sm ax-text-muted\">Availability</div>\n            <div class=\"ax-flex-1 ax-text-sm ax-text-default ax-text-right\">{{ contact().availability }}</div>\n          </div>\n        }\n\n        @if (contact().lastVerified) {\n          <div class=\"ax-flex ax-items-center ax-gap-2\">\n            <ax-icon icon=\"fa-light fa-badge-check\"></ax-icon>\n            <div class=\"ax-text-sm ax-text-muted\">Last Verified</div>\n            <div class=\"ax-flex-1 ax-text-sm ax-text-default ax-text-right\">\n              {{ contact().lastVerified | date }}\n            </div>\n          </div>\n        }\n      </div>\n\n      <!-- Footer actions -->\n      <div class=\"ax-flex ax-justify-end ax-gap-2\">\n        <ax-button [look]=\"'blank'\" (onClick)=\"copyInfo()\" [text]=\"'Copy Info'\">\n          <ax-icon icon=\"fa-light fa-copy\"></ax-icon>\n        </ax-button>\n        @if (contact().website) {\n          <ax-button [look]=\"'blank'\" [text]=\"'Check Website'\" (onClick)=\"visitWebsite()\">\n            <ax-icon icon=\"fa-light fa-arrow-up-right-from-square\"></ax-icon>\n          </ax-button>\n        }\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMEmergencyContactItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-emergency-contact-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXButtonModule, AXDecoratorModule], host: {
+                        '[class]': '"ax-block ax-rounded-lg ax-border ax-lightest-surface dark:ax-darker-surface ax-shadow-sm"',
+                    }, template: "<div class=\"ax-space-y-3 ax-py-4\">\n  <!-- Header -->\n  <div class=\"ax-flex ax-items-center ax-justify-center ax-gap-3 ax-flex-col\">\n    <div class=\"ax-flex ax-items-start ax-gap-3 ax-min-w-0 ax-px-4 ax-w-full\">\n      <div\n        class=\"ax-flex ax-border ax-items-center ax-justify-center ax-w-10 ax-h-10 ax-rounded-md ax-lighter-surface dark:ax-surface\"\n      >\n        <ax-icon [icon]=\"categoryIcon()\" [style.color]=\"categoryColor()\"></ax-icon>\n      </div>\n      <div class=\"ax-min-w-0\">\n        <div class=\"ax-text-lg ax-font-semibold ax-text-default ax-truncate\">{{ contact().name }}</div>\n        @if (contact().shortName) {\n          <div class=\"ax-text-sm ax-text-muted ax-truncate\">{{ contact().shortName }}</div>\n        }\n      </div>\n    </div>\n    <div class=\"ax-w-full ax-border-t ax-border-lighter dark:ax-border-darker\"></div>\n    <div class=\"ax-flex ax-items-center ax-justify-between ax-sm ax-w-full ax-px-4\">\n      <div class=\"ax-flex ax-items-center ax-gap-2\">\n        <ax-button [look]=\"'blank'\" (onClick)=\"handleText()\" [disabled]=\"messageDisabled()\">\n          <ax-icon icon=\"fa-light fa-message\" class=\"ax-text-primary\"></ax-icon>\n        </ax-button>\n        <ax-button [look]=\"'blank'\" (onClick)=\"handleCall()\" [disabled]=\"callDisabled()\">\n          <ax-icon icon=\"fa-light fa-phone\" class=\"ax-text-primary\"></ax-icon>\n        </ax-button>\n      </div>\n      <ax-button [look]=\"'blank'\" [text]=\"'More details'\" (onClick)=\"toggleExpanded()\">\n        <ax-icon [icon]=\"expanded() ? 'fa-light fa-chevron-up' : 'fa-light fa-chevron-down'\"></ax-icon>\n      </ax-button>\n    </div>\n  </div>\n\n  <!-- Details -->\n  @if (expanded()) {\n    <div class=\"ax-px-6 ax-border-t ax-space-y-4 ax-pt-4 ax-border-lighter dark:ax-border-darker\">\n      <!-- Rowed details; only render when data exists -->\n      <div class=\"ax-grid ax-grid-cols-1 ax-gap-3\">\n        <div class=\"ax-flex ax-items-center ax-gap-2\" *ngIf=\"true\">\n          <ax-icon icon=\"fa-light fa-building\"></ax-icon>\n          <div class=\"ax-text-sm ax-text-muted\">Company Name</div>\n          <div class=\"ax-flex-1 ax-text-sm ax-text-default ax-text-right\">{{ contact().name }}</div>\n        </div>\n\n        @if (contact().phoneNumber || contact().shortName) {\n          <div class=\"ax-flex ax-items-center ax-gap-2\">\n            <ax-icon icon=\"fa-light fa-phone\"></ax-icon>\n            <div class=\"ax-text-sm ax-text-muted\">Phone</div>\n            <div class=\"ax-flex-1 ax-text-sm ax-text-default ax-text-right\">\n              {{ contact().shortName || contact().phoneNumber }}\n            </div>\n          </div>\n        }\n\n        @if (contact().email) {\n          <div class=\"ax-flex ax-items-center ax-gap-2\">\n            <ax-icon icon=\"fa-light fa-envelope\"></ax-icon>\n            <div class=\"ax-text-sm ax-text-muted\">Email</div>\n            <div class=\"ax-flex-1 ax-text-sm ax-text-default ax-text-right\">{{ contact().email }}</div>\n          </div>\n        }\n\n        @if (contact().website) {\n          <div class=\"ax-flex ax-items-center ax-gap-2\">\n            <ax-icon icon=\"fa-light fa-globe\"></ax-icon>\n            <div class=\"ax-text-sm ax-text-muted\">Website</div>\n            <div class=\"ax-flex-1 ax-text-sm ax-text-right\">\n              <a class=\"ax-text-accent ax-hover:underline\" [href]=\"contact().website\" target=\"_blank\">{{\n                contact().website\n              }}</a>\n            </div>\n          </div>\n        }\n\n        @if (coverageText()) {\n          <div class=\"ax-flex ax-items-center ax-gap-2\">\n            <ax-icon icon=\"fa-light fa-location-dot\"></ax-icon>\n            <div class=\"ax-text-sm ax-text-muted\">Coverage</div>\n            <div class=\"ax-flex-1 ax-text-sm ax-text-default ax-text-right\">{{ coverageText() }}</div>\n          </div>\n        }\n\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\n          <ax-icon icon=\"fa-light fa-wand-magic-sparkles\"></ax-icon>\n          <div class=\"ax-text-sm ax-text-muted\">Capabilities</div>\n          <div class=\"ax-flex-1 ax-text-sm ax-text-default ax-text-right\">{{ capabilitiesText() }}</div>\n        </div>\n\n        @if (contact().availability) {\n          <div class=\"ax-flex ax-items-center ax-gap-2\">\n            <ax-icon icon=\"fa-light fa-clock\"></ax-icon>\n            <div class=\"ax-text-sm ax-text-muted\">Availability</div>\n            <div class=\"ax-flex-1 ax-text-sm ax-text-default ax-text-right\">{{ contact().availability }}</div>\n          </div>\n        }\n\n        @if (contact().lastVerified) {\n          <div class=\"ax-flex ax-items-center ax-gap-2\">\n            <ax-icon icon=\"fa-light fa-badge-check\"></ax-icon>\n            <div class=\"ax-text-sm ax-text-muted\">Last Verified</div>\n            <div class=\"ax-flex-1 ax-text-sm ax-text-default ax-text-right\">\n              {{ contact().lastVerified | date }}\n            </div>\n          </div>\n        }\n      </div>\n\n      <!-- Footer actions -->\n      <div class=\"ax-flex ax-justify-end ax-gap-2\">\n        <ax-button [look]=\"'blank'\" (onClick)=\"copyInfo()\" [text]=\"'Copy Info'\">\n          <ax-icon icon=\"fa-light fa-copy\"></ax-icon>\n        </ax-button>\n        @if (contact().website) {\n          <ax-button [look]=\"'blank'\" [text]=\"'Check Website'\" (onClick)=\"visitWebsite()\">\n            <ax-icon icon=\"fa-light fa-arrow-up-right-from-square\"></ax-icon>\n          </ax-button>\n        }\n      </div>\n    </div>\n  }\n</div>\n" }]
+        }] });
+
 class AXMEmergencyContactsPageComponent extends AXPPageLayoutBaseComponent {
     constructor() {
         super(...arguments);
@@ -757,7 +914,7 @@ class AXMEmergencyContactsPageComponent extends AXPPageLayoutBaseComponent {
                 provide: AXPPageLayoutBase,
                 useExisting: AXMEmergencyContactsPageComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  <axp-page-content>\n    <!-- Loading State -->\n    @if (loading()) {\n      <div class=\"ax-flex ax-items-center ax-justify-center ax-py-8\">\n        <ax-loading>Loading emergency contacts...</ax-loading>\n      </div>\n    } @else {\n      <div class=\"ax-space-y-6 ax-p-4\">\n        <!-- Quick Dial Section -->\n        @if (quickDialContacts().length > 0) {\n          <div class=\"ax-mb-8\">\n            <h2 class=\"ax-text-2xl ax-font-semibold ax-mb-4 ax-flex ax-items-center ax-gap-2\">\n              <ax-icon icon=\"fa-light fa-phone-rotary\" class=\"ax-text-danger\"></ax-icon>\n              Quick Dial\n            </h2>\n            <div class=\"ax-grid ax-grid-cols-1 sm:ax-grid-cols-2 lg:ax-grid-cols-3 xl:ax-grid-cols-4 ax-gap-4\">\n              @for (contact of quickDialContacts(); track contact.id) {\n                <div\n                  class=\"emergency-contact-quick-dial ax-p-4 ax-rounded-lg ax-border ax-bg-light\"\n                  [style.--priority-color]=\"'var(--ax-sys-color-' + getPriorityColor(contact.priority) + ')' + ''\"\n                >\n                  <!-- Compact Header with Primary Action -->\n                  <div class=\"ax-flex ax-items-start ax-justify-between ax-gap-3\">\n                    <div class=\"ax-flex-1 ax-min-w-0\">\n                      <h3 class=\"ax-text-lg ax-font-semibold ax-truncate ax-text-default\">\n                        {{ contact.name }}\n                      </h3>\n                      @if (contact.shortName) {\n                        <p class=\"ax-text-sm ax-text-muted ax-truncate\">{{ contact.shortName }}</p>\n                      }\n                    </div>\n                    <div class=\"ax-flex ax-items-center ax-gap-2\">\n                      <ax-button\n                        [color]=\"getPrimaryActionColor(contact)\"\n                        [size]=\"'small'\"\n                        [look]=\"'filled'\"\n                        [text]=\"getPrimaryActionLabel(contact)\"\n                        (onClick)=\"performPrimaryAction(contact)\"\n                      >\n                        <ax-icon\n                          [icon]=\"getPrimaryAction(contact) === 'text' ? 'fa-light fa-message' : 'fa-light fa-phone'\"\n                        ></ax-icon>\n                      </ax-button>\n                      <ax-button\n                        [color]=\"'secondary'\"\n                        [look]=\"'ghost'\"\n                        [size]=\"'small'\"\n                        (onClick)=\"toggleExpanded(contact.id)\"\n                      >\n                        <ax-icon\n                          [icon]=\"isExpanded(contact.id) ? 'fa-light fa-chevron-up' : 'fa-light fa-chevron-down'\"\n                        ></ax-icon>\n                      </ax-button>\n                    </div>\n                  </div>\n\n                  <!-- Collapsible Details -->\n                  @if (isExpanded(contact.id)) {\n                    <div class=\"ax-pt-3 ax-space-y-3\">\n                      <!-- Primary Phone -->\n                      <div class=\"ax-flex ax-items-center ax-gap-2\">\n                        <ax-icon icon=\"fa-light fa-phone\" class=\"ax-text-primary ax-w-4\"></ax-icon>\n                        <span class=\"contact-info-text ax-text-sm ax-font-mono ax-flex-1\">{{\n                          contact.phoneNumber\n                        }}</span>\n                        <ax-button\n                          [color]=\"'secondary'\"\n                          [size]=\"'small'\"\n                          [look]=\"'ghost'\"\n                          (onClick)=\"handleCopyNumber(contact)\"\n                        >\n                          <ax-icon icon=\"fa-light fa-copy\"></ax-icon>\n                        </ax-button>\n                      </div>\n\n                      <!-- Capabilities -->\n                      <div class=\"contact-info-text ax-flex ax-items-center ax-gap-2 ax-text-xs ax-text-muted\">\n                        <ax-icon icon=\"fa-light fa-info-circle\" class=\"ax-w-4\"></ax-icon>\n                        <span>{{ getCapabilitiesText(contact) }}</span>\n                      </div>\n\n                      <!-- Availability -->\n                      @if (contact.availability) {\n                        <div class=\"contact-info-text ax-flex ax-items-center ax-gap-2 ax-text-xs ax-text-muted\">\n                          <ax-icon icon=\"fa-light fa-clock\" class=\"ax-w-4\"></ax-icon>\n                          <span class=\"ax-truncate\">{{ contact.availability }}</span>\n                        </div>\n                      }\n\n                      @if (contact.requiresConfirmation) {\n                        <div class=\"ax-p-2 ax-rounded ax-bg-warning-50 ax-border ax-border-warning-200\">\n                          <p class=\"ax-text-xs ax-text-warning-800 ax-flex ax-items-center ax-gap-1\">\n                            <ax-icon icon=\"fa-light fa-triangle-exclamation\"></ax-icon>\n                            This contact requires confirmation before calling\n                          </p>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Dashboard Contacts Section -->\n        @if (dashboardContacts().length > 0) {\n          <div class=\"ax-mb-8\">\n            <h2 class=\"ax-text-2xl ax-font-semibold ax-mb-4 ax-flex ax-items-center ax-gap-2\">\n              <ax-icon icon=\"fa-light fa-tachometer-alt\" class=\"ax-text-primary\"></ax-icon>\n              All Emergency Contacts\n            </h2>\n            <div>\n              <div class=\"ax-space-y-4\">\n                @for (contact of dashboardContacts(); track contact.id) {\n                  <div class=\"emergency-contact-detailed ax-p-4 ax-rounded-lg ax-border ax-bg-light\">\n                    <!-- Compact header -->\n                    <div class=\"ax-flex ax-items-start ax-justify-between ax-mb-3 ax-gap-3\">\n                      <div class=\"ax-flex-1 ax-min-w-0\">\n                        <h3 class=\"ax-text-xl ax-font-semibold ax-text-default\">{{ contact.name }}</h3>\n                        @if (contact.shortName) {\n                          <p class=\"ax-text-muted\">{{ contact.shortName }}</p>\n                        }\n                      </div>\n                      <div class=\"ax-flex ax-items-center ax-gap-2\">\n                        <ax-button\n                          [color]=\"getPrimaryActionColor(contact)\"\n                          [look]=\"'filled'\"\n                          [size]=\"'small'\"\n                          [text]=\"getPrimaryActionLabel(contact)\"\n                          (onClick)=\"performPrimaryAction(contact)\"\n                        >\n                          <ax-icon\n                            [icon]=\"getPrimaryAction(contact) === 'text' ? 'fa-light fa-message' : 'fa-light fa-phone'\"\n                          ></ax-icon>\n                        </ax-button>\n                        <ax-button\n                          [color]=\"'secondary'\"\n                          [look]=\"'ghost'\"\n                          [size]=\"'small'\"\n                          (onClick)=\"toggleExpanded(contact.id)\"\n                        >\n                          <ax-icon\n                            [icon]=\"isExpanded(contact.id) ? 'fa-light fa-chevron-up' : 'fa-light fa-chevron-down'\"\n                          ></ax-icon>\n                        </ax-button>\n                      </div>\n                    </div>\n\n                    <!-- Collapsible Details -->\n                    @if (isExpanded(contact.id)) {\n                      <div class=\"ax-grid ax-grid-cols-1 lg:ax-grid-cols-3 ax-gap-4 ax-items-start\">\n                        <!-- Contact Info -->\n                        <div class=\"lg:ax-col-span-2\">\n                          @if (contact.description) {\n                            <p class=\"ax-text-muted ax-mb-4\">{{ contact.description }}</p>\n                          }\n\n                          <!-- Contact Methods Grid -->\n                          <div class=\"ax-grid ax-grid-cols-1 sm:ax-grid-cols-2 ax-gap-3 ax-mb-4\">\n                            <!-- Phone -->\n                            <div class=\"ax-flex ax-items-center ax-gap-2\">\n                              <ax-icon icon=\"fa-light fa-phone\" class=\"ax-text-primary\"></ax-icon>\n                              <span class=\"ax-font-mono\">{{ contact.phoneNumber }}</span>\n                            </div>\n\n                            <!-- Text Number -->\n                            @if (contact.textNumber) {\n                              <div class=\"ax-flex ax-items-center ax-gap-2\">\n                                <ax-icon icon=\"fa-light fa-message\" class=\"ax-text-secondary\"></ax-icon>\n                                <span class=\"ax-font-mono\">{{ contact.textNumber }}</span>\n                              </div>\n                            }\n\n                            <!-- Email -->\n                            @if (contact.email) {\n                              <div class=\"ax-flex ax-items-center ax-gap-2\">\n                                <ax-icon icon=\"fa-light fa-envelope\" class=\"ax-text-info\"></ax-icon>\n                                <span>{{ contact.email }}</span>\n                              </div>\n                            }\n\n                            <!-- Website -->\n                            @if (contact.website) {\n                              <div class=\"ax-flex ax-items-center ax-gap-2\">\n                                <ax-icon icon=\"fa-light fa-globe\" class=\"ax-text-accent\"></ax-icon>\n                                <a [href]=\"contact.website\" target=\"_blank\" class=\"ax-text-accent ax-hover:underline\">\n                                  Website\n                                </a>\n                              </div>\n                            }\n                          </div>\n\n                          <!-- Coverage & Capabilities -->\n                          <div class=\"ax-grid ax-grid-cols-1 sm:ax-grid-cols-3 ax-gap-3 ax-text-sm\">\n                            <div>\n                              <strong class=\"ax-text-muted\">Coverage:</strong>\n                              <p>{{ getCoverageText(contact) }}</p>\n                            </div>\n                            <div>\n                              <strong class=\"ax-text-muted\">Capabilities:</strong>\n                              <p>{{ getCapabilitiesText(contact) }}</p>\n                            </div>\n                            @if (contact.availability) {\n                              <div>\n                                <strong class=\"ax-text-muted\">Availability:</strong>\n                                <p>{{ contact.availability }}</p>\n                              </div>\n                            }\n                          </div>\n                        </div>\n\n                        <!-- Secondary actions and meta -->\n                        <div class=\"ax-flex ax-flex-col ax-gap-3\">\n                          <!-- Secondary Actions -->\n                          <div class=\"ax-flex ax-gap-2\">\n                            @if (contact.website) {\n                              <ax-button\n                                [color]=\"'secondary'\"\n                                [look]=\"'ghost'\"\n                                [size]=\"'small'\"\n                                class=\"ax-flex-1\"\n                                (onClick)=\"handleVisitWebsite(contact)\"\n                              >\n                                <ax-icon icon=\"fa-light fa-external-link\"></ax-icon>\n                              </ax-button>\n                            }\n\n                            <ax-button\n                              [color]=\"'secondary'\"\n                              [look]=\"'ghost'\"\n                              [size]=\"'small'\"\n                              class=\"ax-flex-1\"\n                              (onClick)=\"handleCopyNumber(contact)\"\n                            >\n                              <ax-icon icon=\"fa-light fa-copy\"></ax-icon>\n                            </ax-button>\n                          </div>\n\n                          <!-- Warnings -->\n                          @if (contact.requiresConfirmation) {\n                            <div class=\"ax-p-3 ax-rounded ax-bg-warning-50 ax-border ax-border-warning-200\">\n                              <p class=\"ax-text-xs ax-text-warning-800 ax-flex ax-items-center ax-gap-2\">\n                                <ax-icon icon=\"fa-light fa-triangle-exclamation\"></ax-icon>\n                                This contact requires confirmation before calling\n                              </p>\n                            </div>\n                          }\n\n                          @if (contact.lastVerified) {\n                            <div class=\"ax-text-xs ax-text-muted\">\n                              <strong>Last Verified:</strong>\n                              <p>{{ contact.lastVerified | date }}</p>\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        }\n\n        <!-- Fallback: Show all contacts if no filtered contacts are available -->\n        @if (quickDialContacts().length === 0 && dashboardContacts().length === 0 && displayContacts().length > 0) {\n          <div class=\"ax-mb-8\">\n            <h2 class=\"ax-text-2xl ax-font-semibold ax-mb-4 ax-flex ax-items-center ax-gap-2\">\n              <ax-icon icon=\"fa-light fa-list\" class=\"ax-text-info\"></ax-icon>\n              All Emergency Contacts\n            </h2>\n            <div class=\"ax-space-y-4\">\n              @for (contact of displayContacts(); track contact.id) {\n                <div class=\"emergency-contact-detailed ax-p-4 ax-rounded-lg ax-border ax-bg-light\">\n                  <!-- Compact header -->\n                  <div class=\"ax-flex ax-items-start ax-justify-between ax-mb-3 ax-gap-3\">\n                    <div class=\"ax-flex-1 ax-min-w-0\">\n                      <h3 class=\"ax-text-xl ax-font-semibold ax-text-default\">{{ contact.name }}</h3>\n                      @if (contact.shortName) {\n                        <p class=\"ax-text-muted\">{{ contact.shortName }}</p>\n                      }\n                    </div>\n                    <div class=\"ax-flex ax-items-center ax-gap-2\">\n                      <ax-button\n                        [color]=\"getPrimaryActionColor(contact)\"\n                        [look]=\"'filled'\"\n                        [size]=\"'small'\"\n                        (onClick)=\"performPrimaryAction(contact)\"\n                      >\n                        <ax-icon\n                          [icon]=\"getPrimaryAction(contact) === 'text' ? 'fa-light fa-message' : 'fa-light fa-phone'\"\n                        ></ax-icon>\n                        {{ getPrimaryActionLabel(contact) }}\n                      </ax-button>\n                      <ax-button\n                        [color]=\"'secondary'\"\n                        [look]=\"'ghost'\"\n                        [size]=\"'small'\"\n                        (onClick)=\"toggleExpanded(contact.id)\"\n                      >\n                        <ax-icon\n                          [icon]=\"isExpanded(contact.id) ? 'fa-light fa-chevron-up' : 'fa-light fa-chevron-down'\"\n                        ></ax-icon>\n                      </ax-button>\n                    </div>\n                  </div>\n\n                  <!-- Collapsible details -->\n                  @if (isExpanded(contact.id)) {\n                    <div class=\"ax-grid ax-grid-cols-1 lg:ax-grid-cols-3 ax-gap-4 ax-items-start\">\n                      <!-- Contact Info -->\n                      <div class=\"lg:ax-col-span-2\">\n                        @if (contact.description) {\n                          <p class=\"ax-text-muted ax-mb-4\">{{ contact.description }}</p>\n                        }\n\n                        <!-- Contact Methods Grid -->\n                        <div class=\"ax-grid ax-grid-cols-1 sm:ax-grid-cols-2 ax-gap-3 ax-mb-4\">\n                          <!-- Phone -->\n                          <div class=\"ax-flex ax-items-center ax-gap-2\">\n                            <ax-icon icon=\"fa-light fa-phone\" class=\"ax-text-primary\"></ax-icon>\n                            <span class=\"ax-font-mono\">{{ contact.phoneNumber }}</span>\n                          </div>\n\n                          <!-- Email -->\n                          @if (contact.email) {\n                            <div class=\"ax-flex ax-items-center ax-gap-2\">\n                              <ax-icon icon=\"fa-light fa-envelope\" class=\"ax-text-info\"></ax-icon>\n                              <span>{{ contact.email }}</span>\n                            </div>\n                          }\n\n                          <!-- Website -->\n                          @if (contact.website) {\n                            <div class=\"ax-flex ax-items-center ax-gap-2\">\n                              <ax-icon icon=\"fa-light fa-globe\" class=\"ax-text-accent\"></ax-icon>\n                              <a [href]=\"contact.website\" target=\"_blank\" class=\"ax-text-accent ax-hover:underline\">\n                                Website\n                              </a>\n                            </div>\n                          }\n                        </div>\n\n                        <!-- Status Info -->\n                        <div class=\"ax-grid ax-grid-cols-1 sm:ax-grid-cols-3 ax-gap-3 ax-text-sm\">\n                          <div>\n                            <strong class=\"ax-text-muted\">Coverage:</strong>\n                            <p>{{ getCoverageText(contact) }}</p>\n                          </div>\n                          <div>\n                            <strong class=\"ax-text-muted\">Capabilities:</strong>\n                            <p>{{ getCapabilitiesText(contact) }}</p>\n                          </div>\n                          <div>\n                            <strong class=\"ax-text-muted\">Status:</strong>\n                            <p class=\"ax-flex ax-items-center ax-gap-1\">\n                              <span [class]=\"contact.isActive ? 'ax-text-success' : 'ax-text-danger'\">\n                                {{ contact.isActive ? 'Active' : 'Inactive' }}\n                              </span>\n                              @if (contact.isVerified) {\n                                <ax-icon icon=\"fa-light fa-check-circle\" class=\"ax-text-success\"></ax-icon>\n                              }\n                            </p>\n                          </div>\n                        </div>\n                      </div>\n\n                      <!-- Secondary Actions -->\n                      <div class=\"ax-flex ax-gap-2\">\n                        @if (contact.website) {\n                          <ax-button\n                            [color]=\"'secondary'\"\n                            [look]=\"'ghost'\"\n                            [size]=\"'small'\"\n                            class=\"ax-flex-1\"\n                            (onClick)=\"handleVisitWebsite(contact)\"\n                          >\n                            <ax-icon icon=\"fa-light fa-external-link\"></ax-icon>\n                          </ax-button>\n                        }\n\n                        <ax-button\n                          [color]=\"'secondary'\"\n                          [look]=\"'ghost'\"\n                          [size]=\"'small'\"\n                          class=\"ax-flex-1\"\n                          (onClick)=\"handleCopyNumber(contact)\"\n                        >\n                          <ax-icon icon=\"fa-light fa-copy\"></ax-icon>\n                        </ax-button>\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- No Contacts State -->\n        @if (allContacts().length === 0 && !loading()) {\n          <div class=\"ax-text-center ax-py-12\">\n            <ax-icon icon=\"fa-light fa-phone-slash\" class=\"ax-text-6xl ax-text-muted ax-mb-4\"></ax-icon>\n            <h3 class=\"ax-text-xl ax-font-medium ax-text-muted ax-mb-2\">No emergency contacts available</h3>\n          </div>\n        }\n      </div>\n    }\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axm-emergency-contacts-page{display:block;width:100%;height:100%}axm-emergency-contacts-page .ax-space-y-6.ax-p-4{max-width:1200px;margin:0 auto;padding-left:1rem;padding-right:1rem}@media (min-width: 768px){axm-emergency-contacts-page .ax-space-y-6.ax-p-4{padding-left:1.5rem;padding-right:1.5rem}}axm-emergency-contacts-page h2{margin-bottom:1.25rem;color:var(--ax-sys-color-primary);border-bottom:1px solid var(--ax-sys-color-border);padding-bottom:.5rem}axm-emergency-contacts-page h2 ax-icon{margin-right:.5rem}@media (min-width: 768px){axm-emergency-contacts-page h2 ax-icon{margin-right:.75rem}}axm-emergency-contacts-page .emergency-contact-quick-dial{position:relative;--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);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));animation-duration:.2s;border:1px solid var(--ax-sys-color-outline-variant);min-height:140px}axm-emergency-contacts-page .emergency-contact-quick-dial:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transform:translateY(-2px);border-color:var(--priority-color, var(--ax-sys-color-primary))}axm-emergency-contacts-page .emergency-contact-quick-dial h3{color:var(--ax-sys-color-on-surface);margin-bottom:.125rem;font-size:1rem;line-height:1.5rem;font-weight:600}@media (min-width: 768px){axm-emergency-contacts-page .emergency-contact-quick-dial h3{font-size:1.125rem;line-height:1.75rem}}axm-emergency-contacts-page .emergency-contact-quick-dial .ax-button{font-size:.75rem;line-height:1rem;font-weight:500}@media (min-width: 768px){axm-emergency-contacts-page .emergency-contact-quick-dial .ax-button{font-size:.875rem;line-height:1.25rem}}axm-emergency-contacts-page .emergency-contact-quick-dial .ax-button{min-height:30px}axm-emergency-contacts-page .emergency-contact-detailed{--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);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));animation-duration:.2s;border:1px solid var(--ax-sys-color-outline-variant)}axm-emergency-contacts-page .emergency-contact-detailed:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transform:translateY(-1px);border-color:var(--ax-sys-color-primary)}axm-emergency-contacts-page .emergency-contact-detailed h3{color:var(--ax-sys-color-on-surface);font-size:1.125rem;line-height:1.75rem;font-weight:600}@media (min-width: 768px){axm-emergency-contacts-page .emergency-contact-detailed h3{font-size:1.25rem;line-height:1.75rem}}axm-emergency-contacts-page .emergency-contact-detailed ax-icon{flex-shrink:0}@media (min-width: 640px){axm-emergency-contacts-page .emergency-contact-detailed .ax-grid-cols-1.sm\\\\:ax-grid-cols-2>div{min-width:0px}}@media (min-width: 1024px){axm-emergency-contacts-page .emergency-contact-detailed .ax-flex.ax-flex-col.ax-gap-3{position:-webkit-sticky;position:sticky;top:1rem}}axm-emergency-contacts-page ax-loading{margin-left:auto;margin-right:auto}axm-emergency-contacts-page .ax-text-center.ax-py-12 ax-icon{margin-left:auto;margin-right:auto;display:block}axm-emergency-contacts-page ax-badge[data-color=danger]{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-danger-200),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-800),var(--tw-text-opacity, 1))}axm-emergency-contacts-page ax-badge[data-color=warning]{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-200),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-800),var(--tw-text-opacity, 1))}axm-emergency-contacts-page ax-badge[data-color=primary]{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-200),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-800),var(--tw-text-opacity, 1))}axm-emergency-contacts-page ax-badge[data-color=secondary]{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-secondary-200),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-secondary-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-secondary-800),var(--tw-text-opacity, 1))}axm-emergency-contacts-page .ax-bg-warning-50 ax-icon{flex-shrink:0}axm-emergency-contacts-page .ax-font-mono{letter-spacing:.025em}@media (min-width: 640px){axm-emergency-contacts-page axp-layout-content .ax-gap-4{gap:1.5rem}}axm-emergency-contacts-page ax-button{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}axm-emergency-contacts-page ax-button:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}axm-emergency-contacts-page ax-button:active{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}axm-emergency-contacts-page ax-button[data-color=danger]{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}axm-emergency-contacts-page ax-button[data-color=danger]:hover{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}axm-emergency-contacts-page ax-icon.ax-w-4{height:1rem}axm-emergency-contacts-page ax-icon.ax-text-6xl{height:6rem;width:6rem}@media (max-width: 640px){axm-emergency-contacts-page .ax-grid-cols-1 .ax-gap-3{gap:.5rem}axm-emergency-contacts-page .emergency-contact-quick-dial .contact-info-text{font-size:.75rem;line-height:1rem}}@media print{axm-emergency-contacts-page .emergency-contact-quick-dial,axm-emergency-contacts-page .emergency-contact-detailed{break-inside:avoid;border-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}axm-emergency-contacts-page ax-button{display:none}axm-emergency-contacts-page .ax-bg-warning-50{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}}@media (prefers-contrast: high){axm-emergency-contacts-page .emergency-contact-quick-dial,axm-emergency-contacts-page .emergency-contact-detailed{border-width:2px}axm-emergency-contacts-page ax-badge{border-width:2px}}@media (prefers-reduced-motion: reduce){axm-emergency-contacts-page *{transition-property:none}axm-emergency-contacts-page ax-button:hover,axm-emergency-contacts-page .emergency-contact-quick-dial:hover{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i3.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i4.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXFormatModule }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "pipe", type: i5.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  <axp-page-content>\n    <!-- Loading State -->\n    @if (loading()) {\n      <div class=\"ax-flex ax-items-center ax-justify-center ax-py-8\">\n        <ax-loading>Loading emergency contacts...</ax-loading>\n      </div>\n    } @else {\n      <div class=\"ax-space-y-6 ax-p-4\">\n        <!-- Quick Dial Section -->\n        @if (quickDialContacts().length > 0) {\n          <div class=\"ax-mb-8\">\n            <h2 class=\"ax-text-2xl ax-font-semibold ax-mb-4 ax-flex ax-items-center ax-gap-2\">\n              <ax-icon icon=\"fa-light fa-phone-rotary\" class=\"ax-text-danger\"></ax-icon>\n              Quick Dial\n            </h2>\n            <div class=\"ax-grid ax-grid-cols-1 sm:ax-grid-cols-2 lg:ax-grid-cols-3 xl:ax-grid-cols-4 ax-gap-4\">\n              @for (contact of quickDialContacts(); track contact.id) {\n                <axm-emergency-contact-item [contact]=\"contact\"></axm-emergency-contact-item>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Dashboard Contacts Section -->\n        @if (dashboardContacts().length > 0) {\n          <div class=\"ax-mb-8\">\n            <h2 class=\"ax-text-2xl ax-font-semibold ax-mb-4 ax-flex ax-items-center ax-gap-2\">\n              <ax-icon icon=\"fa-light fa-tachometer-alt\" class=\"ax-text-primary\"></ax-icon>\n              All Emergency Contacts\n            </h2>\n            <div class=\"ax-grid ax-grid-cols-1 sm:ax-grid-cols-2 lg:ax-grid-cols-3 xl:ax-grid-cols-4 ax-gap-4\">\n              @for (contact of dashboardContacts(); track contact.id) {\n                <axm-emergency-contact-item [contact]=\"contact\"></axm-emergency-contact-item>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Fallback: Show all contacts if no filtered contacts are available -->\n        @if (quickDialContacts().length === 0 && dashboardContacts().length === 0 && displayContacts().length > 0) {\n          <div class=\"ax-mb-8\">\n            <h2 class=\"ax-text-2xl ax-font-semibold ax-mb-4 ax-flex ax-items-center ax-gap-2\">\n              <ax-icon icon=\"fa-light fa-list\" class=\"ax-text-info\"></ax-icon>\n              All Emergency Contacts\n            </h2>\n            <div class=\"ax-grid ax-grid-cols-1 sm:ax-grid-cols-2 lg:ax-grid-cols-3 xl:ax-grid-cols-4 ax-gap-4\">\n              @for (contact of displayContacts(); track contact.id) {\n                <axm-emergency-contact-item [contact]=\"contact\"></axm-emergency-contact-item>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- No Contacts State -->\n        @if (allContacts().length === 0 && !loading()) {\n          <div class=\"ax-text-center ax-py-12\">\n            <ax-icon icon=\"fa-light fa-phone-slash\" class=\"ax-text-6xl ax-text-muted ax-mb-4\"></ax-icon>\n            <h3 class=\"ax-text-xl ax-font-medium ax-text-muted ax-mb-2\">No emergency contacts available</h3>\n          </div>\n        }\n      </div>\n    }\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axm-emergency-contacts-page{display:block;width:100%;height:100%}axm-emergency-contacts-page .ax-space-y-6.ax-p-4{max-width:1200px;margin:0 auto;padding-left:1rem;padding-right:1rem}@media (min-width: 768px){axm-emergency-contacts-page .ax-space-y-6.ax-p-4{padding-left:1.5rem;padding-right:1.5rem}}axm-emergency-contacts-page h2{margin-bottom:1.25rem;color:var(--ax-sys-color-primary);border-bottom:1px solid var(--ax-sys-color-border);padding-bottom:.5rem}axm-emergency-contacts-page h2 ax-icon{margin-right:.5rem}@media (min-width: 768px){axm-emergency-contacts-page h2 ax-icon{margin-right:.75rem}}axm-emergency-contacts-page .emergency-contact-quick-dial{position:relative;--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);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));animation-duration:.2s;border:1px solid var(--ax-sys-color-outline-variant);min-height:140px}axm-emergency-contacts-page .emergency-contact-quick-dial:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transform:translateY(-2px);border-color:var(--priority-color, var(--ax-sys-color-primary))}axm-emergency-contacts-page .emergency-contact-quick-dial h3{color:var(--ax-sys-color-on-surface);margin-bottom:.125rem;font-size:1rem;line-height:1.5rem;font-weight:600}@media (min-width: 768px){axm-emergency-contacts-page .emergency-contact-quick-dial h3{font-size:1.125rem;line-height:1.75rem}}axm-emergency-contacts-page .emergency-contact-quick-dial .ax-button{font-size:.75rem;line-height:1rem;font-weight:500}@media (min-width: 768px){axm-emergency-contacts-page .emergency-contact-quick-dial .ax-button{font-size:.875rem;line-height:1.25rem}}axm-emergency-contacts-page .emergency-contact-quick-dial .ax-button{min-height:30px}axm-emergency-contacts-page .emergency-contact-detailed{--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);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));animation-duration:.2s;border:1px solid var(--ax-sys-color-outline-variant)}axm-emergency-contacts-page .emergency-contact-detailed:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transform:translateY(-1px);border-color:var(--ax-sys-color-primary)}axm-emergency-contacts-page .emergency-contact-detailed h3{color:var(--ax-sys-color-on-surface);font-size:1.125rem;line-height:1.75rem;font-weight:600}@media (min-width: 768px){axm-emergency-contacts-page .emergency-contact-detailed h3{font-size:1.25rem;line-height:1.75rem}}axm-emergency-contacts-page .emergency-contact-detailed ax-icon{flex-shrink:0}@media (min-width: 640px){axm-emergency-contacts-page .emergency-contact-detailed .ax-grid-cols-1.sm\\\\:ax-grid-cols-2>div{min-width:0px}}@media (min-width: 1024px){axm-emergency-contacts-page .emergency-contact-detailed .ax-flex.ax-flex-col.ax-gap-3{position:-webkit-sticky;position:sticky;top:1rem}}axm-emergency-contacts-page ax-loading{margin-left:auto;margin-right:auto}axm-emergency-contacts-page .ax-text-center.ax-py-12 ax-icon{margin-left:auto;margin-right:auto;display:block}axm-emergency-contacts-page ax-badge[data-color=danger]{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-danger-200),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-800),var(--tw-text-opacity, 1))}axm-emergency-contacts-page ax-badge[data-color=warning]{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-200),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-800),var(--tw-text-opacity, 1))}axm-emergency-contacts-page ax-badge[data-color=primary]{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-200),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-800),var(--tw-text-opacity, 1))}axm-emergency-contacts-page ax-badge[data-color=secondary]{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-secondary-200),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-secondary-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-secondary-800),var(--tw-text-opacity, 1))}axm-emergency-contacts-page .ax-bg-warning-50 ax-icon{flex-shrink:0}axm-emergency-contacts-page .ax-font-mono{letter-spacing:.025em}@media (min-width: 640px){axm-emergency-contacts-page axp-layout-content .ax-gap-4{gap:1.5rem}}axm-emergency-contacts-page ax-button{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}axm-emergency-contacts-page ax-button:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}axm-emergency-contacts-page ax-button:active{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}axm-emergency-contacts-page ax-button[data-color=danger]{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}axm-emergency-contacts-page ax-button[data-color=danger]:hover{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}axm-emergency-contacts-page ax-icon.ax-w-4{height:1rem}axm-emergency-contacts-page ax-icon.ax-text-6xl{height:6rem;width:6rem}@media (max-width: 640px){axm-emergency-contacts-page .ax-grid-cols-1 .ax-gap-3{gap:.5rem}axm-emergency-contacts-page .emergency-contact-quick-dial .contact-info-text{font-size:.75rem;line-height:1rem}}@media print{axm-emergency-contacts-page .emergency-contact-quick-dial,axm-emergency-contacts-page .emergency-contact-detailed{break-inside:avoid;border-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}axm-emergency-contacts-page ax-button{display:none}axm-emergency-contacts-page .ax-bg-warning-50{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}}@media (prefers-contrast: high){axm-emergency-contacts-page .emergency-contact-quick-dial,axm-emergency-contacts-page .emergency-contact-detailed{border-width:2px}axm-emergency-contacts-page ax-badge{border-width:2px}}@media (prefers-reduced-motion: reduce){axm-emergency-contacts-page *{transition-property:none}axm-emergency-contacts-page ax-button:hover,axm-emergency-contacts-page .emergency-contact-quick-dial:hover{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i3$1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXFormatModule }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXMEmergencyContactItemComponent, selector: "axm-emergency-contact-item", inputs: ["contact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMEmergencyContactsPageComponent, decorators: [{
             type: Component,
@@ -771,14 +928,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         AXFormatModule,
                         AXPPageLayoutComponent,
                         AXPThemeLayoutBlockComponent,
+                        AXMEmergencyContactItemComponent,
                     ], host: {
-                        '(window:resize)': 'onResize()'
+                        '(window:resize)': 'onResize()',
                     }, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: AXPPageLayoutBase,
                             useExisting: AXMEmergencyContactsPageComponent,
                         },
-                    ], template: "<axp-page-layout *translate=\"let t\">\n  <axp-page-content>\n    <!-- Loading State -->\n    @if (loading()) {\n      <div class=\"ax-flex ax-items-center ax-justify-center ax-py-8\">\n        <ax-loading>Loading emergency contacts...</ax-loading>\n      </div>\n    } @else {\n      <div class=\"ax-space-y-6 ax-p-4\">\n        <!-- Quick Dial Section -->\n        @if (quickDialContacts().length > 0) {\n          <div class=\"ax-mb-8\">\n            <h2 class=\"ax-text-2xl ax-font-semibold ax-mb-4 ax-flex ax-items-center ax-gap-2\">\n              <ax-icon icon=\"fa-light fa-phone-rotary\" class=\"ax-text-danger\"></ax-icon>\n              Quick Dial\n            </h2>\n            <div class=\"ax-grid ax-grid-cols-1 sm:ax-grid-cols-2 lg:ax-grid-cols-3 xl:ax-grid-cols-4 ax-gap-4\">\n              @for (contact of quickDialContacts(); track contact.id) {\n                <div\n                  class=\"emergency-contact-quick-dial ax-p-4 ax-rounded-lg ax-border ax-bg-light\"\n                  [style.--priority-color]=\"'var(--ax-sys-color-' + getPriorityColor(contact.priority) + ')' + ''\"\n                >\n                  <!-- Compact Header with Primary Action -->\n                  <div class=\"ax-flex ax-items-start ax-justify-between ax-gap-3\">\n                    <div class=\"ax-flex-1 ax-min-w-0\">\n                      <h3 class=\"ax-text-lg ax-font-semibold ax-truncate ax-text-default\">\n                        {{ contact.name }}\n                      </h3>\n                      @if (contact.shortName) {\n                        <p class=\"ax-text-sm ax-text-muted ax-truncate\">{{ contact.shortName }}</p>\n                      }\n                    </div>\n                    <div class=\"ax-flex ax-items-center ax-gap-2\">\n                      <ax-button\n                        [color]=\"getPrimaryActionColor(contact)\"\n                        [size]=\"'small'\"\n                        [look]=\"'filled'\"\n                        [text]=\"getPrimaryActionLabel(contact)\"\n                        (onClick)=\"performPrimaryAction(contact)\"\n                      >\n                        <ax-icon\n                          [icon]=\"getPrimaryAction(contact) === 'text' ? 'fa-light fa-message' : 'fa-light fa-phone'\"\n                        ></ax-icon>\n                      </ax-button>\n                      <ax-button\n                        [color]=\"'secondary'\"\n                        [look]=\"'ghost'\"\n                        [size]=\"'small'\"\n                        (onClick)=\"toggleExpanded(contact.id)\"\n                      >\n                        <ax-icon\n                          [icon]=\"isExpanded(contact.id) ? 'fa-light fa-chevron-up' : 'fa-light fa-chevron-down'\"\n                        ></ax-icon>\n                      </ax-button>\n                    </div>\n                  </div>\n\n                  <!-- Collapsible Details -->\n                  @if (isExpanded(contact.id)) {\n                    <div class=\"ax-pt-3 ax-space-y-3\">\n                      <!-- Primary Phone -->\n                      <div class=\"ax-flex ax-items-center ax-gap-2\">\n                        <ax-icon icon=\"fa-light fa-phone\" class=\"ax-text-primary ax-w-4\"></ax-icon>\n                        <span class=\"contact-info-text ax-text-sm ax-font-mono ax-flex-1\">{{\n                          contact.phoneNumber\n                        }}</span>\n                        <ax-button\n                          [color]=\"'secondary'\"\n                          [size]=\"'small'\"\n                          [look]=\"'ghost'\"\n                          (onClick)=\"handleCopyNumber(contact)\"\n                        >\n                          <ax-icon icon=\"fa-light fa-copy\"></ax-icon>\n                        </ax-button>\n                      </div>\n\n                      <!-- Capabilities -->\n                      <div class=\"contact-info-text ax-flex ax-items-center ax-gap-2 ax-text-xs ax-text-muted\">\n                        <ax-icon icon=\"fa-light fa-info-circle\" class=\"ax-w-4\"></ax-icon>\n                        <span>{{ getCapabilitiesText(contact) }}</span>\n                      </div>\n\n                      <!-- Availability -->\n                      @if (contact.availability) {\n                        <div class=\"contact-info-text ax-flex ax-items-center ax-gap-2 ax-text-xs ax-text-muted\">\n                          <ax-icon icon=\"fa-light fa-clock\" class=\"ax-w-4\"></ax-icon>\n                          <span class=\"ax-truncate\">{{ contact.availability }}</span>\n                        </div>\n                      }\n\n                      @if (contact.requiresConfirmation) {\n                        <div class=\"ax-p-2 ax-rounded ax-bg-warning-50 ax-border ax-border-warning-200\">\n                          <p class=\"ax-text-xs ax-text-warning-800 ax-flex ax-items-center ax-gap-1\">\n                            <ax-icon icon=\"fa-light fa-triangle-exclamation\"></ax-icon>\n                            This contact requires confirmation before calling\n                          </p>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Dashboard Contacts Section -->\n        @if (dashboardContacts().length > 0) {\n          <div class=\"ax-mb-8\">\n            <h2 class=\"ax-text-2xl ax-font-semibold ax-mb-4 ax-flex ax-items-center ax-gap-2\">\n              <ax-icon icon=\"fa-light fa-tachometer-alt\" class=\"ax-text-primary\"></ax-icon>\n              All Emergency Contacts\n            </h2>\n            <div>\n              <div class=\"ax-space-y-4\">\n                @for (contact of dashboardContacts(); track contact.id) {\n                  <div class=\"emergency-contact-detailed ax-p-4 ax-rounded-lg ax-border ax-bg-light\">\n                    <!-- Compact header -->\n                    <div class=\"ax-flex ax-items-start ax-justify-between ax-mb-3 ax-gap-3\">\n                      <div class=\"ax-flex-1 ax-min-w-0\">\n                        <h3 class=\"ax-text-xl ax-font-semibold ax-text-default\">{{ contact.name }}</h3>\n                        @if (contact.shortName) {\n                          <p class=\"ax-text-muted\">{{ contact.shortName }}</p>\n                        }\n                      </div>\n                      <div class=\"ax-flex ax-items-center ax-gap-2\">\n                        <ax-button\n                          [color]=\"getPrimaryActionColor(contact)\"\n                          [look]=\"'filled'\"\n                          [size]=\"'small'\"\n                          [text]=\"getPrimaryActionLabel(contact)\"\n                          (onClick)=\"performPrimaryAction(contact)\"\n                        >\n                          <ax-icon\n                            [icon]=\"getPrimaryAction(contact) === 'text' ? 'fa-light fa-message' : 'fa-light fa-phone'\"\n                          ></ax-icon>\n                        </ax-button>\n                        <ax-button\n                          [color]=\"'secondary'\"\n                          [look]=\"'ghost'\"\n                          [size]=\"'small'\"\n                          (onClick)=\"toggleExpanded(contact.id)\"\n                        >\n                          <ax-icon\n                            [icon]=\"isExpanded(contact.id) ? 'fa-light fa-chevron-up' : 'fa-light fa-chevron-down'\"\n                          ></ax-icon>\n                        </ax-button>\n                      </div>\n                    </div>\n\n                    <!-- Collapsible Details -->\n                    @if (isExpanded(contact.id)) {\n                      <div class=\"ax-grid ax-grid-cols-1 lg:ax-grid-cols-3 ax-gap-4 ax-items-start\">\n                        <!-- Contact Info -->\n                        <div class=\"lg:ax-col-span-2\">\n                          @if (contact.description) {\n                            <p class=\"ax-text-muted ax-mb-4\">{{ contact.description }}</p>\n                          }\n\n                          <!-- Contact Methods Grid -->\n                          <div class=\"ax-grid ax-grid-cols-1 sm:ax-grid-cols-2 ax-gap-3 ax-mb-4\">\n                            <!-- Phone -->\n                            <div class=\"ax-flex ax-items-center ax-gap-2\">\n                              <ax-icon icon=\"fa-light fa-phone\" class=\"ax-text-primary\"></ax-icon>\n                              <span class=\"ax-font-mono\">{{ contact.phoneNumber }}</span>\n                            </div>\n\n                            <!-- Text Number -->\n                            @if (contact.textNumber) {\n                              <div class=\"ax-flex ax-items-center ax-gap-2\">\n                                <ax-icon icon=\"fa-light fa-message\" class=\"ax-text-secondary\"></ax-icon>\n                                <span class=\"ax-font-mono\">{{ contact.textNumber }}</span>\n                              </div>\n                            }\n\n                            <!-- Email -->\n                            @if (contact.email) {\n                              <div class=\"ax-flex ax-items-center ax-gap-2\">\n                                <ax-icon icon=\"fa-light fa-envelope\" class=\"ax-text-info\"></ax-icon>\n                                <span>{{ contact.email }}</span>\n                              </div>\n                            }\n\n                            <!-- Website -->\n                            @if (contact.website) {\n                              <div class=\"ax-flex ax-items-center ax-gap-2\">\n                                <ax-icon icon=\"fa-light fa-globe\" class=\"ax-text-accent\"></ax-icon>\n                                <a [href]=\"contact.website\" target=\"_blank\" class=\"ax-text-accent ax-hover:underline\">\n                                  Website\n                                </a>\n                              </div>\n                            }\n                          </div>\n\n                          <!-- Coverage & Capabilities -->\n                          <div class=\"ax-grid ax-grid-cols-1 sm:ax-grid-cols-3 ax-gap-3 ax-text-sm\">\n                            <div>\n                              <strong class=\"ax-text-muted\">Coverage:</strong>\n                              <p>{{ getCoverageText(contact) }}</p>\n                            </div>\n                            <div>\n                              <strong class=\"ax-text-muted\">Capabilities:</strong>\n                              <p>{{ getCapabilitiesText(contact) }}</p>\n                            </div>\n                            @if (contact.availability) {\n                              <div>\n                                <strong class=\"ax-text-muted\">Availability:</strong>\n                                <p>{{ contact.availability }}</p>\n                              </div>\n                            }\n                          </div>\n                        </div>\n\n                        <!-- Secondary actions and meta -->\n                        <div class=\"ax-flex ax-flex-col ax-gap-3\">\n                          <!-- Secondary Actions -->\n                          <div class=\"ax-flex ax-gap-2\">\n                            @if (contact.website) {\n                              <ax-button\n                                [color]=\"'secondary'\"\n                                [look]=\"'ghost'\"\n                                [size]=\"'small'\"\n                                class=\"ax-flex-1\"\n                                (onClick)=\"handleVisitWebsite(contact)\"\n                              >\n                                <ax-icon icon=\"fa-light fa-external-link\"></ax-icon>\n                              </ax-button>\n                            }\n\n                            <ax-button\n                              [color]=\"'secondary'\"\n                              [look]=\"'ghost'\"\n                              [size]=\"'small'\"\n                              class=\"ax-flex-1\"\n                              (onClick)=\"handleCopyNumber(contact)\"\n                            >\n                              <ax-icon icon=\"fa-light fa-copy\"></ax-icon>\n                            </ax-button>\n                          </div>\n\n                          <!-- Warnings -->\n                          @if (contact.requiresConfirmation) {\n                            <div class=\"ax-p-3 ax-rounded ax-bg-warning-50 ax-border ax-border-warning-200\">\n                              <p class=\"ax-text-xs ax-text-warning-800 ax-flex ax-items-center ax-gap-2\">\n                                <ax-icon icon=\"fa-light fa-triangle-exclamation\"></ax-icon>\n                                This contact requires confirmation before calling\n                              </p>\n                            </div>\n                          }\n\n                          @if (contact.lastVerified) {\n                            <div class=\"ax-text-xs ax-text-muted\">\n                              <strong>Last Verified:</strong>\n                              <p>{{ contact.lastVerified | date }}</p>\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        }\n\n        <!-- Fallback: Show all contacts if no filtered contacts are available -->\n        @if (quickDialContacts().length === 0 && dashboardContacts().length === 0 && displayContacts().length > 0) {\n          <div class=\"ax-mb-8\">\n            <h2 class=\"ax-text-2xl ax-font-semibold ax-mb-4 ax-flex ax-items-center ax-gap-2\">\n              <ax-icon icon=\"fa-light fa-list\" class=\"ax-text-info\"></ax-icon>\n              All Emergency Contacts\n            </h2>\n            <div class=\"ax-space-y-4\">\n              @for (contact of displayContacts(); track contact.id) {\n                <div class=\"emergency-contact-detailed ax-p-4 ax-rounded-lg ax-border ax-bg-light\">\n                  <!-- Compact header -->\n                  <div class=\"ax-flex ax-items-start ax-justify-between ax-mb-3 ax-gap-3\">\n                    <div class=\"ax-flex-1 ax-min-w-0\">\n                      <h3 class=\"ax-text-xl ax-font-semibold ax-text-default\">{{ contact.name }}</h3>\n                      @if (contact.shortName) {\n                        <p class=\"ax-text-muted\">{{ contact.shortName }}</p>\n                      }\n                    </div>\n                    <div class=\"ax-flex ax-items-center ax-gap-2\">\n                      <ax-button\n                        [color]=\"getPrimaryActionColor(contact)\"\n                        [look]=\"'filled'\"\n                        [size]=\"'small'\"\n                        (onClick)=\"performPrimaryAction(contact)\"\n                      >\n                        <ax-icon\n                          [icon]=\"getPrimaryAction(contact) === 'text' ? 'fa-light fa-message' : 'fa-light fa-phone'\"\n                        ></ax-icon>\n                        {{ getPrimaryActionLabel(contact) }}\n                      </ax-button>\n                      <ax-button\n                        [color]=\"'secondary'\"\n                        [look]=\"'ghost'\"\n                        [size]=\"'small'\"\n                        (onClick)=\"toggleExpanded(contact.id)\"\n                      >\n                        <ax-icon\n                          [icon]=\"isExpanded(contact.id) ? 'fa-light fa-chevron-up' : 'fa-light fa-chevron-down'\"\n                        ></ax-icon>\n                      </ax-button>\n                    </div>\n                  </div>\n\n                  <!-- Collapsible details -->\n                  @if (isExpanded(contact.id)) {\n                    <div class=\"ax-grid ax-grid-cols-1 lg:ax-grid-cols-3 ax-gap-4 ax-items-start\">\n                      <!-- Contact Info -->\n                      <div class=\"lg:ax-col-span-2\">\n                        @if (contact.description) {\n                          <p class=\"ax-text-muted ax-mb-4\">{{ contact.description }}</p>\n                        }\n\n                        <!-- Contact Methods Grid -->\n                        <div class=\"ax-grid ax-grid-cols-1 sm:ax-grid-cols-2 ax-gap-3 ax-mb-4\">\n                          <!-- Phone -->\n                          <div class=\"ax-flex ax-items-center ax-gap-2\">\n                            <ax-icon icon=\"fa-light fa-phone\" class=\"ax-text-primary\"></ax-icon>\n                            <span class=\"ax-font-mono\">{{ contact.phoneNumber }}</span>\n                          </div>\n\n                          <!-- Email -->\n                          @if (contact.email) {\n                            <div class=\"ax-flex ax-items-center ax-gap-2\">\n                              <ax-icon icon=\"fa-light fa-envelope\" class=\"ax-text-info\"></ax-icon>\n                              <span>{{ contact.email }}</span>\n                            </div>\n                          }\n\n                          <!-- Website -->\n                          @if (contact.website) {\n                            <div class=\"ax-flex ax-items-center ax-gap-2\">\n                              <ax-icon icon=\"fa-light fa-globe\" class=\"ax-text-accent\"></ax-icon>\n                              <a [href]=\"contact.website\" target=\"_blank\" class=\"ax-text-accent ax-hover:underline\">\n                                Website\n                              </a>\n                            </div>\n                          }\n                        </div>\n\n                        <!-- Status Info -->\n                        <div class=\"ax-grid ax-grid-cols-1 sm:ax-grid-cols-3 ax-gap-3 ax-text-sm\">\n                          <div>\n                            <strong class=\"ax-text-muted\">Coverage:</strong>\n                            <p>{{ getCoverageText(contact) }}</p>\n                          </div>\n                          <div>\n                            <strong class=\"ax-text-muted\">Capabilities:</strong>\n                            <p>{{ getCapabilitiesText(contact) }}</p>\n                          </div>\n                          <div>\n                            <strong class=\"ax-text-muted\">Status:</strong>\n                            <p class=\"ax-flex ax-items-center ax-gap-1\">\n                              <span [class]=\"contact.isActive ? 'ax-text-success' : 'ax-text-danger'\">\n                                {{ contact.isActive ? 'Active' : 'Inactive' }}\n                              </span>\n                              @if (contact.isVerified) {\n                                <ax-icon icon=\"fa-light fa-check-circle\" class=\"ax-text-success\"></ax-icon>\n                              }\n                            </p>\n                          </div>\n                        </div>\n                      </div>\n\n                      <!-- Secondary Actions -->\n                      <div class=\"ax-flex ax-gap-2\">\n                        @if (contact.website) {\n                          <ax-button\n                            [color]=\"'secondary'\"\n                            [look]=\"'ghost'\"\n                            [size]=\"'small'\"\n                            class=\"ax-flex-1\"\n                            (onClick)=\"handleVisitWebsite(contact)\"\n                          >\n                            <ax-icon icon=\"fa-light fa-external-link\"></ax-icon>\n                          </ax-button>\n                        }\n\n                        <ax-button\n                          [color]=\"'secondary'\"\n                          [look]=\"'ghost'\"\n                          [size]=\"'small'\"\n                          class=\"ax-flex-1\"\n                          (onClick)=\"handleCopyNumber(contact)\"\n                        >\n                          <ax-icon icon=\"fa-light fa-copy\"></ax-icon>\n                        </ax-button>\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- No Contacts State -->\n        @if (allContacts().length === 0 && !loading()) {\n          <div class=\"ax-text-center ax-py-12\">\n            <ax-icon icon=\"fa-light fa-phone-slash\" class=\"ax-text-6xl ax-text-muted ax-mb-4\"></ax-icon>\n            <h3 class=\"ax-text-xl ax-font-medium ax-text-muted ax-mb-2\">No emergency contacts available</h3>\n          </div>\n        }\n      </div>\n    }\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axm-emergency-contacts-page{display:block;width:100%;height:100%}axm-emergency-contacts-page .ax-space-y-6.ax-p-4{max-width:1200px;margin:0 auto;padding-left:1rem;padding-right:1rem}@media (min-width: 768px){axm-emergency-contacts-page .ax-space-y-6.ax-p-4{padding-left:1.5rem;padding-right:1.5rem}}axm-emergency-contacts-page h2{margin-bottom:1.25rem;color:var(--ax-sys-color-primary);border-bottom:1px solid var(--ax-sys-color-border);padding-bottom:.5rem}axm-emergency-contacts-page h2 ax-icon{margin-right:.5rem}@media (min-width: 768px){axm-emergency-contacts-page h2 ax-icon{margin-right:.75rem}}axm-emergency-contacts-page .emergency-contact-quick-dial{position:relative;--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);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));animation-duration:.2s;border:1px solid var(--ax-sys-color-outline-variant);min-height:140px}axm-emergency-contacts-page .emergency-contact-quick-dial:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transform:translateY(-2px);border-color:var(--priority-color, var(--ax-sys-color-primary))}axm-emergency-contacts-page .emergency-contact-quick-dial h3{color:var(--ax-sys-color-on-surface);margin-bottom:.125rem;font-size:1rem;line-height:1.5rem;font-weight:600}@media (min-width: 768px){axm-emergency-contacts-page .emergency-contact-quick-dial h3{font-size:1.125rem;line-height:1.75rem}}axm-emergency-contacts-page .emergency-contact-quick-dial .ax-button{font-size:.75rem;line-height:1rem;font-weight:500}@media (min-width: 768px){axm-emergency-contacts-page .emergency-contact-quick-dial .ax-button{font-size:.875rem;line-height:1.25rem}}axm-emergency-contacts-page .emergency-contact-quick-dial .ax-button{min-height:30px}axm-emergency-contacts-page .emergency-contact-detailed{--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);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));animation-duration:.2s;border:1px solid var(--ax-sys-color-outline-variant)}axm-emergency-contacts-page .emergency-contact-detailed:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transform:translateY(-1px);border-color:var(--ax-sys-color-primary)}axm-emergency-contacts-page .emergency-contact-detailed h3{color:var(--ax-sys-color-on-surface);font-size:1.125rem;line-height:1.75rem;font-weight:600}@media (min-width: 768px){axm-emergency-contacts-page .emergency-contact-detailed h3{font-size:1.25rem;line-height:1.75rem}}axm-emergency-contacts-page .emergency-contact-detailed ax-icon{flex-shrink:0}@media (min-width: 640px){axm-emergency-contacts-page .emergency-contact-detailed .ax-grid-cols-1.sm\\\\:ax-grid-cols-2>div{min-width:0px}}@media (min-width: 1024px){axm-emergency-contacts-page .emergency-contact-detailed .ax-flex.ax-flex-col.ax-gap-3{position:-webkit-sticky;position:sticky;top:1rem}}axm-emergency-contacts-page ax-loading{margin-left:auto;margin-right:auto}axm-emergency-contacts-page .ax-text-center.ax-py-12 ax-icon{margin-left:auto;margin-right:auto;display:block}axm-emergency-contacts-page ax-badge[data-color=danger]{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-danger-200),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-800),var(--tw-text-opacity, 1))}axm-emergency-contacts-page ax-badge[data-color=warning]{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-200),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-800),var(--tw-text-opacity, 1))}axm-emergency-contacts-page ax-badge[data-color=primary]{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-200),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-800),var(--tw-text-opacity, 1))}axm-emergency-contacts-page ax-badge[data-color=secondary]{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-secondary-200),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-secondary-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-secondary-800),var(--tw-text-opacity, 1))}axm-emergency-contacts-page .ax-bg-warning-50 ax-icon{flex-shrink:0}axm-emergency-contacts-page .ax-font-mono{letter-spacing:.025em}@media (min-width: 640px){axm-emergency-contacts-page axp-layout-content .ax-gap-4{gap:1.5rem}}axm-emergency-contacts-page ax-button{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}axm-emergency-contacts-page ax-button:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}axm-emergency-contacts-page ax-button:active{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}axm-emergency-contacts-page ax-button[data-color=danger]{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}axm-emergency-contacts-page ax-button[data-color=danger]:hover{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}axm-emergency-contacts-page ax-icon.ax-w-4{height:1rem}axm-emergency-contacts-page ax-icon.ax-text-6xl{height:6rem;width:6rem}@media (max-width: 640px){axm-emergency-contacts-page .ax-grid-cols-1 .ax-gap-3{gap:.5rem}axm-emergency-contacts-page .emergency-contact-quick-dial .contact-info-text{font-size:.75rem;line-height:1rem}}@media print{axm-emergency-contacts-page .emergency-contact-quick-dial,axm-emergency-contacts-page .emergency-contact-detailed{break-inside:avoid;border-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}axm-emergency-contacts-page ax-button{display:none}axm-emergency-contacts-page .ax-bg-warning-50{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}}@media (prefers-contrast: high){axm-emergency-contacts-page .emergency-contact-quick-dial,axm-emergency-contacts-page .emergency-contact-detailed{border-width:2px}axm-emergency-contacts-page ax-badge{border-width:2px}}@media (prefers-reduced-motion: reduce){axm-emergency-contacts-page *{transition-property:none}axm-emergency-contacts-page ax-button:hover,axm-emergency-contacts-page .emergency-contact-quick-dial:hover{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}\n"] }]
+                    ], template: "<axp-page-layout *translate=\"let t\">\n  <axp-page-content>\n    <!-- Loading State -->\n    @if (loading()) {\n      <div class=\"ax-flex ax-items-center ax-justify-center ax-py-8\">\n        <ax-loading>Loading emergency contacts...</ax-loading>\n      </div>\n    } @else {\n      <div class=\"ax-space-y-6 ax-p-4\">\n        <!-- Quick Dial Section -->\n        @if (quickDialContacts().length > 0) {\n          <div class=\"ax-mb-8\">\n            <h2 class=\"ax-text-2xl ax-font-semibold ax-mb-4 ax-flex ax-items-center ax-gap-2\">\n              <ax-icon icon=\"fa-light fa-phone-rotary\" class=\"ax-text-danger\"></ax-icon>\n              Quick Dial\n            </h2>\n            <div class=\"ax-grid ax-grid-cols-1 sm:ax-grid-cols-2 lg:ax-grid-cols-3 xl:ax-grid-cols-4 ax-gap-4\">\n              @for (contact of quickDialContacts(); track contact.id) {\n                <axm-emergency-contact-item [contact]=\"contact\"></axm-emergency-contact-item>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Dashboard Contacts Section -->\n        @if (dashboardContacts().length > 0) {\n          <div class=\"ax-mb-8\">\n            <h2 class=\"ax-text-2xl ax-font-semibold ax-mb-4 ax-flex ax-items-center ax-gap-2\">\n              <ax-icon icon=\"fa-light fa-tachometer-alt\" class=\"ax-text-primary\"></ax-icon>\n              All Emergency Contacts\n            </h2>\n            <div class=\"ax-grid ax-grid-cols-1 sm:ax-grid-cols-2 lg:ax-grid-cols-3 xl:ax-grid-cols-4 ax-gap-4\">\n              @for (contact of dashboardContacts(); track contact.id) {\n                <axm-emergency-contact-item [contact]=\"contact\"></axm-emergency-contact-item>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Fallback: Show all contacts if no filtered contacts are available -->\n        @if (quickDialContacts().length === 0 && dashboardContacts().length === 0 && displayContacts().length > 0) {\n          <div class=\"ax-mb-8\">\n            <h2 class=\"ax-text-2xl ax-font-semibold ax-mb-4 ax-flex ax-items-center ax-gap-2\">\n              <ax-icon icon=\"fa-light fa-list\" class=\"ax-text-info\"></ax-icon>\n              All Emergency Contacts\n            </h2>\n            <div class=\"ax-grid ax-grid-cols-1 sm:ax-grid-cols-2 lg:ax-grid-cols-3 xl:ax-grid-cols-4 ax-gap-4\">\n              @for (contact of displayContacts(); track contact.id) {\n                <axm-emergency-contact-item [contact]=\"contact\"></axm-emergency-contact-item>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- No Contacts State -->\n        @if (allContacts().length === 0 && !loading()) {\n          <div class=\"ax-text-center ax-py-12\">\n            <ax-icon icon=\"fa-light fa-phone-slash\" class=\"ax-text-6xl ax-text-muted ax-mb-4\"></ax-icon>\n            <h3 class=\"ax-text-xl ax-font-medium ax-text-muted ax-mb-2\">No emergency contacts available</h3>\n          </div>\n        }\n      </div>\n    }\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axm-emergency-contacts-page{display:block;width:100%;height:100%}axm-emergency-contacts-page .ax-space-y-6.ax-p-4{max-width:1200px;margin:0 auto;padding-left:1rem;padding-right:1rem}@media (min-width: 768px){axm-emergency-contacts-page .ax-space-y-6.ax-p-4{padding-left:1.5rem;padding-right:1.5rem}}axm-emergency-contacts-page h2{margin-bottom:1.25rem;color:var(--ax-sys-color-primary);border-bottom:1px solid var(--ax-sys-color-border);padding-bottom:.5rem}axm-emergency-contacts-page h2 ax-icon{margin-right:.5rem}@media (min-width: 768px){axm-emergency-contacts-page h2 ax-icon{margin-right:.75rem}}axm-emergency-contacts-page .emergency-contact-quick-dial{position:relative;--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);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));animation-duration:.2s;border:1px solid var(--ax-sys-color-outline-variant);min-height:140px}axm-emergency-contacts-page .emergency-contact-quick-dial:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transform:translateY(-2px);border-color:var(--priority-color, var(--ax-sys-color-primary))}axm-emergency-contacts-page .emergency-contact-quick-dial h3{color:var(--ax-sys-color-on-surface);margin-bottom:.125rem;font-size:1rem;line-height:1.5rem;font-weight:600}@media (min-width: 768px){axm-emergency-contacts-page .emergency-contact-quick-dial h3{font-size:1.125rem;line-height:1.75rem}}axm-emergency-contacts-page .emergency-contact-quick-dial .ax-button{font-size:.75rem;line-height:1rem;font-weight:500}@media (min-width: 768px){axm-emergency-contacts-page .emergency-contact-quick-dial .ax-button{font-size:.875rem;line-height:1.25rem}}axm-emergency-contacts-page .emergency-contact-quick-dial .ax-button{min-height:30px}axm-emergency-contacts-page .emergency-contact-detailed{--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);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));animation-duration:.2s;border:1px solid var(--ax-sys-color-outline-variant)}axm-emergency-contacts-page .emergency-contact-detailed:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transform:translateY(-1px);border-color:var(--ax-sys-color-primary)}axm-emergency-contacts-page .emergency-contact-detailed h3{color:var(--ax-sys-color-on-surface);font-size:1.125rem;line-height:1.75rem;font-weight:600}@media (min-width: 768px){axm-emergency-contacts-page .emergency-contact-detailed h3{font-size:1.25rem;line-height:1.75rem}}axm-emergency-contacts-page .emergency-contact-detailed ax-icon{flex-shrink:0}@media (min-width: 640px){axm-emergency-contacts-page .emergency-contact-detailed .ax-grid-cols-1.sm\\\\:ax-grid-cols-2>div{min-width:0px}}@media (min-width: 1024px){axm-emergency-contacts-page .emergency-contact-detailed .ax-flex.ax-flex-col.ax-gap-3{position:-webkit-sticky;position:sticky;top:1rem}}axm-emergency-contacts-page ax-loading{margin-left:auto;margin-right:auto}axm-emergency-contacts-page .ax-text-center.ax-py-12 ax-icon{margin-left:auto;margin-right:auto;display:block}axm-emergency-contacts-page ax-badge[data-color=danger]{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-danger-200),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-800),var(--tw-text-opacity, 1))}axm-emergency-contacts-page ax-badge[data-color=warning]{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-200),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-800),var(--tw-text-opacity, 1))}axm-emergency-contacts-page ax-badge[data-color=primary]{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-200),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-800),var(--tw-text-opacity, 1))}axm-emergency-contacts-page ax-badge[data-color=secondary]{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-secondary-200),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-secondary-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-secondary-800),var(--tw-text-opacity, 1))}axm-emergency-contacts-page .ax-bg-warning-50 ax-icon{flex-shrink:0}axm-emergency-contacts-page .ax-font-mono{letter-spacing:.025em}@media (min-width: 640px){axm-emergency-contacts-page axp-layout-content .ax-gap-4{gap:1.5rem}}axm-emergency-contacts-page ax-button{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}axm-emergency-contacts-page ax-button:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}axm-emergency-contacts-page ax-button:active{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}axm-emergency-contacts-page ax-button[data-color=danger]{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}axm-emergency-contacts-page ax-button[data-color=danger]:hover{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}axm-emergency-contacts-page ax-icon.ax-w-4{height:1rem}axm-emergency-contacts-page ax-icon.ax-text-6xl{height:6rem;width:6rem}@media (max-width: 640px){axm-emergency-contacts-page .ax-grid-cols-1 .ax-gap-3{gap:.5rem}axm-emergency-contacts-page .emergency-contact-quick-dial .contact-info-text{font-size:.75rem;line-height:1rem}}@media print{axm-emergency-contacts-page .emergency-contact-quick-dial,axm-emergency-contacts-page .emergency-contact-detailed{break-inside:avoid;border-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}axm-emergency-contacts-page ax-button{display:none}axm-emergency-contacts-page .ax-bg-warning-50{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}}@media (prefers-contrast: high){axm-emergency-contacts-page .emergency-contact-quick-dial,axm-emergency-contacts-page .emergency-contact-detailed{border-width:2px}axm-emergency-contacts-page ax-badge{border-width:2px}}@media (prefers-reduced-motion: reduce){axm-emergency-contacts-page *{transition-property:none}axm-emergency-contacts-page ax-button:hover,axm-emergency-contacts-page .emergency-contact-quick-dial:hover{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}\n"] }]
         }] });
 
 var emergencyContactsPage_component = /*#__PURE__*/Object.freeze({
@@ -790,5 +948,5 @@ var emergencyContactsPage_component = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AXMContactManagementEntityProvider, AXMContactManagementMenuProvider, AXMContactManagementModule, AXMContactManagementSearchCommandProvider, AXMContactMethodService, AXMContactMethodServiceImpl, AXMContactMethodTypeService, AXMContactMethodTypeServiceImpl, AXMEmergencyContactService, AXMEmergencyContactServiceImpl, AXMEmergencyContactsPageComponent, AXMPermissionDefinitionProvider, RootConfig, contactMethodTypeFactory };
+export { AXMContactManagementEntityProvider, AXMContactManagementMenuProvider, AXMContactManagementModule, AXMContactManagementSearchCommandProvider, AXMContactMethodEntityModule, AXMContactMethodService, AXMContactMethodServiceImpl, AXMContactMethodTypeEntityModule, AXMContactMethodTypeService, AXMContactMethodTypeServiceImpl, AXMEmergencyContactEntityModule, AXMEmergencyContactItemComponent, AXMEmergencyContactService, AXMEmergencyContactServiceImpl, AXMEmergencyContactsPageComponent, AXMPermissionDefinitionProvider, RootConfig, contactMethodTypeFactory };
 //# sourceMappingURL=acorex-modules-contact-management.mjs.map