@keenthemes/ktui 1.0.28 → 1.1.0

package/src/components/alert/index.ts

@@ -0,0 +1,4 @@
+// index.ts - Barrel export for KTAlert component and types
+
+export * from './alert';
+export * from './types';

package/src/components/alert/templates.ts

@@ -0,0 +1,110 @@
+/*
+ * templates.ts - Default templates and merging logic for KTAlert (modular alert/dialog component)
+ * Defines all default template strings and provides merged template set.
+ *
+ * Accessibility: All templates include ARIA roles and attributes for screen reader and keyboard support.
+ */
+
+import { KTAlertConfig, KTAlertTemplateStrings } from './types';
+
+// Core template strings for all UI fragments
+export const coreTemplateStrings: KTAlertTemplateStrings = {
+  // Overlay: wraps the modal for modal alerts
+  overlay: `<div data-kt-alert-overlay aria-hidden="false" class="kt-alert-overlay {{class}}">{{modal}}</div>`,
+  // Modal container: role=alertdialog for modal, role=alert for non-modal
+  modal: `<div data-kt-alert data-kt-alert-type="{{type}}" data-kt-alert-variant="{{variant}}" aria-modal="{{ariaModal}}" role="{{role}}" aria-label="Alert Dialog" class="kt-alert-modal {{class}}" data-kt-alert-position="{{position}}">{{content}}</div>`,
+  // Fallback container (non-modal, or if no template provided)
+  container: `<div class="kt-alert-container {{class}}">{{content}}</div>`,
+  icon: `<span data-kt-alert-icon aria-hidden="true" class="kt-alert-icon {{class}}">{{icon}}</span>`,
+  title: `<h2 data-kt-alert-title id="kt-alert-title" class="kt-alert-title {{class}}">{{title}}</h2>`,
+  message: `<div data-kt-alert-message id="kt-alert-message" class="kt-alert-message {{class}}">{{message}}</div>`,
+  actions: `<div data-kt-alert-actions class="kt-alert-actions {{class}}">{{confirmButton}} {{cancelButton}}</div>`,
+  // Confirm/cancel buttons (default, can be overridden with custom class)
+  confirmButton: `<button type="button" data-kt-alert-confirm aria-label="Confirm" tabindex="0" class="kt-alert-confirm-button {{class}}">{{confirmText}}</button>`,
+  cancelButton: `<button type="button" data-kt-alert-cancel aria-label="Cancel" tabindex="0" class="kt-alert-cancel-button {{class}}">{{cancelText}}</button>`,
+  // Confirm/cancel buttons with custom class (for per-type theming)
+  confirmButtonCustomClass: `<button type="button" data-kt-alert-confirm aria-label="Confirm" tabindex="0" class="{{confirmButtonClass}}">{{confirmText}}</button>`,
+  cancelButtonCustomClass: `<button type="button" data-kt-alert-cancel aria-label="Cancel" tabindex="0" class="{{cancelButtonClass}}">{{cancelText}}</button>`,
+  // Input templates for each type
+  inputText: `<label data-kt-alert-input-label class="kt-alert-input-label {{inputLabelClass}}">{{inputLabel}}<input data-kt-alert-input type="{{inputType}}" placeholder="{{inputPlaceholder}}" value="{{inputValue}}" {{attrs}} aria-label="Prompt input" tabindex="0" class="kt-alert-input {{inputClass}}" /></label>`,
+  inputTextarea: `<label data-kt-alert-input-label class="kt-alert-input-label {{inputLabelClass}}">{{inputLabel}}<textarea data-kt-alert-input placeholder="{{inputPlaceholder}}" {{attrs}} aria-label="Prompt input" tabindex="0" class="kt-alert-input {{inputClass}}">{{inputValue}}</textarea></label>`,
+  inputSelect: `<label data-kt-alert-input-label class="kt-alert-input-label {{inputLabelClass}}">{{inputLabel}}<select data-kt-alert-input {{attrs}} aria-label="Prompt input" tabindex="0" class="kt-alert-input {{inputClass}}">{{optionsHtml}}</select></label>`,
+  inputRadio: `<fieldset data-kt-alert-input-label class="kt-alert-input-label {{inputLabelClass}}"><legend>{{inputLabel}}</legend>{{optionsHtml}}</fieldset>`,
+  inputCheckbox: `<fieldset data-kt-alert-input-label class="kt-alert-input-label {{inputLabelClass}}"><legend>{{inputLabel}}</legend>{{optionsHtml}}</fieldset>`,
+  inputError: `<div data-kt-alert-input-error class="kt-alert-input-error {{class}}" role="alert" aria-live="polite">{{errorMessage}}</div>`,
+  closeButton: `<button type="button" data-kt-alert-close aria-label="Close alert" tabindex="0" class="kt-alert-close-button {{class}}">&times;</button>`,
+  customContent: `<div data-kt-alert-custom-content class="kt-alert-custom-content {{class}}">{{customContent}}</div>`,
+  loaderHtml: `<span data-kt-alert-loader class="kt-alert-loader {{class}}">{{loaderHtml}}</span>`,
+  // Input option templates
+  option: `<option value="{{value}}"{{selected}} {{disabled}}>{{label}}</option>`,
+  radioOption: `<label><input type="radio" name="kt-alert-radio" data-kt-alert-input value="{{value}}"{{checked}} {{disabled}} {{attrs}} aria-label="{{label}}" tabindex="0" />{{label}}</label>`,
+  checkboxOption: `<label><input type="checkbox" name="kt-alert-checkbox" data-kt-alert-input value="{{value}}"{{checked}} {{disabled}} {{attrs}} aria-label="{{label}}" tabindex="0" />{{label}}</label>`,
+};
+
+/**
+ * Get the complete template set, merging defaults, user overrides, and config templates.
+ * @param config Optional config object with a "templates" property.
+ */
+export function getTemplateStrings(config?: KTAlertConfig): KTAlertTemplateStrings {
+  const templates = config?.templates;
+  if (templates) {
+    return { ...coreTemplateStrings, ...userTemplateStrings, ...templates };
+  }
+  return { ...coreTemplateStrings, ...userTemplateStrings };
+}
+
+/**
+ * Renders a template string with data using {{key}} placeholders.
+ */
+export function renderTemplateString(template: string, data: Record<string, any>): string {
+  return template.replace(/{{(\w+)}}/g, (_, key) =>
+    data[key] !== undefined ? String(data[key]) : ''
+  );
+}
+
+/**
+ * Checks if a template is a function.
+ */
+export function isTemplateFunction(tpl: unknown): tpl is (data: any) => string {
+  return typeof tpl === 'function';
+}
+
+/**
+ * User-supplied template overrides. Use setTemplateStrings() to add or update.
+ */
+let userTemplateStrings: Partial<typeof coreTemplateStrings> = {};
+
+/**
+ * Register or update user template overrides.
+ * @param templates Partial template object to merge with defaults.
+ */
+export function setTemplateStrings(templates: Partial<typeof coreTemplateStrings>): void {
+  userTemplateStrings = { ...userTemplateStrings, ...templates };
+}
+
+/**
+ * Renders an array of options using a template.
+ */
+export function renderOptions(options: Array<any>, templateKey: string, templateSet: KTAlertTemplateStrings): string {
+  const template = templateSet[templateKey as keyof KTAlertTemplateStrings];
+  if (!template) return '';
+
+  return options.map(option => {
+    const data = {
+      value: option.value,
+      label: option.label,
+      selected: option.value === option.inputValue ? ' selected' : '',
+      checked: option.checked || false ? ' checked' : '',
+      disabled: option.disabled || false ? ' disabled' : '',
+      attrs: option.attrs || ''
+    };
+
+    if (isTemplateFunction(template)) {
+      return template(data);
+    } else if (typeof template === 'string') {
+      return renderTemplateString(template, data);
+    }
+    return '';
+  }).join('');
+}
+

