cloud-ide-shared 1.0.42 → 1.0.45

package/fesm2022/cloud-ide-shared.mjs

@@ -13,14 +13,14 @@ import { Validators, ReactiveFormsModule } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 class CloudIdeShared {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CloudIdeShared, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CloudIdeShared, isStandalone: true, selector: "lib-cloud-ide-shared", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CloudIdeShared, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CloudIdeShared, isStandalone: true, selector: "lib-cloud-ide-shared", ngImport: i0, template: `
     <p>
       cloud-ide-shared works!
     </p>
   `, isInline: true, styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CloudIdeShared, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CloudIdeShared, decorators: [{
             type: Component,
             args: [{ selector: 'lib-cloud-ide-shared', imports: [], template: `
     <p>
@@ -394,10 +394,10 @@ class SharedObjectIdService {
             internalService: 'CideEleFileManagerService'
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SharedObjectIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SharedObjectIdService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SharedObjectIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SharedObjectIdService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SharedObjectIdService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SharedObjectIdService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -541,10 +541,10 @@ class CideCoreGeneralMasterTypeService {
         console.error('General Master Type Service Error:', errorMessage);
         return throwError(() => new Error(errorMessage));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreGeneralMasterTypeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreGeneralMasterTypeService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGeneralMasterTypeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGeneralMasterTypeService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreGeneralMasterTypeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGeneralMasterTypeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -701,10 +701,10 @@ class CideCoreGeneralMasterService {
         console.error('General Master Service Error:', errorMessage);
         return throwError(() => new Error(errorMessage));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreGeneralMasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreGeneralMasterService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGeneralMasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGeneralMasterService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreGeneralMasterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGeneralMasterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -831,7 +831,10 @@ class CideSharedOrgStructureComponent {
         this.entityService.getEntityList({}).subscribe({
             next: (response) => {
                 if (response?.success && response?.data) {
+                    console.log('Raw entities received:', response.data.length);
                     const structure = this.buildOrgStructure(response.data);
+                    console.log('Built organization structure:', structure);
+                    console.log('Root nodes count:', structure.length);
                     this.orgStructure.set(structure);
                 }
                 else {
@@ -840,6 +843,7 @@ class CideSharedOrgStructureComponent {
                 this.loading.set(false);
             },
             error: (error) => {
+                console.error('Error loading organization structure:', error);
                 this.error.set('Error loading organization structure');
                 this.loading.set(false);
             }
@@ -849,35 +853,170 @@ class CideSharedOrgStructureComponent {
      * Build organization structure from flat entity list
      */
     buildOrgStructure(entities) {
+        console.log('🔨 Building organization structure...');
+        // Remove duplicate entities based on _id
+        const uniqueEntities = this.removeDuplicateEntities(entities);
+        console.log(`✅ After deduplication: ${uniqueEntities.length} unique entities`);
         const nodeMap = new Map();
         const rootNodes = [];
+        const orphanedEntities = [];
         // First pass: create all nodes
-        entities.forEach(entity => {
+        uniqueEntities.forEach(entity => {
             const node = {
                 ...entity,
                 children: []
             };
             nodeMap.set(entity._id || '', node);
         });
-        // Second pass: build hierarchy
-        entities.forEach(entity => {
+        // Second pass: build hierarchy with validation
+        uniqueEntities.forEach(entity => {
             const node = nodeMap.get(entity._id || '');
             if (node) {
                 const parentId = entity.syen_id_syen;
-                if (parentId && parentId !== "" && nodeMap.has(parentId)) {
-                    const parent = nodeMap.get(parentId);
-                    parent.children = parent.children || [];
-                    parent.children.push(node);
+                if (parentId && parentId !== "") {
+                    // Entity has a parent ID - validate it exists
+                    if (nodeMap.has(parentId)) {
+                        const parent = nodeMap.get(parentId);
+                        parent.children = parent.children || [];
+                        parent.children.push(node);
+                        console.log(`✓ Connected "${entity.syen_name}" to parent with ID: ${parentId}`);
+                    }
+                    else {
+                        // Parent ID specified but parent doesn't exist - treat as orphaned
+                        console.warn(`⚠️ ORPHANED ENTITY: "${entity.syen_name}" (ID: ${entity._id}) references non-existent parent ID: ${parentId}`);
+                        console.warn('   This entity will be shown as a root node, but the data should be fixed at the API level.');
+                        orphanedEntities.push(entity);
+                        rootNodes.push(node);
+                    }
                 }
                 else {
+                    // No parent ID - this is a root node
                     rootNodes.push(node);
+                    console.log(`✓ Root entity: "${entity.syen_name}"`);
                 }
             }
         });
+        // Report summary
+        if (orphanedEntities.length > 0) {
+            console.error(`❌ BACKEND DATA ISSUE: Found ${orphanedEntities.length} orphaned entity(ies) with invalid parent references.`);
+            console.error('Orphaned entities:', orphanedEntities.map(e => ({ id: e._id, name: e.syen_name, invalidParentId: e.syen_id_syen })));
+        }
+        console.log(`📊 Organization structure summary: ${rootNodes.length} root nodes, ${uniqueEntities.length - rootNodes.length} child nodes`);
         // Sort children recursively
         this.sortChildrenRecursively(rootNodes);
         return rootNodes;
     }
+    /**
+     * Remove duplicate entities based on _id
+     * Priority logic when duplicates exist:
+     * 1. Keep entity with syenm_isdefault: true
+     * 2. If neither/both default, keep one with syenm_isloggedin: true
+     * 3. Otherwise, keep the one with more non-null fields
+     */
+    removeDuplicateEntities(entities) {
+        const entityMap = new Map();
+        const duplicateIds = new Set();
+        entities.forEach(entity => {
+            const id = entity._id;
+            if (id) {
+                if (!entityMap.has(id)) {
+                    // First occurrence, add it
+                    entityMap.set(id, entity);
+                }
+                else {
+                    // Duplicate found - apply priority logic
+                    duplicateIds.add(id);
+                    const existing = entityMap.get(id);
+                    const shouldReplace = this.shouldReplaceEntity(existing, entity);
+                    if (shouldReplace) {
+                        console.warn(`⚠️ DUPLICATE ENTITY DETECTED - Replacing duplicate entity:`, {
+                            id: id,
+                            name: existing.syen_name,
+                            existingMappingId: existing.entity_mapping_id,
+                            newMappingId: entity.entity_mapping_id,
+                            reason: this.getReplacementReason(existing, entity)
+                        });
+                        entityMap.set(id, entity);
+                    }
+                    else {
+                        console.warn(`⚠️ DUPLICATE ENTITY DETECTED - Keeping original entity:`, {
+                            id: id,
+                            name: existing.syen_name,
+                            existingMappingId: existing.entity_mapping_id,
+                            discardedMappingId: entity.entity_mapping_id,
+                            reason: this.getReplacementReason(existing, entity)
+                        });
+                    }
+                }
+            }
+        });
+        if (duplicateIds.size > 0) {
+            console.error(`❌ BACKEND DATA ISSUE: Found ${duplicateIds.size} duplicate entity ID(s). This should be fixed at the API level.`);
+            console.error('Duplicate entity IDs:', Array.from(duplicateIds));
+        }
+        return Array.from(entityMap.values());
+    }
+    /**
+     * Determine if a new entity should replace the existing one
+     * Based on priority: default status > logged in status > field completeness
+     */
+    shouldReplaceEntity(existing, newEntity) {
+        // Priority 1: Check default status
+        const existingIsDefault = existing.syenm_isdefault;
+        const newIsDefault = newEntity.syenm_isdefault;
+        if (newIsDefault && !existingIsDefault) {
+            return true; // Replace with default entity
+        }
+        if (!newIsDefault && existingIsDefault) {
+            return false; // Keep existing default entity
+        }
+        // Priority 2: Check logged in status (if both have same default status)
+        const existingIsLoggedIn = existing.syenm_isloggedin;
+        const newIsLoggedIn = newEntity.syenm_isloggedin;
+        if (newIsLoggedIn && !existingIsLoggedIn) {
+            return true; // Replace with logged in entity
+        }
+        if (!newIsLoggedIn && existingIsLoggedIn) {
+            return false; // Keep existing logged in entity
+        }
+        // Priority 3: Compare field completeness
+        const existingFieldCount = this.countNonNullFields(existing);
+        const newFieldCount = this.countNonNullFields(newEntity);
+        return newFieldCount > existingFieldCount;
+    }
+    /**
+     * Get human-readable reason for entity replacement decision
+     */
+    getReplacementReason(existing, newEntity) {
+        const existingIsDefault = existing.syenm_isdefault;
+        const newIsDefault = newEntity.syenm_isdefault;
+        const existingIsLoggedIn = existing.syenm_isloggedin;
+        const newIsLoggedIn = newEntity.syenm_isloggedin;
+        if (newIsDefault && !existingIsDefault) {
+            return 'New entity is marked as default';
+        }
+        if (!newIsDefault && existingIsDefault) {
+            return 'Existing entity is marked as default';
+        }
+        if (newIsLoggedIn && !existingIsLoggedIn) {
+            return 'New entity is logged in';
+        }
+        if (!newIsLoggedIn && existingIsLoggedIn) {
+            return 'Existing entity is logged in';
+        }
+        const existingFieldCount = this.countNonNullFields(existing);
+        const newFieldCount = this.countNonNullFields(newEntity);
+        if (newFieldCount > existingFieldCount) {
+            return `New entity has more complete data (${newFieldCount} vs ${existingFieldCount} fields)`;
+        }
+        return `Existing entity has more complete data (${existingFieldCount} vs ${newFieldCount} fields)`;
+    }
+    /**
+     * Count non-null fields in an entity
+     */
+    countNonNullFields(entity) {
+        return Object.values(entity).filter(value => value !== null && value !== undefined && value !== '').length;
+    }
     /**
      * Calculate level of a node based on its parent
      */
@@ -951,10 +1090,10 @@ class CideSharedOrgStructureComponent {
             queryParams: { edit: entityId }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideSharedOrgStructureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideSharedOrgStructureComponent, isStandalone: true, selector: "cide-shared-org-structure", inputs: { allowSwitching: { classPropertyName: "allowSwitching", publicName: "allowSwitching", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { entityClick: "entityClick", entitySelect: "entitySelect", entityView: "entityView" }, ngImport: i0, template: "<!-- Organization Structure Component -->\n<div class=\"tw-flex-1 tw-overflow-hidden\">\n  @if (loading()) {\n  <div class=\"tw-flex tw-items-center tw-justify-center tw-py-12\">\n    <cide-ele-spinner size=\"md\"></cide-ele-spinner>\n    <span class=\"tw-ml-3 tw-text-gray-600 tw-text-sm\">Loading organization structure...</span>\n  </div>\n  } @else if (error()) {\n  <div class=\"tw-text-center tw-py-12\">\n    <div class=\"tw-w-16 tw-h-16 tw-bg-red-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n      <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-red-500\">error</cide-ele-icon>\n    </div>\n    <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">Error Loading Structure</h3>\n    <p class=\"tw-text-gray-600 tw-mb-4\">{{ error() }}</p>\n    <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"loadOrgStructure()\">\n      <cide-ele-icon>refresh</cide-ele-icon>\n      Try Again\n    </button>\n  </div>\n  } @else if (orgStructure().length === 0) {\n  <div class=\"tw-text-center tw-py-12\">\n    <div class=\"tw-w-16 tw-h-16 tw-bg-gray-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n      <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400\">account_tree</cide-ele-icon>\n    </div>\n    <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">No Entities Found</h3>\n    <p class=\"tw-text-gray-600 tw-mb-4\">No entities are available to display in the organization structure.</p>\n    @if (mode() === 'view') {\n    <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"router.navigate(['/control-panel/entity-list'])\">\n      <cide-ele-icon>add</cide-ele-icon>\n      Create First Entity\n    </button>\n    }\n  </div>\n  } @else {\n  <!-- Organization Chart Container -->\n  <div class=\"tw-relative tw-h-full tw-bg-gray-50 tw-py-8 org-chart-container\">\n    <!-- Chart Content with Background Pattern -->\n    <div class=\"tw-relative tw-z-10 tw-min-w-max tw-px-4 org-chart-content org-chart-content-with-bg\">\n      @for (rootNode of orgStructure(); track rootNode._id) {\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-mb-12\">\n        <!-- Render node recursively with unlimited depth -->\n        <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rootNode, level: 0 }\"></ng-container>\n      </div>\n      }\n    </div>\n  </div>\n  }\n</div>\n\n<!-- Entity Node Template (Recursive) -->\n<ng-template #entityNodeTemplate let-node let-level=\"level\">\n  <div class=\"tw-flex tw-flex-col tw-items-center\">\n    \n    <!-- Entity Card -->\n    <div class=\"tw-bg-white tw-shadow-lg tw-rounded-lg tw-p-4 tw-w-64 tw-max-w-72 tw-border-t-4 tw-transition-all tw-cursor-pointer hover:tw-shadow-xl hover:tw-scale-105 entity-card\"\n         [class.level-0]=\"level === 0\"\n         [class.level-1]=\"level === 1\"\n         [class.level-2]=\"level === 2\"\n         [class.level-3]=\"level === 3\"\n         [class.level-4]=\"level === 4\"\n         [class.level-5]=\"level === 5\"\n         (click)=\"viewEntity(node._id)\">\n      \n      <!-- Card Content -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <!-- Avatar -->\n        <div class=\"tw-w-12 tw-h-12 tw-bg-purple-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-flex-shrink-0\">\n          <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-purple-600\">person</cide-ele-icon>\n        </div>\n        \n        <!-- Entity Info -->\n        <div class=\"tw-flex-1 tw-min-w-0\">\n          <h3 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\" \n              [cideEleTooltip]=\"node.syen_name || ''\" \n              [tooltipPlacement]=\"'top'\"\n              [tooltipType]=\"'default'\">{{ node.syen_name }}</h3>\n          <p class=\"tw-text-xs tw-text-gray-600 tw-mt-1\">{{ node.syen_entity_code }}</p>\n          <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ node.syen_entity_type_sygms }}</p>\n        </div>\n      </div>\n      \n      <!-- Action Icons -->\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-mt-3\">\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <!-- Phone Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">phone</cide-ele-icon>\n          </button>\n          \n          <!-- Email Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">email</cide-ele-icon>\n          </button>\n          \n          <!-- LinkedIn Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-text-blue-600 hover:tw-bg-blue-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">attach_money</cide-ele-icon>\n          </button>\n          \n          <!-- Document Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">description</cide-ele-icon>\n          </button>\n          \n          <!-- More Options Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">more_horiz</cide-ele-icon>\n          </button>\n        </div>\n        \n        <!-- Status Badge -->\n        <div class=\"tw-flex-shrink-0\">\n          @if (node.syen_isactive) {\n          <div class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n            <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-green-500 tw-rounded-full tw-mr-1\"></div>\n            Active\n          </div>\n          } @else {\n          <div class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800\">\n            <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-red-500 tw-rounded-full tw-mr-1\"></div>\n            Inactive\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n    \n    <!-- Children Entities (Recursive) -->\n    @if (node.children && node.children.length > 0) {\n    <!-- Flexible Connection Lines -->\n    <div class=\"tw-relative tw-flex tw-flex-col tw-items-center tw-mt-4\">\n      <!-- Connection dot -->\n      <div class=\"tw-absolute tw-left-1/2 tw-transform tw--translate-x-1/2\" style=\"top: -8px;\">\n        <div class=\"tw-w-2 tw-h-2 tw-bg-purple-600 tw-rounded-full tw-border tw-border-white\"></div>\n      </div>\n      \n      <!-- Flexible SVG Lines -->\n      <div class=\"tw-relative tw-w-full tw-flex tw-justify-center flexible-connection-lines\">\n        @if (node.children && node.children.length === 1) {\n        <!-- Single child - simple vertical line -->\n        <svg class=\"tw-absolute tw-left-1/2\" style=\"transform: translateX(-50%); width: 2px; height: 40px; top: 0;\">\n          <line x1=\"1\" y1=\"0\" x2=\"1\" y2=\"40\" stroke=\"#9333ea\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n        </svg>\n        }\n        @else if (node.children && node.children.length > 1) {\n        <!-- Multiple children - flexible design -->\n        <svg class=\"tw-absolute tw-left-1/2\" style=\"transform: translateX(-50%); width: 100%; height: 40px; top: 0;\">\n          <!-- Vertical line from parent -->\n          <line x1=\"50%\" y1=\"0\" x2=\"50%\" y2=\"15\" stroke=\"#9333ea\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n          \n          <!-- Horizontal line spanning children -->\n          <line x1=\"20%\" y1=\"15\" x2=\"80%\" y2=\"15\" stroke=\"#9333ea\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n          \n          <!-- Vertical lines to children -->\n          @for (child of node.children; track child._id; let i = $index) {\n          <line [attr.x1]=\"(20 + (60 * i) / (node.children.length - 1)) + '%'\" \n                y1=\"15\" \n                [attr.x2]=\"(20 + (60 * i) / (node.children.length - 1)) + '%'\" \n                y2=\"35\" \n                stroke=\"#9333ea\" \n                stroke-width=\"2\" \n                stroke-linecap=\"round\"/>\n          <!-- Connection dot -->\n          <circle [attr.cx]=\"(20 + (60 * i) / (node.children.length - 1)) + '%'\" cy=\"35\" r=\"2.5\" fill=\"#9333ea\" stroke=\"#fff\" stroke-width=\"1\"/>\n          }\n        </svg>\n        }\n      </div>\n      \n      <!-- Children Container - Flexible Layout -->\n      <div class=\"tw-flex tw-flex-wrap tw-justify-center tw-gap-4 tw-w-full tw-max-w-6xl tw-px-4 children-container\">\n        @for (child of node.children; track child._id) {\n        <div class=\"tw-flex tw-flex-col tw-items-center tw-flex-shrink-0\">\n          <!-- Child node -->\n          <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"></ng-container>\n        </div>\n        }\n      </div>\n    </div>\n    }\n  </div>\n</ng-template>\n", styles: [".org-chart-container{overflow-x:auto;overflow-y:auto;height:100%;position:relative}.org-chart-content{min-width:max-content;min-height:max-content;padding:2rem 1rem}.org-chart-content-with-bg{position:relative}.org-chart-content-with-bg:before{content:\"\";position:absolute;inset:0;opacity:.3;pointer-events:none;background-image:radial-gradient(circle,#e5e7eb 1px,transparent 1px);background-size:20px 20px;background-repeat:repeat;z-index:-1}.flexible-connection-lines{position:relative;width:100%;height:40px}.flexible-connection-lines svg{position:absolute;left:50%;transform:translate(-50%);width:100%;height:100%;top:0}.children-container{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;width:100%;max-width:80rem;padding:0 1rem}.children-container>div{flex-shrink:0;display:flex;flex-direction:column;align-items:center}.entity-card{width:16rem;max-width:18rem;transition:all .2s ease-in-out}.entity-card:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}@media (max-width: 1400px){.children-container{max-width:70rem;gap:.875rem}.entity-card{width:15rem;max-width:17rem}}@media (max-width: 1200px){.children-container{max-width:60rem;gap:.75rem}.entity-card{width:14rem;max-width:16rem}}@media (max-width: 992px){.children-container{max-width:50rem;gap:.625rem}.entity-card{width:13rem;max-width:15rem}}@media (max-width: 768px){.children-container{max-width:40rem;gap:.5rem}.entity-card{width:12rem;max-width:14rem}.org-chart-content{padding:1.5rem .75rem}}@media (max-width: 576px){.children-container{max-width:30rem;gap:.375rem}.entity-card{width:11rem;max-width:13rem}.org-chart-content{padding:1rem .5rem}}.tw-overflow-y-auto::-webkit-scrollbar{width:6px}.tw-overflow-y-auto::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.tw-overflow-y-auto::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.tw-overflow-y-auto::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tw-transition-shadow{transition:box-shadow .2s ease-in-out}.tw-shadow-lg:hover{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;transform:translateY(-2px);transition:all .2s ease-in-out}.tw-bg-purple-300,.tw-bg-purple-400{transition:all .3s ease-in-out}.connection-line-compact{display:block;overflow:visible}.connection-line-compact path,.connection-line-compact line{stroke-linecap:round;stroke-linejoin:round;transition:stroke-width .2s ease}.connection-line-compact:hover path,.connection-line-compact:hover line{stroke-width:3}.connection-line-compact circle{transition:all .2s ease}.connection-line-compact circle:hover{filter:drop-shadow(0 2px 4px rgba(147,51,234,.4))}.level-0{border-color:#fb923c!important}.level-1{border-color:#60a5fa!important}.level-2{border-color:#a78bfa!important}.level-3{border-color:#4ade80!important}.level-4{border-color:#818cf8!important}.level-5{border-color:#f472b6!important}@media (max-width: 1200px){.tw-max-w-7xl{max-width:100%}.tw-gap-6{gap:1rem}.tw-min-w-64{min-width:14rem}.tw-max-w-72{max-width:16rem}}@media (max-width: 768px){.tw-min-w-64{min-width:12rem}.tw-max-w-72{max-width:14rem}.tw-max-w-7xl{max-width:100%}.tw-gap-6{gap:.75rem}.tw-p-4{padding:.75rem}.tw-mb-4{margin-bottom:.75rem}.tw-space-x-3{gap:.5rem}.tw-space-x-2{gap:.375rem}.tw-w-12{width:2.5rem}.tw-h-12{height:2.5rem}}@media (max-width: 480px){.tw-min-w-72{min-width:12rem}.tw-max-w-80{max-width:14rem}.tw-p-4{padding:.5rem}.tw-space-x-3{gap:.375rem}.tw-space-x-2{gap:.25rem}.tw-mb-3{margin-bottom:.5rem}.tw-w-12{width:2rem}.tw-h-12{height:2rem}.tw-w-8{width:1.5rem}.tw-h-8{height:1.5rem}}@media print{.tw-bg-gray-50{background:#fff!important}.tw-shadow-lg{box-shadow:none!important;border:1px solid #e5e7eb!important}.tw-bg-purple-300{background:#6b7280!important}.tw-border-purple-300{border-color:#6b7280!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }, { kind: "directive", type: TooltipDirective, selector: "[cideEleTooltip]", inputs: ["cideEleTooltip", "tooltipColor", "tooltipBg", "tooltipPlacement", "tooltipType", "tooltipDelay", "tooltipDir", "tooltipShowArrow", "tooltipMultiline", "tooltipMaxWidth", "tooltipInteractive", "tooltipClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideSharedOrgStructureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideSharedOrgStructureComponent, isStandalone: true, selector: "cide-shared-org-structure", inputs: { allowSwitching: { classPropertyName: "allowSwitching", publicName: "allowSwitching", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { entityClick: "entityClick", entitySelect: "entitySelect", entityView: "entityView" }, ngImport: i0, template: "<!-- Organization Structure Component -->\n<div class=\"tw-flex-1 tw-overflow-hidden !tw-h-full\">\n  @if (loading()) {\n  <div class=\"tw-flex tw-items-center !tw-h-full tw-justify-center tw-py-12\">\n    <cide-ele-spinner size=\"md\"></cide-ele-spinner>\n    <span class=\"tw-ml-3 tw-text-gray-600 tw-text-sm\">Loading organization structure...</span>\n  </div>\n  } @else if (error()) {\n  <div class=\"tw-text-center tw-py-12\">\n    <div class=\"tw-w-16 tw-h-16 tw-bg-red-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n      <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-red-500\">error</cide-ele-icon>\n    </div>\n    <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">Error Loading Structure</h3>\n    <p class=\"tw-text-gray-600 tw-mb-4\">{{ error() }}</p>\n    <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"loadOrgStructure()\">\n      <cide-ele-icon>refresh</cide-ele-icon>\n      Try Again\n    </button>\n  </div>\n  } @else if (orgStructure().length === 0) {\n  <div class=\"tw-text-center tw-py-12\">\n    <div class=\"tw-w-16 tw-h-16 tw-bg-gray-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n      <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400\">account_tree</cide-ele-icon>\n    </div>\n    <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">No Entities Found</h3>\n    <p class=\"tw-text-gray-600 tw-mb-4\">No entities are available to display in the organization structure.</p>\n    @if (mode() === 'view') {\n    <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"router.navigate(['/control-panel/entity-list'])\">\n      <cide-ele-icon>add</cide-ele-icon>\n      Create First Entity\n    </button>\n    }\n  </div>\n  } @else {\n  <!-- Organization Chart Container -->\n  <div class=\"tw-relative tw-h-full tw-bg-gray-50 tw-py-8 org-chart-container\">\n    <!-- Chart Content with Background Pattern -->\n    <div class=\"tw-relative tw-z-10 tw-min-w-max tw-px-4 org-chart-content org-chart-content-with-bg\">\n      @for (rootNode of orgStructure(); track rootNode._id) {\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-mb-12\">\n        <!-- Render node recursively with unlimited depth -->\n        <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rootNode, level: 0 }\"></ng-container>\n      </div>\n      }\n    </div>\n  </div>\n  }\n</div>\n\n<!-- Entity Node Template (Recursive) -->\n<ng-template #entityNodeTemplate let-node let-level=\"level\">\n  <div class=\"tw-flex tw-flex-col tw-items-center\">\n    \n    <!-- Entity Card -->\n    <div class=\"tw-bg-white tw-shadow-lg tw-rounded-lg tw-p-4 tw-w-64 tw-max-w-72 tw-border-t-4 tw-transition-all tw-cursor-pointer hover:tw-shadow-xl hover:tw-scale-105 entity-card\"\n         [class.level-0]=\"level === 0\"\n         [class.level-1]=\"level === 1\"\n         [class.level-2]=\"level === 2\"\n         [class.level-3]=\"level === 3\"\n         [class.level-4]=\"level === 4\"\n         [class.level-5]=\"level === 5\"\n         (click)=\"viewEntity(node._id)\">\n      \n      <!-- Card Content -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <!-- Avatar -->\n        <div class=\"tw-w-12 tw-h-12 tw-bg-purple-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-flex-shrink-0\">\n          <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-purple-600\">person</cide-ele-icon>\n        </div>\n        \n        <!-- Entity Info -->\n        <div class=\"tw-flex-1 tw-min-w-0\">\n          <h3 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\" \n              [cideEleTooltip]=\"node.syen_name || ''\" \n              [tooltipPlacement]=\"'top'\"\n              [tooltipType]=\"'default'\">{{ node.syen_name }}</h3>\n          <p class=\"tw-text-xs tw-text-gray-600 tw-mt-1\">{{ node.syen_entity_code }}</p>\n          <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ node.syen_entity_type_sygms }}</p>\n        </div>\n      </div>\n      \n      <!-- Action Icons -->\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-mt-3\">\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <!-- Phone Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">phone</cide-ele-icon>\n          </button>\n          \n          <!-- Email Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">email</cide-ele-icon>\n          </button>\n          \n          <!-- LinkedIn Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-text-blue-600 hover:tw-bg-blue-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">attach_money</cide-ele-icon>\n          </button>\n          \n          <!-- Document Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">description</cide-ele-icon>\n          </button>\n          \n          <!-- More Options Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">more_horiz</cide-ele-icon>\n          </button>\n        </div>\n        \n        <!-- Status Badge -->\n        <div class=\"tw-flex-shrink-0\">\n          @if (node.syen_isactive) {\n          <div class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n            <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-green-500 tw-rounded-full tw-mr-1\"></div>\n            Active\n          </div>\n          } @else {\n          <div class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800\">\n            <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-red-500 tw-rounded-full tw-mr-1\"></div>\n            Inactive\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n    \n    <!-- Children Entities (Recursive) -->\n    @if (node.children && node.children.length > 0) {\n    <!-- Connection Lines Container -->\n    <div class=\"tw-relative tw-flex tw-flex-col tw-items-center tw-mt-4\">\n      <!-- Connection dot at parent -->\n      <div class=\"tw-absolute tw-left-1/2 tw-transform tw--translate-x-1/2\" style=\"top: -8px;\">\n        <div class=\"tw-w-2 tw-h-2 tw-bg-purple-600 tw-rounded-full tw-border tw-border-white\"></div>\n      </div>\n      \n      <!-- Simplified Connection Lines -->\n      <div class=\"tw-relative tw-w-full tw-flex tw-justify-center\" style=\"min-height: 40px;\">\n        @if (node.children.length === 1) {\n        <!-- Single child - simple vertical line -->\n        <svg class=\"tw-absolute tw-left-1/2\" style=\"transform: translateX(-50%); width: 2px; height: 40px; top: 0;\">\n          <line x1=\"1\" y1=\"0\" x2=\"1\" y2=\"40\" stroke=\"#9333ea\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n        </svg>\n        }\n        @else {\n        <!-- Multiple children - use calculated positions -->\n        <svg class=\"tw-absolute\" [attr.width]=\"(node.children.length * 280) + 'px'\" \n             style=\"height: 40px; left: 50%; transform: translateX(-50%); top: 0; overflow: visible;\">\n          <!-- Vertical line from parent (centered) -->\n          <line [attr.x1]=\"(node.children.length * 280) / 2\" \n                y1=\"0\" \n                [attr.x2]=\"(node.children.length * 280) / 2\" \n                y2=\"15\" \n                stroke=\"#9333ea\" \n                stroke-width=\"2\" \n                stroke-linecap=\"round\"/>\n          \n          <!-- Horizontal line spanning children -->\n          <line [attr.x1]=\"140\" \n                y1=\"15\" \n                [attr.x2]=\"(node.children.length * 280) - 140\" \n                y2=\"15\" \n                stroke=\"#9333ea\" \n                stroke-width=\"2\" \n                stroke-linecap=\"round\"/>\n          \n          <!-- Vertical lines to each child -->\n          @for (child of node.children; track child._id; let i = $index) {\n          @let xPosition = 140 + (i * 280);\n          <line [attr.x1]=\"xPosition\" \n                y1=\"15\" \n                [attr.x2]=\"xPosition\" \n                y2=\"35\" \n                stroke=\"#9333ea\" \n                stroke-width=\"2\" \n                stroke-linecap=\"round\"/>\n          <!-- Connection dot -->\n          <circle [attr.cx]=\"xPosition\" cy=\"35\" r=\"2.5\" fill=\"#9333ea\" stroke=\"#fff\" stroke-width=\"1\"/>\n          }\n        </svg>\n        }\n      </div>\n      \n      <!-- Children Container - Flexible Layout -->\n      <div class=\"tw-flex tw-flex-wrap tw-justify-center tw-gap-4 tw-w-full tw-max-w-6xl tw-px-4 children-container\">\n        @for (child of node.children; track child._id) {\n        <div class=\"tw-flex tw-flex-col tw-items-center tw-flex-shrink-0\">\n          <!-- Child node -->\n          <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"></ng-container>\n        </div>\n        }\n      </div>\n    </div>\n    }\n  </div>\n</ng-template>\n", styles: [".org-chart-container{overflow-x:auto;overflow-y:auto;height:100%;position:relative}.org-chart-content{min-width:max-content;min-height:max-content;padding:2rem 1rem}.org-chart-content-with-bg{position:relative}.org-chart-content-with-bg:before{content:\"\";position:absolute;inset:0;opacity:.3;pointer-events:none;background-image:radial-gradient(circle,#e5e7eb 1px,transparent 1px);background-size:20px 20px;background-repeat:repeat;z-index:-1}.flexible-connection-lines{position:relative;width:100%;height:40px}.flexible-connection-lines svg{position:absolute;left:50%;transform:translate(-50%);width:100%;height:100%;top:0}.children-container{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;width:100%;max-width:80rem;padding:0 1rem}.children-container>div{flex-shrink:0;display:flex;flex-direction:column;align-items:center}.entity-card{width:16rem;max-width:18rem;transition:all .2s ease-in-out}.entity-card:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}@media (max-width: 1400px){.children-container{max-width:70rem;gap:.875rem}.entity-card{width:15rem;max-width:17rem}}@media (max-width: 1200px){.children-container{max-width:60rem;gap:.75rem}.entity-card{width:14rem;max-width:16rem}}@media (max-width: 992px){.children-container{max-width:50rem;gap:.625rem}.entity-card{width:13rem;max-width:15rem}}@media (max-width: 768px){.children-container{max-width:40rem;gap:.5rem}.entity-card{width:12rem;max-width:14rem}.org-chart-content{padding:1.5rem .75rem}}@media (max-width: 576px){.children-container{max-width:30rem;gap:.375rem}.entity-card{width:11rem;max-width:13rem}.org-chart-content{padding:1rem .5rem}}.tw-overflow-y-auto::-webkit-scrollbar{width:6px}.tw-overflow-y-auto::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.tw-overflow-y-auto::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.tw-overflow-y-auto::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tw-transition-shadow{transition:box-shadow .2s ease-in-out}.tw-shadow-lg:hover{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;transform:translateY(-2px);transition:all .2s ease-in-out}.tw-bg-purple-300,.tw-bg-purple-400{transition:all .3s ease-in-out}.connection-line-compact{display:block;overflow:visible}.connection-line-compact path,.connection-line-compact line{stroke-linecap:round;stroke-linejoin:round;transition:stroke-width .2s ease}.connection-line-compact:hover path,.connection-line-compact:hover line{stroke-width:3}.connection-line-compact circle{transition:all .2s ease}.connection-line-compact circle:hover{filter:drop-shadow(0 2px 4px rgba(147,51,234,.4))}.level-0{border-color:#fb923c!important}.level-1{border-color:#60a5fa!important}.level-2{border-color:#a78bfa!important}.level-3{border-color:#4ade80!important}.level-4{border-color:#818cf8!important}.level-5{border-color:#f472b6!important}@media (max-width: 1200px){.tw-max-w-7xl{max-width:100%}.tw-gap-6{gap:1rem}.tw-min-w-64{min-width:14rem}.tw-max-w-72{max-width:16rem}}@media (max-width: 768px){.tw-min-w-64{min-width:12rem}.tw-max-w-72{max-width:14rem}.tw-max-w-7xl{max-width:100%}.tw-gap-6{gap:.75rem}.tw-p-4{padding:.75rem}.tw-mb-4{margin-bottom:.75rem}.tw-space-x-3{gap:.5rem}.tw-space-x-2{gap:.375rem}.tw-w-12{width:2.5rem}.tw-h-12{height:2.5rem}}@media (max-width: 480px){.tw-min-w-72{min-width:12rem}.tw-max-w-80{max-width:14rem}.tw-p-4{padding:.5rem}.tw-space-x-3{gap:.375rem}.tw-space-x-2{gap:.25rem}.tw-mb-3{margin-bottom:.5rem}.tw-w-12{width:2rem}.tw-h-12{height:2rem}.tw-w-8{width:1.5rem}.tw-h-8{height:1.5rem}}@media print{.tw-bg-gray-50{background:#fff!important}.tw-shadow-lg{box-shadow:none!important;border:1px solid #e5e7eb!important}.tw-bg-purple-300{background:#6b7280!important}.tw-border-purple-300{border-color:#6b7280!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }, { kind: "directive", type: TooltipDirective, selector: "[cideEleTooltip]", inputs: ["cideEleTooltip", "tooltipColor", "tooltipBg", "tooltipPlacement", "tooltipType", "tooltipDelay", "tooltipDir", "tooltipShowArrow", "tooltipMultiline", "tooltipMaxWidth", "tooltipInteractive", "tooltipClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideSharedOrgStructureComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideSharedOrgStructureComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-shared-org-structure', imports: [
                         CommonModule,
@@ -962,8 +1101,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideIconComponent,
                         CideSpinnerComponent,
                         TooltipDirective
-                    ], template: "<!-- Organization Structure Component -->\n<div class=\"tw-flex-1 tw-overflow-hidden\">\n  @if (loading()) {\n  <div class=\"tw-flex tw-items-center tw-justify-center tw-py-12\">\n    <cide-ele-spinner size=\"md\"></cide-ele-spinner>\n    <span class=\"tw-ml-3 tw-text-gray-600 tw-text-sm\">Loading organization structure...</span>\n  </div>\n  } @else if (error()) {\n  <div class=\"tw-text-center tw-py-12\">\n    <div class=\"tw-w-16 tw-h-16 tw-bg-red-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n      <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-red-500\">error</cide-ele-icon>\n    </div>\n    <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">Error Loading Structure</h3>\n    <p class=\"tw-text-gray-600 tw-mb-4\">{{ error() }}</p>\n    <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"loadOrgStructure()\">\n      <cide-ele-icon>refresh</cide-ele-icon>\n      Try Again\n    </button>\n  </div>\n  } @else if (orgStructure().length === 0) {\n  <div class=\"tw-text-center tw-py-12\">\n    <div class=\"tw-w-16 tw-h-16 tw-bg-gray-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n      <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400\">account_tree</cide-ele-icon>\n    </div>\n    <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">No Entities Found</h3>\n    <p class=\"tw-text-gray-600 tw-mb-4\">No entities are available to display in the organization structure.</p>\n    @if (mode() === 'view') {\n    <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"router.navigate(['/control-panel/entity-list'])\">\n      <cide-ele-icon>add</cide-ele-icon>\n      Create First Entity\n    </button>\n    }\n  </div>\n  } @else {\n  <!-- Organization Chart Container -->\n  <div class=\"tw-relative tw-h-full tw-bg-gray-50 tw-py-8 org-chart-container\">\n    <!-- Chart Content with Background Pattern -->\n    <div class=\"tw-relative tw-z-10 tw-min-w-max tw-px-4 org-chart-content org-chart-content-with-bg\">\n      @for (rootNode of orgStructure(); track rootNode._id) {\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-mb-12\">\n        <!-- Render node recursively with unlimited depth -->\n        <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rootNode, level: 0 }\"></ng-container>\n      </div>\n      }\n    </div>\n  </div>\n  }\n</div>\n\n<!-- Entity Node Template (Recursive) -->\n<ng-template #entityNodeTemplate let-node let-level=\"level\">\n  <div class=\"tw-flex tw-flex-col tw-items-center\">\n    \n    <!-- Entity Card -->\n    <div class=\"tw-bg-white tw-shadow-lg tw-rounded-lg tw-p-4 tw-w-64 tw-max-w-72 tw-border-t-4 tw-transition-all tw-cursor-pointer hover:tw-shadow-xl hover:tw-scale-105 entity-card\"\n         [class.level-0]=\"level === 0\"\n         [class.level-1]=\"level === 1\"\n         [class.level-2]=\"level === 2\"\n         [class.level-3]=\"level === 3\"\n         [class.level-4]=\"level === 4\"\n         [class.level-5]=\"level === 5\"\n         (click)=\"viewEntity(node._id)\">\n      \n      <!-- Card Content -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <!-- Avatar -->\n        <div class=\"tw-w-12 tw-h-12 tw-bg-purple-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-flex-shrink-0\">\n          <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-purple-600\">person</cide-ele-icon>\n        </div>\n        \n        <!-- Entity Info -->\n        <div class=\"tw-flex-1 tw-min-w-0\">\n          <h3 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\" \n              [cideEleTooltip]=\"node.syen_name || ''\" \n              [tooltipPlacement]=\"'top'\"\n              [tooltipType]=\"'default'\">{{ node.syen_name }}</h3>\n          <p class=\"tw-text-xs tw-text-gray-600 tw-mt-1\">{{ node.syen_entity_code }}</p>\n          <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ node.syen_entity_type_sygms }}</p>\n        </div>\n      </div>\n      \n      <!-- Action Icons -->\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-mt-3\">\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <!-- Phone Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">phone</cide-ele-icon>\n          </button>\n          \n          <!-- Email Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">email</cide-ele-icon>\n          </button>\n          \n          <!-- LinkedIn Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-text-blue-600 hover:tw-bg-blue-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">attach_money</cide-ele-icon>\n          </button>\n          \n          <!-- Document Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">description</cide-ele-icon>\n          </button>\n          \n          <!-- More Options Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">more_horiz</cide-ele-icon>\n          </button>\n        </div>\n        \n        <!-- Status Badge -->\n        <div class=\"tw-flex-shrink-0\">\n          @if (node.syen_isactive) {\n          <div class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n            <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-green-500 tw-rounded-full tw-mr-1\"></div>\n            Active\n          </div>\n          } @else {\n          <div class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800\">\n            <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-red-500 tw-rounded-full tw-mr-1\"></div>\n            Inactive\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n    \n    <!-- Children Entities (Recursive) -->\n    @if (node.children && node.children.length > 0) {\n    <!-- Flexible Connection Lines -->\n    <div class=\"tw-relative tw-flex tw-flex-col tw-items-center tw-mt-4\">\n      <!-- Connection dot -->\n      <div class=\"tw-absolute tw-left-1/2 tw-transform tw--translate-x-1/2\" style=\"top: -8px;\">\n        <div class=\"tw-w-2 tw-h-2 tw-bg-purple-600 tw-rounded-full tw-border tw-border-white\"></div>\n      </div>\n      \n      <!-- Flexible SVG Lines -->\n      <div class=\"tw-relative tw-w-full tw-flex tw-justify-center flexible-connection-lines\">\n        @if (node.children && node.children.length === 1) {\n        <!-- Single child - simple vertical line -->\n        <svg class=\"tw-absolute tw-left-1/2\" style=\"transform: translateX(-50%); width: 2px; height: 40px; top: 0;\">\n          <line x1=\"1\" y1=\"0\" x2=\"1\" y2=\"40\" stroke=\"#9333ea\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n        </svg>\n        }\n        @else if (node.children && node.children.length > 1) {\n        <!-- Multiple children - flexible design -->\n        <svg class=\"tw-absolute tw-left-1/2\" style=\"transform: translateX(-50%); width: 100%; height: 40px; top: 0;\">\n          <!-- Vertical line from parent -->\n          <line x1=\"50%\" y1=\"0\" x2=\"50%\" y2=\"15\" stroke=\"#9333ea\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n          \n          <!-- Horizontal line spanning children -->\n          <line x1=\"20%\" y1=\"15\" x2=\"80%\" y2=\"15\" stroke=\"#9333ea\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n          \n          <!-- Vertical lines to children -->\n          @for (child of node.children; track child._id; let i = $index) {\n          <line [attr.x1]=\"(20 + (60 * i) / (node.children.length - 1)) + '%'\" \n                y1=\"15\" \n                [attr.x2]=\"(20 + (60 * i) / (node.children.length - 1)) + '%'\" \n                y2=\"35\" \n                stroke=\"#9333ea\" \n                stroke-width=\"2\" \n                stroke-linecap=\"round\"/>\n          <!-- Connection dot -->\n          <circle [attr.cx]=\"(20 + (60 * i) / (node.children.length - 1)) + '%'\" cy=\"35\" r=\"2.5\" fill=\"#9333ea\" stroke=\"#fff\" stroke-width=\"1\"/>\n          }\n        </svg>\n        }\n      </div>\n      \n      <!-- Children Container - Flexible Layout -->\n      <div class=\"tw-flex tw-flex-wrap tw-justify-center tw-gap-4 tw-w-full tw-max-w-6xl tw-px-4 children-container\">\n        @for (child of node.children; track child._id) {\n        <div class=\"tw-flex tw-flex-col tw-items-center tw-flex-shrink-0\">\n          <!-- Child node -->\n          <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"></ng-container>\n        </div>\n        }\n      </div>\n    </div>\n    }\n  </div>\n</ng-template>\n", styles: [".org-chart-container{overflow-x:auto;overflow-y:auto;height:100%;position:relative}.org-chart-content{min-width:max-content;min-height:max-content;padding:2rem 1rem}.org-chart-content-with-bg{position:relative}.org-chart-content-with-bg:before{content:\"\";position:absolute;inset:0;opacity:.3;pointer-events:none;background-image:radial-gradient(circle,#e5e7eb 1px,transparent 1px);background-size:20px 20px;background-repeat:repeat;z-index:-1}.flexible-connection-lines{position:relative;width:100%;height:40px}.flexible-connection-lines svg{position:absolute;left:50%;transform:translate(-50%);width:100%;height:100%;top:0}.children-container{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;width:100%;max-width:80rem;padding:0 1rem}.children-container>div{flex-shrink:0;display:flex;flex-direction:column;align-items:center}.entity-card{width:16rem;max-width:18rem;transition:all .2s ease-in-out}.entity-card:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}@media (max-width: 1400px){.children-container{max-width:70rem;gap:.875rem}.entity-card{width:15rem;max-width:17rem}}@media (max-width: 1200px){.children-container{max-width:60rem;gap:.75rem}.entity-card{width:14rem;max-width:16rem}}@media (max-width: 992px){.children-container{max-width:50rem;gap:.625rem}.entity-card{width:13rem;max-width:15rem}}@media (max-width: 768px){.children-container{max-width:40rem;gap:.5rem}.entity-card{width:12rem;max-width:14rem}.org-chart-content{padding:1.5rem .75rem}}@media (max-width: 576px){.children-container{max-width:30rem;gap:.375rem}.entity-card{width:11rem;max-width:13rem}.org-chart-content{padding:1rem .5rem}}.tw-overflow-y-auto::-webkit-scrollbar{width:6px}.tw-overflow-y-auto::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.tw-overflow-y-auto::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.tw-overflow-y-auto::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tw-transition-shadow{transition:box-shadow .2s ease-in-out}.tw-shadow-lg:hover{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;transform:translateY(-2px);transition:all .2s ease-in-out}.tw-bg-purple-300,.tw-bg-purple-400{transition:all .3s ease-in-out}.connection-line-compact{display:block;overflow:visible}.connection-line-compact path,.connection-line-compact line{stroke-linecap:round;stroke-linejoin:round;transition:stroke-width .2s ease}.connection-line-compact:hover path,.connection-line-compact:hover line{stroke-width:3}.connection-line-compact circle{transition:all .2s ease}.connection-line-compact circle:hover{filter:drop-shadow(0 2px 4px rgba(147,51,234,.4))}.level-0{border-color:#fb923c!important}.level-1{border-color:#60a5fa!important}.level-2{border-color:#a78bfa!important}.level-3{border-color:#4ade80!important}.level-4{border-color:#818cf8!important}.level-5{border-color:#f472b6!important}@media (max-width: 1200px){.tw-max-w-7xl{max-width:100%}.tw-gap-6{gap:1rem}.tw-min-w-64{min-width:14rem}.tw-max-w-72{max-width:16rem}}@media (max-width: 768px){.tw-min-w-64{min-width:12rem}.tw-max-w-72{max-width:14rem}.tw-max-w-7xl{max-width:100%}.tw-gap-6{gap:.75rem}.tw-p-4{padding:.75rem}.tw-mb-4{margin-bottom:.75rem}.tw-space-x-3{gap:.5rem}.tw-space-x-2{gap:.375rem}.tw-w-12{width:2.5rem}.tw-h-12{height:2.5rem}}@media (max-width: 480px){.tw-min-w-72{min-width:12rem}.tw-max-w-80{max-width:14rem}.tw-p-4{padding:.5rem}.tw-space-x-3{gap:.375rem}.tw-space-x-2{gap:.25rem}.tw-mb-3{margin-bottom:.5rem}.tw-w-12{width:2rem}.tw-h-12{height:2rem}.tw-w-8{width:1.5rem}.tw-h-8{height:1.5rem}}@media print{.tw-bg-gray-50{background:#fff!important}.tw-shadow-lg{box-shadow:none!important;border:1px solid #e5e7eb!important}.tw-bg-purple-300{background:#6b7280!important}.tw-border-purple-300{border-color:#6b7280!important}}\n"] }]
-        }] });
+                    ], template: "<!-- Organization Structure Component -->\n<div class=\"tw-flex-1 tw-overflow-hidden !tw-h-full\">\n  @if (loading()) {\n  <div class=\"tw-flex tw-items-center !tw-h-full tw-justify-center tw-py-12\">\n    <cide-ele-spinner size=\"md\"></cide-ele-spinner>\n    <span class=\"tw-ml-3 tw-text-gray-600 tw-text-sm\">Loading organization structure...</span>\n  </div>\n  } @else if (error()) {\n  <div class=\"tw-text-center tw-py-12\">\n    <div class=\"tw-w-16 tw-h-16 tw-bg-red-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n      <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-red-500\">error</cide-ele-icon>\n    </div>\n    <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">Error Loading Structure</h3>\n    <p class=\"tw-text-gray-600 tw-mb-4\">{{ error() }}</p>\n    <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"loadOrgStructure()\">\n      <cide-ele-icon>refresh</cide-ele-icon>\n      Try Again\n    </button>\n  </div>\n  } @else if (orgStructure().length === 0) {\n  <div class=\"tw-text-center tw-py-12\">\n    <div class=\"tw-w-16 tw-h-16 tw-bg-gray-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n      <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400\">account_tree</cide-ele-icon>\n    </div>\n    <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">No Entities Found</h3>\n    <p class=\"tw-text-gray-600 tw-mb-4\">No entities are available to display in the organization structure.</p>\n    @if (mode() === 'view') {\n    <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"router.navigate(['/control-panel/entity-list'])\">\n      <cide-ele-icon>add</cide-ele-icon>\n      Create First Entity\n    </button>\n    }\n  </div>\n  } @else {\n  <!-- Organization Chart Container -->\n  <div class=\"tw-relative tw-h-full tw-bg-gray-50 tw-py-8 org-chart-container\">\n    <!-- Chart Content with Background Pattern -->\n    <div class=\"tw-relative tw-z-10 tw-min-w-max tw-px-4 org-chart-content org-chart-content-with-bg\">\n      @for (rootNode of orgStructure(); track rootNode._id) {\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-mb-12\">\n        <!-- Render node recursively with unlimited depth -->\n        <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rootNode, level: 0 }\"></ng-container>\n      </div>\n      }\n    </div>\n  </div>\n  }\n</div>\n\n<!-- Entity Node Template (Recursive) -->\n<ng-template #entityNodeTemplate let-node let-level=\"level\">\n  <div class=\"tw-flex tw-flex-col tw-items-center\">\n    \n    <!-- Entity Card -->\n    <div class=\"tw-bg-white tw-shadow-lg tw-rounded-lg tw-p-4 tw-w-64 tw-max-w-72 tw-border-t-4 tw-transition-all tw-cursor-pointer hover:tw-shadow-xl hover:tw-scale-105 entity-card\"\n         [class.level-0]=\"level === 0\"\n         [class.level-1]=\"level === 1\"\n         [class.level-2]=\"level === 2\"\n         [class.level-3]=\"level === 3\"\n         [class.level-4]=\"level === 4\"\n         [class.level-5]=\"level === 5\"\n         (click)=\"viewEntity(node._id)\">\n      \n      <!-- Card Content -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <!-- Avatar -->\n        <div class=\"tw-w-12 tw-h-12 tw-bg-purple-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-flex-shrink-0\">\n          <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-purple-600\">person</cide-ele-icon>\n        </div>\n        \n        <!-- Entity Info -->\n        <div class=\"tw-flex-1 tw-min-w-0\">\n          <h3 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\" \n              [cideEleTooltip]=\"node.syen_name || ''\" \n              [tooltipPlacement]=\"'top'\"\n              [tooltipType]=\"'default'\">{{ node.syen_name }}</h3>\n          <p class=\"tw-text-xs tw-text-gray-600 tw-mt-1\">{{ node.syen_entity_code }}</p>\n          <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ node.syen_entity_type_sygms }}</p>\n        </div>\n      </div>\n      \n      <!-- Action Icons -->\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-mt-3\">\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <!-- Phone Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">phone</cide-ele-icon>\n          </button>\n          \n          <!-- Email Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">email</cide-ele-icon>\n          </button>\n          \n          <!-- LinkedIn Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-text-blue-600 hover:tw-bg-blue-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">attach_money</cide-ele-icon>\n          </button>\n          \n          <!-- Document Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">description</cide-ele-icon>\n          </button>\n          \n          <!-- More Options Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">more_horiz</cide-ele-icon>\n          </button>\n        </div>\n        \n        <!-- Status Badge -->\n        <div class=\"tw-flex-shrink-0\">\n          @if (node.syen_isactive) {\n          <div class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n            <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-green-500 tw-rounded-full tw-mr-1\"></div>\n            Active\n          </div>\n          } @else {\n          <div class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800\">\n            <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-red-500 tw-rounded-full tw-mr-1\"></div>\n            Inactive\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n    \n    <!-- Children Entities (Recursive) -->\n    @if (node.children && node.children.length > 0) {\n    <!-- Connection Lines Container -->\n    <div class=\"tw-relative tw-flex tw-flex-col tw-items-center tw-mt-4\">\n      <!-- Connection dot at parent -->\n      <div class=\"tw-absolute tw-left-1/2 tw-transform tw--translate-x-1/2\" style=\"top: -8px;\">\n        <div class=\"tw-w-2 tw-h-2 tw-bg-purple-600 tw-rounded-full tw-border tw-border-white\"></div>\n      </div>\n      \n      <!-- Simplified Connection Lines -->\n      <div class=\"tw-relative tw-w-full tw-flex tw-justify-center\" style=\"min-height: 40px;\">\n        @if (node.children.length === 1) {\n        <!-- Single child - simple vertical line -->\n        <svg class=\"tw-absolute tw-left-1/2\" style=\"transform: translateX(-50%); width: 2px; height: 40px; top: 0;\">\n          <line x1=\"1\" y1=\"0\" x2=\"1\" y2=\"40\" stroke=\"#9333ea\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n        </svg>\n        }\n        @else {\n        <!-- Multiple children - use calculated positions -->\n        <svg class=\"tw-absolute\" [attr.width]=\"(node.children.length * 280) + 'px'\" \n             style=\"height: 40px; left: 50%; transform: translateX(-50%); top: 0; overflow: visible;\">\n          <!-- Vertical line from parent (centered) -->\n          <line [attr.x1]=\"(node.children.length * 280) / 2\" \n                y1=\"0\" \n                [attr.x2]=\"(node.children.length * 280) / 2\" \n                y2=\"15\" \n                stroke=\"#9333ea\" \n                stroke-width=\"2\" \n                stroke-linecap=\"round\"/>\n          \n          <!-- Horizontal line spanning children -->\n          <line [attr.x1]=\"140\" \n                y1=\"15\" \n                [attr.x2]=\"(node.children.length * 280) - 140\" \n                y2=\"15\" \n                stroke=\"#9333ea\" \n                stroke-width=\"2\" \n                stroke-linecap=\"round\"/>\n          \n          <!-- Vertical lines to each child -->\n          @for (child of node.children; track child._id; let i = $index) {\n          @let xPosition = 140 + (i * 280);\n          <line [attr.x1]=\"xPosition\" \n                y1=\"15\" \n                [attr.x2]=\"xPosition\" \n                y2=\"35\" \n                stroke=\"#9333ea\" \n                stroke-width=\"2\" \n                stroke-linecap=\"round\"/>\n          <!-- Connection dot -->\n          <circle [attr.cx]=\"xPosition\" cy=\"35\" r=\"2.5\" fill=\"#9333ea\" stroke=\"#fff\" stroke-width=\"1\"/>\n          }\n        </svg>\n        }\n      </div>\n      \n      <!-- Children Container - Flexible Layout -->\n      <div class=\"tw-flex tw-flex-wrap tw-justify-center tw-gap-4 tw-w-full tw-max-w-6xl tw-px-4 children-container\">\n        @for (child of node.children; track child._id) {\n        <div class=\"tw-flex tw-flex-col tw-items-center tw-flex-shrink-0\">\n          <!-- Child node -->\n          <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"></ng-container>\n        </div>\n        }\n      </div>\n    </div>\n    }\n  </div>\n</ng-template>\n", styles: [".org-chart-container{overflow-x:auto;overflow-y:auto;height:100%;position:relative}.org-chart-content{min-width:max-content;min-height:max-content;padding:2rem 1rem}.org-chart-content-with-bg{position:relative}.org-chart-content-with-bg:before{content:\"\";position:absolute;inset:0;opacity:.3;pointer-events:none;background-image:radial-gradient(circle,#e5e7eb 1px,transparent 1px);background-size:20px 20px;background-repeat:repeat;z-index:-1}.flexible-connection-lines{position:relative;width:100%;height:40px}.flexible-connection-lines svg{position:absolute;left:50%;transform:translate(-50%);width:100%;height:100%;top:0}.children-container{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;width:100%;max-width:80rem;padding:0 1rem}.children-container>div{flex-shrink:0;display:flex;flex-direction:column;align-items:center}.entity-card{width:16rem;max-width:18rem;transition:all .2s ease-in-out}.entity-card:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}@media (max-width: 1400px){.children-container{max-width:70rem;gap:.875rem}.entity-card{width:15rem;max-width:17rem}}@media (max-width: 1200px){.children-container{max-width:60rem;gap:.75rem}.entity-card{width:14rem;max-width:16rem}}@media (max-width: 992px){.children-container{max-width:50rem;gap:.625rem}.entity-card{width:13rem;max-width:15rem}}@media (max-width: 768px){.children-container{max-width:40rem;gap:.5rem}.entity-card{width:12rem;max-width:14rem}.org-chart-content{padding:1.5rem .75rem}}@media (max-width: 576px){.children-container{max-width:30rem;gap:.375rem}.entity-card{width:11rem;max-width:13rem}.org-chart-content{padding:1rem .5rem}}.tw-overflow-y-auto::-webkit-scrollbar{width:6px}.tw-overflow-y-auto::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.tw-overflow-y-auto::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.tw-overflow-y-auto::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tw-transition-shadow{transition:box-shadow .2s ease-in-out}.tw-shadow-lg:hover{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;transform:translateY(-2px);transition:all .2s ease-in-out}.tw-bg-purple-300,.tw-bg-purple-400{transition:all .3s ease-in-out}.connection-line-compact{display:block;overflow:visible}.connection-line-compact path,.connection-line-compact line{stroke-linecap:round;stroke-linejoin:round;transition:stroke-width .2s ease}.connection-line-compact:hover path,.connection-line-compact:hover line{stroke-width:3}.connection-line-compact circle{transition:all .2s ease}.connection-line-compact circle:hover{filter:drop-shadow(0 2px 4px rgba(147,51,234,.4))}.level-0{border-color:#fb923c!important}.level-1{border-color:#60a5fa!important}.level-2{border-color:#a78bfa!important}.level-3{border-color:#4ade80!important}.level-4{border-color:#818cf8!important}.level-5{border-color:#f472b6!important}@media (max-width: 1200px){.tw-max-w-7xl{max-width:100%}.tw-gap-6{gap:1rem}.tw-min-w-64{min-width:14rem}.tw-max-w-72{max-width:16rem}}@media (max-width: 768px){.tw-min-w-64{min-width:12rem}.tw-max-w-72{max-width:14rem}.tw-max-w-7xl{max-width:100%}.tw-gap-6{gap:.75rem}.tw-p-4{padding:.75rem}.tw-mb-4{margin-bottom:.75rem}.tw-space-x-3{gap:.5rem}.tw-space-x-2{gap:.375rem}.tw-w-12{width:2.5rem}.tw-h-12{height:2.5rem}}@media (max-width: 480px){.tw-min-w-72{min-width:12rem}.tw-max-w-80{max-width:14rem}.tw-p-4{padding:.5rem}.tw-space-x-3{gap:.375rem}.tw-space-x-2{gap:.25rem}.tw-mb-3{margin-bottom:.5rem}.tw-w-12{width:2rem}.tw-h-12{height:2rem}.tw-w-8{width:1.5rem}.tw-h-8{height:1.5rem}}@media print{.tw-bg-gray-50{background:#fff!important}.tw-shadow-lg{box-shadow:none!important;border:1px solid #e5e7eb!important}.tw-bg-purple-300{background:#6b7280!important}.tw-border-purple-300{border-color:#6b7280!important}}\n"] }]
+        }], propDecorators: { allowSwitching: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSwitching", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], entityClick: [{ type: i0.Output, args: ["entityClick"] }], entitySelect: [{ type: i0.Output, args: ["entitySelect"] }], entityView: [{ type: i0.Output, args: ["entityView"] }] } });
 
 class CideSharedProgramSectionSelectorComponent {
     // Inputs
@@ -1710,10 +1849,10 @@ class CideSharedProgramSectionSelectorComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideSharedProgramSectionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideSharedProgramSectionSelectorComponent, isStandalone: true, selector: "cide-shared-program-section-selector", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, classProgramControlName: { classPropertyName: "classProgramControlName", publicName: "classProgramControlName", isSignal: true, isRequired: false, transformFunction: null }, branchControlName: { classPropertyName: "branchControlName", publicName: "branchControlName", isSignal: true, isRequired: false, transformFunction: null }, termControlName: { classPropertyName: "termControlName", publicName: "termControlName", isSignal: true, isRequired: false, transformFunction: null }, sectionControlName: { classPropertyName: "sectionControlName", publicName: "sectionControlName", isSignal: true, isRequired: false, transformFunction: null }, academicYearId: { classPropertyName: "academicYearId", publicName: "academicYearId", isSignal: true, isRequired: false, transformFunction: null }, entityId: { classPropertyName: "entityId", publicName: "entityId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, gridCols: { classPropertyName: "gridCols", publicName: "gridCols", isSignal: true, isRequired: false, transformFunction: null }, showAllPrograms: { classPropertyName: "showAllPrograms", publicName: "showAllPrograms", isSignal: true, isRequired: false, transformFunction: null }, includeInactive: { classPropertyName: "includeInactive", publicName: "includeInactive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valuesChange: "valuesChange" }, ngImport: i0, template: "<div class=\"program-section-selector\" [ngClass]=\"gridCols()\">\r\n  <!-- Class/Program Dropdown -->\r\n  <cide-ele-select \r\n    [label]=\"showLabels() ? 'Program/Class' : ''\" \r\n    [formControl]=\"getClassProgramControl()\"\r\n    [options]=\"classProgramOptions()\"\r\n    [loading]=\"classProgramMastersLoading()\"\r\n    [searchable]=\"true\"\r\n    (searchChange)=\"onClassProgramSearch($event)\"\r\n    placeholder=\"Search and select class/program\"\r\n    [disabled]=\"disabled()\"\r\n    size=\"sm\">\r\n  </cide-ele-select>\r\n\r\n  <!-- Branch/Specialization Dropdown (conditional) -->\r\n  @if (showBranchDropdown()) {\r\n    <cide-ele-select \r\n      [label]=\"showLabels() ? 'Branch (Specialization)' : ''\" \r\n      [formControl]=\"getBranchControl()\"\r\n      [options]=\"classProgramBranches()\"\r\n      [loading]=\"classProgramBranchesLoading()\"\r\n      placeholder=\"Select branch\"\r\n      [disabled]=\"disabled() || !formGroup().get(classProgramControlName())?.value\"\r\n      size=\"sm\">\r\n    </cide-ele-select>\r\n  }\r\n\r\n  <!-- Program Term Dropdown (conditional) -->\r\n  @if (showTermDropdown()) {\r\n    <cide-ele-select \r\n      [label]=\"showLabels() ? 'Program Term' : ''\" \r\n      [formControl]=\"getTermControl()\"\r\n      [options]=\"classProgramTerms()\"\r\n      [loading]=\"classProgramTermsLoading()\"\r\n      placeholder=\"Select term/semester\"\r\n      [disabled]=\"disabled() || !formGroup().get(classProgramControlName())?.value\"\r\n      size=\"sm\"\r\n      valueKey=\"_id\"\r\n      labelKey=\"label\"\r\n      [treeView]=\"{ enabled: true, primaryKey: '_id', foreignKey: 'acapt_parent_class_prog_term_acapt' }\">\r\n    </cide-ele-select>\r\n  }\r\n\r\n  <!-- Section Dropdown (conditional) -->\r\n  @if (hasSections()) {\r\n    <cide-ele-select \r\n      [label]=\"showLabels() ? 'Section' : ''\" \r\n      [formControl]=\"getSectionControl()\"\r\n      [options]=\"programTermSections()\"\r\n      [loading]=\"programTermSectionsLoading()\"\r\n      placeholder=\"Select section\"\r\n      [disabled]=\"disabled() || !formGroup().get(termControlName())?.value\"\r\n      size=\"sm\">\r\n    </cide-ele-select>\r\n  }\r\n</div>\r\n\r\n", styles: [".program-section-selector{display:grid;gap:1rem;width:100%;border:none;padding:0;margin:0;background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideSharedProgramSectionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideSharedProgramSectionSelectorComponent, isStandalone: true, selector: "cide-shared-program-section-selector", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, classProgramControlName: { classPropertyName: "classProgramControlName", publicName: "classProgramControlName", isSignal: true, isRequired: false, transformFunction: null }, branchControlName: { classPropertyName: "branchControlName", publicName: "branchControlName", isSignal: true, isRequired: false, transformFunction: null }, termControlName: { classPropertyName: "termControlName", publicName: "termControlName", isSignal: true, isRequired: false, transformFunction: null }, sectionControlName: { classPropertyName: "sectionControlName", publicName: "sectionControlName", isSignal: true, isRequired: false, transformFunction: null }, academicYearId: { classPropertyName: "academicYearId", publicName: "academicYearId", isSignal: true, isRequired: false, transformFunction: null }, entityId: { classPropertyName: "entityId", publicName: "entityId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, gridCols: { classPropertyName: "gridCols", publicName: "gridCols", isSignal: true, isRequired: false, transformFunction: null }, showAllPrograms: { classPropertyName: "showAllPrograms", publicName: "showAllPrograms", isSignal: true, isRequired: false, transformFunction: null }, includeInactive: { classPropertyName: "includeInactive", publicName: "includeInactive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valuesChange: "valuesChange" }, ngImport: i0, template: "<div class=\"program-section-selector\" [ngClass]=\"gridCols()\">\r\n  <!-- Class/Program Dropdown -->\r\n  <cide-ele-select \r\n    [label]=\"showLabels() ? 'Program/Class' : ''\" \r\n    [formControl]=\"getClassProgramControl()\"\r\n    [options]=\"classProgramOptions()\"\r\n    [loading]=\"classProgramMastersLoading()\"\r\n    [searchable]=\"true\"\r\n    (searchChange)=\"onClassProgramSearch($event)\"\r\n    placeholder=\"Search and select class/program\"\r\n    [disabled]=\"disabled()\"\r\n    size=\"sm\">\r\n  </cide-ele-select>\r\n\r\n  <!-- Branch/Specialization Dropdown (conditional) -->\r\n  @if (showBranchDropdown()) {\r\n    <cide-ele-select \r\n      [label]=\"showLabels() ? 'Branch (Specialization)' : ''\" \r\n      [formControl]=\"getBranchControl()\"\r\n      [options]=\"classProgramBranches()\"\r\n      [loading]=\"classProgramBranchesLoading()\"\r\n      placeholder=\"Select branch\"\r\n      [disabled]=\"disabled() || !formGroup().get(classProgramControlName())?.value\"\r\n      size=\"sm\">\r\n    </cide-ele-select>\r\n  }\r\n\r\n  <!-- Program Term Dropdown (conditional) -->\r\n  @if (showTermDropdown()) {\r\n    <cide-ele-select \r\n      [label]=\"showLabels() ? 'Program Term' : ''\" \r\n      [formControl]=\"getTermControl()\"\r\n      [options]=\"classProgramTerms()\"\r\n      [loading]=\"classProgramTermsLoading()\"\r\n      placeholder=\"Select term/semester\"\r\n      [disabled]=\"disabled() || !formGroup().get(classProgramControlName())?.value\"\r\n      size=\"sm\"\r\n      valueKey=\"_id\"\r\n      labelKey=\"label\"\r\n      [treeView]=\"{ enabled: true, primaryKey: '_id', foreignKey: 'acapt_parent_class_prog_term_acapt' }\">\r\n    </cide-ele-select>\r\n  }\r\n\r\n  <!-- Section Dropdown (conditional) -->\r\n  @if (hasSections()) {\r\n    <cide-ele-select \r\n      [label]=\"showLabels() ? 'Section' : ''\" \r\n      [formControl]=\"getSectionControl()\"\r\n      [options]=\"programTermSections()\"\r\n      [loading]=\"programTermSectionsLoading()\"\r\n      placeholder=\"Select section\"\r\n      [disabled]=\"disabled() || !formGroup().get(termControlName())?.value\"\r\n      size=\"sm\">\r\n    </cide-ele-select>\r\n  }\r\n</div>\r\n\r\n", styles: [".program-section-selector{display:grid;gap:1rem;width:100%;border:none;padding:0;margin:0;background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideSharedProgramSectionSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideSharedProgramSectionSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-shared-program-section-selector', standalone: true, imports: [
                         CommonModule,
@@ -1721,7 +1860,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideSelectComponent,
                         NgClass
                     ], template: "<div class=\"program-section-selector\" [ngClass]=\"gridCols()\">\r\n  <!-- Class/Program Dropdown -->\r\n  <cide-ele-select \r\n    [label]=\"showLabels() ? 'Program/Class' : ''\" \r\n    [formControl]=\"getClassProgramControl()\"\r\n    [options]=\"classProgramOptions()\"\r\n    [loading]=\"classProgramMastersLoading()\"\r\n    [searchable]=\"true\"\r\n    (searchChange)=\"onClassProgramSearch($event)\"\r\n    placeholder=\"Search and select class/program\"\r\n    [disabled]=\"disabled()\"\r\n    size=\"sm\">\r\n  </cide-ele-select>\r\n\r\n  <!-- Branch/Specialization Dropdown (conditional) -->\r\n  @if (showBranchDropdown()) {\r\n    <cide-ele-select \r\n      [label]=\"showLabels() ? 'Branch (Specialization)' : ''\" \r\n      [formControl]=\"getBranchControl()\"\r\n      [options]=\"classProgramBranches()\"\r\n      [loading]=\"classProgramBranchesLoading()\"\r\n      placeholder=\"Select branch\"\r\n      [disabled]=\"disabled() || !formGroup().get(classProgramControlName())?.value\"\r\n      size=\"sm\">\r\n    </cide-ele-select>\r\n  }\r\n\r\n  <!-- Program Term Dropdown (conditional) -->\r\n  @if (showTermDropdown()) {\r\n    <cide-ele-select \r\n      [label]=\"showLabels() ? 'Program Term' : ''\" \r\n      [formControl]=\"getTermControl()\"\r\n      [options]=\"classProgramTerms()\"\r\n      [loading]=\"classProgramTermsLoading()\"\r\n      placeholder=\"Select term/semester\"\r\n      [disabled]=\"disabled() || !formGroup().get(classProgramControlName())?.value\"\r\n      size=\"sm\"\r\n      valueKey=\"_id\"\r\n      labelKey=\"label\"\r\n      [treeView]=\"{ enabled: true, primaryKey: '_id', foreignKey: 'acapt_parent_class_prog_term_acapt' }\">\r\n    </cide-ele-select>\r\n  }\r\n\r\n  <!-- Section Dropdown (conditional) -->\r\n  @if (hasSections()) {\r\n    <cide-ele-select \r\n      [label]=\"showLabels() ? 'Section' : ''\" \r\n      [formControl]=\"getSectionControl()\"\r\n      [options]=\"programTermSections()\"\r\n      [loading]=\"programTermSectionsLoading()\"\r\n      placeholder=\"Select section\"\r\n      [disabled]=\"disabled() || !formGroup().get(termControlName())?.value\"\r\n      size=\"sm\">\r\n    </cide-ele-select>\r\n  }\r\n</div>\r\n\r\n", styles: [".program-section-selector{display:grid;gap:1rem;width:100%;border:none;padding:0;margin:0;background:transparent}\n"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], classProgramControlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "classProgramControlName", required: false }] }], branchControlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "branchControlName", required: false }] }], termControlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "termControlName", required: false }] }], sectionControlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionControlName", required: false }] }], academicYearId: [{ type: i0.Input, args: [{ isSignal: true, alias: "academicYearId", required: false }] }], entityId: [{ type: i0.Input, args: [{ isSignal: true, alias: "entityId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], gridCols: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridCols", required: false }] }], showAllPrograms: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAllPrograms", required: false }] }], includeInactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "includeInactive", required: false }] }], valuesChange: [{ type: i0.Output, args: ["valuesChange"] }] } });
 
 /**
  * Injection token for FeeDetailsViewerComponent
@@ -1846,10 +1985,10 @@ class FeeDetailsViewerWrapperComponent {
             this.viewContainerRef.clear();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeeDetailsViewerWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: FeeDetailsViewerWrapperComponent, isStandalone: true, selector: "cide-shared-fee-details-viewer-wrapper", inputs: { isOpen: "isOpen", feeData: "feeData", assignmentDate: "assignmentDate", discount: "discount" }, outputs: { closed: "closed" }, usesOnChanges: true, ngImport: i0, template: `<!-- Component will be dynamically loaded here -->`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeDetailsViewerWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FeeDetailsViewerWrapperComponent, isStandalone: true, selector: "cide-shared-fee-details-viewer-wrapper", inputs: { isOpen: "isOpen", feeData: "feeData", assignmentDate: "assignmentDate", discount: "discount" }, outputs: { closed: "closed" }, usesOnChanges: true, ngImport: i0, template: `<!-- Component will be dynamically loaded here -->`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeeDetailsViewerWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeDetailsViewerWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cide-shared-fee-details-viewer-wrapper',
@@ -2018,10 +2157,10 @@ class ProgramSectionSelectorWrapperComponent {
             this.viewContainerRef.clear();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ProgramSectionSelectorWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: ProgramSectionSelectorWrapperComponent, isStandalone: true, selector: "cide-shared-program-section-selector-wrapper", inputs: { formGroup: "formGroup", classProgramControlName: "classProgramControlName", branchControlName: "branchControlName", termControlName: "termControlName", sectionControlName: "sectionControlName", academicYearId: "academicYearId", entityId: "entityId", disabled: "disabled", showLabels: "showLabels", gridCols: "gridCols", showAllPrograms: "showAllPrograms", includeInactive: "includeInactive" }, outputs: { valuesChange: "valuesChange" }, usesOnChanges: true, ngImport: i0, template: `<!-- Component will be dynamically loaded here -->`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ProgramSectionSelectorWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ProgramSectionSelectorWrapperComponent, isStandalone: true, selector: "cide-shared-program-section-selector-wrapper", inputs: { formGroup: "formGroup", classProgramControlName: "classProgramControlName", branchControlName: "branchControlName", termControlName: "termControlName", sectionControlName: "sectionControlName", academicYearId: "academicYearId", entityId: "entityId", disabled: "disabled", showLabels: "showLabels", gridCols: "gridCols", showAllPrograms: "showAllPrograms", includeInactive: "includeInactive" }, outputs: { valuesChange: "valuesChange" }, usesOnChanges: true, ngImport: i0, template: `<!-- Component will be dynamically loaded here -->`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ProgramSectionSelectorWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ProgramSectionSelectorWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cide-shared-program-section-selector-wrapper',