@flusys/ng-shared 3.0.0 → 4.0.0-rc

package/fesm2022/flusys-ng-shared.mjs

@@ -1,9 +1,8 @@
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, Injectable, DOCUMENT, REQUEST, signal, computed, ElementRef, input, effect, Directive, TemplateRef, ViewContainerRef, output, NgModule, Injector, runInInjectionContext, resource, model, untracked, forwardRef, ChangeDetectionStrategy, Component, DestroyRef, viewChild, afterNextRender, InjectionToken, isDevMode } from '@angular/core';
-import * as i3 from '@angular/common';
-import { isPlatformServer, CommonModule, NgOptimizedImage, NgComponentOutlet, DatePipe } from '@angular/common';
+import { inject, PLATFORM_ID, Injectable, DOCUMENT, REQUEST, signal, computed, ElementRef, input, effect, Directive, TemplateRef, ViewContainerRef, output, Pipe, Injector, isDevMode, NgModule, runInInjectionContext, resource, model, untracked, forwardRef, Component, ApplicationRef, viewChild, afterNextRender, ViewEncapsulation, DestroyRef, InjectionToken } from '@angular/core';
+import { isPlatformServer, CommonModule, NgOptimizedImage, NgComponentOutlet, DatePipe, DOCUMENT as DOCUMENT$1 } from '@angular/common';
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
-import { APP_CONFIG, getServiceUrl } from '@flusys/ng-core';
+import { APP_CONFIG, getServiceUrl, TRANSLATE_ADAPTER, FALLBACK_MESSAGES_REGISTRY } from '@flusys/ng-core';
 import { of, firstValueFrom, map as map$1 } from 'rxjs';
 import { map, tap, catchError } from 'rxjs/operators';
 import * as i1$1 from '@angular/forms';
@@ -18,12 +17,14 @@ import * as i1 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { DatePickerModule } from 'primeng/datepicker';
-import * as i4 from 'primeng/dialog';
+import * as i5 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import { DividerModule } from 'primeng/divider';
 import { FileUploadModule } from 'primeng/fileupload';
+import * as i6 from 'primeng/iconfield';
 import { IconFieldModule } from 'primeng/iconfield';
 import { ImageModule } from 'primeng/image';
+import * as i7 from 'primeng/inputicon';
 import { InputIconModule } from 'primeng/inputicon';
 import { InputNumberModule } from 'primeng/inputnumber';
 import * as i2 from 'primeng/inputtext';
@@ -38,7 +39,7 @@ import * as i2$1 from 'primeng/progressbar';
 import { ProgressBarModule } from 'primeng/progressbar';
 import { RadioButtonModule } from 'primeng/radiobutton';
 import { RippleModule } from 'primeng/ripple';
-import * as i3$1 from 'primeng/select';
+import * as i3 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import { SelectButtonModule } from 'primeng/selectbutton';
 import { SkeletonModule } from 'primeng/skeleton';
@@ -49,23 +50,16 @@ import { TabsModule } from 'primeng/tabs';
 import { TagModule } from 'primeng/tag';
 import { TextareaModule } from 'primeng/textarea';
 import { ToastModule } from 'primeng/toast';
+import { ToggleButtonModule } from 'primeng/togglebutton';
 import { ToggleSwitchModule } from 'primeng/toggleswitch';
 import { TooltipModule } from 'primeng/tooltip';
 import { TreeTableModule } from 'primeng/treetable';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
+import { ColorPickerModule } from 'primeng/colorpicker';
+import * as i3$1 from 'primeng/api';
 import { MessageService, ConfirmationService } from 'primeng/api';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
-/**
- * Centralized Permission Codes
- *
- * Single source of truth for all permission codes used across the application.
- * Use these constants instead of hardcoded strings to prevent typos and enable easy refactoring.
- *
- * Naming Convention: <entity>.<action>
- * - entity: The resource being accessed (e.g., user, role, company)
- * - action: The operation being performed (create, read, update, delete, assign)
- */
-// ==================== AUTH MODULE ====================
 const USER_PERMISSIONS = {
     CREATE: 'user.create',
     READ: 'user.read',
@@ -84,7 +78,6 @@ const BRANCH_PERMISSIONS = {
     UPDATE: 'branch.update',
     DELETE: 'branch.delete',
 };
-// ==================== IAM MODULE ====================
 const ACTION_PERMISSIONS = {
     CREATE: 'action.create',
     READ: 'action.read',
@@ -113,7 +106,6 @@ const COMPANY_ACTION_PERMISSIONS = {
     READ: 'company-action.read',
     ASSIGN: 'company-action.assign',
 };
-// ==================== STORAGE MODULE ====================
 const FILE_PERMISSIONS = {
     CREATE: 'file.create',
     READ: 'file.read',
@@ -132,7 +124,6 @@ const STORAGE_CONFIG_PERMISSIONS = {
     UPDATE: 'storage-config.update',
     DELETE: 'storage-config.delete',
 };
-// ==================== EMAIL MODULE ====================
 const EMAIL_CONFIG_PERMISSIONS = {
     CREATE: 'email-config.create',
     READ: 'email-config.read',
@@ -145,43 +136,444 @@ const EMAIL_TEMPLATE_PERMISSIONS = {
     UPDATE: 'email-template.update',
     DELETE: 'email-template.delete',
 };
-// ==================== FORM BUILDER MODULE ====================
 const FORM_PERMISSIONS = {
     CREATE: 'form.create',
     READ: 'form.read',
     UPDATE: 'form.update',
     DELETE: 'form.delete',
 };
-// ==================== AGGREGATED EXPORTS ====================
-/**
- * All permission codes grouped by module
- */
+const EVENT_PERMISSIONS = {
+    CREATE: 'event.create',
+    READ: 'event.read',
+    UPDATE: 'event.update',
+    DELETE: 'event.delete',
+};
+const EVENT_PARTICIPANT_PERMISSIONS = {
+    CREATE: 'event-participant.create',
+    READ: 'event-participant.read',
+    UPDATE: 'event-participant.update',
+    DELETE: 'event-participant.delete',
+};
+const NOTIFICATION_PERMISSIONS = {
+    CREATE: 'notification.create',
+    READ: 'notification.read',
+    UPDATE: 'notification.update',
+    DELETE: 'notification.delete',
+};
+const LANGUAGE_PERMISSIONS = {
+    CREATE: 'language.create',
+    READ: 'language.read',
+    UPDATE: 'language.update',
+    DELETE: 'language.delete',
+};
+const TRANSLATION_KEY_PERMISSIONS = {
+    CREATE: 'translation-key.create',
+    READ: 'translation-key.read',
+    UPDATE: 'translation-key.update',
+    DELETE: 'translation-key.delete',
+};
+const TRANSLATION_PERMISSIONS = {
+    CREATE: 'translation.create',
+    READ: 'translation.read',
+    UPDATE: 'translation.update',
+    DELETE: 'translation.delete',
+};
 const PERMISSIONS = {
-    // Auth
     USER: USER_PERMISSIONS,
     COMPANY: COMPANY_PERMISSIONS,
     BRANCH: BRANCH_PERMISSIONS,
-    // IAM
     ACTION: ACTION_PERMISSIONS,
     ROLE: ROLE_PERMISSIONS,
     ROLE_ACTION: ROLE_ACTION_PERMISSIONS,
     USER_ROLE: USER_ROLE_PERMISSIONS,
     USER_ACTION: USER_ACTION_PERMISSIONS,
     COMPANY_ACTION: COMPANY_ACTION_PERMISSIONS,
-    // Storage
     FILE: FILE_PERMISSIONS,
     FOLDER: FOLDER_PERMISSIONS,
     STORAGE_CONFIG: STORAGE_CONFIG_PERMISSIONS,
-    // Email
     EMAIL_CONFIG: EMAIL_CONFIG_PERMISSIONS,
     EMAIL_TEMPLATE: EMAIL_TEMPLATE_PERMISSIONS,
-    // Form Builder
     FORM: FORM_PERMISSIONS,
+    EVENT: EVENT_PERMISSIONS,
+    EVENT_PARTICIPANT: EVENT_PARTICIPANT_PERMISSIONS,
+    NOTIFICATION: NOTIFICATION_PERMISSIONS,
+    LANGUAGE: LANGUAGE_PERMISSIONS,
+    TRANSLATION_KEY: TRANSLATION_KEY_PERMISSIONS,
+    TRANSLATION: TRANSLATION_PERMISSIONS,
 };
 
-/**
- * Common file type filters
- */
+const SHARED_MESSAGES = {
+    // Common actions
+    'shared.save': 'Save',
+    'shared.cancel': 'Cancel',
+    'shared.delete': 'Delete',
+    'shared.edit': 'Edit',
+    'shared.create': 'Create',
+    'shared.update': 'Update',
+    'shared.add': 'Add',
+    'shared.remove': 'Remove',
+    'shared.close': 'Close',
+    'shared.confirm': 'Confirm',
+    'shared.back': 'Back',
+    'shared.next': 'Next',
+    'shared.previous': 'Previous',
+    'shared.submit': 'Submit',
+    'shared.reset': 'Reset',
+    'shared.clear': 'Clear',
+    'shared.search': 'Search',
+    'shared.filter': 'Filter',
+    'shared.refresh': 'Refresh',
+    'shared.export': 'Export',
+    'shared.import': 'Import',
+    'shared.download': 'Download',
+    'shared.upload': 'Upload',
+    'shared.view': 'View',
+    'shared.details': 'Details',
+    'shared.actions': 'Actions',
+    'shared.options': 'Options',
+    'shared.settings': 'Settings',
+    'shared.yes': 'Yes',
+    'shared.no': 'No',
+    'shared.continue': 'Continue',
+    'shared.view.details': 'View Details',
+    // Common labels
+    'shared.name': 'Name',
+    'shared.description': 'Description',
+    'shared.status': 'Status',
+    'shared.active': 'Active',
+    'shared.inactive': 'Inactive',
+    'shared.enabled': 'Enabled',
+    'shared.disabled': 'Disabled',
+    'shared.verified': 'Verified',
+    'shared.unverified': 'Unverified',
+    'shared.read.only': 'Read Only',
+    'shared.assigned': 'Assigned',
+    'shared.not.assigned': 'Not Assigned',
+    'shared.unknown': 'Unknown',
+    'shared.na': 'N/A',
+    'shared.no.company': 'No Company',
+    'shared.company': 'Company',
+    'shared.no.branch': 'No Branch',
+    'shared.display.order': 'Display Order',
+    'shared.display.order.placeholder': 'Enter display order',
+    'shared.created.at': 'Created At',
+    'shared.updated.at': 'Updated At',
+    'shared.created.by': 'Created By',
+    'shared.updated.by': 'Updated By',
+    'shared.date': 'Date',
+    'shared.time': 'Time',
+    'shared.email': 'Email',
+    'shared.phone': 'Phone',
+    'shared.address': 'Address',
+    'shared.type': 'Type',
+    'shared.category': 'Category',
+    'shared.code': 'Code',
+    'shared.serial': 'Serial',
+    'shared.order': 'Order',
+    'shared.priority': 'Priority',
+    'shared.notes': 'Notes',
+    'shared.comments': 'Comments',
+    // Toast summaries
+    'shared.info': 'Info',
+    'shared.warning': 'Warning',
+    'shared.confirm.delete.header': 'Confirm Delete',
+    // Status messages
+    'shared.loading': 'Loading...',
+    'shared.saving': 'Saving...',
+    'shared.deleting': 'Deleting...',
+    'shared.processing': 'Processing...',
+    'shared.please.wait': 'Please wait...',
+    // Success messages
+    'shared.success': 'Success',
+    'shared.operation.success': 'Operation completed successfully',
+    'shared.save.success': 'Saved successfully',
+    'shared.delete.success': 'Deleted successfully',
+    'shared.update.success': 'Updated successfully',
+    'shared.create.success': 'Created successfully',
+    // Error messages
+    'shared.error': 'Error',
+    'shared.operation.failed': 'Operation failed',
+    'shared.save.failed': 'Failed to save',
+    'shared.delete.failed': 'Failed to delete',
+    'shared.update.failed': 'Failed to update',
+    'shared.create.failed': 'Failed to create',
+    'shared.load.failed': 'Failed to load data',
+    'shared.unexpected.error': 'An unexpected error occurred',
+    'shared.network.error': 'Network error. Please check your connection.',
+    'shared.server.error': 'Server error. Please try again later.',
+    // Validation messages
+    'shared.required': 'This field is required',
+    'shared.invalid.email': 'Please enter a valid email address',
+    'shared.invalid.phone': 'Please enter a valid phone number',
+    'shared.min.length': 'Minimum {{min}} characters required',
+    'shared.max.length': 'Maximum {{max}} characters allowed',
+    'shared.min.value': 'Minimum value is {{min}}',
+    'shared.max.value': 'Maximum value is {{max}}',
+    'shared.invalid.format': 'Invalid format',
+    'shared.password.mismatch': 'Passwords do not match',
+    // Confirmation messages
+    'shared.confirm.delete': 'Are you sure you want to delete this item?',
+    'shared.confirm.delete.item': 'Are you sure you want to delete "{{name}}"?',
+    'shared.confirm.delete.multiple': 'Are you sure you want to delete {{count}} items?',
+    'shared.confirm.cancel': 'Are you sure you want to cancel? Unsaved changes will be lost.',
+    'shared.confirm.action': 'Are you sure you want to proceed?',
+    'shared.unsaved.changes': 'You have unsaved changes.',
+    // Empty states
+    'shared.no.data': 'No data available',
+    'shared.no.results': 'No results found',
+    'shared.empty.list': 'The list is empty',
+    'shared.no.items.selected': 'No items selected',
+    // Pagination
+    'shared.showing': 'Showing',
+    'shared.of': 'of',
+    'shared.items': 'items',
+    'shared.page': 'Page',
+    'shared.rows.per.page': 'Rows per page',
+    'shared.first': 'First',
+    'shared.last': 'Last',
+    // CRUD operation messages (used by createApiController)
+    'item.create.success': 'Item created successfully',
+    'item.create.many.success': '{{count}} items created successfully',
+    'item.get.success': 'Item retrieved successfully',
+    'item.get.all.success': 'Items retrieved successfully',
+    'item.update.success': 'Item updated successfully',
+    'item.update.many.success': '{{count}} items updated successfully',
+    'item.delete.success': '{{count}} item(s) deleted successfully',
+    'item.restore.success': '{{count}} item(s) restored successfully',
+    // HTTP error messages (for error interceptor)
+    'shared.error.bad.request': 'Bad Request',
+    'shared.error.not.found': 'Not Found',
+    'shared.error.conflict': 'Conflict',
+    'shared.error.validation.error': 'Validation Error',
+    'shared.error.server.error': 'Server Error',
+    'shared.error.service.unavailable': 'Service Unavailable',
+    // Validation
+    'shared.validation.error': 'Validation Error',
+    'shared.fill.all.fields': 'Please fill in all required fields correctly.',
+    'shared.fill.required.fields': 'Please fill in all required fields',
+    'shared.name.required': 'Name is required',
+    'shared.email.required': 'Email is required',
+    'shared.select.all': 'Select All',
+    'shared.deselect.all': 'Deselect All',
+    'shared.save.changes': 'Save Changes',
+    'shared.validation.required': '{{field}} is required',
+    'shared.validation.email': 'Please enter a valid email address',
+    'shared.validation.min.length': '{{field}} must be at least {{min}} characters',
+    'shared.validation.max.length': '{{field}} must be at most {{max}} characters',
+    'shared.validation.min': '{{field}} must be at least {{min}}',
+    'shared.validation.max': '{{field}} must be at most {{max}}',
+    'shared.validation.pattern': '{{field}} format is invalid',
+    'shared.password.required': 'Password is required',
+    'shared.confirm.password.required': 'Please confirm your password',
+    'shared.min.characters': 'Min. {{count}} characters',
+    'shared.select': 'Select...',
+    'shared.select.option': 'Select an option',
+    'shared.placeholder.current.password': 'Enter current password',
+    'shared.placeholder.new.password': 'Enter new password',
+    'shared.placeholder.confirm.password': 'Confirm new password',
+    // File uploader
+    'shared.upload.drop.multiple': 'Drop files here or click to upload',
+    'shared.upload.drop.single': 'Drop file here or click to upload',
+    'shared.upload.allowed.types': 'Allowed:',
+    'shared.upload.all.types.allowed': 'All file types allowed',
+    'shared.upload.uploading': 'Uploading {{fileName}}...',
+    'shared.upload.max.size': '(Max {{size}}MB)',
+    'shared.upload.invalid.type': 'Invalid File Type',
+    'shared.upload.file.too.large': 'File Too Large',
+    'shared.upload.complete': 'Upload Complete',
+    'shared.upload.files': 'files',
+    'shared.upload.files.uploaded': '{{count}} file(s) uploaded successfully',
+    'shared.upload.failed': 'Upload failed',
+    'shared.upload.provider.not.configured': 'File upload not configured. Add {{provider}} to your app config.',
+    // File type categories
+    'shared.file.type.images': 'Images',
+    'shared.file.type.documents': 'Documents',
+    'shared.file.type.videos': 'Videos',
+    'shared.file.type.audio': 'Audio',
+    // Size units
+    'shared.units.kb': 'KB',
+    'shared.units.mb': 'MB',
+    'shared.units.gb': 'GB',
+    'shared.units.tb': 'TB',
+    'shared.units.bytes': 'Bytes',
+    // File selector
+    'shared.file.selector.search.placeholder': 'Search files...',
+    'shared.file.selector.no.files': 'No files found',
+    'shared.file.selector.selected': '{{count}} selected',
+    'shared.file.selector.select.multiple': 'Select ({{count}})',
+    'shared.file.selector.select': 'Select',
+    'shared.file.selector.default.header': 'Select File',
+    'shared.file.selector.select.file': 'Select File',
+    'shared.file.selector.select.files': 'Select Files',
+    'shared.file.selector.all.folders': 'All Folders',
+    'shared.file.selector.all.storage': 'All Storage',
+    'shared.file.selector.provider.not.configured': 'File selection not configured.',
+    'shared.file.selector.add.provider': 'Add',
+    'shared.default': 'Default',
+    // User/option select
+    'shared.user.select.placeholder': 'Select User',
+    'shared.select.placeholder': 'Select Option',
+    'shared.multi.select.placeholder': 'Select Options',
+    'shared.multi.select.items.selected': '{{count}} Items Selected',
+    'shared.select.deselect.all': 'Select/Deselect All',
+    'shared.loading.actions': 'Loading actions...',
+    'shared.loading.roles': 'Loading roles...',
+    'shared.pending.changes': 'Pending Changes',
+    'shared.to.add': 'To Add',
+    'shared.to.remove': 'To Remove',
+    'shared.to.assign': 'To Assign',
+    'shared.to.whitelist': 'To Whitelist',
+    'shared.description.placeholder': 'Enter description',
+    // Backend error keys (used by exception filters)
+    'error.generic': 'An error occurred',
+    'error.not.found': 'Resource not found',
+    'error.validation': 'Validation failed',
+    'error.unauthorized': 'Unauthorized access',
+    'error.forbidden': 'Access forbidden',
+    'error.conflict': 'Resource conflict',
+    'error.internal': 'Internal server error',
+    'error.service.unavailable': 'Service temporarily unavailable',
+    'error.http': 'HTTP error',
+    'error.unknown': 'Unknown error occurred',
+    'error.permission.system.unavailable': 'Permission system temporarily unavailable. Please try again later.',
+    'error.insufficient.permissions': 'Missing required permissions: {{permissions}}',
+    'error.insufficient.permissions.or': 'Requires at least one of: {{permissions}}',
+    'error.no.permissions.found': 'No permissions found. Please contact administrator.',
+    // Backend system keys (infrastructure errors)
+    'system.repository.not.available': '{{entity}} repository not available',
+    'system.datasource.not.available': 'Data source not available',
+    'system.database.config.not.available': 'Database configuration not available',
+    'system.service.not.available': 'Service "{{provider}}" not available. Available: {{available}}',
+    'system.config.required': 'Configuration required',
+    'system.internal.error': 'Failed to initialize "{{provider}}": {{error}}',
+    'system.not.found': 'System resource not found',
+    'system.duplicate.request': 'Duplicate request detected',
+    'system.invalid.tenant.id': 'Invalid tenant ID',
+    'system.tenant.not.found': 'Tenant "{{tenantId}}" not found',
+    'system.tenant.header.required': 'Tenant not found. Ensure "{{header}}" header is set.',
+    'system.missing.parameter': 'Missing required parameter: {{key}}',
+    'system.sdk.not.installed': 'Required SDK "{{sdk}}" not installed. Run: npm install {{sdk}}',
+    'system.path.traversal.detected': 'Path traversal detected',
+    'system.invalid.file.key': 'Invalid file key',
+    // Aliases for commonly used keys (dot-separated)
+    'shared.all': 'All',
+    // PrimeNG component messages (synced to PrimeNGConfig)
+    'primeng.empty.message': 'No results found',
+    'primeng.empty.filter.message': 'No results found',
+    'primeng.empty.search.message': 'No results found',
+    'primeng.selection.message': '{0} items selected',
+    'primeng.empty.selection.message': 'No selected item',
+    'primeng.choose': 'Choose',
+    'primeng.upload': 'Upload',
+    'primeng.cancel': 'Cancel',
+    'primeng.pending': 'Pending',
+    'primeng.choose.date': 'Choose Date',
+    'primeng.today': 'Today',
+    'primeng.clear': 'Clear',
+    'primeng.week.header': 'Wk',
+    'primeng.first.day.of.week': '0',
+    'primeng.accept': 'Yes',
+    'primeng.reject': 'No',
+    'primeng.lt': 'Less than',
+    'primeng.lte': 'Less than or equal to',
+    'primeng.gt': 'Greater than',
+    'primeng.gte': 'Greater than or equal to',
+    'primeng.date.is': 'Date is',
+    'primeng.date.is.not': 'Date is not',
+    'primeng.date.before': 'Date is before',
+    'primeng.date.after': 'Date is after',
+    'primeng.contains': 'Contains',
+    'primeng.not.contains': 'Not contains',
+    'primeng.starts.with': 'Starts with',
+    'primeng.ends.with': 'Ends with',
+    'primeng.equals': 'Equals',
+    'primeng.not.equals': 'Not equals',
+    'primeng.no.filter': 'No Filter',
+    'primeng.match.all': 'Match All',
+    'primeng.match.any': 'Match Any',
+    'primeng.add.rule': 'Add Rule',
+    'primeng.remove.rule': 'Remove Rule',
+    'primeng.apply': 'Apply',
+    'primeng.aria.true.label': 'True',
+    'primeng.aria.false.label': 'False',
+    'primeng.aria.null.label': 'Not Selected',
+    'primeng.aria.star': '1 star',
+    'primeng.aria.stars': '{star} stars',
+    'primeng.aria.select.all': 'All items selected',
+    'primeng.aria.unselect.all': 'All items unselected',
+    'primeng.aria.close': 'Close',
+    'primeng.aria.previous': 'Previous',
+    'primeng.aria.next': 'Next',
+    'primeng.aria.navigation': 'Navigation',
+    'primeng.aria.scroll.top': 'Scroll Top',
+    'primeng.aria.move.top': 'Move Top',
+    'primeng.aria.move.up': 'Move Up',
+    'primeng.aria.move.down': 'Move Down',
+    'primeng.aria.move.bottom': 'Move Bottom',
+    'primeng.aria.move.to.target': 'Move to Target',
+    'primeng.aria.move.to.source': 'Move to Source',
+    'primeng.aria.move.all.to.target': 'Move All to Target',
+    'primeng.aria.move.all.to.source': 'Move All to Source',
+    'primeng.aria.page.label': 'Page {page}',
+    'primeng.aria.first.page.label': 'First Page',
+    'primeng.aria.last.page.label': 'Last Page',
+    'primeng.aria.next.page.label': 'Next Page',
+    'primeng.aria.prev.page.label': 'Previous Page',
+    'primeng.aria.rows.per.page.label': 'Rows per page',
+    'primeng.aria.jump.to.page.dropdown.label': 'Jump to Page Dropdown',
+    'primeng.aria.jump.to.page.input.label': 'Jump to Page Input',
+    'primeng.aria.select.row': 'Row Selected',
+    'primeng.aria.unselect.row': 'Row Unselected',
+    'primeng.aria.expand.row': 'Row Expanded',
+    'primeng.aria.collapse.row': 'Row Collapsed',
+    'primeng.aria.show.filter.menu': 'Show Filter Menu',
+    'primeng.aria.hide.filter.menu': 'Hide Filter Menu',
+    'primeng.aria.filter.operator': 'Filter Operator',
+    'primeng.aria.filter.constraint': 'Filter Constraint',
+    'primeng.aria.edit.row': 'Edit Row',
+    'primeng.aria.save.edit': 'Save Edit',
+    'primeng.aria.cancel.edit': 'Cancel Edit',
+    'primeng.aria.list.view': 'List View',
+    'primeng.aria.grid.view': 'Grid View',
+    'primeng.aria.slide': 'Slide',
+    'primeng.aria.slide.number': '{slideNumber}',
+    'primeng.aria.zoom.image': 'Zoom Image',
+    'primeng.aria.zoom.in': 'Zoom In',
+    'primeng.aria.zoom.out': 'Zoom Out',
+    'primeng.aria.rotate.right': 'Rotate Right',
+    'primeng.aria.rotate.left': 'Rotate Left',
+    // Common aliases (backward compatibility for modules using common.* prefix)
+    'common.save': 'Save',
+    'common.cancel': 'Cancel',
+    'common.delete': 'Delete',
+    'common.edit': 'Edit',
+    'common.create': 'Create',
+    'common.update': 'Update',
+    'common.add': 'Add',
+    'common.remove': 'Remove',
+    'common.close': 'Close',
+    'common.confirm': 'Confirm',
+    'common.test': 'Test',
+    'common.name': 'Name',
+    'common.description': 'Description',
+    'common.status': 'Status',
+    'common.active': 'Active',
+    'common.inactive': 'Inactive',
+    'common.default': 'Default',
+    'common.type': 'Type',
+    'common.created': 'Created',
+    'common.updated': 'Updated',
+    'common.actions': 'Actions',
+    'common.company': 'Company',
+    'common.success': 'Success',
+    'common.error': 'Error',
+    'common.validation': 'Validation',
+    'common.fill.required.fields': 'Please fill in all required fields',
+    // File uploader
+    'shared.file.uploader.no.upload.function': 'No upload function available. Configure FILE_PROVIDER or provide uploadFile input.',
+};
+
+// ─── Constants ────────────────────────────────────────────────────────────────
 const FILE_TYPE_FILTERS = {
     IMAGES: ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/svg+xml'],
     DOCUMENTS: [
@@ -195,30 +587,15 @@ const FILE_TYPE_FILTERS = {
     AUDIO: ['audio/mpeg', 'audio/wav', 'audio/ogg', 'audio/webm'],
     ALL: [],
 };
-/**
- * Get accept string for file input from content types
- */
+// ─── Utility Functions ────────────────────────────────────────────────────────
 function getAcceptString(contentTypes) {
-    if (!contentTypes.length)
-        return '*/*';
-    return contentTypes.join(',');
+    return contentTypes.length ? contentTypes.join(',') : '*/*';
 }
-/**
- * Check if file matches allowed content types
- */
 function isFileTypeAllowed(file, allowedTypes) {
     if (!allowedTypes.length)
         return true;
-    return allowedTypes.some((type) => {
-        if (type.endsWith('/*')) {
-            return file.type.startsWith(type.replace('/*', '/'));
-        }
-        return file.type === type;
-    });
+    return allowedTypes.some((type) => type.endsWith('/*') ? file.type.startsWith(type.replace('/*', '/')) : file.type === type);
 }
-/**
- * Get file icon class based on content type
- */
 function getFileIconClass(contentType) {
     if (contentType.startsWith('image/'))
         return 'pi pi-image';
@@ -234,9 +611,6 @@ function getFileIconClass(contentType) {
         return 'pi pi-file-excel';
     return 'pi pi-file';
 }
-/**
- * Format file size for display
- */
 function formatFileSize(sizeInKb) {
     const kb = typeof sizeInKb === 'string' ? parseFloat(sizeInKb) : sizeInKb;
     if (kb < 1024)
@@ -244,8 +618,7 @@ function formatFileSize(sizeInKb) {
     const mb = kb / 1024;
     if (mb < 1024)
         return `${mb.toFixed(1)} MB`;
-    const gb = mb / 1024;
-    return `${gb.toFixed(2)} GB`;
+    return `${(mb / 1024).toFixed(2)} GB`;
 }
 
 var ContactTypeEnum;
@@ -720,6 +1093,156 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 }]
         }], propDecorators: { eventType: [{ type: i0.Input, args: [{ isSignal: true, alias: "eventType", required: false }] }], preventKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventKey", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
 
+class TranslatePipe {
+    translateAdapter = inject(TRANSLATE_ADAPTER, { optional: true });
+    fallbackMessages = inject(FALLBACK_MESSAGES_REGISTRY, { optional: true });
+    transform(key, params) {
+        if (!this.translateAdapter) {
+            return this.getFromFallback(key, params);
+        }
+        // Read languageCode signal to create reactive dependency for zoneless mode
+        // This ensures the pipe re-evaluates when language changes
+        this.translateAdapter.languageCode();
+        return this.translateAdapter.translate(key, params);
+    }
+    getFromFallback(template, params) {
+        // Try to get from fallback messages registry first
+        if (this.fallbackMessages) {
+            const value = this.fallbackMessages[template];
+            if (value) {
+                return this.interpolate(value, params);
+            }
+        }
+        // Fall back to interpolating the key itself
+        return this.interpolate(template, params);
+    }
+    interpolate(template, params) {
+        if (!params)
+            return template;
+        return template.replace(/\{\{(\w+)\}\}/g, (match, paramKey) => {
+            const value = params[paramKey];
+            return value !== undefined ? String(value) : match;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.5", ngImport: i0, type: TranslatePipe, isStandalone: true, name: "translate", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'translate',
+                    pure: false,
+                }]
+        }] });
+
+async function tryLoadLocalizationServices(injector) {
+    try {
+        // @ts-ignore - ng-localization is optional and loaded dynamically at runtime
+        const locModule = await import('@flusys/ng-localization');
+        const config = injector.get(locModule.LOCALIZATION_CONFIG, null);
+        if (!config)
+            return null;
+        return {
+            stateService: injector.get(locModule.LocalizationStateService),
+            apiService: injector.get(locModule.LocalizationApiService),
+        };
+    }
+    catch {
+        return null;
+    }
+}
+function resolveTranslationModule(config) {
+    return async () => {
+        const injector = inject(Injector);
+        const { modules, fallbackMessages } = config;
+        // Try to load localization services if available
+        const locServices = await tryLoadLocalizationServices(injector);
+        // Register fallback messages
+        if (fallbackMessages) {
+            if (locServices) {
+                modules.forEach((module) => {
+                    if (!locServices.stateService.hasModuleFallbacks(module)) {
+                        locServices.stateService.registerModuleFallbacks(module, fallbackMessages);
+                    }
+                });
+            }
+            else {
+                const registry = injector.get(FALLBACK_MESSAGES_REGISTRY, null);
+                if (registry) {
+                    Object.assign(registry, fallbackMessages);
+                }
+            }
+        }
+        if (!locServices)
+            return true;
+        // Load translations from API
+        const languageCode = locServices.stateService.currentLanguageCode();
+        const modulesToLoad = modules.filter((m) => !locServices.stateService.isModuleLoaded(m));
+        if (modulesToLoad.length === 0)
+            return true;
+        try {
+            const response = (await firstValueFrom(locServices.apiService.getTranslationsByLanguage(languageCode, modulesToLoad)));
+            if (response?.success && response?.data) {
+                locServices.stateService.mergeTranslations(response.data);
+                modulesToLoad.forEach((m) => locServices.stateService.markModuleLoaded(m));
+            }
+            else if (modulesToLoad.length > 0 && isDevMode()) {
+                console.warn(`No translation data received for modules: ${modulesToLoad.join(', ')}`);
+            }
+        }
+        catch (error) {
+            if (isDevMode()) {
+                console.error(`Failed to load translations for modules: ${modules.join(', ')}`, error);
+            }
+        }
+        return true;
+    };
+}
+
+/** Fallback translate adapter for when localization provider is not used */
+const createFallbackTranslateAdapter = (fallbackRegistry) => ({
+    languageCode: signal('en'),
+    translate: (key, params) => {
+        // Check fallback messages registry first
+        const value = fallbackRegistry[key];
+        if (value) {
+            // Simple parameter interpolation
+            if (params) {
+                return value.replace(/\{\{(\w+)\}\}/g, (match, paramKey) => {
+                    const paramValue = params[paramKey];
+                    return paramValue !== undefined ? String(paramValue) : match;
+                });
+            }
+            return value;
+        }
+        // Fall back to returning the key
+        return key;
+    },
+});
+/**
+ * Provide fallback localization when @flusys/ng-localization is not used.
+ * Uses hardcoded fallback messages registered by route resolvers.
+ *
+ * @example
+ * ```typescript
+ * providers: [
+ *   ...provideFallbackLocalization(),
+ * ]
+ * ```
+ */
+function provideFallbackLocalization() {
+    return [
+        // Fallback messages registry (populated by route resolvers)
+        { provide: FALLBACK_MESSAGES_REGISTRY, useValue: {} },
+        // Fallback translate adapter (reads from registry)
+        {
+            provide: TRANSLATE_ADAPTER,
+            useFactory: createFallbackTranslateAdapter,
+            deps: [FALLBACK_MESSAGES_REGISTRY],
+        },
+    ];
+}
+
 class AngularModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.5", ngImport: i0, type: AngularModule, imports: [CommonModule,
@@ -814,9 +1337,12 @@ class PrimeModule {
             TagModule,
             TextareaModule,
             ToastModule,
+            ToggleButtonModule,
             ToggleSwitchModule,
             TooltipModule,
-            TreeTableModule] });
+            TreeTableModule,
+            ProgressSpinnerModule,
+            ColorPickerModule] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PrimeModule, imports: [AutoCompleteModule,
             AvatarModule,
             ButtonModule,
@@ -851,9 +1377,12 @@ class PrimeModule {
             TagModule,
             TextareaModule,
             ToastModule,
+            ToggleButtonModule,
             ToggleSwitchModule,
             TooltipModule,
-            TreeTableModule] });
+            TreeTableModule,
+            ProgressSpinnerModule,
+            ColorPickerModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PrimeModule, decorators: [{
             type: NgModule,
@@ -893,64 +1422,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                         TagModule,
                         TextareaModule,
                         ToastModule,
+                        ToggleButtonModule,
                         ToggleSwitchModule,
                         TooltipModule,
                         TreeTableModule,
+                        ProgressSpinnerModule,
+                        ColorPickerModule,
                     ],
                 }]
         }] });
 
