cloud-ide-core 2.0.104 → 2.0.110

package/fesm2022/cloud-ide-core-page-form.component-C3xTQLI3.mjs

@@ -0,0 +1,527 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, signal, computed, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { NonNullableFormBuilder, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { CideCorePageManagementService, MenuManagementService } from './cloud-ide-core.mjs';
+import { AppStateHelperService, ComponentContextService, RightsService } from 'cloud-ide-layout';
+import { ConfirmationService, CideEleButtonComponent, CideInputComponent, CideSelectComponent, CideTextareaComponent, CideEleJsonEditorComponent, CideFormFieldErrorComponent } from 'cloud-ide-element';
+import { generateObjectFromString, generateStringFromObject } from 'cloud-ide-lms-model';
+
+class CideCorePageFormComponent {
+    destroyRef = inject(DestroyRef);
+    pageService = inject(CideCorePageManagementService);
+    menuService = inject(MenuManagementService);
+    appState = inject(AppStateHelperService);
+    fb = inject(NonNullableFormBuilder);
+    router = inject(Router);
+    route = inject(ActivatedRoute);
+    componentContextService = inject(ComponentContextService);
+    rightsService = inject(RightsService);
+    confirmationService = inject(ConfirmationService);
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    success = signal(null, ...(ngDevMode ? [{ debugName: "success" }] : []));
+    // Page information
+    pageId = signal(null, ...(ngDevMode ? [{ debugName: "pageId" }] : []));
+    isEditMode = signal(false, ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    // Menu mapping
+    enableMenuMapping = signal(false, ...(ngDevMode ? [{ debugName: "enableMenuMapping" }] : []));
+    menuMappingMode = signal('none', ...(ngDevMode ? [{ debugName: "menuMappingMode" }] : []));
+    existingMenus = signal([], ...(ngDevMode ? [{ debugName: "existingMenus" }] : []));
+    menusLoading = signal(false, ...(ngDevMode ? [{ debugName: "menusLoading" }] : []));
+    selectedMenuId = signal(null, ...(ngDevMode ? [{ debugName: "selectedMenuId" }] : []));
+    // New menu form
+    newMenuForm = this.fb.group({
+        syme_title: ['', [Validators.required, Validators.maxLength(100)]],
+        syme_desc: ['', [Validators.maxLength(255)]],
+        syme_type: ['menu', [Validators.required]],
+        syme_path: ['', [Validators.maxLength(255)]],
+        syme_icon: ['', [Validators.maxLength(40)]],
+        syme_id_syme: [''],
+        syme_order_by: [1, [Validators.required, Validators.min(1)]],
+        syme_isactive: [true]
+    });
+    pageForm = this.fb.group({
+        sypg_title: ['', [Validators.required, Validators.maxLength(100)]],
+        sypg_desc: ['', [Validators.maxLength(255)]],
+        sypg_page_code: ['', [Validators.required, Validators.maxLength(40), Validators.pattern(/^[a-zA-Z0-9_]+$/)]],
+        sypg_configuration: ['{}', [Validators.required]],
+        sypg_isactive: [true]
+    });
+    // Menu options for dropdown
+    menuOptions = computed(() => {
+        return this.existingMenus().map(menu => ({
+            value: menu._id || '',
+            label: menu.syme_title || 'Untitled Menu'
+        }));
+    }, ...(ngDevMode ? [{ debugName: "menuOptions" }] : []));
+    constructor() {
+        this.setupFormSubscriptions();
+    }
+    ngOnInit() {
+        // Initialize rights for page management
+        this.rightsService.initializeRights('core_page_management');
+        // Check for page ID in query parameters
+        this.checkForPageId();
+        // Load menus for mapping (only in create mode)
+        if (!this.isEditMode()) {
+            this.loadMenus();
+        }
+    }
+    // Load menus for mapping
+    loadMenus() {
+        this.menusLoading.set(true);
+        const payload = {
+            pageIndex: 1,
+            pageSize: 1000,
+            sort: { order: 'asc', key: 'syme_order_by' }
+        };
+        this.menuService.getMenuList(payload)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                if (response.success && response.data) {
+                    this.existingMenus.set(response.data);
+                }
+                this.menusLoading.set(false);
+            },
+            error: (error) => {
+                console.error('Error loading menus:', error);
+                this.menusLoading.set(false);
+            }
+        });
+    }
+    // Toggle menu mapping section
+    toggleMenuMapping() {
+        this.enableMenuMapping.set(!this.enableMenuMapping());
+        if (this.enableMenuMapping() && this.existingMenus().length === 0) {
+            this.loadMenus();
+        }
+    }
+    // Handle menu mapping mode change
+    onMenuMappingModeChange(mode) {
+        this.menuMappingMode.set(mode);
+        if (mode === 'existing') {
+            this.selectedMenuId.set(null);
+        }
+        else if (mode === 'new') {
+            // Auto-fill menu title from page title
+            const pageTitle = this.pageForm.get('sypg_title')?.value || '';
+            this.newMenuForm.patchValue({
+                syme_title: pageTitle,
+                syme_path: this.pageForm.get('sypg_page_code')?.value || ''
+            });
+        }
+    }
+    // Handle menu selection change
+    onMenuSelectionChange(value) {
+        // Convert the value to string or null
+        if (value === null || value === undefined || value === '') {
+            this.selectedMenuId.set(null);
+        }
+        else if (typeof value === 'string') {
+            this.selectedMenuId.set(value);
+        }
+        else if (typeof value === 'number') {
+            this.selectedMenuId.set(String(value));
+        }
+        else if (Array.isArray(value) && value.length > 0) {
+            // If it's an array, take the first value and convert to string
+            this.selectedMenuId.set(String(value[0]));
+        }
+        else {
+            this.selectedMenuId.set(null);
+        }
+    }
+    // Check for page ID in query parameters
+    checkForPageId() {
+        console.log('🔍 Checking for page ID in query parameters', this.route.params);
+        this.route.params.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(params => {
+            console.log('🔍 Query params:', params);
+            // Check for pageId, id, or page parameter
+            const queryParams = params['query'];
+            const queryData = generateObjectFromString(queryParams);
+            // If pageId is an object string (from generateStringFromObject), try to parse it
+            const pageId = queryData.sypg_id;
+            if (pageId) {
+                console.log('🔍 Page ID found in query params:', pageId);
+                this.pageId.set(pageId);
+                this.isEditMode.set(true);
+                this.loadPageData(pageId);
+            }
+            else {
+                console.log('🆕 No page ID found - creating new page');
+                this.isEditMode.set(false);
+                this.pageId.set(null);
+            }
+        });
+    }
+    // Load page data for editing
+    loadPageData(pageId) {
+        this.loading.set(true);
+        this.error.set(null);
+        console.log('📥 Loading page data for ID:', pageId);
+        this.pageService.getPageById(pageId).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+            next: (response) => {
+                console.log('✅ Page data loaded:', response);
+                if (response?.success && response?.data) {
+                    const pageData = response.data;
+                    if (pageData) {
+                        this.populateFormWithPageData(pageData);
+                        this.success.set('Page data loaded successfully');
+                    }
+                    else {
+                        this.error.set('Page data not found');
+                        console.error('❌ Page data not found in response:', response);
+                    }
+                }
+                else {
+                    this.error.set('Failed to load page data');
+                    console.error('❌ Page data response invalid:', response);
+                }
+                this.loading.set(false);
+            },
+            error: (err) => {
+                console.error('❌ Failed to load page data:', err);
+                let errorMessage = 'Failed to load page data.';
+                if (err?.error?.message) {
+                    errorMessage = err.error.message;
+                }
+                else if (err?.message) {
+                    errorMessage = err.message;
+                }
+                else if (err?.status === 404) {
+                    errorMessage = 'Page not found.';
+                }
+                else if (err?.status === 500) {
+                    errorMessage = 'Server error. Please try again later.';
+                }
+                this.error.set(errorMessage);
+                this.loading.set(false);
+            }
+        });
+    }
+    // Populate form with page data
+    populateFormWithPageData(pageData) {
+        try {
+            console.log('📝 Populating form with page data:', pageData);
+            const formData = {
+                sypg_title: pageData.sypg_title || '',
+                sypg_desc: pageData.sypg_desc || '',
+                sypg_page_code: pageData.sypg_page_code || '',
+                sypg_configuration: pageData.sypg_configuration ? JSON.stringify(pageData.sypg_configuration) : '{}',
+                sypg_isactive: pageData.sypg_isactive !== undefined ? pageData.sypg_isactive : true
+            };
+            // Patch the form with the page data
+            this.pageForm.patchValue(formData, { emitEvent: false });
+            console.log('✅ Form populated successfully');
+        }
+        catch (error) {
+            console.error('💥 Error populating form with page data:', error);
+            this.error.set('Error loading page data into form');
+        }
+    }
+    setupFormSubscriptions() {
+        // Watch for form changes to enable/disable save button
+        this.pageForm.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            // Form validation is handled by computed signals
+        });
+    }
+    // Computed values
+    isFormDirty = computed(() => this.pageForm.dirty, ...(ngDevMode ? [{ debugName: "isFormDirty" }] : []));
+    // Rights computed signals
+    canCreate = computed(() => this.rightsService.hasRight('CREATE'), ...(ngDevMode ? [{ debugName: "canCreate" }] : []));
+    canEdit = computed(() => this.rightsService.hasRight('EDIT'), ...(ngDevMode ? [{ debugName: "canEdit" }] : []));
+    canView = computed(() => this.rightsService.hasRight('VIEW'), ...(ngDevMode ? [{ debugName: "canView" }] : []));
+    // Form submission
+    savePage() {
+        const requiredRight = this.isEditMode() ? 'EDIT' : 'CREATE';
+        if (!this.rightsService.hasRight(requiredRight)) {
+            this.error.set(`You do not have permission to ${this.isEditMode() ? 'edit' : 'create'} pages`);
+            return;
+        }
+        if (!this.pageForm.valid) {
+            this.markFormAsTouched();
+            return;
+        }
+        // Validate menu mapping if enabled
+        if (this.enableMenuMapping() && !this.isEditMode()) {
+            if (this.menuMappingMode() === 'existing' && !this.selectedMenuId()) {
+                this.error.set('Please select a menu item to map this page to');
+                return;
+            }
+            if (this.menuMappingMode() === 'new' && !this.newMenuForm.valid) {
+                this.markMenuFormAsTouched();
+                this.error.set('Please fill in all required menu fields');
+                return;
+            }
+        }
+        const formValue = this.pageForm.getRawValue();
+        const pageData = {
+            _id: this.pageId() || '',
+            sypg_title: formValue.sypg_title,
+            sypg_desc: formValue.sypg_desc,
+            sypg_page_code: formValue.sypg_page_code,
+            sypg_configuration: formValue.sypg_configuration,
+            sypg_isactive: formValue.sypg_isactive
+        };
+        this.loading.set(true);
+        this.error.set(null);
+        this.pageService.createOrUpdatePage(pageData)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                if (response.success) {
+                    const savedPageId = response.data?._id || this.pageId();
+                    const savedPageData = response.data;
+                    this.success.set(this.isEditMode() ? 'Page updated successfully' : 'Page created successfully');
+                    console.log('✅ Page saved successfully');
+                    // Handle menu mapping if enabled (only in create mode)
+                    if (this.enableMenuMapping() && !this.isEditMode() && savedPageId) {
+                        this.handleMenuMapping(savedPageId, savedPageData || null);
+                    }
+                    else {
+                        // For new pages, show confirmation dialog suggesting to create theme
+                        if (!this.isEditMode() && savedPageId && savedPageData) {
+                            this.showCreateThemeConfirmation(savedPageId, savedPageData);
+                        }
+                        else {
+                            setTimeout(() => {
+                                this.componentContextService.close(['/control-panel/page']);
+                            }, 1500);
+                        }
+                    }
+                    this.loading.set(false);
+                }
+                else {
+                    this.error.set(response.message || 'Failed to save page');
+                    console.error('❌ Failed to save page:', response.message);
+                    this.loading.set(false);
+                }
+            },
+            error: (error) => {
+                console.error('❌ Error saving page:', error);
+                this.error.set('Failed to save page. Please try again.');
+                this.loading.set(false);
+            }
+        });
+    }
+    // Handle menu mapping after page creation
+    handleMenuMapping(pageId, pageData) {
+        if (this.menuMappingMode() === 'none') {
+            setTimeout(() => {
+                this.componentContextService.close(['/control-panel/page']);
+            }, 1500);
+            return;
+        }
+        if (this.menuMappingMode() === 'existing' && this.selectedMenuId()) {
+            // Update existing menu to include this page
+            this.menuService.getMenuItemById(this.selectedMenuId())
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe({
+                next: (response) => {
+                    if (response.success && response.data) {
+                        const menu = response.data;
+                        const existingPages = Array.isArray(menu.syme_pages_id_sypg)
+                            ? [...menu.syme_pages_id_sypg]
+                            : [];
+                        // Check if page ID already exists
+                        const pageIdStr = pageId.toString();
+                        if (!existingPages.some(p => p?.toString() === pageIdStr)) {
+                            existingPages.push(pageId);
+                        }
+                        const updatePayload = {
+                            ...menu,
+                            syme_pages_id_sypg: existingPages
+                        };
+                        this.menuService.updateMenuItem(this.selectedMenuId(), updatePayload)
+                            .pipe(takeUntilDestroyed(this.destroyRef))
+                            .subscribe({
+                            next: () => {
+                                this.success.set('Page created and mapped to menu successfully');
+                                this.loading.set(false);
+                                // Show theme creation confirmation after menu mapping
+                                if (pageData) {
+                                    this.showCreateThemeConfirmation(pageId, pageData);
+                                }
+                                else {
+                                    // Fallback to form data if pageData is not available
+                                    const formValue = this.pageForm.getRawValue();
+                                    const fallbackPageData = {
+                                        _id: pageId,
+                                        sypg_title: formValue.sypg_title,
+                                        sypg_page_code: formValue.sypg_page_code,
+                                        sypg_desc: formValue.sypg_desc,
+                                        sypg_configuration: formValue.sypg_configuration,
+                                        sypg_isactive: formValue.sypg_isactive
+                                    };
+                                    this.showCreateThemeConfirmation(pageId, fallbackPageData);
+                                }
+                            },
+                            error: (error) => {
+                                console.error('Error mapping page to menu:', error);
+                                this.success.set('Page created successfully, but menu mapping failed');
+                                setTimeout(() => {
+                                    this.componentContextService.close(['/control-panel/page']);
+                                }, 1500);
+                                this.loading.set(false);
+                            }
+                        });
+                    }
+                    else {
+                        this.loading.set(false);
+                        setTimeout(() => {
+                            this.componentContextService.close(['/control-panel/page']);
+                        }, 1500);
+                    }
+                },
+                error: (error) => {
+                    console.error('Error fetching menu:', error);
+                    this.success.set('Page created successfully, but menu mapping failed');
+                    setTimeout(() => {
+                        this.componentContextService.close(['/control-panel/page']);
+                    }, 1500);
+                    this.loading.set(false);
+                }
+            });
+        }
+        else if (this.menuMappingMode() === 'new') {
+            // Create new menu item with this page
+            const menuFormValue = this.newMenuForm.getRawValue();
+            const newMenuPayload = {
+                syme_title: menuFormValue.syme_title,
+                syme_desc: menuFormValue.syme_desc || '',
+                syme_type: menuFormValue.syme_type,
+                syme_path: menuFormValue.syme_path || this.pageForm.get('sypg_page_code')?.value || '',
+                syme_icon: menuFormValue.syme_icon || '',
+                syme_id_syme: menuFormValue.syme_id_syme || undefined,
+                syme_order_by: menuFormValue.syme_order_by,
+                syme_isactive: menuFormValue.syme_isactive,
+                syme_pages_id_sypg: [pageId]
+            };
+            this.menuService.createMenuItem(newMenuPayload)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe({
+                next: () => {
+                    this.success.set('Page created and new menu item created successfully');
+                    this.loading.set(false);
+                    // Show theme creation confirmation after menu creation
+                    if (pageData) {
+                        this.showCreateThemeConfirmation(pageId, pageData);
+                    }
+                    else {
+                        // Fallback to form data if pageData is not available
+                        const formValue = this.pageForm.getRawValue();
+                        const fallbackPageData = {
+                            _id: pageId,
+                            sypg_title: formValue.sypg_title,
+                            sypg_page_code: formValue.sypg_page_code,
+                            sypg_desc: formValue.sypg_desc,
+                            sypg_configuration: formValue.sypg_configuration,
+                            sypg_isactive: formValue.sypg_isactive
+                        };
+                        this.showCreateThemeConfirmation(pageId, fallbackPageData);
+                    }
+                },
+                error: (error) => {
+                    console.error('Error creating menu:', error);
+                    this.success.set('Page created successfully, but menu creation failed');
+                    setTimeout(() => {
+                        this.componentContextService.close(['/control-panel/page']);
+                    }, 1500);
+                    this.loading.set(false);
+                }
+            });
+        }
+    }
+    // Mark menu form as touched
+    markMenuFormAsTouched() {
+        Object.keys(this.newMenuForm.controls).forEach(key => {
+            const control = this.newMenuForm.get(key);
+            control?.markAsTouched();
+        });
+    }
+    // Cancel form
+    cancelForm() {
+        this.componentContextService.close(['/control-panel/page']);
+    }
+    // Go back to page list
+    goBack() {
+        this.componentContextService.close(['/control-panel/page']);
+    }
+    // Reset form - reload data in edit mode, reset to defaults in create mode
+    resetForm() {
+        if (this.isEditMode() && this.pageId()) {
+            this.loadPageData(this.pageId());
+        }
+        else {
+            this.pageForm.reset({
+                sypg_isactive: true,
+                sypg_configuration: '{}'
+            });
+        }
+    }
+    // Mark form as touched to trigger validation display
+    markFormAsTouched() {
+        Object.keys(this.pageForm.controls).forEach(key => {
+            const control = this.pageForm.get(key);
+            control?.markAsTouched();
+        });
+    }
+    /**
+     * Show confirmation dialog suggesting to create theme after page creation
+     */
+    showCreateThemeConfirmation(pageId, pageData) {
+        this.confirmationService.ask({
+            title: 'Page Created Successfully!',
+            message: `Would you like to create a theme for this page? This will set up the default theme configuration for "${pageData.sypg_title || pageData.sypg_page_code}".`,
+            confirmText: 'Create Theme',
+            cancelText: 'Skip',
+            type: 'success',
+            icon: 'palette'
+        }).then((confirmed) => {
+            if (confirmed) {
+                // Navigate to theme page with page data
+                const queryData = {
+                    sypg_id: pageId,
+                    sypg_title: pageData.sypg_title || '',
+                    sypg_page_code: pageData.sypg_page_code || ''
+                };
+                // Generate query string from object using utility function
+                const queryString = generateStringFromObject(queryData);
+                // Navigate to theme page with query params
+                this.router.navigate(['/control-panel/page-theme', queryString]);
+            }
+            else {
+                // User chose to skip - close and go to page list
+                setTimeout(() => {
+                    this.componentContextService.close(['/control-panel/page']);
+                }, 500);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePageFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCorePageFormComponent, isStandalone: true, selector: "cide-core-page-form", ngImport: i0, template: "<div class=\"page-form-wrapper\">\n  <div class=\"page-form-container\">\n    <form class=\"page-form\" [formGroup]=\"pageForm\" [class.loading]=\"loading()\" (ngSubmit)=\"savePage()\">\n      \n      <!-- Header Section -->\n      <div class=\"form-header\">\n        <h2 class=\"form-title\">{{ isEditMode() ? 'Edit Page' : 'Create Page' }}</h2>\n        <p class=\"form-subtitle\">\n          {{ isEditMode() ? 'Update page information and configuration' : 'Create a new page with configuration' }}\n        </p>\n      </div>\n\n      <!-- Success and Error Messages -->\n      <div class=\"form-messages\">\n        @if (success()) {\n          <div class=\"alert alert-success\">\n            <svg class=\"alert-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"></path>\n            </svg>\n            <span>{{ success() }}</span>\n          </div>\n        }\n        @if (error()) {\n          <div class=\"alert alert-error\">\n            <svg class=\"alert-icon\" 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\"></path>\n            </svg>\n            <span>{{ error() }}</span>\n          </div>\n        }\n      </div>\n\n      <!-- Form Content -->\n      <div class=\"form-content\">\n        <div class=\"form-row form-row-2\">\n          <div class=\"form-field\">\n            <cide-ele-input \n              id=\"sypg_title\"\n              label=\"Page Title\" \n              formControlName=\"sypg_title\"\n              placeholder=\"Enter page title\"\n              size=\"md\">\n            </cide-ele-input>\n          </div>\n          \n          <div class=\"form-field\">\n            <cide-ele-input \n              id=\"sypg_page_code\"\n              label=\"Page Code\" \n              formControlName=\"sypg_page_code\"\n              placeholder=\"Enter page code (alphanumeric and underscore only)\"\n              size=\"md\">\n            </cide-ele-input>\n          </div>\n        </div>\n\n        <div class=\"form-row form-row-1\">\n          <div class=\"form-field\">\n            <cide-ele-textarea \n              id=\"sypg_desc\"\n              label=\"Page Description\" \n              formControlName=\"sypg_desc\"\n              placeholder=\"Enter page description\"\n              [rows]=\"3\"\n              size=\"md\">\n            </cide-ele-textarea>\n          </div>\n        </div>\n\n        <div class=\"form-row form-row-1\">\n          <div class=\"form-field\">\n            <cide-ele-json-editor\n              id=\"sypg_configuration\"\n              label=\"Configuration JSON\"\n              formControlName=\"sypg_configuration\"\n              placeholder='{\"key\": \"value\"}'>\n            </cide-ele-json-editor>\n          </div>\n        </div>\n\n        <div class=\"form-row form-row-1\">\n          <div class=\"form-field\">\n            <cide-ele-input\n              id=\"sypg_isactive\"\n              type=\"checkbox\"\n              formControlName=\"sypg_isactive\"\n              label=\"Active Status\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n        </div>\n\n        <!-- Menu Mapping Section (Only in Create Mode) -->\n        @if (!isEditMode()) {\n          <div class=\"form-row form-row-1\">\n            <div class=\"form-field menu-mapping-section\">\n              <div class=\"menu-mapping-header\">\n                <div class=\"menu-mapping-toggle\">\n                  <input\n                    type=\"checkbox\"\n                    id=\"enable_menu_mapping\"\n                    [checked]=\"enableMenuMapping()\"\n                    (change)=\"toggleMenuMapping()\"\n                    class=\"menu-mapping-checkbox\">\n                  <label for=\"enable_menu_mapping\" class=\"menu-mapping-label-checkbox\">Map to Menu</label>\n                </div>\n                <span class=\"menu-mapping-hint\">Optionally map this page to a menu item during creation</span>\n              </div>\n\n              @if (enableMenuMapping()) {\n                <div class=\"menu-mapping-content\">\n                  <!-- Menu Mapping Mode Selection -->\n                  <div class=\"menu-mapping-mode\">\n                    <label class=\"menu-mapping-label\">Mapping Option:</label>\n                    <div class=\"menu-mapping-options\">\n                      <button\n                        type=\"button\"\n                        class=\"menu-option-btn\"\n                        [class.active]=\"menuMappingMode() === 'none'\"\n                        (click)=\"onMenuMappingModeChange('none')\">\n                        Skip Mapping\n                      </button>\n                      <button\n                        type=\"button\"\n                        class=\"menu-option-btn\"\n                        [class.active]=\"menuMappingMode() === 'existing'\"\n                        (click)=\"onMenuMappingModeChange('existing')\">\n                        Map to Existing Menu\n                      </button>\n                      <button\n                        type=\"button\"\n                        class=\"menu-option-btn\"\n                        [class.active]=\"menuMappingMode() === 'new'\"\n                        (click)=\"onMenuMappingModeChange('new')\">\n                        Create New Menu\n                      </button>\n                    </div>\n                  </div>\n\n                  <!-- Existing Menu Selection -->\n                  @if (menuMappingMode() === 'existing') {\n                    <div class=\"menu-mapping-form\">\n                      <cide-ele-select\n                        label=\"Select Menu Item\"\n                        [options]=\"menuOptions()\"\n                        [loading]=\"menusLoading()\"\n                        placeholder=\"Choose a menu item to map this page to\"\n                        [searchable]=\"true\"\n                        size=\"md\"\n                        [ngModel]=\"selectedMenuId() ?? ''\"\n                        (ngModelChange)=\"onMenuSelectionChange($event)\">\n                      </cide-ele-select>\n                      <p class=\"menu-mapping-help\">\n                        This page will be added to the selected menu item's page list.\n                      </p>\n                    </div>\n                  }\n\n                  <!-- New Menu Creation Form -->\n                  @if (menuMappingMode() === 'new') {\n                    <div class=\"menu-mapping-form\">\n                      <form [formGroup]=\"newMenuForm\" class=\"new-menu-form\">\n                        <div class=\"form-row form-row-2\">\n                          <div class=\"form-field\">\n                            <cide-ele-input\n                              id=\"syme_title\"\n                              label=\"Menu Title\"\n                              formControlName=\"syme_title\"\n                              placeholder=\"Enter menu title\"\n                              size=\"md\">\n                            </cide-ele-input>\n                          </div>\n                          <div class=\"form-field\">\n                            <cide-ele-select\n                              label=\"Menu Type\"\n                              formControlName=\"syme_type\"\n                              [options]=\"[\n                                { value: 'menu', label: 'Menu Item' },\n                                { value: 'section', label: 'Section' },\n                                { value: 'title', label: 'Title' }\n                              ]\"\n                              placeholder=\"Select menu type\"\n                              size=\"md\">\n                            </cide-ele-select>\n                          </div>\n                        </div>\n                        <div class=\"form-row form-row-2\">\n                          <div class=\"form-field\">\n                            <cide-ele-input\n                              id=\"syme_path\"\n                              label=\"Menu Path\"\n                              formControlName=\"syme_path\"\n                              placeholder=\"e.g., /control-panel/page\"\n                              size=\"md\">\n                            </cide-ele-input>\n                          </div>\n                          <div class=\"form-field\">\n                            <cide-ele-input\n                              id=\"syme_icon\"\n                              label=\"Icon\"\n                              formControlName=\"syme_icon\"\n                              placeholder=\"e.g., dashboard, settings\"\n                              size=\"md\">\n                            </cide-ele-input>\n                          </div>\n                        </div>\n                        <div class=\"form-row form-row-1\">\n                          <div class=\"form-field\">\n                            <cide-ele-textarea\n                              id=\"syme_desc\"\n                              label=\"Menu Description\"\n                              formControlName=\"syme_desc\"\n                              placeholder=\"Enter menu description (optional)\"\n                              [rows]=\"2\"\n                              size=\"md\">\n                            </cide-ele-textarea>\n                          </div>\n                        </div>\n                        <div class=\"form-row form-row-2\">\n                          <div class=\"form-field\">\n                            <cide-ele-input\n                              id=\"syme_order_by\"\n                              label=\"Order\"\n                              formControlName=\"syme_order_by\"\n                              type=\"number\"\n                              placeholder=\"Menu order\"\n                              size=\"md\">\n                            </cide-ele-input>\n                          </div>\n                          <div class=\"form-field\">\n                            <cide-ele-input\n                              id=\"syme_isactive\"\n                              type=\"checkbox\"\n                              formControlName=\"syme_isactive\"\n                              label=\"Active\"\n                              size=\"sm\">\n                            </cide-ele-input>\n                          </div>\n                        </div>\n                      </form>\n                      <p class=\"menu-mapping-help\">\n                        A new menu item will be created and this page will be automatically mapped to it.\n                      </p>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n\n      <!-- Form Actions -->\n      <div class=\"form-actions\">\n        <div class=\"form-actions-content\">\n          <!-- Error Message (Left Side) -->\n          <div class=\"form-actions-error\">\n            <cide-form-field-error [formGroup]=\"pageForm\"></cide-form-field-error>\n          </div>\n          \n          <!-- Action Buttons (Right Side) -->\n          <div class=\"form-actions-buttons\">\n            @if (!isEditMode()) {\n              <button cideEleButton\n                type=\"button\" \n                variant=\"secondary\" \n                (click)=\"resetForm()\" \n                leftIcon=\"refresh\"\n                [disabled]=\"loading()\">\n                Reset Form\n              </button>\n            }\n            \n            <button cideEleButton\n              type=\"button\" \n              variant=\"secondary\" \n              (click)=\"cancelForm()\" \n              leftIcon=\"close\"\n              [disabled]=\"loading()\">\n              Cancel\n            </button>\n            \n            <button cideEleButton\n              type=\"submit\" \n              variant=\"primary\" \n              [disabled]=\"loading() || !pageForm.valid\"\n              [loading]=\"loading()\"\n              leftIcon=\"save\">\n              {{ isEditMode() ? 'Update Page' : 'Create Page' }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n", styles: [".page-form-wrapper{min-height:100vh;background-color:#f9fafb;padding:1.5rem;box-sizing:border-box}:host-context(.dark) .page-form-wrapper,:host-context([data-theme=dark]) .page-form-wrapper{background-color:#111827}@media (max-width: 768px){.page-form-wrapper{padding:1rem}}@media (max-width: 480px){.page-form-wrapper{padding:.75rem}}.page-form-container{max-width:1200px;margin:0 auto;width:100%}.page-form{background-color:#fff;border-radius:.5rem;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;border:1px solid #e5e7eb;overflow:hidden;display:flex;flex-direction:column}:host-context(.dark) .page-form,:host-context([data-theme=dark]) .page-form{background-color:#1f2937;border-color:#374151;box-shadow:0 1px 3px #0000004d,0 1px 2px #0003}.page-form.loading{opacity:.6;pointer-events:none}.form-header{padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e5e7eb;background-color:#fff}:host-context(.dark) .form-header,:host-context([data-theme=dark]) .form-header{background-color:#1f2937;border-bottom-color:#374151}.form-header .form-title{font-size:1.5rem;font-weight:700;margin:0 0 .5rem;color:#111827;line-height:1.2}:host-context(.dark) .form-header .form-title,:host-context([data-theme=dark]) .form-header .form-title{color:#f9fafb}.form-header .form-subtitle{font-size:.875rem;margin:0;font-weight:400;color:#6b7280;line-height:1.5}:host-context(.dark) .form-header .form-subtitle,:host-context([data-theme=dark]) .form-header .form-subtitle{color:#9ca3af}@media (max-width: 768px){.form-header{padding:1.25rem 1rem .75rem}.form-header .form-title{font-size:1.25rem}.form-header .form-subtitle{font-size:.8125rem}}.form-messages{padding:0 1.5rem;margin-top:1rem}@media (max-width: 768px){.form-messages{padding:0 1rem}}.alert{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;margin-bottom:1rem;border-radius:.375rem;font-weight:500;font-size:.875rem;border-left:3px solid}.alert .alert-icon{width:1.25rem;height:1.25rem;flex-shrink:0}.alert.alert-success{background-color:#d1fae5;border-left-color:#10b981;color:#065f46}:host-context(.dark) .alert.alert-success,:host-context([data-theme=dark]) .alert.alert-success{background-color:#10b98133;border-left-color:#10b981;color:#6ee7b7}.alert.alert-error{background-color:#fee2e2;border-left-color:#ef4444;color:#991b1b}:host-context(.dark) .alert.alert-error,:host-context([data-theme=dark]) .alert.alert-error{background-color:#ef444433;border-left-color:#ef4444;color:#fca5a5}.form-content{padding:1.5rem;flex:1}@media (max-width: 768px){.form-content{padding:1rem}}@media (max-width: 480px){.form-content{padding:.75rem}}.form-row{display:grid;gap:1rem;margin-bottom:1rem}.form-row:last-child{margin-bottom:0}.form-row.form-row-1{grid-template-columns:1fr}.form-row.form-row-2{grid-template-columns:repeat(2,1fr)}@media (max-width: 768px){.form-row.form-row-2{grid-template-columns:1fr}}.form-row.form-row-3{grid-template-columns:repeat(3,1fr)}@media (max-width: 1024px){.form-row.form-row-3{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.form-row.form-row-3{grid-template-columns:1fr}}.form-row.form-row-4{grid-template-columns:repeat(4,1fr)}@media (max-width: 1024px){.form-row.form-row-4{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.form-row.form-row-4{grid-template-columns:1fr}}.form-field{display:flex;flex-direction:column}.form-actions{padding:1.25rem 1.5rem;border-top:1px solid #e5e7eb;background-color:#fff;margin-top:auto}:host-context(.dark) .form-actions,:host-context([data-theme=dark]) .form-actions{background-color:#1f2937;border-top-color:#374151}@media (max-width: 768px){.form-actions{padding:1rem}}@media (max-width: 480px){.form-actions{padding:.75rem}}.form-actions-content{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;flex-wrap:wrap}@media (max-width: 768px){.form-actions-content{flex-direction:column;align-items:stretch}}.form-actions-error{flex:1;min-width:0;display:flex;align-items:center}@media (max-width: 768px){.form-actions-error{width:100%;margin-bottom:.75rem}}.form-actions-buttons{display:flex;gap:.75rem;align-items:center;flex-shrink:0}@media (max-width: 768px){.form-actions-buttons{width:100%;justify-content:stretch}.form-actions-buttons button{flex:1;min-width:0}}@media (max-width: 480px){.form-actions-buttons{flex-direction:column}.form-actions-buttons button{width:100%}}cide-ele-input,cide-ele-textarea,cide-ele-json-editor,cide-ele-select{width:100%}cide-ele-input:focus-within,cide-ele-textarea:focus-within,cide-ele-json-editor:focus-within,cide-ele-select:focus-within{outline:none}.menu-mapping-section{border:1px solid #e5e7eb;border-radius:.5rem;padding:1rem;background-color:#f9fafb;margin-top:1rem}:host-context(.dark) .menu-mapping-section,:host-context([data-theme=dark]) .menu-mapping-section{background-color:#1f2937;border-color:#374151}.menu-mapping-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;gap:1rem}@media (max-width: 768px){.menu-mapping-header{flex-direction:column;align-items:flex-start}}.menu-mapping-toggle{display:flex;align-items:center;gap:.5rem}.menu-mapping-checkbox{width:1rem;height:1rem;cursor:pointer}.menu-mapping-label-checkbox{font-weight:500;font-size:.875rem;color:#374151;cursor:pointer}:host-context(.dark) .menu-mapping-label-checkbox,:host-context([data-theme=dark]) .menu-mapping-label-checkbox{color:#d1d5db}.menu-mapping-hint{font-size:.75rem;color:#6b7280;font-style:italic}:host-context(.dark) .menu-mapping-hint,:host-context([data-theme=dark]) .menu-mapping-hint{color:#9ca3af}.menu-mapping-content{margin-top:1rem;padding-top:1rem;border-top:1px solid #e5e7eb}:host-context(.dark) .menu-mapping-content,:host-context([data-theme=dark]) .menu-mapping-content{border-top-color:#374151}.menu-mapping-mode{margin-bottom:1rem}.menu-mapping-label{display:block;font-size:.875rem;font-weight:500;color:#374151;margin-bottom:.5rem}:host-context(.dark) .menu-mapping-label,:host-context([data-theme=dark]) .menu-mapping-label{color:#d1d5db}.menu-mapping-options{display:flex;gap:.5rem;flex-wrap:wrap}.menu-option-btn{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background-color:#fff;color:#374151;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}:host-context(.dark) .menu-option-btn,:host-context([data-theme=dark]) .menu-option-btn{background-color:#374151;border-color:#4b5563;color:#d1d5db}.menu-option-btn:hover{background-color:#f3f4f6;border-color:#9ca3af}:host-context(.dark) .menu-option-btn:hover,:host-context([data-theme=dark]) .menu-option-btn:hover{background-color:#4b5563;border-color:#6b7280}.menu-option-btn.active{background-color:#3b82f6;border-color:#3b82f6;color:#fff}:host-context(.dark) .menu-option-btn.active,:host-context([data-theme=dark]) .menu-option-btn.active{background-color:#2563eb;border-color:#2563eb}.menu-mapping-form{margin-top:1rem;padding:1rem;background-color:#fff;border-radius:.375rem;border:1px solid #e5e7eb}:host-context(.dark) .menu-mapping-form,:host-context([data-theme=dark]) .menu-mapping-form{background-color:#111827;border-color:#374151}.new-menu-form .form-row{margin-bottom:1rem}.new-menu-form .form-row:last-child{margin-bottom:0}.menu-mapping-help{margin-top:.75rem;font-size:.75rem;color:#6b7280;font-style:italic}:host-context(.dark) .menu-mapping-help,:host-context([data-theme=dark]) .menu-mapping-help{color:#9ca3af}@media (max-width: 480px){.page-form-wrapper{padding:.5rem}.form-header{padding:1rem .75rem .75rem}.form-content,.form-actions{padding:.75rem}.menu-mapping-options{flex-direction:column}.menu-mapping-options .menu-option-btn{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: 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", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { 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: CideEleJsonEditorComponent, selector: "cide-ele-json-editor", inputs: ["label", "helperText", "required", "disabled", "showCharacterCount", "config"], outputs: ["valueChange", "objectChange", "errorsChange", "validChange"] }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePageFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cide-core-page-form', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        CideEleButtonComponent,
+                        CideInputComponent,
+                        CideSelectComponent,
+                        CideTextareaComponent,
+                        CideEleJsonEditorComponent,
+                        CideFormFieldErrorComponent
+                    ], template: "<div class=\"page-form-wrapper\">\n  <div class=\"page-form-container\">\n    <form class=\"page-form\" [formGroup]=\"pageForm\" [class.loading]=\"loading()\" (ngSubmit)=\"savePage()\">\n      \n      <!-- Header Section -->\n      <div class=\"form-header\">\n        <h2 class=\"form-title\">{{ isEditMode() ? 'Edit Page' : 'Create Page' }}</h2>\n        <p class=\"form-subtitle\">\n          {{ isEditMode() ? 'Update page information and configuration' : 'Create a new page with configuration' }}\n        </p>\n      </div>\n\n      <!-- Success and Error Messages -->\n      <div class=\"form-messages\">\n        @if (success()) {\n          <div class=\"alert alert-success\">\n            <svg class=\"alert-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"></path>\n            </svg>\n            <span>{{ success() }}</span>\n          </div>\n        }\n        @if (error()) {\n          <div class=\"alert alert-error\">\n            <svg class=\"alert-icon\" 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\"></path>\n            </svg>\n            <span>{{ error() }}</span>\n          </div>\n        }\n      </div>\n\n      <!-- Form Content -->\n      <div class=\"form-content\">\n        <div class=\"form-row form-row-2\">\n          <div class=\"form-field\">\n            <cide-ele-input \n              id=\"sypg_title\"\n              label=\"Page Title\" \n              formControlName=\"sypg_title\"\n              placeholder=\"Enter page title\"\n              size=\"md\">\n            </cide-ele-input>\n          </div>\n          \n          <div class=\"form-field\">\n            <cide-ele-input \n              id=\"sypg_page_code\"\n              label=\"Page Code\" \n              formControlName=\"sypg_page_code\"\n              placeholder=\"Enter page code (alphanumeric and underscore only)\"\n              size=\"md\">\n            </cide-ele-input>\n          </div>\n        </div>\n\n        <div class=\"form-row form-row-1\">\n          <div class=\"form-field\">\n            <cide-ele-textarea \n              id=\"sypg_desc\"\n              label=\"Page Description\" \n              formControlName=\"sypg_desc\"\n              placeholder=\"Enter page description\"\n              [rows]=\"3\"\n              size=\"md\">\n            </cide-ele-textarea>\n          </div>\n        </div>\n\n        <div class=\"form-row form-row-1\">\n          <div class=\"form-field\">\n            <cide-ele-json-editor\n              id=\"sypg_configuration\"\n              label=\"Configuration JSON\"\n              formControlName=\"sypg_configuration\"\n              placeholder='{\"key\": \"value\"}'>\n            </cide-ele-json-editor>\n          </div>\n        </div>\n\n        <div class=\"form-row form-row-1\">\n          <div class=\"form-field\">\n            <cide-ele-input\n              id=\"sypg_isactive\"\n              type=\"checkbox\"\n              formControlName=\"sypg_isactive\"\n              label=\"Active Status\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n        </div>\n\n        <!-- Menu Mapping Section (Only in Create Mode) -->\n        @if (!isEditMode()) {\n          <div class=\"form-row form-row-1\">\n            <div class=\"form-field menu-mapping-section\">\n              <div class=\"menu-mapping-header\">\n                <div class=\"menu-mapping-toggle\">\n                  <input\n                    type=\"checkbox\"\n                    id=\"enable_menu_mapping\"\n                    [checked]=\"enableMenuMapping()\"\n                    (change)=\"toggleMenuMapping()\"\n                    class=\"menu-mapping-checkbox\">\n                  <label for=\"enable_menu_mapping\" class=\"menu-mapping-label-checkbox\">Map to Menu</label>\n                </div>\n                <span class=\"menu-mapping-hint\">Optionally map this page to a menu item during creation</span>\n              </div>\n\n              @if (enableMenuMapping()) {\n                <div class=\"menu-mapping-content\">\n                  <!-- Menu Mapping Mode Selection -->\n                  <div class=\"menu-mapping-mode\">\n                    <label class=\"menu-mapping-label\">Mapping Option:</label>\n                    <div class=\"menu-mapping-options\">\n                      <button\n                        type=\"button\"\n                        class=\"menu-option-btn\"\n                        [class.active]=\"menuMappingMode() === 'none'\"\n                        (click)=\"onMenuMappingModeChange('none')\">\n                        Skip Mapping\n                      </button>\n                      <button\n                        type=\"button\"\n                        class=\"menu-option-btn\"\n                        [class.active]=\"menuMappingMode() === 'existing'\"\n                        (click)=\"onMenuMappingModeChange('existing')\">\n                        Map to Existing Menu\n                      </button>\n                      <button\n                        type=\"button\"\n                        class=\"menu-option-btn\"\n                        [class.active]=\"menuMappingMode() === 'new'\"\n                        (click)=\"onMenuMappingModeChange('new')\">\n                        Create New Menu\n                      </button>\n                    </div>\n                  </div>\n\n                  <!-- Existing Menu Selection -->\n                  @if (menuMappingMode() === 'existing') {\n                    <div class=\"menu-mapping-form\">\n                      <cide-ele-select\n                        label=\"Select Menu Item\"\n                        [options]=\"menuOptions()\"\n                        [loading]=\"menusLoading()\"\n                        placeholder=\"Choose a menu item to map this page to\"\n                        [searchable]=\"true\"\n                        size=\"md\"\n                        [ngModel]=\"selectedMenuId() ?? ''\"\n                        (ngModelChange)=\"onMenuSelectionChange($event)\">\n                      </cide-ele-select>\n                      <p class=\"menu-mapping-help\">\n                        This page will be added to the selected menu item's page list.\n                      </p>\n                    </div>\n                  }\n\n                  <!-- New Menu Creation Form -->\n                  @if (menuMappingMode() === 'new') {\n                    <div class=\"menu-mapping-form\">\n                      <form [formGroup]=\"newMenuForm\" class=\"new-menu-form\">\n                        <div class=\"form-row form-row-2\">\n                          <div class=\"form-field\">\n                            <cide-ele-input\n                              id=\"syme_title\"\n                              label=\"Menu Title\"\n                              formControlName=\"syme_title\"\n                              placeholder=\"Enter menu title\"\n                              size=\"md\">\n                            </cide-ele-input>\n                          </div>\n                          <div class=\"form-field\">\n                            <cide-ele-select\n                              label=\"Menu Type\"\n                              formControlName=\"syme_type\"\n                              [options]=\"[\n                                { value: 'menu', label: 'Menu Item' },\n                                { value: 'section', label: 'Section' },\n                                { value: 'title', label: 'Title' }\n                              ]\"\n                              placeholder=\"Select menu type\"\n                              size=\"md\">\n                            </cide-ele-select>\n                          </div>\n                        </div>\n                        <div class=\"form-row form-row-2\">\n                          <div class=\"form-field\">\n                            <cide-ele-input\n                              id=\"syme_path\"\n                              label=\"Menu Path\"\n                              formControlName=\"syme_path\"\n                              placeholder=\"e.g., /control-panel/page\"\n                              size=\"md\">\n                            </cide-ele-input>\n                          </div>\n                          <div class=\"form-field\">\n                            <cide-ele-input\n                              id=\"syme_icon\"\n                              label=\"Icon\"\n                              formControlName=\"syme_icon\"\n                              placeholder=\"e.g., dashboard, settings\"\n                              size=\"md\">\n                            </cide-ele-input>\n                          </div>\n                        </div>\n                        <div class=\"form-row form-row-1\">\n                          <div class=\"form-field\">\n                            <cide-ele-textarea\n                              id=\"syme_desc\"\n                              label=\"Menu Description\"\n                              formControlName=\"syme_desc\"\n                              placeholder=\"Enter menu description (optional)\"\n                              [rows]=\"2\"\n                              size=\"md\">\n                            </cide-ele-textarea>\n                          </div>\n                        </div>\n                        <div class=\"form-row form-row-2\">\n                          <div class=\"form-field\">\n                            <cide-ele-input\n                              id=\"syme_order_by\"\n                              label=\"Order\"\n                              formControlName=\"syme_order_by\"\n                              type=\"number\"\n                              placeholder=\"Menu order\"\n                              size=\"md\">\n                            </cide-ele-input>\n                          </div>\n                          <div class=\"form-field\">\n                            <cide-ele-input\n                              id=\"syme_isactive\"\n                              type=\"checkbox\"\n                              formControlName=\"syme_isactive\"\n                              label=\"Active\"\n                              size=\"sm\">\n                            </cide-ele-input>\n                          </div>\n                        </div>\n                      </form>\n                      <p class=\"menu-mapping-help\">\n                        A new menu item will be created and this page will be automatically mapped to it.\n                      </p>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n\n      <!-- Form Actions -->\n      <div class=\"form-actions\">\n        <div class=\"form-actions-content\">\n          <!-- Error Message (Left Side) -->\n          <div class=\"form-actions-error\">\n            <cide-form-field-error [formGroup]=\"pageForm\"></cide-form-field-error>\n          </div>\n          \n          <!-- Action Buttons (Right Side) -->\n          <div class=\"form-actions-buttons\">\n            @if (!isEditMode()) {\n              <button cideEleButton\n                type=\"button\" \n                variant=\"secondary\" \n                (click)=\"resetForm()\" \n                leftIcon=\"refresh\"\n                [disabled]=\"loading()\">\n                Reset Form\n              </button>\n            }\n            \n            <button cideEleButton\n              type=\"button\" \n              variant=\"secondary\" \n              (click)=\"cancelForm()\" \n              leftIcon=\"close\"\n              [disabled]=\"loading()\">\n              Cancel\n            </button>\n            \n            <button cideEleButton\n              type=\"submit\" \n              variant=\"primary\" \n              [disabled]=\"loading() || !pageForm.valid\"\n              [loading]=\"loading()\"\n              leftIcon=\"save\">\n              {{ isEditMode() ? 'Update Page' : 'Create Page' }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n", styles: [".page-form-wrapper{min-height:100vh;background-color:#f9fafb;padding:1.5rem;box-sizing:border-box}:host-context(.dark) .page-form-wrapper,:host-context([data-theme=dark]) .page-form-wrapper{background-color:#111827}@media (max-width: 768px){.page-form-wrapper{padding:1rem}}@media (max-width: 480px){.page-form-wrapper{padding:.75rem}}.page-form-container{max-width:1200px;margin:0 auto;width:100%}.page-form{background-color:#fff;border-radius:.5rem;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;border:1px solid #e5e7eb;overflow:hidden;display:flex;flex-direction:column}:host-context(.dark) .page-form,:host-context([data-theme=dark]) .page-form{background-color:#1f2937;border-color:#374151;box-shadow:0 1px 3px #0000004d,0 1px 2px #0003}.page-form.loading{opacity:.6;pointer-events:none}.form-header{padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e5e7eb;background-color:#fff}:host-context(.dark) .form-header,:host-context([data-theme=dark]) .form-header{background-color:#1f2937;border-bottom-color:#374151}.form-header .form-title{font-size:1.5rem;font-weight:700;margin:0 0 .5rem;color:#111827;line-height:1.2}:host-context(.dark) .form-header .form-title,:host-context([data-theme=dark]) .form-header .form-title{color:#f9fafb}.form-header .form-subtitle{font-size:.875rem;margin:0;font-weight:400;color:#6b7280;line-height:1.5}:host-context(.dark) .form-header .form-subtitle,:host-context([data-theme=dark]) .form-header .form-subtitle{color:#9ca3af}@media (max-width: 768px){.form-header{padding:1.25rem 1rem .75rem}.form-header .form-title{font-size:1.25rem}.form-header .form-subtitle{font-size:.8125rem}}.form-messages{padding:0 1.5rem;margin-top:1rem}@media (max-width: 768px){.form-messages{padding:0 1rem}}.alert{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;margin-bottom:1rem;border-radius:.375rem;font-weight:500;font-size:.875rem;border-left:3px solid}.alert .alert-icon{width:1.25rem;height:1.25rem;flex-shrink:0}.alert.alert-success{background-color:#d1fae5;border-left-color:#10b981;color:#065f46}:host-context(.dark) .alert.alert-success,:host-context([data-theme=dark]) .alert.alert-success{background-color:#10b98133;border-left-color:#10b981;color:#6ee7b7}.alert.alert-error{background-color:#fee2e2;border-left-color:#ef4444;color:#991b1b}:host-context(.dark) .alert.alert-error,:host-context([data-theme=dark]) .alert.alert-error{background-color:#ef444433;border-left-color:#ef4444;color:#fca5a5}.form-content{padding:1.5rem;flex:1}@media (max-width: 768px){.form-content{padding:1rem}}@media (max-width: 480px){.form-content{padding:.75rem}}.form-row{display:grid;gap:1rem;margin-bottom:1rem}.form-row:last-child{margin-bottom:0}.form-row.form-row-1{grid-template-columns:1fr}.form-row.form-row-2{grid-template-columns:repeat(2,1fr)}@media (max-width: 768px){.form-row.form-row-2{grid-template-columns:1fr}}.form-row.form-row-3{grid-template-columns:repeat(3,1fr)}@media (max-width: 1024px){.form-row.form-row-3{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.form-row.form-row-3{grid-template-columns:1fr}}.form-row.form-row-4{grid-template-columns:repeat(4,1fr)}@media (max-width: 1024px){.form-row.form-row-4{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.form-row.form-row-4{grid-template-columns:1fr}}.form-field{display:flex;flex-direction:column}.form-actions{padding:1.25rem 1.5rem;border-top:1px solid #e5e7eb;background-color:#fff;margin-top:auto}:host-context(.dark) .form-actions,:host-context([data-theme=dark]) .form-actions{background-color:#1f2937;border-top-color:#374151}@media (max-width: 768px){.form-actions{padding:1rem}}@media (max-width: 480px){.form-actions{padding:.75rem}}.form-actions-content{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;flex-wrap:wrap}@media (max-width: 768px){.form-actions-content{flex-direction:column;align-items:stretch}}.form-actions-error{flex:1;min-width:0;display:flex;align-items:center}@media (max-width: 768px){.form-actions-error{width:100%;margin-bottom:.75rem}}.form-actions-buttons{display:flex;gap:.75rem;align-items:center;flex-shrink:0}@media (max-width: 768px){.form-actions-buttons{width:100%;justify-content:stretch}.form-actions-buttons button{flex:1;min-width:0}}@media (max-width: 480px){.form-actions-buttons{flex-direction:column}.form-actions-buttons button{width:100%}}cide-ele-input,cide-ele-textarea,cide-ele-json-editor,cide-ele-select{width:100%}cide-ele-input:focus-within,cide-ele-textarea:focus-within,cide-ele-json-editor:focus-within,cide-ele-select:focus-within{outline:none}.menu-mapping-section{border:1px solid #e5e7eb;border-radius:.5rem;padding:1rem;background-color:#f9fafb;margin-top:1rem}:host-context(.dark) .menu-mapping-section,:host-context([data-theme=dark]) .menu-mapping-section{background-color:#1f2937;border-color:#374151}.menu-mapping-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;gap:1rem}@media (max-width: 768px){.menu-mapping-header{flex-direction:column;align-items:flex-start}}.menu-mapping-toggle{display:flex;align-items:center;gap:.5rem}.menu-mapping-checkbox{width:1rem;height:1rem;cursor:pointer}.menu-mapping-label-checkbox{font-weight:500;font-size:.875rem;color:#374151;cursor:pointer}:host-context(.dark) .menu-mapping-label-checkbox,:host-context([data-theme=dark]) .menu-mapping-label-checkbox{color:#d1d5db}.menu-mapping-hint{font-size:.75rem;color:#6b7280;font-style:italic}:host-context(.dark) .menu-mapping-hint,:host-context([data-theme=dark]) .menu-mapping-hint{color:#9ca3af}.menu-mapping-content{margin-top:1rem;padding-top:1rem;border-top:1px solid #e5e7eb}:host-context(.dark) .menu-mapping-content,:host-context([data-theme=dark]) .menu-mapping-content{border-top-color:#374151}.menu-mapping-mode{margin-bottom:1rem}.menu-mapping-label{display:block;font-size:.875rem;font-weight:500;color:#374151;margin-bottom:.5rem}:host-context(.dark) .menu-mapping-label,:host-context([data-theme=dark]) .menu-mapping-label{color:#d1d5db}.menu-mapping-options{display:flex;gap:.5rem;flex-wrap:wrap}.menu-option-btn{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background-color:#fff;color:#374151;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}:host-context(.dark) .menu-option-btn,:host-context([data-theme=dark]) .menu-option-btn{background-color:#374151;border-color:#4b5563;color:#d1d5db}.menu-option-btn:hover{background-color:#f3f4f6;border-color:#9ca3af}:host-context(.dark) .menu-option-btn:hover,:host-context([data-theme=dark]) .menu-option-btn:hover{background-color:#4b5563;border-color:#6b7280}.menu-option-btn.active{background-color:#3b82f6;border-color:#3b82f6;color:#fff}:host-context(.dark) .menu-option-btn.active,:host-context([data-theme=dark]) .menu-option-btn.active{background-color:#2563eb;border-color:#2563eb}.menu-mapping-form{margin-top:1rem;padding:1rem;background-color:#fff;border-radius:.375rem;border:1px solid #e5e7eb}:host-context(.dark) .menu-mapping-form,:host-context([data-theme=dark]) .menu-mapping-form{background-color:#111827;border-color:#374151}.new-menu-form .form-row{margin-bottom:1rem}.new-menu-form .form-row:last-child{margin-bottom:0}.menu-mapping-help{margin-top:.75rem;font-size:.75rem;color:#6b7280;font-style:italic}:host-context(.dark) .menu-mapping-help,:host-context([data-theme=dark]) .menu-mapping-help{color:#9ca3af}@media (max-width: 480px){.page-form-wrapper{padding:.5rem}.form-header{padding:1rem .75rem .75rem}.form-content,.form-actions{padding:.75rem}.menu-mapping-options{flex-direction:column}.menu-mapping-options .menu-option-btn{width:100%}}\n"] }]
+        }], ctorParameters: () => [] });
+
+export { CideCorePageFormComponent };
+//# sourceMappingURL=cloud-ide-core-page-form.component-C3xTQLI3.mjs.map