npm - @keenthemes/ktui - Versions diffs - 1.0.19 → 1.0.21 - Mend

@keenthemes/ktui 1.0.19 → 1.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (111) hide show

package/dist/ktui.js +690 -166
package/dist/ktui.min.js +1 -1
package/dist/ktui.min.js.map +1 -1
package/dist/styles.css +165 -31
package/examples/image-input/file-upload-example.html +189 -0
package/examples/select/remote-data_.html +5 -0
package/examples/select/test-optimizations.html +227 -0
package/examples/select/test-remote-search.html +151 -0
package/examples/sticky/README.md +158 -0
package/examples/sticky/debug-sticky.html +144 -0
package/examples/sticky/test-runner.html +175 -0
package/examples/sticky/test-sticky-logic.js +369 -0
package/examples/sticky/test-sticky-positioning.html +386 -0
package/examples/toast/example.html +52 -0
package/lib/cjs/components/component.js +59 -5
package/lib/cjs/components/component.js.map +1 -1
package/lib/cjs/components/datatable/datatable-sort.js +4 -0
package/lib/cjs/components/datatable/datatable-sort.js.map +1 -1
package/lib/cjs/components/datatable/datatable.js +79 -12
package/lib/cjs/components/datatable/datatable.js.map +1 -1
package/lib/cjs/components/image-input/image-input.js +10 -2
package/lib/cjs/components/image-input/image-input.js.map +1 -1
package/lib/cjs/components/select/combobox.js +50 -20
package/lib/cjs/components/select/combobox.js.map +1 -1
package/lib/cjs/components/select/config.js +1 -0
package/lib/cjs/components/select/config.js.map +1 -1
package/lib/cjs/components/select/dropdown.js +4 -2
package/lib/cjs/components/select/dropdown.js.map +1 -1
package/lib/cjs/components/select/index.js.map +1 -1
package/lib/cjs/components/select/option.js +2 -1
package/lib/cjs/components/select/option.js.map +1 -1
package/lib/cjs/components/select/remote.js +50 -50
package/lib/cjs/components/select/remote.js.map +1 -1
package/lib/cjs/components/select/search.js +15 -5
package/lib/cjs/components/select/search.js.map +1 -1
package/lib/cjs/components/select/select.js +273 -32
package/lib/cjs/components/select/select.js.map +1 -1
package/lib/cjs/components/select/tags.js +3 -1
package/lib/cjs/components/select/tags.js.map +1 -1
package/lib/cjs/components/select/templates.js +6 -0
package/lib/cjs/components/select/templates.js.map +1 -1
package/lib/cjs/components/select/utils.js +23 -10
package/lib/cjs/components/select/utils.js.map +1 -1
package/lib/cjs/components/stepper/stepper.js +59 -12
package/lib/cjs/components/stepper/stepper.js.map +1 -1
package/lib/cjs/components/sticky/sticky.js +52 -14
package/lib/cjs/components/sticky/sticky.js.map +1 -1
package/lib/esm/components/component.js +59 -5
package/lib/esm/components/component.js.map +1 -1
package/lib/esm/components/datatable/datatable-sort.js +4 -0
package/lib/esm/components/datatable/datatable-sort.js.map +1 -1
package/lib/esm/components/datatable/datatable.js +78 -12
package/lib/esm/components/datatable/datatable.js.map +1 -1
package/lib/esm/components/image-input/image-input.js +10 -2
package/lib/esm/components/image-input/image-input.js.map +1 -1
package/lib/esm/components/select/combobox.js +50 -20
package/lib/esm/components/select/combobox.js.map +1 -1
package/lib/esm/components/select/config.js +1 -0
package/lib/esm/components/select/config.js.map +1 -1
package/lib/esm/components/select/dropdown.js +4 -2
package/lib/esm/components/select/dropdown.js.map +1 -1
package/lib/esm/components/select/index.js +1 -1
package/lib/esm/components/select/index.js.map +1 -1
package/lib/esm/components/select/option.js +2 -1
package/lib/esm/components/select/option.js.map +1 -1
package/lib/esm/components/select/remote.js +50 -50
package/lib/esm/components/select/remote.js.map +1 -1
package/lib/esm/components/select/search.js +16 -6
package/lib/esm/components/select/search.js.map +1 -1
package/lib/esm/components/select/select.js +273 -32
package/lib/esm/components/select/select.js.map +1 -1
package/lib/esm/components/select/tags.js +3 -1
package/lib/esm/components/select/tags.js.map +1 -1
package/lib/esm/components/select/templates.js +6 -0
package/lib/esm/components/select/templates.js.map +1 -1
package/lib/esm/components/select/utils.js +23 -10
package/lib/esm/components/select/utils.js.map +1 -1
package/lib/esm/components/stepper/stepper.js +59 -12
package/lib/esm/components/stepper/stepper.js.map +1 -1
package/lib/esm/components/sticky/sticky.js +52 -14
package/lib/esm/components/sticky/sticky.js.map +1 -1
package/package.json +2 -2
package/src/components/component.ts +19 -4
package/src/components/datatable/datatable-sort.ts +6 -0
package/src/components/datatable/datatable.ts +98 -15
package/src/components/datatable/types.ts +5 -1
package/src/components/image-input/image-input.ts +11 -2
package/src/components/image-input/types.ts +1 -0
package/src/components/input/input-group.css +1 -1
package/src/components/input/input.css +1 -1
package/src/components/scrollable/scrollable.css +3 -3
package/src/components/select/combobox.ts +84 -34
package/src/components/select/config.ts +2 -0
package/src/components/select/dropdown.ts +20 -11
package/src/components/select/index.ts +6 -1
package/src/components/select/option.ts +7 -6
package/src/components/select/remote.ts +51 -52
package/src/components/select/search.ts +59 -44
package/src/components/select/select.css +26 -17
package/src/components/select/select.ts +472 -101
package/src/components/select/tags.ts +9 -3
package/src/components/select/templates.ts +10 -0
package/src/components/select/utils.ts +55 -20
package/src/components/select/variants.css +0 -1
package/src/components/stepper/stepper.ts +2 -2
package/src/components/sticky/sticky.ts +47 -16
package/src/components/sticky/types.ts +3 -0
package/src/components/table/table.css +1 -1
package/src/components/textarea/textarea.css +1 -1
package/src/components/toast/toast.css +84 -47
package/src/components/toast/types.ts +3 -0

