cloud-ide-core 0.0.1 → 1.0.1

package/fesm2022/cloud-ide-core-general-master-type.component-B26auJZw.mjs

@@ -0,0 +1,611 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, viewChild, signal, computed, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { NonNullableFormBuilder, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { G as GeneralMasterTypeService } from './cloud-ide-core-general-master-type.service-Ab64Jjps.mjs';
+import { CideEleDataGridComponent, CideEleButtonComponent, CideInputComponent, CideTextareaComponent, CideIconComponent, CideEleDropdownComponent, CideEleJsonEditorComponent, CideSelectComponent } from 'cloud-ide-element';
+import { generateStringFromObject } from 'cloud-ide-lms-model';
+
+class GeneralMasterTypeComponent {
+    constructor() {
+        // Dependency injection
+        this.destroyRef = inject(DestroyRef);
+        this.typeService = inject(GeneralMasterTypeService);
+        this.fb = inject(NonNullableFormBuilder);
+        this.router = inject(Router);
+        // Modern ViewChild signals for template renderers (Angular 20 approach)
+        this.typeDetailsRendererTemplate = viewChild.required('typeDetailsRendererTemplate');
+        this.typeStatusRendererTemplate = viewChild.required('typeStatusRendererTemplate');
+        this.actionsDropdownRendererTemplate = viewChild.required('actionsDropdownRendererTemplate');
+        // Make Math available in template
+        this.Math = Math;
+        // Signals for reactive state management
+        this.types = signal([]);
+        this.loading = signal(false);
+        this.error = signal(null);
+        this.selectedItems = signal([]);
+        this.searchTerm = signal('');
+        // Form state
+        this.isEditMode = signal(false);
+        this.editingTypeId = signal(null);
+        this.retrievedType = signal(null);
+        // Pagination signals
+        this.currentPage = signal(1);
+        this.pageSize = signal(10);
+        this.totalItems = signal(0);
+        // Modern reactive forms with signals
+        this.typeForm = this.fb.group({
+            sygmt_code: [''],
+            sygmt_title: [''],
+            sygmt_desc: [''],
+            sygmt_configuration: ['{}'],
+            sygmt_isactive: [true],
+            sygmt_id_sygmt: [''] // Parent type ID for child types
+        });
+        // Computed values
+        this.isFormDirty = computed(() => this.typeForm.dirty);
+        // Grid configuration signal
+        this.gridConfig = signal({
+            id: 'type-list-grid',
+            title: '',
+            subtitle: '',
+            columns: [
+                {
+                    key: 'details',
+                    header: 'Type Details',
+                    type: 'custom',
+                    width: 'auto',
+                    truncate: true,
+                    align: 'left',
+                    renderer: 'typeDetailsRenderer'
+                },
+                {
+                    key: 'sygmt_code',
+                    header: 'Type Code',
+                    type: 'text',
+                    width: '150px',
+                    truncate: true,
+                    align: 'left'
+                },
+                {
+                    key: 'sygmt_isactive',
+                    header: 'Status',
+                    type: 'custom',
+                    width: '100px',
+                    truncate: false,
+                    align: 'center',
+                    renderer: 'typeStatusRenderer'
+                },
+                {
+                    key: 'actions',
+                    header: '',
+                    type: 'custom',
+                    width: '150px',
+                    truncate: false,
+                    align: 'center',
+                    renderer: 'actionsDropdownRenderer'
+                }
+            ],
+            data: [],
+            trackBy: '_id',
+            tree: {
+                enabled: true,
+                foreignKey: 'sygmt_id_sygmt',
+                primaryKey: '_id'
+            },
+            pagination: {
+                enabled: true,
+                pageSize: 10,
+                pageSizeOptions: [10, 25, 50, 100],
+                showQuickJump: true,
+                showPageInfo: true,
+                showRefresh: true
+            },
+            search: {
+                enabled: true,
+                placeholder: 'Search types...',
+                searchableColumns: ['sygmt_title', 'sygmt_desc', 'sygmt_code'],
+                debounceMs: 300
+            },
+            loading: {
+                useDefer: true,
+                skeletonRows: 5,
+                showOverlay: false
+            },
+            scroll: {
+                enabled: true,
+                maxHeight: '',
+                minHeight: '',
+                stickyHeader: true,
+                virtualScroll: false,
+                rowHeight: 40
+            },
+            responsive: true,
+            striped: false,
+            bordered: true,
+            compact: true,
+            tableClass: 'tw-table-fixed tw-w-full tw-rounded-none'
+        });
+        // Action handlers for grid
+        this.actionHandlers = {
+            onEdit: (item) => this.editType(item),
+            onDelete: (item) => this.deleteType(item),
+            onToggleStatus: (item) => this.toggleTypeStatus(item)
+        };
+        // Computed template renderers for grid
+        this.templateRenderers = computed(() => ({
+            typeDetailsRenderer: this.typeDetailsRendererTemplate(),
+            typeStatusRenderer: this.typeStatusRendererTemplate(),
+            actionsDropdownRenderer: this.actionsDropdownRendererTemplate()
+        }));
+    }
+    ngOnInit() {
+        this.initializeComponent();
+        // Add form submission debugging
+        this.typeForm.valueChanges.subscribe(value => {
+            console.log('🔵 Form value changed:', value);
+        });
+        this.typeForm.statusChanges.subscribe(status => {
+            console.log('🔵 Form status changed:', status);
+        });
+    }
+    /**
+     * Initialize component
+     */
+    initializeComponent() {
+        this.loadTypes();
+        this.setupFormSubscriptions();
+    }
+    /**
+     * Load types from API
+     */
+    loadTypes() {
+        this.loading.set(true);
+        this.error.set(null);
+        const request = {};
+        this.typeService.getTypeList(request)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                if (response.success) {
+                    this.types.set(response.data || []);
+                    this.totalItems.set(response.total || 0);
+                    this.updateGridData();
+                }
+                else {
+                    this.error.set(response.message || 'Failed to load types');
+                }
+                this.loading.set(false);
+            },
+            error: (error) => {
+                console.error('Error loading types:', error);
+                this.error.set('Failed to load types. Please try again.');
+                this.loading.set(false);
+            }
+        });
+    }
+    /**
+     * Setup form subscriptions
+     */
+    setupFormSubscriptions() {
+        // Watch for form changes to enable/disable save button
+        this.typeForm.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            // Form validation is handled by computed signals
+        });
+    }
+    /**
+     * Update grid data
+     */
+    updateGridData() {
+        this.gridConfig.update(config => ({
+            ...config,
+            data: this.types()
+        }));
+    }
+    /**
+     * Handle grid events
+     */
+    onGridEvent(event) {
+        switch (event.type) {
+            case 'pageChange':
+                if (event.data && typeof event.data === 'object' && 'pageIndex' in event.data && 'pageSize' in event.data) {
+                    this.currentPage.set(event.data['pageIndex']);
+                    this.pageSize.set(event.data['pageSize']);
+                    this.loadTypes();
+                }
+                break;
+            case 'search':
+                if (event.data && typeof event.data === 'string') {
+                    this.searchTerm.set(event.data);
+                    this.currentPage.set(1);
+                    this.loadTypes();
+                }
+                break;
+            case 'refresh':
+                this.loadTypes();
+                break;
+            case 'action':
+                // Handle action events if needed
+                console.log('Action event:', event);
+                break;
+            case 'rowClick':
+                // Handle row click events if needed
+                console.log('Row click event:', event);
+                break;
+            case 'sort':
+                // Handle sort events if needed
+                console.log('Sort event:', event);
+                break;
+            case 'export':
+                // Handle export events if needed
+                console.log('Export event:', event);
+                break;
+            case 'rowReorder':
+                // Handle row reorder events if needed
+                console.log('Row reorder event:', event);
+                break;
+        }
+    }
+    /**
+     * Create new type
+     */
+    createType() {
+        if (!this.typeForm.valid) {
+            this.markFormAsTouched();
+            return;
+        }
+        const formValue = this.typeForm.getRawValue();
+        const newType = {
+            _id: '', // Empty _id for create operation
+            sygmt_code: formValue.sygmt_code,
+            sygmt_title: formValue.sygmt_title,
+            sygmt_desc: formValue.sygmt_desc,
+            sygmt_configuration: JSON.parse(formValue.sygmt_configuration),
+            sygmt_isactive: formValue.sygmt_isactive
+        };
+        this.loading.set(true);
+        this.typeService.saveType(newType)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                if (response.success) {
+                    this.cancelForm();
+                    this.loadTypes();
+                    console.log('✅ Type created successfully');
+                }
+                else {
+                    console.error('❌ Failed to create type:', response.message);
+                }
+                this.loading.set(false);
+            },
+            error: (error) => {
+                console.error('Error creating type:', error);
+                console.error('❌ Failed to create type. Please try again.');
+                this.loading.set(false);
+            }
+        });
+    }
+    /**
+     * Update existing type
+     */
+    updateType() {
+        console.log('🔵 updateType called');
+        console.log('🔵 form valid:', this.typeForm.valid);
+        console.log('🔵 editingTypeId:', this.editingTypeId());
+        if (!this.typeForm.valid || !this.editingTypeId()) {
+            console.log('🔵 Form validation failed or no editing ID');
+            this.markFormAsTouched();
+            return;
+        }
+        const formValue = this.typeForm.getRawValue();
+        const updatedType = {
+            _id: this.editingTypeId(), // Include _id for update operation
+            sygmt_code: formValue.sygmt_code,
+            sygmt_title: formValue.sygmt_title,
+            sygmt_desc: formValue.sygmt_desc,
+            sygmt_configuration: JSON.parse(formValue.sygmt_configuration || '{}'),
+            sygmt_isactive: formValue.sygmt_isactive
+        };
+        console.log('🔵 Making API call to update type:', updatedType);
+        this.loading.set(true);
+        this.typeService.saveType(updatedType)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                console.log('🔵 API response received:', response);
+                if (response.success) {
+                    this.cancelForm();
+                    this.loadTypes();
+                    console.log('✅ Type updated successfully');
+                }
+                else {
+                    console.error('❌ Failed to update type:', response.message);
+                }
+                this.loading.set(false);
+            },
+            error: (error) => {
+                console.error('🔵 API error:', error);
+                console.error('❌ Failed to update type. Please try again.');
+                this.loading.set(false);
+            }
+        });
+    }
+    /**
+     * Edit type
+     */
+    editType(type) {
+        this.isEditMode.set(true);
+        this.editingTypeId.set(type._id || "");
+        this.retrievedType.set(type);
+        this.typeForm.patchValue({
+            sygmt_code: type.sygmt_code,
+            sygmt_title: type.sygmt_title,
+            sygmt_desc: type.sygmt_desc,
+            sygmt_configuration: JSON.stringify(type.sygmt_configuration, null, 2),
+            sygmt_isactive: type.sygmt_isactive
+        });
+        this.typeForm.markAsPristine();
+    }
+    /**
+     * Delete type
+     */
+    deleteType(type) {
+        if (confirm(`Are you sure you want to delete the type "${type.sygmt_title}"?`)) {
+            this.loading.set(true);
+            this.typeService.deleteType(type._id || "")
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe({
+                next: (response) => {
+                    if (response.success) {
+                        this.loadTypes();
+                        console.log('✅ Type deleted successfully');
+                    }
+                    else {
+                        console.error('❌ Failed to delete type:', response.message);
+                    }
+                    this.loading.set(false);
+                },
+                error: (error) => {
+                    console.error('Error deleting type:', error);
+                    console.error('❌ Failed to delete type. Please try again.');
+                    this.loading.set(false);
+                }
+            });
+        }
+    }
+    /**
+     * Toggle type status
+     */
+    toggleTypeStatus(type) {
+        this.loading.set(true);
+        this.typeService.toggleTypeStatus({ sygmt_id: type._id || "" })
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                if (response.success) {
+                    this.loadTypes();
+                    console.log(`✅ Type ${type.sygmt_isactive ? 'deactivated' : 'activated'} successfully`);
+                }
+                else {
+                    console.error('❌ Failed to toggle type status:', response.message);
+                }
+                this.loading.set(false);
+            },
+            error: (error) => {
+                console.error('Error toggling type status:', error);
+                console.error('❌ Failed to toggle type status. Please try again.');
+                this.loading.set(false);
+            }
+        });
+    }
+    /**
+     * Navigate to general master management for this type
+     */
+    navigateToGeneralMaster(type) {
+        const payload = generateStringFromObject({
+            sygmt_id: type._id,
+            sygmt_title: type.sygmt_title
+        });
+        this.router.navigate(['control-panel', 'general_master_entry', payload]);
+    }
+    /**
+     * Handle form submission event
+     */
+    onSubmit(event) {
+        event.preventDefault();
+        console.log('🔵 Form onSubmit event triggered');
+        this.saveType();
+    }
+    /**
+     * Save type (create or update)
+     */
+    saveType() {
+        console.log('🔵 saveType called');
+        console.log('🔵 isEditMode:', this.isEditMode());
+        console.log('🔵 editingTypeId:', this.editingTypeId());
+        console.log('🔵 form valid:', this.typeForm.valid);
+        console.log('🔵 form values:', this.typeForm.getRawValue());
+        console.log('🔵 form dirty:', this.typeForm.dirty);
+        console.log('🔵 form pristine:', this.typeForm.pristine);
+        console.log('🔵 form touched:', this.typeForm.touched);
+        if (this.isEditMode()) {
+            console.log('🔵 Calling updateType');
+            this.updateType();
+        }
+        else {
+            console.log('🔵 Calling createType');
+            this.createType();
+        }
+    }
+    /**
+     * Cancel form (reset to defaults and exit edit mode)
+     */
+    cancelForm() {
+        this.typeForm.reset({
+            sygmt_code: '',
+            sygmt_title: '',
+            sygmt_desc: '',
+            sygmt_configuration: '{}',
+            sygmt_isactive: true,
+            sygmt_id_sygmt: '' // Clear parent type ID
+        });
+        this.isEditMode.set(false);
+        this.editingTypeId.set(null);
+        this.retrievedType.set(null);
+        this.typeForm.markAsPristine();
+        this.typeForm.markAsUntouched();
+    }
+    /**
+     * Mark form as touched to trigger validation display
+     */
+    markFormAsTouched() {
+        Object.keys(this.typeForm.controls).forEach(key => {
+            const control = this.typeForm.get(key);
+            control?.markAsTouched();
+        });
+    }
+    /**
+     * Clear parent type relationship
+     */
+    clearParentType() {
+        this.typeForm.patchValue({
+            sygmt_id_sygmt: ''
+        });
+        console.log('🔵 Parent type relationship cleared');
+    }
+    /**
+     * Get dropdown items for actions
+     */
+    getActionDropdownItems(type) {
+        return [
+            {
+                id: 'edit',
+                label: 'Edit',
+                icon: 'edit',
+                disabled: false
+            },
+            {
+                id: 'addChild',
+                label: 'Add Child',
+                icon: 'add',
+                disabled: false
+            },
+            {
+                id: 'general-master',
+                label: 'General Master',
+                icon: 'list',
+                disabled: false
+            },
+            {
+                id: 'toggle',
+                label: type.sygmt_isactive ? 'Deactivate' : 'Activate',
+                icon: type.sygmt_isactive ? 'block' : 'check_circle',
+                disabled: false
+            },
+            {
+                id: 'delete',
+                label: 'Delete',
+                icon: 'delete',
+                disabled: false
+            }
+        ];
+    }
+    /**
+     * Get parent type display name
+     */
+    getParentTypeDisplay() {
+        const parentId = this.typeForm.get('sygmt_id_sygmt')?.value;
+        if (!parentId)
+            return '';
+        const parentType = this.types().find(t => t._id === parentId);
+        return parentType ? (parentType.sygmt_title || 'Unknown Parent') : 'Unknown Parent';
+    }
+    /**
+     * Handle adding a child type
+     */
+    onAddChild(parentType) {
+        console.log('🔵 onAddChild called with:', parentType);
+        console.log('🔵 Parent title:', parentType.sygmt_title);
+        // Clear edit mode and retrieved item when adding a child
+        this.isEditMode.set(false);
+        this.editingTypeId.set(null);
+        this.retrievedType.set(null);
+        // Reset form and pre-fill with parent context
+        this.typeForm.patchValue({
+            sygmt_code: '',
+            sygmt_title: '',
+            sygmt_desc: '',
+            sygmt_configuration: '{}',
+            sygmt_isactive: true,
+            sygmt_id_sygmt: parentType._id // Set parent type ID
+        });
+        // Store the parent type for reference (you can display this in the UI)
+        console.log('🔵 Ready to add child type for parent:', parentType.sygmt_title);
+    }
+    /**
+     * Handle dropdown item click
+     */
+    onDropdownItemClick(item, row) {
+        console.log('🔵 onDropdownItemClick called with:', item, row);
+        switch (item.id) {
+            case 'edit':
+                console.log('🔵 Calling editType with:', row);
+                this.editType(row);
+                break;
+            case 'addChild':
+                console.log('🔵 Calling onAddChild with:', row);
+                this.onAddChild(row);
+                break;
+            case 'general-master':
+                console.log('🔵 Calling navigateToGeneralMaster with:', row);
+                this.navigateToGeneralMaster(row);
+                break;
+            case 'toggle':
+                console.log('🔵 Calling toggleTypeStatus with:', row);
+                this.toggleTypeStatus(row);
+                break;
+            case 'delete':
+                console.log('🔵 Calling deleteType with:', row);
+                this.deleteType(row);
+                break;
+            default:
+                console.log('🔵 Unknown action:', item.id);
+        }
+        // Close all dropdowns after action
+        this.closeAllDropdowns();
+    }
+    /**
+     * Close all dropdowns
+     */
+    closeAllDropdowns() {
+        // Close all dropdowns by clicking outside
+        const event = new MouseEvent('click', { bubbles: true });
+        document.dispatchEvent(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: GeneralMasterTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: GeneralMasterTypeComponent, isStandalone: true, selector: "cide-core-app-general-master-type", viewQueries: [{ propertyName: "typeDetailsRendererTemplate", first: true, predicate: ["typeDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "typeStatusRendererTemplate", first: true, predicate: ["typeStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- General Master Type Container -->\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Quick Add Form Section -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-white\">\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n          <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Type' : 'Quick Add Type' }}</h6>\n        </div>\n        \n        <!-- Parent Type Info (shown when adding child) -->\n        @if (typeForm.get('sygmt_id_sygmt')?.value) {\n          <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\n              <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\n              <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ getParentTypeDisplay() }}</span>\n            </div>\n            <button \n              cideEleButton \n              variant=\"ghost\" \n              size=\"xs\" \n              type=\"button\" \n              (click)=\"clearParentType()\" \n              class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n              <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n              </svg>\n            </button>\n          </div>\n        }\n      </div>\n\n      <form [formGroup]=\"typeForm\" (ngSubmit)=\"onSubmit($event)\" class=\"tw-space-y-2 tw-relative\">\n        <!-- Hidden field for parent type ID -->\n        <input type=\"hidden\" formControlName=\"sygmt_id_sygmt\">\n        \n        <!-- First Row - Basic fields -->\n        <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-6 tw-gap-2\">\n          <!-- Type Code -->\n          <div class=\"lg:tw-col-span-1\">\n            <cide-ele-input \n              formControlName=\"sygmt_code\" \n              label=\"Type Code*\" \n              placeholder=\"Enter type code\"\n              size=\"sm\"\n              [maxlength]=\"40\">\n            </cide-ele-input>\n          </div>\n          \n          <!-- Type Title -->\n          <div class=\"lg:tw-col-span-2\">\n            <cide-ele-input \n              formControlName=\"sygmt_title\" \n              label=\"Type Title*\" \n              placeholder=\"Enter type title\"\n              size=\"sm\"\n              [maxlength]=\"100\">\n            </cide-ele-input>\n          </div>\n          \n          <!-- Active Status -->\n          <div class=\"lg:tw-col-span-1 tw-flex tw-items-center tw-pt-0\">\n            <cide-ele-input \n              formControlName=\"sygmt_isactive\"\n              type=\"checkbox\"\n              label=\"Active\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n        </div>\n        <!-- Second Row - JSON Configuration and Description/Save side by side -->\n        <div class=\"tw-flex tw-gap-4\">\n          <!-- JSON Configuration (60% width) -->\n          <div class=\"tw-w-3/5\">\n            <cide-ele-json-editor \n              formControlName=\"sygmt_configuration\" \n              label=\"Configuration*\" \n              size=\"sm\">\n            </cide-ele-json-editor>\n          </div>\n          \n          <!-- Description and Save Button (40% width) -->\n          <div class=\"tw-w-2/5 tw-flex tw-flex-col tw-space-y-4\">\n            <!-- Description -->\n            <div class=\"tw-flex-1\">\n              <cide-ele-textarea \n                formControlName=\"sygmt_desc\" \n                label=\"Description\" \n                placeholder=\"Enter description\"\n                size=\"sm\"\n                [maxlength]=\"255\" \n                [rows]=\"4\">\n              </cide-ele-textarea>\n            </div>\n            \n            <!-- Action Buttons -->\n            <div class=\"tw-flex tw-justify-end tw-space-x-2\">\n              <button \n                cideEleButton \n                variant=\"outline\" \n                size=\"sm\" \n                type=\"button\" \n                (click)=\"cancelForm()\"\n                [disabled]=\"loading()\"\n                class=\"tw-px-4 tw-py-2\">\n                Cancel\n              </button>\n              <button \n                cideEleButton \n                variant=\"primary\" \n                size=\"sm\" \n                type=\"submit\"\n                [disabled]=\"loading()\"\n                class=\"tw-px-4 tw-py-2\" [leftIcon]=\"isEditMode() ? 'edit' : 'add'\">\n                {{ isEditMode() ? 'Update' : 'Save' }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n\n  <!-- Header Section with Filters -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-4 tw-py-2 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n      <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-2 sm:tw-space-y-0\">\n        \n        <!-- Title -->\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">category</cide-ele-icon>\n          <h5 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">General Master Type Management</h5>\n        </div>\n\n        <!-- Actions -->\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-2 sm:tw-space-y-0 sm:tw-space-x-3\">\n\n        </div>\n      </div>\n\n      <!-- Error Message -->\n      @if (error()) {\n        <div class=\"tw-mt-3 tw-p-3 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n          <div class=\"tw-flex tw-items-start\">\n            <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-4 tw-h-4 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n            <div class=\"tw-ml-2\">\n              <h3 class=\"tw-text-xs tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n              <p class=\"tw-text-xs tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n      \n      <!-- Data Grid Component -->\n      <div class=\"tw-h-full tw-overflow-auto\">\n        <cide-ele-data-grid \n          [config]=\"gridConfig()\" \n          [templateRenderers]=\"templateRenderers()\"\n          (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Template Renderers -->\n<ng-template #typeDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-flex-col\">\n    <div class=\"tw-font-medium tw-text-gray-900\">{{ row.sygmt_title || 'N/A' }}</div>\n    <div class=\"tw-text-sm tw-text-gray-500 tw-truncate tw-max-w-xs\" title=\"{{ row.sygmt_desc || 'No description' }}\">{{ row.sygmt_desc || 'No description' }}</div>\n  </div>\n</ng-template>\n\n<ng-template #typeStatusRendererTemplate let-row=\"row\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n        [class.tw-bg-green-100]=\"row.sygmt_isactive\"\n        [class.tw-text-green-800]=\"row.sygmt_isactive\"\n        [class.tw-bg-red-100]=\"!row.sygmt_isactive\"\n        [class.tw-text-red-800]=\"!row.sygmt_isactive\">\n    {{ row.sygmt_isactive ? 'Active' : 'Inactive' }}\n  </span>\n</ng-template>\n\n\n\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\">\n  <cide-ele-dropdown\n    [items]=\"getActionDropdownItems(row)\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "customRenderers", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { 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: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideEleJsonEditorComponent, selector: "cide-ele-json-editor", inputs: ["label", "helperText", "required", "disabled", "showCharacterCount", "config"], outputs: ["valueChange", "objectChange", "errorsChange", "validChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: GeneralMasterTypeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cide-core-app-general-master-type', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        CideEleDataGridComponent,
+                        CideEleButtonComponent,
+                        CideInputComponent,
+                        CideSelectComponent,
+                        CideTextareaComponent,
+                        CideIconComponent,
+                        CideEleDropdownComponent,
+                        CideEleJsonEditorComponent
+                    ], template: "<!-- General Master Type Container -->\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Quick Add Form Section -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-white\">\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n          <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Type' : 'Quick Add Type' }}</h6>\n        </div>\n        \n        <!-- Parent Type Info (shown when adding child) -->\n        @if (typeForm.get('sygmt_id_sygmt')?.value) {\n          <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\n              <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\n              <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ getParentTypeDisplay() }}</span>\n            </div>\n            <button \n              cideEleButton \n              variant=\"ghost\" \n              size=\"xs\" \n              type=\"button\" \n              (click)=\"clearParentType()\" \n              class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n              <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n              </svg>\n            </button>\n          </div>\n        }\n      </div>\n\n      <form [formGroup]=\"typeForm\" (ngSubmit)=\"onSubmit($event)\" class=\"tw-space-y-2 tw-relative\">\n        <!-- Hidden field for parent type ID -->\n        <input type=\"hidden\" formControlName=\"sygmt_id_sygmt\">\n        \n        <!-- First Row - Basic fields -->\n        <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-6 tw-gap-2\">\n          <!-- Type Code -->\n          <div class=\"lg:tw-col-span-1\">\n            <cide-ele-input \n              formControlName=\"sygmt_code\" \n              label=\"Type Code*\" \n              placeholder=\"Enter type code\"\n              size=\"sm\"\n              [maxlength]=\"40\">\n            </cide-ele-input>\n          </div>\n          \n          <!-- Type Title -->\n          <div class=\"lg:tw-col-span-2\">\n            <cide-ele-input \n              formControlName=\"sygmt_title\" \n              label=\"Type Title*\" \n              placeholder=\"Enter type title\"\n              size=\"sm\"\n              [maxlength]=\"100\">\n            </cide-ele-input>\n          </div>\n          \n          <!-- Active Status -->\n          <div class=\"lg:tw-col-span-1 tw-flex tw-items-center tw-pt-0\">\n            <cide-ele-input \n              formControlName=\"sygmt_isactive\"\n              type=\"checkbox\"\n              label=\"Active\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n        </div>\n        <!-- Second Row - JSON Configuration and Description/Save side by side -->\n        <div class=\"tw-flex tw-gap-4\">\n          <!-- JSON Configuration (60% width) -->\n          <div class=\"tw-w-3/5\">\n            <cide-ele-json-editor \n              formControlName=\"sygmt_configuration\" \n              label=\"Configuration*\" \n              size=\"sm\">\n            </cide-ele-json-editor>\n          </div>\n          \n          <!-- Description and Save Button (40% width) -->\n          <div class=\"tw-w-2/5 tw-flex tw-flex-col tw-space-y-4\">\n            <!-- Description -->\n            <div class=\"tw-flex-1\">\n              <cide-ele-textarea \n                formControlName=\"sygmt_desc\" \n                label=\"Description\" \n                placeholder=\"Enter description\"\n                size=\"sm\"\n                [maxlength]=\"255\" \n                [rows]=\"4\">\n              </cide-ele-textarea>\n            </div>\n            \n            <!-- Action Buttons -->\n            <div class=\"tw-flex tw-justify-end tw-space-x-2\">\n              <button \n                cideEleButton \n                variant=\"outline\" \n                size=\"sm\" \n                type=\"button\" \n                (click)=\"cancelForm()\"\n                [disabled]=\"loading()\"\n                class=\"tw-px-4 tw-py-2\">\n                Cancel\n              </button>\n              <button \n                cideEleButton \n                variant=\"primary\" \n                size=\"sm\" \n                type=\"submit\"\n                [disabled]=\"loading()\"\n                class=\"tw-px-4 tw-py-2\" [leftIcon]=\"isEditMode() ? 'edit' : 'add'\">\n                {{ isEditMode() ? 'Update' : 'Save' }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n\n  <!-- Header Section with Filters -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-4 tw-py-2 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n      <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-2 sm:tw-space-y-0\">\n        \n        <!-- Title -->\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">category</cide-ele-icon>\n          <h5 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">General Master Type Management</h5>\n        </div>\n\n        <!-- Actions -->\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-2 sm:tw-space-y-0 sm:tw-space-x-3\">\n\n        </div>\n      </div>\n\n      <!-- Error Message -->\n      @if (error()) {\n        <div class=\"tw-mt-3 tw-p-3 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n          <div class=\"tw-flex tw-items-start\">\n            <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-4 tw-h-4 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n            <div class=\"tw-ml-2\">\n              <h3 class=\"tw-text-xs tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n              <p class=\"tw-text-xs tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n      \n      <!-- Data Grid Component -->\n      <div class=\"tw-h-full tw-overflow-auto\">\n        <cide-ele-data-grid \n          [config]=\"gridConfig()\" \n          [templateRenderers]=\"templateRenderers()\"\n          (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Template Renderers -->\n<ng-template #typeDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-flex-col\">\n    <div class=\"tw-font-medium tw-text-gray-900\">{{ row.sygmt_title || 'N/A' }}</div>\n    <div class=\"tw-text-sm tw-text-gray-500 tw-truncate tw-max-w-xs\" title=\"{{ row.sygmt_desc || 'No description' }}\">{{ row.sygmt_desc || 'No description' }}</div>\n  </div>\n</ng-template>\n\n<ng-template #typeStatusRendererTemplate let-row=\"row\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n        [class.tw-bg-green-100]=\"row.sygmt_isactive\"\n        [class.tw-text-green-800]=\"row.sygmt_isactive\"\n        [class.tw-bg-red-100]=\"!row.sygmt_isactive\"\n        [class.tw-text-red-800]=\"!row.sygmt_isactive\">\n    {{ row.sygmt_isactive ? 'Active' : 'Inactive' }}\n  </span>\n</ng-template>\n\n\n\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\">\n  <cide-ele-dropdown\n    [items]=\"getActionDropdownItems(row)\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>" }]
+        }] });
+
+export { GeneralMasterTypeComponent };
+//# sourceMappingURL=cloud-ide-core-general-master-type.component-B26auJZw.mjs.map