cloud-ide-shared 1.0.32 → 1.0.34

package/fesm2022/cloud-ide-shared.mjs

@@ -1,13 +1,16 @@
 import * as i0 from '@angular/core';
-import { Component, InjectionToken, inject, Injectable, input, output, signal } from '@angular/core';
+import { Component, InjectionToken, inject, Injectable, input, output, signal, DestroyRef, computed, effect } from '@angular/core';
 import { Router } from '@angular/router';
 import { Observable, BehaviorSubject, throwError } from 'rxjs';
-import { CideEleFileManagerService, CideEleButtonComponent, CideIconComponent, CideSpinnerComponent } from 'cloud-ide-element';
-import { cidePath, hostManagerRoutesUrl, commonRoutesUrl, generateStringFromObject, coreRoutesUrl } from 'cloud-ide-lms-model';
+import { CideEleFileManagerService, CideEleButtonComponent, CideIconComponent, CideSpinnerComponent, TooltipDirective, NotificationService, CideSelectComponent } from 'cloud-ide-element';
+import { cidePath, hostManagerRoutesUrl, commonRoutesUrl, generateStringFromObject, coreRoutesUrl, AcaClassPrgBranchListPayload, academicsRoutesUrl, MPrgTrmSection } from 'cloud-ide-lms-model';
 import { HttpClient } from '@angular/common/http';
 import { tap, catchError } from 'rxjs/operators';
 import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgClass } from '@angular/common';
