@type-dom/ui 0.0.3 → 0.0.5

package/src/components/feedback/td-dialog/td-dialog.style.d.ts

@@ -0,0 +1,20 @@
+import { IStyle } from '@type-dom/css-type';
+export declare const $dialog: {
+    width: string;
+    marginTop: string;
+    bgColor: string;
+    boxShadow: string;
+    titleFontSize: string;
+    contentFontSize: string;
+    fontLineHeight: string;
+    paddingPrimary: string;
+    borderRadius: string;
+};
+export declare const $dialogStyle: IStyle;
+export declare const $dialogHeaderStyle: IStyle;
+export declare const $dialogHeaderCloseStyle: IStyle;
+export declare const $dialogHeaderBtn: IStyle;
+export declare const $dialogTitleStyle: IStyle;
+export declare const $dialogBodyStyle: IStyle;
+export declare const $dialogFooterStyle: IStyle;
+export declare const $dialogOverlayStyle: IStyle;

package/src/components/feedback/td-dialog/td-dialog.style.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$dialogOverlayStyle = exports.$dialogFooterStyle = exports.$dialogBodyStyle = exports.$dialogTitleStyle = exports.$dialogHeaderBtn = exports.$dialogHeaderCloseStyle = exports.$dialogHeaderStyle = exports.$dialogStyle = exports.$dialog = void 0;
+const var_1 = require("../../../styles/var");
+const td_message_style_1 = require("../td-message/td-message.style");
+exports.$dialog = {
+    width: '50%',
+    marginTop: '15vh',
+    // bgColor: getCssVar('bg-color'),
+    bgColor: var_1.$bgColor.default,
+    // boxShadow: getCssVar('box-shadow'),
+    boxShadow: var_1.$boxShadow.default,
+    // titleFontSize: getCssVar('font-size-large'),
+    titleFontSize: var_1.$fontSizes.large,
+    contentFontSize: '14px',
+    // fontLineHeight: getCssVar('font-line-height-primary'),
+    fontLineHeight: var_1.$fontLineHeightPrimary,
+    paddingPrimary: '16px',
+    // borderRadius: getCssVar('border-radius-small'),
+    borderRadius: var_1.$borderRadius.small,
+};
+exports.$dialogStyle = {
+    position: 'relative',
+    // margin: var(#{getCssVarName('dialog-margin-top')}, 15vh) auto 50px,
+    margin: exports.$dialog.marginTop + ' auto 50px',
+    // background: getCssVar('dialog', 'bg-color'),
+    background: exports.$dialog.bgColor,
+    // borderRadius: getCssVar('dialog', 'border-radius'),
+    borderRadius: exports.$dialog.borderRadius,
+    // boxShadow: getCssVar('dialog', 'box-shadow'),
+    boxShadow: exports.$dialog.boxShadow,
+    boxSizing: 'border-box',
+    // padding: getCssVar('dialog', 'padding-primary'),
+    padding: exports.$dialog.paddingPrimary,
+    // width: var(#{getCssVarName('dialog-width')}, 50%),
+    width: exports.$dialog.width,
+    overflowWrap: 'break-word',
+};
+exports.$dialogHeaderStyle = {
+    paddingBottom: exports.$dialog.paddingPrimary,
+};
+exports.$dialogHeaderCloseStyle = {
+    paddingRight: 'calc(' + exports.$dialog.paddingPrimary + ' + ' + td_message_style_1.$message.closeSize + ')',
+};
+exports.$dialogHeaderBtn = {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    padding: 0,
+    width: '48px',
+    height: '48px',
+    background: 'transparent',
+    border: 'none',
+    outline: 'none',
+    cursor: 'pointer',
+    //   font-size: var(
+    //   #{getCssVarName('message-close-size')},
+    //   map.get($message, 'close-size')
+    // );
+    fontSize: td_message_style_1.$message.closeSize,
+};
+exports.$dialogTitleStyle = {
+    // lineHeight: getCssVar('dialog-font-line-height'),
+    lineHeight: exports.$dialog.fontLineHeight,
+    // fontSize: getCssVar('dialog-title-font-size'),
+    fontSize: exports.$dialog.titleFontSize,
+    // color: getCssVar('text-color', 'primary'),
+    color: var_1.$textColor.primary,
+};
+exports.$dialogBodyStyle = {
+    // color: getCssVar('text-color', 'regular'),
+    color: var_1.$textColor.regular,
+    // font-size: getCssVar('dialog-content-font-size'),
+    fontSize: exports.$dialog.contentFontSize,
+};
+exports.$dialogFooterStyle = {
+    paddingTop: exports.$dialog.paddingPrimary,
+    // padding-top: getCssVar('dialog', 'padding-primary'),
+    textAlign: 'right',
+    boxSizing: 'border-box',
+};
+exports.$dialogOverlayStyle = {
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    overflow: 'auto',
+};

package/src/components/feedback/td-dialog-content/td-dialog-content.class.d.ts

@@ -0,0 +1,12 @@
+import { Div, Footer, Header } from '@type-dom/framework';
+import { UI } from '../../../ui/ui.abstract';
+import { ITdDialogConfig } from '../td-dialog/td-dialog.interface';
+import { ITdDialogContent } from './td-dialog-content.interface';
+export declare class TdDialogContent extends UI implements ITdDialogContent {
+    className: 'TdDialogContent';
+    props: ITdDialogConfig;
+    header?: Header;
+    body: Div;
+    footer?: Footer;
+    constructor(params?: ITdDialogConfig);
+}

package/src/components/feedback/td-dialog-content/td-dialog-content.class.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdDialogContent = void 0;
+const framework_1 = require("@type-dom/framework");
+const svgs_1 = require("@type-dom/svgs");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
+const td_dialog_style_1 = require("../td-dialog/td-dialog.style");
+class TdDialogContent extends ui_abstract_1.UI {
+    constructor(params) {
+        var _a, _b, _c;
+        super(params);
+        this.className = 'TdDialogContent';
+        this.ctrl.addStyleObj(td_dialog_style_1.$dialogStyle);
+        this.header = new framework_1.Header({
+            className: 'td-dialog-content',
+            styleObj: td_dialog_style_1.$dialogHeaderStyle,
+        });
+        if (params === null || params === void 0 ? void 0 : params.width) {
+            this.ctrl.addStyleObj({
+                width: params.width,
+            });
+        }
+        this.header.addChild(this.getSlotNode('header'));
+        if ((_a = params === null || params === void 0 ? void 0 : params.slots) === null || _a === void 0 ? void 0 : _a.header) {
+        }
+        else {
+            const header = new framework_1.Span({
+                text: params === null || params === void 0 ? void 0 : params.title,
+                attrObj: {
+                    role: 'heading'
+                },
+                styleObj: td_dialog_style_1.$dialogTitleStyle,
+            });
+            this.getSlotNode('header').addSlot(header);
+        }
+        const showClose = (_b = params === null || params === void 0 ? void 0 : params.showClose) !== null && _b !== void 0 ? _b : true;
+        const closeIcon = (params === null || params === void 0 ? void 0 : params.closeIcon) ? params.closeIcon : new td_icon_class_1.TdIcon({
+            className: 'td-dialog-close-icon',
+            svgObj: new svgs_1.ElCloseSvg(),
+        });
+        if (showClose) {
+            this.header.ctrl.addStyleObj(td_dialog_style_1.$dialogHeaderCloseStyle);
+            this.header.addChild(new framework_1.Button({
+                className: 'td-dialog-close',
+                attrObj: {
+                    type: 'button',
+                    ariaLabel: 'Close'
+                },
+                styleObj: td_dialog_style_1.$dialogHeaderBtn,
+                childNodes: [
+                    closeIcon
+                ],
+                events: {
+                    click: (evt, element) => {
+                        var _a;
+                        (_a = element === null || element === void 0 ? void 0 : element.up('TdDialog')) === null || _a === void 0 ? void 0 : _a.handleClose();
+                    }
+                }
+            }));
+        }
+        this.body = new framework_1.Div({
+            name: 'td-dialog-body',
+            styleObj: td_dialog_style_1.$dialogBodyStyle
+        });
+        this.body.addChild(this.getSlotNode());
+        this.addChildren(this.header, this.body);
+        if ((_c = params === null || params === void 0 ? void 0 : params.slots) === null || _c === void 0 ? void 0 : _c.footer) {
+            this.footer = new framework_1.Footer({
+                name: 'td-dialog-footer',
+                styleObj: td_dialog_style_1.$dialogFooterStyle,
+            });
+            this.footer.addChild(this.getSlotNode('footer'));
+            this.addChild(this.footer);
+        }
+        this.props = this.setParams(params);
+    }
+}
+exports.TdDialogContent = TdDialogContent;

