cloud-ide-core 2.0.54 → 2.0.57

package/fesm2022/cloud-ide-core.mjs

@@ -1,6 +1,6 @@
-import { authGuard } from 'cloud-ide-shared';
+import { authGuard, CideSharedOrgStructureComponent } from 'cloud-ide-shared';
 import * as i0 from '@angular/core';
-import { Injectable, Component, inject, DestroyRef, viewChild, signal, computed, ChangeDetectorRef, ViewChild } from '@angular/core';
+import { Injectable, Component, inject, DestroyRef, viewChild, signal, computed, input, output, ChangeDetectorRef, ViewChild } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$2 from '@angular/forms';
@@ -12,7 +12,7 @@ import { tap, catchError, map } from 'rxjs/operators';
 import { coreRoutesUrl, generateStringFromObject, cidePath, hostManagerRoutesUrl, MDesignationInsertUpdatePayload, generateObjectFromString, userRoutesUrl, AuthUserMstGetByIdPayload, customEncrypt, customDecrypt, AuthUserMstListPayload } from 'cloud-ide-lms-model';
 import * as i1 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
-import { NotificationService, CideEleDataGridComponent, CideEleButtonComponent, CideInputComponent, CideSelectComponent, CideTextareaComponent, CideIconComponent, CideEleDropdownComponent, ConfirmationService, CideEleGlobalNotificationsComponent, CideEleConfirmationModalComponent, CideEleJsonEditorComponent, CideEleFileInputComponent, CideEleFileImageDirective, CideFormFieldErrorComponent, CideEleFileManagerService, CideEleTabComponent, CideSpinnerComponent, CideEleFloatingFeaturesService, CideEleToastNotificationComponent } from 'cloud-ide-element';
+import { NotificationService, CideEleDataGridComponent, CideEleButtonComponent, CideInputComponent, CideSelectComponent, CideTextareaComponent, CideIconComponent, CideEleDropdownComponent, ConfirmationService, CideEleGlobalNotificationsComponent, CideEleConfirmationModalComponent, CideEleJsonEditorComponent, CideEleFileInputComponent, CideEleFileImageDirective, CideFormFieldErrorComponent, CideEleFileManagerService, CideEleTabComponent, CideEleFloatingFeaturesService, CideEleToastNotificationComponent } from 'cloud-ide-element';
 import { AppStateHelperService, CideLytSharedWrapperComponent, CideLytFloatingEntityRightsSharingService } from 'cloud-ide-layout';
 
 const coreRoutes = [
@@ -11470,109 +11470,18 @@ var entityList_component = /*#__PURE__*/Object.freeze({
 });
 
 class CideCoreOrgStructureComponent {
+    // Input parameters for configuration
+    allowSwitching = input(true, ...(ngDevMode ? [{ debugName: "allowSwitching" }] : [])); // Allow entity switching (default: true)
+    showActions = input(true, ...(ngDevMode ? [{ debugName: "showActions" }] : [])); // Show action buttons (default: true)
+    mode = input('view', ...(ngDevMode ? [{ debugName: "mode" }] : [])); // Mode: selection or view-only
+    // Output events
+    entityClick = output(); // Emit when entity is clicked
+    entitySelect = output(); // Emit when entity is selected for switching
+    entityView = output(); // Emit when entity is viewed
     entityService = inject(CideCoreEntityManagementService);
     router = inject(Router);
-    // Signals
-    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
-    orgStructure = signal([], ...(ngDevMode ? [{ debugName: "orgStructure" }] : []));
     ngOnInit() {
-        this.loadOrgStructure();
-    }
-    /**
-     * Load organization structure
-     */
-    loadOrgStructure() {
-        this.loading.set(true);
-        this.error.set(null);
-        this.entityService.getEntityList({}).subscribe({
-            next: (response) => {
-                this.loading.set(false);
-                if (response.success && response.data) {
-                    const entities = response.data;
-                    const structure = this.buildOrgStructure(entities);
-                    this.orgStructure.set(structure);
-                }
-                else {
-                    this.error.set(response.message || 'Failed to load organization structure');
-                }
-            },
-            error: (error) => {
-                this.loading.set(false);
-                this.error.set('Failed to load organization structure');
-                console.error('Error loading org structure:', error);
-            }
-        });
-    }
-    /**
-     * Build hierarchical organization structure with unlimited depth levels
-     * Uses _id as primary key and syen_id_syen as foreign key for parent-child relationships
-     * Entities with empty parent ID ("") or null/undefined are shown at root level
-     */
-    buildOrgStructure(entities) {
-        const nodeMap = new Map();
-        const rootNodes = [];
-        // Create nodes for all entities
-        entities.forEach(entity => {
-            const node = {
-                _id: entity._id || '',
-                syen_name: entity.syen_name || 'Unnamed Entity',
-                syen_entity_code: entity.syen_entity_code || '',
-                syen_entity_type_sygms: entity.syen_entity_type_sygms || '',
-                syen_isactive: entity.syen_isactive || false,
-                children: [],
-                level: 0,
-                parentId: entity.syen_id_syen || undefined
-            };
-            nodeMap.set(node._id, node);
-        });
-        // Build hierarchy with unlimited depth
-        entities.forEach(entity => {
-            const node = nodeMap.get(entity._id || '');
-            if (node) {
-                const parentId = entity.syen_id_syen;
-                // Check if parent ID is empty string or null/undefined
-                if (parentId && parentId !== "" && nodeMap.has(parentId)) {
-                    const parent = nodeMap.get(parentId);
-                    parent.children = parent.children || [];
-                    parent.children.push(node);
-                    // Calculate level dynamically based on parent's level
-                    node.level = this.calculateLevel(parent, nodeMap);
-                }
-                else {
-                    // Root node - no parent or empty parent ID
-                    node.level = 0;
-                    rootNodes.push(node);
-                }
-            }
-        });
-        // Sort children by name for consistent display
-        this.sortChildrenRecursively(rootNodes);
-        return rootNodes;
-    }
-    /**
-     * Calculate the level of a node based on its parent's level
-     */
-    calculateLevel(node, nodeMap) {
-        if (!node.parentId) {
-            return 0;
-        }
-        const parent = nodeMap.get(node.parentId);
-        if (parent) {
-            return parent.level + 1;
-        }
-        return 0;
-    }
-    /**
-     * Recursively sort children by name for consistent display
-     */
-    sortChildrenRecursively(nodes) {
-        nodes.forEach(node => {
-            if (node.children && node.children.length > 0) {
-                node.children.sort((a, b) => a.syen_name.localeCompare(b.syen_name));
-                this.sortChildrenRecursively(node.children);
-            }
-        });
+        // No initialization needed - shared component handles everything
     }
     /**
      * Navigate back to entity list
@@ -11581,33 +11490,86 @@ class CideCoreOrgStructureComponent {
         this.router.navigate(['/control-panel/entity-list']);
     }
     /**
-     * View entity details
+     * Handle entity click event from shared org structure
      */
-    viewEntity(entityId) {
-        this.router.navigate(['/control-panel/entity-list'], {
-            queryParams: { view: entityId }
-        });
+    onEntityClick(entity) {
+        this.entityClick.emit(entity);
     }
     /**
-     * Edit entity
+     * Handle entity select event from shared org structure
      */
-    editEntity(entityId) {
-        this.router.navigate(['/control-panel/entity-list/entity-create'], {
-            queryParams: { edit: entityId }
-        });
+    onEntitySelect(entity) {
+        this.entitySelect.emit(entity);
+    }
+    /**
+     * Handle entity view event from shared org structure
+     */
+    onEntityView(entity) {
+        this.entityView.emit(entity);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreOrgStructureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreOrgStructureComponent, isStandalone: true, selector: "cide-core-org-structure", ngImport: i0, template: "<!-- Organization Structure with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'org_structure' }\">\n  \n  <!-- Back Button using standard content projection -->\n  <div breadcrumb-actions>\n    <button\n      cideEleButton\n      variant=\"outline\"\n      size=\"xs\"\n      (click)=\"onBack()\"\n      class=\"tw-whitespace-nowrap tw-flex tw-items-center\">\n      <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">arrow_back</cide-ele-icon>\n      Back to Entities\n    </button>\n  </div>\n\n  <!-- Content Area -->\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      <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    </div>\n    } @else {\n    <!-- Organization Chart Container -->\n    <div class=\"tw-relative tw-min-h-screen tw-bg-gray-50 tw-py-8\">\n      <!-- Background Grid Pattern -->\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>\n      \n      <!-- Chart Content -->\n      <div class=\"tw-relative tw-z-10\">\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</cide-lyt-shared-wrapper>\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-min-w-64 tw-max-w-72 tw-border-t-4 tw-transition-shadow tw-cursor-pointer hover:tw-shadow-xl\"\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\">{{ 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    <!-- Ultra-Compact Connection Lines -->\n    <div class=\"tw-relative tw-flex tw-flex-col tw-items-center tw-mt-2\">\n      <!-- Minimal 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      <!-- Ultra-Compact SVG Lines -->\n      <div class=\"tw-relative tw-w-full\" style=\"height: 30px;\">\n        @if (node.children && node.children.length === 1) {\n        <!-- Single child - minimal line -->\n        <svg class=\"tw-absolute tw-left-1/2 connection-line-compact\" style=\"transform: translateX(-50%); width: 2px; height: 30px; top: 0;\">\n          <line x1=\"1\" y1=\"0\" x2=\"1\" y2=\"30\" stroke=\"#9333ea\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n        </svg>\n        }\n        @else if (node.children && node.children.length > 1) {\n        <!-- Multiple children - minimal design -->\n        <svg class=\"tw-absolute tw-left-1/2 connection-line-compact\" [attr.style]=\"'transform: translateX(-50%); width: ' + ((node.children.length - 1) * 336 + 256) + 'px; height: 30px; top: 0;'\">\n          <!-- Vertical line -->\n          <line [attr.x1]=\"((node.children.length - 1) * 336 + 256) / 2\" \n                y1=\"0\" \n                [attr.x2]=\"((node.children.length - 1) * 336 + 256) / 2\" \n                y2=\"12\" \n                stroke=\"#9333ea\" \n                stroke-width=\"2\" \n                stroke-linecap=\"round\"/>\n          \n          <!-- Horizontal line -->\n          <path [attr.d]=\"'M 128 15 L ' + ((node.children.length - 1) * 336 + 128) + ' 15'\" \n                stroke=\"#9333ea\" \n                stroke-width=\"2\" \n                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]=\"(i * 336) + 128\" \n                y1=\"15\" \n                [attr.x2]=\"(i * 336) + 128\" \n                y2=\"28\" \n                stroke=\"#9333ea\" \n                stroke-width=\"2\" \n                stroke-linecap=\"round\"/>\n          <!-- Tiny dot -->\n          <circle [attr.cx]=\"(i * 336) + 128\" cy=\"28\" r=\"2.5\" fill=\"#9333ea\" stroke=\"#fff\" stroke-width=\"1\"/>\n          }\n        </svg>\n        }\n      </div>\n      \n      <!-- Children -->\n      <div class=\"tw-flex tw-justify-center tw-gap-20\">\n        @for (child of node.children; track child._id) {\n        <div class=\"tw-flex tw-flex-col tw-items-center\">\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>", styles: [":host{height:100%;display:flex;flex-direction:column}.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$1.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"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.7", type: CideCoreOrgStructureComponent, isStandalone: true, selector: "cide-core-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: `
+    <cide-lyt-shared-wrapper [shared_wrapper_setup_param]="{ sypg_page_code: 'org_structure' }">
+      
+      <!-- Back Button using standard content projection -->
+      <div breadcrumb-actions>
+        <button
+          cideEleButton
+          variant="outline"
+          size="xs"
+          (click)="onBack()"
+          class="tw-whitespace-nowrap tw-flex tw-items-center">
+          <cide-ele-icon size="xs" class="tw-w-6 tw-h-5">arrow_back</cide-ele-icon>
+          Back to Entities
+        </button>
+      </div>
+
+      <!-- Shared Org Structure Component -->
+      <cide-shared-org-structure
+        [allowSwitching]="allowSwitching()"
+        [showActions]="showActions()"
+        [mode]="mode()"
+        (entityClick)="onEntityClick($event)"
+        (entitySelect)="onEntitySelect($event)"
+        (entityView)="onEntityView($event)">
+      </cide-shared-org-structure>
+    </cide-lyt-shared-wrapper>
+  `, isInline: true, styles: [":host{height:100%;display:flex;flex-direction:column}.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: "component", type: CideSharedOrgStructureComponent, selector: "cide-shared-org-structure", inputs: ["allowSwitching", "showActions", "mode"], outputs: ["entityClick", "entitySelect", "entityView"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreOrgStructureComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-core-org-structure', standalone: true, imports: [
                         CommonModule,
-                        CideEleButtonComponent,
+                        CideSharedOrgStructureComponent,
                         CideIconComponent,
-                        CideSpinnerComponent,
                         CideLytSharedWrapperComponent
-                    ], template: "<!-- Organization Structure with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'org_structure' }\">\n  \n  <!-- Back Button using standard content projection -->\n  <div breadcrumb-actions>\n    <button\n      cideEleButton\n      variant=\"outline\"\n      size=\"xs\"\n      (click)=\"onBack()\"\n      class=\"tw-whitespace-nowrap tw-flex tw-items-center\">\n      <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">arrow_back</cide-ele-icon>\n      Back to Entities\n    </button>\n  </div>\n\n  <!-- Content Area -->\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      <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    </div>\n    } @else {\n    <!-- Organization Chart Container -->\n    <div class=\"tw-relative tw-min-h-screen tw-bg-gray-50 tw-py-8\">\n      <!-- Background Grid Pattern -->\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>\n      \n      <!-- Chart Content -->\n      <div class=\"tw-relative tw-z-10\">\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</cide-lyt-shared-wrapper>\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-min-w-64 tw-max-w-72 tw-border-t-4 tw-transition-shadow tw-cursor-pointer hover:tw-shadow-xl\"\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\">{{ 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    <!-- Ultra-Compact Connection Lines -->\n    <div class=\"tw-relative tw-flex tw-flex-col tw-items-center tw-mt-2\">\n      <!-- Minimal 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      <!-- Ultra-Compact SVG Lines -->\n      <div class=\"tw-relative tw-w-full\" style=\"height: 30px;\">\n        @if (node.children && node.children.length === 1) {\n        <!-- Single child - minimal line -->\n        <svg class=\"tw-absolute tw-left-1/2 connection-line-compact\" style=\"transform: translateX(-50%); width: 2px; height: 30px; top: 0;\">\n          <line x1=\"1\" y1=\"0\" x2=\"1\" y2=\"30\" stroke=\"#9333ea\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n        </svg>\n        }\n        @else if (node.children && node.children.length > 1) {\n        <!-- Multiple children - minimal design -->\n        <svg class=\"tw-absolute tw-left-1/2 connection-line-compact\" [attr.style]=\"'transform: translateX(-50%); width: ' + ((node.children.length - 1) * 336 + 256) + 'px; height: 30px; top: 0;'\">\n          <!-- Vertical line -->\n          <line [attr.x1]=\"((node.children.length - 1) * 336 + 256) / 2\" \n                y1=\"0\" \n                [attr.x2]=\"((node.children.length - 1) * 336 + 256) / 2\" \n                y2=\"12\" \n                stroke=\"#9333ea\" \n                stroke-width=\"2\" \n                stroke-linecap=\"round\"/>\n          \n          <!-- Horizontal line -->\n          <path [attr.d]=\"'M 128 15 L ' + ((node.children.length - 1) * 336 + 128) + ' 15'\" \n                stroke=\"#9333ea\" \n                stroke-width=\"2\" \n                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]=\"(i * 336) + 128\" \n                y1=\"15\" \n                [attr.x2]=\"(i * 336) + 128\" \n                y2=\"28\" \n                stroke=\"#9333ea\" \n                stroke-width=\"2\" \n                stroke-linecap=\"round\"/>\n          <!-- Tiny dot -->\n          <circle [attr.cx]=\"(i * 336) + 128\" cy=\"28\" r=\"2.5\" fill=\"#9333ea\" stroke=\"#fff\" stroke-width=\"1\"/>\n          }\n        </svg>\n        }\n      </div>\n      \n      <!-- Children -->\n      <div class=\"tw-flex tw-justify-center tw-gap-20\">\n        @for (child of node.children; track child._id) {\n        <div class=\"tw-flex tw-flex-col tw-items-center\">\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>", styles: [":host{height:100%;display:flex;flex-direction:column}.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: `
+    <cide-lyt-shared-wrapper [shared_wrapper_setup_param]="{ sypg_page_code: 'org_structure' }">
+      
+      <!-- Back Button using standard content projection -->
+      <div breadcrumb-actions>
+        <button
+          cideEleButton
+          variant="outline"
+          size="xs"
+          (click)="onBack()"
+          class="tw-whitespace-nowrap tw-flex tw-items-center">
+          <cide-ele-icon size="xs" class="tw-w-6 tw-h-5">arrow_back</cide-ele-icon>
+          Back to Entities
+        </button>
+      </div>
+
+      <!-- Shared Org Structure Component -->
+      <cide-shared-org-structure
+        [allowSwitching]="allowSwitching()"
+        [showActions]="showActions()"
+        [mode]="mode()"
+        (entityClick)="onEntityClick($event)"
+        (entitySelect)="onEntitySelect($event)"
+        (entityView)="onEntityView($event)">
+      </cide-shared-org-structure>
+    </cide-lyt-shared-wrapper>
+  `, styles: [":host{height:100%;display:flex;flex-direction:column}.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"] }]
         }] });
 
 var orgStructure_component = /*#__PURE__*/Object.freeze({