+import * as i2 from '@angular/forms';
+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 });
@@ -158,6 +161,22 @@ const NATIONALITY_SERVICE_TOKEN = new InjectionToken('CideCoreNationalityService
  */
 const CLASS_PROGRAM_MASTER_SERVICE_TOKEN = new InjectionToken('CideCoreClassProgramMasterService');
 
+/**
+ * Injection token for Program Term Section Service (CideLytProgramTermSectionService)
+ * Used to provide and inject program term section service implementations
+ * This enables dependency injection with interface-based contracts
+ *
+ * @example
+ * ```typescript
+ * // In app.config.ts
+ * { provide: PROGRAM_TERM_SECTION_SERVICE_TOKEN, useExisting: CideLytProgramTermSectionService }
+ *
+ * // In component
+ * private programTermSectionService = inject(PROGRAM_TERM_SECTION_SERVICE_TOKEN) as IProgramTermSectionService;
+ * ```
+ */
+const PROGRAM_TERM_SECTION_SERVICE_TOKEN = new InjectionToken('CideLytProgramTermSectionService');
+
 /**
  * Shared Object ID Generation Service
  *
@@ -722,6 +741,37 @@ const FINANCIAL_YEAR_SERVICE_TOKEN = new InjectionToken('CideAccFinancialYearSer
  */
 const ACADEMIC_YEAR_SERVICE_TOKEN = new InjectionToken('CideLytAcademicYearService');
 
+/**
+ * Injection token for Fee Structure Service (CideFeeFeeStructureService)
+ * Used to provide and inject fee structure service implementations
+ * This enables dependency injection with interface-based contracts
+ *
+ * @example
+ * ```typescript
+ * // In app.config.ts
+ * { provide: FEE_STRUCTURE_SERVICE_TOKEN, useExisting: CideFeeFeeStructureService }
+ *
+ * // In component
+ * private feeStructureService = inject(FEE_STRUCTURE_SERVICE_TOKEN);
+ * ```
+ */
+const FEE_STRUCTURE_SERVICE_TOKEN = new InjectionToken('CideFeeFeeStructureService');
+/**
+ * Injection token for Fee Payment Service (CideFeeFeePaymentService)
+ * Used to provide and inject fee payment service implementations
+ * This enables dependency injection with interface-based contracts
+ *
+ * @example
+ * ```typescript
+ * // In app.config.ts
+ * { provide: FEE_PAYMENT_SERVICE_TOKEN, useExisting: CideFeeFeePaymentService }
+ *
+ * // In component
+ * private feePaymentService = inject(FEE_PAYMENT_SERVICE_TOKEN);
+ * ```
+ */
+const FEE_PAYMENT_SERVICE_TOKEN = new InjectionToken('CideFeeFeePaymentService');
+
 class CideSharedOrgStructureComponent {
     // Input parameters for configuration
     allowSwitching = input(true, ...(ngDevMode ? [{ debugName: "allowSwitching" }] : [])); // Allow entity switching (default: true)
@@ -870,7 +920,7 @@ class CideSharedOrgStructureComponent {
         });
     }
     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 -->\r\n<div class=\"tw-flex-1 tw-overflow-hidden\">\r\n  @if (loading()) {\r\n  <div class=\"tw-flex tw-items-center tw-justify-center tw-py-12\">\r\n    <cide-ele-spinner size=\"md\"></cide-ele-spinner>\r\n    <span class=\"tw-ml-3 tw-text-gray-600 tw-text-sm\">Loading organization structure...</span>\r\n  </div>\r\n  } @else if (error()) {\r\n  <div class=\"tw-text-center tw-py-12\">\r\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\">\r\n      <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-red-500\">error</cide-ele-icon>\r\n    </div>\r\n    <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">Error Loading Structure</h3>\r\n    <p class=\"tw-text-gray-600 tw-mb-4\">{{ error() }}</p>\r\n    <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"loadOrgStructure()\">\r\n      <cide-ele-icon>refresh</cide-ele-icon>\r\n      Try Again\r\n    </button>\r\n  </div>\r\n  } @else if (orgStructure().length === 0) {\r\n  <div class=\"tw-text-center tw-py-12\">\r\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\">\r\n      <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400\">account_tree</cide-ele-icon>\r\n    </div>\r\n    <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">No Entities Found</h3>\r\n    <p class=\"tw-text-gray-600 tw-mb-4\">No entities are available to display in the organization structure.</p>\r\n    @if (mode() === 'view') {\r\n    <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"router.navigate(['/control-panel/entity-list'])\">\r\n      <cide-ele-icon>add</cide-ele-icon>\r\n      Create First Entity\r\n    </button>\r\n    }\r\n  </div>\r\n  } @else {\r\n  <!-- Organization Chart Container -->\r\n  <div class=\"tw-relative tw-min-h-screen tw-bg-gray-50 tw-py-8 tw-overflow-x-auto org-chart-container\">\r\n    <!-- Background Grid Pattern -->\r\n    <div class=\"tw-absolute tw-inset-0 tw-opacity-30\" style=\"background-image: radial-gradient(circle, #e5e7eb 1px, transparent 1px); background-size: 20px 20px;\"></div>\r\n    \r\n    <!-- Chart Content -->\r\n    <div class=\"tw-relative tw-z-10 tw-min-w-max tw-px-4 org-chart-content\">\r\n      @for (rootNode of orgStructure(); track rootNode._id) {\r\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-mb-12\">\r\n        <!-- Render node recursively with unlimited depth -->\r\n        <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rootNode, level: 0 }\"></ng-container>\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n\r\n<!-- Entity Node Template (Recursive) -->\r\n<ng-template #entityNodeTemplate let-node let-level=\"level\">\r\n  <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n    \r\n    <!-- Entity Card -->\r\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\"\r\n         [class.level-0]=\"level === 0\"\r\n         [class.level-1]=\"level === 1\"\r\n         [class.level-2]=\"level === 2\"\r\n         [class.level-3]=\"level === 3\"\r\n         [class.level-4]=\"level === 4\"\r\n         [class.level-5]=\"level === 5\"\r\n         (click)=\"viewEntity(node._id)\">\r\n      \r\n      <!-- Card Content -->\r\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n        <!-- Avatar -->\r\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\">\r\n          <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-purple-600\">person</cide-ele-icon>\r\n        </div>\r\n        \r\n        <!-- Entity Info -->\r\n        <div class=\"tw-flex-1 tw-min-w-0\">\r\n          <h3 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">{{ node.syen_name }}</h3>\r\n          <p class=\"tw-text-xs tw-text-gray-600 tw-mt-1\">{{ node.syen_entity_code }}</p>\r\n          <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ node.syen_entity_type_sygms }}</p>\r\n        </div>\r\n      </div>\r\n      \r\n      <!-- Action Icons -->\r\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-mt-3\">\r\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n          <!-- Phone Icon -->\r\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\">\r\n            <cide-ele-icon class=\"tw-text-xs\">phone</cide-ele-icon>\r\n          </button>\r\n          \r\n          <!-- Email Icon -->\r\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\">\r\n            <cide-ele-icon class=\"tw-text-xs\">email</cide-ele-icon>\r\n          </button>\r\n          \r\n          <!-- LinkedIn Icon -->\r\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\">\r\n            <cide-ele-icon class=\"tw-text-xs\">attach_money</cide-ele-icon>\r\n          </button>\r\n          \r\n          <!-- Document Icon -->\r\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\">\r\n            <cide-ele-icon class=\"tw-text-xs\">description</cide-ele-icon>\r\n          </button>\r\n          \r\n          <!-- More Options Icon -->\r\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\">\r\n            <cide-ele-icon class=\"tw-text-xs\">more_horiz</cide-ele-icon>\r\n          </button>\r\n        </div>\r\n        \r\n        <!-- Status Badge -->\r\n        <div class=\"tw-flex-shrink-0\">\r\n          @if (node.syen_isactive) {\r\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\">\r\n            <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-green-500 tw-rounded-full tw-mr-1\"></div>\r\n            Active\r\n          </div>\r\n          } @else {\r\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\">\r\n            <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-red-500 tw-rounded-full tw-mr-1\"></div>\r\n            Inactive\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n    \r\n    <!-- Children Entities (Recursive) -->\r\n    @if (node.children && node.children.length > 0) {\r\n    <!-- Flexible Connection Lines -->\r\n    <div class=\"tw-relative tw-flex tw-flex-col tw-items-center tw-mt-4\">\r\n      <!-- Connection dot -->\r\n      <div class=\"tw-absolute tw-left-1/2 tw-transform tw--translate-x-1/2\" style=\"top: -8px;\">\r\n        <div class=\"tw-w-2 tw-h-2 tw-bg-purple-600 tw-rounded-full tw-border tw-border-white\"></div>\r\n      </div>\r\n      \r\n      <!-- Flexible SVG Lines -->\r\n      <div class=\"tw-relative tw-w-full tw-flex tw-justify-center flexible-connection-lines\">\r\n        @if (node.children && node.children.length === 1) {\r\n        <!-- Single child - simple vertical line -->\r\n        <svg class=\"tw-absolute tw-left-1/2\" style=\"transform: translateX(-50%); width: 2px; height: 40px; top: 0;\">\r\n          <line x1=\"1\" y1=\"0\" x2=\"1\" y2=\"40\" stroke=\"#9333ea\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n        </svg>\r\n        }\r\n        @else if (node.children && node.children.length > 1) {\r\n        <!-- Multiple children - flexible design -->\r\n        <svg class=\"tw-absolute tw-left-1/2\" style=\"transform: translateX(-50%); width: 100%; height: 40px; top: 0;\">\r\n          <!-- Vertical line from parent -->\r\n          <line x1=\"50%\" y1=\"0\" x2=\"50%\" y2=\"15\" stroke=\"#9333ea\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n          \r\n          <!-- Horizontal line spanning children -->\r\n          <line x1=\"20%\" y1=\"15\" x2=\"80%\" y2=\"15\" stroke=\"#9333ea\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n          \r\n          <!-- Vertical lines to children -->\r\n          @for (child of node.children; track child._id; let i = $index) {\r\n          <line [attr.x1]=\"(20 + (60 * i) / (node.children.length - 1)) + '%'\" \r\n                y1=\"15\" \r\n                [attr.x2]=\"(20 + (60 * i) / (node.children.length - 1)) + '%'\" \r\n                y2=\"35\" \r\n                stroke=\"#9333ea\" \r\n                stroke-width=\"2\" \r\n                stroke-linecap=\"round\"/>\r\n          <!-- Connection dot -->\r\n          <circle [attr.cx]=\"(20 + (60 * i) / (node.children.length - 1)) + '%'\" cy=\"35\" r=\"2.5\" fill=\"#9333ea\" stroke=\"#fff\" stroke-width=\"1\"/>\r\n          }\r\n        </svg>\r\n        }\r\n      </div>\r\n      \r\n      <!-- Children Container - Flexible Layout -->\r\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\">\r\n        @for (child of node.children; track child._id) {\r\n        <div class=\"tw-flex tw-flex-col tw-items-center tw-flex-shrink-0\">\r\n          <!-- Child node -->\r\n          <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"></ng-container>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [".org-chart-container{overflow-x:auto;overflow-y:visible;min-height:100vh}.org-chart-content{min-width:max-content;padding:2rem 1rem}.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]", 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"] }] });
+    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-min-h-screen 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;min-height:100vh;max-height:100vh;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: [{
             type: Component,
@@ -878,10 +928,769 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CommonModule,
                         CideEleButtonComponent,
                         CideIconComponent,
-                        CideSpinnerComponent
-                    ], template: "<!-- Organization Structure Component -->\r\n<div class=\"tw-flex-1 tw-overflow-hidden\">\r\n  @if (loading()) {\r\n  <div class=\"tw-flex tw-items-center tw-justify-center tw-py-12\">\r\n    <cide-ele-spinner size=\"md\"></cide-ele-spinner>\r\n    <span class=\"tw-ml-3 tw-text-gray-600 tw-text-sm\">Loading organization structure...</span>\r\n  </div>\r\n  } @else if (error()) {\r\n  <div class=\"tw-text-center tw-py-12\">\r\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\">\r\n      <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-red-500\">error</cide-ele-icon>\r\n    </div>\r\n    <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">Error Loading Structure</h3>\r\n    <p class=\"tw-text-gray-600 tw-mb-4\">{{ error() }}</p>\r\n    <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"loadOrgStructure()\">\r\n      <cide-ele-icon>refresh</cide-ele-icon>\r\n      Try Again\r\n    </button>\r\n  </div>\r\n  } @else if (orgStructure().length === 0) {\r\n  <div class=\"tw-text-center tw-py-12\">\r\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\">\r\n      <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400\">account_tree</cide-ele-icon>\r\n    </div>\r\n    <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">No Entities Found</h3>\r\n    <p class=\"tw-text-gray-600 tw-mb-4\">No entities are available to display in the organization structure.</p>\r\n    @if (mode() === 'view') {\r\n    <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"router.navigate(['/control-panel/entity-list'])\">\r\n      <cide-ele-icon>add</cide-ele-icon>\r\n      Create First Entity\r\n    </button>\r\n    }\r\n  </div>\r\n  } @else {\r\n  <!-- Organization Chart Container -->\r\n  <div class=\"tw-relative tw-min-h-screen tw-bg-gray-50 tw-py-8 tw-overflow-x-auto org-chart-container\">\r\n    <!-- Background Grid Pattern -->\r\n    <div class=\"tw-absolute tw-inset-0 tw-opacity-30\" style=\"background-image: radial-gradient(circle, #e5e7eb 1px, transparent 1px); background-size: 20px 20px;\"></div>\r\n    \r\n    <!-- Chart Content -->\r\n    <div class=\"tw-relative tw-z-10 tw-min-w-max tw-px-4 org-chart-content\">\r\n      @for (rootNode of orgStructure(); track rootNode._id) {\r\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-mb-12\">\r\n        <!-- Render node recursively with unlimited depth -->\r\n        <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rootNode, level: 0 }\"></ng-container>\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n\r\n<!-- Entity Node Template (Recursive) -->\r\n<ng-template #entityNodeTemplate let-node let-level=\"level\">\r\n  <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n    \r\n    <!-- Entity Card -->\r\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\"\r\n         [class.level-0]=\"level === 0\"\r\n         [class.level-1]=\"level === 1\"\r\n         [class.level-2]=\"level === 2\"\r\n         [class.level-3]=\"level === 3\"\r\n         [class.level-4]=\"level === 4\"\r\n         [class.level-5]=\"level === 5\"\r\n         (click)=\"viewEntity(node._id)\">\r\n      \r\n      <!-- Card Content -->\r\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n        <!-- Avatar -->\r\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\">\r\n          <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-purple-600\">person</cide-ele-icon>\r\n        </div>\r\n        \r\n        <!-- Entity Info -->\r\n        <div class=\"tw-flex-1 tw-min-w-0\">\r\n          <h3 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">{{ node.syen_name }}</h3>\r\n          <p class=\"tw-text-xs tw-text-gray-600 tw-mt-1\">{{ node.syen_entity_code }}</p>\r\n          <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ node.syen_entity_type_sygms }}</p>\r\n        </div>\r\n      </div>\r\n      \r\n      <!-- Action Icons -->\r\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-mt-3\">\r\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n          <!-- Phone Icon -->\r\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\">\r\n            <cide-ele-icon class=\"tw-text-xs\">phone</cide-ele-icon>\r\n          </button>\r\n          \r\n          <!-- Email Icon -->\r\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\">\r\n            <cide-ele-icon class=\"tw-text-xs\">email</cide-ele-icon>\r\n          </button>\r\n          \r\n          <!-- LinkedIn Icon -->\r\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\">\r\n            <cide-ele-icon class=\"tw-text-xs\">attach_money</cide-ele-icon>\r\n          </button>\r\n          \r\n          <!-- Document Icon -->\r\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\">\r\n            <cide-ele-icon class=\"tw-text-xs\">description</cide-ele-icon>\r\n          </button>\r\n          \r\n          <!-- More Options Icon -->\r\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\">\r\n            <cide-ele-icon class=\"tw-text-xs\">more_horiz</cide-ele-icon>\r\n          </button>\r\n        </div>\r\n        \r\n        <!-- Status Badge -->\r\n        <div class=\"tw-flex-shrink-0\">\r\n          @if (node.syen_isactive) {\r\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\">\r\n            <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-green-500 tw-rounded-full tw-mr-1\"></div>\r\n            Active\r\n          </div>\r\n          } @else {\r\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\">\r\n            <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-red-500 tw-rounded-full tw-mr-1\"></div>\r\n            Inactive\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n    \r\n    <!-- Children Entities (Recursive) -->\r\n    @if (node.children && node.children.length > 0) {\r\n    <!-- Flexible Connection Lines -->\r\n    <div class=\"tw-relative tw-flex tw-flex-col tw-items-center tw-mt-4\">\r\n      <!-- Connection dot -->\r\n      <div class=\"tw-absolute tw-left-1/2 tw-transform tw--translate-x-1/2\" style=\"top: -8px;\">\r\n        <div class=\"tw-w-2 tw-h-2 tw-bg-purple-600 tw-rounded-full tw-border tw-border-white\"></div>\r\n      </div>\r\n      \r\n      <!-- Flexible SVG Lines -->\r\n      <div class=\"tw-relative tw-w-full tw-flex tw-justify-center flexible-connection-lines\">\r\n        @if (node.children && node.children.length === 1) {\r\n        <!-- Single child - simple vertical line -->\r\n        <svg class=\"tw-absolute tw-left-1/2\" style=\"transform: translateX(-50%); width: 2px; height: 40px; top: 0;\">\r\n          <line x1=\"1\" y1=\"0\" x2=\"1\" y2=\"40\" stroke=\"#9333ea\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n        </svg>\r\n        }\r\n        @else if (node.children && node.children.length > 1) {\r\n        <!-- Multiple children - flexible design -->\r\n        <svg class=\"tw-absolute tw-left-1/2\" style=\"transform: translateX(-50%); width: 100%; height: 40px; top: 0;\">\r\n          <!-- Vertical line from parent -->\r\n          <line x1=\"50%\" y1=\"0\" x2=\"50%\" y2=\"15\" stroke=\"#9333ea\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n          \r\n          <!-- Horizontal line spanning children -->\r\n          <line x1=\"20%\" y1=\"15\" x2=\"80%\" y2=\"15\" stroke=\"#9333ea\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n          \r\n          <!-- Vertical lines to children -->\r\n          @for (child of node.children; track child._id; let i = $index) {\r\n          <line [attr.x1]=\"(20 + (60 * i) / (node.children.length - 1)) + '%'\" \r\n                y1=\"15\" \r\n                [attr.x2]=\"(20 + (60 * i) / (node.children.length - 1)) + '%'\" \r\n                y2=\"35\" \r\n                stroke=\"#9333ea\" \r\n                stroke-width=\"2\" \r\n                stroke-linecap=\"round\"/>\r\n          <!-- Connection dot -->\r\n          <circle [attr.cx]=\"(20 + (60 * i) / (node.children.length - 1)) + '%'\" cy=\"35\" r=\"2.5\" fill=\"#9333ea\" stroke=\"#fff\" stroke-width=\"1\"/>\r\n          }\r\n        </svg>\r\n        }\r\n      </div>\r\n      \r\n      <!-- Children Container - Flexible Layout -->\r\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\">\r\n        @for (child of node.children; track child._id) {\r\n        <div class=\"tw-flex tw-flex-col tw-items-center tw-flex-shrink-0\">\r\n          <!-- Child node -->\r\n          <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"></ng-container>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [".org-chart-container{overflow-x:auto;overflow-y:visible;min-height:100vh}.org-chart-content{min-width:max-content;padding:2rem 1rem}.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"] }]
+                        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-min-h-screen 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;min-height:100vh;max-height:100vh;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"] }]
         }] });
 
+class CideSharedProgramSectionSelectorComponent {
+    // Inputs
+    formGroup = input.required(...(ngDevMode ? [{ debugName: "formGroup" }] : []));
+    classProgramControlName = input('class_program_id', ...(ngDevMode ? [{ debugName: "classProgramControlName" }] : []));
+    branchControlName = input('branch_id', ...(ngDevMode ? [{ debugName: "branchControlName" }] : []));
+    termControlName = input('term_id', ...(ngDevMode ? [{ debugName: "termControlName" }] : []));
+    sectionControlName = input('section_id', ...(ngDevMode ? [{ debugName: "sectionControlName" }] : []));
+    academicYearId = input(null, ...(ngDevMode ? [{ debugName: "academicYearId" }] : []));
+    entityId = input(null, ...(ngDevMode ? [{ debugName: "entityId" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    showLabels = input(true, ...(ngDevMode ? [{ debugName: "showLabels" }] : []));
+    gridCols = input('tw-grid-cols-1 md:tw-grid-cols-3', ...(ngDevMode ? [{ debugName: "gridCols" }] : []));
+    showAllPrograms = input(false, ...(ngDevMode ? [{ debugName: "showAllPrograms" }] : [])); // If true, shows all programs regardless of academic year/entity filters
+    includeInactive = input(false, ...(ngDevMode ? [{ debugName: "includeInactive" }] : [])); // If true, includes inactive programs
+    // Outputs
+    valuesChange = output();
+    // Services
+    destroyRef = inject(DestroyRef);
+    http = inject(HttpClient);
+    classProgramService = inject(CLASS_PROGRAM_MASTER_SERVICE_TOKEN);
+    notificationService = inject(NotificationService);
+    // State
+    classProgramMasters = signal([], ...(ngDevMode ? [{ debugName: "classProgramMasters" }] : []));
+    classProgramBranches = signal([], ...(ngDevMode ? [{ debugName: "classProgramBranches" }] : []));
+    classProgramTerms = signal([], ...(ngDevMode ? [{ debugName: "classProgramTerms" }] : []));
+    programTermSections = signal([], ...(ngDevMode ? [{ debugName: "programTermSections" }] : []));
+    classProgramMastersLoading = signal(false, ...(ngDevMode ? [{ debugName: "classProgramMastersLoading" }] : []));
+    classProgramBranchesLoading = signal(false, ...(ngDevMode ? [{ debugName: "classProgramBranchesLoading" }] : []));
+    classProgramTermsLoading = signal(false, ...(ngDevMode ? [{ debugName: "classProgramTermsLoading" }] : []));
+    programTermSectionsLoading = signal(false, ...(ngDevMode ? [{ debugName: "programTermSectionsLoading" }] : []));
+    selectedClassProgram = signal(null, ...(ngDevMode ? [{ debugName: "selectedClassProgram" }] : []));
+    hasSections = signal(false, ...(ngDevMode ? [{ debugName: "hasSections" }] : []));
+    isProcessingInitialValues = false;
+    // FormControl getters
+    getClassProgramControl() {
+        return this.formGroup().get(this.classProgramControlName());
+    }
+    getBranchControl() {
+        return this.formGroup().get(this.branchControlName());
+    }
+    getTermControl() {
+        return this.formGroup().get(this.termControlName());
+    }
+    getSectionControl() {
+        return this.formGroup().get(this.sectionControlName());
+    }
+    // Computed signals
+    classProgramOptions = computed(() => {
+        return this.classProgramMasters().map(cp => ({
+            value: cp._id || '',
+            label: cp.acacpm_alise_title || ''
+        }));
+    }, ...(ngDevMode ? [{ debugName: "classProgramOptions" }] : []));
+    showBranchDropdown = computed(() => {
+        const program = this.selectedClassProgram();
+        if (!program)
+            return false;
+        const generalMaster = program.acacpm_class_program_id_sygms || program.acacpm_class_program_id_sygmt;
+        if (!generalMaster || typeof generalMaster !== 'object')
+            return false;
+        let config;
+        if ('sygms_configuration' in generalMaster) {
+            const configValue = generalMaster.sygms_configuration;
+            if (typeof configValue === 'string') {
+                try {
+                    config = JSON.parse(configValue);
+                }
+                catch {
+                    return false;
+                }
+            }
+            else if (typeof configValue === 'object' && configValue !== null) {
+                config = configValue;
+            }
+        }
+        return config?.branchType === true;
+    }, ...(ngDevMode ? [{ debugName: "showBranchDropdown" }] : []));
+    showTermDropdown = computed(() => {
+        const program = this.selectedClassProgram();
+        if (!program)
+            return false;
+        const generalMaster = program.acacpm_class_program_id_sygms || program.acacpm_class_program_id_sygmt;
+        if (!generalMaster || typeof generalMaster !== 'object')
+            return false;
+        let config;
+        if ('sygms_configuration' in generalMaster) {
+            const configValue = generalMaster.sygms_configuration;
+            if (typeof configValue === 'string') {
+                try {
+                    config = JSON.parse(configValue);
+                }
+                catch {
+                    return false;
+                }
+            }
+            else if (typeof configValue === 'object' && configValue !== null) {
+                config = configValue;
+            }
+        }
+        // If termType is explicitly false, don't show the dropdown
+        if (config?.termType === false) {
+            return false;
+        }
+        // Special case: Hide dropdown if termType=true, termLevelUpTo=1, and termProgramLevelOneConnected=true
+        if (config?.termType === true &&
+            config?.termLevelUpTo === 1 &&
+            config?.termProgramLevelOneConnected === true) {
+            return false;
+        }
+        // Check for both termType (current) and semesterType (legacy) for backward compatibility
+        return config?.termType === true || config?.semesterType === true;
+    }, ...(ngDevMode ? [{ debugName: "showTermDropdown" }] : []));
+    constructor() {
+        // Effect to emit values when form changes
+        effect(() => {
+            const form = this.formGroup();
+            if (form) {
+                const classProgramId = form.get(this.classProgramControlName())?.value;
+                const branchId = form.get(this.branchControlName())?.value;
+                const termId = form.get(this.termControlName())?.value;
+                const sectionId = form.get(this.sectionControlName())?.value;
+                this.valuesChange.emit({
+                    classProgramId: classProgramId || null,
+                    branchId: branchId || null,
+                    termId: termId || null,
+                    sectionId: sectionId || null
+                });
+            }
+        });
+    }
+    ngOnInit() {
+        this.loadClassProgramMasters();
+        this.setupFormListeners();
+        // Check for initial values in the form and load cascading options
+        // Use setTimeout to ensure form is ready
+        setTimeout(() => {
+            this.handleInitialValues();
+        }, 0);
+        // Also watch for form value changes to handle values set after component initialization
+        const form = this.formGroup();
+        if (form) {
+            // Watch for class program value being set
+            form.get(this.classProgramControlName())?.valueChanges
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => {
+                // If class program is set but we haven't processed initial values yet, process them
+                const classProgramId = form.get(this.classProgramControlName())?.value;
+                if (classProgramId && this.classProgramMasters().length > 0 && !this.selectedClassProgram()) {
+                    // Form value was set, but we haven't processed it yet - process now
+                    setTimeout(() => {
+                        this.handleInitialValues();
+                    }, 100);
+                }
+            });
+        }
+    }
+    handleInitialValues() {
+        const form = this.formGroup();
+        if (!form)
+            return;
+        const classProgramId = form.get(this.classProgramControlName())?.value;
+        if (!classProgramId)
+            return;
+        // Set flag to prevent clearing values during initial load
+        this.isProcessingInitialValues = true;
+        // Wait for class programs to load, then process initial values
+        const checkInterval = setInterval(() => {
+            if (this.classProgramMasters().length > 0) {
+                clearInterval(checkInterval);
+                // Find the selected program
+                const selectedProgram = this.classProgramMasters().find(cp => cp._id === classProgramId);
+                if (selectedProgram) {
+                    this.selectedClassProgram.set(selectedProgram);
+                    // Read config directly from the program to determine what to show
+                    const generalMaster = selectedProgram.acacpm_class_program_id_sygms || selectedProgram.acacpm_class_program_id_sygmt;
+                    let config;
+                    if (generalMaster && typeof generalMaster === 'object') {
+                        if ('sygms_configuration' in generalMaster) {
+                            const configValue = generalMaster.sygms_configuration;
+                            if (typeof configValue === 'string') {
+                                try {
+                                    config = JSON.parse(configValue);
+                                }
+                                catch {
+                                    console.warn('Failed to parse config:', configValue);
+                                }
+                            }
+                            else if (typeof configValue === 'object' && configValue !== null) {
+                                config = configValue;
+                            }
+                        }
+                    }
+                    // Wait a tick for computed signals to update
+                    setTimeout(() => {
+                        const branchId = form.get(this.branchControlName())?.value;
+                        const termId = form.get(this.termControlName())?.value;
+                        const sectionId = form.get(this.sectionControlName())?.value;
+                        // Load branches if config says so AND we have a branch ID
+                        const shouldShowBranch = config?.branchType === true;
+                        if (shouldShowBranch) {
+                            this.loadClassProgramBranches(classProgramId);
+                            // Wait for branches to load
+                            if (branchId) {
+                                const branchCheckInterval = setInterval(() => {
+                                    if (this.classProgramBranches().length > 0 || !this.classProgramBranchesLoading()) {
+                                        clearInterval(branchCheckInterval);
+                                        // Branch value is already set, now load terms
+                                        this.loadClassProgramTerms(classProgramId, branchId);
+                                        // Wait for terms to load
+                                        if (termId) {
+                                            const termCheckInterval = setInterval(() => {
+                                                if (this.classProgramTerms().length > 0 || !this.classProgramTermsLoading()) {
+                                                    clearInterval(termCheckInterval);
+                                                    // Term value is already set, now load sections
+                                                    if (sectionId) {
+                                                        this.loadProgramTermSections(termId);
+                                                    }
+                                                }
+                                            }, 100);
+                                            setTimeout(() => clearInterval(termCheckInterval), 5000);
+                                        }
+                                    }
+                                }, 100);
+                                setTimeout(() => clearInterval(branchCheckInterval), 5000);
+                            }
+                            else {
+                                // No branch ID but should show branch dropdown - load terms after branches load
+                                const branchCheckInterval = setInterval(() => {
+                                    if (!this.classProgramBranchesLoading()) {
+                                        clearInterval(branchCheckInterval);
+                                        if (termId) {
+                                            this.loadClassProgramTerms(classProgramId, undefined);
+                                            if (sectionId) {
+                                                const termCheckInterval = setInterval(() => {
+                                                    if (this.classProgramTerms().length > 0 || !this.classProgramTermsLoading()) {
+                                                        clearInterval(termCheckInterval);
+                                                        this.loadProgramTermSections(termId);
+                                                    }
+                                                }, 100);
+                                                setTimeout(() => clearInterval(termCheckInterval), 5000);
+                                            }
+                                        }
+                                    }
+                                }, 100);
+                                setTimeout(() => clearInterval(branchCheckInterval), 5000);
+                            }
+                        }
+                        else {
+                            // No branch dropdown, load terms directly if config allows
+                            const shouldShowTerm = config?.termType === true || config?.semesterType === true;
+                            if (shouldShowTerm && termId) {
+                                this.loadClassProgramTerms(classProgramId, undefined);
+                                // Wait for terms to load, then load sections
+                                if (sectionId) {
+                                    const termCheckInterval = setInterval(() => {
+                                        if (this.classProgramTerms().length > 0 || !this.classProgramTermsLoading()) {
+                                            clearInterval(termCheckInterval);
+                                            this.loadProgramTermSections(termId);
+                                        }
+                                    }, 100);
+                                    setTimeout(() => clearInterval(termCheckInterval), 5000);
+                                }
+                            }
+                        }
+                    }, 0);
+                }
+            }
+        }, 100);
+        // Timeout after 5 seconds
+        setTimeout(() => {
+            clearInterval(checkInterval);
+            // Reset flag after processing is complete
+            this.isProcessingInitialValues = false;
+        }, 5000);
+    }
+    ngOnDestroy() {
+        // Cleanup handled by takeUntilDestroyed
+    }
+    setupFormListeners() {
+        const form = this.formGroup();
+        if (!form)
+            return;
+        // Listen for class program selection changes
+        form.get(this.classProgramControlName())?.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(classProgramId => {
+            this.onClassProgramChange(classProgramId);
+        });
+        // Listen for branch selection changes
+        form.get(this.branchControlName())?.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(branchId => {
+            this.onBranchChange(branchId);
+        });
+        // Listen for term selection changes
+        form.get(this.termControlName())?.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(termId => {
+            this.onTermChange(termId);
+        });
+    }
+    loadClassProgramMasters() {
+        this.classProgramMastersLoading.set(true);
+        const academicYearId = this.academicYearId();
+        const entityId = this.entityId();
+        const showAll = this.showAllPrograms();
+        const includeInactive = this.includeInactive();
+        // Build payload - only include filters if not showing all programs
+        const payload = {
+            pagination: false
+        };
+        // Only add academic year filter if not showing all programs and academic year is provided
+        if (!showAll && academicYearId) {
+            payload['acacpm_academic_year_id_acayr'] = academicYearId;
+        }
+        // Only add entity filter if not showing all programs and entity is provided
+        if (!showAll && entityId) {
+            payload['acacpm_entity_id_syen'] = entityId;
+        }
+        // Only add active filter if not including inactive programs
+        if (!includeInactive) {
+            payload['acacpm_isactive'] = true;
+        }
+        this.classProgramService.searchClassProgramMasters(payload).subscribe({
+            next: (response) => {
+                if (response?.success && response.data) {
+                    const dataArray = Array.isArray(response.data) ? response.data : [];
+                    this.classProgramMasters.set(dataArray);
+                    console.log(`✅ Loaded ${dataArray.length} class programs`, {
+                        showAll,
+                        includeInactive,
+                        academicYearId,
+                        entityId,
+                        filters: payload
+                    });
+                }
+                else {
+                    this.classProgramMasters.set([]);
+                    console.warn('⚠️ No class programs found', response);
+                }
+                this.classProgramMastersLoading.set(false);
+            },
+            error: (response) => {
+                console.error('❌ Error loading class programs:', response);
+                const errorMessage = response?.error?.message;
+                if (errorMessage) {
+                    this.notificationService.error(errorMessage);
+                }
+                this.classProgramMasters.set([]);
+                this.classProgramMastersLoading.set(false);
+            }
+        });
+    }
+    onClassProgramSearch(event) {
+        this.classProgramMastersLoading.set(true);
+        const academicYearId = this.academicYearId();
+        const entityId = this.entityId();
+        const showAll = this.showAllPrograms();
+        const includeInactive = this.includeInactive();
+        // Build payload for search
+        const payload = {
+            query: event.query || "",
+            acacpm_id: event.value ? String(event.value) : "",
+            pagination: false
+        };
+        // Only add academic year filter if not showing all programs and academic year is provided
+        if (!showAll && academicYearId) {
+            payload['acacpm_academic_year_id_acayr'] = academicYearId;
+        }
+        // Only add entity filter if not showing all programs and entity is provided
+        if (!showAll && entityId) {
+            payload['acacpm_entity_id_syen'] = entityId;
+        }
+        // Only add active filter if not including inactive programs
+        if (!includeInactive) {
+            payload['acacpm_isactive'] = true;
+        }
+        this.classProgramService.searchClassProgramMasters(payload).subscribe({
+            next: (response) => {
+                if (response?.success && response.data) {
+                    const dataArray = Array.isArray(response.data) ? response.data : [];
+                    this.classProgramMasters.set(dataArray);
+                }
+                else {
+                    this.classProgramMasters.set([]);
+                }
+                this.classProgramMastersLoading.set(false);
+            },
+            error: () => {
+                this.classProgramMasters.set([]);
+                this.classProgramMastersLoading.set(false);
+            }
+        });
+    }
+    onClassProgramChange(classProgramId) {
+        // Clear previous selections state
+        this.selectedClassProgram.set(null);
+        this.classProgramBranches.set([]);
+        this.classProgramTerms.set([]);
+        this.programTermSections.set([]);
+        if (!classProgramId) {
+            // Clear all dependent values if no class program selected
+            const form = this.formGroup();
+            if (form) {
+                form.patchValue({
+                    [this.branchControlName()]: '',
+                    [this.termControlName()]: '',
+                    [this.sectionControlName()]: ''
+                }, { emitEvent: false });
+            }
+            return;
+        }
+        // Find the selected program from the list
+        const selectedProgram = this.classProgramMasters().find(cp => cp._id === classProgramId);
+        if (!selectedProgram) {
+            return;
+        }
+        this.selectedClassProgram.set(selectedProgram);
+        const form = this.formGroup();
+        if (!form)
+            return;
+        // Get current form values before loading options
+        const currentBranchId = form.get(this.branchControlName())?.value;
+        const currentTermId = form.get(this.termControlName())?.value;
+        const currentSectionId = form.get(this.sectionControlName())?.value;
+        // Load branches if branchType is true
+        if (this.showBranchDropdown()) {
+            this.loadClassProgramBranches(classProgramId);
+            // After branches load, check if current branch value is valid
+            const branchCheckInterval = setInterval(() => {
+                if (!this.classProgramBranchesLoading()) {
+                    clearInterval(branchCheckInterval);
+                    // Check if current branch value exists in loaded branches
+                    const branchExists = currentBranchId &&
+                        this.classProgramBranches().some(b => b.value === currentBranchId);
+                    if (!branchExists && currentBranchId) {
+                        // Current branch value is not in the list, clear it
+                        form.patchValue({
+                            [this.branchControlName()]: ''
+                        }, { emitEvent: false });
+                    }
+                    // Load terms with the branch (or without if branch was cleared)
+                    const branchIdToUse = branchExists ? currentBranchId : undefined;
+                    if (this.showTermDropdown()) {
+                        this.loadClassProgramTerms(classProgramId, branchIdToUse);
+                        // After terms load, check if current term value is valid
+                        const termCheckInterval = setInterval(() => {
+                            if (!this.classProgramTermsLoading()) {
+                                clearInterval(termCheckInterval);
+                                // Check if current term value exists in loaded terms
+                                const termExists = currentTermId &&
+                                    this.classProgramTerms().some(t => t.value === currentTermId);
+                                if (!termExists && currentTermId) {
+                                    // Current term value is not in the list, clear it
+                                    form.patchValue({
+                                        [this.termControlName()]: ''
+                                    }, { emitEvent: false });
+                                    // Also clear section if term is cleared
+                                    form.patchValue({
+                                        [this.sectionControlName()]: ''
+                                    }, { emitEvent: false });
+                                }
+                                else if (termExists && currentSectionId) {
+                                    // Term is valid, load sections
+                                    this.loadProgramTermSections(currentTermId);
+                                    // After sections load, check if current section value is valid
+                                    const sectionCheckInterval = setInterval(() => {
+                                        if (!this.programTermSectionsLoading()) {
+                                            clearInterval(sectionCheckInterval);
+                                            // Check if current section value exists in loaded sections
+                                            const sectionExists = this.programTermSections().some(s => s.value === currentSectionId);
+                                            if (!sectionExists) {
+                                                // Current section value is not in the list, clear it
+                                                form.patchValue({
+                                                    [this.sectionControlName()]: ''
+                                                }, { emitEvent: false });
+                                            }
+                                        }
+                                    }, 100);
+                                    setTimeout(() => clearInterval(sectionCheckInterval), 5000);
+                                }
+                            }
+                        }, 100);
+                        setTimeout(() => clearInterval(termCheckInterval), 5000);
+                    }
+                }
+            }, 100);
+            setTimeout(() => clearInterval(branchCheckInterval), 5000);
+        }
+        else {
+            // If no branch dropdown but term dropdown should be shown, load terms directly
+            if (this.showTermDropdown()) {
+                this.loadClassProgramTerms(classProgramId, undefined);
+                // After terms load, check if current term value is valid
+                const termCheckInterval = setInterval(() => {
+                    if (!this.classProgramTermsLoading()) {
+                        clearInterval(termCheckInterval);
+                        // Check if current term value exists in loaded terms
+                        const termExists = currentTermId &&
+                            this.classProgramTerms().some(t => t.value === currentTermId);
+                        if (!termExists && currentTermId) {
+                            // Current term value is not in the list, clear it
+                            form.patchValue({
+                                [this.termControlName()]: ''
+                            }, { emitEvent: false });
+                            // Also clear section if term is cleared
+                            form.patchValue({
+                                [this.sectionControlName()]: ''
+                            }, { emitEvent: false });
+                        }
+                        else if (termExists && currentSectionId) {
+                            // Term is valid, load sections
+                            this.loadProgramTermSections(currentTermId);
+                            // After sections load, check if current section value is valid
+                            const sectionCheckInterval = setInterval(() => {
+                                if (!this.programTermSectionsLoading()) {
+                                    clearInterval(sectionCheckInterval);
+                                    // Check if current section value exists in loaded sections
+                                    const sectionExists = this.programTermSections().some(s => s.value === currentSectionId);
+                                    if (!sectionExists) {
+                                        // Current section value is not in the list, clear it
+                                        form.patchValue({
+                                            [this.sectionControlName()]: ''
+                                        }, { emitEvent: false });
+                                    }
+                                }
+                            }, 100);
+                            setTimeout(() => clearInterval(sectionCheckInterval), 5000);
+                        }
+                    }
+                }, 100);
+                setTimeout(() => clearInterval(termCheckInterval), 5000);
+            }
+        }
+    }
+    loadClassProgramBranches(classProgramId) {
+        this.classProgramBranchesLoading.set(true);
+        const payload = new AcaClassPrgBranchListPayload({
+            acabrn_class_program_id_acacpm: classProgramId,
+            pagination: false
+        });
+        const query = generateStringFromObject(payload);
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.classProgramBranch,
+            query
+        ]);
+        this.http.get(url).subscribe({
+            next: (response) => {
+                if (response?.success && response?.data) {
+                    const branches = Array.isArray(response.data) ? response.data : [];
+                    this.classProgramBranches.set(branches.map((branch) => ({
+                        value: branch._id || '',
+                        label: branch.acabrn_name || branch.acabrn_code || ''
+                    })));
+                }
+                else {
+                    this.classProgramBranches.set([]);
+                }
+                this.classProgramBranchesLoading.set(false);
+            },
+            error: (response) => {
+                console.error('Error loading branches:', response);
+                const errorMessage = response?.error?.message;
+                if (errorMessage) {
+                    this.notificationService.error(errorMessage);
+                }
+                this.classProgramBranches.set([]);
+                this.classProgramBranchesLoading.set(false);
+            }
+        });
+    }
+    onBranchChange(branchId) {
+        this.classProgramTerms.set([]);
+        this.programTermSections.set([]);
+        const form = this.formGroup();
+        if (form) {
+            form.patchValue({
+                [this.termControlName()]: '',
+                [this.sectionControlName()]: ''
+            }, { emitEvent: false });
+        }
+        const classProgramId = form?.get(this.classProgramControlName())?.value;
+        if (classProgramId && this.showTermDropdown()) {
+            this.loadClassProgramTerms(classProgramId, branchId || undefined);
+        }
+    }
+    loadClassProgramTerms(classProgramId, branchId) {
+        this.classProgramTermsLoading.set(true);
+        const payload = {
+            acapt_class_program_id_acacpm: classProgramId,
+            acapt_class_prg_branch_acabrn: branchId || undefined,
+            pagination: false
+        };
+        const query = generateStringFromObject(payload);
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.classProgramTerm,
+            query
+        ]);
+        this.http.get(url)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                if (response?.success && response?.data) {
+                    const terms = Array.isArray(response.data) ? response.data : [];
+                    // Transform to SelectOption format with parent field for tree view
+                    const options = terms.map((term) => {
+                        // Normalize parent field for tree view compatibility
+                        let parentId = '';
+                        if (term.acapt_parent_class_prog_term_acapt) {
+                            if (typeof term.acapt_parent_class_prog_term_acapt === 'object') {
+                                parentId = term.acapt_parent_class_prog_term_acapt._id || '';
+                            }
+                            else if (typeof term.acapt_parent_class_prog_term_acapt === 'string') {
+                                parentId = term.acapt_parent_class_prog_term_acapt || '';
+                            }
+                        }
+                        return {
+                            value: term._id || '',
+                            label: term.acapt_name || term.acapt_code || '',
+                            _id: term._id || '',
+                            acapt_parent_class_prog_term_acapt: parentId
+                        };
+                    });
+                    this.classProgramTerms.set(options);
+                }
+                else {
+                    this.classProgramTerms.set([]);
+                }
+                this.classProgramTermsLoading.set(false);
+            },
+            error: (response) => {
+                console.error('Error loading program terms:', response);
+                const errorMessage = response?.error?.message;
+                if (errorMessage) {
+                    this.notificationService.error(errorMessage);
+                }
+                this.classProgramTerms.set([]);
+                this.classProgramTermsLoading.set(false);
+            }
+        });
+    }
+    onTermChange(termId) {
+        this.programTermSections.set([]);
+        const form = this.formGroup();
+        if (form) {
+            form.patchValue({
+                [this.sectionControlName()]: ''
+            }, { emitEvent: false });
+        }
+        if (termId) {
+            this.loadProgramTermSections(termId);
+        }
+        else {
+            this.hasSections.set(false);
+            const sectionControl = form?.get(this.sectionControlName());
+            if (sectionControl) {
+                sectionControl.clearValidators();
+                sectionControl.updateValueAndValidity();
+            }
+        }
+    }
+    loadProgramTermSections(termId) {
+        this.programTermSectionsLoading.set(true);
+        const payload = new MPrgTrmSection({
+            acapts_parent_class_prog_term_acapt: termId,
+            pagination: false,
+            pageIndex: 0,
+            pageSize: 1000,
+            query: "",
+            sort: {
+                key: 'acapts_name',
+                order: 'asc'
+            }
+        });
+        const query = generateStringFromObject(payload);
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.programTermSection,
+            query
+        ]);
+        this.http.get(url)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                if (response?.success && response?.data) {
+                    const sections = Array.isArray(response.data) ? response.data : [];
+                    const hasSections = sections.length > 0;
+                    this.hasSections.set(hasSections);
+                    if (hasSections) {
+                        this.programTermSections.set(sections.map(section => ({
+                            value: section._id || '',
+                            label: section.acapts_name || section.acapts_code || ''
+                        })));
+                        const form = this.formGroup();
+                        const sectionControl = form?.get(this.sectionControlName());
+                        if (sectionControl) {
+                            sectionControl.setValidators([Validators.required]);
+                            sectionControl.updateValueAndValidity();
+                        }
+                    }
+                    else {
+                        this.programTermSections.set([]);
+                        const form = this.formGroup();
+                        const sectionControl = form?.get(this.sectionControlName());
+                        if (sectionControl) {
+                            sectionControl.clearValidators();
+                            sectionControl.updateValueAndValidity();
+                        }
+                    }
+                }
+                else {
+                    this.hasSections.set(false);
+                    this.programTermSections.set([]);
+                    const form = this.formGroup();
+                    const sectionControl = form?.get(this.sectionControlName());
+                    if (sectionControl) {
+                        sectionControl.clearValidators();
+                        sectionControl.updateValueAndValidity();
+                    }
+                }
+                this.programTermSectionsLoading.set(false);
+            },
+            error: (response) => {
+                console.error('Error loading sections:', response);
+                const errorMessage = response?.error?.message;
+                if (errorMessage) {
+                    this.notificationService.error(errorMessage);
+                }
+                this.hasSections.set(false);
+                this.programTermSections.set([]);
+                const form = this.formGroup();
+                const sectionControl = form?.get(this.sectionControlName());
+                if (sectionControl) {
+                    sectionControl.clearValidators();
+                    sectionControl.updateValueAndValidity();
+                }
+                this.programTermSectionsLoading.set(false);
+            }
+        });
+    }
+    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", "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: [{
+            type: Component,
+            args: [{ selector: 'cide-shared-program-section-selector', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        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: () => [] });
+
 /*
  * Public API Surface of cloud-ide-shared
  */
@@ -890,5 +1699,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ACADEMIC_YEAR_SERVICE_TOKEN, APP_STATE_SERVICE_TOKEN, AUTH_SERVICE_TOKEN, CLASS_PROGRAM_MASTER_SERVICE_TOKEN, COUNTRY_SERVICE_TOKEN, CideCoreGeneralMasterService, CideCoreGeneralMasterTypeService, CideSharedOrgStructureComponent, CloudIdeShared, ENTITY_SERVICE_TOKEN, FINANCIAL_YEAR_SERVICE_TOKEN, NATIONALITY_SERVICE_TOKEN, PIN_CODE_SERVICE_TOKEN, SharedObjectIdService, USER_SERVICE_TOKEN, authGuard };
+export { ACADEMIC_YEAR_SERVICE_TOKEN, APP_STATE_SERVICE_TOKEN, AUTH_SERVICE_TOKEN, CLASS_PROGRAM_MASTER_SERVICE_TOKEN, COUNTRY_SERVICE_TOKEN, CideCoreGeneralMasterService, CideCoreGeneralMasterTypeService, CideSharedOrgStructureComponent, CideSharedProgramSectionSelectorComponent, CloudIdeShared, ENTITY_SERVICE_TOKEN, FEE_PAYMENT_SERVICE_TOKEN, FEE_STRUCTURE_SERVICE_TOKEN, FINANCIAL_YEAR_SERVICE_TOKEN, NATIONALITY_SERVICE_TOKEN, PIN_CODE_SERVICE_TOKEN, PROGRAM_TERM_SECTION_SERVICE_TOKEN, SharedObjectIdService, USER_SERVICE_TOKEN, authGuard };
 //# sourceMappingURL=cloud-ide-shared.mjs.map