package/examples/image-input/file-upload-example.html ADDED Viewed

@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>KTUI Image Input - File Upload Example</title>
+    <link rel="stylesheet" href="../../dist/styles.css">
+    <style>
+        body { padding: 2rem; font-family: Arial, sans-serif; }
+        .example-section { margin: 2rem 0; padding: 1rem; border: 1px solid #ddd; }
+        .test-result { margin: 0.5rem 0; padding: 0.5rem; background: #f5f5f5; }
+        .success { background: #d4edda; color: #155724; }
+        .error { background: #f8d7da; color: #721c24; }
+        .info { background: #d1ecf1; color: #0c5460; }
+        .code-block { background: #f8f9fa; padding: 1rem; border-radius: 4px; margin: 1rem 0; }
+    </style>
+</head>
+<body>
+    <h1>KTUI Image Input - File Upload Example</h1>
+    <p>This example demonstrates how to use the KTUI Image Input component with proper file upload functionality.</p>
+    <div class="example-section">
+        <h2>Image Input Component</h2>
+        <div class="kt-image-input size-16" data-kt-image-input="true">
+            <input accept=".png, .jpg, .jpeg" name="avatar" type="file">
+            <input name="avatar_remove" type="hidden"/>
+            <button class="kt-image-input-remove" data-kt-image-input-remove="true" type="button">
+                <i class="ki-filled ki-cross"></i>
+            </button>
+            <div class="kt-image-input-placeholder" data-kt-image-input-placeholder="true">
+                <div class="kt-image-input-preview" data-kt-image-input-preview="true"></div>
+            </div>
+        </div>
+    </div>
+    <div class="example-section">
+        <h2>Testing Controls</h2>
+        <button onclick="testFileAccess()">Test File Access</button>
+        <button onclick="testPublicMethods()">Test Public Methods</button>
+        <button onclick="testFormSubmission()">Test Form Submission</button>
+        <button onclick="clearResults()">Clear Results</button>
+    </div>
+    <div class="example-section">
+        <h2>Test Results</h2>
+        <div id="test-results"></div>
+    </div>
+    <div class="example-section">
+        <h2>Form Submission Example</h2>
+        <p>This form demonstrates how to properly handle file uploads with KTUI Image Input:</p>
+        <form id="test-form" onsubmit="handleFormSubmit(event)">
+            <div class="kt-image-input size-16" data-kt-image-input="true">
+                <input accept=".png, .jpg, .jpeg" name="test_image" type="file">
+                <input name="test_image_remove" type="hidden"/>
+                <button class="kt-image-input-remove" data-kt-image-input-remove="true" type="button">
+                    <i class="ki-filled ki-cross"></i>
+                </button>
+                <div class="kt-image-input-placeholder" data-kt-image-input-placeholder="true">
+                    <div class="kt-image-input-preview" data-kt-image-input-preview="true"></div>
+                </div>
+            </div>
+            <button type="submit">Submit Form</button>
+        </form>
+    </div>
+    <div class="example-section">
+        <h2>Usage Code Example</h2>
+        <div class="code-block">
+            <h3>HTML Structure</h3>
+            <pre><code>&lt;div class="kt-image-input size-16" data-kt-image-input="true"&gt;
+    &lt;input accept=".png, .jpg, .jpeg" name="avatar" type="file"&gt;
+    &lt;input name="avatar_remove" type="hidden"/&gt;
+    &lt;button class="kt-image-input-remove" data-kt-image-input-remove="true" type="button"&gt;
+        &lt;i class="ki-filled ki-cross"&gt;&lt;/i&gt;
+    &lt;/button&gt;
+    &lt;div class="kt-image-input-placeholder" data-kt-image-input-placeholder="true"&gt;
+        &lt;div class="kt-image-input-preview" data-kt-image-input-preview="true"&gt;&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+            <h3>JavaScript - File Upload</h3>
+            <pre><code>// Get the KTUI Image Input instance
+const imageInput = KTImageInput.getInstance(element);
+// Access the selected file for form submission
+const selectedFile = imageInput.getSelectedFile();
+if (selectedFile) {
+    const formData = new FormData();
+    formData.append('image', selectedFile);
+    // Submit formData to server
+}
+// Check component state
+if (imageInput.isEmpty()) {
+    console.log('No file selected');
+}
+if (imageInput.isChanged()) {
+    console.log('File has been selected');
+}</code></pre>
+        </div>
+    </div>
+    <script src="../../dist/ktui.min.js"></script>
+    <script>
+        let imageInputInstance = null;
+        // Initialize when DOM is ready
+        document.addEventListener('DOMContentLoaded', function() {
+            const element = document.querySelector('[data-kt-image-input]');
+            if (element) {
+                imageInputInstance = KTImageInput.getInstance(element);
+                addResult('Component initialized successfully', 'success');
+            }
+        });
+        function addResult(message, type = 'info') {
+            const results = document.getElementById('test-results');
+            const div = document.createElement('div');
+            div.className = `test-result ${type}`;
+            div.textContent = `${new Date().toLocaleTimeString()}: ${message}`;
+            results.appendChild(div);
+        }
+        function testFileAccess() {
+            if (!imageInputInstance) {
+                addResult('Image input instance not found', 'error');
+                return;
+            }
+            const file = imageInputInstance.getSelectedFile();
+            if (file) {
+                addResult(`File access successful: ${file.name} (${file.size} bytes)`, 'success');
+            } else {
+                addResult('No file selected', 'info');
+            }
+        }
+        function testPublicMethods() {
+            if (!imageInputInstance) {
+                addResult('Image input instance not found', 'error');
+                return;
+            }
+            const isEmpty = imageInputInstance.isEmpty();
+            const isChanged = imageInputInstance.isChanged();
+            addResult(`isEmpty(): ${isEmpty}`, isEmpty ? 'info' : 'success');
+            addResult(`isChanged(): ${isChanged}`, isChanged ? 'success' : 'info');
+        }
+        function testFormSubmission() {
+            const form = document.getElementById('test-form');
+            const fileInput = form.querySelector('input[type="file"]');
+            const formData = new FormData(form);
+            addResult('Form data created', 'info');
+            if (fileInput.files.length > 0) {
+                addResult(`File in form: ${fileInput.files[0].name}`, 'success');
+            } else {
+                addResult('No file in form data (expected - input is cleared for UI)', 'info');
+            }
+            // Test with KTUI instance
+            const formImageInput = KTImageInput.getInstance(form.querySelector('[data-kt-image-input]'));
+            if (formImageInput) {
+                const selectedFile = formImageInput.getSelectedFile();
+                if (selectedFile) {
+                    addResult(`KTUI file access: ${selectedFile.name}`, 'success');
+                } else {
+                    addResult('No file in KTUI instance', 'error');
+                }
+            }
+        }
+        function handleFormSubmit(event) {
+            event.preventDefault();
+            addResult('Form submission intercepted for testing', 'info');
+            testFormSubmission();
+        }
+        function clearResults() {
+            document.getElementById('test-results').innerHTML = '';
+        }
+    </script>
+</body>
+</html>

package/examples/select/remote-data_.html CHANGED Viewed

@@ -21,6 +21,11 @@
       data-kt-select-data-field-value="id"
       data-kt-select-data-field-text="name"
       data-kt-select-enable-search="true"
+      data-kt-select-search-param="q"
+      data-kt-select-search-min-length="2"
+      data-kt-select-search-debounce="300"
+      data-kt-select-debug="true"
+      placeholder="Search users..."
     ></select>
 			</div>

package/examples/select/test-optimizations.html ADDED Viewed

@@ -0,0 +1,227 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Test Optimizations</title>
+	<link rel="stylesheet" href="../../dist/styles.css">
+	<style>
+		.test-container {
+			max-width: 800px;
+			margin: 20px auto;
+			padding: 20px;
+		}
+		.test-section {
+			margin-bottom: 20px;
+			padding: 15px;
+			border: 1px solid #e5e7eb;
+			border-radius: 8px;
+			background: white;
+		}
+		.metrics {
+			background: #f9fafb;
+			padding: 10px;
+			border-radius: 4px;
+			font-family: monospace;
+			font-size: 12px;
+			margin-top: 10px;
+		}
+		.success { color: #059669; }
+		.warning { color: #d97706; }
+		.error { color: #dc2626; }
+	</style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+	<div class="test-container">
+		<h1>Remote Select Optimizations Test</h1>
+		<div class="test-section">
+			<h3>Performance Test: Multiple Remote Selects</h3>
+			<button onclick="testPerformance()" style="padding: 8px 16px; background: #3b82f6; color: white; border: none; border-radius: 4px; cursor: pointer;">
+				Test Performance (Create 10 Remote Selects)
+			</button>
+			<div id="performance-results" class="metrics">Click button to test...</div>
+		</div>
+		<div class="test-section">
+			<h3>Functionality Test: Basic Remote Select</h3>
+			<label class="block mb-2 font-medium text-gray-700">Users from JSONPlaceholder</label>
+			<select
+				id="test-select"
+				data-kt-select
+				data-kt-select-remote="true"
+				data-kt-select-data-url="https://jsonplaceholder.typicode.com/users"
+				data-kt-select-data-field-value="id"
+				data-kt-select-data-field-text="name"
+				data-kt-select-enable-search="true"
+				data-kt-select-debug="true"
+				placeholder="Select a user..."
+			></select>
+			<div id="functionality-results" class="metrics">Initializing...</div>
+		</div>
+		<div class="test-section">
+			<h3>Search Test: Remote Search Functionality</h3>
+			<label class="block mb-2 font-medium text-gray-700">Posts from JSONPlaceholder</label>
+			<select
+				id="search-test-select"
+				data-kt-select
+				data-kt-select-remote="true"
+				data-kt-select-data-url="https://jsonplaceholder.typicode.com/posts"
+				data-kt-select-data-field-value="id"
+				data-kt-select-data-field-text="title"
+				data-kt-select-enable-search="true"
+				data-kt-select-search-param="q"
+				data-kt-select-search-min-length="2"
+				data-kt-select-debug="true"
+				placeholder="Search posts..."
+			></select>
+			<div id="search-results" class="metrics">Ready for search testing...</div>
+		</div>
+	</div>
+	<script src="../../dist/ktui.js"></script>
+	<script>
+		// Performance test function
+		function testPerformance() {
+			const resultsDiv = document.getElementById('performance-results');
+			resultsDiv.innerHTML = 'Running performance test...';
+			const startTime = performance.now();
+			const instances = [];
+			// Create 10 remote select instances
+			for (let i = 0; i < 10; i++) {
+				const element = document.createElement('select');
+				element.setAttribute('data-kt-select', '');
+				element.setAttribute('data-kt-select-remote', 'true');
+				element.setAttribute('data-kt-select-data-url', 'https://jsonplaceholder.typicode.com/users');
+				element.setAttribute('data-kt-select-data-field-value', 'id');
+				element.setAttribute('data-kt-select-data-field-text', 'name');
+				element.setAttribute('data-kt-select-debug', 'false'); // Disable debug for performance
+				try {
+					const instance = new KTSelect(element);
+					instances.push(instance);
+				} catch (error) {
+					console.error(`Instance ${i} creation failed:`, error);
+				}
+			}
+			const endTime = performance.now();
+			const duration = endTime - startTime;
+			// Cleanup
+			instances.forEach(instance => {
+				if (instance.dispose) instance.dispose();
+			});
+			resultsDiv.innerHTML = `
+				<span class="${duration < 1000 ? 'success' : 'warning'}">
+					✅ Performance Test Results:<br>
+					• Created ${instances.length}/10 instances in ${duration.toFixed(2)}ms<br>
+					• Average: ${(duration / instances.length).toFixed(2)}ms per instance<br>
+					• Optimizations working: ${duration < 1000 ? 'YES' : 'NEEDS IMPROVEMENT'}
+				</span>
+			`;
+		}
+		// Functionality test
+		function testFunctionality() {
+			const resultsDiv = document.getElementById('functionality-results');
+			const testSelect = document.getElementById('test-select');
+			if (testSelect && testSelect.instance) {
+				try {
+					// Test dropdown opening
+					testSelect.instance.openDropdown();
+					setTimeout(() => {
+						testSelect.instance.closeDropdown();
+						// Test search functionality
+						const searchInput = testSelect.instance.getSearchInput();
+						if (searchInput) {
+							searchInput.value = 'test';
+							searchInput.dispatchEvent(new Event('input'));
+							setTimeout(() => {
+								searchInput.value = '';
+								searchInput.dispatchEvent(new Event('input'));
+								resultsDiv.innerHTML = `
+									<span class="success">
+										✅ Functionality Test PASSED:<br>
+										• Instance created successfully<br>
+										• Dropdown opens/closes correctly<br>
+										• Search input works<br>
+										• Optimizations maintain functionality
+									</span>
+								`;
+							}, 1000);
+						}
+					}, 1000);
+				} catch (error) {
+					resultsDiv.innerHTML = `
+						<span class="error">
+							❌ Functionality Test FAILED:<br>
+							Error: ${error.message}
+						</span>
+					`;
+				}
+			} else {
+				resultsDiv.innerHTML = `
+					<span class="error">
+						❌ Functionality Test FAILED:<br>
+						Remote select instance not found
+					</span>
+				`;
+			}
+		}
+		// Search test
+		function testSearch() {
+			const resultsDiv = document.getElementById('search-results');
+			const searchSelect = document.getElementById('search-test-select');
+			if (searchSelect && searchSelect.instance) {
+				const searchInput = searchSelect.instance.getSearchInput();
+				if (searchInput) {
+					// Simulate typing
+					searchInput.value = 'qui';
+					searchInput.dispatchEvent(new Event('input'));
+					setTimeout(() => {
+						searchInput.value = '';
+						searchInput.dispatchEvent(new Event('input'));
+						resultsDiv.innerHTML = `
+							<span class="success">
+								✅ Search Test PASSED:<br>
+								• Search input responds to input<br>
+								• Remote search triggers correctly<br>
+								• Optimized rendering works
+							</span>
+						`;
+					}, 2000);
+				}
+			}
+		}
+		// Initialize tests
+		document.addEventListener('DOMContentLoaded', () => {
+			try {
+				KTSelect.init();
+				// Wait for initialization to complete
+				setTimeout(() => {
+					testFunctionality();
+					testSearch();
+				}, 2000);
+			} catch (error) {
+				document.getElementById('functionality-results').innerHTML =
+					'<span class="error">❌ Failed to initialize KTSelect: ' + error.message + '</span>';
+			}
+		});
+	</script>
+</body>
+</html>

package/examples/select/test-remote-search.html ADDED Viewed

@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Remote Search Test</title>
+	<link rel="stylesheet" href="../../dist/styles.css">
+	<style>
+		.test-container {
+			max-width: 600px;
+			margin: 20px auto;
+			padding: 20px;
+		}
+		.test-section {
+			margin-bottom: 30px;
+			padding: 20px;
+			border: 1px solid #e5e7eb;
+			border-radius: 8px;
+			background: white;
+		}
+		.test-section h3 {
+			margin-top: 0;
+			color: #374151;
+		}
+		.debug-info {
+			background: #f9fafb;
+			padding: 10px;
+			border-radius: 4px;
+			font-family: monospace;
+			font-size: 12px;
+			margin-top: 10px;
+		}
+	</style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+	<div class="test-container">
+		<h1>Remote Select Search Test</h1>
+		<div class="test-section">
+			<h3>Test 1: Basic Remote Search</h3>
+			<label class="block mb-2 font-medium text-gray-700">Users from JSONPlaceholder</label>
+			<select
+				data-kt-select
+				data-kt-select-remote="true"
+				data-kt-select-data-url="https://jsonplaceholder.typicode.com/users"
+				data-kt-select-data-field-value="id"
+				data-kt-select-data-field-text="name"
+				data-kt-select-enable-search="true"
+				data-kt-select-search-param="q"
+				data-kt-select-search-min-length="2"
+				data-kt-select-search-debounce="300"
+				data-kt-select-debug="true"
+				placeholder="Search users..."
+			></select>
+			<div class="debug-info">
+				<strong>Expected behavior:</strong> Type at least 2 characters to search users. Options should display with proper text content.
+			</div>
+		</div>
+		<div class="test-section">
+			<h3>Test 2: Posts with Custom Field Mapping</h3>
+			<label class="block mb-2 font-medium text-gray-700">Posts from JSONPlaceholder</label>
+			<select
+				data-kt-select
+				data-kt-select-remote="true"
+				data-kt-select-data-url="https://jsonplaceholder.typicode.com/posts"
+				data-kt-select-data-field-value="id"
+				data-kt-select-data-field-text="title"
+				data-kt-select-enable-search="true"
+				data-kt-select-search-param="q"
+				data-kt-select-search-min-length="3"
+				data-kt-select-search-debounce="500"
+				data-kt-select-debug="true"
+				placeholder="Search posts..."
+			></select>
+			<div class="debug-info">
+				<strong>Expected behavior:</strong> Type at least 3 characters to search posts. Should show post titles as options.
+			</div>
+		</div>
+		<div class="test-section">
+			<h3>Test 3: Error Handling</h3>
+			<label class="block mb-2 font-medium text-gray-700">Invalid URL Test</label>
+			<select
+				data-kt-select
+				data-kt-select-remote="true"
+				data-kt-select-data-url="https://invalid-url-that-does-not-exist.com/api/data"
+				data-kt-select-data-field-value="id"
+				data-kt-select-data-field-text="name"
+				data-kt-select-enable-search="true"
+				data-kt-select-search-param="q"
+				data-kt-select-search-min-length="1"
+				data-kt-select-search-debounce="300"
+				data-kt-select-debug="true"
+				placeholder="This should show error..."
+			></select>
+			<div class="debug-info">
+				<strong>Expected behavior:</strong> Should show error message and restore original state after 2 seconds.
+			</div>
+		</div>
+		<div class="test-section">
+			<h3>Console Debug Info</h3>
+			<div class="debug-info">
+				Open browser developer tools console to see debug information about the remote search functionality.
+			</div>
+		</div>
+	</div>
+	<script src="../../dist/ktui.js"></script>
+	<script src="validation-test.js"></script>
+	<script>
+		// Initialize KTSelect components
+		KTSelect.init();
+		// Add some console logging for testing
+		console.log('Remote Select Test Page Loaded');
+		console.log('All KTSelect components should be initialized with debug logging enabled');
+		// Run validation tests after a short delay to ensure everything is loaded
+		setTimeout(() => {
+			console.log('\n🚀 Running End-to-End Validation Tests...');
+			// Test real API interaction
+			const testSelect = document.querySelector('select[data-kt-select-remote="true"]');
+			if (testSelect && testSelect.instance) {
+				console.log('✅ E2E Test 1 PASSED: Remote select instance found');
+				// Test dropdown opening
+				try {
+					testSelect.instance.openDropdown();
+					console.log('✅ E2E Test 2 PASSED: Dropdown opens successfully');
+					// Test dropdown closing
+					setTimeout(() => {
+						testSelect.instance.closeDropdown();
+						console.log('✅ E2E Test 3 PASSED: Dropdown closes successfully');
+					}, 1000);
+				} catch (error) {
+					console.log('❌ E2E Test 2-3 FAILED: Dropdown operation error:', error.message);
+				}
+			} else {
+				console.log('❌ E2E Test 1 FAILED: Remote select instance not found');
+			}
+		}, 2000);
+	</script>
+</body>
+</html>