package/src/components/feedback/td-dialog-content/td-dialog-content.interface.d.ts

@@ -0,0 +1,51 @@
+import { TypeHtml } from '@type-dom/framework';
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { TdIcon } from '../../basic/td-icon/td-icon.class';
+export interface ITdDialogContent extends IUI {
+    className: 'TdDialogContent';
+}
+export interface ITdDialogContentConfig extends IUIConfig {
+    /**
+     * @description whether to align the header and footer in center
+     */
+    center?: boolean;
+    /**
+     * @description whether to align the dialog both horizontally and vertically
+     */
+    alignCenter?: boolean;
+    /**
+     * @description custom close icon, default is Close
+     */
+    closeIcon?: TdIcon;
+    /**
+     * @description enable dragging feature for Dialog
+     */
+    draggable?: boolean;
+    /**
+     * @description draggable Dialog can overflow the viewport
+     */
+    overflow?: boolean;
+    /**
+     * @description whether the Dialog takes up full screen
+     */
+    fullscreen?: boolean;
+    /**
+     * @description whether to show a close button
+     *     default: true,
+     */
+    showClose?: boolean;
+    /**
+     * @description title of Dialog. Can also be passed with a named slot (see the following table)
+     *     default: '',
+     */
+    title?: string;
+    /**
+     * @description header's aria-level attribute
+     *     default: '2',
+     */
+    ariaLevel?: string;
+    slots?: {
+        header?: TypeHtml;
+        footer?: TypeHtml;
+    };
+}

package/src/components/feedback/td-dialog-content/td-dialog-content.interface.js

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

package/src/components/feedback/td-drawer/td-drawer.class.d.ts

@@ -0,0 +1,8 @@
+import { UI } from '../../../ui/ui.abstract';
+import { ITdDrawer, ITdDrawerConfig } from './td-drawer.interface';
+export declare class TdDrawer extends UI<undefined> implements ITdDrawer {
+    className: 'TdDrawer';
+    props: ITdDrawerConfig;
+    private transition;
+    constructor(params?: ITdDrawerConfig);
+}

package/src/components/feedback/td-drawer/td-drawer.class.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdDrawer = void 0;
+const framework_1 = require("@type-dom/framework");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_overlay_class_1 = require("../td-overlay/td-overlay.class");
+class TdDrawer extends ui_abstract_1.UI {
+    constructor(params) {
+        super(params, 'fragment');
+        this.className = 'TdDrawer';
+        this.transition = new framework_1.Transition({
+            name: 'fade',
+            emits: {
+                afterEnter: () => {
+                    console.log('afterEnter');
+                },
+                afterLeave: () => {
+                    console.log('afterLeave');
+                },
+                beforeEnter: () => {
+                    console.log('beforeEnter');
+                },
+            },
+            slot: new td_overlay_class_1.TdOverlay({
+                mask: params === null || params === void 0 ? void 0 : params.modal,
+                zIndex: 1000, // todo zIndex
+                events: {
+                    click: () => {
+                        //
+                        console.log('click . ');
+                    }
+                }
+            })
+        });
+        this.addChild(this.transition);
+        this.props = this.setParams(params);
+    }
+}
+exports.TdDrawer = TdDrawer;

package/src/components/feedback/td-drawer/td-drawer.interface.d.ts

@@ -0,0 +1,12 @@
+import { IUI } from '../../../ui/ui.interface';
+import { ITdDialogConfig } from '../td-dialog/td-dialog.interface';
+export interface ITdDrawer extends IUI {
+    className: 'TdDrawer';
+}
+export interface ITdDrawerConfig extends ITdDialogConfig {
+    direction: 'ltr' | 'rtl' | 'ttb' | 'btt';
+    size: string | number;
+    withHeader: boolean;
+    modalFade: boolean;
+    headerAriaLevel: string;
+}

package/src/components/feedback/td-drawer/td-drawer.interface.js

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

package/src/components/feedback/td-focus-trap/td-focus-trap.class.d.ts

@@ -1,8 +1,9 @@
 import { UI } from '../../../ui/ui.abstract';
 import { ITdFocusTrap, ITdFocusTrapConfig } from './td-focus-trap.interface';
-export declare class TdFocusTrap extends UI implements ITdFocusTrap {
+export declare class TdFocusTrap extends UI<undefined> implements ITdFocusTrap {
     className: 'TdFocusTrap';
-    config?: ITdFocusTrapConfig;
-    constructor(config?: ITdFocusTrapConfig);
+    props: ITdFocusTrapConfig;
+    inheritAttrs: boolean;
+    constructor(params?: ITdFocusTrapConfig);
     initEvents(): void;
 }

package/src/components/feedback/td-focus-trap/td-focus-trap.class.js

@@ -5,10 +5,11 @@ const ui_abstract_1 = require("../../../ui/ui.abstract");
 const aria_1 = require("../../../aria");
 const utils_1 = require("./utils");
 class TdFocusTrap extends ui_abstract_1.UI {
-    constructor(config) {
-        super();
+    constructor(params) {
+        super(params, 'fragment');
         this.className = 'TdFocusTrap';
-        this.setConfig(config);
+        this.inheritAttrs = false;
+        this.props = this.setParams(params);
     }
     initEvents() {
         const focusLayer = {
@@ -18,17 +19,16 @@ class TdFocusTrap extends ui_abstract_1.UI {
             },
             resume() {
                 this.paused = false;
-            },
+            }
         };
         const { focusReason } = (0, utils_1.useFocusReason)();
         const onKeydown = (e) => {
-            var _a, _b;
-            if (!((_a = this.config) === null || _a === void 0 ? void 0 : _a.loop) && !((_b = this.config) === null || _b === void 0 ? void 0 : _b.trapped))
+            if (!this.props.loop && !this.props.trapped)
                 return;
             if (focusLayer.paused)
                 return;
             const { key, altKey, ctrlKey, metaKey, currentTarget, shiftKey } = e;
-            const { loop } = this.config;
+            const { loop } = this.props;
             const isTabbing = key === aria_1.EVENT_CODE.tab && !altKey && !ctrlKey && !metaKey;
             const currentFocusingEl = document.activeElement;
             if (isTabbing && currentFocusingEl) {
@@ -38,7 +38,7 @@ class TdFocusTrap extends ui_abstract_1.UI {
                 if (!isTabbable) {
                     if (currentFocusingEl === container) {
                         const focusoutPreventedEvent = (0, utils_1.createFocusOutPreventedEvent)({
-                            focusReason: focusReason.value,
+                            focusReason: focusReason.value
                         });
                         // emit('focusout-prevented', focusoutPreventedEvent);
                         if (!focusoutPreventedEvent.defaultPrevented) {
@@ -49,7 +49,7 @@ class TdFocusTrap extends ui_abstract_1.UI {
                 else {
                     if (!shiftKey && currentFocusingEl === last) {
                         const focusoutPreventedEvent = (0, utils_1.createFocusOutPreventedEvent)({
-                            focusReason: focusReason.value,
+                            focusReason: focusReason.value
                         });
                         // emit('focusout-prevented', focusoutPreventedEvent);
                         if (!focusoutPreventedEvent.defaultPrevented) {
@@ -61,7 +61,7 @@ class TdFocusTrap extends ui_abstract_1.UI {
                     else if (shiftKey &&
                         [first, container].includes(currentFocusingEl)) {
                         const focusoutPreventedEvent = (0, utils_1.createFocusOutPreventedEvent)({
-                            focusReason: focusReason.value,
+                            focusReason: focusReason.value
                         });
                         // emit('focusout-prevented', focusoutPreventedEvent);
                         if (!focusoutPreventedEvent.defaultPrevented) {
@@ -74,7 +74,7 @@ class TdFocusTrap extends ui_abstract_1.UI {
             }
         };
         this.addEvents({
-            keydown: (evt) => onKeydown(evt),
+            keydown: (evt) => onKeydown(evt)
         });
     }
 }

package/src/components/feedback/td-focus-trap/td-focus-trap.interface.d.ts

@@ -1,4 +1,5 @@
 import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ON_RELEASE_FOCUS_EVT, ON_TRAP_FOCUS_EVT } from './tokens';
 export interface ITdFocusTrap extends IUI {
     className: 'TdFocusTrap';
 }
@@ -7,4 +8,12 @@ export interface ITdFocusTrapConfig extends IUIConfig {
     trapped?: boolean;
     focusTrapEl?: HTMLElement;
     focusStartEl?: 'container' | 'first' | HTMLElement;
+    emits: {
+        [ON_TRAP_FOCUS_EVT]?: () => void;
+        [ON_RELEASE_FOCUS_EVT]?: () => void;
+        focusin: () => void;
+        focusout: () => void;
+        focusoutPrevented: () => void;
+        releaseRequested: () => void;
+    };
 }

package/src/components/feedback/td-focus-trap/td-focus-trap.interface.js

@@ -1,2 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const tokens_1 = require("./tokens");

package/src/components/feedback/td-focus-trap/tokens.d.ts

@@ -5,3 +5,8 @@ export declare const FOCUS_AFTER_TRAPPED_OPTS: EventInit;
 export declare const FOCUSOUT_PREVENTED_OPTS: EventInit;
 export declare const ON_TRAP_FOCUS_EVT = "focusAfterTrapped";
 export declare const ON_RELEASE_FOCUS_EVT = "focusAfterReleased";
+export type FocusTrapInjectionContext = {
+    focusTrapRef: HTMLElement | undefined;
+    onKeydown: (e: KeyboardEvent) => void;
+};
+export declare const FOCUS_TRAP_INJECTION_KEY: unique symbol;

package/src/components/feedback/td-focus-trap/tokens.js

@@ -1,23 +1,17 @@
 "use strict";
-// import type { InjectionKey, Ref } from 'vue'
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ON_RELEASE_FOCUS_EVT = exports.ON_TRAP_FOCUS_EVT = exports.FOCUSOUT_PREVENTED_OPTS = exports.FOCUS_AFTER_TRAPPED_OPTS = exports.FOCUSOUT_PREVENTED = exports.FOCUS_AFTER_RELEASED = exports.FOCUS_AFTER_TRAPPED = void 0;
+exports.FOCUS_TRAP_INJECTION_KEY = exports.ON_RELEASE_FOCUS_EVT = exports.ON_TRAP_FOCUS_EVT = exports.FOCUSOUT_PREVENTED_OPTS = exports.FOCUS_AFTER_TRAPPED_OPTS = exports.FOCUSOUT_PREVENTED = exports.FOCUS_AFTER_RELEASED = exports.FOCUS_AFTER_TRAPPED = void 0;
 exports.FOCUS_AFTER_TRAPPED = 'focus-trap.focus-after-trapped';
 exports.FOCUS_AFTER_RELEASED = 'focus-trap.focus-after-released';
 exports.FOCUSOUT_PREVENTED = 'focus-trap.focusout-prevented';
 exports.FOCUS_AFTER_TRAPPED_OPTS = {
     cancelable: true,
-    bubbles: false,
+    bubbles: false
 };
 exports.FOCUSOUT_PREVENTED_OPTS = {
     cancelable: true,
-    bubbles: false,
+    bubbles: false
 };
 exports.ON_TRAP_FOCUS_EVT = 'focusAfterTrapped';
 exports.ON_RELEASE_FOCUS_EVT = 'focusAfterReleased';
-// export type FocusTrapInjectionContext = {
-//   focusTrapRef: Ref<HTMLElement | undefined>
-//   onKeydown: (e: KeyboardEvent) => void
-// }
-// export const FOCUS_TRAP_INJECTION_KEY: InjectionKey<FocusTrapInjectionContext> =
-//   Symbol('elFocusTrap')
+exports.FOCUS_TRAP_INJECTION_KEY = Symbol('elFocusTrap');

package/src/components/feedback/td-focus-trap/utils.js

@@ -18,7 +18,7 @@ const obtainAllFocusableElements = (element) => {
             return node.tabIndex >= 0 || node === document.activeElement
                 ? NodeFilter.FILTER_ACCEPT
                 : NodeFilter.FILTER_SKIP;
-        },
+        }
     });
     while (walker.nextNode())
         nodes.push(walker.currentNode);
@@ -97,7 +97,7 @@ const createFocusableStack = () => {
     };
     return {
         push,
-        remove,
+        remove
     };
 };
 const focusFirstDescendant = (elements, shouldSelect = false) => {
@@ -141,7 +141,7 @@ const useFocusReason = () => {
     //   }
     // })
     return {
-        focusReason,
+        focusReason
         // lastUserFocusTimestamp,
         // lastAutomatedFocusTimestamp,
     };

package/src/components/feedback/td-loading/td-loading.class.d.ts

@@ -0,0 +1,12 @@
+import { UI } from '../../../ui/ui.abstract';
+import { ITdLoading, ITdLoadingConfig } from './td-loading.interface';
+export declare class TdLoading extends UI<undefined> implements ITdLoading {
+    className: 'TdLoading';
+    props: ITdLoadingConfig;
+    private transition;
+    private mask;
+    private svg;
+    private spinner;
+    private spinnerText?;
+    constructor(params?: ITdLoadingConfig);
+}

package/src/components/feedback/td-loading/td-loading.class.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdLoading = void 0;
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const framework_1 = require("@type-dom/framework");
+const svgs_1 = require("@type-dom/svgs");
+class TdLoading extends ui_abstract_1.UI {
+    constructor(params) {
+        super(params, 'fragment');
+        this.className = 'TdLoading';
+        this.transition = new framework_1.Transition({
+            name: 'td-loading-fade',
+            emits: {
+                afterLeave: () => {
+                    console.log('afterLeave');
+                }
+            }
+        });
+        this.svg = (params === null || params === void 0 ? void 0 : params.spinner) || (params === null || params === void 0 ? void 0 : params.svg);
+        this.spinner = new svgs_1.SvgSvg({
+            name: 'spinner',
+            attrObj: {
+                viewBox: (params === null || params === void 0 ? void 0 : params.svgViewBox) ? params.svgViewBox : '0 0 50 50'
+            },
+            childNodes: [
+                new framework_1.SvgCircle({
+                    attrObj: {
+                        cx: '25',
+                        cy: '25',
+                        r: '20',
+                        fill: 'none'
+                    }
+                })
+            ]
+        });
+        if (params === null || params === void 0 ? void 0 : params.text) {
+            this.spinnerText = new framework_1.P({
+                text: params.text
+            });
+        }
+        this.mask = new framework_1.Div({
+            name: 'mask',
+            styleObj: {
+                display: (params === null || params === void 0 ? void 0 : params.visible) ? 'block' : 'none'
+            },
+            childNodes: [
+                new framework_1.Div({
+                    name: 'spinner',
+                    childNodes: (() => {
+                        if (this.spinnerText) {
+                            return [this.spinner, this.spinnerText];
+                        }
+                        else {
+                            return [this.spinner];
+                        }
+                    })()
+                })
+            ]
+        });
+        this.transition.addChild(this.mask);
+        this.addChild(this.transition);
+        this.props = this.setParams(params);
+    }
+}
+exports.TdLoading = TdLoading;

package/src/components/feedback/td-loading/td-loading.interface.d.ts

@@ -0,0 +1,37 @@
+import { TypeElement } from '@type-dom/framework';
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+export interface ITdLoading extends IUI {
+    className: 'TdLoading';
+}
+export interface ITdLoadingConfig extends IUIConfig {
+    parent?: TypeElement;
+    /**
+     * @description background color of the mask
+     */
+    background?: string;
+    svg?: string;
+    svgViewBox?: string;
+    /**
+     * @description class name of the custom spinner
+     */
+    spinner?: boolean | string;
+    /**
+     * @description loading text that displays under the spinner
+     */
+    text?: string;
+    /**
+     * @description same as the `fullscreen` modifier of `v-loading`
+     */
+    fullscreen?: boolean;
+    /**
+     * @description same as the `lock` modifier of `v-loading`
+     */
+    lock?: boolean;
+    /**
+     * @description custom class name for Loading
+     */
+    visible?: boolean;
+    target?: HTMLElement;
+    beforeClose?: () => boolean;
+    closed?: () => void;
+}

package/src/components/feedback/td-loading/td-loading.interface.js

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

package/src/components/feedback/td-message/td-message.class.d.ts

@@ -0,0 +1,24 @@
+import { UI } from '../../../ui/ui.abstract';
+import { ITdMessage, ITdMessageConfig } from './td-message.interface';
+export declare class TdMessage extends UI<undefined> implements ITdMessage {
+    className: 'TdMessage';
+    private transition;
+    private message;
+    props: ITdMessageConfig;
+    private visible?;
+    private stopTimer;
+    static msgId: number;
+    static msgList: TdMessage[];
+    private repeatNum?;
+    constructor(option?: string | ITdMessageConfig);
+    initEvents(): void;
+    mounted(): void;
+    static success(message: string): void;
+    static warning(message: string): void;
+    static error(message: string): void;
+    static info(message: string): void;
+    startTimer(): void;
+    clearTimer(): void;
+    close(): void;
+    keydown({ code }: KeyboardEvent): void;
+}