@keenthemes/ktui 1.1.0 → 1.1.1

package/lib/esm/components/alert/alert.js

@@ -1,1022 +0,0 @@
-/*
- * 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 };
-    }
-};
-import KTComponent from '../component';
-import { getTemplateStrings, coreTemplateStrings, renderTemplateString, isTemplateFunction, renderOptions } from './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 = 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 ? coreTemplateStrings.confirmButtonCustomClass : undefined, cancelButton: themeOverrides.cancelButtonClass ? 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 = 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 (isTemplateFunction(containerTpl)) {
-            containerHtml = containerTpl(__assign(__assign({}, this._config), { content: content }));
-        }
-        else if (typeof containerTpl === 'string') {
-            containerHtml = renderTemplateString(containerTpl, __assign(__assign({}, this._config), { content: content }));
-        }
-        else {
-            // Use default container template
-            var defaultContainer = coreTemplateStrings.container;
-            if (isTemplateFunction(defaultContainer)) {
-                containerHtml = defaultContainer(__assign(__assign({}, this._config), { content: content }));
-            }
-            else if (typeof defaultContainer === 'string') {
-                containerHtml = 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 (isTemplateFunction(tpl)) {
-            return tpl(__assign(__assign({}, this._config), { icon: iconVal }));
-        }
-        else if (typeof tpl === 'string') {
-            return 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 (isTemplateFunction(tpl)) {
-            return tpl(__assign(__assign({}, this._config), { title: titleVal }));
-        }
-        else if (typeof tpl === 'string') {
-            return 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 (isTemplateFunction(tpl)) {
-            return tpl(__assign(__assign({}, this._config), { message: messageVal }));
-        }
-        else if (typeof tpl === 'string') {
-            return 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 = renderOptions(options.map(function (opt) { return (__assign(__assign({}, opt), { inputValue: inputValue })); }), 'option', this._templateSet);
-                }
-                break;
-            case 'radio':
-                tplKey = 'inputRadio';
-                if (options.length > 0) {
-                    optionsHtml = renderOptions(options.map(function (opt) { return (__assign(__assign({}, opt), { inputValue: inputValue })); }), 'radioOption', this._templateSet);
-                }
-                break;
-            case 'checkbox':
-                tplKey = 'inputCheckbox';
-                if (options.length > 0) {
-                    optionsHtml = 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 (isTemplateFunction(tpl)) {
-            return tpl(data);
-        }
-        else if (typeof tpl === 'string') {
-            return 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 (isTemplateFunction(tpl)) {
-            return tpl(__assign(__assign({}, this._config), { customContent: customVal }));
-        }
-        else if (typeof tpl === 'string') {
-            return 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 (isTemplateFunction(tpl)) {
-            return tpl(__assign(__assign({}, this._config), { confirmText: confirmText, confirmButtonClass: this._config.confirmButtonClass }));
-        }
-        else if (typeof tpl === 'string') {
-            return 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 (isTemplateFunction(tpl)) {
-            return tpl(__assign(__assign({}, this._config), { cancelText: cancelText, cancelButtonClass: this._config.cancelButtonClass }));
-        }
-        else if (typeof tpl === 'string') {
-            return 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 (isTemplateFunction(tpl)) {
-            return tpl(__assign(__assign({}, this._config), { confirmButton: confirmButton, cancelButton: cancelButton }));
-        }
-        else if (typeof tpl === 'string') {
-            return 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 (isTemplateFunction(tpl)) {
-            return tpl(__assign({}, this._config));
-        }
-        else if (typeof tpl === 'string') {
-            return 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 = getTemplateStrings(options);
-        // Helper to resolve template (string or function)
-        function resolveTemplate(tpl, data) {
-            if (typeof tpl === 'function')
-                return tpl(data);
-            return tpl ? 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 = renderOptions(inputOptions.map(function (opt) { return (__assign(__assign({}, opt), { inputValue: inputValue_1 })); }), 'option', templates);
-                    }
-                    break;
-                case 'radio':
-                    tplKey = 'inputRadio';
-                    if (inputOptions.length > 0) {
-                        optionsHtml = renderOptions(inputOptions.map(function (opt) { return (__assign(__assign({}, opt), { inputValue: inputValue_1 })); }), 'radioOption', templates);
-                    }
-                    break;
-                case 'checkbox':
-                    tplKey = 'inputCheckbox';
-                    if (inputOptions.length > 0) {
-                        optionsHtml = 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 = 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;
-}(KTComponent));
-export { KTAlert };
-//# sourceMappingURL=alert.js.map