package/src/components/alert/tests/accessibility/aria-roles.test.ts

@@ -0,0 +1,19 @@
+/**
+ * TEST SUITE: ARIA Roles & Attributes
+ * PURPOSE: Test ARIA roles/attributes for modal and non-modal alerts
+ * SCOPE: KTAlert ARIA roles and attributes
+ * DEPENDENCIES: vitest, jsdom
+ * LAST UPDATED: 2024-06-08
+ */
+
+import { describe, it, expect } from 'vitest';
+import { KTAlert } from '../../alert';
+
+describe('KTAlert ARIA roles and attributes', () => {
+  it('should set correct ARIA roles and attributes for modal alert', () => {
+    // TODO: Implement test
+  });
+  it('should set correct ARIA roles and attributes for non-modal alert', () => {
+    // TODO: Implement test
+  });
+});

package/src/components/alert/tests/accessibility/focus-management.test.ts

@@ -0,0 +1,19 @@
+/**
+ * TEST SUITE: Focus Management
+ * PURPOSE: Test initial focus and focus trap in modal alerts
+ * SCOPE: KTAlert focus management
+ * DEPENDENCIES: vitest, jsdom
+ * LAST UPDATED: 2024-06-08
+ */
+
+import { describe, it, expect } from 'vitest';
+import { KTAlert } from '../../alert';
+
+describe('KTAlert focus management', () => {
+  it('should focus first interactive element on open', () => {
+    // TODO: Implement test
+  });
+  it('should trap focus within modal when open', () => {
+    // TODO: Implement test
+  });
+});

