@type-dom/ui 0.0.8 → 0.0.9

package/src/components/data/td-empty/td-empty.class.js

@@ -11,14 +11,14 @@ class TdEmpty extends ui_abstract_1.UI {
         var _a, _b;
         super(params);
         this.className = 'TdEmpty';
-        this.ctrl.addAttrName('td-empty');
-        this.ctrl.addStyleObj(td_empty_style_1.$emptyStyle);
+        this.attr.addName('td-empty');
+        this.style.addObj(td_empty_style_1.$emptyStyle);
         this.image = new framework_1.Div({
             name: 'image',
             styleObj: td_empty_style_1.$emptyImageStyle
         });
         if (params === null || params === void 0 ? void 0 : params.imageSize) {
-            this.image.ctrl.addStyleObj(this.imageStyle);
+            this.image.style.addObj(this.imageStyle);
         }
         this.addChild(this.image);
         if (params === null || params === void 0 ? void 0 : params.image) {
@@ -65,7 +65,7 @@ class TdEmpty extends ui_abstract_1.UI {
             this.addChild(this.bottom);
             this.bottom.slotChild(params.slot);
         }
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     get emptyDescription() {
         return this.props.description || 'No Data'; // || t('el.table.emptyText')

package/src/components/data/td-image/td-image.class.js

@@ -8,11 +8,11 @@ class TdImage extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params);
         this.className = 'TdImage';
-        this.ctrl.addAttrName('td-image');
-        this.ctrl.addAttrObj({
+        this.attr.addName('td-image');
+        this.attr.addObj({
             ref: 'container'
         });
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             display: 'inline-flex',
             justifyContent: 'center',
             alignItems: 'center',
@@ -32,7 +32,7 @@ class TdImage extends ui_abstract_1.UI {
         });
         this.hasLoadError = false;
         // todo preview
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     setup() {
         var _a, _b;
@@ -73,10 +73,10 @@ class TdImage extends ui_abstract_1.UI {
             }
         }
         const fit = (props === null || props === void 0 ? void 0 : props.fit) || 'cover';
-        (_b = this.img) === null || _b === void 0 ? void 0 : _b.ctrl.addStyleObj({
+        (_b = this.img) === null || _b === void 0 ? void 0 : _b.style.addObj({
             objectFit: fit
         });
-        super.setProps(props);
+        this.useParams(props);
     }
     // todo 监听 src 改变
     setSrc(src) {

package/src/components/data/td-image-viewer/td-image-viewer.class.d.ts

@@ -12,8 +12,9 @@ export declare class TdImageViewer extends UI<undefined> implements ITdImageView
     loading: boolean;
     private transition;
     private teleport;
+    private wrapper;
     constructor(params?: ITdImageViewerConfig);
-    get imgStyle(): IStyle<0 | (string & {}), string & {}>;
+    get imgStyle(): IStyle<string | 0, string>;
     toggleMode(): void;
     reset(): void;
     handleActions(action: TdImageViewerAction, options?: {}): void;

package/src/components/data/td-image-viewer/td-image-viewer.class.js

@@ -36,15 +36,18 @@ class TdImageViewer extends ui_abstract_1.UI {
             }
         };
         this.mode = this.modes.CONTAIN;
-        this.transition = new framework_1.Transition();
+        this.wrapper = new framework_1.Div();
+        this.transition = new framework_1.Transition({
+            slot: this.wrapper,
+        });
         this.teleport = new framework_1.Teleport({
             to: document.body,
         });
         this.teleport.addChild(this.transition);
         // this.mount(document.body);
-        // this.ctrl.addAttrName('wrapper');
+        // this.attr.addName('wrapper');
         // todo transition 如何设置样式 ？？？ developing ......
-        this.transition.ctrl.addStyleObj({
+        this.wrapper.style.addObj({
             position: 'fixed',
             top: 0,
             right: 0,
@@ -52,12 +55,12 @@ class TdImageViewer extends ui_abstract_1.UI {
             left: 0,
             zIndex: 2000
         });
-        this.transition.addChildren(new framework_1.Div({
+        this.wrapper.addChildren(new framework_1.Div({
             name: 'mask',
             events: {
                 click: (evt, element) => {
                     //
-                    element === null || element === void 0 ? void 0 : element.ctrl.hide();
+                    element === null || element === void 0 ? void 0 : element.style.hide();
                 }
             }
         }), 
@@ -69,7 +72,7 @@ class TdImageViewer extends ui_abstract_1.UI {
                 top: '40px', right: '40px', width: '40px', height: '40px', fontSize: '40px' }),
             events: {
                 click: (evt, element) => {
-                    element === null || element === void 0 ? void 0 : element.ctrl.hide();
+                    element === null || element === void 0 ? void 0 : element.style.hide();
                 }
             },
             childNodes: [
@@ -86,7 +89,7 @@ class TdImageViewer extends ui_abstract_1.UI {
         this.isSingle = urlList.length <= 1;
         // <!-- ARROW -->
         if (!this.isSingle) {
-            this.transition.addChildren(new framework_1.Span({
+            this.wrapper.addChildren(new framework_1.Span({
                 styleObj: Object.assign(Object.assign({}, td_image_viewer_style_1.$btn), td_image_viewer_style_1.$prev),
                 events: {
                     click: () => {
@@ -113,7 +116,7 @@ class TdImageViewer extends ui_abstract_1.UI {
             }));
         }
         // <!-- ACTIONS -->
-        this.transition.addChild(new framework_1.Div({
+        this.wrapper.addChild(new framework_1.Div({
             styleObj: Object.assign(Object.assign({}, td_image_viewer_style_1.$btn), td_image_viewer_style_1.$actions),
             childNodes: [
                 new framework_1.Div({
@@ -177,10 +180,10 @@ class TdImageViewer extends ui_abstract_1.UI {
                 styleObj: Object.assign({ display: index === this.activeIndex ? 'block' : 'none' }, this.imgStyle)
             }));
         });
-        this.transition.addChild(new framework_1.Div({
+        this.wrapper.addChild(new framework_1.Div({
             childNodes: imgList
         }));
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     get imgStyle() {
         const { scale, deg, offsetX, offsetY, enableTransition } = this.transform;

package/src/components/data/td-result/td-result.class.js

@@ -12,8 +12,8 @@ class TdResult extends ui_abstract_1.UI {
         var _a, _b, _c, _d, _e, _f;
         super(params);
         this.className = 'TdResult';
-        this.ctrl.addAttrName('td-result');
-        this.ctrl.addStyleObj({
+        this.attr.addName('td-result');
+        this.style.addObj({
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
@@ -72,7 +72,7 @@ class TdResult extends ui_abstract_1.UI {
             }));
             // this.getSlotNode('extra').addSlot(params.slots.extra);
         }
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     resultIcon(params) {
         const icon = params === null || params === void 0 ? void 0 : params.icon;

package/src/components/data/td-segmented/td-segmented.class.js

@@ -10,9 +10,9 @@ class TdSegmented extends ui_abstract_1.UI {
         super(params);
         this.className = 'TdSegmented';
         (0, td_segmented_style_1.useStyle)(params);
-        this.ctrl.addAttrName('td-segmented');
-        this.ctrl.addStyleObj(td_segmented_style_1.$segmentedStyle);
-        this.ctrl.addAttrObj({
+        this.attr.addName('td-segmented');
+        this.style.addObj(td_segmented_style_1.$segmentedStyle);
+        this.attr.addObj({
             role: 'radiogroup',
             ariaLabel: 'Segmented',
             ariaLabelledby: 'Segmented'
@@ -62,7 +62,7 @@ class TdSegmented extends ui_abstract_1.UI {
             });
             if (typeof option === 'object' && option.slot) {
                 label.addChild(option.slot);
-                option.slot.ctrl.addStyleObj({
+                option.slot.style.addObj({
                     zIndex: 1 // todo ????? 否则显示不出来
                 });
             }
@@ -74,7 +74,7 @@ class TdSegmented extends ui_abstract_1.UI {
                 }));
             }
             if (this.getDisabled(option)) {
-                label.ctrl.addStyleObj({
+                label.style.addObj({
                     color: td_segmented_style_1.$segmented.itemDisabledColor,
                     cursor: 'not-allowed'
                 });
@@ -82,7 +82,7 @@ class TdSegmented extends ui_abstract_1.UI {
             labels.push(label);
         });
         this.group.addChildren(...labels);
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     mounted() {
         console.log('TdSegmented created');
@@ -104,17 +104,16 @@ class TdSegmented extends ui_abstract_1.UI {
     }
     getOption(value) {
         var _a;
-        return (_a = this.props.options) === null || _a === void 0 ? void 0 : _a.find((item) => this.getValue(item) === value);
+        return this.props.options && ((_a = this.props.options) === null || _a === void 0 ? void 0 : _a.find((item) => this.getValue(item) === value));
     }
     updateSelect() {
         console.log('updateSelect');
         const labels = this.group.findChildNodes('Label');
         labels.forEach((label, index) => {
-            var _a, _b, _c;
             const input = label.findChildNode('Input');
-            if (((_a = input === null || input === void 0 ? void 0 : input.props.attrObj) === null || _a === void 0 ? void 0 : _a.value) === this.modelValue) {
+            if ((input === null || input === void 0 ? void 0 : input.attr.get('value')) === this.modelValue) {
                 const rect = label.dom.getBoundingClientRect();
-                label.ctrl.setStyleObj({
+                label.style.setObj({
                     color: td_segmented_style_1.$segmented.itemSelectedColor
                 });
                 this.state.isInit = true;
@@ -123,18 +122,17 @@ class TdSegmented extends ui_abstract_1.UI {
                 this.state.disabled = this.getDisabled(this.getOption(this.modelValue));
             }
             else {
-                (_b = input === null || input === void 0 ? void 0 : input.props.attrObj) === null || _b === void 0 ? true : delete _b.checked;
-                (_c = input === null || input === void 0 ? void 0 : input.props.attrObj) === null || _c === void 0 ? true : delete _c.checked;
+                input === null || input === void 0 ? void 0 : input.attr.remove('checked');
                 const options = this.props.options || [];
                 if (options[index]) {
                     const disabled = this.getDisabled(options[index]);
                     if (disabled) {
-                        label.ctrl.setStyleObj({
+                        label.style.setObj({
                             color: td_segmented_style_1.$segmented.itemDisabledColor,
                         });
                     }
                     else {
-                        label.ctrl.setStyleObj({
+                        label.style.setObj({
                             color: undefined // remove color
                         });
                     }
@@ -146,7 +144,7 @@ class TdSegmented extends ui_abstract_1.UI {
             transform: `translateX(${this.state.translateX}px)`,
             display: this.state.isInit ? 'block' : 'none'
         };
-        this.selectedDiv.ctrl.setStyleObj(this.selectedStyle);
+        this.selectedDiv.style.setObj(this.selectedStyle);
     }
     handleChange(item, element) {
         const value = this.getValue(item);
@@ -154,8 +152,7 @@ class TdSegmented extends ui_abstract_1.UI {
         this.emit(event_1.CHANGE_EVENT, value);
         console.log('handleChange ', item);
         this.modelValue = this.getValue(item);
-        // element.attrObj?.checked = true;
-        element.ctrl.addAttribute('checked', true);
+        element.attr.add('checked', true);
         this.updateSelect();
         // const value = this.getValue(item);
         // const update = this.props.emits?.[UPDATE_MODEL_EVENT];

package/src/components/data/td-statistic/td-statistic.abstract.js

@@ -43,7 +43,7 @@ class TdStatisticAbstract extends ui_abstract_1.UI {
             }
         });
         if (params === null || params === void 0 ? void 0 : params.valueStyle) {
-            this.content.ctrl.addStyleObj(params.valueStyle);
+            this.content.style.addObj(params.valueStyle);
         }
         this.addChild(this.content);
         if (params === null || params === void 0 ? void 0 : params.prefix) {
@@ -91,7 +91,7 @@ class TdStatisticAbstract extends ui_abstract_1.UI {
             this.suffix = params.slots.suffix;
             this.content.addChild(params.slots.suffix);
         }
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     formatValue(value) {
         const { formatter, precision, decimalSeparator, groupSeparator } = this.props;

package/src/components/data/td-tag/td-tag.class.js

@@ -11,7 +11,7 @@ class TdTag extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, 'span');
         this.className = 'TdTag';
-        this.ctrl.addAttrName('td-tag');
+        this.attr.addName('td-tag');
         (0, td_tag_style_1.useType)();
         const type = (params === null || params === void 0 ? void 0 : params.type) || 'primary';
         const effect = (params === null || params === void 0 ? void 0 : params.effect) || 'light'; // 默认；
@@ -29,7 +29,7 @@ class TdTag extends ui_abstract_1.UI {
             console.log('genThem . then $tag is ', td_tag_style_1.$tag);
             console.log('$tagTypes is ', td_tag_style_1.$tagTypes);
         }
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             // background-color: getCssVar('tag-bg-color'),
             backgroundColor: td_tag_style_1.$tagTypes[type].bgColor,
             // border-color: getCssVar('tag-border-color'),
@@ -69,25 +69,25 @@ class TdTag extends ui_abstract_1.UI {
         }
         // style样式应该在 style类中处理， useConfig useType useSize ....
         if (params === null || params === void 0 ? void 0 : params.hit) {
-            this.ctrl.addStyleObj({
+            this.style.addObj({
                 borderColor: var_1.$colorPrimary
             });
         }
         if (params === null || params === void 0 ? void 0 : params.round) {
-            this.ctrl.addStyleObj({
+            this.style.addObj({
                 borderRadius: td_tag_style_1.$tag.borderRadiusRounded
             });
         }
         const size = (params === null || params === void 0 ? void 0 : params.size) || 'default';
-        this.ctrl.addStyleObj(td_tag_style_1.$tagSizes[size]);
+        this.style.addObj(td_tag_style_1.$tagSizes[size]);
         // if (!params?.disableTransitions) { // TODO: 添加过渡
         //   params?.parent?.addChild(new Transition({
         //     childNodes: [this],
         //   }))
         // }
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
         if (params === null || params === void 0 ? void 0 : params.closable) {
-            this.ctrl.addStyleObj({
+            this.style.addObj({
                 paddingRight: parseFloat(td_tag_style_1.$tagIconSpanGap.default) - parseFloat(var_1.$borderWidth) + 'px'
             });
             this.closeIcon = new td_icon_class_1.TdIcon({
@@ -110,7 +110,7 @@ class TdTag extends ui_abstract_1.UI {
                     mouseenter: (evt, element) => {
                         // console.log('mouseenter . ');
                         evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
-                        element === null || element === void 0 ? void 0 : element.ctrl.setStyleObj({
+                        element === null || element === void 0 ? void 0 : element.style.setObj({
                             backgroundColor: td_tag_style_1.$tagTypes[type].hoverColor,
                             color: var_1.$colorWhite
                         });
@@ -118,7 +118,7 @@ class TdTag extends ui_abstract_1.UI {
                     mouseleave: (evt, element) => {
                         // console.log('mouseleave . ');
                         evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
-                        element === null || element === void 0 ? void 0 : element.ctrl.setStyleObj({
+                        element === null || element === void 0 ? void 0 : element.style.setObj({
                             backgroundColor: td_tag_style_1.$tagTypes[type].bgColor,
                             color: td_tag_style_1.$tagTypes[type].textColor
                         });

package/src/components/feedback/index.d.ts

@@ -1,5 +1,3 @@
-export { Dialog } from './dialog/dialog.class';
-export { MessageBox } from './message-box/message-box';
 export { TdAlert } from './td-alert/td-alert.class';
 export type * from './td-alert/td-alert.interface';
 export { TdDialog } from './td-dialog/td-dialog.class';

package/src/components/feedback/index.js

@@ -1,11 +1,9 @@
 "use strict";
+// export { Dialog } from './dialog/dialog.class';
+// export { MessageBox } from './message-box/message-box';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdNotification = exports.TdMessageBox = exports.TdMessage = exports.TdDialog = exports.TdAlert = exports.MessageBox = exports.Dialog = void 0;
+exports.TdNotification = exports.TdMessageBox = exports.TdMessage = exports.TdDialog = exports.TdAlert = void 0;
 const tslib_1 = require("tslib");
-var dialog_class_1 = require("./dialog/dialog.class");
-Object.defineProperty(exports, "Dialog", { enumerable: true, get: function () { return dialog_class_1.Dialog; } });
-var message_box_1 = require("./message-box/message-box");
-Object.defineProperty(exports, "MessageBox", { enumerable: true, get: function () { return message_box_1.MessageBox; } });
 var td_alert_class_1 = require("./td-alert/td-alert.class");
 Object.defineProperty(exports, "TdAlert", { enumerable: true, get: function () { return td_alert_class_1.TdAlert; } });
 var td_dialog_class_1 = require("./td-dialog/td-dialog.class");

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

@@ -10,10 +10,6 @@ class TdAlert extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, 'fragment');
         this.className = 'TdAlert';
-        this.transition = new framework_1.Transition({
-            name: 'td-alert-fade'
-        });
-        this.addChild(this.transition);
         (0, td_alert_style_1.useStyle)(params);
         this.alertDiv = new framework_1.Div({
             attrObj: {
@@ -22,9 +18,13 @@ class TdAlert extends ui_abstract_1.UI {
             styleObj: td_alert_style_1.$alertStyle,
         });
         if (params === null || params === void 0 ? void 0 : params.styleObj) {
-            this.alertDiv.ctrl.addStyleObj(params.styleObj);
+            this.alertDiv.style.addObj(params.styleObj);
         }
-        this.transition.addChild(this.alertDiv);
+        this.transition = new framework_1.Transition({
+            name: 'td-alert-fade',
+            slot: this.alertDiv,
+        });
+        this.addChild(this.transition);
         const IconComponent = svgs_1.TypeComponentsMap[(params === null || params === void 0 ? void 0 : params.type) || 'info'];
         if ((params === null || params === void 0 ? void 0 : params.showIcon) && IconComponent) {
             this.alertDiv.addChild(new td_icon_class_1.TdIcon({
@@ -39,7 +39,7 @@ class TdAlert extends ui_abstract_1.UI {
         this.addTitle(params);
         this.addDescription(params);
         this.addCloseElement(params);
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     addTitle(params) {
         var _a, _b;
@@ -85,7 +85,7 @@ class TdAlert extends ui_abstract_1.UI {
                             if ((_a = params.emits) === null || _a === void 0 ? void 0 : _a.close) {
                                 params.emits.close();
                             }
-                            this.alertDiv.ctrl.hide();
+                            this.alertDiv.style.hide();
                         }
                     }
                 }));
@@ -100,7 +100,7 @@ class TdAlert extends ui_abstract_1.UI {
                             if ((_a = params === null || params === void 0 ? void 0 : params.emits) === null || _a === void 0 ? void 0 : _a.close) {
                                 params.emits.close();
                             }
-                            this.alertDiv.ctrl.hide();
+                            this.alertDiv.style.hide();
                         }
                     }
                 }));

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

@@ -21,7 +21,7 @@ class TdDialog extends ui_abstract_1.UI {
             slot: this.dialogContent,
         });
         if (params === null || params === void 0 ? void 0 : params.appendToBody) {
-            this.overlay.ctrl.addStyleObj({
+            this.overlay.style.addObj({
                 zIndex: td_overlay_class_1.overlayZIndex + 1000,
             });
         }
@@ -45,19 +45,19 @@ class TdDialog extends ui_abstract_1.UI {
                             this.beforeLeave();
                         }
                     },
-                    childNodes: [this.overlay],
+                    slot: this.overlay,
                 }),
             ]
         });
         this.addChild(this.teleport);
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     show() {
         console.log('TdDialog . show . ');
-        this.overlay.ctrl.show();
+        this.overlay.style.show();
     }
     handleClose() {
-        this.overlay.ctrl.hide();
+        this.overlay.style.hide();
         // function hide(shouldCancel?: boolean) {
         //   if (shouldCancel) return
         //   // closed.value = true

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

@@ -11,13 +11,13 @@ class TdDialogContent extends ui_abstract_1.UI {
         var _a, _b, _c;
         super(params);
         this.className = 'TdDialogContent';
-        this.ctrl.addStyleObj(td_dialog_style_1.$dialogStyle);
+        this.style.addObj(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({
+            this.style.addObj({
                 width: params.width,
             });
         }
@@ -40,7 +40,7 @@ class TdDialogContent extends ui_abstract_1.UI {
             svgObj: new svgs_1.ElCloseSvg(),
         });
         if (showClose) {
-            this.header.ctrl.addStyleObj(td_dialog_style_1.$dialogHeaderCloseStyle);
+            this.header.style.addObj(td_dialog_style_1.$dialogHeaderCloseStyle);
             this.header.addChild(new framework_1.Button({
                 className: 'td-dialog-close',
                 attrObj: {
@@ -73,7 +73,7 @@ class TdDialogContent extends ui_abstract_1.UI {
             this.footer.addChild(this.getSlotNode('footer'));
             this.addChild(this.footer);
         }
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
 }
 exports.TdDialogContent = TdDialogContent;

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

@@ -21,21 +21,19 @@ class TdDrawer extends ui_abstract_1.UI {
                     console.log('beforeEnter');
                 },
             },
-            childNodes: [
-                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 . ');
-                        }
+            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.setProps(params);
+        this.props = this.useParams(params);
     }
 }
 exports.TdDrawer = TdDrawer;

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

@@ -4,6 +4,24 @@ export declare class TdFocusTrap extends UI<undefined> implements ITdFocusTrap {
     className: 'TdFocusTrap';
     props: ITdFocusTrapConfig;
     inheritAttrs: boolean;
+    forwardRef?: HTMLElement;
+    lastFocusBeforeTrapped?: HTMLElement;
+    lastFocusAfterTrapped?: HTMLElement;
+    handelKeydown?: (e: KeyboardEvent) => void;
+    private escapeKeydown?;
+    private focusLayer?;
+    private focusReason?;
     constructor(params?: ITdFocusTrapConfig);
-    initEvents(): void;
+    setup(): void;
+    mounted(): void;
+    beforeDestroy(): void;
+    onKeydown(e: KeyboardEvent): void;
+    setFocusTrapEl(el: HTMLElement): void;
+    setForwardRef(newEl: HTMLElement, oldEl: HTMLElement): void;
+    trapOnFocus(e: Event): void;
+    releaseOnFocus(e: Event): void;
+    onFocusIn(e: FocusEvent): void;
+    onFocusOut(e: Event): void;
+    startTrap(): Promise<void>;
+    stopTrap(): void;
 }