@type-dom/ui 0.0.4 → 0.0.6

package/src/components/feedback/td-message-box/td-message-box.class.js

@@ -0,0 +1,531 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdMessageBox = void 0;
+const utils_1 = require("@type-dom/utils");
+const framework_1 = require("@type-dom/framework");
+const svgs_1 = require("@type-dom/svgs");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_button_class_1 = require("../../basic/td-button/td-button.class");
+const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
+const td_input_class_1 = require("../../form/td-input/td-input.class");
+const td_overlay_class_1 = require("../td-overlay/td-overlay.class");
+const td_message_box_style_1 = require("./td-message-box.style");
+class TdMessageBox extends ui_abstract_1.UI {
+    constructor(params) {
+        var _a, _b;
+        super(params, 'fragment');
+        this.handleInputEnter = (e) => {
+            if (this.state.inputType !== 'textarea') {
+                e.preventDefault();
+                return this.handleAction('confirm');
+            }
+        };
+        this.className = 'TdMessageBox';
+        (0, td_message_box_style_1.useStyle)(params);
+        // const zIndex = useZIndex();
+        this.visible = true;
+        // s represents state
+        this.state = {
+            // autofocus element when open message-box
+            autofocus: true,
+            beforeClose: undefined,
+            callback: undefined,
+            cancelButtonText: '',
+            cancelButtonClass: '',
+            confirmButtonText: '',
+            confirmButtonClass: '',
+            customClass: '',
+            customStyle: {},
+            dangerouslyUseHTMLString: false,
+            distinguishCancelAndClose: false,
+            icon: undefined,
+            inputPattern: undefined,
+            inputPlaceholder: '',
+            inputType: 'text',
+            inputValue: undefined, // null
+            inputValidator: undefined,
+            inputErrorMessage: '',
+            message: undefined,
+            modalFade: true,
+            modalClass: '',
+            showCancelButton: false,
+            showConfirmButton: true,
+            type: '',
+            title: undefined,
+            showInput: false,
+            action: '',
+            confirmButtonLoading: false,
+            cancelButtonLoading: false,
+            // confirmButtonLoadingIcon: markRaw(Loading),
+            // cancelButtonLoadingIcon: markRaw(Loading),
+            confirmButtonDisabled: false,
+            editorErrorMessage: '',
+            // refer to: https://github.com/ElemeFE/element/commit/2999279ae34ef10c373ca795c87b020ed6753eed
+            // seemed ok for now without this state.
+            isOnComposition: false, // temporary remove
+            validateError: false,
+            zIndex: 2000, // todo nextZIndex(),
+        };
+        // Object.assign(this.state, params); // todo this.state params 关系？？？
+        this.to = this.getAppendToElement(params);
+        this.transition = new framework_1.Transition({
+            name: 'fade-in-linear',
+            emits: {
+                afterLeave: () => {
+                    // params?.emits?.vanish?.();
+                    this.emit('vanish');
+                },
+            },
+        });
+        this.addChild(this.transition);
+        this.overlay = new td_overlay_class_1.TdOverlay({
+            name: 'overlay',
+            // styleObj: $messageBoxStyle,
+        });
+        this.overlayEvent = (0, framework_1.useSameTarget)(this.handleWrapperClick);
+        this.transition.slotNode.addSlot(this.overlay);
+        this.dialog = new framework_1.Div({
+            name: 'message-box-overlay',
+            attrObj: {
+                role: 'dialog',
+                'aria-modal': 'true',
+                'aria-label': 'dialog',
+                'aria-describedby': 'message-box-container',
+                'aria-labelledby': 'message-box-title',
+            },
+            styleObj: Object.assign(Object.assign({}, td_message_box_style_1.$messageBoxOverlayStyle), { display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }),
+            events: {
+                click: (evt) => this.overlayEvent.onClick(evt),
+                keydown: (evt) => this.overlayEvent.onMousedown(evt),
+                mouseup: (evt) => {
+                    this.overlayEvent.onMouseup(evt);
+                },
+            },
+        });
+        this.overlay.addSlot(this.dialog);
+        this.messageBox = new framework_1.Div({
+            name: 'message-box',
+            attrObj: {
+                tabindex: '-1',
+            },
+            styleObj: td_message_box_style_1.$messageBoxStyle,
+            events: {
+                click: (evt) => {
+                    evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+                },
+            },
+        });
+        this.dialog.addChild(this.messageBox);
+        let iconComponent;
+        if (params === null || params === void 0 ? void 0 : params.icon) {
+            iconComponent = params.icon;
+        }
+        else if ((params === null || params === void 0 ? void 0 : params.type) && svgs_1.TypeComponentsMap[params.type]) {
+            iconComponent = new svgs_1.TypeComponentsMap[params.type]();
+        }
+        if (params === null || params === void 0 ? void 0 : params.title) {
+            this.header = new framework_1.Div({
+                name: 'header',
+                styleObj: td_message_box_style_1.$messageBoxHeaderStyle,
+            });
+            this.messageBox.addChild(this.header);
+            this.title = new framework_1.Div({
+                name: 'title',
+                styleObj: td_message_box_style_1.$messageBoxTitleStyle,
+            });
+            this.header.addChild(this.title);
+            if (iconComponent && params.center) {
+                this.title.addChild(new td_icon_class_1.TdIcon({
+                    name: 'icon',
+                    styleObj: td_message_box_style_1.$messageBoxStatusStyle,
+                    svgObj: iconComponent,
+                }));
+            }
+            this.title.addChild(new framework_1.TextNode(params.title));
+            if (params.showClose !== false) {
+                (_a = this.header) === null || _a === void 0 ? void 0 : _a.addChild(new td_button_class_1.TdButton({
+                    styleObj: td_message_box_style_1.$messageBoxHeaderBtnStyle,
+                    svgObj: new svgs_1.ElCloseSvg(),
+                    events: {
+                        click: () => {
+                            this.handleClose();
+                        },
+                        keydown: (evt) => {
+                            evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+                            if (evt.key === 'Enter') {
+                                this.handleClose();
+                            }
+                        },
+                    },
+                    slots: {
+                        icon: new svgs_1.ElCloseSvg(),
+                    },
+                    // childNodes: [
+                    //   new TdIcon({
+                    //     name: 'close',
+                    //     styleObj: $messageBoxHeaderCloseStyle,
+                    //     svgObj: new ElCloseSvg(),
+                    //   })
+                    // ]
+                }));
+            }
+        }
+        this.content = new framework_1.Div({
+            name: 'content',
+            styleObj: td_message_box_style_1.$messageBoxContentStyle,
+        });
+        this.messageBox.addChild(this.content);
+        this.container = new framework_1.Div({
+            name: 'message-box-container',
+            styleObj: td_message_box_style_1.$messageBoxContainerStyle,
+        });
+        const hasMessage = !!(params === null || params === void 0 ? void 0 : params.message);
+        if (iconComponent && !(params === null || params === void 0 ? void 0 : params.center) && hasMessage) {
+            this.container.addChild(new td_icon_class_1.TdIcon({
+                name: 'status',
+                styleObj: td_message_box_style_1.$messageBoxStatusStyle,
+                svgObj: iconComponent,
+            }));
+        }
+        if (hasMessage) {
+            this.msgDiv = new framework_1.Div({
+                name: 'message',
+            });
+            this.container.addChild(this.msgDiv);
+            this.msgDiv.addChild(this.getSlotNode());
+            if (params === null || params === void 0 ? void 0 : params.slot) {
+            }
+            else {
+                if (!(params === null || params === void 0 ? void 0 : params.dangerouslyUseHTMLString)) {
+                    if (params === null || params === void 0 ? void 0 : params.showInput) {
+                        if (typeof (params === null || params === void 0 ? void 0 : params.message) === 'string') {
+                            this.getSlotNode().resetSlot(new framework_1.Label({
+                                name: 'label',
+                                text: params.message || '',
+                            }));
+                        }
+                        else if (params.message instanceof framework_1.TypeElement) {
+                            this.getSlotNode().resetSlot(new framework_1.Label({
+                                name: 'label',
+                                childNodes: [params.message],
+                            }));
+                        }
+                        else {
+                            console.warn('message must be a string or a TypeElement');
+                        }
+                    }
+                    else {
+                        if (typeof (params === null || params === void 0 ? void 0 : params.message) === 'string') {
+                            this.getSlotNode().resetSlot(new framework_1.P({
+                                name: 'paragraph',
+                                text: params.message || '',
+                            }));
+                        }
+                        else if ((params === null || params === void 0 ? void 0 : params.message) instanceof framework_1.TypeElement) {
+                            this.getSlotNode().resetSlot(new framework_1.P({
+                                name: 'paragraph',
+                                childNodes: [params.message],
+                            }));
+                        }
+                        else {
+                            console.warn('message must be a string or a TypeElement');
+                        }
+                    }
+                }
+                else {
+                    if (typeof params.message === 'string') {
+                        const parser = new framework_1.Parser();
+                        const element = parser.parseFromString(params.message);
+                        if (params === null || params === void 0 ? void 0 : params.showInput) {
+                            this.getSlotNode().resetSlot(new framework_1.Label({
+                                name: 'label',
+                                childNodes: [element],
+                            }));
+                        }
+                        else {
+                            this.getSlotNode().resetSlot(new framework_1.P({
+                                name: 'paragraph',
+                                childNodes: [element],
+                            }));
+                        }
+                    }
+                    else {
+                        console.warn('message must be a string');
+                    }
+                }
+            }
+        }
+        this.content.addChild(this.container);
+        if (params === null || params === void 0 ? void 0 : params.showInput) {
+            this.input = new td_input_class_1.TdInput({
+                // id: params.inputId,
+                type: params.inputType || 'text',
+                placeholder: params.inputPlaceholder,
+                // ariaInvalid: this.state.validateError,
+                events: {
+                    keydown: (evt) => {
+                        if (evt.key === 'Enter') {
+                            this.handleInputEnter(evt);
+                        }
+                    },
+                },
+            });
+            this.errorMsg = new framework_1.Div({
+                name: 'error-message',
+                styleObj: Object.assign({}, td_message_box_style_1.$messageBoxErrorMsgStyle),
+                childNodes: [new framework_1.TextNode(this.state.editorErrorMessage)],
+            });
+            this.errorMsg.textNode = this.errorMsg.childNodes[0];
+            this.inputDiv = new framework_1.Div({
+                name: 'input-div',
+                styleObj: td_message_box_style_1.$messageBoxInputStyle,
+                childNodes: [this.input, this.errorMsg],
+            });
+            this.content.addChild(this.inputDiv);
+        }
+        this.btns = new framework_1.Div({
+            name: 'btns',
+            styleObj: td_message_box_style_1.$messageBoxBtnsStyle,
+        });
+        this.messageBox.addChild(this.btns);
+        if (params === null || params === void 0 ? void 0 : params.showCancelButton) {
+            this.cancelBtn = new td_button_class_1.TdButton({
+                name: 'cancel-btn',
+                // size: params.btnSize,
+                // loading: params.cancelButtonLoading,
+                loadingIcon: params.cancelButtonLoadingIcon,
+                slot: params.cancelButtonText || 'Cancel',
+                round: params.roundButton,
+                // styleObj: $messageBoxCancelBtnStyle,
+                events: {
+                // click: () => { // todo
+                //   console.log('this.cancelBtn click . ');
+                //   this.handleAction('cancel');
+                // },
+                // keydown: (evt) => {
+                //   evt?.preventDefault();
+                //   if ((evt as KeyboardEvent).key === 'Enter') {
+                //     this.handleAction('cancel');
+                //   }
+                // }
+                },
+            });
+            this.btns.addChild(this.cancelBtn);
+        }
+        this.confirmBtn = new td_button_class_1.TdButton({
+            name: 'confirm-btn',
+            type: 'primary',
+            // loading: params.confirmButtonLoading,
+            loadingIcon: params === null || params === void 0 ? void 0 : params.confirmButtonLoadingIcon,
+            slot: (params === null || params === void 0 ? void 0 : params.confirmButtonText) || 'OK',
+            round: params === null || params === void 0 ? void 0 : params.roundButton,
+            // styleObj: $messageBoxConfirmBtnStyle,
+            styleObj: {
+                marginLeft: '12px',
+            },
+            events: {
+                click: () => {
+                    this.handleAction('confirm');
+                },
+                keydown: (evt) => {
+                    evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+                    if (evt.key === 'Enter') {
+                        this.handleAction('confirm');
+                    }
+                },
+            },
+        });
+        this.btns.addChild(this.confirmBtn);
+        this.props = this.setParams(params);
+        const draggable = params === null || params === void 0 ? void 0 : params.draggable;
+        const overflow = params === null || params === void 0 ? void 0 : params.overflow;
+        const { onDraggable, offDraggable } = (0, framework_1.useDraggable)(this.messageBox.dom, (_b = this.header) === null || _b === void 0 ? void 0 : _b.dom, draggable, overflow);
+        this.onDraggable = onDraggable;
+        this.offDraggable = offDraggable;
+        this.mount(this.to);
+    }
+    mounted() {
+        var _a;
+        if (this.props.draggable) {
+            (_a = this.onDraggable) === null || _a === void 0 ? void 0 : _a.call(this);
+        }
+        else {
+            this.offDraggable();
+        }
+    }
+    beforeDestroy() {
+        this.offDraggable();
+    }
+    // onMounted(() => {
+    //     watchEffect(() => {
+    //       if (draggable.value) {
+    //         onDraggable()
+    //       } else {
+    //         offDraggable()
+    //       }
+    //     })
+    //   })
+    //
+    //   onBeforeUnmount(() => {
+    //     offDraggable()
+    //   })
+    // 用 callback
+    static alert(message, title, params) {
+        new TdMessageBox(Object.assign({ boxType: 'alert', message,
+            title }, params));
+    }
+    static confirm(message, title, params) {
+        return new TdMessageBox(Object.assign({ boxType: 'confirm', message,
+            title, showCancelButton: true }, params)).promise();
+    }
+    static prompt(message, title, params) {
+        var _a;
+        const msg = new TdMessageBox(Object.assign({ boxType: 'prompt', message,
+            title, showCancelButton: true, showInput: true }, params));
+        const value = (_a = msg.input) === null || _a === void 0 ? void 0 : _a.value;
+        return msg.promise(value); // todo why not  prompt
+    }
+    promise(value) {
+        return new Promise((resolve, reject) => {
+            var _a;
+            this.confirmBtn.addEvent('click', this.confirmBtn.dom, () => {
+                console.log('confirm . then resolve . ');
+                resolve({ action: 'confirm', value });
+            });
+            if ((_a = this.cancelBtn) === null || _a === void 0 ? void 0 : _a.dom) {
+                console.log('this.cancelBtn.subscriptions is ', this.cancelBtn.subscriptions);
+                // this.cancelBtn.removeEvent('click', this.cancelBtn.dom);
+                this.cancelBtn.addEvents({
+                    click: () => {
+                        // todo
+                        console.log('this.cancelBtn click . ');
+                        this.handleAction('cancel');
+                        resolve({ action: 'cancel' }); // todo why must add catch(...)  .otherwise it will not be resolved
+                    },
+                    keydown: (evt) => {
+                        evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+                        if (evt.key === 'Enter') {
+                            this.handleAction('cancel');
+                            resolve({ action: 'cancel' });
+                        }
+                    },
+                });
+            }
+        });
+    }
+    doClose() {
+        console.log('doClose . ');
+        if (!this.visible)
+            return;
+        this.visible = false;
+        this.messageBox.ctrl.hide();
+        (0, framework_1.nextTick)(() => {
+            if (this.state.action) {
+                this.emit('action', this.state.action);
+                // this.props.emits?.action?.(this.state.action);
+                this.destroy();
+            }
+        });
+    }
+    handleWrapperClick() {
+        if (this.props.closeOnClickModal) {
+            this.handleAction(this.state.distinguishCancelAndClose ? 'close' : 'cancel');
+        }
+    }
+    handleAction(action) {
+        var _a, _b, _c, _d;
+        console.log('handleAction', action);
+        if (this.props.boxType === 'prompt' &&
+            action === 'confirm' &&
+            !this.validate()) {
+            return;
+        }
+        (_b = (_a = this.props).callback) === null || _b === void 0 ? void 0 : _b.call(_a, action);
+        this.state.action = action;
+        if (this.state.beforeClose) {
+            (_d = (_c = this.state).beforeClose) === null || _d === void 0 ? void 0 : _d.call(_c, action, this.state, this.doClose);
+        }
+        else {
+            this.doClose();
+        }
+    }
+    validate() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        if (this.props.boxType === 'prompt') {
+            console.log('validate . ');
+            const inputPattern = this.props.inputPattern;
+            if (inputPattern && !inputPattern.test(((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) || '')) {
+                this.state.editorErrorMessage = this.props.inputErrorMessage; // || t('el.messagebox.error') todo t 是国际化翻译的全局方法
+                this.state.validateError = true;
+                (_b = this.errorMsg) === null || _b === void 0 ? void 0 : _b.ctrl.setStyleObj({
+                    visibility: this.state.editorErrorMessage ? 'visible' : 'hidden',
+                });
+                (_d = (_c = this.errorMsg) === null || _c === void 0 ? void 0 : _c.textNode) === null || _d === void 0 ? void 0 : _d.setText(this.state.editorErrorMessage || '');
+                return false;
+            }
+            const inputValidator = this.state.inputValidator;
+            if (typeof inputValidator === 'function') {
+                const validateResult = inputValidator((_e = this.input) === null || _e === void 0 ? void 0 : _e.value);
+                if (validateResult === false) {
+                    this.state.editorErrorMessage = this.props.inputErrorMessage; // || t('el.messagebox.error')
+                    this.state.validateError = true;
+                    (_f = this.errorMsg) === null || _f === void 0 ? void 0 : _f.ctrl.setStyleObj({
+                        visibility: this.state.editorErrorMessage ? 'visible' : 'hidden',
+                    });
+                    (_h = (_g = this.errorMsg) === null || _g === void 0 ? void 0 : _g.textNode) === null || _h === void 0 ? void 0 : _h.setText(this.state.editorErrorMessage || '');
+                    return false;
+                }
+                if (typeof validateResult === 'string') {
+                    this.state.editorErrorMessage = validateResult;
+                    this.state.validateError = true;
+                    (_j = this.errorMsg) === null || _j === void 0 ? void 0 : _j.ctrl.setStyleObj({
+                        visibility: this.state.editorErrorMessage ? 'visible' : 'hidden',
+                    });
+                    (_l = (_k = this.errorMsg) === null || _k === void 0 ? void 0 : _k.textNode) === null || _l === void 0 ? void 0 : _l.setText(this.state.editorErrorMessage || '');
+                    return false;
+                }
+            }
+        }
+        this.state.editorErrorMessage = '';
+        this.state.validateError = false;
+        return true;
+    }
+    getInputElement() {
+        var _a;
+        // const inputRefs = this.input;
+        // return (inputRefs?.input || inputRefs?.textarea) as HTMLElement
+        return (_a = this.input) === null || _a === void 0 ? void 0 : _a.panel.inner.dom;
+    }
+    handleClose() {
+        this.handleAction('close');
+    }
+    // when close on press escape is disabled, pressing esc should not callout
+    // any other message box and close any other dialog-ish elements
+    // e.g. Dialog has a close on press esc feature, and when it closes, it calls
+    // props.beforeClose method to make a intermediate state by callout a message box
+    // for some verification or alerting. then if we allow global event liek this
+    // to dispatch, it could callout another message box.
+    onCloseRequested() {
+        if (this.props.closeOnPressEscape) {
+            this.handleClose();
+        }
+    }
+    getAppendToElement(props) {
+        let appendTo = document.body;
+        if (props === null || props === void 0 ? void 0 : props.appendTo) {
+            if ((0, utils_1.isString)(props.appendTo)) {
+                appendTo = document.querySelector(props.appendTo);
+            }
+            if ((0, utils_1.isElement)(props.appendTo)) {
+                appendTo = props.appendTo;
+            }
+            // should fallback to default value with a warning
+            if (!(0, utils_1.isElement)(appendTo)) {
+                console.warn('MessageBox', 'the appendTo option is not an HTMLElement. Falling back to document.body.');
+                appendTo = document.body;
+            }
+        }
+        return appendTo;
+    }
+}
+exports.TdMessageBox = TdMessageBox;