package/src/components/alert/tests/accessibility/keyboard-nav.test.ts

@@ -0,0 +1,22 @@
+/**
+ * TEST SUITE: Keyboard Navigation
+ * PURPOSE: Test Tab/Shift+Tab navigation, Enter/Space activation, Escape to close
+ * SCOPE: KTAlert keyboard navigation
+ * DEPENDENCIES: vitest, jsdom
+ * LAST UPDATED: 2024-06-08
+ */
+
+import { describe, it, expect } from 'vitest';
+import { KTAlert } from '../../alert';
+
+describe('KTAlert keyboard navigation', () => {
+  it('should allow Tab and Shift+Tab navigation between interactive elements', () => {
+    // TODO: Implement test
+  });
+  it('should activate confirm on Enter/Space', () => {
+    // TODO: Implement test
+  });
+  it('should close alert on Escape if allowed', () => {
+    // TODO: Implement test
+  });
+});

package/src/components/alert/tests/actions/confirm-cancel.test.ts

@@ -0,0 +1,122 @@
+/**
+ * TEST SUITE: Confirm/Cancel Actions
+ * PURPOSE: Test confirm and cancel button flows, event firing, and result values
+ * SCOPE: KTAlert confirm/cancel actions
+ * DEPENDENCIES: vitest, jsdom
+ * LAST UPDATED: 2024-06-08
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { KTAlert } from '../../alert';
+
+describe('KTAlert confirm/cancel actions', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should fire confirm event and resolve with correct value', () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    const alert = new KTAlert(element, { showConfirmButton: true });
+    const fireEventSpy = vi.spyOn(alert as any, '_fireEvent');
+    // ACT
+    const confirmButton = element.querySelector('[data-kt-alert-confirm]') as HTMLElement;
+    confirmButton?.click();
+    // ASSERT
+    expect(fireEventSpy).toHaveBeenCalledWith('confirm', { inputValue: undefined });
+    expect((alert as any)._state.isDismissed).toBe(true);
+    expect(element.innerHTML).toBe('');
+  });
+
+  it('should fire cancel event and resolve with correct value', () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    const alert = new KTAlert(element, { showCancelButton: true });
+    const fireEventSpy = vi.spyOn(alert as any, '_fireEvent');
+    // ACT
+    const cancelButton = element.querySelector('[data-kt-alert-cancel]') as HTMLElement;
+    cancelButton?.click();
+    // ASSERT
+    expect(fireEventSpy).toHaveBeenCalledWith('cancel', {});
+    expect((alert as any)._state.isDismissed).toBe(true);
+    expect(element.innerHTML).toBe('');
+  });
+
+  it('should use custom button text if provided', () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    const alert = new KTAlert(element, {
+      showConfirmButton: true,
+      showCancelButton: true,
+      confirmText: 'Yes, do it!',
+      cancelText: 'No, cancel'
+    });
+    // ACT
+    const confirmButton = element.querySelector('[data-kt-alert-confirm]') as HTMLElement;
+    const cancelButton = element.querySelector('[data-kt-alert-cancel]') as HTMLElement;
+    // ASSERT
+    expect(confirmButton?.textContent).toBe('Yes, do it!');
+    expect(cancelButton?.textContent).toBe('No, cancel');
+  });
+
+  it('should not render buttons if showConfirmButton and showCancelButton are false', () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    const alert = new KTAlert(element, {
+      showConfirmButton: false,
+      showCancelButton: false
+    });
+    // ACT
+    const confirmButton = element.querySelector('[data-kt-alert-confirm]');
+    const cancelButton = element.querySelector('[data-kt-alert-cancel]');
+    // ASSERT
+    expect(confirmButton).toBeNull();
+    expect(cancelButton).toBeNull();
+  });
+
+  it('should clear timer when confirm button is clicked', () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    const alert = new KTAlert(element, { showConfirmButton: true, timer: 5000 });
+    const clearTimerSpy = vi.spyOn(alert as any, '_clearTimer');
+    // ACT
+    const confirmButton = element.querySelector('[data-kt-alert-confirm]') as HTMLElement;
+    confirmButton?.click();
+    // ASSERT
+    expect(clearTimerSpy).toHaveBeenCalled();
+  });
+
+  it('should clear timer when cancel button is clicked', () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    const alert = new KTAlert(element, { showCancelButton: true, timer: 5000 });
+    const clearTimerSpy = vi.spyOn(alert as any, '_clearTimer');
+    // ACT
+    const cancelButton = element.querySelector('[data-kt-alert-cancel]') as HTMLElement;
+    cancelButton?.click();
+    // ASSERT
+    expect(clearTimerSpy).toHaveBeenCalled();
+  });
+
+  it('should handle Enter key to trigger confirm button', () => {
+    // ARRANGE
+    const config = { showConfirmButton: true, title: 'Test' };
+    // ACT
+    KTAlert.fire(config);
+    const alert = document.querySelector('[data-kt-alert]');
+    const enterEvent = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true });
+    alert?.dispatchEvent(enterEvent);
+    // ASSERT
+    // The alert should be dismissed (confirm button clicked)
+    expect(document.querySelector('[data-kt-alert-overlay]')).toBeNull();
+  });
+});

package/src/components/alert/tests/actions/input-field.test.ts

@@ -0,0 +1,180 @@
+/**
+ * TEST SUITE: Input Field Actions
+ * PURPOSE: Test alerts with input fields (text, textarea, select, radio, checkbox), value propagation
+ * SCOPE: KTAlert input field handling
+ * DEPENDENCIES: vitest, jsdom
+ * LAST UPDATED: 2024-06-08
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { KTAlert } from '../../alert';
+
+describe('KTAlert input field actions', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should propagate value from text input', () => {
+    // ARRANGE
+    const config = {
+      input: true,
+      inputType: 'text',
+      inputPlaceholder: 'Enter text',
+      showConfirmButton: true,
+      title: 'Test'
+    };
+    // ACT
+    KTAlert.fire(config);
+    const input = document.querySelector('input[type="text"]') as HTMLInputElement;
+    input.value = 'test value';
+    const confirmButton = document.querySelector('[data-kt-alert-confirm]') as HTMLElement;
+    confirmButton?.click();
+    // ASSERT
+    // The alert should be dismissed with the input value
+    expect(document.querySelector('[data-kt-alert-overlay]')).toBeNull();
+  });
+
+  it('should propagate value from textarea input', () => {
+    // ARRANGE
+    const config = {
+      input: true,
+      inputType: 'textarea',
+      inputPlaceholder: 'Enter text',
+      showConfirmButton: true,
+      title: 'Test'
+    };
+    // ACT
+    KTAlert.fire(config);
+    const textarea = document.querySelector('textarea') as HTMLTextAreaElement;
+    textarea.value = 'multiline\ntext';
+    const confirmButton = document.querySelector('[data-kt-alert-confirm]') as HTMLElement;
+    confirmButton?.click();
+    // ASSERT
+    // The alert should be dismissed with the input value
+    expect(document.querySelector('[data-kt-alert-overlay]')).toBeNull();
+  });
+
+  it('should propagate value from select input', () => {
+    // ARRANGE
+    const config = {
+      input: true,
+      inputType: 'select',
+      inputOptions: [
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2' }
+      ],
+      showConfirmButton: true,
+      title: 'Test'
+    };
+    // ACT
+    KTAlert.fire(config);
+    const select = document.querySelector('select') as HTMLSelectElement;
+    select.value = 'option2';
+    const confirmButton = document.querySelector('[data-kt-alert-confirm]') as HTMLElement;
+    confirmButton?.click();
+    // ASSERT
+    // The alert should be dismissed with the input value
+    expect(document.querySelector('[data-kt-alert-overlay]')).toBeNull();
+  });
+
+  it('should propagate value from radio input', () => {
+    // ARRANGE
+    const config = {
+      input: true,
+      inputType: 'radio',
+      inputOptions: [
+        { value: 'radio1', label: 'Radio 1' },
+        { value: 'radio2', label: 'Radio 2', checked: true }
+      ],
+      showConfirmButton: true,
+      title: 'Test'
+    };
+    // ACT
+    KTAlert.fire(config);
+    const confirmButton = document.querySelector('[data-kt-alert-confirm]') as HTMLElement;
+    confirmButton?.click();
+    // ASSERT
+    // The alert should be dismissed with the input value
+    expect(document.querySelector('[data-kt-alert-overlay]')).toBeNull();
+  });
+
+  it('should propagate value from checkbox input', () => {
+    // ARRANGE
+    const config = {
+      input: true,
+      inputType: 'checkbox',
+      inputOptions: [
+        { value: 'check1', label: 'Check 1' },
+        { value: 'check2', label: 'Check 2' }
+      ],
+      showConfirmButton: true,
+      title: 'Test'
+    };
+    // ACT
+    KTAlert.fire(config);
+    const checkboxes = document.querySelectorAll('input[type="checkbox"]') as NodeListOf<HTMLInputElement>;
+    checkboxes[0].checked = true;
+    checkboxes[1].checked = true;
+    const confirmButton = document.querySelector('[data-kt-alert-confirm]') as HTMLElement;
+    confirmButton?.click();
+    // ASSERT
+    // The alert should be dismissed with the input value
+    expect(document.querySelector('[data-kt-alert-overlay]')).toBeNull();
+  });
+
+  it('should handle input change events', () => {
+    // ARRANGE
+    const config = {
+      input: true,
+      inputType: 'text',
+      showConfirmButton: true,
+      title: 'Test'
+    };
+    // ACT
+    KTAlert.fire(config);
+    const input = document.querySelector('input[type="text"]') as HTMLInputElement;
+    input.value = 'new value';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    // ASSERT
+    // The input value should be updated
+    expect(input.value).toBe('new value');
+  });
+
+  it('should not render input if input is false', () => {
+    // ARRANGE
+    const config = {
+      input: false,
+      showConfirmButton: true,
+      title: 'Test'
+    };
+    // ACT
+    KTAlert.fire(config);
+    const input = document.querySelector('input, textarea, select');
+    // ASSERT
+    expect(input).toBeNull();
+  });
+
+  it('should apply input attributes correctly', () => {
+    // ARRANGE
+    const config = {
+      input: true,
+      inputType: 'text',
+      inputAttributes: {
+        maxlength: '10',
+        required: 'true',
+        pattern: '[A-Za-z]+'
+      },
+      title: 'Test'
+    };
+    // ACT
+    KTAlert.fire(config);
+    const input = document.querySelector('input[type="text"]') as HTMLInputElement;
+    // ASSERT
+    expect(input?.getAttribute('maxlength')).toBe('10');
+    expect(input?.getAttribute('required')).toBe('true');
+    expect(input?.getAttribute('pattern')).toBe('[A-Za-z]+');
+  });
+});

package/src/components/alert/tests/alert.basic.test.ts

@@ -0,0 +1,126 @@
+// alert.basic.test.ts - Basic instantiation and type safety tests for KTAlert
+import { describe, it, expect } from 'vitest';
+import { KTAlert } from '../alert';
+import { vi } from 'vitest';
+
+describe('KTAlert', () => {
+  it('should instantiate without errors', () => {
+    // Create a dummy element
+    const el = document.createElement('div');
+    // Instantiate KTAlert
+    const alert = new KTAlert(document.createElement("div"));
+    // Should be defined
+    expect(alert).toBeDefined();
+    // Should have correct name
+    expect((alert as any)._name).toBe('alert');
+  });
+
+  it('should auto-dismiss after timer expires', async () => {
+    vi.useFakeTimers();
+    const el = document.createElement('div');
+    document.body.appendChild(el);
+    const alert = new KTAlert(el, { timer: 1000, dismissible: true });
+    // Spy on _fireEvent
+    const fireEventSpy = vi.spyOn(alert as any, '_fireEvent');
+    // Fast-forward time
+    vi.advanceTimersByTime(1000);
+    // Wait for microtasks
+    await vi.runAllTicks();
+    expect(fireEventSpy).toHaveBeenCalledWith('dismiss', { reason: 'timer' });
+    expect(el.innerHTML).toBe('');
+    vi.useRealTimers();
+  });
+
+  it('should not auto-dismiss if manually dismissed first', async () => {
+    vi.useFakeTimers();
+    const el = document.createElement('div');
+    document.body.appendChild(el);
+    const alert = new KTAlert(el, { timer: 1000, dismissible: true });
+    // Spy on _fireEvent
+    const fireEventSpy = vi.spyOn(alert as any, '_fireEvent');
+    // Simulate manual dismiss
+    (alert as any)._clearTimer();
+    (alert as any)._state.isDismissed = true;
+    (alert as any)._element.innerHTML = '';
+    // Fast-forward time
+    vi.advanceTimersByTime(1000);
+    // Wait for microtasks
+    await vi.runAllTicks();
+    // Should not call _fireEvent again for timer
+    expect(fireEventSpy).not.toHaveBeenCalledWith('dismiss', { reason: 'timer' });
+    vi.useRealTimers();
+  });
+});
+
+describe('KTAlert input types', () => {
+  it('should render and capture text input', () => {
+    const el = document.createElement('div');
+    document.body.appendChild(el);
+    const alert = new KTAlert(el, { input: true, inputType: 'text', inputValue: 'foo' });
+    const input = el.querySelector('input[data-kt-alert-input]') as HTMLInputElement;
+    expect(input).toBeDefined();
+    expect(input.value).toBe('foo');
+    input.value = 'bar';
+    input.dispatchEvent(new Event('input'));
+    expect((alert as any)._state.inputValue).toBe('bar');
+  });
+
+  it('should render and capture textarea input', () => {
+    const el = document.createElement('div');
+    document.body.appendChild(el);
+    const alert = new KTAlert(el, { input: true, inputType: 'textarea', inputValue: 'foo' });
+    const textarea = el.querySelector('textarea[data-kt-alert-input]') as HTMLTextAreaElement;
+    expect(textarea).toBeDefined();
+    expect(textarea.value).toBe('foo');
+    textarea.value = 'bar';
+    textarea.dispatchEvent(new Event('input'));
+    expect((alert as any)._state.inputValue).toBe('bar');
+  });
+
+  it('should render and capture select input', () => {
+    const el = document.createElement('div');
+    document.body.appendChild(el);
+    const alert = new KTAlert(el, { input: true, inputType: 'select', inputValue: 'b', inputOptions: [
+      { value: 'a', label: 'A' },
+      { value: 'b', label: 'B' },
+      { value: 'c', label: 'C' },
+    ] });
+    const select = el.querySelector('select[data-kt-alert-input]') as HTMLSelectElement;
+    expect(select).toBeDefined();
+    expect(select.value).toBe('b');
+    select.value = 'c';
+    select.dispatchEvent(new Event('change'));
+    expect((alert as any)._state.inputValue).toBe('c');
+  });
+
+  it('should render and capture radio input', () => {
+    const el = document.createElement('div');
+    document.body.appendChild(el);
+    const alert = new KTAlert(el, { input: true, inputType: 'radio', inputValue: 'b', inputOptions: [
+      { value: 'a', label: 'A' },
+      { value: 'b', label: 'B' },
+      { value: 'c', label: 'C' },
+    ] });
+    const radios = el.querySelectorAll('input[type="radio"][data-kt-alert-input]') as NodeListOf<HTMLInputElement>;
+    expect(radios.length).toBe(3);
+    radios[2].checked = true;
+    radios[2].dispatchEvent(new Event('change'));
+    expect((alert as any)._state.inputValue).toBe('c');
+  });
+
+  it('should render and capture checkbox input', () => {
+    const el = document.createElement('div');
+    document.body.appendChild(el);
+    const alert = new KTAlert(el, { input: true, inputType: 'checkbox', inputOptions: [
+      { value: 'a', label: 'A', checked: true },
+      { value: 'b', label: 'B' },
+      { value: 'c', label: 'C', checked: true },
+    ] });
+    const checkboxes = el.querySelectorAll('input[type="checkbox"][data-kt-alert-input]') as NodeListOf<HTMLInputElement>;
+    expect(checkboxes.length).toBe(3);
+    checkboxes[1].checked = true;
+    checkboxes[1].dispatchEvent(new Event('change'));
+    // Should be comma-separated string of checked values
+    expect((alert as any)._state.inputValue.split(',').sort()).toEqual(['a','b','c'].sort());
+  });
+});