-// =============================================================================
-// API Resource Service - Signal-based CRUD with Angular Resource API
-// =============================================================================
 /**
  * Abstract base class for API services using Angular 21 resource() API.
  * Provides signal-based reactive data fetching with automatic loading states.
- * Response types match FLUSYS_NEST backend DTOs.
- *
- * ## Endpoint Mapping
- *
- * All endpoints use POST method (RPC-style API):
- * - `POST /{resource}/insert`       - Create single item
- * - `POST /{resource}/insert-many`  - Create multiple items
- * - `POST /{resource}/get/:id`      - Get single item by ID
- * - `POST /{resource}/get-all?q=`   - List with pagination/filter
- * - `POST /{resource}/update`       - Update single item
- * - `POST /{resource}/update-many`  - Update multiple items
- * - `POST /{resource}/delete`       - Delete/restore/permanent delete
  *
  * @example
  * ```typescript
- * // Define service with global apiBaseUrl
  * @Injectable({ providedIn: 'root' })
  * export class UserService extends ApiResourceService<UserDto, User> {
  *   constructor() {
  *     super('auth/users', inject(HttpClient));
  *   }
  * }
- *
- * // Define service with feature-specific baseUrl
- * @Injectable({ providedIn: 'root' })
- * export class FormService extends ApiResourceService<FormDto, Form> {
- *   constructor() {
- *     super('form', inject(HttpClient), 'formBuilder');
- *     // URL: services.formBuilder.baseUrl + '/form'
- *   }
- * }
- *
- * // In component - use signals
- * userService = inject(UserService);
- * users = this.userService.data;              // Signal<User[]>
- * isLoading = this.userService.isLoading;     // Signal<boolean>
- * total = this.userService.total;             // Signal<number>
- *
- * // Trigger fetch
- * this.userService.fetchList('search', { pagination: { currentPage: 0, pageSize: 10 } });
- *
- * // CRUD operations
- * await this.userService.insertAsync({ name: 'John', email: 'john@example.com' });
- * await this.userService.updateAsync({ id: '123', name: 'John Updated' });
- * await this.userService.deleteAsync({ id: '123', type: 'delete' });
  * ```
  */
 class ApiResourceService {
@@ -958,43 +1451,22 @@ class ApiResourceService {
     injector = inject(Injector);
     http;
     moduleApiName;
-    // ==========================================================================
-    // State Signals for List Queries
-    // ==========================================================================
-    /** Current search term */
     searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
-    /** Current filter and pagination state */
     filterData = signal({
         pagination: { currentPage: 0, pageSize: 10 },
         filter: {},
         select: [],
         sort: {},
     }, ...(ngDevMode ? [{ debugName: "filterData" }] : []));
-    /**
-     * Resource for list data - lazy initialized to prevent auto-fetch on service injection.
-     * Call initListResource() or any list method (fetchList, reload, etc.) to initialize.
-     */
     _listResource = null;
-    /** Whether the list resource has been initialized */
     _resourceInitialized = false;
-    /**
-     * Signal to track resource initialization for computed signals.
-     * This allows computed signals to re-evaluate when the resource is created.
-     * Without this, computed signals would not detect when _listResource changes from null.
-     */
     _resourceInitSignal = signal(false, ...(ngDevMode ? [{ debugName: "_resourceInitSignal" }] : []));
-    /** Get or create the list resource (lazy initialization) */
     get listResource() {
         if (!this._listResource) {
             this.initListResource();
         }
         return this._listResource;
     }
-    /**
-     * Initialize the list resource. Called automatically when accessing listResource
-     * or any list-related computed signals/methods.
-     * Uses runInInjectionContext to support lazy initialization outside constructor.
-     */
     initListResource() {
         if (this._resourceInitialized)
             return;
@@ -1004,88 +1476,49 @@ class ApiResourceService {
                     search: this.searchTerm(),
                     filter: this.filterData(),
                 }),
-                loader: async ({ params }) => {
-                    const { search, filter } = params;
-                    return this.fetchAllAsync(search, filter);
-                } });
+                loader: async ({ params }) => this.getAllAsync(params.filter, params.search) });
         });
-        // Signal that resource is now initialized - triggers computed re-evaluation
         this._resourceInitSignal.set(true);
     }
-    // ==========================================================================
-    // Computed State Accessors
-    // ==========================================================================
-    /**
-     * Whether data is currently loading.
-     * Tracks _resourceInitSignal to re-evaluate when resource is created.
-     */
     isLoading = computed(() => {
-        this._resourceInitSignal(); // Track initialization
+        this._resourceInitSignal();
         return this._listResource?.isLoading() ?? false;
     }, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    /**
-     * List data array.
-     * Tracks _resourceInitSignal to re-evaluate when resource is created.
-     */
     data = computed(() => {
-        this._resourceInitSignal(); // Track initialization
+        this._resourceInitSignal();
         return this._listResource?.value()?.data ?? [];
     }, ...(ngDevMode ? [{ debugName: "data" }] : []));
-    /**
-     * Total count of items.
-     * Tracks _resourceInitSignal to re-evaluate when resource is created.
-     */
     total = computed(() => {
-        this._resourceInitSignal(); // Track initialization
+        this._resourceInitSignal();
         return this._listResource?.value()?.meta?.total ?? 0;
     }, ...(ngDevMode ? [{ debugName: "total" }] : []));
-    /**
-     * Pagination metadata.
-     * Tracks _resourceInitSignal to re-evaluate when resource is created.
-     */
     pageInfo = computed(() => {
-        this._resourceInitSignal(); // Track initialization
+        this._resourceInitSignal();
         return this._listResource?.value()?.meta;
     }, ...(ngDevMode ? [{ debugName: "pageInfo" }] : []));
-    /**
-     * Whether there are more pages.
-     * Tracks _resourceInitSignal to re-evaluate when resource is created.
-     */
     hasMore = computed(() => {
-        this._resourceInitSignal(); // Track initialization
+        this._resourceInitSignal();
         const meta = this._listResource?.value()?.meta;
         if (!meta)
             return false;
         return meta.hasMore ?? (meta.page + 1) * meta.pageSize < meta.total;
     }, ...(ngDevMode ? [{ debugName: "hasMore" }] : []));
-    /**
-     * @param moduleApiName - The API resource path (e.g., 'form' for /form-builder/form)
-     * @param http - HttpClient instance
-     * @param serviceName - Optional service name for feature-specific base URL (e.g., 'formBuilder')
-     */
     constructor(moduleApiName, http, serviceName) {
-        this.moduleApiName = moduleApiName;
+        this.moduleApiName = moduleApiName || serviceName || 'api';
         const config = inject(APP_CONFIG);
-        // Use service-specific URL if provided, otherwise fallback to global apiBaseUrl
         const serviceBaseUrl = serviceName ? getServiceUrl(config, serviceName) : config.apiBaseUrl;
-        this.baseUrl = `${serviceBaseUrl}/${moduleApiName}`;
+        this.baseUrl = moduleApiName ? `${serviceBaseUrl}/${moduleApiName}` : serviceBaseUrl;
         this.http = http;
-        // Resource is now lazy-initialized, not created in constructor
     }
     getHttpOptions(endpoint, params) {
         return {
-            headers: new HttpHeaders({
-                'x-loader-tag': `${this.moduleApiName}/${endpoint}`,
-            }),
+            headers: new HttpHeaders({ 'x-loader-tag': `${this.moduleApiName}/${endpoint}` }),
             ...(params ? { params } : {}),
         };
     }
     // ==========================================================================
-    // List Management Methods
+    // List Management
     // ==========================================================================
-    /**
-     * Fetch list data (triggers resource initialization and reload)
-     */
     fetchList(search = '', filter) {
         this.initListResource();
         this.searchTerm.set(search);
@@ -1093,16 +1526,10 @@ class ApiResourceService {
             this.filterData.update((prev) => ({ ...prev, ...filter }));
         }
     }
-    /**
-     * Update pagination
-     */
     setPagination(pagination) {
         this.initListResource();
         this.filterData.update((prev) => ({ ...prev, pagination }));
     }
-    /**
-     * Go to next page
-     */
     nextPage() {
         this.initListResource();
         this.filterData.update((prev) => ({
@@ -1113,9 +1540,6 @@ class ApiResourceService {
             },
         }));
     }
-    /**
-     * Reset to first page
-     */
     resetPagination() {
         this.initListResource();
         this.filterData.update((prev) => ({
@@ -1123,42 +1547,21 @@ class ApiResourceService {
             pagination: { currentPage: 0, pageSize: prev.pagination?.pageSize ?? 10 },
         }));
     }
-    /**
-     * Reload current data
-     */
     reload() {
-        if (this._listResource) {
-            this._listResource.reload();
-        }
+        this._listResource?.reload();
     }
     // ==========================================================================
-    // Observable-based API Methods (IApiService interface)
+    // Observable API (IApiService interface)
     // ==========================================================================
-    /**
-     * Insert single item (Observable)
-     * POST /{resource}/insert
-     */
     insert(dto) {
         return this.http.post(`${this.baseUrl}/insert`, dto, this.getHttpOptions('insert'));
     }
-    /**
-     * Insert multiple items (Observable)
-     * POST /{resource}/insert-many
-     */
     insertMany(dtos) {
         return this.http.post(`${this.baseUrl}/insert-many`, dtos, this.getHttpOptions('insert-many'));
     }
-    /**
-     * Find single item by ID (Observable)
-     * POST /{resource}/get/:id
-     */
     findById(id, select) {
         return this.http.post(`${this.baseUrl}/get/${id}`, { select }, this.getHttpOptions(`get/${id}`));
     }
-    /**
-     * Get all items with pagination (Observable)
-     * POST /{resource}/get-all?q=search
-     */
     getAll(search, filter) {
         let params = new HttpParams();
         if (search) {
@@ -1166,70 +1569,36 @@ class ApiResourceService {
         }
         return this.http.post(`${this.baseUrl}/get-all`, filter, this.getHttpOptions('get-all', params));
     }
-    /**
-     * Update single item (Observable)
-     * POST /{resource}/update
-     */
     update(dto) {
         return this.http.post(`${this.baseUrl}/update`, dto, this.getHttpOptions('update'));
     }
-    /**
-     * Update multiple items (Observable)
-     * POST /{resource}/update-many
-     */
     updateMany(dtos) {
         return this.http.post(`${this.baseUrl}/update-many`, dtos, this.getHttpOptions('update-many'));
     }
-    /**
-     * Delete items (Observable)
-     * POST /{resource}/delete
-     * @param deleteDto - { id: string | string[], type: 'delete' | 'restore' | 'permanent' }
-     */
     delete(deleteDto) {
         return this.http.post(`${this.baseUrl}/delete`, deleteDto, this.getHttpOptions('delete'));
     }
     // ==========================================================================
-    // Promise-based API Methods (Async)
+    // Async API
     // ==========================================================================
-    /**
-     * Fetch paginated list (async)
-     */
-    async fetchAllAsync(search, filter) {
+    async getAllAsync(filter, search = '') {
         return firstValueFrom(this.getAll(search, filter));
     }
-    /**
-     * Find single item by ID (async)
-     */
     async findByIdAsync(id, select) {
         return firstValueFrom(this.findById(id, select));
     }
-    /**
-     * Insert single item (async)
-     */
     async insertAsync(dto) {
         return firstValueFrom(this.insert(dto));
     }
-    /**
-     * Insert multiple items (async)
-     */
     async insertManyAsync(dtos) {
         return firstValueFrom(this.insertMany(dtos));
     }
-    /**
-     * Update single item (async)
-     */
     async updateAsync(dto) {
         return firstValueFrom(this.update(dto));
     }
-    /**
-     * Update multiple items (async)
-     */
     async updateManyAsync(dtos) {
         return firstValueFrom(this.updateMany(dtos));
     }
-    /**
-     * Delete items (async)
-     */
     async deleteAsync(deleteDto) {
         return firstValueFrom(this.delete(deleteDto));
     }
@@ -1373,14 +1742,13 @@ class IconComponent {
         <i class="pi pi-question"></i>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: IsEmptyImageDirective, selector: "img", inputs: ["src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: IsEmptyImageDirective, selector: "img", inputs: ["src"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-icon',
                     imports: [AngularModule],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     @if (icon()) {
       @if (iconType() === IconTypeEnum.PRIMENG_ICON) {
@@ -1438,13 +1806,24 @@ function checkScrollPagination(event, config) {
  * - Signal forms: `[formField]="formTree.field"`
  */
 class LazyMultiSelectComponent extends BaseFormControl {
-    destroyRef = inject(DestroyRef);
+    document = inject(DOCUMENT$1);
+    appRef = inject(ApplicationRef);
+    translateAdapter = inject(TRANSLATE_ADAPTER, { optional: true });
     onDocumentClickBound = this.handleDocumentClick.bind(this);
-    isDestroyed = false;
     // View references
     pSelectRef = viewChild.required('pSelect');
+    overlayTemplate = viewChild.required('overlayTpl');
+    // Portal state
+    overlayViewRef = null;
     // Inputs
-    placeHolder = input('Select Options', ...(ngDevMode ? [{ debugName: "placeHolder" }] : []));
+    placeHolder = input('', ...(ngDevMode ? [{ debugName: "placeHolder" }] : []));
+    // Computed placeholder with translation fallback
+    displayPlaceholder = computed(() => {
+        const customPlaceholder = this.placeHolder();
+        if (customPlaceholder)
+            return customPlaceholder;
+        return this.t('shared.multi.select.placeholder');
+    }, ...(ngDevMode ? [{ debugName: "displayPlaceholder" }] : []));
     isEditMode = input.required(...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
     isLoading = input.required(...(ngDevMode ? [{ debugName: "isLoading" }] : []));
     total = input.required(...(ngDevMode ? [{ debugName: "total" }] : []));
@@ -1464,7 +1843,7 @@ class LazyMultiSelectComponent extends BaseFormControl {
         if (selectedValues.length === 0)
             return '';
         if (selectedValues.length > 3) {
-            return `${selectedValues.length} Items Selected`;
+            return this.t('shared.multi.select.items.selected', { count: selectedValues.length });
         }
         return this.selectDataList()
             .filter((item) => selectedValues.includes(item.value))
@@ -1503,16 +1882,16 @@ class LazyMultiSelectComponent extends BaseFormControl {
             });
         });
         // Document click listener for closing dropdown
-        this.destroyRef.onDestroy(() => {
-            this.isDestroyed = true;
-            document.removeEventListener('click', this.onDocumentClickBound);
-        });
-        afterNextRender(() => {
-            if (!this.isDestroyed) {
-                document.addEventListener('click', this.onDocumentClickBound);
-            }
+        afterNextRender({
+            write: () => {
+                this.document.addEventListener('click', this.onDocumentClickBound);
+            },
         });
     }
+    ngOnDestroy() {
+        this.document.removeEventListener('click', this.onDocumentClickBound);
+        this.closeOverlay();
+    }
     onScroll(event) {
         const nextPagination = checkScrollPagination(event, {
             pagination: this.pagination(),
@@ -1523,29 +1902,62 @@ class LazyMultiSelectComponent extends BaseFormControl {
             this.onPagination.emit(nextPagination);
         }
     }
-    onSelectClick(event) {
-        if (this.disabled())
+    onSelectClick() {
+        if (this.disabled() || !this.isEditMode())
             return;
+        if (this.openOptions()) {
+            this.closeOverlay();
+        }
+        else {
+            this.openOverlay();
+        }
+    }
+    openOverlay() {
         this.pSelectRef()?.nativeElement.classList.add('p-focus');
-        this.openOptions.update((isOpen) => !isOpen);
+        this.openOptions.set(true);
+        // Create embedded view and append to body (portal pattern)
+        this.overlayViewRef = this.overlayTemplate().createEmbeddedView({});
+        this.appRef.attachView(this.overlayViewRef);
+        const overlayEl = this.overlayViewRef.rootNodes[0];
+        this.document.body.appendChild(overlayEl);
+        // Override positioning for portal (CSS class handles visual styles)
+        const rect = this.pSelectRef()?.nativeElement.getBoundingClientRect();
+        if (rect) {
+            overlayEl.style.cssText = `
+        position: fixed !important;
+        top: ${rect.bottom + 2}px !important;
+        left: ${rect.left}px !important;
+        width: ${rect.width}px !important;
+        max-width: ${rect.width}px !important;
+        min-width: ${rect.width}px !important;
+        z-index: 999999999999 !important;
+      `;
+        }
+    }
+    closeOverlay() {
+        this.openOptions.set(false);
+        this.pSelectRef()?.nativeElement.classList.remove('p-focus');
+        if (this.overlayViewRef) {
+            this.appRef.detachView(this.overlayViewRef);
+            this.overlayViewRef.destroy();
+            this.overlayViewRef = null;
+        }
     }
     onOverlayClick(event) {
         event.stopPropagation();
     }
     handleDocumentClick(event) {
-        const clickedInside = this.pSelectRef()?.nativeElement.contains(event.target);
-        if (!clickedInside) {
-            this.openOptions.set(false);
-            this.pSelectRef()?.nativeElement.classList.remove('p-focus');
+        const target = event.target;
+        const clickedInSelect = this.pSelectRef()?.nativeElement.contains(target);
+        const clickedInOverlay = this.overlayViewRef?.rootNodes[0]?.contains(target);
+        if (!clickedInSelect && !clickedInOverlay) {
+            this.closeOverlay();
             this.markAsTouched();
         }
     }
     isSelected(data) {
         return this.value()?.includes(data.value) ?? false;
     }
-    key(option) {
-        return option.value;
-    }
     selectValue(event, option) {
         const previousValue = this.value() ?? [];
         if (event.checked) {
@@ -1569,13 +1981,19 @@ class LazyMultiSelectComponent extends BaseFormControl {
         event.stopPropagation();
         this.value.set([]);
     }
+    t(key, variables) {
+        if (this.translateAdapter) {
+            return this.translateAdapter.translate(key, variables);
+        }
+        return key;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LazyMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: LazyMultiSelectComponent, isStandalone: true, selector: "lib-lazy-multi-select", inputs: { placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: true, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: true, transformFunction: null }, selectDataList: { classPropertyName: "selectDataList", publicName: "selectDataList", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onSearch: "onSearch", onPagination: "onPagination" }, providers: [provideValueAccessor(LazyMultiSelectComponent)], viewQueries: [{ propertyName: "pSelectRef", first: true, predicate: ["pSelect"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"p-select w-full\" #pSelect (click)=\"onSelectClick($event)\" [class.p-disabled]=\"disabled()\">\n  @if (selectedValueDisplay()) {\n    <span class=\"p-select-label\">{{ selectedValueDisplay() }}</span>\n  } @else {\n    <span class=\"p-select-label p-placeholder\">{{ placeHolder() }}</span>\n  }\n\n  <span class=\"p-select-clear-icon\" (click)=\"clear($event)\">\n    <i class=\"pi pi-times\"></i>\n  </span>\n\n  <div class=\"p-select-dropdown\">\n    <span class=\"p-select-dropdown-icon flex items-center\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n           class=\"p-multiselect-dropdown-icon p-icon\" aria-hidden=\"true\">\n        <path d=\"M7.01744 10.398C6.91269 10.3985 6.8089 10.378 6.71215 10.3379C6.61541 10.2977 6.52766 10.2386 6.45405 10.1641L1.13907 4.84913C1.03306 4.69404 0.985221 4.5065 1.00399 4.31958C1.02276 4.13266 1.10693 3.95838 1.24166 3.82747C1.37639 3.69655 1.55301 3.61742 1.74039 3.60402C1.92777 3.59062 2.11386 3.64382 2.26584 3.75424L7.01744 8.47394L11.769 3.75424C11.9189 3.65709 12.097 3.61306 12.2748 3.62921C12.4527 3.64535 12.6199 3.72073 12.7498 3.84328C12.8797 3.96582 12.9647 4.12842 12.9912 4.30502C13.0177 4.48162 12.9841 4.662 12.8958 4.81724L7.58083 10.1322C7.50996 10.2125 7.42344 10.2775 7.32656 10.3232C7.22968 10.3689 7.12449 10.3944 7.01744 10.398Z\" fill=\"currentColor\" />\n      </svg>\n    </span>\n  </div>\n\n  @if (openOptions()) {\n    <div class=\"p-select-overlay\" (click)=\"onOverlayClick($event)\">\n      <div class=\"p-select-header flex flex-row gap-2 items-center\">\n        <p-checkbox\n          binary=\"true\"\n          [ngModel]=\"isSelectAll()\"\n          [disabled]=\"disabled()\"\n          (onChange)=\"changeSelectAll($event)\"\n        />\n        <input\n          type=\"text\"\n          pInputText\n          class=\"w-full\"\n          placeholder=\"Search...\"\n          [ngModel]=\"searchTerm()\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          (ngModelChange)=\"searchTerm.set($event)\"\n        />\n      </div>\n      <div class=\"p-select-list-container\" (scroll)=\"onScroll($event)\">\n        <ul class=\"p-select-list\">\n          @for (data of selectDataList(); track key(data)) {\n            <li class=\"p-select-option flex flex-row gap-2 items-center\"\n                [ngClass]=\"{ 'p-select-option-selected': isSelected(data) }\">\n              <p-checkbox\n                binary=\"true\"\n                [ngModel]=\"isSelected(data)\"\n                [disabled]=\"disabled()\"\n                (onChange)=\"selectValue($event, data)\"\n              />\n              <span>{{ data.label }}</span>\n            </li>\n          }\n        </ul>\n      </div>\n    </div>\n  }\n</div>", styles: [".p-select-overlay{position:absolute;top:100%;left:0;right:0;z-index:var(--p-overlay-select-zindex, 1004);margin-top:var(--p-select-overlay-offset, 2px);background:var(--p-select-overlay-background, var(--p-surface-0));border:1px solid var(--p-select-overlay-border-color, var(--p-surface-200));border-radius:var(--p-select-overlay-border-radius, var(--p-border-radius));box-shadow:var(--p-select-overlay-shadow, var(--p-overlay-shadow))}.p-select-header{padding:.75rem;border-bottom:1px solid var(--p-surface-200);background:var(--p-surface-50)}:host-context(.p-dark) .p-select-header,.dark .p-select-header{border-color:var(--p-surface-700);background:var(--p-surface-800)}.p-select-list-container{max-height:10rem;overflow-y:auto}@media(min-width:640px){.p-select-list-container{max-height:12.5rem}}.p-select-list{margin:0;padding:.25rem 0;list-style:none}.p-select-option{padding:.5rem .75rem;cursor:pointer;transition:background-color .2s ease}.p-select-option:hover{background:var(--p-select-option-focus-background, var(--p-surface-100));color:var(--p-select-option-focus-color, var(--p-text-color))}:host-context(.p-dark) .p-select-option:hover,.dark .p-select-option:hover{background:var(--p-surface-700)}.p-select-option.p-select-option-selected{background:var(--p-select-option-selected-background, var(--p-primary-50));color:var(--p-select-option-selected-color, var(--p-primary-color))}:host-context(.p-dark) .p-select-option.p-select-option-selected,.dark .p-select-option.p-select-option-selected{background:var(--p-primary-900)}.p-select-option.p-select-option-selected:hover{background:var(--p-select-option-selected-focus-background, var(--p-primary-100));color:var(--p-select-option-selected-focus-color, var(--p-primary-color))}:host-context(.p-dark) .p-select-option.p-select-option-selected:hover,.dark .p-select-option.p-select-option-selected:hover{background:var(--p-primary-800)}.p-select-clear-icon{display:flex;align-items:center;padding:0 .5rem;color:var(--p-text-color-secondary);cursor:pointer;transition:color .2s ease}.p-select-clear-icon:hover{color:var(--p-text-color)}\n"], dependencies: [{ kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: LazyMultiSelectComponent, isStandalone: true, selector: "lib-lazy-multi-select", inputs: { placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: true, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: true, transformFunction: null }, selectDataList: { classPropertyName: "selectDataList", publicName: "selectDataList", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onSearch: "onSearch", onPagination: "onPagination" }, providers: [provideValueAccessor(LazyMultiSelectComponent)], viewQueries: [{ propertyName: "pSelectRef", first: true, predicate: ["pSelect"], descendants: true, isSignal: true }, { propertyName: "overlayTemplate", first: true, predicate: ["overlayTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"p-select w-full\"\n  #pSelect\n  (click)=\"onSelectClick()\"\n  [class.p-disabled]=\"disabled()\"\n  [class.edit-mode-element-css]=\"!isEditMode()\"\n  [class.overflow-hidden]=\"!isEditMode()\"\n>\n  @if (selectedValueDisplay()) {\n    <span class=\"p-select-label\" [class.edit-mode-element-css]=\"!isEditMode()\">\n      {{ selectedValueDisplay() }}\n    </span>\n  } @else {\n    <span class=\"p-select-label p-placeholder\">{{ displayPlaceholder() }}</span>\n  }\n\n  @if (isEditMode()) {\n    <span class=\"p-select-clear-icon\" (click)=\"clear($event)\">\n      <i class=\"pi pi-times\"></i>\n    </span>\n\n    <div class=\"p-select-dropdown\">\n      <span class=\"p-select-dropdown-icon flex items-center\">\n        <svg\n          width=\"14\"\n          height=\"14\"\n          viewBox=\"0 0 14 14\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"p-multiselect-dropdown-icon p-icon\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M7.01744 10.398C6.91269 10.3985 6.8089 10.378 6.71215 10.3379C6.61541 10.2977 6.52766 10.2386 6.45405 10.1641L1.13907 4.84913C1.03306 4.69404 0.985221 4.5065 1.00399 4.31958C1.02276 4.13266 1.10693 3.95838 1.24166 3.82747C1.37639 3.69655 1.55301 3.61742 1.74039 3.60402C1.92777 3.59062 2.11386 3.64382 2.26584 3.75424L7.01744 8.47394L11.769 3.75424C11.9189 3.65709 12.097 3.61306 12.2748 3.62921C12.4527 3.64535 12.6199 3.72073 12.7498 3.84328C12.8797 3.96582 12.9647 4.12842 12.9912 4.30502C13.0177 4.48162 12.9841 4.662 12.8958 4.81724L7.58083 10.1322C7.50996 10.2125 7.42344 10.2775 7.32656 10.3232C7.22968 10.3689 7.12449 10.3944 7.01744 10.398Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </span>\n    </div>\n  }\n</div>\n\n<ng-template #overlayTpl>\n  <div class=\"p-select-overlay\" (click)=\"onOverlayClick($event)\">\n    <div class=\"p-select-header flex flex-row gap-2 items-center\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"isSelectAll()\"\n        [disabled]=\"disabled()\"\n        (onChange)=\"changeSelectAll($event)\"\n      />\n      <input\n        type=\"text\"\n        pInputText\n        class=\"w-full\"\n        [placeholder]=\"'shared.search' | translate\"\n        [ngModel]=\"searchTerm()\"\n        (ngModelChange)=\"searchTerm.set($event)\"\n      />\n    </div>\n    <div class=\"p-select-list-container\" (scroll)=\"onScroll($event)\">\n      <ul class=\"p-select-list\">\n        @for (data of selectDataList(); track data.value) {\n          <li\n            class=\"p-select-option flex flex-row gap-2 items-center\"\n            [class.p-select-option-selected]=\"isSelected(data)\"\n          >\n            <p-checkbox\n              [binary]=\"true\"\n              [ngModel]=\"isSelected(data)\"\n              [disabled]=\"disabled()\"\n              (onChange)=\"selectValue($event, data)\"\n            />\n            <span>{{ data.label }}</span>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template>\n", styles: [".p-select-overlay{display:flex;flex-direction:column;max-height:250px;overflow:hidden}.p-select-header{padding:.75rem;border-bottom:1px solid var(--p-surface-border);background:var(--p-content-hover-background);flex-shrink:0;width:100%;box-sizing:border-box}.p-select-header input{background:var(--p-form-field-background);border-color:var(--p-form-field-border-color);color:var(--p-text-color)}.p-select-header input::placeholder{color:var(--p-text-muted-color)}.p-select-list-container{flex:1;overflow-y:auto;min-height:0;width:100%}.p-select-list{margin:0;padding:.25rem 0;list-style:none;background:var(--p-surface-overlay);color:var(--p-text-color);width:100%}.p-select-option{padding:.5rem .75rem;cursor:pointer;transition:background-color .2s ease;color:var(--p-text-color)}.p-select-option:hover{background:var(--p-content-hover-background)}.p-select-option.p-select-option-selected{background:var(--p-highlight-background);color:var(--p-highlight-color)}.p-select-option.p-select-option-selected:hover{background:var(--p-highlight-focus-background);color:var(--p-highlight-focus-color)}.p-select-clear-icon{display:flex;align-items:center;padding:0 .5rem;color:var(--p-text-muted-color);cursor:pointer;transition:color .2s ease}.p-select-clear-icon:hover{color:var(--p-text-color)}\n"], dependencies: [{ kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LazyMultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-lazy-multi-select', imports: [PrimeModule, AngularModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideValueAccessor(LazyMultiSelectComponent)], template: "<div class=\"p-select w-full\" #pSelect (click)=\"onSelectClick($event)\" [class.p-disabled]=\"disabled()\">\n  @if (selectedValueDisplay()) {\n    <span class=\"p-select-label\">{{ selectedValueDisplay() }}</span>\n  } @else {\n    <span class=\"p-select-label p-placeholder\">{{ placeHolder() }}</span>\n  }\n\n  <span class=\"p-select-clear-icon\" (click)=\"clear($event)\">\n    <i class=\"pi pi-times\"></i>\n  </span>\n\n  <div class=\"p-select-dropdown\">\n    <span class=\"p-select-dropdown-icon flex items-center\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n           class=\"p-multiselect-dropdown-icon p-icon\" aria-hidden=\"true\">\n        <path d=\"M7.01744 10.398C6.91269 10.3985 6.8089 10.378 6.71215 10.3379C6.61541 10.2977 6.52766 10.2386 6.45405 10.1641L1.13907 4.84913C1.03306 4.69404 0.985221 4.5065 1.00399 4.31958C1.02276 4.13266 1.10693 3.95838 1.24166 3.82747C1.37639 3.69655 1.55301 3.61742 1.74039 3.60402C1.92777 3.59062 2.11386 3.64382 2.26584 3.75424L7.01744 8.47394L11.769 3.75424C11.9189 3.65709 12.097 3.61306 12.2748 3.62921C12.4527 3.64535 12.6199 3.72073 12.7498 3.84328C12.8797 3.96582 12.9647 4.12842 12.9912 4.30502C13.0177 4.48162 12.9841 4.662 12.8958 4.81724L7.58083 10.1322C7.50996 10.2125 7.42344 10.2775 7.32656 10.3232C7.22968 10.3689 7.12449 10.3944 7.01744 10.398Z\" fill=\"currentColor\" />\n      </svg>\n    </span>\n  </div>\n\n  @if (openOptions()) {\n    <div class=\"p-select-overlay\" (click)=\"onOverlayClick($event)\">\n      <div class=\"p-select-header flex flex-row gap-2 items-center\">\n        <p-checkbox\n          binary=\"true\"\n          [ngModel]=\"isSelectAll()\"\n          [disabled]=\"disabled()\"\n          (onChange)=\"changeSelectAll($event)\"\n        />\n        <input\n          type=\"text\"\n          pInputText\n          class=\"w-full\"\n          placeholder=\"Search...\"\n          [ngModel]=\"searchTerm()\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          (ngModelChange)=\"searchTerm.set($event)\"\n        />\n      </div>\n      <div class=\"p-select-list-container\" (scroll)=\"onScroll($event)\">\n        <ul class=\"p-select-list\">\n          @for (data of selectDataList(); track key(data)) {\n            <li class=\"p-select-option flex flex-row gap-2 items-center\"\n                [ngClass]=\"{ 'p-select-option-selected': isSelected(data) }\">\n              <p-checkbox\n                binary=\"true\"\n                [ngModel]=\"isSelected(data)\"\n                [disabled]=\"disabled()\"\n                (onChange)=\"selectValue($event, data)\"\n              />\n              <span>{{ data.label }}</span>\n            </li>\n          }\n        </ul>\n      </div>\n    </div>\n  }\n</div>", styles: [".p-select-overlay{position:absolute;top:100%;left:0;right:0;z-index:var(--p-overlay-select-zindex, 1004);margin-top:var(--p-select-overlay-offset, 2px);background:var(--p-select-overlay-background, var(--p-surface-0));border:1px solid var(--p-select-overlay-border-color, var(--p-surface-200));border-radius:var(--p-select-overlay-border-radius, var(--p-border-radius));box-shadow:var(--p-select-overlay-shadow, var(--p-overlay-shadow))}.p-select-header{padding:.75rem;border-bottom:1px solid var(--p-surface-200);background:var(--p-surface-50)}:host-context(.p-dark) .p-select-header,.dark .p-select-header{border-color:var(--p-surface-700);background:var(--p-surface-800)}.p-select-list-container{max-height:10rem;overflow-y:auto}@media(min-width:640px){.p-select-list-container{max-height:12.5rem}}.p-select-list{margin:0;padding:.25rem 0;list-style:none}.p-select-option{padding:.5rem .75rem;cursor:pointer;transition:background-color .2s ease}.p-select-option:hover{background:var(--p-select-option-focus-background, var(--p-surface-100));color:var(--p-select-option-focus-color, var(--p-text-color))}:host-context(.p-dark) .p-select-option:hover,.dark .p-select-option:hover{background:var(--p-surface-700)}.p-select-option.p-select-option-selected{background:var(--p-select-option-selected-background, var(--p-primary-50));color:var(--p-select-option-selected-color, var(--p-primary-color))}:host-context(.p-dark) .p-select-option.p-select-option-selected,.dark .p-select-option.p-select-option-selected{background:var(--p-primary-900)}.p-select-option.p-select-option-selected:hover{background:var(--p-select-option-selected-focus-background, var(--p-primary-100));color:var(--p-select-option-selected-focus-color, var(--p-primary-color))}:host-context(.p-dark) .p-select-option.p-select-option-selected:hover,.dark .p-select-option.p-select-option-selected:hover{background:var(--p-primary-800)}.p-select-clear-icon{display:flex;align-items:center;padding:0 .5rem;color:var(--p-text-color-secondary);cursor:pointer;transition:color .2s ease}.p-select-clear-icon:hover{color:var(--p-text-color)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { pSelectRef: [{ type: i0.ViewChild, args: ['pSelect', { isSignal: true }] }], placeHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeHolder", required: false }] }], isEditMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditMode", required: true }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: true }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: true }] }], selectDataList: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectDataList", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], onPagination: [{ type: i0.Output, args: ["onPagination"] }] } });
+            args: [{ selector: 'lib-lazy-multi-select', imports: [PrimeModule, AngularModule, TranslatePipe], encapsulation: ViewEncapsulation.None, providers: [provideValueAccessor(LazyMultiSelectComponent)], template: "<div\n  class=\"p-select w-full\"\n  #pSelect\n  (click)=\"onSelectClick()\"\n  [class.p-disabled]=\"disabled()\"\n  [class.edit-mode-element-css]=\"!isEditMode()\"\n  [class.overflow-hidden]=\"!isEditMode()\"\n>\n  @if (selectedValueDisplay()) {\n    <span class=\"p-select-label\" [class.edit-mode-element-css]=\"!isEditMode()\">\n      {{ selectedValueDisplay() }}\n    </span>\n  } @else {\n    <span class=\"p-select-label p-placeholder\">{{ displayPlaceholder() }}</span>\n  }\n\n  @if (isEditMode()) {\n    <span class=\"p-select-clear-icon\" (click)=\"clear($event)\">\n      <i class=\"pi pi-times\"></i>\n    </span>\n\n    <div class=\"p-select-dropdown\">\n      <span class=\"p-select-dropdown-icon flex items-center\">\n        <svg\n          width=\"14\"\n          height=\"14\"\n          viewBox=\"0 0 14 14\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"p-multiselect-dropdown-icon p-icon\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M7.01744 10.398C6.91269 10.3985 6.8089 10.378 6.71215 10.3379C6.61541 10.2977 6.52766 10.2386 6.45405 10.1641L1.13907 4.84913C1.03306 4.69404 0.985221 4.5065 1.00399 4.31958C1.02276 4.13266 1.10693 3.95838 1.24166 3.82747C1.37639 3.69655 1.55301 3.61742 1.74039 3.60402C1.92777 3.59062 2.11386 3.64382 2.26584 3.75424L7.01744 8.47394L11.769 3.75424C11.9189 3.65709 12.097 3.61306 12.2748 3.62921C12.4527 3.64535 12.6199 3.72073 12.7498 3.84328C12.8797 3.96582 12.9647 4.12842 12.9912 4.30502C13.0177 4.48162 12.9841 4.662 12.8958 4.81724L7.58083 10.1322C7.50996 10.2125 7.42344 10.2775 7.32656 10.3232C7.22968 10.3689 7.12449 10.3944 7.01744 10.398Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </span>\n    </div>\n  }\n</div>\n\n<ng-template #overlayTpl>\n  <div class=\"p-select-overlay\" (click)=\"onOverlayClick($event)\">\n    <div class=\"p-select-header flex flex-row gap-2 items-center\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"isSelectAll()\"\n        [disabled]=\"disabled()\"\n        (onChange)=\"changeSelectAll($event)\"\n      />\n      <input\n        type=\"text\"\n        pInputText\n        class=\"w-full\"\n        [placeholder]=\"'shared.search' | translate\"\n        [ngModel]=\"searchTerm()\"\n        (ngModelChange)=\"searchTerm.set($event)\"\n      />\n    </div>\n    <div class=\"p-select-list-container\" (scroll)=\"onScroll($event)\">\n      <ul class=\"p-select-list\">\n        @for (data of selectDataList(); track data.value) {\n          <li\n            class=\"p-select-option flex flex-row gap-2 items-center\"\n            [class.p-select-option-selected]=\"isSelected(data)\"\n          >\n            <p-checkbox\n              [binary]=\"true\"\n              [ngModel]=\"isSelected(data)\"\n              [disabled]=\"disabled()\"\n              (onChange)=\"selectValue($event, data)\"\n            />\n            <span>{{ data.label }}</span>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template>\n", styles: [".p-select-overlay{display:flex;flex-direction:column;max-height:250px;overflow:hidden}.p-select-header{padding:.75rem;border-bottom:1px solid var(--p-surface-border);background:var(--p-content-hover-background);flex-shrink:0;width:100%;box-sizing:border-box}.p-select-header input{background:var(--p-form-field-background);border-color:var(--p-form-field-border-color);color:var(--p-text-color)}.p-select-header input::placeholder{color:var(--p-text-muted-color)}.p-select-list-container{flex:1;overflow-y:auto;min-height:0;width:100%}.p-select-list{margin:0;padding:.25rem 0;list-style:none;background:var(--p-surface-overlay);color:var(--p-text-color);width:100%}.p-select-option{padding:.5rem .75rem;cursor:pointer;transition:background-color .2s ease;color:var(--p-text-color)}.p-select-option:hover{background:var(--p-content-hover-background)}.p-select-option.p-select-option-selected{background:var(--p-highlight-background);color:var(--p-highlight-color)}.p-select-option.p-select-option-selected:hover{background:var(--p-highlight-focus-background);color:var(--p-highlight-focus-color)}.p-select-clear-icon{display:flex;align-items:center;padding:0 .5rem;color:var(--p-text-muted-color);cursor:pointer;transition:color .2s ease}.p-select-clear-icon:hover{color:var(--p-text-color)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { pSelectRef: [{ type: i0.ViewChild, args: ['pSelect', { isSignal: true }] }], overlayTemplate: [{ type: i0.ViewChild, args: ['overlayTpl', { isSignal: true }] }], placeHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeHolder", required: false }] }], isEditMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditMode", required: true }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: true }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: true }] }], selectDataList: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectDataList", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], onPagination: [{ type: i0.Output, args: ["onPagination"] }] } });
 
 /**
  * Lazy-loading single select component with search and pagination.
@@ -1587,13 +2005,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
  */
 class LazySelectComponent extends BaseFormControl {
     destroyRef = inject(DestroyRef);
+    translateAdapter = inject(TRANSLATE_ADAPTER, { optional: true });
     onScrollBound = this.onScroll.bind(this);
     scrollTargetEl = null;
     isDestroyed = false;
     // View references
     scrollContainer = viewChild.required('scrollContainer');
     // Inputs
-    placeHolder = input('Select Option', ...(ngDevMode ? [{ debugName: "placeHolder" }] : []));
+    placeHolder = input('', ...(ngDevMode ? [{ debugName: "placeHolder" }] : []));
+    // Computed placeholder with translation fallback
+    displayPlaceholder = computed(() => {
+        const customPlaceholder = this.placeHolder();
+        if (customPlaceholder)
+            return customPlaceholder;
+        return this.t('shared.select.placeholder');
+    }, ...(ngDevMode ? [{ debugName: "displayPlaceholder" }] : []));
     optionLabel = input.required(...(ngDevMode ? [{ debugName: "optionLabel" }] : []));
     optionValue = input.required(...(ngDevMode ? [{ debugName: "optionValue" }] : []));
     isEditMode = input.required(...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
@@ -1676,12 +2102,18 @@ class LazySelectComponent extends BaseFormControl {
     onBlur() {
         this.markAsTouched();
     }
+    t(key, variables) {
+        if (this.translateAdapter) {
+            return this.translateAdapter.translate(key, variables);
+        }
+        return key;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LazySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.5", type: LazySelectComponent, isStandalone: true, selector: "lib-lazy-select", inputs: { placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: true, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: true, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: true, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: true, transformFunction: null }, selectDataList: { classPropertyName: "selectDataList", publicName: "selectDataList", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onSearch: "onSearch", onPagination: "onPagination" }, providers: [provideValueAccessor(LazySelectComponent)], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #scrollContainer class=\"lib-scroll-container\">\n  <p-select\n    class=\"w-full\"\n    [options]=\"selectDataList()\"\n    [optionLabel]=\"optionLabel()\"\n    [optionValue]=\"optionValue()\"\n    [filter]=\"true\"\n    [showClear]=\"true\"\n    [placeholder]=\"placeHolder()\"\n    [disabled]=\"disabled()\"\n    [(ngModel)]=\"value\"\n    appEditModeElementChanger\n    [isEditMode]=\"isEditMode()\"\n    (click)=\"showPanel()\"\n    (onBlur)=\"onBlur()\"\n  >\n    <ng-template #filter let-filter>\n      <input\n        pInputText\n        class=\"w-full\"\n        [ngModel]=\"searchTerm()\"\n        [ngModelOptions]=\"{ standalone: true }\"\n        (ngModelChange)=\"searchTerm.set($event)\"\n      />\n    </ng-template>\n    <ng-template #selectedItem let-selectedOption>\n      {{ selectedOption[optionLabel()] }}\n    </ng-template>\n    <ng-template #item let-item>\n      {{ item[optionLabel()] }}\n    </ng-template>\n  </p-select>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: EditModeElementChangerDirective, selector: "[appEditModeElementChanger]", inputs: ["isEditMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.5", type: LazySelectComponent, isStandalone: true, selector: "lib-lazy-select", inputs: { placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: true, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: true, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: true, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: true, transformFunction: null }, selectDataList: { classPropertyName: "selectDataList", publicName: "selectDataList", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onSearch: "onSearch", onPagination: "onPagination" }, providers: [provideValueAccessor(LazySelectComponent)], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #scrollContainer class=\"lib-scroll-container\">\n  <p-select\n    class=\"w-full\"\n    [options]=\"selectDataList()\"\n    [optionLabel]=\"optionLabel()\"\n    [optionValue]=\"optionValue()\"\n    [filter]=\"true\"\n    [showClear]=\"true\"\n    [placeholder]=\"displayPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [(ngModel)]=\"value\"\n    appEditModeElementChanger\n    [isEditMode]=\"isEditMode()\"\n    (click)=\"showPanel()\"\n    (onBlur)=\"onBlur()\"\n  >\n    <ng-template #filter let-filter>\n      <input\n        pInputText\n        class=\"w-full\"\n        [ngModel]=\"searchTerm()\"\n        [ngModelOptions]=\"{ standalone: true }\"\n        (ngModelChange)=\"searchTerm.set($event)\"\n      />\n    </ng-template>\n    <ng-template #selectedItem let-selectedOption>\n      {{ selectedOption[optionLabel()] }}\n    </ng-template>\n    <ng-template #item let-item>\n      {{ item[optionLabel()] }}\n    </ng-template>\n  </p-select>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i3.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: EditModeElementChangerDirective, selector: "[appEditModeElementChanger]", inputs: ["isEditMode"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LazySelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-lazy-select', imports: [AngularModule, PrimeModule, EditModeElementChangerDirective], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideValueAccessor(LazySelectComponent)], template: "<div #scrollContainer class=\"lib-scroll-container\">\n  <p-select\n    class=\"w-full\"\n    [options]=\"selectDataList()\"\n    [optionLabel]=\"optionLabel()\"\n    [optionValue]=\"optionValue()\"\n    [filter]=\"true\"\n    [showClear]=\"true\"\n    [placeholder]=\"placeHolder()\"\n    [disabled]=\"disabled()\"\n    [(ngModel)]=\"value\"\n    appEditModeElementChanger\n    [isEditMode]=\"isEditMode()\"\n    (click)=\"showPanel()\"\n    (onBlur)=\"onBlur()\"\n  >\n    <ng-template #filter let-filter>\n      <input\n        pInputText\n        class=\"w-full\"\n        [ngModel]=\"searchTerm()\"\n        [ngModelOptions]=\"{ standalone: true }\"\n        (ngModelChange)=\"searchTerm.set($event)\"\n      />\n    </ng-template>\n    <ng-template #selectedItem let-selectedOption>\n      {{ selectedOption[optionLabel()] }}\n    </ng-template>\n    <ng-template #item let-item>\n      {{ item[optionLabel()] }}\n    </ng-template>\n  </p-select>\n</div>\n" }]
+            args: [{ selector: 'lib-lazy-select', imports: [AngularModule, PrimeModule, EditModeElementChangerDirective], providers: [provideValueAccessor(LazySelectComponent)], template: "<div #scrollContainer class=\"lib-scroll-container\">\n  <p-select\n    class=\"w-full\"\n    [options]=\"selectDataList()\"\n    [optionLabel]=\"optionLabel()\"\n    [optionValue]=\"optionValue()\"\n    [filter]=\"true\"\n    [showClear]=\"true\"\n    [placeholder]=\"displayPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [(ngModel)]=\"value\"\n    appEditModeElementChanger\n    [isEditMode]=\"isEditMode()\"\n    (click)=\"showPanel()\"\n    (onBlur)=\"onBlur()\"\n  >\n    <ng-template #filter let-filter>\n      <input\n        pInputText\n        class=\"w-full\"\n        [ngModel]=\"searchTerm()\"\n        [ngModelOptions]=\"{ standalone: true }\"\n        (ngModelChange)=\"searchTerm.set($event)\"\n      />\n    </ng-template>\n    <ng-template #selectedItem let-selectedOption>\n      {{ selectedOption[optionLabel()] }}\n    </ng-template>\n    <ng-template #item let-item>\n      {{ item[optionLabel()] }}\n    </ng-template>\n  </p-select>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }], placeHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeHolder", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: true }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: true }] }], isEditMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditMode", required: true }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: true }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: true }] }], selectDataList: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectDataList", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], onPagination: [{ type: i0.Output, args: ["onPagination"] }] } });
 
 /**
@@ -1757,14 +2189,6 @@ const AUTH_STATE_PROVIDER = new InjectionToken('AUTH_STATE_PROVIDER', {
  * Use with `inject(PROFILE_PERMISSION_PROVIDER, { optional: true })`.
  */
 const PROFILE_PERMISSION_PROVIDER = new InjectionToken('PROFILE_PERMISSION_PROVIDER');
-/**
- * Profile Upload Provider Token
- *
- * Provides file upload functionality for profile pictures.
- * Optional - if not configured or storage not enabled, upload section is hidden.
- * Use with `inject(PROFILE_UPLOAD_PROVIDER, { optional: true })`.
- */
-const PROFILE_UPLOAD_PROVIDER = new InjectionToken('PROFILE_UPLOAD_PROVIDER');
 /**
  * User List Provider Token
  *
@@ -1779,6 +2203,20 @@ const PROFILE_UPLOAD_PROVIDER = new InjectionToken('PROFILE_UPLOAD_PROVIDER');
  * ]
  */
 const USER_LIST_PROVIDER = new InjectionToken('USER_LIST_PROVIDER');
+/**
+ * File Provider Token
+ *
+ * Provides file loading and upload functionality for file selectors.
+ * Optional - if not configured, file selector requires loadFiles/uploadFile inputs.
+ * Use with `inject(FILE_PROVIDER, { optional: true })`.
+ *
+ * @example
+ * // In app.config.ts
+ * providers: [
+ *   { provide: FILE_PROVIDER, useClass: StorageFileProvider },
+ * ]
+ */
+const FILE_PROVIDER = new InjectionToken('FILE_PROVIDER');
 
 const DEFAULT_PAGE_SIZE$1 = 20;
 /**
@@ -1792,10 +2230,11 @@ class BaseUserSelectComponent {
     destroyRef = inject(DestroyRef);
     injector = inject(Injector);
     userProvider = inject(USER_PROVIDER);
+    translateAdapter = inject(TRANSLATE_ADAPTER, { optional: true });
     abortController = null;
     // Inputs
     loadUsers = input(...(ngDevMode ? [undefined, { debugName: "loadUsers" }] : []));
-    placeHolder = input('Select User', ...(ngDevMode ? [{ debugName: "placeHolder" }] : []));
+    placeHolder = input('', ...(ngDevMode ? [{ debugName: "placeHolder" }] : []));
     isEditMode = input.required(...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
     filterActive = input(true, ...(ngDevMode ? [{ debugName: "filterActive" }] : []));
     additionalFilters = input({}, ...(ngDevMode ? [{ debugName: "additionalFilters" }] : []));
@@ -1813,6 +2252,13 @@ class BaseUserSelectComponent {
         label: user.name || user.email,
         value: user.id,
     })), ...(ngDevMode ? [{ debugName: "dropdownUsers" }] : []));
+    // Computed placeholder with translation fallback
+    displayPlaceholder = computed(() => {
+        const customPlaceholder = this.placeHolder();
+        if (customPlaceholder)
+            return customPlaceholder;
+        return this.t('shared.user.select.placeholder');
+    }, ...(ngDevMode ? [{ debugName: "displayPlaceholder" }] : []));
     constructor() {
         // Cleanup on destroy
         this.destroyRef.onDestroy(() => {
@@ -1905,6 +2351,12 @@ class BaseUserSelectComponent {
             })),
         })));
     }
+    t(key, variables) {
+        if (this.translateAdapter) {
+            return this.translateAdapter.translate(key, variables);
+        }
+        return key;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BaseUserSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: BaseUserSelectComponent, isStandalone: true, inputs: { loadUsers: { classPropertyName: "loadUsers", publicName: "loadUsers", isSignal: true, isRequired: false, transformFunction: null }, placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: true, transformFunction: null }, filterActive: { classPropertyName: "filterActive", publicName: "filterActive", isSignal: true, isRequired: false, transformFunction: null }, additionalFilters: { classPropertyName: "additionalFilters", publicName: "additionalFilters", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onError: "onError" }, ngImport: i0 });
 }
@@ -1964,7 +2416,7 @@ class UserSelectComponent extends BaseUserSelectComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: UserSelectComponent, isStandalone: true, selector: "lib-user-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", userSelected: "userSelected" }, usesInheritance: true, ngImport: i0, template: `
     <lib-lazy-select
       [(value)]="value"
-      [placeHolder]="placeHolder()"
+      [placeHolder]="displayPlaceholder()"
       [optionLabel]="'label'"
       [optionValue]="'value'"
       [isEditMode]="isEditMode()"
@@ -1975,7 +2427,7 @@ class UserSelectComponent extends BaseUserSelectComponent {
       (onSearch)="handleSearch($event)"
       (onPagination)="handlePagination($event)"
     />
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: LazySelectComponent, selector: "lib-lazy-select", inputs: ["placeHolder", "optionLabel", "optionValue", "isEditMode", "isLoading", "total", "pagination", "selectDataList", "value"], outputs: ["valueChange", "onSearch", "onPagination"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: LazySelectComponent, selector: "lib-lazy-select", inputs: ["placeHolder", "optionLabel", "optionValue", "isEditMode", "isLoading", "total", "pagination", "selectDataList", "value"], outputs: ["valueChange", "onSearch", "onPagination"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UserSelectComponent, decorators: [{
             type: Component,
@@ -1985,7 +2437,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                     template: `
     <lib-lazy-select
       [(value)]="value"
-      [placeHolder]="placeHolder()"
+      [placeHolder]="displayPlaceholder()"
       [optionLabel]="'label'"
       [optionValue]="'value'"
       [isEditMode]="isEditMode()"
@@ -1997,7 +2449,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
       (onPagination)="handlePagination($event)"
     />
   `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], userSelected: [{ type: i0.Output, args: ["userSelected"] }] } });
 
@@ -2049,7 +2500,7 @@ class UserMultiSelectComponent extends BaseUserSelectComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: UserMultiSelectComponent, isStandalone: true, selector: "lib-user-multi-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", usersSelected: "usersSelected" }, usesInheritance: true, ngImport: i0, template: `
     <lib-lazy-multi-select
       [(value)]="value"
-      [placeHolder]="placeHolder()"
+      [placeHolder]="displayPlaceholder()"
       [isEditMode]="isEditMode()"
       [isLoading]="isLoading()"
       [total]="total()"
@@ -2058,7 +2509,7 @@ class UserMultiSelectComponent extends BaseUserSelectComponent {
       (onSearch)="handleSearch($event)"
       (onPagination)="handlePagination($event)"
     />
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: LazyMultiSelectComponent, selector: "lib-lazy-multi-select", inputs: ["placeHolder", "isEditMode", "isLoading", "total", "pagination", "selectDataList", "value"], outputs: ["valueChange", "onSearch", "onPagination"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: LazyMultiSelectComponent, selector: "lib-lazy-multi-select", inputs: ["placeHolder", "isEditMode", "isLoading", "total", "pagination", "selectDataList", "value"], outputs: ["valueChange", "onSearch", "onPagination"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UserMultiSelectComponent, decorators: [{
             type: Component,
@@ -2068,7 +2519,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                     template: `
     <lib-lazy-multi-select
       [(value)]="value"
-      [placeHolder]="placeHolder()"
+      [placeHolder]="displayPlaceholder()"
       [isEditMode]="isEditMode()"
       [isLoading]="isLoading()"
       [total]="total()"
@@ -2078,19 +2529,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
       (onPagination)="handlePagination($event)"
     />
   `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], usersSelected: [{ type: i0.Output, args: ["usersSelected"] }] } });
 
 /**
  * File Uploader Component - Drag & drop file upload with type filtering.
  *
- * Pass your own `uploadFile` function - works with any storage API.
+ * Uses FILE_PROVIDER when available (no inputs needed).
+ * Optionally pass `uploadFile` to override the provider.
+ *
+ * @example
+ * ```html
+ * <!-- Using FILE_PROVIDER (recommended) -->
+ * <lib-file-uploader
+ *   [acceptTypes]="['image/*']"
+ *   (fileUploaded)="onFileUploaded($event)"
+ * />
+ *
+ * <!-- Custom upload function -->
+ * <lib-file-uploader
+ *   [uploadFile]="customUploadFn"
+ *   (fileUploaded)="onFileUploaded($event)"
+ * />
+ * ```
  */
 class FileUploaderComponent {
     messageService = inject(MessageService);
-    // Required: function to upload file
-    uploadFile = input.required(...(ngDevMode ? [{ debugName: "uploadFile" }] : []));
+    translateAdapter = inject(TRANSLATE_ADAPTER, { optional: true });
+    fileProvider = inject(FILE_PROVIDER, { optional: true });
+    // Optional: custom upload function (overrides FILE_PROVIDER)
+    uploadFile = input(...(ngDevMode ? [undefined, { debugName: "uploadFile" }] : []));
+    // Optional: function to upload multiple files at once (more efficient)
+    uploadMultipleFiles = input(...(ngDevMode ? [undefined, { debugName: "uploadMultipleFiles" }] : []));
+    // Check if upload capability is available
+    hasUploadCapability = computed(() => !!this.uploadFile() || !!this.fileProvider, ...(ngDevMode ? [{ debugName: "hasUploadCapability" }] : []));
+    // Get effective upload function (input or provider)
+    getUploadFn() {
+        const inputFn = this.uploadFile();
+        if (inputFn)
+            return inputFn;
+        if (this.fileProvider)
+            return (file, opts) => this.fileProvider.uploadFile(file, opts);
+        throw new Error('shared.file.uploader.no.upload.function');
+    }
+    // Get effective multiple upload function
+    getUploadMultipleFn() {
+        const inputFn = this.uploadMultipleFiles();
+        if (inputFn)
+            return inputFn;
+        if (this.fileProvider?.uploadMultipleFiles) {
+            return (files, opts) => this.fileProvider.uploadMultipleFiles(files, opts);
+        }
+        return undefined;
+    }
     // Inputs
     acceptTypes = input([], ...(ngDevMode ? [{ debugName: "acceptTypes" }] : []));
     multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
@@ -2120,14 +2611,14 @@ class FileUploaderComponent {
         // Check if types match predefined filters
         const typesStr = JSON.stringify(types);
         if (typesStr === JSON.stringify(FILE_TYPE_FILTERS.IMAGES))
-            return 'Images';
+            return this.t('shared.file.type.images');
         if (typesStr === JSON.stringify(FILE_TYPE_FILTERS.DOCUMENTS))
-            return 'Documents';
+            return this.t('shared.file.type.documents');
         if (typesStr === JSON.stringify(FILE_TYPE_FILTERS.VIDEOS))
-            return 'Videos';
+            return this.t('shared.file.type.videos');
         if (typesStr === JSON.stringify(FILE_TYPE_FILTERS.AUDIO))
-            return 'Audio';
-        return types.map(t => t.split('/')[1] || t).join(', ');
+            return this.t('shared.file.type.audio');
+        return types.map((t) => t.split('/')[1] || t).join(', ');
     }, ...(ngDevMode ? [{ debugName: "acceptTypesDisplay" }] : []));
     onDragOver(event) {
         event.preventDefault();
@@ -2164,12 +2655,12 @@ class FileUploaderComponent {
     handleFiles(files) {
         // Filter by type
         const allowedTypes = this.acceptTypes();
-        const validFiles = files.filter(file => {
+        const validFiles = files.filter((file) => {
             if (!isFileTypeAllowed(file, allowedTypes)) {
                 this.messageService.add({
                     severity: 'warn',
-                    summary: 'Invalid File Type',
-                    detail: `File type not allowed: ${file.name}`,
+                    summary: this.t('shared.upload.invalid.type'),
+                    detail: `${file.name}`,
                 });
                 return false;
             }
@@ -2177,12 +2668,12 @@ class FileUploaderComponent {
         });
         // Filter by size
         const maxSize = this.maxSizeMb() * 1024 * 1024;
-        const sizeValidFiles = validFiles.filter(file => {
+        const sizeValidFiles = validFiles.filter((file) => {
             if (file.size > maxSize) {
                 this.messageService.add({
                     severity: 'warn',
-                    summary: 'File Too Large',
-                    detail: `${file.name} exceeds ${this.maxSizeMb()}MB limit`,
+                    summary: this.t('shared.upload.file.too.large'),
+                    detail: `${file.name} (${this.maxSizeMb()}${this.t('shared.units.mb')})`,
                 });
                 return false;
             }
@@ -2201,37 +2692,24 @@ class FileUploaderComponent {
         }
     }
     removeFile(file) {
-        this.selectedFiles.update(files => files.filter(f => f !== file));
+        this.selectedFiles.update((files) => files.filter((f) => f !== file));
     }
     async uploadFiles(files) {
         const filesToUpload = files ?? this.selectedFiles();
         if (!filesToUpload.length || this.isUploading())
             return;
         this.isUploading.set(true);
-        const uploadedFiles = [];
         try {
-            for (const file of filesToUpload) {
-                this.uploadingFileName.set(file.name);
-                this.uploadProgress.set(0);
-                const response = await firstValueFrom(this.uploadFile()(file, this.uploadOptions()));
-                if (response.success && response.data) {
-                    uploadedFiles.push(response.data);
-                    this.fileUploaded.emit(response.data);
-                }
-                else {
-                    throw new Error(response.message || 'Upload failed');
-                }
+            const batchUploadFn = this.getUploadMultipleFn();
+            // Use batch upload if available and multiple files
+            if (batchUploadFn && filesToUpload.length > 1) {
+                await this.uploadBatch(filesToUpload, batchUploadFn);
+            }
+            else {
+                await this.uploadSequential(filesToUpload);
             }
-            this.filesUploaded.emit(uploadedFiles);
-            this.selectedFiles.set([]);
-            this.messageService.add({
-                severity: 'success',
-                summary: 'Upload Complete',
-                detail: `${uploadedFiles.length} file(s) uploaded successfully`,
-            });
         }
         catch (error) {
-            // Error toast handled by global interceptor
             this.onError.emit(error);
         }
         finally {
@@ -2240,54 +2718,113 @@ class FileUploaderComponent {
             this.uploadProgress.set(0);
         }
     }
+    async uploadBatch(files, uploadFn) {
+        this.uploadingFileName.set(`${files.length} ${this.t('shared.upload.files')}`);
+        this.uploadProgress.set(0);
+        const response = await firstValueFrom(uploadFn(files, this.uploadOptions()));
+        if (response.success && response.data) {
+            response.data.forEach((file) => this.fileUploaded.emit(file));
+            this.filesUploaded.emit(response.data);
+            this.selectedFiles.set([]);
+            this.messageService.add({
+                severity: 'success',
+                summary: this.t('shared.upload.complete'),
+                detail: this.t('shared.upload.files.uploaded', { count: response.data.length }),
+            });
+        }
+        else {
+            throw new Error(response.message || this.t('shared.upload.failed'));
+        }
+    }
+    async uploadSequential(files) {
+        const uploadedFiles = [];
+        const uploadFn = this.getUploadFn();
+        for (const file of files) {
+            this.uploadingFileName.set(file.name);
+            this.uploadProgress.set(0);
+            const response = await firstValueFrom(uploadFn(file, this.uploadOptions()));
+            if (response.success && response.data) {
+                uploadedFiles.push(response.data);
+                this.fileUploaded.emit(response.data);
+            }
+            else {
+                throw new Error(response.message || this.t('shared.upload.failed'));
+            }
+        }
+        this.filesUploaded.emit(uploadedFiles);
+        this.selectedFiles.set([]);
+        this.messageService.add({
+            severity: 'success',
+            summary: this.t('shared.upload.complete'),
+            detail: this.t('shared.upload.files.uploaded', { count: uploadedFiles.length }),
+        });
+    }
     getFileIcon(file) {
         return getFileIconClass(file.type);
     }
     formatSize(bytes) {
         const kb = bytes / 1024;
         if (kb < 1024)
-            return `${kb.toFixed(1)} KB`;
+            return `${kb.toFixed(1)} ${this.t('shared.units.kb')}`;
         const mb = kb / 1024;
-        return `${mb.toFixed(1)} MB`;
+        return `${mb.toFixed(1)} ${this.t('shared.units.mb')}`;
+    }
+    t(key, variables) {
+        if (this.translateAdapter) {
+            return this.translateAdapter.translate(key, variables);
+        }
+        return key;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FileUploaderComponent, isStandalone: true, selector: "lib-file-uploader", inputs: { uploadFile: { classPropertyName: "uploadFile", publicName: "uploadFile", isSignal: true, isRequired: true, transformFunction: null }, acceptTypes: { classPropertyName: "acceptTypes", publicName: "acceptTypes", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, maxSizeMb: { classPropertyName: "maxSizeMb", publicName: "maxSizeMb", isSignal: true, isRequired: false, transformFunction: null }, uploadOptions: { classPropertyName: "uploadOptions", publicName: "uploadOptions", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileUploaded: "fileUploaded", filesUploaded: "filesUploaded", onError: "onError", fileSelected: "fileSelected" }, ngImport: i0, template: `
-    <div
-      class="w-full"
-      [class.opacity-60]="disabled()"
-      (dragover)="onDragOver($event)"
-      (dragleave)="onDragLeave($event)"
-      (drop)="onDrop($event)"
-    >
-      <!-- Upload Area - Responsive padding -->
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FileUploaderComponent, isStandalone: true, selector: "lib-file-uploader", inputs: { uploadFile: { classPropertyName: "uploadFile", publicName: "uploadFile", isSignal: true, isRequired: false, transformFunction: null }, uploadMultipleFiles: { classPropertyName: "uploadMultipleFiles", publicName: "uploadMultipleFiles", isSignal: true, isRequired: false, transformFunction: null }, acceptTypes: { classPropertyName: "acceptTypes", publicName: "acceptTypes", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, maxSizeMb: { classPropertyName: "maxSizeMb", publicName: "maxSizeMb", isSignal: true, isRequired: false, transformFunction: null }, uploadOptions: { classPropertyName: "uploadOptions", publicName: "uploadOptions", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileUploaded: "fileUploaded", filesUploaded: "filesUploaded", onError: "onError", fileSelected: "fileSelected" }, ngImport: i0, template: `
+    @if (!hasUploadCapability()) {
+      <div class="p-4 border border-dashed border-orange-300 bg-orange-50 dark:bg-orange-900/20 rounded-lg text-center">
+        <i class="pi pi-exclamation-triangle text-2xl text-orange-500 mb-2"></i>
+        <p class="text-sm text-orange-700 dark:text-orange-300">
+          {{ 'shared.upload.provider.not.configured' | translate: { provider: 'provideStorageProviders()' } }}
+        </p>
+      </div>
+    } @else {
       <div
-        class="upload-zone border-2 border-dashed rounded-lg p-4 sm:p-6 md:p-8 cursor-pointer transition-all duration-200 text-center"
-        [class.drag-over]="isDragOver()"
-        [class.cursor-not-allowed]="disabled()"
-        (click)="fileInput.click()"
+        class="w-full"
+        [class.opacity-60]="disabled()"
+        (dragover)="onDragOver($event)"
+        (dragleave)="onDragLeave($event)"
+        (drop)="onDrop($event)"
       >
-        @if (isUploading()) {
+        <!-- Upload Area - Responsive padding -->
+        <div
+          class="upload-zone border-2 border-dashed rounded-lg p-4 sm:p-6 md:p-8 cursor-pointer transition-all duration-200 text-center"
+          [class.drag-over]="isDragOver()"
+          [class.cursor-not-allowed]="disabled()"
+          (click)="fileInput.click()"
+        >
+          @if (isUploading()) {
           <div class="flex flex-col items-center">
             <i class="pi pi-spin pi-spinner text-3xl sm:text-4xl text-primary"></i>
-            <p class="mt-2 text-sm sm:text-base break-all px-2">Uploading {{ uploadingFileName() }}...</p>
+            <p class="mt-2 text-sm sm:text-base break-all px-2">{{ 'shared.upload.uploading' | translate: { fileName: uploadingFileName() } }}</p>
             @if (uploadProgress() > 0) {
-              <p-progressBar [value]="uploadProgress()" [showValue]="true" class="w-full mt-2 max-w-xs" />
+              <p-progressBar
+                [value]="uploadProgress()"
+                [showValue]="true"
+                class="w-full mt-2 max-w-xs"
+              />
             }
           </div>
         } @else {
           <div class="flex flex-col items-center">
             <i class="pi pi-cloud-upload text-3xl sm:text-4xl text-primary"></i>
             <p class="mt-2 mb-1 font-semibold text-sm sm:text-base">
-              {{ multiple() ? 'Drop files here or click to upload' : 'Drop file here or click to upload' }}
+              {{ multiple() ? ('shared.upload.drop.multiple' | translate) : ('shared.upload.drop.single' | translate) }}
             </p>
             <p class="text-xs sm:text-sm text-color-secondary px-2">
               @if (acceptTypesDisplay()) {
-                Allowed: {{ acceptTypesDisplay() }}
+                {{ 'shared.upload.allowed.types' | translate }} {{ acceptTypesDisplay() }}
               } @else {
-                All file types allowed
+                {{ 'shared.upload.all.types.allowed' | translate }}
               }
               @if (maxSizeMb()) {
-                <span class="whitespace-nowrap">(Max {{ maxSizeMb() }}MB)</span>
+                <span class="whitespace-nowrap">{{ 'shared.upload.max.size' | translate: { size: maxSizeMb() } }}</span>
               }
             </p>
           </div>
@@ -2309,10 +2846,20 @@ class FileUploaderComponent {
       @if (selectedFiles().length > 0 && showPreview()) {
         <div class="mt-3 space-y-2">
           @for (file of selectedFiles(); track file.name) {
-            <div class="file-preview-item flex items-center gap-2 p-2 sm:p-3 rounded-lg">
-              <i [class]="getFileIcon(file)" class="text-lg sm:text-xl flex-shrink-0"></i>
-              <span class="flex-1 truncate text-sm sm:text-base min-w-0">{{ file.name }}</span>
-              <span class="text-xs sm:text-sm text-color-secondary whitespace-nowrap">{{ formatSize(file.size) }}</span>
+            <div
+              class="file-preview-item flex items-center gap-2 p-2 sm:p-3 rounded-lg"
+            >
+              <i
+                [class]="getFileIcon(file)"
+                class="text-lg sm:text-xl flex-shrink-0"
+              ></i>
+              <span class="flex-1 truncate text-sm sm:text-base min-w-0">{{
+                file.name
+              }}</span>
+              <span
+                class="text-xs sm:text-sm text-color-secondary whitespace-nowrap"
+                >{{ formatSize(file.size) }}</span
+              >
               <p-button
                 icon="pi pi-times"
                 [text]="true"
@@ -2326,48 +2873,61 @@ class FileUploaderComponent {
           }
         </div>
       }
-    </div>
-  `, isInline: true, styles: [".upload-zone{border-color:var(--p-surface-300);background:var(--p-surface-50)}.upload-zone:hover:not(.cursor-not-allowed){border-color:var(--p-primary-color);background:var(--p-surface-100)}.upload-zone.drag-over{border-color:var(--p-primary-color);background:var(--p-primary-50)}:host-context(.p-dark) .upload-zone,.dark .upload-zone{border-color:var(--p-surface-600);background:var(--p-surface-800)}:host-context(.p-dark) .upload-zone:hover:not(.cursor-not-allowed),.dark .upload-zone:hover:not(.cursor-not-allowed){border-color:var(--p-primary-color);background:var(--p-surface-700)}:host-context(.p-dark) .upload-zone.drag-over,.dark .upload-zone.drag-over{border-color:var(--p-primary-color);background:var(--p-primary-900)}.file-preview-item{border:1px solid var(--p-surface-200);background:var(--p-surface-0)}:host-context(.p-dark) .file-preview-item,.dark .file-preview-item{border-color:var(--p-surface-600);background:var(--p-surface-800)}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i2$1.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+      </div>
+    }
+  `, isInline: true, styles: [".upload-zone{border-color:var(--p-surface-300);background:var(--p-surface-50)}.upload-zone:hover:not(.cursor-not-allowed){border-color:var(--p-primary-color);background:var(--p-surface-100)}.upload-zone.drag-over{border-color:var(--p-primary-color);background:var(--p-primary-50)}:host-context(.p-dark) .upload-zone,.dark .upload-zone{border-color:var(--p-surface-600);background:var(--p-surface-800)}:host-context(.p-dark) .upload-zone:hover:not(.cursor-not-allowed),.dark .upload-zone:hover:not(.cursor-not-allowed){border-color:var(--p-primary-color);background:var(--p-surface-700)}:host-context(.p-dark) .upload-zone.drag-over,.dark .upload-zone.drag-over{border-color:var(--p-primary-color);background:var(--p-primary-900)}.file-preview-item{border:1px solid var(--p-surface-200);background:var(--p-surface-0)}:host-context(.p-dark) .file-preview-item,.dark .file-preview-item{border-color:var(--p-surface-600);background:var(--p-surface-800)}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i2$1.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FileUploaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-file-uploader', imports: [AngularModule, PrimeModule], template: `
-    <div
-      class="w-full"
-      [class.opacity-60]="disabled()"
-      (dragover)="onDragOver($event)"
-      (dragleave)="onDragLeave($event)"
-      (drop)="onDrop($event)"
-    >
-      <!-- Upload Area - Responsive padding -->
+            args: [{ selector: 'lib-file-uploader', imports: [AngularModule, PrimeModule, TranslatePipe], template: `
+    @if (!hasUploadCapability()) {
+      <div class="p-4 border border-dashed border-orange-300 bg-orange-50 dark:bg-orange-900/20 rounded-lg text-center">
+        <i class="pi pi-exclamation-triangle text-2xl text-orange-500 mb-2"></i>
+        <p class="text-sm text-orange-700 dark:text-orange-300">
+          {{ 'shared.upload.provider.not.configured' | translate: { provider: 'provideStorageProviders()' } }}
+        </p>
+      </div>
+    } @else {
       <div
-        class="upload-zone border-2 border-dashed rounded-lg p-4 sm:p-6 md:p-8 cursor-pointer transition-all duration-200 text-center"
-        [class.drag-over]="isDragOver()"
-        [class.cursor-not-allowed]="disabled()"
-        (click)="fileInput.click()"
+        class="w-full"
+        [class.opacity-60]="disabled()"
+        (dragover)="onDragOver($event)"
+        (dragleave)="onDragLeave($event)"
+        (drop)="onDrop($event)"
       >
-        @if (isUploading()) {
+        <!-- Upload Area - Responsive padding -->
+        <div
+          class="upload-zone border-2 border-dashed rounded-lg p-4 sm:p-6 md:p-8 cursor-pointer transition-all duration-200 text-center"
+          [class.drag-over]="isDragOver()"
+          [class.cursor-not-allowed]="disabled()"
+          (click)="fileInput.click()"
+        >
+          @if (isUploading()) {
           <div class="flex flex-col items-center">
             <i class="pi pi-spin pi-spinner text-3xl sm:text-4xl text-primary"></i>
-            <p class="mt-2 text-sm sm:text-base break-all px-2">Uploading {{ uploadingFileName() }}...</p>
+            <p class="mt-2 text-sm sm:text-base break-all px-2">{{ 'shared.upload.uploading' | translate: { fileName: uploadingFileName() } }}</p>
             @if (uploadProgress() > 0) {
-              <p-progressBar [value]="uploadProgress()" [showValue]="true" class="w-full mt-2 max-w-xs" />
+              <p-progressBar
+                [value]="uploadProgress()"
+                [showValue]="true"
+                class="w-full mt-2 max-w-xs"
+              />
             }
           </div>
         } @else {
           <div class="flex flex-col items-center">
             <i class="pi pi-cloud-upload text-3xl sm:text-4xl text-primary"></i>
             <p class="mt-2 mb-1 font-semibold text-sm sm:text-base">
-              {{ multiple() ? 'Drop files here or click to upload' : 'Drop file here or click to upload' }}
+              {{ multiple() ? ('shared.upload.drop.multiple' | translate) : ('shared.upload.drop.single' | translate) }}
             </p>
             <p class="text-xs sm:text-sm text-color-secondary px-2">
               @if (acceptTypesDisplay()) {
-                Allowed: {{ acceptTypesDisplay() }}
+                {{ 'shared.upload.allowed.types' | translate }} {{ acceptTypesDisplay() }}
               } @else {
-                All file types allowed
+                {{ 'shared.upload.all.types.allowed' | translate }}
               }
               @if (maxSizeMb()) {
-                <span class="whitespace-nowrap">(Max {{ maxSizeMb() }}MB)</span>
+                <span class="whitespace-nowrap">{{ 'shared.upload.max.size' | translate: { size: maxSizeMb() } }}</span>
               }
             </p>
           </div>
@@ -2389,10 +2949,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
       @if (selectedFiles().length > 0 && showPreview()) {
         <div class="mt-3 space-y-2">
           @for (file of selectedFiles(); track file.name) {
-            <div class="file-preview-item flex items-center gap-2 p-2 sm:p-3 rounded-lg">
-              <i [class]="getFileIcon(file)" class="text-lg sm:text-xl flex-shrink-0"></i>
-              <span class="flex-1 truncate text-sm sm:text-base min-w-0">{{ file.name }}</span>
-              <span class="text-xs sm:text-sm text-color-secondary whitespace-nowrap">{{ formatSize(file.size) }}</span>
+            <div
+              class="file-preview-item flex items-center gap-2 p-2 sm:p-3 rounded-lg"
+            >
+              <i
+                [class]="getFileIcon(file)"
+                class="text-lg sm:text-xl flex-shrink-0"
+              ></i>
+              <span class="flex-1 truncate text-sm sm:text-base min-w-0">{{
+                file.name
+              }}</span>
+              <span
+                class="text-xs sm:text-sm text-color-secondary whitespace-nowrap"
+                >{{ formatSize(file.size) }}</span
+              >
               <p-button
                 icon="pi pi-times"
                 [text]="true"
@@ -2406,71 +2976,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           }
         </div>
       }
-    </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".upload-zone{border-color:var(--p-surface-300);background:var(--p-surface-50)}.upload-zone:hover:not(.cursor-not-allowed){border-color:var(--p-primary-color);background:var(--p-surface-100)}.upload-zone.drag-over{border-color:var(--p-primary-color);background:var(--p-primary-50)}:host-context(.p-dark) .upload-zone,.dark .upload-zone{border-color:var(--p-surface-600);background:var(--p-surface-800)}:host-context(.p-dark) .upload-zone:hover:not(.cursor-not-allowed),.dark .upload-zone:hover:not(.cursor-not-allowed){border-color:var(--p-primary-color);background:var(--p-surface-700)}:host-context(.p-dark) .upload-zone.drag-over,.dark .upload-zone.drag-over{border-color:var(--p-primary-color);background:var(--p-primary-900)}.file-preview-item{border:1px solid var(--p-surface-200);background:var(--p-surface-0)}:host-context(.p-dark) .file-preview-item,.dark .file-preview-item{border-color:var(--p-surface-600);background:var(--p-surface-800)}\n"] }]
-        }], propDecorators: { uploadFile: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadFile", required: true }] }], acceptTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptTypes", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], maxSizeMb: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSizeMb", required: false }] }], uploadOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadOptions", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPreview", required: false }] }], autoUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoUpload", required: false }] }], fileUploaded: [{ type: i0.Output, args: ["fileUploaded"] }], filesUploaded: [{ type: i0.Output, args: ["filesUploaded"] }], onError: [{ type: i0.Output, args: ["onError"] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }] } });
+      </div>
+    }
+  `, styles: [".upload-zone{border-color:var(--p-surface-300);background:var(--p-surface-50)}.upload-zone:hover:not(.cursor-not-allowed){border-color:var(--p-primary-color);background:var(--p-surface-100)}.upload-zone.drag-over{border-color:var(--p-primary-color);background:var(--p-primary-50)}:host-context(.p-dark) .upload-zone,.dark .upload-zone{border-color:var(--p-surface-600);background:var(--p-surface-800)}:host-context(.p-dark) .upload-zone:hover:not(.cursor-not-allowed),.dark .upload-zone:hover:not(.cursor-not-allowed){border-color:var(--p-primary-color);background:var(--p-surface-700)}:host-context(.p-dark) .upload-zone.drag-over,.dark .upload-zone.drag-over{border-color:var(--p-primary-color);background:var(--p-primary-900)}.file-preview-item{border:1px solid var(--p-surface-200);background:var(--p-surface-0)}:host-context(.p-dark) .file-preview-item,.dark .file-preview-item{border-color:var(--p-surface-600);background:var(--p-surface-800)}\n"] }]
+        }], propDecorators: { uploadFile: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadFile", required: false }] }], uploadMultipleFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadMultipleFiles", required: false }] }], acceptTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptTypes", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], maxSizeMb: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSizeMb", required: false }] }], uploadOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadOptions", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPreview", required: false }] }], autoUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoUpload", required: false }] }], fileUploaded: [{ type: i0.Output, args: ["fileUploaded"] }], filesUploaded: [{ type: i0.Output, args: ["filesUploaded"] }], onError: [{ type: i0.Output, args: ["onError"] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }] } });
 
 const DEFAULT_PAGE_SIZE = 20;
+const DEFAULT_SELECTOR_PAGE_SIZE = 50;
 /**
- * File Selector Dialog - Browse and select existing files with filtering.
+ * File Selector Dialog - Self-contained file browser with upload support.
  *
- * Pass your own `loadFiles` function - works with any storage API.
+ * Uses FILE_PROVIDER internally - no external functions needed.
+ * Just configure with inputs and handle selection events.
  *
  * Features:
  * - Search with debouncing
- * - File type filtering
+ * - File type filtering (acceptTypes)
+ * - Folder filtering
  * - Infinite scroll pagination
  * - Single or multiple selection
+ * - Built-in file upload (withUploader)
  * - File preview with icons
  *
  * @example
- * ```typescript
- * // In component
- * readonly fileService = inject(FileManagerApiService);
- *
- * readonly loadFiles: LoadFilesFn = (filter) =>
- *   this.fileService.getAll(filter.search, {
- *     pagination: { currentPage: filter.page, pageSize: filter.pageSize },
- *     filter: { contentTypes: filter.contentTypes },
- *   }).pipe(
- *     map(res => ({
- *       ...res,
- *       data: res.data?.map(f => ({
- *         id: f.id,
- *         name: f.name,
- *         contentType: f.contentType,
- *         size: f.size,
- *         url: f.url
- *       }))
- *     }))
- *   );
- * ```
- *
  * ```html
  * <lib-file-selector-dialog
- *   [(visible)]="showFileSelector"
- *   [loadFiles]="loadFiles"
+ *   [(visible)]="showSelector"
  *   [acceptTypes]="['image/*']"
- *   [multiple]="false"
- *   (fileSelected)="onFileSelected($event)"
+ *   [multiple]="true"
+ *   [withUploader]="true"
+ *   (filesSelected)="onFilesSelected($event)"
  * />
  * ```
  */
 class FileSelectorDialogComponent {
     destroyRef = inject(DestroyRef);
+    translateAdapter = inject(TRANSLATE_ADAPTER, { optional: true });
+    fileProvider = inject(FILE_PROVIDER, { optional: true });
     abortController = null;
     searchDebounceTimer = null;
-    // Required: function to load files
-    loadFiles = input.required(...(ngDevMode ? [{ debugName: "loadFiles" }] : []));
-    // Inputs
-    header = input('Select File', ...(ngDevMode ? [{ debugName: "header" }] : []));
+    // Configuration inputs
+    header = input(...(ngDevMode ? [undefined, { debugName: "header" }] : []));
     acceptTypes = input([], ...(ngDevMode ? [{ debugName: "acceptTypes" }] : []));
     multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    // Computed header - shows "Select Files" for multiple, allows custom override
+    dialogHeader = computed(() => {
+        const customHeader = this.header();
+        if (customHeader)
+            return customHeader;
+        return this.t(this.multiple() ? 'shared.file.selector.select.files' : 'shared.file.selector.select.file');
+    }, ...(ngDevMode ? [{ debugName: "dialogHeader" }] : []));
     maxSelection = input(10, ...(ngDevMode ? [{ debugName: "maxSelection" }] : []));
     pageSize = input(DEFAULT_PAGE_SIZE, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    folderId = input(...(ngDevMode ? [undefined, { debugName: "folderId" }] : [])); // Filter by folder
+    withUploader = input(false, ...(ngDevMode ? [{ debugName: "withUploader" }] : []));
     // Two-way visibility binding
     visible = model(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
-    // Outputs
+    // Outputs - return file IDs
     fileSelected = output();
     filesSelected = output();
     closed = output();
@@ -2480,10 +3042,48 @@ class FileSelectorDialogComponent {
     files = signal([], ...(ngDevMode ? [{ debugName: "files" }] : []));
     selectedFiles = signal([], ...(ngDevMode ? [{ debugName: "selectedFiles" }] : []));
     total = signal(undefined, ...(ngDevMode ? [{ debugName: "total" }] : []));
-    pagination = signal({ pageSize: DEFAULT_PAGE_SIZE, currentPage: 0 }, ...(ngDevMode ? [{ debugName: "pagination" }] : []));
+    pagination = signal({
+        pageSize: DEFAULT_PAGE_SIZE,
+        currentPage: 0,
+    }, ...(ngDevMode ? [{ debugName: "pagination" }] : []));
     searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
-    // Computed
-    acceptString = computed(() => getAcceptString(this.acceptTypes()), ...(ngDevMode ? [{ debugName: "acceptString" }] : []));
+    // Folder selector state
+    folders = signal([], ...(ngDevMode ? [{ debugName: "folders" }] : []));
+    selectedFolderId = signal(null, ...(ngDevMode ? [{ debugName: "selectedFolderId" }] : []));
+    foldersLoading = signal(false, ...(ngDevMode ? [{ debugName: "foldersLoading" }] : []));
+    foldersPagination = signal({
+        pageSize: DEFAULT_SELECTOR_PAGE_SIZE,
+        currentPage: 0,
+    }, ...(ngDevMode ? [{ debugName: "foldersPagination" }] : []));
+    foldersTotal = signal(undefined, ...(ngDevMode ? [{ debugName: "foldersTotal" }] : []));
+    // Storage config selector state
+    storageConfigs = signal([], ...(ngDevMode ? [{ debugName: "storageConfigs" }] : []));
+    selectedStorageConfigId = signal(null, ...(ngDevMode ? [{ debugName: "selectedStorageConfigId" }] : []));
+    storageConfigsLoading = signal(false, ...(ngDevMode ? [{ debugName: "storageConfigsLoading" }] : []));
+    storageConfigsPagination = signal({
+        pageSize: DEFAULT_SELECTOR_PAGE_SIZE,
+        currentPage: 0,
+    }, ...(ngDevMode ? [{ debugName: "storageConfigsPagination" }] : []));
+    storageConfigsTotal = signal(undefined, ...(ngDevMode ? [{ debugName: "storageConfigsTotal" }] : []));
+    // Get effective storage config ID (selected or default)
+    effectiveStorageConfigId = computed(() => {
+        const selected = this.selectedStorageConfigId();
+        if (selected)
+            return selected;
+        // Find default config
+        const defaultConfig = this.storageConfigs().find((c) => c.isDefault);
+        return defaultConfig?.id;
+    }, ...(ngDevMode ? [{ debugName: "effectiveStorageConfigId" }] : []));
+    // Upload function bound to provider
+    uploadFileFn = (file, options) => {
+        if (!this.fileProvider)
+            throw new Error('shared.file.selector.provider.not.configured');
+        return this.fileProvider.uploadFile(file, options);
+    };
+    // Multiple upload function bound to provider (optional)
+    uploadMultipleFilesFn = this.fileProvider?.uploadMultipleFiles
+        ? (files, options) => this.fileProvider.uploadMultipleFiles(files, options)
+        : undefined;
     constructor() {
         this.destroyRef.onDestroy(() => {
             this.abortController?.abort();
@@ -2491,13 +3091,17 @@ class FileSelectorDialogComponent {
                 clearTimeout(this.searchDebounceTimer);
             }
         });
-        // Load files when dialog becomes visible
+        // Load files and storage configs when dialog becomes visible
         effect(() => {
             const isVisible = this.visible();
             if (isVisible) {
                 untracked(() => {
                     this.resetState();
                     this.fetchFiles();
+                    // Preload storage configs for upload default
+                    if (this.fileProvider?.loadStorageConfigs) {
+                        this.loadStorageConfigs();
+                    }
                 });
             }
         });
@@ -2510,7 +3114,6 @@ class FileSelectorDialogComponent {
         });
     }
     onSearchChange(value) {
-        // Debounce search
         if (this.searchDebounceTimer) {
             clearTimeout(this.searchDebounceTimer);
         }
@@ -2590,15 +3193,131 @@ class FileSelectorDialogComponent {
     onDialogHide() {
         this.closed.emit();
     }
+    // Folder selector methods
+    onFolderChange(folderId) {
+        this.selectedFolderId.set(folderId);
+        this.pagination.update((p) => ({ ...p, currentPage: 0 }));
+        this.files.set([]);
+        this.fetchFiles();
+    }
+    onFolderSearch(event) {
+        this.foldersPagination.update((p) => ({ ...p, currentPage: 0 }));
+        this.loadFolders(event.filter);
+    }
+    async loadFolders(search = '') {
+        if (!this.fileProvider?.loadFolders || this.foldersLoading())
+            return;
+        this.foldersLoading.set(true);
+        try {
+            const pag = this.foldersPagination();
+            const filter = {
+                page: pag.currentPage,
+                pageSize: pag.pageSize,
+                search,
+            };
+            const response = await firstValueFrom(this.fileProvider.loadFolders(filter));
+            if (response.success && response.data) {
+                this.folders.set(response.data);
+                this.foldersTotal.set(response.meta?.total);
+            }
+        }
+        catch (error) {
+            this.onError.emit(error);
+        }
+        finally {
+            this.foldersLoading.set(false);
+        }
+    }
+    // Storage config selector methods
+    onStorageConfigChange(configId) {
+        this.selectedStorageConfigId.set(configId);
+        this.pagination.update((p) => ({ ...p, currentPage: 0 }));
+        this.files.set([]);
+        this.fetchFiles();
+    }
+    onStorageConfigSearch(event) {
+        this.storageConfigsPagination.update((p) => ({ ...p, currentPage: 0 }));
+        this.loadStorageConfigs(event.filter);
+    }
+    async loadStorageConfigs(search = '') {
+        if (!this.fileProvider?.loadStorageConfigs || this.storageConfigsLoading())
+            return;
+        this.storageConfigsLoading.set(true);
+        try {
+            const pag = this.storageConfigsPagination();
+            const filter = {
+                page: pag.currentPage,
+                pageSize: pag.pageSize,
+                search,
+            };
+            const response = await firstValueFrom(this.fileProvider.loadStorageConfigs(filter));
+            if (response.success && response.data) {
+                this.storageConfigs.set(response.data);
+                this.storageConfigsTotal.set(response.meta?.total);
+            }
+        }
+        catch (error) {
+            this.onError.emit(error);
+        }
+        finally {
+            this.storageConfigsLoading.set(false);
+        }
+    }
+    onFileUploaded(uploadedFile) {
+        if (!uploadedFile.id)
+            return;
+        // Convert uploaded file to IFileBasicInfo
+        const fileInfo = {
+            id: uploadedFile.id,
+            name: uploadedFile.name,
+            contentType: uploadedFile.contentType,
+            size: String(uploadedFile.size / 1024),
+            url: null,
+        };
+        // Add to the beginning of files list
+        this.files.update((current) => [fileInfo, ...current]);
+        // Auto-select the uploaded file
+        if (this.multiple()) {
+            const selected = this.selectedFiles();
+            if (selected.length < this.maxSelection()) {
+                this.selectedFiles.update((files) => [...files, fileInfo]);
+            }
+        }
+        else {
+            this.selectedFiles.set([fileInfo]);
+        }
+        // Refresh files to get proper URLs
+        this.fetchFiles();
+    }
     resetState() {
+        // Cancel any pending request and reset loading state
+        this.abortController?.abort();
+        this.abortController = null;
+        this.isLoading.set(false);
         this.files.set([]);
         this.selectedFiles.set([]);
         this.searchTerm.set('');
         this.pagination.set({ pageSize: this.pageSize(), currentPage: 0 });
         this.total.set(undefined);
+        // Reset folder selector
+        this.selectedFolderId.set(null);
+        this.folders.set([]);
+        this.foldersPagination.set({
+            pageSize: DEFAULT_SELECTOR_PAGE_SIZE,
+            currentPage: 0,
+        });
+        this.foldersTotal.set(undefined);
+        // Reset storage config selector
+        this.selectedStorageConfigId.set(null);
+        this.storageConfigs.set([]);
+        this.storageConfigsPagination.set({
+            pageSize: DEFAULT_SELECTOR_PAGE_SIZE,
+            currentPage: 0,
+        });
+        this.storageConfigsTotal.set(undefined);
     }
     async fetchFiles(append = false) {
-        if (this.isLoading())
+        if (!this.fileProvider || this.isLoading())
             return;
         this.abortController?.abort();
         this.abortController = new AbortController();
@@ -2609,15 +3328,33 @@ class FileSelectorDialogComponent {
                 page: pag.currentPage,
                 pageSize: pag.pageSize,
                 search: this.searchTerm(),
-                contentTypes: this.acceptTypes().length ? this.acceptTypes() : undefined,
+                contentTypes: this.acceptTypes().length
+                    ? this.acceptTypes()
+                    : undefined,
+                folderId: this.selectedFolderId() || this.folderId(),
+                storageConfigId: this.selectedStorageConfigId() || undefined,
             };
-            const response = await firstValueFrom(this.loadFiles()(filter));
+            const response = await firstValueFrom(this.fileProvider.loadFiles(filter));
             if (response.success && response.data) {
+                let files = response.data;
+                // Always fetch URLs for all files to get fresh presigned URLs
+                if (this.fileProvider.getFileUrls && files.length > 0) {
+                    const fileIds = files.map((f) => f.id);
+                    const urlResponse = await firstValueFrom(this.fileProvider.getFileUrls(fileIds));
+                    if (urlResponse.success && urlResponse.data) {
+                        // Merge URLs into files
+                        const urlMap = new Map(urlResponse.data.map((f) => [f.id, f.url]));
+                        files = files.map((f) => ({
+                            ...f,
+                            url: urlMap.get(f.id) ?? f.url,
+                        }));
+                    }
+                }
                 if (append) {
-                    this.files.update((current) => [...current, ...response.data]);
+                    this.files.update((current) => [...current, ...files]);
                 }
                 else {
-                    this.files.set(response.data);
+                    this.files.set(files);
                 }
                 this.total.set(response.meta?.total);
             }
@@ -2631,10 +3368,16 @@ class FileSelectorDialogComponent {
             this.isLoading.set(false);
         }
     }
+    t(key, variables) {
+        if (this.translateAdapter) {
+            return this.translateAdapter.translate(key, variables);
+        }
+        return key;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FileSelectorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FileSelectorDialogComponent, isStandalone: true, selector: "lib-file-selector-dialog", inputs: { loadFiles: { classPropertyName: "loadFiles", publicName: "loadFiles", isSignal: true, isRequired: true, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, acceptTypes: { classPropertyName: "acceptTypes", publicName: "acceptTypes", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSelection: { classPropertyName: "maxSelection", publicName: "maxSelection", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", fileSelected: "fileSelected", filesSelected: "filesSelected", closed: "closed", onError: "onError" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FileSelectorDialogComponent, isStandalone: true, selector: "lib-file-selector-dialog", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, acceptTypes: { classPropertyName: "acceptTypes", publicName: "acceptTypes", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSelection: { classPropertyName: "maxSelection", publicName: "maxSelection", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, folderId: { classPropertyName: "folderId", publicName: "folderId", isSignal: true, isRequired: false, transformFunction: null }, withUploader: { classPropertyName: "withUploader", publicName: "withUploader", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", fileSelected: "fileSelected", filesSelected: "filesSelected", closed: "closed", onError: "onError" }, ngImport: i0, template: `
     <p-dialog
-      [header]="header()"
+      [header]="dialogHeader()"
       [(visible)]="visible"
       [modal]="true"
       [closable]="true"
@@ -2645,107 +3388,246 @@ class FileSelectorDialogComponent {
       styleClass="file-selector-dialog"
       (onHide)="onDialogHide()"
     >
-      <!-- Search Bar -->
-      <div class="flex flex-col sm:flex-row gap-2 mb-3">
-        <span class="p-input-icon-left flex-1">
-          <i class="pi pi-search"></i>
-          <input
-            pInputText
-            type="text"
-            [ngModel]="searchTerm()"
-            (ngModelChange)="onSearchChange($event)"
-            placeholder="Search files..."
-            class="w-full"
-          />
-        </span>
-        @if (multiple()) {
-          <span class="text-sm text-color-secondary self-center whitespace-nowrap">
-            {{ selectedFiles().length }} selected
-          </span>
+      @if (!fileProvider) {
+        <div class="p-6 text-center">
+          <i
+            class="pi pi-exclamation-triangle text-4xl text-orange-500 mb-3"
+          ></i>
+          <p class="text-lg font-medium text-color mb-2">
+            {{ 'shared.file.selector.provider.not.configured' | translate }}
+          </p>
+          <p class="text-sm text-color-secondary mb-4">
+            {{ 'shared.file.selector.add.provider' | translate }}
+            <code class="inline-block bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-1 rounded font-mono text-xs">provideStorageProviders()</code>
+          </p>
+          <button
+            pButton
+            [label]="'shared.close' | translate"
+            class="p-button-text"
+            (click)="onCancel()"
+          ></button>
+        </div>
+      } @else {
+        <!-- Upload Section (when withUploader is enabled) -->
+        @if (withUploader()) {
+          <div class="mb-4">
+            <lib-file-uploader
+              [uploadFile]="uploadFileFn"
+              [uploadMultipleFiles]="uploadMultipleFilesFn"
+              [uploadOptions]="{ storageConfigId: effectiveStorageConfigId() }"
+              [acceptTypes]="acceptTypes()"
+              [multiple]="multiple()"
+              [maxFiles]="maxSelection()"
+              [maxSizeMb]="10"
+              [showPreview]="false"
+              (fileUploaded)="onFileUploaded($event)"
+            />
+          </div>
         }
-      </div>
 
-      <!-- File Grid - Responsive columns -->
-      <div
-        class="file-grid"
-        #scrollContainer
-        (scroll)="onScroll($event)"
-      >
-        @if (isLoading() && files().length === 0) {
-          <div class="col-span-full flex justify-center p-4">
-            <i class="pi pi-spin pi-spinner text-4xl text-color-secondary"></i>
-          </div>
-        } @else if (files().length === 0) {
-          <div class="col-span-full text-center p-4 text-color-secondary">
-            <i class="pi pi-inbox text-4xl mb-2 block"></i>
-            <p>No files found</p>
-          </div>
-        } @else {
-          @for (file of files(); track file.id) {
-            <div
-              class="file-card"
-              [class.selected]="isSelected(file)"
-              [class.disabled]="!isFileAllowed(file)"
-              (click)="toggleSelection(file)"
+        <!-- Filters Row - All on same line on desktop -->
+        <div
+          class="flex flex-col sm:flex-row gap-2 mb-3 items-stretch sm:items-center"
+        >
+          <!-- Search -->
+          <p-iconfield class="flex-1">
+            <p-inputicon class="pi pi-search" />
+            <input
+              pInputText
+              type="text"
+              [ngModel]="searchTerm()"
+              (ngModelChange)="onSearchChange($event)"
+              [placeholder]="'shared.file.selector.search.placeholder' | translate"
+              class="w-full"
+            />
+          </p-iconfield>
+
+          <!-- Folder Selector -->
+          @if (fileProvider.loadFolders) {
+            <p-select
+              [options]="folders()"
+              [ngModel]="selectedFolderId()"
+              (ngModelChange)="onFolderChange($event)"
+              optionLabel="name"
+              optionValue="id"
+              [placeholder]="'shared.file.selector.all.folders' | translate"
+              [showClear]="true"
+              [filter]="true"
+              filterBy="name"
+              (onFilter)="onFolderSearch($event)"
+              [loading]="foldersLoading()"
+              class="w-full sm:w-40"
+              (onShow)="loadFolders()"
             >
-              <!-- File Preview -->
-              <div class="file-preview">
-                @if (isImage(file) && file.url) {
-                  <img [src]="file.url" [alt]="file.name" class="w-full h-full object-cover" />
-                } @else {
-                  <i [class]="getFileIcon(file)" class="text-4xl sm:text-5xl text-color-secondary"></i>
-                }
-                @if (isSelected(file)) {
-                  <div class="selected-overlay">
-                    <i class="pi pi-check text-xl sm:text-2xl"></i>
-                  </div>
-                }
-              </div>
+              <ng-template pTemplate="selectedItem" let-folder>
+                <div class="flex items-center gap-2">
+                  <i class="pi pi-folder text-color-secondary"></i>
+                  <span>{{ folder?.name }}</span>
+                </div>
+              </ng-template>
+              <ng-template pTemplate="item" let-folder>
+                <div class="flex items-center gap-2">
+                  <i class="pi pi-folder text-color-secondary"></i>
+                  <span>{{ folder.name }}</span>
+                </div>
+              </ng-template>
+            </p-select>
+          }
 
-              <!-- File Info -->
-              <div class="p-2 text-center bg-surface-0 dark:bg-surface-900">
-                <span class="block text-xs sm:text-sm whitespace-nowrap overflow-hidden text-ellipsis" [title]="file.name">
-                  {{ file.name }}
-                </span>
-                <span class="block text-xs text-color-secondary">{{ formatSize(file.size) }}</span>
-              </div>
-            </div>
+          <!-- Storage Config Selector -->
+          @if (fileProvider.loadStorageConfigs) {
+            <p-select
+              [options]="storageConfigs()"
+              [ngModel]="selectedStorageConfigId()"
+              (ngModelChange)="onStorageConfigChange($event)"
+              optionLabel="name"
+              optionValue="id"
+              [placeholder]="'shared.file.selector.all.storage' | translate"
+              [showClear]="true"
+              [filter]="true"
+              filterBy="name"
+              (onFilter)="onStorageConfigSearch($event)"
+              [loading]="storageConfigsLoading()"
+              class="w-full sm:w-40"
+              (onShow)="loadStorageConfigs()"
+            >
+              <ng-template pTemplate="selectedItem" let-config>
+                <div class="flex items-center gap-2">
+                  <i class="pi pi-database text-color-secondary"></i>
+                  <span>{{ config?.name }}</span>
+                  @if (config?.isDefault) {
+                    <span
+                      class="text-xs bg-primary text-primary-contrast px-1 rounded"
+                      >{{ 'shared.default' | translate }}</span
+                    >
+                  }
+                </div>
+              </ng-template>
+              <ng-template pTemplate="item" let-config>
+                <div class="flex items-center gap-2">
+                  <i class="pi pi-database text-color-secondary"></i>
+                  <span>{{ config.name }}</span>
+                  @if (config.isDefault) {
+                    <span
+                      class="text-xs bg-primary text-primary-contrast px-1 rounded"
+                      >{{ 'shared.default' | translate }}</span
+                    >
+                  }
+                </div>
+              </ng-template>
+            </p-select>
           }
 
-          @if (isLoading()) {
-            <div class="col-span-full flex justify-center p-2">
-              <i class="pi pi-spin pi-spinner text-color-secondary"></i>
-            </div>
+          <!-- Selected count -->
+          @if (multiple()) {
+            <span
+              class="text-sm text-color-secondary self-center whitespace-nowrap"
+            >
+              {{ 'shared.file.selector.selected' | translate: { count: selectedFiles().length } }}
+            </span>
           }
-        }
-      </div>
+        </div>
 
-      <!-- Footer -->
-      <ng-template #footer>
-        <div class="flex flex-col-reverse sm:flex-row gap-2 w-full sm:w-auto sm:justify-end">
-          <button
-            pButton
-            label="Cancel"
-            class="p-button-text w-full sm:w-auto"
-            (click)="onCancel()"
-          ></button>
-          <button
-            pButton
-            [label]="multiple() ? 'Select (' + selectedFiles().length + ')' : 'Select'"
-            [disabled]="selectedFiles().length === 0"
-            class="w-full sm:w-auto"
-            (click)="onConfirm()"
-          ></button>
+        <!-- File Grid - Responsive columns -->
+        <div class="file-grid" #scrollContainer (scroll)="onScroll($event)">
+          @if (isLoading() && files().length === 0) {
+            <div class="col-span-full flex justify-center p-4">
+              <i
+                class="pi pi-spin pi-spinner text-4xl text-color-secondary"
+              ></i>
+            </div>
+          } @else if (files().length === 0) {
+            <div class="col-span-full text-center p-4 text-color-secondary">
+              <i class="pi pi-inbox text-4xl mb-2 block"></i>
+              <p>{{ 'shared.file.selector.no.files' | translate }}</p>
+            </div>
+          } @else {
+            @for (file of files(); track file.id) {
+              <div
+                class="file-card"
+                [class.selected]="isSelected(file)"
+                [class.disabled]="!isFileAllowed(file)"
+                (click)="toggleSelection(file)"
+              >
+                <!-- File Preview -->
+                <div class="file-preview">
+                  @if (isImage(file) && file.url) {
+                    <img
+                      [src]="file.url"
+                      [alt]="file.name"
+                      class="w-full h-full object-cover"
+                    />
+                  } @else {
+                    <i
+                      [class]="getFileIcon(file)"
+                      class="text-4xl sm:text-5xl text-color-secondary"
+                    ></i>
+                  }
+                  @if (isSelected(file)) {
+                    <div class="selected-overlay">
+                      <i class="pi pi-check text-xl sm:text-2xl"></i>
+                    </div>
+                  }
+                </div>
+
+                <!-- File Info -->
+                <div class="p-2 text-center bg-surface-0 dark:bg-surface-900">
+                  <span
+                    class="block text-xs sm:text-sm whitespace-nowrap overflow-hidden text-ellipsis"
+                    [title]="file.name"
+                  >
+                    {{ file.name }}
+                  </span>
+                  <span class="block text-xs text-color-secondary">{{
+                    formatSize(file.size)
+                  }}</span>
+                </div>
+              </div>
+            }
+
+            @if (isLoading()) {
+              <div class="col-span-full flex justify-center p-2">
+                <i class="pi pi-spin pi-spinner text-color-secondary"></i>
+              </div>
+            }
+          }
         </div>
-      </ng-template>
+
+        <!-- Footer -->
+        <ng-template pTemplate="footer">
+          <div
+            class="flex flex-col-reverse sm:flex-row gap-2 w-full sm:w-auto sm:justify-end"
+          >
+            <button
+              pButton
+              type="button"
+              [label]="'shared.cancel' | translate"
+              class="p-button-text w-full sm:w-auto"
+              (click)="onCancel()"
+            ></button>
+            <button
+              pButton
+              type="button"
+              [label]="
+                multiple()
+                  ? ('shared.file.selector.select.multiple' | translate: { count: selectedFiles().length })
+                  : ('shared.file.selector.select' | translate)
+              "
+              [disabled]="selectedFiles().length === 0"
+              class="w-full sm:w-auto"
+              (click)="onConfirm()"
+            ></button>
+          </div>
+        </ng-template>
+      }
     </p-dialog>
-  `, isInline: true, styles: [".file-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;max-height:300px;overflow-y:auto;padding:.5rem}@media(min-width:480px){.file-grid{grid-template-columns:repeat(3,1fr);max-height:350px}}@media(min-width:640px){.file-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;max-height:400px}}.file-card{border:2px solid var(--p-surface-300);border-radius:var(--p-border-radius);cursor:pointer;transition:all .2s ease;overflow:hidden;background:var(--p-surface-0)}:host-context(.p-dark) .file-card,.dark .file-card{border-color:var(--p-surface-600);background:var(--p-surface-800)}.file-card:hover:not(.disabled){border-color:var(--p-primary-color);transform:translateY(-2px);box-shadow:var(--p-overlay-shadow)}.file-card.selected{border-color:var(--p-primary-color);background:var(--p-primary-50)}:host-context(.p-dark) .file-card.selected,.dark .file-card.selected{background:var(--p-primary-900)}.file-card.disabled{opacity:.5;cursor:not-allowed}.file-preview{position:relative;height:80px;display:flex;align-items:center;justify-content:center;background:var(--p-surface-100)}@media(min-width:640px){.file-preview{height:100px}}:host-context(.p-dark) .file-preview,.dark .file-preview{background:var(--p-surface-700)}.selected-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--p-primary-500-rgb, 59, 130, 246),.3)}.selected-overlay i{color:var(--p-primary-color);background:var(--p-surface-0);border-radius:50%;padding:.5rem}:host-context(.p-dark) .selected-overlay i,.dark .selected-overlay i{background:var(--p-surface-900)}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IsEmptyImageDirective, selector: "img", inputs: ["src"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i1$2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i4.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".file-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;max-height:300px;overflow-y:auto;padding:.5rem}@media(min-width:480px){.file-grid{grid-template-columns:repeat(3,1fr);max-height:350px}}@media(min-width:640px){.file-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;max-height:400px}}.file-card{border:2px solid var(--p-surface-300);border-radius:var(--p-border-radius);cursor:pointer;transition:all .2s ease;overflow:hidden;background:var(--p-surface-0)}:host-context(.p-dark) .file-card,.dark .file-card{border-color:var(--p-surface-600);background:var(--p-surface-800)}.file-card:hover:not(.disabled){border-color:var(--p-primary-color);transform:translateY(-2px);box-shadow:var(--p-overlay-shadow)}.file-card.selected{border-color:var(--p-primary-color);background:var(--p-primary-50)}:host-context(.p-dark) .file-card.selected,.dark .file-card.selected{background:var(--p-primary-900)}.file-card.disabled{opacity:.5;cursor:not-allowed}.file-preview{position:relative;height:80px;display:flex;align-items:center;justify-content:center;background:var(--p-surface-100)}@media(min-width:640px){.file-preview{height:100px}}:host-context(.p-dark) .file-preview,.dark .file-preview{background:var(--p-surface-700)}.selected-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--p-primary-500-rgb, 59, 130, 246),.3)}.selected-overlay i{color:var(--p-primary-color);background:var(--p-surface-0);border-radius:50%;padding:.5rem}:host-context(.p-dark) .selected-overlay i,.dark .selected-overlay i{background:var(--p-surface-900)}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IsEmptyImageDirective, selector: "img", inputs: ["src"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i5.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i3.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: FileUploaderComponent, selector: "lib-file-uploader", inputs: ["uploadFile", "uploadMultipleFiles", "acceptTypes", "multiple", "maxFiles", "maxSizeMb", "uploadOptions", "disabled", "showPreview", "autoUpload"], outputs: ["fileUploaded", "filesUploaded", "onError", "fileSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FileSelectorDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-file-selector-dialog', imports: [AngularModule, PrimeModule], template: `
+            args: [{ selector: 'lib-file-selector-dialog', imports: [AngularModule, PrimeModule, FileUploaderComponent, TranslatePipe], template: `
     <p-dialog
-      [header]="header()"
+      [header]="dialogHeader()"
       [(visible)]="visible"
       [modal]="true"
       [closable]="true"
@@ -2756,102 +3638,241 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
       styleClass="file-selector-dialog"
       (onHide)="onDialogHide()"
     >
-      <!-- Search Bar -->
-      <div class="flex flex-col sm:flex-row gap-2 mb-3">
-        <span class="p-input-icon-left flex-1">
-          <i class="pi pi-search"></i>
-          <input
-            pInputText
-            type="text"
-            [ngModel]="searchTerm()"
-            (ngModelChange)="onSearchChange($event)"
-            placeholder="Search files..."
-            class="w-full"
-          />
-        </span>
-        @if (multiple()) {
-          <span class="text-sm text-color-secondary self-center whitespace-nowrap">
-            {{ selectedFiles().length }} selected
-          </span>
+      @if (!fileProvider) {
+        <div class="p-6 text-center">
+          <i
+            class="pi pi-exclamation-triangle text-4xl text-orange-500 mb-3"
+          ></i>
+          <p class="text-lg font-medium text-color mb-2">
+            {{ 'shared.file.selector.provider.not.configured' | translate }}
+          </p>
+          <p class="text-sm text-color-secondary mb-4">
+            {{ 'shared.file.selector.add.provider' | translate }}
+            <code class="inline-block bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-1 rounded font-mono text-xs">provideStorageProviders()</code>
+          </p>
+          <button
+            pButton
+            [label]="'shared.close' | translate"
+            class="p-button-text"
+            (click)="onCancel()"
+          ></button>
+        </div>
+      } @else {
+        <!-- Upload Section (when withUploader is enabled) -->
+        @if (withUploader()) {
+          <div class="mb-4">
+            <lib-file-uploader
+              [uploadFile]="uploadFileFn"
+              [uploadMultipleFiles]="uploadMultipleFilesFn"
+              [uploadOptions]="{ storageConfigId: effectiveStorageConfigId() }"
+              [acceptTypes]="acceptTypes()"
+              [multiple]="multiple()"
+              [maxFiles]="maxSelection()"
+              [maxSizeMb]="10"
+              [showPreview]="false"
+              (fileUploaded)="onFileUploaded($event)"
+            />
+          </div>
         }
-      </div>
 
-      <!-- File Grid - Responsive columns -->
-      <div
-        class="file-grid"
-        #scrollContainer
-        (scroll)="onScroll($event)"
-      >
-        @if (isLoading() && files().length === 0) {
-          <div class="col-span-full flex justify-center p-4">
-            <i class="pi pi-spin pi-spinner text-4xl text-color-secondary"></i>
-          </div>
-        } @else if (files().length === 0) {
-          <div class="col-span-full text-center p-4 text-color-secondary">
-            <i class="pi pi-inbox text-4xl mb-2 block"></i>
-            <p>No files found</p>
-          </div>
-        } @else {
-          @for (file of files(); track file.id) {
-            <div
-              class="file-card"
-              [class.selected]="isSelected(file)"
-              [class.disabled]="!isFileAllowed(file)"
-              (click)="toggleSelection(file)"
+        <!-- Filters Row - All on same line on desktop -->
+        <div
+          class="flex flex-col sm:flex-row gap-2 mb-3 items-stretch sm:items-center"
+        >
+          <!-- Search -->
+          <p-iconfield class="flex-1">
+            <p-inputicon class="pi pi-search" />
+            <input
+              pInputText
+              type="text"
+              [ngModel]="searchTerm()"
+              (ngModelChange)="onSearchChange($event)"
+              [placeholder]="'shared.file.selector.search.placeholder' | translate"
+              class="w-full"
+            />
+          </p-iconfield>
+
+          <!-- Folder Selector -->
+          @if (fileProvider.loadFolders) {
+            <p-select
+              [options]="folders()"
+              [ngModel]="selectedFolderId()"
+              (ngModelChange)="onFolderChange($event)"
+              optionLabel="name"
+              optionValue="id"
+              [placeholder]="'shared.file.selector.all.folders' | translate"
+              [showClear]="true"
+              [filter]="true"
+              filterBy="name"
+              (onFilter)="onFolderSearch($event)"
+              [loading]="foldersLoading()"
+              class="w-full sm:w-40"
+              (onShow)="loadFolders()"
             >
-              <!-- File Preview -->
-              <div class="file-preview">
-                @if (isImage(file) && file.url) {
-                  <img [src]="file.url" [alt]="file.name" class="w-full h-full object-cover" />
-                } @else {
-                  <i [class]="getFileIcon(file)" class="text-4xl sm:text-5xl text-color-secondary"></i>
-                }
-                @if (isSelected(file)) {
-                  <div class="selected-overlay">
-                    <i class="pi pi-check text-xl sm:text-2xl"></i>
-                  </div>
-                }
-              </div>
+              <ng-template pTemplate="selectedItem" let-folder>
+                <div class="flex items-center gap-2">
+                  <i class="pi pi-folder text-color-secondary"></i>
+                  <span>{{ folder?.name }}</span>
+                </div>
+              </ng-template>
+              <ng-template pTemplate="item" let-folder>
+                <div class="flex items-center gap-2">
+                  <i class="pi pi-folder text-color-secondary"></i>
+                  <span>{{ folder.name }}</span>
+                </div>
+              </ng-template>
+            </p-select>
+          }
 
-              <!-- File Info -->
-              <div class="p-2 text-center bg-surface-0 dark:bg-surface-900">
-                <span class="block text-xs sm:text-sm whitespace-nowrap overflow-hidden text-ellipsis" [title]="file.name">
-                  {{ file.name }}
-                </span>
-                <span class="block text-xs text-color-secondary">{{ formatSize(file.size) }}</span>
-              </div>
-            </div>
+          <!-- Storage Config Selector -->
+          @if (fileProvider.loadStorageConfigs) {
+            <p-select
+              [options]="storageConfigs()"
+              [ngModel]="selectedStorageConfigId()"
+              (ngModelChange)="onStorageConfigChange($event)"
+              optionLabel="name"
+              optionValue="id"
+              [placeholder]="'shared.file.selector.all.storage' | translate"
+              [showClear]="true"
+              [filter]="true"
+              filterBy="name"
+              (onFilter)="onStorageConfigSearch($event)"
+              [loading]="storageConfigsLoading()"
+              class="w-full sm:w-40"
+              (onShow)="loadStorageConfigs()"
+            >
+              <ng-template pTemplate="selectedItem" let-config>
+                <div class="flex items-center gap-2">
+                  <i class="pi pi-database text-color-secondary"></i>
+                  <span>{{ config?.name }}</span>
+                  @if (config?.isDefault) {
+                    <span
+                      class="text-xs bg-primary text-primary-contrast px-1 rounded"
+                      >{{ 'shared.default' | translate }}</span
+                    >
+                  }
+                </div>
+              </ng-template>
+              <ng-template pTemplate="item" let-config>
+                <div class="flex items-center gap-2">
+                  <i class="pi pi-database text-color-secondary"></i>
+                  <span>{{ config.name }}</span>
+                  @if (config.isDefault) {
+                    <span
+                      class="text-xs bg-primary text-primary-contrast px-1 rounded"
+                      >{{ 'shared.default' | translate }}</span
+                    >
+                  }
+                </div>
+              </ng-template>
+            </p-select>
           }
 
-          @if (isLoading()) {
-            <div class="col-span-full flex justify-center p-2">
-              <i class="pi pi-spin pi-spinner text-color-secondary"></i>
-            </div>
+          <!-- Selected count -->
+          @if (multiple()) {
+            <span
+              class="text-sm text-color-secondary self-center whitespace-nowrap"
+            >
+              {{ 'shared.file.selector.selected' | translate: { count: selectedFiles().length } }}
+            </span>
           }
-        }
-      </div>
+        </div>
 
-      <!-- Footer -->
-      <ng-template #footer>
-        <div class="flex flex-col-reverse sm:flex-row gap-2 w-full sm:w-auto sm:justify-end">
-          <button
-            pButton
-            label="Cancel"
-            class="p-button-text w-full sm:w-auto"
-            (click)="onCancel()"
-          ></button>
-          <button
-            pButton
-            [label]="multiple() ? 'Select (' + selectedFiles().length + ')' : 'Select'"
-            [disabled]="selectedFiles().length === 0"
-            class="w-full sm:w-auto"
-            (click)="onConfirm()"
-          ></button>
+        <!-- File Grid - Responsive columns -->
+        <div class="file-grid" #scrollContainer (scroll)="onScroll($event)">
+          @if (isLoading() && files().length === 0) {
+            <div class="col-span-full flex justify-center p-4">
+              <i
+                class="pi pi-spin pi-spinner text-4xl text-color-secondary"
+              ></i>
+            </div>
+          } @else if (files().length === 0) {
+            <div class="col-span-full text-center p-4 text-color-secondary">
+              <i class="pi pi-inbox text-4xl mb-2 block"></i>
+              <p>{{ 'shared.file.selector.no.files' | translate }}</p>
+            </div>
+          } @else {
+            @for (file of files(); track file.id) {
+              <div
+                class="file-card"
+                [class.selected]="isSelected(file)"
+                [class.disabled]="!isFileAllowed(file)"
+                (click)="toggleSelection(file)"
+              >
+                <!-- File Preview -->
+                <div class="file-preview">
+                  @if (isImage(file) && file.url) {
+                    <img
+                      [src]="file.url"
+                      [alt]="file.name"
+                      class="w-full h-full object-cover"
+                    />
+                  } @else {
+                    <i
+                      [class]="getFileIcon(file)"
+                      class="text-4xl sm:text-5xl text-color-secondary"
+                    ></i>
+                  }
+                  @if (isSelected(file)) {
+                    <div class="selected-overlay">
+                      <i class="pi pi-check text-xl sm:text-2xl"></i>
+                    </div>
+                  }
+                </div>
+
+                <!-- File Info -->
+                <div class="p-2 text-center bg-surface-0 dark:bg-surface-900">
+                  <span
+                    class="block text-xs sm:text-sm whitespace-nowrap overflow-hidden text-ellipsis"
+                    [title]="file.name"
+                  >
+                    {{ file.name }}
+                  </span>
+                  <span class="block text-xs text-color-secondary">{{
+                    formatSize(file.size)
+                  }}</span>
+                </div>
+              </div>
+            }
+
+            @if (isLoading()) {
+              <div class="col-span-full flex justify-center p-2">
+                <i class="pi pi-spin pi-spinner text-color-secondary"></i>
+              </div>
+            }
+          }
         </div>
-      </ng-template>
+
+        <!-- Footer -->
+        <ng-template pTemplate="footer">
+          <div
+            class="flex flex-col-reverse sm:flex-row gap-2 w-full sm:w-auto sm:justify-end"
+          >
+            <button
+              pButton
+              type="button"
+              [label]="'shared.cancel' | translate"
+              class="p-button-text w-full sm:w-auto"
+              (click)="onCancel()"
+            ></button>
+            <button
+              pButton
+              type="button"
+              [label]="
+                multiple()
+                  ? ('shared.file.selector.select.multiple' | translate: { count: selectedFiles().length })
+                  : ('shared.file.selector.select' | translate)
+              "
+              [disabled]="selectedFiles().length === 0"
+              class="w-full sm:w-auto"
+              (click)="onConfirm()"
+            ></button>
+          </div>
+        </ng-template>
+      }
     </p-dialog>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".file-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;max-height:300px;overflow-y:auto;padding:.5rem}@media(min-width:480px){.file-grid{grid-template-columns:repeat(3,1fr);max-height:350px}}@media(min-width:640px){.file-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;max-height:400px}}.file-card{border:2px solid var(--p-surface-300);border-radius:var(--p-border-radius);cursor:pointer;transition:all .2s ease;overflow:hidden;background:var(--p-surface-0)}:host-context(.p-dark) .file-card,.dark .file-card{border-color:var(--p-surface-600);background:var(--p-surface-800)}.file-card:hover:not(.disabled){border-color:var(--p-primary-color);transform:translateY(-2px);box-shadow:var(--p-overlay-shadow)}.file-card.selected{border-color:var(--p-primary-color);background:var(--p-primary-50)}:host-context(.p-dark) .file-card.selected,.dark .file-card.selected{background:var(--p-primary-900)}.file-card.disabled{opacity:.5;cursor:not-allowed}.file-preview{position:relative;height:80px;display:flex;align-items:center;justify-content:center;background:var(--p-surface-100)}@media(min-width:640px){.file-preview{height:100px}}:host-context(.p-dark) .file-preview,.dark .file-preview{background:var(--p-surface-700)}.selected-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--p-primary-500-rgb, 59, 130, 246),.3)}.selected-overlay i{color:var(--p-primary-color);background:var(--p-surface-0);border-radius:50%;padding:.5rem}:host-context(.p-dark) .selected-overlay i,.dark .selected-overlay i{background:var(--p-surface-900)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { loadFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadFiles", required: true }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], acceptTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptTypes", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelection", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }], filesSelected: [{ type: i0.Output, args: ["filesSelected"] }], closed: [{ type: i0.Output, args: ["closed"] }], onError: [{ type: i0.Output, args: ["onError"] }] } });
+  `, styles: [".file-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;max-height:300px;overflow-y:auto;padding:.5rem}@media(min-width:480px){.file-grid{grid-template-columns:repeat(3,1fr);max-height:350px}}@media(min-width:640px){.file-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;max-height:400px}}.file-card{border:2px solid var(--p-surface-300);border-radius:var(--p-border-radius);cursor:pointer;transition:all .2s ease;overflow:hidden;background:var(--p-surface-0)}:host-context(.p-dark) .file-card,.dark .file-card{border-color:var(--p-surface-600);background:var(--p-surface-800)}.file-card:hover:not(.disabled){border-color:var(--p-primary-color);transform:translateY(-2px);box-shadow:var(--p-overlay-shadow)}.file-card.selected{border-color:var(--p-primary-color);background:var(--p-primary-50)}:host-context(.p-dark) .file-card.selected,.dark .file-card.selected{background:var(--p-primary-900)}.file-card.disabled{opacity:.5;cursor:not-allowed}.file-preview{position:relative;height:80px;display:flex;align-items:center;justify-content:center;background:var(--p-surface-100)}@media(min-width:640px){.file-preview{height:100px}}:host-context(.p-dark) .file-preview,.dark .file-preview{background:var(--p-surface-700)}.selected-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--p-primary-500-rgb, 59, 130, 246),.3)}.selected-overlay i{color:var(--p-primary-color);background:var(--p-surface-0);border-radius:50%;padding:.5rem}:host-context(.p-dark) .selected-overlay i,.dark .selected-overlay i{background:var(--p-surface-900)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], acceptTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptTypes", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelection", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], folderId: [{ type: i0.Input, args: [{ isSignal: true, alias: "folderId", required: false }] }], withUploader: [{ type: i0.Input, args: [{ isSignal: true, alias: "withUploader", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }], filesSelected: [{ type: i0.Output, args: ["filesSelected"] }], closed: [{ type: i0.Output, args: ["closed"] }], onError: [{ type: i0.Output, args: ["onError"] }] } });
 
 function createGuard(guardName, redirectTo, evaluate, getDenialMessage) {
     return () => {
@@ -2947,8 +3968,7 @@ function allPermissionsGuard(permissions, redirectTo = '/') {
  * @Component({
  *   selector: 'app-product-form',
  *   standalone: true,
- *   changeDetection: ChangeDetectionStrategy.OnPush,
- *   template: `...`
+ * *   template: `...`
  * })
  * export class ProductFormComponent extends BaseFormPage<IProduct, IProductFormModel> {
  *   private readonly productService = inject(ProductApiService);
@@ -3015,6 +4035,7 @@ class BaseFormPage {
     route = inject(ActivatedRoute);
     messageService = inject(MessageService);
     destroyRef = inject(DestroyRef);
+    translateAdapter = inject(TRANSLATE_ADAPTER, { optional: true });
     routeParams = toSignal(this.route.paramMap);
     initialized = false;
     /** Loading state for async operations */
@@ -3052,8 +4073,8 @@ class BaseFormPage {
             : this.createItem(model);
         operation$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
             next: () => {
-                const action = this.isEditMode() ? 'updated' : 'created';
-                this.showSuccess(`${this.getResourceName()} ${action} successfully.`);
+                const messageKey = this.isEditMode() ? 'shared.update.success' : 'shared.create.success';
+                this.showSuccess(this.t(messageKey));
                 this.router.navigate([this.getResourceRoute()]);
             },
             error: () => {
@@ -3078,8 +4099,8 @@ class BaseFormPage {
     showValidationError() {
         this.messageService.add({
             severity: 'error',
-            summary: 'Validation Error',
-            detail: 'Please fill in all required fields.',
+            summary: this.t('shared.validation.error'),
+            detail: this.t('shared.fill.all.fields'),
         });
     }
     /**
@@ -3089,7 +4110,7 @@ class BaseFormPage {
     showSuccess(detail) {
         this.messageService.add({
             severity: 'success',
-            summary: 'Success',
+            summary: this.t('shared.success'),
             detail,
         });
     }
@@ -3100,10 +4121,16 @@ class BaseFormPage {
     showError(detail) {
         this.messageService.add({
             severity: 'error',
-            summary: 'Error',
+            summary: this.t('shared.error'),
             detail,
         });
     }
+    /**
+     * Translate a key using the adapter, fallback to key if not available.
+     */
+    t(key, variables) {
+        return this.translateAdapter?.translate(key, variables) ?? key;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BaseFormPage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.5", type: BaseFormPage, isStandalone: true, ngImport: i0 });
 }
@@ -3140,6 +4167,7 @@ class BaseListPage {
     appConfig = inject(APP_CONFIG);
     confirmationService = inject(ConfirmationService);
     destroyRef = inject(DestroyRef);
+    translateAdapter = inject(TRANSLATE_ADAPTER, { optional: true });
     /** Items list */
     items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : []));
     /** Loading state */
@@ -3188,26 +4216,32 @@ class BaseListPage {
     /**
      * Show success toast message
      */
-    showSuccess(detail, summary = 'Success') {
-        this.messageService.add({ severity: 'success', summary, detail });
+    showSuccess(detail, summary) {
+        this.messageService.add({ severity: 'success', summary: summary ?? this.t('shared.success'), detail });
     }
     /**
      * Show error toast message
      */
-    showError(detail, summary = 'Error') {
-        this.messageService.add({ severity: 'error', summary, detail });
+    showError(detail, summary) {
+        this.messageService.add({ severity: 'error', summary: summary ?? this.t('shared.error'), detail });
     }
     /**
      * Show info toast message
      */
-    showInfo(detail, summary = 'Info') {
-        this.messageService.add({ severity: 'info', summary, detail });
+    showInfo(detail, summary) {
+        this.messageService.add({ severity: 'info', summary: summary ?? this.t('shared.info'), detail });
     }
     /**
      * Show warning toast message
      */
-    showWarn(detail, summary = 'Warning') {
-        this.messageService.add({ severity: 'warn', summary, detail });
+    showWarn(detail, summary) {
+        this.messageService.add({ severity: 'warn', summary: summary ?? this.t('shared.warning'), detail });
+    }
+    /**
+     * Translate a key using the adapter, fallback to key if not available.
+     */
+    t(key, variables) {
+        return this.translateAdapter?.translate(key, variables) ?? key;
     }
     /**
      * Delete an item with confirmation dialog
@@ -3219,7 +4253,7 @@ class BaseListPage {
     onDelete(item, idGetter, deleteApiCall, options) {
         this.confirmationService.confirm({
             message: this.getDeleteConfirmMessage(item),
-            header: options?.header ?? 'Confirm Delete',
+            header: options?.header ?? this.t('shared.confirm.delete.header'),
             icon: 'pi pi-exclamation-triangle',
             acceptButtonStyleClass: 'p-button-danger',
             accept: () => {
@@ -3227,11 +4261,11 @@ class BaseListPage {
                     .pipe(takeUntilDestroyed(this.destroyRef))
                     .subscribe({
                     next: () => {
-                        this.showSuccess(options?.successMessage ?? 'Item deleted successfully.');
+                        this.showSuccess(options?.successMessage ?? this.t('shared.delete.success'));
                         this.loadData();
                     },
                     error: () => {
-                        this.showError(options?.errorMessage ?? 'Failed to delete item.');
+                        this.showError(options?.errorMessage ?? this.t('shared.delete.failed'));
                     },
                 });
             },
@@ -3247,17 +4281,17 @@ class BaseListPage {
     async onDeleteAsync(item, idGetter, deleteApiCall, options) {
         this.confirmationService.confirm({
             message: this.getDeleteConfirmMessage(item),
-            header: options?.header ?? 'Confirm Delete',
+            header: options?.header ?? this.t('shared.confirm.delete.header'),
             icon: 'pi pi-exclamation-triangle',
             acceptButtonStyleClass: 'p-button-danger',
             accept: async () => {
                 try {
                     await deleteApiCall(idGetter(item));
-                    this.showSuccess(options?.successMessage ?? 'Item deleted successfully.');
+                    this.showSuccess(options?.successMessage ?? this.t('shared.delete.success'));
                     await this.loadData();
                 }
                 catch {
-                    this.showError(options?.errorMessage ?? 'Failed to delete item.');
+                    this.showError(options?.errorMessage ?? this.t('shared.delete.failed'));
                 }
             },
         });
@@ -3281,5 +4315,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_PERMISSIONS, AUTH_STATE_PROVIDER, AngularModule, ApiResourceService, ApiResourceService as ApiService, BRANCH_PERMISSIONS, BaseFormControl, BaseFormPage, BaseListPage, BaseUserSelectComponent, COMPANY_ACTION_PERMISSIONS, COMPANY_API_PROVIDER, COMPANY_PERMISSIONS, ContactTypeEnum, CookieService, EMAIL_CONFIG_PERMISSIONS, EMAIL_TEMPLATE_PERMISSIONS, EditModeElementChangerDirective, FILE_PERMISSIONS, FILE_TYPE_FILTERS, FOLDER_PERMISSIONS, FORM_PERMISSIONS, FileSelectorDialogComponent, FileUploaderComponent, FileUrlService, HasPermissionDirective, IconComponent, IconTypeEnum, IsEmptyImageDirective, LazyMultiSelectComponent, LazySelectComponent, PERMISSIONS, PROFILE_PERMISSION_PROVIDER, PROFILE_UPLOAD_PROVIDER, PermissionValidatorService, PlatformService, PreventDefaultDirective, PrimeModule, ROLE_ACTION_PERMISSIONS, ROLE_PERMISSIONS, STORAGE_CONFIG_PERMISSIONS, USER_ACTION_PERMISSIONS, USER_LIST_PROVIDER, USER_PERMISSIONS, USER_PERMISSION_PROVIDER, USER_PROVIDER, USER_ROLE_PERMISSIONS, UserMultiSelectComponent, UserSelectComponent, allPermissionsGuard, anyPermissionGuard, checkScrollPagination, evaluateLogicNode, evaluatePermission, formatFileSize, getAcceptString, getFileIconClass, hasAllPermissions, hasAnyPermission, hasPermission, isFileTypeAllowed, permissionGuard, provideValueAccessor };
+export { ACTION_PERMISSIONS, AUTH_STATE_PROVIDER, AngularModule, ApiResourceService, ApiResourceService as ApiService, BRANCH_PERMISSIONS, BaseFormControl, BaseFormPage, BaseListPage, BaseUserSelectComponent, COMPANY_ACTION_PERMISSIONS, COMPANY_API_PROVIDER, COMPANY_PERMISSIONS, ContactTypeEnum, CookieService, EMAIL_CONFIG_PERMISSIONS, EMAIL_TEMPLATE_PERMISSIONS, EVENT_PARTICIPANT_PERMISSIONS, EVENT_PERMISSIONS, EditModeElementChangerDirective, FILE_PERMISSIONS, FILE_PROVIDER, FILE_TYPE_FILTERS, FOLDER_PERMISSIONS, FORM_PERMISSIONS, FileSelectorDialogComponent, FileUploaderComponent, FileUrlService, HasPermissionDirective, IconComponent, IconTypeEnum, IsEmptyImageDirective, LANGUAGE_PERMISSIONS, LazyMultiSelectComponent, LazySelectComponent, NOTIFICATION_PERMISSIONS, PERMISSIONS, PROFILE_PERMISSION_PROVIDER, PermissionValidatorService, PlatformService, PreventDefaultDirective, PrimeModule, ROLE_ACTION_PERMISSIONS, ROLE_PERMISSIONS, SHARED_MESSAGES, STORAGE_CONFIG_PERMISSIONS, TRANSLATION_KEY_PERMISSIONS, TRANSLATION_PERMISSIONS, TranslatePipe, USER_ACTION_PERMISSIONS, USER_LIST_PROVIDER, USER_PERMISSIONS, USER_PERMISSION_PROVIDER, USER_PROVIDER, USER_ROLE_PERMISSIONS, UserMultiSelectComponent, UserSelectComponent, allPermissionsGuard, anyPermissionGuard, checkScrollPagination, evaluateLogicNode, evaluatePermission, formatFileSize, getAcceptString, getFileIconClass, hasAllPermissions, hasAnyPermission, hasPermission, isFileTypeAllowed, permissionGuard, provideFallbackLocalization, provideValueAccessor, resolveTranslationModule };
 //# sourceMappingURL=flusys-ng-shared.mjs.map