@keenthemes/ktui 1.0.28 → 1.1.0

package/lib/cjs/components/alert/alert.js

@@ -0,0 +1,1025 @@
+"use strict";
+/*
+ * alert.ts - Main entry point for KTAlert (modular alert/dialog component)
+ *
+ * Provides a modular, extensible alert/dialog system for notifications, confirmations, and custom content.
+ * Follows the KTDatepicker pattern: extends KTComponent, uses a template system, and supports full customization.
+ *
+ * All UI fragments are rendered via dedicated methods and customizable via a one-level config/template system.
+ *
+ * Copyright 2025 by Keenthemes Inc
+ */
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KTAlert = void 0;
+var component_1 = require("../component");
+var templates_1 = require("./templates");
+/**
+ * Default configuration for KTAlert
+ */
+var defaultConfig = {
+    type: 'info',
+    title: '',
+    message: '',
+    icon: undefined, // success, error, warning, info, question, or custom HTML
+    position: 'center',
+    dismissible: false,
+    modal: false,
+    input: false,
+    inputPlaceholder: '',
+    inputValue: '',
+    inputType: 'text',
+    inputLabel: '',
+    inputAttributes: {},
+    customContent: '',
+    confirmText: 'OK',
+    cancelText: 'Cancel',
+    showConfirmButton: true,
+    showCancelButton: false,
+    showCloseButton: true,
+    timer: undefined,
+    allowOutsideClick: true,
+    allowEscapeKey: true,
+    focusConfirm: true,
+    showLoaderOnConfirm: false,
+    customClass: '',
+    loaderHtml: '',
+};
+/**
+ * KTAlert
+ *
+ * Modular alert/dialog component for notifications, confirmations, and custom content.
+ *
+ * @class
+ * @extends KTComponent
+ */
+var KTAlert = /** @class */ (function (_super) {
+    __extends(KTAlert, _super);
+    /**
+     * Constructor: Initializes the alert component (matches KTDatepicker pattern)
+     * @param element - The root element for the alert
+     * @param config - Optional user config
+     */
+    function KTAlert(element, config) {
+        var _this = _super.call(this) || this;
+        /**
+         * Component name for data attributes and config
+         * @protected
+         * @type {string}
+         */
+        _this._name = 'alert';
+        /**
+         * User-provided template overrides
+         * @private
+         * @type {Record<string, string | ((data: any) => string)>}
+         */
+        _this._userTemplates = {};
+        /**
+         * Timer ID for auto-dismiss
+         * @private
+         * @type {ReturnType<typeof setTimeout> | null}
+         */
+        _this._timerId = null;
+        _this._init(element);
+        _this._buildConfig(config);
+        _this._templateSet = (0, templates_1.getTemplateStrings)(_this._config);
+        _this._state = {
+            isOpen: true,
+            isModal: !!_this._config.modal,
+            isDismissed: false,
+            inputValue: _this._config.inputValue || ''
+        };
+        _this._render();
+        // Auto-dismiss logic: start timer if timer is set in config
+        if (typeof _this._config.timer === 'number' && _this._config.timer > 0) {
+            _this._timerId = setTimeout(function () {
+                if (!_this._state.isDismissed) {
+                    _this._state.isDismissed = true;
+                    _this._fireEvent('dismiss', { reason: 'timer' });
+                    _this._element.innerHTML = '';
+                }
+            }, _this._config.timer);
+        }
+        return _this;
+    }
+    /**
+     * Initialize the component (placeholder)
+     * @param {HTMLElement} element - The root element for the alert
+     * @protected
+     */
+    KTAlert.prototype._init = function (element) {
+        _super.prototype._init.call(this, element);
+        // To be implemented: config merging, template setup, event binding
+    };
+    /**
+     * Build the component config by merging defaults, global, data attributes, and user config
+     * @param {KTAlertConfig} [config] - Optional user config
+     * @protected
+     */
+    KTAlert.prototype._buildConfig = function (config) {
+        if (!this._element)
+            return;
+        // Merge order: defaultConfig < globalConfig < data attributes < JSON config < user config
+        var globalConfig = this._getGlobalConfig();
+        // Parse data-kt-alert-* attributes
+        var dataAttrs = {};
+        Array.from(this._element.attributes).forEach(function (attr) {
+            if (attr.name.startsWith('data-kt-alert-') && attr.name !== 'data-kt-alert-config') {
+                // Convert kebab-case to camelCase
+                var key = attr.name
+                    .replace('data-kt-alert-', '')
+                    .replace(/-([a-z])/g, function (_, c) { return c.toUpperCase(); });
+                var value = attr.value;
+                // Parse booleans and numbers for known config keys
+                if ([
+                    'dismissible', 'modal', 'input', 'showConfirmButton', 'showCancelButton', 'showCloseButton',
+                    'allowOutsideClick', 'allowEscapeKey', 'focusConfirm', 'showLoaderOnConfirm'
+                ].includes(key)) {
+                    value = value === 'true';
+                }
+                else if (['timer'].includes(key)) {
+                    value = Number(value);
+                }
+                else if (['inputAttributes'].includes(key)) {
+                    try {
+                        value = JSON.parse(value);
+                    }
+                    catch (_a) {
+                        value = {};
+                    }
+                }
+                dataAttrs[key] = value;
+            }
+        });
+        // JSON config (data-kt-alert-config)
+        var jsonConfig = {};
+        var jsonAttr = this._element.getAttribute('data-kt-alert-config');
+        if (jsonAttr) {
+            try {
+                jsonConfig = JSON.parse(jsonAttr);
+            }
+            catch (e) {
+                // Invalid JSON, ignore
+            }
+        }
+        // Merge all config sources
+        var mergedConfig = __assign(__assign(__assign(__assign(__assign({}, defaultConfig), globalConfig), dataAttrs), jsonConfig), (config || {}));
+        // Apply per-type theming if present
+        if (mergedConfig.theme && mergedConfig.type && mergedConfig.theme[mergedConfig.type]) {
+            var themeOverrides = mergedConfig.theme[mergedConfig.type];
+            mergedConfig = __assign(__assign(__assign({}, mergedConfig), themeOverrides), { 
+                // Use custom class templates if provided
+                templates: __assign(__assign({}, (mergedConfig.templates || {})), { confirmButton: themeOverrides.confirmButtonClass ? templates_1.coreTemplateStrings.confirmButtonCustomClass : undefined, cancelButton: themeOverrides.cancelButtonClass ? templates_1.coreTemplateStrings.cancelButtonCustomClass : undefined }) });
+        }
+        this._config = mergedConfig;
+    };
+    /**
+     * Render the alert UI by composing all fragments using templates and config
+     * Adds ARIA roles and keyboard navigation for accessibility
+     * @private
+     */
+    KTAlert.prototype._render = function () {
+        if (!this._element)
+            return;
+        this._templateSet = (0, templates_1.getTemplateStrings)(this._config);
+        // Render fragments
+        var icon = this._renderIcon();
+        var title = this._renderTitle();
+        var message = this._renderMessage();
+        var input = this._renderInput();
+        var customContent = this._renderCustomContent();
+        var confirmButton = this._renderConfirmButton();
+        var cancelButton = this._renderCancelButton();
+        var actions = this._renderActions(confirmButton, cancelButton);
+        var closeButton = this._renderCloseButton();
+        // Compose content
+        var content = [icon, title, message, input, customContent, actions, closeButton].join('');
+        // Render container
+        var containerTpl = this._templateSet.container;
+        var containerHtml;
+        if ((0, templates_1.isTemplateFunction)(containerTpl)) {
+            containerHtml = containerTpl(__assign(__assign({}, this._config), { content: content }));
+        }
+        else if (typeof containerTpl === 'string') {
+            containerHtml = (0, templates_1.renderTemplateString)(containerTpl, __assign(__assign({}, this._config), { content: content }));
+        }
+        else {
+            // Use default container template
+            var defaultContainer = templates_1.coreTemplateStrings.container;
+            if ((0, templates_1.isTemplateFunction)(defaultContainer)) {
+                containerHtml = defaultContainer(__assign(__assign({}, this._config), { content: content }));
+            }
+            else if (typeof defaultContainer === 'string') {
+                containerHtml = (0, templates_1.renderTemplateString)(defaultContainer, __assign(__assign({}, this._config), { content: content }));
+            }
+            else {
+                containerHtml = "<div>".concat(content, "</div>");
+            }
+        }
+        // Create DOM node
+        var temp = document.createElement('div');
+        temp.innerHTML = containerHtml;
+        this._container = temp.firstElementChild;
+        // Add custom class if set
+        if (this._config.customClass) {
+            this._container.classList.add(this._config.customClass);
+        }
+        // Set ARIA attributes for accessibility
+        this._container.setAttribute('role', this._config.modal ? 'alertdialog' : 'alert');
+        this._container.setAttribute('aria-modal', this._config.modal ? 'true' : 'false');
+        this._container.setAttribute('aria-labelledby', 'kt-alert-title');
+        this._container.setAttribute('aria-describedby', 'kt-alert-message');
+        // Replace or append to element
+        this._element.innerHTML = '';
+        this._element.appendChild(this._container);
+        // Focus first interactive element
+        this._focusFirstInteractive();
+        // Bind event listeners
+        this._bindEvents();
+        // Bind keyboard navigation
+        this._bindKeyboardNav();
+    };
+    /**
+     * Focus the first interactive element (input, confirm, cancel, close)
+     * @private
+     */
+    KTAlert.prototype._focusFirstInteractive = function () {
+        if (!this._container)
+            return;
+        // Auto-focus input if configured and input exists
+        if (this._config.inputAutoFocus && this._config.input) {
+            var inputElement = this._container.querySelector('[data-kt-alert-input]');
+            if (inputElement) {
+                inputElement.focus();
+                return;
+            }
+        }
+        // Fallback to first interactive element
+        var first = this._container.querySelector('[data-kt-alert-input], [data-kt-alert-confirm], [data-kt-alert-cancel], [data-kt-alert-close]');
+        if (first)
+            first.focus();
+    };
+    /**
+     * Keyboard navigation: focus trap, Escape closes, Enter triggers confirm
+     * @private
+     */
+    KTAlert.prototype._bindKeyboardNav = function () {
+        var _this = this;
+        if (!this._container)
+            return;
+        var focusable = Array.from(this._container.querySelectorAll('[tabindex="0"]'));
+        if (focusable.length === 0)
+            return;
+        var current = 0;
+        // Focus trap for modal
+        if (this._config.modal) {
+            this._container.addEventListener('keydown', function (e) {
+                if (e.key === 'Tab') {
+                    e.preventDefault();
+                    if (e.shiftKey) {
+                        current = (current - 1 + focusable.length) % focusable.length;
+                    }
+                    else {
+                        current = (current + 1) % focusable.length;
+                    }
+                    focusable[current].focus();
+                }
+            });
+        }
+        // Escape closes alert if dismissible or modal
+        this._container.addEventListener('keydown', function (e) {
+            if (e.key === 'Escape' && (_this._config.dismissible || _this._config.modal)) {
+                _this._clearTimer();
+                _this._state.isDismissed = true;
+                _this._fireEvent('dismiss', {});
+                _this._element.innerHTML = '';
+            }
+            // Enter triggers confirm if present
+            if (e.key === 'Enter') {
+                var confirmBtn = _this._container.querySelector('[data-kt-alert-confirm]');
+                if (confirmBtn) {
+                    confirmBtn.click();
+                }
+            }
+        });
+    };
+    /** Render icon fragment */
+    KTAlert.prototype._renderIcon = function () {
+        if (!this._config.icon || !this._templateSet.icon)
+            return '';
+        var iconVal = this._config.icon;
+        var tpl = this._templateSet.icon;
+        if ((0, templates_1.isTemplateFunction)(tpl)) {
+            return tpl(__assign(__assign({}, this._config), { icon: iconVal }));
+        }
+        else if (typeof tpl === 'string') {
+            return (0, templates_1.renderTemplateString)(tpl, __assign(__assign({}, this._config), { icon: iconVal }));
+        }
+        return '';
+    };
+    /** Render title fragment */
+    KTAlert.prototype._renderTitle = function () {
+        if (!this._templateSet.title)
+            return '';
+        var titleVal = this._config.title || '';
+        var tpl = this._templateSet.title;
+        if ((0, templates_1.isTemplateFunction)(tpl)) {
+            return tpl(__assign(__assign({}, this._config), { title: titleVal }));
+        }
+        else if (typeof tpl === 'string') {
+            return (0, templates_1.renderTemplateString)(tpl, __assign(__assign({}, this._config), { title: titleVal }));
+        }
+        return '';
+    };
+    /** Render message fragment */
+    KTAlert.prototype._renderMessage = function () {
+        if (!this._templateSet.message)
+            return '';
+        var messageVal = this._config.message || '';
+        var tpl = this._templateSet.message;
+        if ((0, templates_1.isTemplateFunction)(tpl)) {
+            return tpl(__assign(__assign({}, this._config), { message: messageVal }));
+        }
+        else if (typeof tpl === 'string') {
+            return (0, templates_1.renderTemplateString)(tpl, __assign(__assign({}, this._config), { message: messageVal }));
+        }
+        return '';
+    };
+    /** Render input fragment */
+    KTAlert.prototype._renderInput = function () {
+        if (!this._config.input)
+            return '';
+        var inputType = this._config.inputType || 'text';
+        var inputPlaceholder = this._config.inputPlaceholder || '';
+        var inputValue = this._config.inputValue || '';
+        var inputLabel = this._config.inputLabel || '';
+        var attrs = this._config.inputAttributes
+            ? Object.entries(this._config.inputAttributes).map(function (_a) {
+                var k = _a[0], v = _a[1];
+                return "".concat(k, "=\"").concat(v, "\"");
+            }).join(' ')
+            : '';
+        var options = this._config.inputOptions || [];
+        var tplKey = 'inputText';
+        var optionsHtml = '';
+        // Set template key and render options if needed
+        switch (inputType) {
+            case 'textarea':
+                tplKey = 'inputTextarea';
+                break;
+            case 'select':
+                tplKey = 'inputSelect';
+                if (options.length > 0) {
+                    optionsHtml = (0, templates_1.renderOptions)(options.map(function (opt) { return (__assign(__assign({}, opt), { inputValue: inputValue })); }), 'option', this._templateSet);
+                }
+                break;
+            case 'radio':
+                tplKey = 'inputRadio';
+                if (options.length > 0) {
+                    optionsHtml = (0, templates_1.renderOptions)(options.map(function (opt) { return (__assign(__assign({}, opt), { inputValue: inputValue })); }), 'radioOption', this._templateSet);
+                }
+                break;
+            case 'checkbox':
+                tplKey = 'inputCheckbox';
+                if (options.length > 0) {
+                    optionsHtml = (0, templates_1.renderOptions)(options, 'checkboxOption', this._templateSet);
+                }
+                break;
+            default:
+                tplKey = 'inputText';
+                break;
+        }
+        // Use type assertion to satisfy TS for dynamic template keys
+        var tpl = this._templateSet[tplKey];
+        var data = __assign(__assign({}, this._config), { inputType: inputType, inputPlaceholder: inputPlaceholder, inputValue: inputValue, inputLabel: inputLabel, attrs: attrs, optionsHtml: optionsHtml });
+        if ((0, templates_1.isTemplateFunction)(tpl)) {
+            return tpl(data);
+        }
+        else if (typeof tpl === 'string') {
+            return (0, templates_1.renderTemplateString)(tpl, data);
+        }
+        return '';
+    };
+    /** Render custom content fragment */
+    KTAlert.prototype._renderCustomContent = function () {
+        if (!this._templateSet.customContent)
+            return '';
+        var customVal = this._config.customContent || '';
+        var tpl = this._templateSet.customContent;
+        if ((0, templates_1.isTemplateFunction)(tpl)) {
+            return tpl(__assign(__assign({}, this._config), { customContent: customVal }));
+        }
+        else if (typeof tpl === 'string') {
+            return (0, templates_1.renderTemplateString)(tpl, __assign(__assign({}, this._config), { customContent: customVal }));
+        }
+        return '';
+    };
+    /** Render confirm button fragment */
+    KTAlert.prototype._renderConfirmButton = function () {
+        if (!this._config.showConfirmButton)
+            return '';
+        var confirmText = this._config.confirmText || 'OK';
+        var tpl = this._templateSet.confirmButton;
+        // Use custom class template if present
+        if (this._config.confirmButtonClass && this._templateSet.confirmButtonCustomClass) {
+            tpl = this._templateSet.confirmButtonCustomClass;
+        }
+        if ((0, templates_1.isTemplateFunction)(tpl)) {
+            return tpl(__assign(__assign({}, this._config), { confirmText: confirmText, confirmButtonClass: this._config.confirmButtonClass }));
+        }
+        else if (typeof tpl === 'string') {
+            return (0, templates_1.renderTemplateString)(tpl, __assign(__assign({}, this._config), { confirmText: confirmText, confirmButtonClass: this._config.confirmButtonClass }));
+        }
+        return '';
+    };
+    /** Render cancel button fragment */
+    KTAlert.prototype._renderCancelButton = function () {
+        if (!this._config.showCancelButton)
+            return '';
+        var cancelText = this._config.cancelText || 'Cancel';
+        var tpl = this._templateSet.cancelButton;
+        // Use custom class template if present
+        if (this._config.cancelButtonClass && this._templateSet.cancelButtonCustomClass) {
+            tpl = this._templateSet.cancelButtonCustomClass;
+        }
+        if ((0, templates_1.isTemplateFunction)(tpl)) {
+            return tpl(__assign(__assign({}, this._config), { cancelText: cancelText, cancelButtonClass: this._config.cancelButtonClass }));
+        }
+        else if (typeof tpl === 'string') {
+            return (0, templates_1.renderTemplateString)(tpl, __assign(__assign({}, this._config), { cancelText: cancelText, cancelButtonClass: this._config.cancelButtonClass }));
+        }
+        return '';
+    };
+    /** Render actions fragment (wraps confirm/cancel buttons) */
+    KTAlert.prototype._renderActions = function (confirmButton, cancelButton) {
+        if (!this._templateSet.actions)
+            return '';
+        var tpl = this._templateSet.actions;
+        if ((0, templates_1.isTemplateFunction)(tpl)) {
+            return tpl(__assign(__assign({}, this._config), { confirmButton: confirmButton, cancelButton: cancelButton }));
+        }
+        else if (typeof tpl === 'string') {
+            return (0, templates_1.renderTemplateString)(tpl, __assign(__assign({}, this._config), { confirmButton: confirmButton, cancelButton: cancelButton }));
+        }
+        return '';
+    };
+    /** Render close button fragment */
+    KTAlert.prototype._renderCloseButton = function () {
+        if (!this._config.showCloseButton || !this._templateSet.closeButton)
+            return '';
+        var tpl = this._templateSet.closeButton;
+        if ((0, templates_1.isTemplateFunction)(tpl)) {
+            return tpl(__assign({}, this._config));
+        }
+        else if (typeof tpl === 'string') {
+            return (0, templates_1.renderTemplateString)(tpl, __assign({}, this._config));
+        }
+        else {
+            return '';
+        }
+    };
+    /**
+     * Attach event listeners for dismiss, confirm, cancel, and input actions
+     * @private
+     */
+    KTAlert.prototype._bindEvents = function () {
+        var _this = this;
+        if (!this._container)
+            return;
+        // Dismiss (close) button
+        var closeBtn = this._container.querySelector('[data-kt-alert-close]');
+        if (closeBtn) {
+            closeBtn.addEventListener('click', function () {
+                _this._clearTimer();
+                _this._state.isDismissed = true;
+                _this._fireEvent('dismiss', {});
+                _this._element.innerHTML = '';
+            });
+        }
+        // Confirm button
+        var confirmBtn = this._container.querySelector('[data-kt-alert-confirm]');
+        if (confirmBtn) {
+            confirmBtn.addEventListener('click', function () { return __awaiter(_this, void 0, void 0, function () {
+                var inputValue, inputType, checkboxes, radio, inputEl, validationResult, error_1, error_2;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            this._clearTimer();
+                            inputValue = undefined;
+                            inputType = this._config.inputType || 'text';
+                            if (inputType === 'checkbox') {
+                                checkboxes = this._container.querySelectorAll('input[type="checkbox"][data-kt-alert-input]');
+                                // Return as comma-separated string for type safety
+                                inputValue = Array.from(checkboxes).filter(function (el) { return el.checked; }).map(function (el) { return el.value; }).join(',');
+                            }
+                            else if (inputType === 'radio') {
+                                radio = this._container.querySelector('input[type="radio"][data-kt-alert-input]:checked');
+                                inputValue = radio ? radio.value : undefined;
+                            }
+                            else {
+                                inputEl = this._container.querySelector('[data-kt-alert-input]');
+                                inputValue = inputEl ? inputEl.value : undefined;
+                            }
+                            if (!this._config.inputValidator) return [3 /*break*/, 4];
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, this._config.inputValidator(inputValue || '')];
+                        case 2:
+                            validationResult = _a.sent();
+                            if (validationResult) {
+                                // Show validation error
+                                this._showValidationError(validationResult);
+                                return [2 /*return*/]; // Don't proceed with confirmation
+                            }
+                            return [3 /*break*/, 4];
+                        case 3:
+                            error_1 = _a.sent();
+                            // Show validation error for exceptions
+                            this._showValidationError('Validation failed. Please try again.');
+                            return [2 /*return*/];
+                        case 4:
+                            // Clear any existing validation errors
+                            this._clearValidationError();
+                            if (!this._config.preConfirm) return [3 /*break*/, 8];
+                            _a.label = 5;
+                        case 5:
+                            _a.trys.push([5, 7, , 8]);
+                            return [4 /*yield*/, this._config.preConfirm(inputValue || '')];
+                        case 6:
+                            inputValue = _a.sent();
+                            return [3 /*break*/, 8];
+                        case 7:
+                            error_2 = _a.sent();
+                            // Show error for pre-confirmation failures
+                            this._showValidationError('Processing failed. Please try again.');
+                            return [2 /*return*/];
+                        case 8:
+                            this._fireEvent('confirm', { inputValue: inputValue });
+                            this._state.isDismissed = true;
+                            this._element.innerHTML = '';
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        }
+        // Cancel button
+        var cancelBtn = this._container.querySelector('[data-kt-alert-cancel]');
+        if (cancelBtn) {
+            cancelBtn.addEventListener('click', function () {
+                _this._clearTimer();
+                _this._fireEvent('cancel', {});
+                _this._state.isDismissed = true;
+                _this._element.innerHTML = '';
+            });
+        }
+        // Outside click dismissal (for modal alerts)
+        if (this._config.modal && this._config.allowOutsideClick) {
+            var overlay_1 = this._element.closest('[data-kt-alert-overlay]');
+            if (overlay_1) {
+                overlay_1.addEventListener('click', function (e) {
+                    if (e.target === overlay_1) {
+                        _this._clearTimer();
+                        _this._state.isDismissed = true;
+                        _this._fireEvent('dismiss', {});
+                        _this._element.innerHTML = '';
+                    }
+                });
+            }
+        }
+        // Input field (update state on input/change)
+        var inputType = this._config.inputType || 'text';
+        if (inputType === 'checkbox' || inputType === 'radio' || inputType === 'select') {
+            var inputs = this._container.querySelectorAll('[data-kt-alert-input]');
+            inputs.forEach(function (input) {
+                input.addEventListener('change', function (e) {
+                    if (inputType === 'checkbox') {
+                        var checkboxes = _this._container.querySelectorAll('input[type="checkbox"][data-kt-alert-input]');
+                        // Store as comma-separated string for type safety
+                        _this._state.inputValue = Array.from(checkboxes).filter(function (el) { return el.checked; }).map(function (el) { return el.value; }).join(',');
+                    }
+                    else if (inputType === 'radio') {
+                        var radio = _this._container.querySelector('input[type="radio"][data-kt-alert-input]:checked');
+                        _this._state.inputValue = radio ? radio.value : undefined;
+                    }
+                    else if (inputType === 'select') {
+                        var select = _this._container.querySelector('select[data-kt-alert-input]');
+                        _this._state.inputValue = select ? select.value : undefined;
+                    }
+                    _this._fireEvent('input', { value: _this._state.inputValue });
+                });
+            });
+        }
+        else {
+            var inputEl = this._container.querySelector('[data-kt-alert-input]');
+            if (inputEl) {
+                inputEl.addEventListener('input', function (e) {
+                    _this._state.inputValue = e.target.value;
+                    _this._fireEvent('input', { value: _this._state.inputValue });
+                });
+            }
+        }
+    };
+    /**
+     * Clear the current timer if it exists.
+     * @private
+     */
+    KTAlert.prototype._clearTimer = function () {
+        if (this._timerId) {
+            clearTimeout(this._timerId);
+            this._timerId = null;
+        }
+    };
+    /**
+     * Show validation error message below input field.
+     * @private
+     */
+    KTAlert.prototype._showValidationError = function (message) {
+        var _a;
+        if (!this._container)
+            return;
+        // Clear any existing error
+        this._clearValidationError();
+        // Create error element
+        var errorElement = document.createElement('div');
+        errorElement.setAttribute('data-kt-alert-input-error', '');
+        errorElement.className = 'kt-alert-input-error';
+        errorElement.setAttribute('role', 'alert');
+        errorElement.setAttribute('aria-live', 'polite');
+        errorElement.textContent = message;
+        // Find input label and insert error after it
+        var inputLabel = this._container.querySelector('[data-kt-alert-input-label]');
+        if (inputLabel) {
+            (_a = inputLabel.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(errorElement, inputLabel.nextSibling);
+        }
+        // Mark input as invalid
+        var inputElement = this._container.querySelector('[data-kt-alert-input]');
+        if (inputElement) {
+            inputElement.setAttribute('aria-invalid', 'true');
+        }
+    };
+    /**
+     * Clear validation error message.
+     * @private
+     */
+    KTAlert.prototype._clearValidationError = function () {
+        if (!this._container)
+            return;
+        // Remove error element
+        var errorElement = this._container.querySelector('[data-kt-alert-input-error]');
+        if (errorElement) {
+            errorElement.remove();
+        }
+        // Remove invalid state from input
+        var inputElement = this._container.querySelector('[data-kt-alert-input]');
+        if (inputElement) {
+            inputElement.removeAttribute('aria-invalid');
+        }
+    };
+    /**
+     * Show validation error message below input field (static method helper).
+     * @private
+     */
+    KTAlert.showValidationError = function (alert, message) {
+        var _a;
+        // Clear any existing error
+        this.clearValidationError(alert);
+        // Create error element
+        var errorElement = document.createElement('div');
+        errorElement.setAttribute('data-kt-alert-input-error', '');
+        errorElement.className = 'kt-alert-input-error';
+        errorElement.setAttribute('role', 'alert');
+        errorElement.setAttribute('aria-live', 'polite');
+        errorElement.textContent = message;
+        // Find input label and insert error after it
+        var inputLabel = alert.querySelector('[data-kt-alert-input-label]');
+        if (inputLabel) {
+            (_a = inputLabel.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(errorElement, inputLabel.nextSibling);
+        }
+        // Mark input as invalid
+        var inputElement = alert.querySelector('[data-kt-alert-input]');
+        if (inputElement) {
+            inputElement.setAttribute('aria-invalid', 'true');
+        }
+    };
+    /**
+     * Clear validation error message (static method helper).
+     * @private
+     */
+    KTAlert.clearValidationError = function (alert) {
+        // Remove error element
+        var errorElement = alert.querySelector('[data-kt-alert-input-error]');
+        if (errorElement) {
+            errorElement.remove();
+        }
+        // Remove invalid state from input
+        var inputElement = alert.querySelector('[data-kt-alert-input]');
+        if (inputElement) {
+            inputElement.removeAttribute('aria-invalid');
+        }
+    };
+    /**
+     * KTAlert.fire(options)
+     * Accepts a config object and returns a Promise that resolves with the user's action and input value.
+     */
+    KTAlert.fire = function (options) {
+        var _this = this;
+        var _a;
+        // Remove any existing overlay
+        var existing = document.querySelector('[data-kt-alert-overlay]');
+        if (existing)
+            (_a = existing.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(existing);
+        // Prepare templates
+        var templates = (0, templates_1.getTemplateStrings)(options);
+        // Helper to resolve template (string or function)
+        function resolveTemplate(tpl, data) {
+            if (typeof tpl === 'function')
+                return tpl(data);
+            return tpl ? (0, templates_1.renderTemplateString)(tpl, data) : '';
+        }
+        // Set default icon based on type if no explicit icon is provided
+        var iconToUse = options.icon === false ? '' : (options.icon || (function () {
+            switch (options.type) {
+                case 'success': return '✓';
+                case 'error': return '✕';
+                case 'warning': return '⚠';
+                case 'info': return 'ℹ';
+                case 'question': return '?';
+                default: return '';
+            }
+        })());
+        // Render modal content (all fragments)
+        var icon = iconToUse ? resolveTemplate(templates.icon, __assign(__assign({}, options), { icon: iconToUse })) : '';
+        var title = resolveTemplate(templates.title, options);
+        var message = resolveTemplate(templates.message, __assign(__assign({}, options), { message: options.text || options.message || '' }));
+        // Render input based on type
+        var input = '';
+        if (options.input) {
+            var inputType = options.inputType || 'text';
+            var inputPlaceholder = options.inputPlaceholder || '';
+            var inputValue_1 = options.inputValue || '';
+            var inputLabel = options.inputLabel || '';
+            var attrs = options.inputAttributes ? Object.entries(options.inputAttributes).map(function (_a) {
+                var k = _a[0], v = _a[1];
+                return "".concat(k, "=\"").concat(v, "\"");
+            }).join(' ') : '';
+            var inputOptions = options.inputOptions || [];
+            var tplKey = 'inputText';
+            var optionsHtml = '';
+            // Set template key and render options if needed
+            switch (inputType) {
+                case 'textarea':
+                    tplKey = 'inputTextarea';
+                    break;
+                case 'select':
+                    tplKey = 'inputSelect';
+                    if (inputOptions.length > 0) {
+                        optionsHtml = (0, templates_1.renderOptions)(inputOptions.map(function (opt) { return (__assign(__assign({}, opt), { inputValue: inputValue_1 })); }), 'option', templates);
+                    }
+                    break;
+                case 'radio':
+                    tplKey = 'inputRadio';
+                    if (inputOptions.length > 0) {
+                        optionsHtml = (0, templates_1.renderOptions)(inputOptions.map(function (opt) { return (__assign(__assign({}, opt), { inputValue: inputValue_1 })); }), 'radioOption', templates);
+                    }
+                    break;
+                case 'checkbox':
+                    tplKey = 'inputCheckbox';
+                    if (inputOptions.length > 0) {
+                        optionsHtml = (0, templates_1.renderOptions)(inputOptions, 'checkboxOption', templates);
+                    }
+                    break;
+                default:
+                    tplKey = 'inputText';
+                    break;
+            }
+            var inputTemplate = templates[tplKey];
+            var inputData = __assign(__assign({}, options), { inputType: inputType, inputPlaceholder: inputPlaceholder, inputValue: inputValue_1, inputLabel: inputLabel, attrs: attrs, optionsHtml: optionsHtml });
+            if (typeof inputTemplate === 'string') {
+                input = (0, templates_1.renderTemplateString)(inputTemplate, inputData);
+            }
+            else if (typeof inputTemplate === 'function') {
+                input = inputTemplate(inputData);
+            }
+        }
+        var customContent = options.customContent ? resolveTemplate(templates.customContent, options) : '';
+        var confirmButton = options.showConfirmButton !== false ? resolveTemplate(templates.confirmButton, __assign(__assign({}, options), { confirmText: options.confirmText || 'OK' })) : '';
+        var cancelButton = options.showCancelButton ? resolveTemplate(templates.cancelButton, __assign(__assign({}, options), { cancelText: options.cancelText || 'Cancel' })) : '';
+        var actions = resolveTemplate(templates.actions, __assign(__assign({}, options), { confirmButton: confirmButton, cancelButton: cancelButton }));
+        var closeButton = options.showCloseButton !== false ? resolveTemplate(templates.closeButton, options) : '';
+        // Loader support
+        var loaderHtml = options.showLoaderOnConfirm && options.loaderHtml ? resolveTemplate(templates.loaderHtml, options) : '';
+        // Compose content
+        var content = [icon, title, message, input, customContent, actions, closeButton, loaderHtml].join('');
+        // Render modal container
+        var modalHtml = resolveTemplate(templates.modal, __assign(__assign({}, options), { type: options.type || 'info', variant: options.variant || '', ariaModal: options.modal !== false ? 'true' : 'false', role: options.modal !== false ? 'alertdialog' : 'alert', content: content, customClass: options.customClass || '', position: options.position || 'center' }));
+        // Render overlay (if modal)
+        var overlayHtml = options.modal !== false
+            ? resolveTemplate(templates.overlay, __assign(__assign({}, options), { modal: modalHtml }))
+            : modalHtml;
+        // Create DOM node from template
+        var temp = document.createElement('div');
+        temp.innerHTML = overlayHtml;
+        var overlay = options.modal !== false
+            ? temp.querySelector('[data-kt-alert-overlay]')
+            : temp.firstElementChild;
+        document.body.appendChild(overlay);
+        // Set custom ID if provided
+        var alert = overlay.querySelector('[data-kt-alert]') || overlay;
+        if (options.id) {
+            alert.id = options.id;
+        }
+        // Timer support (auto-dismiss)
+        var timerId = null;
+        // Promise for result
+        return new Promise(function (resolve) {
+            // Helper to clean up overlay
+            var cleanup = function () {
+                if (timerId)
+                    clearTimeout(timerId);
+                if (overlay.parentNode)
+                    overlay.parentNode.removeChild(overlay);
+            };
+            // Timer support (auto-dismiss) - moved inside Promise to access cleanup and resolve
+            if (options.timer && typeof options.timer === 'number' && options.timer > 0) {
+                timerId = setTimeout(function () {
+                    cleanup();
+                    resolve({ isConfirmed: false, isDismissed: true, isCanceled: false });
+                }, options.timer);
+            }
+            // Bind events manually
+            var alert = overlay.querySelector('[data-kt-alert]') || overlay;
+            // Dismiss (close) button
+            var closeBtn = alert.querySelector('[data-kt-alert-close]');
+            if (closeBtn) {
+                closeBtn.addEventListener('click', function () {
+                    cleanup();
+                    resolve({ isConfirmed: false, isDismissed: true, isCanceled: false });
+                });
+            }
+            // Confirm button
+            var confirmBtn = alert.querySelector('[data-kt-alert-confirm]');
+            if (confirmBtn) {
+                confirmBtn.addEventListener('click', function () { return __awaiter(_this, void 0, void 0, function () {
+                    var inputValue, inputType, checkboxes, radio, inputEl, validationResult, error_3, error_4;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                inputValue = undefined;
+                                inputType = options.inputType || 'text';
+                                if (inputType === 'checkbox') {
+                                    checkboxes = alert.querySelectorAll('input[type="checkbox"][data-kt-alert-input]');
+                                    inputValue = Array.from(checkboxes).filter(function (el) { return el.checked; }).map(function (el) { return el.value; }).join(',');
+                                }
+                                else if (inputType === 'radio') {
+                                    radio = alert.querySelector('input[type="radio"][data-kt-alert-input]:checked');
+                                    inputValue = radio ? radio.value : undefined;
+                                }
+                                else {
+                                    inputEl = alert.querySelector('[data-kt-alert-input]');
+                                    inputValue = inputEl ? inputEl.value : undefined;
+                                }
+                                if (!options.inputValidator) return [3 /*break*/, 4];
+                                _a.label = 1;
+                            case 1:
+                                _a.trys.push([1, 3, , 4]);
+                                return [4 /*yield*/, options.inputValidator(inputValue || '')];
+                            case 2:
+                                validationResult = _a.sent();
+                                if (validationResult) {
+                                    // Show validation error
+                                    KTAlert.showValidationError(alert, validationResult);
+                                    return [2 /*return*/]; // Don't proceed with confirmation
+                                }
+                                return [3 /*break*/, 4];
+                            case 3:
+                                error_3 = _a.sent();
+                                // Show validation error for exceptions
+                                KTAlert.showValidationError(alert, 'Validation failed. Please try again.');
+                                return [2 /*return*/];
+                            case 4:
+                                // Clear any existing validation errors
+                                KTAlert.clearValidationError(alert);
+                                if (!options.preConfirm) return [3 /*break*/, 8];
+                                _a.label = 5;
+                            case 5:
+                                _a.trys.push([5, 7, , 8]);
+                                return [4 /*yield*/, options.preConfirm(inputValue || '')];
+                            case 6:
+                                inputValue = _a.sent();
+                                return [3 /*break*/, 8];
+                            case 7:
+                                error_4 = _a.sent();
+                                // Show error for pre-confirmation failures
+                                KTAlert.showValidationError(alert, 'Processing failed. Please try again.');
+                                return [2 /*return*/];
+                            case 8:
+                                cleanup();
+                                resolve({ isConfirmed: true, isDismissed: false, isCanceled: false, value: inputValue });
+                                return [2 /*return*/];
+                        }
+                    });
+                }); });
+            }
+            // Cancel button
+            var cancelBtn = alert.querySelector('[data-kt-alert-cancel]');
+            if (cancelBtn) {
+                cancelBtn.addEventListener('click', function () {
+                    cleanup();
+                    resolve({ isConfirmed: false, isDismissed: false, isCanceled: true });
+                });
+            }
+            // Outside click dismissal (for modal alerts)
+            if (options.modal && options.allowOutsideClick) {
+                overlay.addEventListener('click', function (e) {
+                    if (e.target === overlay) {
+                        cleanup();
+                        resolve({ isConfirmed: false, isDismissed: true, isCanceled: false });
+                    }
+                });
+            }
+            // Keyboard events
+            alert.addEventListener('keydown', function (e) {
+                if (e.key === 'Escape' && (options.allowEscapeKey !== false || options.dismissible || options.modal)) {
+                    cleanup();
+                    resolve({ isConfirmed: false, isDismissed: true, isCanceled: false });
+                }
+                if (e.key === 'Enter' && confirmBtn) {
+                    confirmBtn.click();
+                }
+            });
+            // Auto-focus input if configured
+            if (options.inputAutoFocus && options.input) {
+                var inputElement_1 = alert.querySelector('[data-kt-alert-input]');
+                if (inputElement_1) {
+                    // Use setTimeout to ensure DOM is ready
+                    setTimeout(function () { return inputElement_1.focus(); }, 0);
+                }
+            }
+        });
+    };
+    return KTAlert;
+}(component_1.default));
+exports.KTAlert = KTAlert;
+//# sourceMappingURL=alert.js.map