cloud-ide-shared 1.0.45 → 1.0.50

package/fesm2022/cloud-ide-shared.mjs

@@ -551,166 +551,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
-class CideCoreGeneralMasterService {
-    http = inject(HttpClient);
-    generalMasterListSubject = new BehaviorSubject([]);
-    generalMasterList$ = this.generalMasterListSubject.asObservable();
-    constructor() {
-        console.log('CideCoreGeneralMasterService initialized - using real API');
-    }
-    /**
-     * Get general master list from API
-     */
-    getMasterList(payload) {
-        const query = generateStringFromObject(payload);
-        return this.http?.get(cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.generalMaster, query]))
-            .pipe(tap((response) => {
-            if (response?.success) {
-                this.generalMasterListSubject.next(response?.data || []);
-            }
-        }), catchError(error => {
-            console.error('CideCoreGeneralMasterService API error:', error);
-            return this.handleError(error);
-        }));
-    }
-    /**
-     * Get general master list from cache (if available)
-     */
-    getMasterListFromCache() {
-        return this.generalMasterListSubject.value;
-    }
-    /**
-     * Save general master (create or update)
-     * POST ${coreRoutesUrl?.generalMaster} - payload: ICoreSygms, response: generalMasterInsertUpdateControllerResponse
-     */
-    saveMaster(master) {
-        const isUpdate = !!master._id;
-        console.log(`${isUpdate ? 'Updating' : 'Creating'} general master:`, master);
-        // Create proper payload
-        const payload = {
-            ...(master._id && { _id: master._id }), // Only include _id if it exists
-            sygms_code: master.sygms_code,
-            sygms_id_sygmt: master.sygms_id_sygmt,
-            sygms_title: master.sygms_title,
-            sygms_desc: master.sygms_desc,
-            sygms_isactive: master.sygms_isactive,
-            sygms_id_sygms: master.sygms_id_sygms,
-            sygms_configuration: master.sygms_configuration,
-            sygms_entity_id_syen: master.sygms_entity_id_syen
-        };
-        const url = cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.generalMaster]);
-        return this.http.post(url, payload)
-            .pipe(tap((response) => {
-            if (response.success) {
-                this.refreshMasterList();
-            }
-        }), catchError(this.handleError));
-    }
-    /**
-     * Create new general master (backward compatibility)
-     */
-    createMaster(master) {
-        return this.saveMaster(master);
-    }
-    /**
-     * Update existing general master (backward compatibility)
-     */
-    updateMaster(id, master) {
-        return this.saveMaster({ ...master, _id: id });
-    }
-    /**
-     * Get general master by ID
-     * GET ${coreRoutesUrl?.generalMaster}/byId/:query - payload: { sygms_id: string }, response: generalMasterByIdControllerResponse
-     */
-    getMasterById(id) {
-        console.log('Getting general master by ID:', id);
-        const payload = { sygms_id: id };
-        const query = generateStringFromObject(payload);
-        const url = cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.generalMaster, 'byId', query]);
-        return this.http.get(url)
-            .pipe(catchError(this.handleError));
-    }
-    /**
-     * Delete general master
-     * DELETE ${coreRoutesUrl?.generalMaster}/:query - payload: { sygms_id: string }, response: generalMasterDeleteControllerResponse
-     */
-    deleteMaster(id) {
-        const payload = { sygms_id: id };
-        const query = generateStringFromObject(payload);
-        const url = cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.generalMaster, query]);
-        return this.http.delete(url)
-            .pipe(tap((response) => {
-            if (response.success) {
-                this.refreshMasterList();
-            }
-        }), catchError(this.handleError));
-    }
-    /**
-     * Toggle general master active status
-     */
-    toggleMasterStatus(id) {
-        console.log('Toggling general master status:', id);
-        const payload = { id };
-        const query = generateStringFromObject(payload);
-        const url = cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.generalMaster, query]);
-        return this.http.put(url, {})
-            .pipe(tap((response) => {
-            if (response.success) {
-                this.refreshMasterList();
-            }
-        }), catchError(this.handleError));
-    }
-    /**
-     * Check if master code exists
-     */
-    checkMasterCodeExists(code, typeId, excludeId) {
-        const payload = { code, typeId };
-        if (excludeId) {
-            payload['excludeId'] = excludeId;
-        }
-        const query = generateStringFromObject(payload);
-        const url = cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.generalMaster, 'checkCodeExists', query]);
-        return this.http.get(url)
-            .pipe(catchError(this.handleError));
-    }
-    /**
-     * Refresh general master list from server
-     */
-    refreshMasterList() {
-        const defaultPayload = {};
-        this.getMasterList(defaultPayload).subscribe({
-            next: () => {
-                console.log('General master list refreshed successfully');
-            },
-            error: (error) => {
-                console.error('Error refreshing general master list:', error);
-            }
-        });
-    }
-    /**
-     * Handle errors
-     */
-    handleError(error) {
-        let errorMessage = 'An error occurred';
-        if (error instanceof Error) {
-            errorMessage = error.message;
-        }
-        else if (typeof error === 'string') {
-            errorMessage = error;
-        }
-        console.error('General Master Service Error:', errorMessage);
-        return throwError(() => new Error(errorMessage));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGeneralMasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGeneralMasterService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGeneralMasterService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
 /**
  * Injection token for General Master Service (CideCoreGeneralMasterService)
  * Used to provide and inject general master service implementations
@@ -1091,7 +931,7 @@ class CideSharedOrgStructureComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideSharedOrgStructureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideSharedOrgStructureComponent, isStandalone: true, selector: "cide-shared-org-structure", inputs: { allowSwitching: { classPropertyName: "allowSwitching", publicName: "allowSwitching", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { entityClick: "entityClick", entitySelect: "entitySelect", entityView: "entityView" }, ngImport: i0, template: "<!-- Organization Structure Component -->\n<div class=\"tw-flex-1 tw-overflow-hidden !tw-h-full\">\n  @if (loading()) {\n  <div class=\"tw-flex tw-items-center !tw-h-full tw-justify-center tw-py-12\">\n    <cide-ele-spinner size=\"md\"></cide-ele-spinner>\n    <span class=\"tw-ml-3 tw-text-gray-600 tw-text-sm\">Loading organization structure...</span>\n  </div>\n  } @else if (error()) {\n  <div class=\"tw-text-center tw-py-12\">\n    <div class=\"tw-w-16 tw-h-16 tw-bg-red-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n      <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-red-500\">error</cide-ele-icon>\n    </div>\n    <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">Error Loading Structure</h3>\n    <p class=\"tw-text-gray-600 tw-mb-4\">{{ error() }}</p>\n    <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"loadOrgStructure()\">\n      <cide-ele-icon>refresh</cide-ele-icon>\n      Try Again\n    </button>\n  </div>\n  } @else if (orgStructure().length === 0) {\n  <div class=\"tw-text-center tw-py-12\">\n    <div class=\"tw-w-16 tw-h-16 tw-bg-gray-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n      <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400\">account_tree</cide-ele-icon>\n    </div>\n    <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">No Entities Found</h3>\n    <p class=\"tw-text-gray-600 tw-mb-4\">No entities are available to display in the organization structure.</p>\n    @if (mode() === 'view') {\n    <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"router.navigate(['/control-panel/entity-list'])\">\n      <cide-ele-icon>add</cide-ele-icon>\n      Create First Entity\n    </button>\n    }\n  </div>\n  } @else {\n  <!-- Organization Chart Container -->\n  <div class=\"tw-relative tw-h-full tw-bg-gray-50 tw-py-8 org-chart-container\">\n    <!-- Chart Content with Background Pattern -->\n    <div class=\"tw-relative tw-z-10 tw-min-w-max tw-px-4 org-chart-content org-chart-content-with-bg\">\n      @for (rootNode of orgStructure(); track rootNode._id) {\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-mb-12\">\n        <!-- Render node recursively with unlimited depth -->\n        <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rootNode, level: 0 }\"></ng-container>\n      </div>\n      }\n    </div>\n  </div>\n  }\n</div>\n\n<!-- Entity Node Template (Recursive) -->\n<ng-template #entityNodeTemplate let-node let-level=\"level\">\n  <div class=\"tw-flex tw-flex-col tw-items-center\">\n    \n    <!-- Entity Card -->\n    <div class=\"tw-bg-white tw-shadow-lg tw-rounded-lg tw-p-4 tw-w-64 tw-max-w-72 tw-border-t-4 tw-transition-all tw-cursor-pointer hover:tw-shadow-xl hover:tw-scale-105 entity-card\"\n         [class.level-0]=\"level === 0\"\n         [class.level-1]=\"level === 1\"\n         [class.level-2]=\"level === 2\"\n         [class.level-3]=\"level === 3\"\n         [class.level-4]=\"level === 4\"\n         [class.level-5]=\"level === 5\"\n         (click)=\"viewEntity(node._id)\">\n      \n      <!-- Card Content -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <!-- Avatar -->\n        <div class=\"tw-w-12 tw-h-12 tw-bg-purple-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-flex-shrink-0\">\n          <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-purple-600\">person</cide-ele-icon>\n        </div>\n        \n        <!-- Entity Info -->\n        <div class=\"tw-flex-1 tw-min-w-0\">\n          <h3 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\" \n              [cideEleTooltip]=\"node.syen_name || ''\" \n              [tooltipPlacement]=\"'top'\"\n              [tooltipType]=\"'default'\">{{ node.syen_name }}</h3>\n          <p class=\"tw-text-xs tw-text-gray-600 tw-mt-1\">{{ node.syen_entity_code }}</p>\n          <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ node.syen_entity_type_sygms }}</p>\n        </div>\n      </div>\n      \n      <!-- Action Icons -->\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-mt-3\">\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <!-- Phone Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">phone</cide-ele-icon>\n          </button>\n          \n          <!-- Email Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">email</cide-ele-icon>\n          </button>\n          \n          <!-- LinkedIn Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-text-blue-600 hover:tw-bg-blue-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">attach_money</cide-ele-icon>\n          </button>\n          \n          <!-- Document Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">description</cide-ele-icon>\n          </button>\n          \n          <!-- More Options Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">more_horiz</cide-ele-icon>\n          </button>\n        </div>\n        \n        <!-- Status Badge -->\n        <div class=\"tw-flex-shrink-0\">\n          @if (node.syen_isactive) {\n          <div class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n            <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-green-500 tw-rounded-full tw-mr-1\"></div>\n            Active\n          </div>\n          } @else {\n          <div class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800\">\n            <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-red-500 tw-rounded-full tw-mr-1\"></div>\n            Inactive\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n    \n    <!-- Children Entities (Recursive) -->\n    @if (node.children && node.children.length > 0) {\n    <!-- Connection Lines Container -->\n    <div class=\"tw-relative tw-flex tw-flex-col tw-items-center tw-mt-4\">\n      <!-- Connection dot at parent -->\n      <div class=\"tw-absolute tw-left-1/2 tw-transform tw--translate-x-1/2\" style=\"top: -8px;\">\n        <div class=\"tw-w-2 tw-h-2 tw-bg-purple-600 tw-rounded-full tw-border tw-border-white\"></div>\n      </div>\n      \n      <!-- Simplified Connection Lines -->\n      <div class=\"tw-relative tw-w-full tw-flex tw-justify-center\" style=\"min-height: 40px;\">\n        @if (node.children.length === 1) {\n        <!-- Single child - simple vertical line -->\n        <svg class=\"tw-absolute tw-left-1/2\" style=\"transform: translateX(-50%); width: 2px; height: 40px; top: 0;\">\n          <line x1=\"1\" y1=\"0\" x2=\"1\" y2=\"40\" stroke=\"#9333ea\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n        </svg>\n        }\n        @else {\n        <!-- Multiple children - use calculated positions -->\n        <svg class=\"tw-absolute\" [attr.width]=\"(node.children.length * 280) + 'px'\" \n             style=\"height: 40px; left: 50%; transform: translateX(-50%); top: 0; overflow: visible;\">\n          <!-- Vertical line from parent (centered) -->\n          <line [attr.x1]=\"(node.children.length * 280) / 2\" \n                y1=\"0\" \n                [attr.x2]=\"(node.children.length * 280) / 2\" \n                y2=\"15\" \n                stroke=\"#9333ea\" \n                stroke-width=\"2\" \n                stroke-linecap=\"round\"/>\n          \n          <!-- Horizontal line spanning children -->\n          <line [attr.x1]=\"140\" \n                y1=\"15\" \n                [attr.x2]=\"(node.children.length * 280) - 140\" \n                y2=\"15\" \n                stroke=\"#9333ea\" \n                stroke-width=\"2\" \n                stroke-linecap=\"round\"/>\n          \n          <!-- Vertical lines to each child -->\n          @for (child of node.children; track child._id; let i = $index) {\n          @let xPosition = 140 + (i * 280);\n          <line [attr.x1]=\"xPosition\" \n                y1=\"15\" \n                [attr.x2]=\"xPosition\" \n                y2=\"35\" \n                stroke=\"#9333ea\" \n                stroke-width=\"2\" \n                stroke-linecap=\"round\"/>\n          <!-- Connection dot -->\n          <circle [attr.cx]=\"xPosition\" cy=\"35\" r=\"2.5\" fill=\"#9333ea\" stroke=\"#fff\" stroke-width=\"1\"/>\n          }\n        </svg>\n        }\n      </div>\n      \n      <!-- Children Container - Flexible Layout -->\n      <div class=\"tw-flex tw-flex-wrap tw-justify-center tw-gap-4 tw-w-full tw-max-w-6xl tw-px-4 children-container\">\n        @for (child of node.children; track child._id) {\n        <div class=\"tw-flex tw-flex-col tw-items-center tw-flex-shrink-0\">\n          <!-- Child node -->\n          <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"></ng-container>\n        </div>\n        }\n      </div>\n    </div>\n    }\n  </div>\n</ng-template>\n", styles: [".org-chart-container{overflow-x:auto;overflow-y:auto;height:100%;position:relative}.org-chart-content{min-width:max-content;min-height:max-content;padding:2rem 1rem}.org-chart-content-with-bg{position:relative}.org-chart-content-with-bg:before{content:\"\";position:absolute;inset:0;opacity:.3;pointer-events:none;background-image:radial-gradient(circle,#e5e7eb 1px,transparent 1px);background-size:20px 20px;background-repeat:repeat;z-index:-1}.flexible-connection-lines{position:relative;width:100%;height:40px}.flexible-connection-lines svg{position:absolute;left:50%;transform:translate(-50%);width:100%;height:100%;top:0}.children-container{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;width:100%;max-width:80rem;padding:0 1rem}.children-container>div{flex-shrink:0;display:flex;flex-direction:column;align-items:center}.entity-card{width:16rem;max-width:18rem;transition:all .2s ease-in-out}.entity-card:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}@media (max-width: 1400px){.children-container{max-width:70rem;gap:.875rem}.entity-card{width:15rem;max-width:17rem}}@media (max-width: 1200px){.children-container{max-width:60rem;gap:.75rem}.entity-card{width:14rem;max-width:16rem}}@media (max-width: 992px){.children-container{max-width:50rem;gap:.625rem}.entity-card{width:13rem;max-width:15rem}}@media (max-width: 768px){.children-container{max-width:40rem;gap:.5rem}.entity-card{width:12rem;max-width:14rem}.org-chart-content{padding:1.5rem .75rem}}@media (max-width: 576px){.children-container{max-width:30rem;gap:.375rem}.entity-card{width:11rem;max-width:13rem}.org-chart-content{padding:1rem .5rem}}.tw-overflow-y-auto::-webkit-scrollbar{width:6px}.tw-overflow-y-auto::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.tw-overflow-y-auto::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.tw-overflow-y-auto::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tw-transition-shadow{transition:box-shadow .2s ease-in-out}.tw-shadow-lg:hover{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;transform:translateY(-2px);transition:all .2s ease-in-out}.tw-bg-purple-300,.tw-bg-purple-400{transition:all .3s ease-in-out}.connection-line-compact{display:block;overflow:visible}.connection-line-compact path,.connection-line-compact line{stroke-linecap:round;stroke-linejoin:round;transition:stroke-width .2s ease}.connection-line-compact:hover path,.connection-line-compact:hover line{stroke-width:3}.connection-line-compact circle{transition:all .2s ease}.connection-line-compact circle:hover{filter:drop-shadow(0 2px 4px rgba(147,51,234,.4))}.level-0{border-color:#fb923c!important}.level-1{border-color:#60a5fa!important}.level-2{border-color:#a78bfa!important}.level-3{border-color:#4ade80!important}.level-4{border-color:#818cf8!important}.level-5{border-color:#f472b6!important}@media (max-width: 1200px){.tw-max-w-7xl{max-width:100%}.tw-gap-6{gap:1rem}.tw-min-w-64{min-width:14rem}.tw-max-w-72{max-width:16rem}}@media (max-width: 768px){.tw-min-w-64{min-width:12rem}.tw-max-w-72{max-width:14rem}.tw-max-w-7xl{max-width:100%}.tw-gap-6{gap:.75rem}.tw-p-4{padding:.75rem}.tw-mb-4{margin-bottom:.75rem}.tw-space-x-3{gap:.5rem}.tw-space-x-2{gap:.375rem}.tw-w-12{width:2.5rem}.tw-h-12{height:2.5rem}}@media (max-width: 480px){.tw-min-w-72{min-width:12rem}.tw-max-w-80{max-width:14rem}.tw-p-4{padding:.5rem}.tw-space-x-3{gap:.375rem}.tw-space-x-2{gap:.25rem}.tw-mb-3{margin-bottom:.5rem}.tw-w-12{width:2rem}.tw-h-12{height:2rem}.tw-w-8{width:1.5rem}.tw-h-8{height:1.5rem}}@media print{.tw-bg-gray-50{background:#fff!important}.tw-shadow-lg{box-shadow:none!important;border:1px solid #e5e7eb!important}.tw-bg-purple-300{background:#6b7280!important}.tw-border-purple-300{border-color:#6b7280!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }, { kind: "directive", type: TooltipDirective, selector: "[cideEleTooltip]", inputs: ["cideEleTooltip", "tooltipColor", "tooltipBg", "tooltipPlacement", "tooltipType", "tooltipDelay", "tooltipDir", "tooltipShowArrow", "tooltipMultiline", "tooltipMaxWidth", "tooltipInteractive", "tooltipClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideSharedOrgStructureComponent, isStandalone: true, selector: "cide-shared-org-structure", inputs: { allowSwitching: { classPropertyName: "allowSwitching", publicName: "allowSwitching", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { entityClick: "entityClick", entitySelect: "entitySelect", entityView: "entityView" }, ngImport: i0, template: "<!-- Organization Structure Component -->\n<div class=\"tw-flex-1 tw-overflow-hidden !tw-h-full\">\n  @if (loading()) {\n  <div class=\"tw-flex tw-items-center !tw-h-full tw-justify-center tw-py-12\">\n    <cide-ele-spinner size=\"md\"></cide-ele-spinner>\n    <span class=\"tw-ml-3 tw-text-gray-600 tw-text-sm\">Loading organization structure...</span>\n  </div>\n  } @else if (error()) {\n  <div class=\"tw-text-center tw-py-12\">\n    <div\n      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\n      class=\"tw-w-16 tw-h-16 tw-bg-gray-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n      <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400\">account_tree</cide-ele-icon>\n    </div>\n    <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">No Entities Found</h3>\n    <p class=\"tw-text-gray-600 tw-mb-4\">No entities are available to display in the organization structure.</p>\n    @if (mode() === 'view') {\n    <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"router.navigate(['/control-panel/entity-list'])\">\n      <cide-ele-icon>add</cide-ele-icon>\n      Create First Entity\n    </button>\n    }\n  </div>\n  } @else {\n  <!-- Organization Chart Container -->\n  <div class=\"tw-relative tw-h-full tw-bg-gray-50 tw-py-8 org-chart-container\">\n    <!-- Chart Content with Background Pattern -->\n    <div class=\"tw-relative tw-z-10 tw-min-w-max tw-px-4 org-chart-content org-chart-content-with-bg\">\n      <div class=\"tree\">\n        @for (rootNode of orgStructure(); track rootNode._id) {\n        <!-- Root nodes don't need top lines, but using wrapper is fine as they are not inside .tree-children -->\n        <div class=\"tree-node-wrapper tw-mb-12\">\n          <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: rootNode, level: 0 }\"></ng-container>\n        </div>\n        }\n      </div>\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=\"tree-node-content\">\n\n    <!-- Entity Card -->\n    <div class=\"tw-bg-white tw-shadow-lg tw-rounded-lg tw-p-4 entity-card tw-border-t-4 tw-cursor-pointer\"\n      [class.level-0]=\"level === 0\" [class.level-1]=\"level === 1\" [class.level-2]=\"level === 2\"\n      [class.level-3]=\"level === 3\" [class.level-4]=\"level === 4\" [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\n          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\n            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 || ''\" [tooltipPlacement]=\"'top'\" [tooltipType]=\"'default'\">{{\n            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          <!-- Icons (unchanged) -->\n          <button\n            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          <button\n            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          <button\n            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          <button\n            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          <button\n            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\n            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\n            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    <!-- Connector line extending downwards from parent -->\n    @if (node.children && node.children.length > 0) {\n    <div class=\"min-h-connector\"></div>\n    }\n  </div>\n\n  <!-- Recursive Children Container -->\n  @if (node.children && node.children.length > 0) {\n  <div class=\"tree-children\">\n    @for (child of node.children; track child._id) {\n    <div class=\"tree-node-wrapper\">\n      <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"></ng-container>\n    </div>\n    }\n  </div>\n  }\n</ng-template>", styles: [".org-chart-container{overflow-x:auto;overflow-y:auto;height:100%;position:relative;display:flex;justify-content:center;padding-top:2rem}.org-chart-content{min-width:max-content;min-height:max-content;padding:0 1rem 4rem}.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}.tree{display:flex;flex-direction:column;align-items:center}.tree-children{display:flex;flex-direction:row;justify-content:center;position:relative}.tree-node-wrapper{display:flex;flex-direction:column;align-items:center;position:relative;padding:20px 1rem 0}.tree-node-wrapper:before{content:\"\";position:absolute;top:0;left:50%;border-left:2px solid #9333ea;width:0;height:20px;z-index:1}.tree-node-wrapper:after{content:\"\";position:absolute;top:0;right:50%;border-top:2px solid #9333ea;width:50%;height:20px;z-index:0}.tree-children>.tree-node-wrapper:before{height:20px}.tree-children>.tree-node-wrapper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:20px;border-top:2px solid #9333ea;border-left:0;right:auto}.tree-children>.tree-node-wrapper:first-child:after{left:50%;width:50%;border-top:2px solid #9333ea}.tree-children>.tree-node-wrapper:last-child:after{left:0;width:50%;border-top:2px solid #9333ea}.tree-children>.tree-node-wrapper:only-child:after{display:none}.tree-children>.tree-node-wrapper:only-child:before{height:20px}.tree-node-content{position:relative;z-index:2;margin-bottom:0}.min-h-connector{height:20px;width:2px;background-color:#9333ea;margin:0 auto}.entity-card{width:18rem;transition:all .2s ease-in-out;flex-shrink:0}.entity-card:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.connection-dot{width:6px;height:6px;background-color:#9333ea;border-radius:50%;position:absolute;top:-3px;left:50%;transform:translate(-50%);z-index:5}@media (max-width: 1400px){.entity-card{width:16rem}}@media (max-width: 1200px){.entity-card{width:14rem}}@media (max-width: 992px){.entity-card{width:13rem}}.level-0{border-top-color:#3b82f6!important}.level-1{border-top-color:#f59e0b!important}.level-2{border-top-color:#10b981!important}.level-3{border-top-color:#8b5cf6!important}.level-4{border-top-color:#ef4444!important}.level-5{border-top-color:#06b6d4!important}.org-chart-container::-webkit-scrollbar{height:8px;width:8px}.org-chart-container::-webkit-scrollbar-track{background:#f1f5f9}.org-chart-container::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.org-chart-container::-webkit-scrollbar-thumb:hover{background:#94a3b8}\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.3.15", ngImport: i0, type: CideSharedOrgStructureComponent, decorators: [{
             type: Component,
@@ -1101,7 +941,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         CideIconComponent,
                         CideSpinnerComponent,
                         TooltipDirective
-                    ], template: "<!-- Organization Structure Component -->\n<div class=\"tw-flex-1 tw-overflow-hidden !tw-h-full\">\n  @if (loading()) {\n  <div class=\"tw-flex tw-items-center !tw-h-full tw-justify-center tw-py-12\">\n    <cide-ele-spinner size=\"md\"></cide-ele-spinner>\n    <span class=\"tw-ml-3 tw-text-gray-600 tw-text-sm\">Loading organization structure...</span>\n  </div>\n  } @else if (error()) {\n  <div class=\"tw-text-center tw-py-12\">\n    <div class=\"tw-w-16 tw-h-16 tw-bg-red-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n      <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-red-500\">error</cide-ele-icon>\n    </div>\n    <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">Error Loading Structure</h3>\n    <p class=\"tw-text-gray-600 tw-mb-4\">{{ error() }}</p>\n    <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"loadOrgStructure()\">\n      <cide-ele-icon>refresh</cide-ele-icon>\n      Try Again\n    </button>\n  </div>\n  } @else if (orgStructure().length === 0) {\n  <div class=\"tw-text-center tw-py-12\">\n    <div class=\"tw-w-16 tw-h-16 tw-bg-gray-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n      <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400\">account_tree</cide-ele-icon>\n    </div>\n    <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">No Entities Found</h3>\n    <p class=\"tw-text-gray-600 tw-mb-4\">No entities are available to display in the organization structure.</p>\n    @if (mode() === 'view') {\n    <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"router.navigate(['/control-panel/entity-list'])\">\n      <cide-ele-icon>add</cide-ele-icon>\n      Create First Entity\n    </button>\n    }\n  </div>\n  } @else {\n  <!-- Organization Chart Container -->\n  <div class=\"tw-relative tw-h-full tw-bg-gray-50 tw-py-8 org-chart-container\">\n    <!-- Chart Content with Background Pattern -->\n    <div class=\"tw-relative tw-z-10 tw-min-w-max tw-px-4 org-chart-content org-chart-content-with-bg\">\n      @for (rootNode of orgStructure(); track rootNode._id) {\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-mb-12\">\n        <!-- Render node recursively with unlimited depth -->\n        <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rootNode, level: 0 }\"></ng-container>\n      </div>\n      }\n    </div>\n  </div>\n  }\n</div>\n\n<!-- Entity Node Template (Recursive) -->\n<ng-template #entityNodeTemplate let-node let-level=\"level\">\n  <div class=\"tw-flex tw-flex-col tw-items-center\">\n    \n    <!-- Entity Card -->\n    <div class=\"tw-bg-white tw-shadow-lg tw-rounded-lg tw-p-4 tw-w-64 tw-max-w-72 tw-border-t-4 tw-transition-all tw-cursor-pointer hover:tw-shadow-xl hover:tw-scale-105 entity-card\"\n         [class.level-0]=\"level === 0\"\n         [class.level-1]=\"level === 1\"\n         [class.level-2]=\"level === 2\"\n         [class.level-3]=\"level === 3\"\n         [class.level-4]=\"level === 4\"\n         [class.level-5]=\"level === 5\"\n         (click)=\"viewEntity(node._id)\">\n      \n      <!-- Card Content -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <!-- Avatar -->\n        <div class=\"tw-w-12 tw-h-12 tw-bg-purple-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-flex-shrink-0\">\n          <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-purple-600\">person</cide-ele-icon>\n        </div>\n        \n        <!-- Entity Info -->\n        <div class=\"tw-flex-1 tw-min-w-0\">\n          <h3 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\" \n              [cideEleTooltip]=\"node.syen_name || ''\" \n              [tooltipPlacement]=\"'top'\"\n              [tooltipType]=\"'default'\">{{ node.syen_name }}</h3>\n          <p class=\"tw-text-xs tw-text-gray-600 tw-mt-1\">{{ node.syen_entity_code }}</p>\n          <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ node.syen_entity_type_sygms }}</p>\n        </div>\n      </div>\n      \n      <!-- Action Icons -->\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-mt-3\">\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <!-- Phone Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">phone</cide-ele-icon>\n          </button>\n          \n          <!-- Email Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">email</cide-ele-icon>\n          </button>\n          \n          <!-- LinkedIn Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-text-blue-600 hover:tw-bg-blue-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">attach_money</cide-ele-icon>\n          </button>\n          \n          <!-- Document Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">description</cide-ele-icon>\n          </button>\n          \n          <!-- More Options Icon -->\n          <button class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">more_horiz</cide-ele-icon>\n          </button>\n        </div>\n        \n        <!-- Status Badge -->\n        <div class=\"tw-flex-shrink-0\">\n          @if (node.syen_isactive) {\n          <div class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n            <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-green-500 tw-rounded-full tw-mr-1\"></div>\n            Active\n          </div>\n          } @else {\n          <div class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800\">\n            <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-red-500 tw-rounded-full tw-mr-1\"></div>\n            Inactive\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n    \n    <!-- Children Entities (Recursive) -->\n    @if (node.children && node.children.length > 0) {\n    <!-- Connection Lines Container -->\n    <div class=\"tw-relative tw-flex tw-flex-col tw-items-center tw-mt-4\">\n      <!-- Connection dot at parent -->\n      <div class=\"tw-absolute tw-left-1/2 tw-transform tw--translate-x-1/2\" style=\"top: -8px;\">\n        <div class=\"tw-w-2 tw-h-2 tw-bg-purple-600 tw-rounded-full tw-border tw-border-white\"></div>\n      </div>\n      \n      <!-- Simplified Connection Lines -->\n      <div class=\"tw-relative tw-w-full tw-flex tw-justify-center\" style=\"min-height: 40px;\">\n        @if (node.children.length === 1) {\n        <!-- Single child - simple vertical line -->\n        <svg class=\"tw-absolute tw-left-1/2\" style=\"transform: translateX(-50%); width: 2px; height: 40px; top: 0;\">\n          <line x1=\"1\" y1=\"0\" x2=\"1\" y2=\"40\" stroke=\"#9333ea\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n        </svg>\n        }\n        @else {\n        <!-- Multiple children - use calculated positions -->\n        <svg class=\"tw-absolute\" [attr.width]=\"(node.children.length * 280) + 'px'\" \n             style=\"height: 40px; left: 50%; transform: translateX(-50%); top: 0; overflow: visible;\">\n          <!-- Vertical line from parent (centered) -->\n          <line [attr.x1]=\"(node.children.length * 280) / 2\" \n                y1=\"0\" \n                [attr.x2]=\"(node.children.length * 280) / 2\" \n                y2=\"15\" \n                stroke=\"#9333ea\" \n                stroke-width=\"2\" \n                stroke-linecap=\"round\"/>\n          \n          <!-- Horizontal line spanning children -->\n          <line [attr.x1]=\"140\" \n                y1=\"15\" \n                [attr.x2]=\"(node.children.length * 280) - 140\" \n                y2=\"15\" \n                stroke=\"#9333ea\" \n                stroke-width=\"2\" \n                stroke-linecap=\"round\"/>\n          \n          <!-- Vertical lines to each child -->\n          @for (child of node.children; track child._id; let i = $index) {\n          @let xPosition = 140 + (i * 280);\n          <line [attr.x1]=\"xPosition\" \n                y1=\"15\" \n                [attr.x2]=\"xPosition\" \n                y2=\"35\" \n                stroke=\"#9333ea\" \n                stroke-width=\"2\" \n                stroke-linecap=\"round\"/>\n          <!-- Connection dot -->\n          <circle [attr.cx]=\"xPosition\" cy=\"35\" r=\"2.5\" fill=\"#9333ea\" stroke=\"#fff\" stroke-width=\"1\"/>\n          }\n        </svg>\n        }\n      </div>\n      \n      <!-- Children Container - Flexible Layout -->\n      <div class=\"tw-flex tw-flex-wrap tw-justify-center tw-gap-4 tw-w-full tw-max-w-6xl tw-px-4 children-container\">\n        @for (child of node.children; track child._id) {\n        <div class=\"tw-flex tw-flex-col tw-items-center tw-flex-shrink-0\">\n          <!-- Child node -->\n          <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"></ng-container>\n        </div>\n        }\n      </div>\n    </div>\n    }\n  </div>\n</ng-template>\n", styles: [".org-chart-container{overflow-x:auto;overflow-y:auto;height:100%;position:relative}.org-chart-content{min-width:max-content;min-height:max-content;padding:2rem 1rem}.org-chart-content-with-bg{position:relative}.org-chart-content-with-bg:before{content:\"\";position:absolute;inset:0;opacity:.3;pointer-events:none;background-image:radial-gradient(circle,#e5e7eb 1px,transparent 1px);background-size:20px 20px;background-repeat:repeat;z-index:-1}.flexible-connection-lines{position:relative;width:100%;height:40px}.flexible-connection-lines svg{position:absolute;left:50%;transform:translate(-50%);width:100%;height:100%;top:0}.children-container{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;width:100%;max-width:80rem;padding:0 1rem}.children-container>div{flex-shrink:0;display:flex;flex-direction:column;align-items:center}.entity-card{width:16rem;max-width:18rem;transition:all .2s ease-in-out}.entity-card:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}@media (max-width: 1400px){.children-container{max-width:70rem;gap:.875rem}.entity-card{width:15rem;max-width:17rem}}@media (max-width: 1200px){.children-container{max-width:60rem;gap:.75rem}.entity-card{width:14rem;max-width:16rem}}@media (max-width: 992px){.children-container{max-width:50rem;gap:.625rem}.entity-card{width:13rem;max-width:15rem}}@media (max-width: 768px){.children-container{max-width:40rem;gap:.5rem}.entity-card{width:12rem;max-width:14rem}.org-chart-content{padding:1.5rem .75rem}}@media (max-width: 576px){.children-container{max-width:30rem;gap:.375rem}.entity-card{width:11rem;max-width:13rem}.org-chart-content{padding:1rem .5rem}}.tw-overflow-y-auto::-webkit-scrollbar{width:6px}.tw-overflow-y-auto::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.tw-overflow-y-auto::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.tw-overflow-y-auto::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tw-transition-shadow{transition:box-shadow .2s ease-in-out}.tw-shadow-lg:hover{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;transform:translateY(-2px);transition:all .2s ease-in-out}.tw-bg-purple-300,.tw-bg-purple-400{transition:all .3s ease-in-out}.connection-line-compact{display:block;overflow:visible}.connection-line-compact path,.connection-line-compact line{stroke-linecap:round;stroke-linejoin:round;transition:stroke-width .2s ease}.connection-line-compact:hover path,.connection-line-compact:hover line{stroke-width:3}.connection-line-compact circle{transition:all .2s ease}.connection-line-compact circle:hover{filter:drop-shadow(0 2px 4px rgba(147,51,234,.4))}.level-0{border-color:#fb923c!important}.level-1{border-color:#60a5fa!important}.level-2{border-color:#a78bfa!important}.level-3{border-color:#4ade80!important}.level-4{border-color:#818cf8!important}.level-5{border-color:#f472b6!important}@media (max-width: 1200px){.tw-max-w-7xl{max-width:100%}.tw-gap-6{gap:1rem}.tw-min-w-64{min-width:14rem}.tw-max-w-72{max-width:16rem}}@media (max-width: 768px){.tw-min-w-64{min-width:12rem}.tw-max-w-72{max-width:14rem}.tw-max-w-7xl{max-width:100%}.tw-gap-6{gap:.75rem}.tw-p-4{padding:.75rem}.tw-mb-4{margin-bottom:.75rem}.tw-space-x-3{gap:.5rem}.tw-space-x-2{gap:.375rem}.tw-w-12{width:2.5rem}.tw-h-12{height:2.5rem}}@media (max-width: 480px){.tw-min-w-72{min-width:12rem}.tw-max-w-80{max-width:14rem}.tw-p-4{padding:.5rem}.tw-space-x-3{gap:.375rem}.tw-space-x-2{gap:.25rem}.tw-mb-3{margin-bottom:.5rem}.tw-w-12{width:2rem}.tw-h-12{height:2rem}.tw-w-8{width:1.5rem}.tw-h-8{height:1.5rem}}@media print{.tw-bg-gray-50{background:#fff!important}.tw-shadow-lg{box-shadow:none!important;border:1px solid #e5e7eb!important}.tw-bg-purple-300{background:#6b7280!important}.tw-border-purple-300{border-color:#6b7280!important}}\n"] }]
+                    ], template: "<!-- Organization Structure Component -->\n<div class=\"tw-flex-1 tw-overflow-hidden !tw-h-full\">\n  @if (loading()) {\n  <div class=\"tw-flex tw-items-center !tw-h-full tw-justify-center tw-py-12\">\n    <cide-ele-spinner size=\"md\"></cide-ele-spinner>\n    <span class=\"tw-ml-3 tw-text-gray-600 tw-text-sm\">Loading organization structure...</span>\n  </div>\n  } @else if (error()) {\n  <div class=\"tw-text-center tw-py-12\">\n    <div\n      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\n      class=\"tw-w-16 tw-h-16 tw-bg-gray-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n      <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400\">account_tree</cide-ele-icon>\n    </div>\n    <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">No Entities Found</h3>\n    <p class=\"tw-text-gray-600 tw-mb-4\">No entities are available to display in the organization structure.</p>\n    @if (mode() === 'view') {\n    <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"router.navigate(['/control-panel/entity-list'])\">\n      <cide-ele-icon>add</cide-ele-icon>\n      Create First Entity\n    </button>\n    }\n  </div>\n  } @else {\n  <!-- Organization Chart Container -->\n  <div class=\"tw-relative tw-h-full tw-bg-gray-50 tw-py-8 org-chart-container\">\n    <!-- Chart Content with Background Pattern -->\n    <div class=\"tw-relative tw-z-10 tw-min-w-max tw-px-4 org-chart-content org-chart-content-with-bg\">\n      <div class=\"tree\">\n        @for (rootNode of orgStructure(); track rootNode._id) {\n        <!-- Root nodes don't need top lines, but using wrapper is fine as they are not inside .tree-children -->\n        <div class=\"tree-node-wrapper tw-mb-12\">\n          <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: rootNode, level: 0 }\"></ng-container>\n        </div>\n        }\n      </div>\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=\"tree-node-content\">\n\n    <!-- Entity Card -->\n    <div class=\"tw-bg-white tw-shadow-lg tw-rounded-lg tw-p-4 entity-card tw-border-t-4 tw-cursor-pointer\"\n      [class.level-0]=\"level === 0\" [class.level-1]=\"level === 1\" [class.level-2]=\"level === 2\"\n      [class.level-3]=\"level === 3\" [class.level-4]=\"level === 4\" [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\n          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\n            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 || ''\" [tooltipPlacement]=\"'top'\" [tooltipType]=\"'default'\">{{\n            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          <!-- Icons (unchanged) -->\n          <button\n            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          <button\n            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          <button\n            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          <button\n            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          <button\n            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\n            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\n            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    <!-- Connector line extending downwards from parent -->\n    @if (node.children && node.children.length > 0) {\n    <div class=\"min-h-connector\"></div>\n    }\n  </div>\n\n  <!-- Recursive Children Container -->\n  @if (node.children && node.children.length > 0) {\n  <div class=\"tree-children\">\n    @for (child of node.children; track child._id) {\n    <div class=\"tree-node-wrapper\">\n      <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"></ng-container>\n    </div>\n    }\n  </div>\n  }\n</ng-template>", styles: [".org-chart-container{overflow-x:auto;overflow-y:auto;height:100%;position:relative;display:flex;justify-content:center;padding-top:2rem}.org-chart-content{min-width:max-content;min-height:max-content;padding:0 1rem 4rem}.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}.tree{display:flex;flex-direction:column;align-items:center}.tree-children{display:flex;flex-direction:row;justify-content:center;position:relative}.tree-node-wrapper{display:flex;flex-direction:column;align-items:center;position:relative;padding:20px 1rem 0}.tree-node-wrapper:before{content:\"\";position:absolute;top:0;left:50%;border-left:2px solid #9333ea;width:0;height:20px;z-index:1}.tree-node-wrapper:after{content:\"\";position:absolute;top:0;right:50%;border-top:2px solid #9333ea;width:50%;height:20px;z-index:0}.tree-children>.tree-node-wrapper:before{height:20px}.tree-children>.tree-node-wrapper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:20px;border-top:2px solid #9333ea;border-left:0;right:auto}.tree-children>.tree-node-wrapper:first-child:after{left:50%;width:50%;border-top:2px solid #9333ea}.tree-children>.tree-node-wrapper:last-child:after{left:0;width:50%;border-top:2px solid #9333ea}.tree-children>.tree-node-wrapper:only-child:after{display:none}.tree-children>.tree-node-wrapper:only-child:before{height:20px}.tree-node-content{position:relative;z-index:2;margin-bottom:0}.min-h-connector{height:20px;width:2px;background-color:#9333ea;margin:0 auto}.entity-card{width:18rem;transition:all .2s ease-in-out;flex-shrink:0}.entity-card:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.connection-dot{width:6px;height:6px;background-color:#9333ea;border-radius:50%;position:absolute;top:-3px;left:50%;transform:translate(-50%);z-index:5}@media (max-width: 1400px){.entity-card{width:16rem}}@media (max-width: 1200px){.entity-card{width:14rem}}@media (max-width: 992px){.entity-card{width:13rem}}.level-0{border-top-color:#3b82f6!important}.level-1{border-top-color:#f59e0b!important}.level-2{border-top-color:#10b981!important}.level-3{border-top-color:#8b5cf6!important}.level-4{border-top-color:#ef4444!important}.level-5{border-top-color:#06b6d4!important}.org-chart-container::-webkit-scrollbar{height:8px;width:8px}.org-chart-container::-webkit-scrollbar-track{background:#f1f5f9}.org-chart-container::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.org-chart-container::-webkit-scrollbar-thumb:hover{background:#94a3b8}\n"] }]
         }], propDecorators: { allowSwitching: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSwitching", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], entityClick: [{ type: i0.Output, args: ["entityClick"] }], entitySelect: [{ type: i0.Output, args: ["entitySelect"] }], entityView: [{ type: i0.Output, args: ["entityView"] }] } });
 
 class CideSharedProgramSectionSelectorComponent {
@@ -2203,5 +2043,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * 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, CURRENCY_SERVICE_TOKEN, CideCoreGeneralMasterService, CideCoreGeneralMasterTypeService, CideSharedOrgStructureComponent, CideSharedProgramSectionSelectorComponent, CloudIdeShared, ENTITY_SERVICE_TOKEN, FEE_DETAILS_VIEWER_COMPONENT_TOKEN, FEE_PAYMENT_SERVICE_TOKEN, FEE_STRUCTURE_SERVICE_TOKEN, FINANCIAL_YEAR_SERVICE_TOKEN, FeeDetailsViewerWrapperComponent, GENERAL_MASTER_SERVICE_TOKEN, NATIONALITY_SERVICE_TOKEN, PIN_CODE_SERVICE_TOKEN, PROGRAM_SECTION_SELECTOR_COMPONENT_TOKEN, PROGRAM_TERM_SECTION_SERVICE_TOKEN, ProgramSectionSelectorWrapperComponent, 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, CURRENCY_SERVICE_TOKEN, CideCoreGeneralMasterTypeService, CideSharedOrgStructureComponent, CideSharedProgramSectionSelectorComponent, CloudIdeShared, ENTITY_SERVICE_TOKEN, FEE_DETAILS_VIEWER_COMPONENT_TOKEN, FEE_PAYMENT_SERVICE_TOKEN, FEE_STRUCTURE_SERVICE_TOKEN, FINANCIAL_YEAR_SERVICE_TOKEN, FeeDetailsViewerWrapperComponent, GENERAL_MASTER_SERVICE_TOKEN, NATIONALITY_SERVICE_TOKEN, PIN_CODE_SERVICE_TOKEN, PROGRAM_SECTION_SELECTOR_COMPONENT_TOKEN, PROGRAM_TERM_SECTION_SERVICE_TOKEN, ProgramSectionSelectorWrapperComponent, SharedObjectIdService, USER_SERVICE_TOKEN, authGuard };
 //# sourceMappingURL=cloud-ide-shared.mjs.map