package/src/components/feedback/td-message-box/td-message-box.interface.d.ts

@@ -0,0 +1,142 @@
+import { InputEnum, TypeElement, TypeSvgSvg } from '@type-dom/framework';
+import { IStyle } from '@type-dom/css-type';
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ISize } from '../../../styles/size';
+export interface ITdMessageBox extends IUI {
+    className: 'TdMessageBox';
+}
+type MessageType = '' | 'success' | 'warning' | 'info' | 'error';
+export type IMessageBoxType = '' | 'prompt' | 'alert' | 'confirm';
+export type MessageBoxData = IMessageBoxInputData & IAction;
+export type IAction = 'confirm' | 'close' | 'cancel';
+export interface IMessageBoxInputData {
+    value?: string;
+    action?: IAction;
+}
+export interface MessageBoxInputValidator {
+    (value?: string): boolean | string;
+}
+export declare interface IMessageBoxState {
+    autofocus?: boolean;
+    title?: string;
+    message?: string;
+    type?: MessageType;
+    icon?: TypeSvgSvg;
+    customClass?: string;
+    customStyle?: IStyle;
+    showInput?: boolean;
+    inputValue?: string;
+    inputPlaceholder?: string;
+    inputType?: string;
+    inputPattern?: RegExp;
+    inputValidator?: MessageBoxInputValidator;
+    inputErrorMessage?: string;
+    showConfirmButton?: boolean;
+    showCancelButton?: boolean;
+    action?: IAction;
+    dangerouslyUseHTMLString?: boolean;
+    confirmButtonText?: string;
+    cancelButtonText?: string;
+    confirmButtonLoading?: boolean;
+    cancelButtonLoading?: boolean;
+    confirmButtonLoadingIcon?: TypeSvgSvg;
+    cancelButtonLoadingIcon?: TypeSvgSvg;
+    confirmButtonClass?: string;
+    confirmButtonDisabled?: boolean;
+    cancelButtonClass?: string;
+    editorErrorMessage?: string;
+    beforeClose?: (action: IAction, instance: IMessageBoxState, done: () => void) => void;
+    callback?: Callback;
+    distinguishCancelAndClose?: boolean;
+    modalFade?: boolean;
+    modalClass?: string;
+    isOnComposition?: false;
+    validateError?: boolean;
+    zIndex?: number;
+}
+export type Callback = ((value: string, action?: IAction) => any) | ((action: IAction) => any);
+export interface ITdMessageBoxConfig extends IUIConfig {
+    /**
+     * auto focus when open message-box
+     */
+    autofocus?: boolean;
+    /** Callback before MessageBox closes, and it will prevent MessageBox from closing */
+    beforeClose?: (action: IAction, instance: IMessageBoxState, done: () => void) => void;
+    /** Custom class name for MessageBox */
+    customClass?: string;
+    /** Custom inline style for MessageBox */
+    customStyle?: IStyle;
+    /** MessageBox closing callback if you don't prefer Promise */
+    callback?: Callback;
+    /** Text content of cancel button */
+    cancelButtonText?: string;
+    /** Text content of confirm button */
+    confirmButtonText?: string;
+    /** Loading Icon content of cancel button */
+    cancelButtonLoadingIcon?: TypeSvgSvg;
+    /** Loading Icon content of confirm button */
+    confirmButtonLoadingIcon?: TypeSvgSvg;
+    /** Custom class name of cancel button */
+    cancelButtonClass?: string;
+    /** Custom class name of confirm button */
+    confirmButtonClass?: string;
+    /** Whether to align the content in center */
+    center?: boolean;
+    /** Whether MessageBox can be drag */
+    draggable?: boolean;
+    /** Draggable MessageBox can overflow the viewport */
+    overflow?: boolean;
+    /** Content of the MessageBox */
+    message?: string | TypeElement | (() => TypeElement);
+    /** Title of the MessageBox */
+    title?: string;
+    /** Message type, used for icon display */
+    type?: MessageType;
+    /** Message box type */
+    boxType?: IMessageBoxType;
+    /** Custom icon component */
+    icon?: TypeSvgSvg;
+    /** Whether message is treated as HTML string */
+    dangerouslyUseHTMLString?: boolean;
+    /** Whether to distinguish canceling and closing */
+    distinguishCancelAndClose?: boolean;
+    /** Whether to lock body scroll when MessageBox prompts */
+    lockScroll?: boolean;
+    /** Whether to show a cancel button */
+    showCancelButton?: boolean;
+    /** Whether to show a confirm button */
+    showConfirmButton?: boolean;
+    /** Whether to show a close button */
+    showClose?: boolean;
+    /** Whether to use round button */
+    roundButton?: boolean;
+    /** Whether MessageBox can be closed by clicking the mask */
+    closeOnClickModal?: boolean;
+    /** Whether MessageBox can be closed by pressing the ESC */
+    closeOnPressEscape?: boolean;
+    /** Whether to close MessageBox when hash changes */
+    closeOnHashChange?: boolean;
+    /** Whether to show an input */
+    showInput?: boolean;
+    /** Placeholder of input */
+    inputPlaceholder?: string;
+    /** Initial value of input */
+    inputValue?: string;
+    /** Regexp for the input */
+    inputPattern?: RegExp;
+    /** Input Type: text, textArea, password or number */
+    inputType?: keyof typeof InputEnum | 'textarea';
+    /** Validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage */
+    inputValidator?: MessageBoxInputValidator;
+    /** Error message when validation fails */
+    inputErrorMessage?: string;
+    /** Custom size of confirm and cancel buttons */
+    buttonSize?: ISize;
+    /** Custom element to append the message box to */
+    appendTo?: HTMLElement | string;
+    emits?: {
+        vanish?: (action?: IAction, instance?: IMessageBoxState, done?: () => void) => void;
+        action?: (action?: IAction) => void;
+    };
+}
+export {};

package/src/components/feedback/td-message-box/td-message-box.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });