@type-dom/ui 0.0.10 → 0.1.1

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

@@ -1,10 +1,11 @@
-import { IUI } from '../../../ui/ui.interface';
-import { ITdDialogContentConfig } from '../td-dialog-content/td-dialog-content.interface';
-import { UPDATE_MODEL_EVENT } from '../../../constants/event';
-export interface ITdDialog extends IUI {
+import { ITypeElement, TypeFragmentProps } from '@type-dom/framework';
+import { DialogContentProps } from '../td-dialog-content/td-dialog-content.interface';
+export interface ITdDialog extends ITypeElement {
     className: 'TdDialog';
 }
-export interface ITdDialogConfig extends ITdDialogContentConfig {
+type DoneFn = (cancel?: boolean) => void;
+export type DialogBeforeCloseFn = (done: DoneFn) => void;
+export interface DialogProps extends TypeFragmentProps, Omit<DialogContentProps, 'nodeName' | 'slots'> {
     /**
      * @description whether to append Dialog itself to body. A nested Dialog should have this attribute set to `true`
      */
@@ -13,10 +14,11 @@ export interface ITdDialogConfig extends ITdDialogContentConfig {
      * @description which element the Dialog appends to
      *     default: 'body',
      */
-    appendTo?: HTMLElement;
+    appendTo?: string;
     /**
      * @description callback before Dialog closes, and it will prevent Dialog from closing, use done to close the dialog
      */
+    beforeClose?: DialogBeforeCloseFn;
     /**
      * @description destroy elements in Dialog when closed
      */
@@ -77,22 +79,5 @@ export interface ITdDialogConfig extends ITdDialogContentConfig {
      *     default: '2',
      */
     headerAriaLevel?: string;
-    emits?: {
-        open?: () => void;
-        opened?: () => void;
-        close?: () => void;
-        closed?: () => void;
-        [UPDATE_MODEL_EVENT]?: (value: boolean) => void;
-        openAutoFocus?: () => void;
-        closeAutoFocus?: () => void;
-    };
 }
-export declare const dialogEmits: {
-    open: () => boolean;
-    opened: () => boolean;
-    close: () => boolean;
-    closed: () => boolean;
-    "update:modelValue": (value: boolean) => boolean;
-    openAutoFocus: () => boolean;
-    closeAutoFocus: () => boolean;
-};
+export {};

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

@@ -1,14 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dialogEmits = void 0;
-const event_1 = require("../../../constants/event");
-const utils_1 = require("@type-dom/utils");
-exports.dialogEmits = {
-    open: () => true,
-    opened: () => true,
-    close: () => true,
-    closed: () => true,
-    [event_1.UPDATE_MODEL_EVENT]: (value) => (0, utils_1.isBoolean)(value),
-    openAutoFocus: () => true,
-    closeAutoFocus: () => true,
-};

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

@@ -0,0 +1,24 @@
+import { IStyle } from '@type-dom/css-type';
+import { Ref } from '@type-dom/signals';
+import { DialogProps } from './td-dialog.interface';
+export declare const useDialog: (props: DialogProps, targetRef: Ref<HTMLElement | undefined>) => {
+    afterEnter: () => void;
+    afterLeave: () => void;
+    beforeLeave: () => void;
+    handleClose: () => void;
+    onModalClick: () => void;
+    close: () => void;
+    doClose: () => void;
+    onOpenAutoFocus: () => void;
+    onCloseAutoFocus: () => void;
+    onCloseRequested: () => void;
+    onFocusoutPrevented: (event?: CustomEvent) => void;
+    titleId: import("@type-dom/signals").Computed<string>;
+    bodyId: import("@type-dom/signals").Computed<string>;
+    closed: import("@type-dom/signals").Signal<boolean>;
+    style: import("@type-dom/signals").Computed<IStyle<string | 0, string>>;
+    overlayDialogStyle: import("@type-dom/signals").Computed<IStyle<string | 0, string>>;
+    rendered: import("@type-dom/signals").Signal<boolean>;
+    visible: import("@type-dom/signals").Signal<boolean>;
+    zIndex: import("@type-dom/signals").Signal<number>;
+};

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

@@ -0,0 +1,218 @@
+"use strict";
+// import {
+//   computed,
+//   getCurrentInstance,
+//   nextTick,
+//   onMounted,
+//   ref,
+//   watch,
+// } from 'vue'
+// import { useTimeoutFn } from '@vueuse/core'
+//
+// import { isUndefined } from 'lodash-unified'
+// import {
+//   defaultNamespace,
+//   useId,
+//   useLockscreen,
+//   useZIndex,
+// } from '@element-plus/hooks'
+// import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
+// import { addUnit, isClient } from '@element-plus/utils'
+// import { useGlobalConfig } from '@element-plus/components/config-provider'
+//
+// import type { CSSProperties, Ref, SetupContext } from 'vue'
+// import type { DialogEmits, DialogProps } from './dialog'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDialog = void 0;
+const utils_1 = require("@type-dom/utils");
+const signals_1 = require("@type-dom/signals");
+const framework_1 = require("@type-dom/framework");
+const td_config_provider_1 = require("../../configuration/td-config-provider");
+const use_z_index_1 = require("../../../hooks/use-z-index");
+const use_id_1 = require("../../../hooks/use-id");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const use_lockscreen_1 = require("../../../hooks/use-lockscreen");
+const event_1 = require("../../../constants/event");
+const useDialog = (props, targetRef) => {
+    var _a;
+    const instance = (0, framework_1.getCurrentInstance)();
+    const emit = instance.emit; // as DialogEmits['emit']
+    const { nextZIndex } = (0, use_z_index_1.useZIndex)();
+    let lastPosition = '';
+    const titleId = (0, use_id_1.useId)();
+    const bodyId = (0, use_id_1.useId)();
+    const visible = (0, signals_1.signal)(false);
+    const closed = (0, signals_1.signal)(false);
+    const rendered = (0, signals_1.signal)(false); // when destroyOnClose is true, we initialize it as false vise versa
+    const zIndex = (0, signals_1.signal)((_a = props.zIndex) !== null && _a !== void 0 ? _a : nextZIndex());
+    let openTimer = undefined;
+    let closeTimer = undefined;
+    const namespace = (0, td_config_provider_1.useGlobalConfig)('namespace', use_namespace_1.defaultNamespace);
+    const style = (0, signals_1.computed)(() => {
+        const style = {};
+        const varPrefix = `--${namespace.get()}-dialog`;
+        if (!props.fullscreen) {
+            if (props.top) {
+                style[`${varPrefix}-margin-top`] = props.top;
+            }
+            if (props.width) {
+                style[`${varPrefix}-width`] = (0, utils_1.addUnit)(props.width);
+            }
+        }
+        return style;
+    });
+    const overlayDialogStyle = (0, signals_1.computed)(() => {
+        if (props.alignCenter) {
+            return { display: 'flex' };
+        }
+        return {};
+    });
+    function afterEnter() {
+        emit('opened');
+    }
+    function afterLeave() {
+        emit('closed');
+        emit(event_1.UPDATE_MODEL_EVENT, false);
+        if (props.destroyOnClose) {
+            rendered.set(false);
+        }
+    }
+    function beforeLeave() {
+        emit('close');
+    }
+    function open() {
+        closeTimer === null || closeTimer === void 0 ? void 0 : closeTimer();
+        openTimer === null || openTimer === void 0 ? void 0 : openTimer();
+        if (props.openDelay && props.openDelay > 0) {
+            ({ stop: openTimer } = (0, framework_1.useTimeoutFn)(() => doOpen(), props.openDelay));
+        }
+        else {
+            doOpen();
+        }
+    }
+    function close() {
+        openTimer === null || openTimer === void 0 ? void 0 : openTimer();
+        closeTimer === null || closeTimer === void 0 ? void 0 : closeTimer();
+        if (props.closeDelay && props.closeDelay > 0) {
+            ({ stop: closeTimer } = (0, framework_1.useTimeoutFn)(() => doClose(), props.closeDelay));
+        }
+        else {
+            doClose();
+        }
+    }
+    function handleClose() {
+        function hide(shouldCancel) {
+            if (shouldCancel)
+                return;
+            closed.set(true);
+            visible.set(false);
+        }
+        if (props.beforeClose) {
+            props.beforeClose(hide);
+        }
+        else {
+            close();
+        }
+    }
+    function onModalClick() {
+        if (props.closeOnClickModal) {
+            handleClose();
+        }
+    }
+    function doOpen() {
+        if (!utils_1.isClient)
+            return;
+        visible.set(true);
+    }
+    function doClose() {
+        visible.set(false);
+    }
+    function onOpenAutoFocus() {
+        emit('openAutoFocus');
+    }
+    function onCloseAutoFocus() {
+        emit('closeAutoFocus');
+    }
+    function onFocusoutPrevented(event) {
+        var _a;
+        if (((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.focusReason) === 'pointer') {
+            event === null || event === void 0 ? void 0 : event.preventDefault();
+        }
+    }
+    if (props.lockScroll) {
+        (0, use_lockscreen_1.useLockscreen)(visible);
+    }
+    function onCloseRequested() {
+        if (props.closeOnPressEscape) {
+            handleClose();
+        }
+    }
+    (0, signals_1.watch)(() => { var _a; return (_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get(); }, (val) => {
+        console.warn('watch vModel val is ', val);
+        if (val) {
+            closed.set(false);
+            open();
+            rendered.set(true); // enables lazy rendering
+            zIndex.set((0, utils_1.isUndefined)(props.zIndex) ? nextZIndex() : zIndex.get() + 1);
+            // this.$el.addEventListener('scroll', this.updatePopper)
+            (0, framework_1.nextTick)(() => {
+                var _a;
+                emit('open');
+                if (targetRef.get()) {
+                    if ((_a = targetRef.get()) === null || _a === void 0 ? void 0 : _a.parentElement) {
+                        targetRef.get().parentElement.scrollTop = 0;
+                        targetRef.get().parentElement.scrollLeft = 0;
+                    }
+                    targetRef.get().scrollTop = 0;
+                }
+            });
+        }
+        else {
+            // this.$el.removeEventListener('scroll', this.updatePopper
+            if (visible.get()) {
+                close();
+            }
+        }
+    });
+    (0, signals_1.watch)(() => props.fullscreen, (val) => {
+        if (!targetRef.get())
+            return;
+        if (val) {
+            lastPosition = targetRef.get().style.transform;
+            targetRef.get().style.transform = '';
+        }
+        else {
+            targetRef.get().style.transform = lastPosition;
+        }
+    });
+    (0, framework_1.onMounted)(() => {
+        var _a;
+        if ((_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get()) {
+            visible.set(true);
+            rendered.set(true); // enables lazy rendering
+            open();
+        }
+    });
+    return {
+        afterEnter,
+        afterLeave,
+        beforeLeave,
+        handleClose,
+        onModalClick,
+        close,
+        doClose,
+        onOpenAutoFocus,
+        onCloseAutoFocus,
+        onCloseRequested,
+        onFocusoutPrevented,
+        titleId,
+        bodyId,
+        closed,
+        style,
+        overlayDialogStyle,
+        rendered,
+        visible,
+        zIndex,
+    };
+};
+exports.useDialog = useDialog;

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

@@ -1,12 +1,10 @@
-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 {
+import { TypeDiv } from '@type-dom/framework';
+import { DialogProps } from '../td-dialog/td-dialog.interface';
+import { ITdDialogContent, DialogContentProps } from './td-dialog-content.interface';
+export declare class TdDialogContent extends TypeDiv implements ITdDialogContent {
     className: 'TdDialogContent';
-    props: ITdDialogConfig;
-    header?: Header;
-    body: Div;
-    footer?: Footer;
-    constructor(params?: ITdDialogConfig);
+    props: DialogContentProps;
+    resetPosition?: () => void;
+    constructor(params?: DialogProps & DialogContentProps);
+    setup(): void;
 }

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

@@ -3,77 +3,106 @@ 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 signals_1 = require("@type-dom/signals");
+const use_locale_1 = require("../../../hooks/use-locale");
+const use_draggable_1 = require("../../../hooks/use-draggable");
 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 {
+const constants_1 = require("../td-dialog/constants");
+const tokens_1 = require("../td-focus-trap/tokens");
+const td_dialog_content_const_1 = require("./td-dialog-content.const");
+const refs_1 = require("../../../utils/refs");
+class TdDialogContent extends framework_1.TypeDiv {
     constructor(params = {}) {
-        var _a, _b, _c;
-        super(params);
+        super();
         this.className = 'TdDialogContent';
-        this.style.addObj(td_dialog_style_1.$dialogStyle);
-        this.header = new framework_1.Header({
-            className: 'td-dialog-content',
-            styleObj: td_dialog_style_1.$dialogHeaderStyle,
+        this.addEmits(td_dialog_content_const_1.dialogContentEmits);
+        this.assignProps(td_dialog_content_const_1.dialogContentProps);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a, _b, _c, _d;
+        const { t } = (0, use_locale_1.useLocale)();
+        const { Close } = svgs_1.CloseComponents;
+        const props = this.props;
+        const emit = this.emit;
+        const { dialogRef, headerRef, bodyId, ns, style } = (0, framework_1.inject)(constants_1.dialogInjectionKey);
+        const { focusTrapRef } = (0, framework_1.inject)(tokens_1.FOCUS_TRAP_INJECTION_KEY);
+        const dialogKls = (0, signals_1.computed)(() => [
+            ns.b(),
+            ns.is('fullscreen', props.fullscreen),
+            ns.is('draggable', props.draggable),
+            ns.is('align-center', props.alignCenter),
+            { [ns.m('center')]: props.center },
+        ]);
+        const composedDialogRef = (0, refs_1.composeRefs)(focusTrapRef, dialogRef);
+        const draggable = (0, signals_1.computed)(() => props.draggable);
+        console.log('draggable is ', draggable.get());
+        const overflow = (0, signals_1.computed)(() => props.overflow);
+        const { resetPosition } = (0, use_draggable_1.useDraggable)(dialogRef, headerRef, draggable, overflow);
+        (0, framework_1.defineExpose)({
+            resetPosition,
         });
-        if (params === null || params === void 0 ? void 0 : params.width) {
-            this.style.addObj({
-                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(),
+        this.attr.addObj({
+            tabindex: '-1',
         });
-        if (showClose) {
-            this.header.style.addObj(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.assignProps({
+            // refDom: composedDialogRef,
+            refDom: dialogRef,
         });
-        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.useParams(params);
+        console.log('then addClass dialogKls is ', dialogKls.get());
+        this.attr.addClass(dialogKls);
+        this.style.addObj(style);
+        this.addChildren(new framework_1.Header({
+            refDom: headerRef,
+            class: [
+                ns.e('header'),
+                props.headerClass,
+                { 'show-close': props.showClose },
+            ],
+            slot: [
+                new framework_1.Fragment({
+                    slot: ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.header)
+                        ? (_b = props.slots) === null || _b === void 0 ? void 0 : _b.header
+                        : new framework_1.Span({
+                            slot: props.title,
+                            class: ns.e('title'),
+                            attrObj: {
+                                role: 'heading',
+                                ariaLevel: props.ariaLevel,
+                            },
+                        }),
+                }),
+                new framework_1.Button({
+                    vIf: props.showClose,
+                    class: ns.e('headerbtn'),
+                    attrObj: {
+                        type: 'button',
+                        ariaLabel: t('el.dialog.close'),
+                    },
+                    events: {
+                        click: (evt, element) => {
+                            emit('close');
+                        },
+                    },
+                    slot: new td_icon_class_1.TdIcon({
+                        class: ns.e('close'),
+                        slot: props.closeIcon
+                            ? new props.closeIcon()
+                            : new Close(),
+                    }),
+                }),
+            ],
+        }), new framework_1.Div({
+            class: [ns.e('body'), props.bodyClass],
+            attrObj: {
+                id: bodyId,
+            },
+            slot: props.slot,
+        }), new framework_1.Footer({
+            vIf: (_c = props.slots) === null || _c === void 0 ? void 0 : _c.footer,
+            class: [ns.e('footer'), props.footerClass],
+            slot: (_d = props.slots) === null || _d === void 0 ? void 0 : _d.footer,
+        }));
     }
 }
 exports.TdDialogContent = TdDialogContent;

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

@@ -0,0 +1,5 @@
+import { DialogContentProps } from './td-dialog-content.interface';
+export declare const dialogContentProps: DialogContentProps;
+export declare const dialogContentEmits: {
+    close: () => boolean;
+};

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dialogContentEmits = exports.dialogContentProps = void 0;
+exports.dialogContentProps = {
+    showClose: true,
+    title: '',
+    ariaLevel: '2',
+};
+exports.dialogContentEmits = {
+    close: () => true,
+};

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

@@ -1,10 +1,9 @@
-import { TypeHtml } from '@type-dom/framework';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ITypeDiv, TypeDivProps } from '@type-dom/framework';
 import { TdIcon } from '../../basic/td-icon/td-icon.class';
-export interface ITdDialogContent extends IUI {
+export interface ITdDialogContent extends ITypeDiv {
     className: 'TdDialogContent';
 }
-export interface ITdDialogContentConfig extends IUIConfig {
+export interface DialogContentProps extends TypeDivProps {
     /**
      * @description whether to align the header and footer in center
      */
@@ -29,6 +28,18 @@ export interface ITdDialogContentConfig extends IUIConfig {
      * @description whether the Dialog takes up full screen
      */
     fullscreen?: boolean;
+    /**
+     * @description custom class names for header wrapper
+     */
+    headerClass?: string;
+    /**
+     * @description custom class names for body wrapper
+     */
+    bodyClass?: string;
+    /**
+     * @description custom class names for footer wrapper
+     */
+    footerClass?: string;
     /**
      * @description whether to show a close button
      *     default: true,
@@ -44,8 +55,4 @@ export interface ITdDialogContentConfig extends IUIConfig {
      *     default: '2',
      */
     ariaLevel?: string;
-    slots?: {
-        header?: TypeHtml;
-        footer?: TypeHtml;
-    };
 }

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

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

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

@@ -2,13 +2,13 @@
 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 {
+class TdDrawer extends framework_1.TypeFragment {
     constructor(params = {}) {
-        super(params, 'fragment');
+        super();
+        // this.useTag('fragment');
         this.className = 'TdDrawer';
-        this.transition = new framework_1.Transition({
+        this.content = new framework_1.Transition({
             name: 'fade',
             emits: {
                 afterEnter: () => {
@@ -28,11 +28,11 @@ class TdDrawer extends ui_abstract_1.UI {
                     click: () => {
                         //
                         console.log('click . ');
-                    }
-                }
-            })
+                    },
+                },
+            }),
         });
-        this.addChild(this.transition);
+        this.addChild(this.content);
         this.props = this.useParams(params);
     }
 }

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

@@ -1,9 +1,9 @@
-import { IUI } from '../../../ui/ui.interface';
-import { ITdDialogConfig } from '../td-dialog/td-dialog.interface';
-export interface ITdDrawer extends IUI {
+import { ITypeElement } from '@type-dom/framework';
+import { DialogProps } from '../td-dialog/td-dialog.interface';
+export interface ITdDrawer extends ITypeElement {
     className: 'TdDrawer';
 }
-export interface ITdDrawerConfig extends ITdDialogConfig {
+export interface DrawerProps extends DialogProps {
     direction?: 'ltr' | 'rtl' | 'ttb' | 'btt';
     size?: string | number;
     withHeader?: boolean;

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

@@ -0,0 +1,15 @@
+declare class FocusTrap {
+    private container;
+    private focusableElements;
+    private firstTabbableElement;
+    private lastTabbableElement;
+    private previousFocus;
+    constructor(container: HTMLElement);
+    enable(): void;
+    disable(): void;
+    private handleTab;
+    private handleFocusIn;
+    private getTabbableElements;
+    private getFirstTabbableElement;
+    private getLastTabbableElement;
+}