@type-dom/ui 0.0.8 → 0.0.9

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

@@ -68,24 +68,21 @@ class TdMessageBox extends ui_abstract_1.UI {
         };
         // 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.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.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.addChild(this.overlay);
         this.dialog = new framework_1.Div({
             name: 'message-box-overlay',
+            childNodes: [this.messageBox], // 有问题， Div 不能直接用slot
             attrObj: {
                 role: 'dialog',
                 'aria-modal': 'true',
@@ -96,26 +93,28 @@ class TdMessageBox extends ui_abstract_1.UI {
             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);
-                },
+                mousedown: (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);
+        this.overlay = new td_overlay_class_1.TdOverlay({
+            name: 'overlay',
+            // styleObj: $messageBoxStyle,
+            slot: this.dialog,
+        });
+        this.overlayEvent = (0, framework_1.useSameTarget)(this.handleWrapperClick);
+        this.transition = new framework_1.Transition({
+            name: 'fade-in-linear',
+            emits: {
+                afterLeave: () => {
+                    // params?.emits?.vanish?.();
+                    this.emit('vanish');
                 },
             },
+            slot: this.overlay,
         });
-        this.dialog.addChild(this.messageBox);
+        this.addChild(this.transition);
         let iconComponent;
         if (params === null || params === void 0 ? void 0 : params.icon) {
             iconComponent = params.icon;
@@ -194,6 +193,7 @@ class TdMessageBox extends ui_abstract_1.UI {
             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)) {
@@ -298,16 +298,16 @@ class TdMessageBox extends ui_abstract_1.UI {
                 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');
-                //   }
-                // }
+                    click: () => {
+                        console.log('this.cancelBtn click . ');
+                        this.handleAction('cancel');
+                    },
+                    keydown: (evt) => {
+                        evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+                        if (evt.key === 'Enter') {
+                            this.handleAction('cancel');
+                        }
+                    }
                 },
             });
             this.btns.addChild(this.cancelBtn);
@@ -336,7 +336,7 @@ class TdMessageBox extends ui_abstract_1.UI {
             },
         });
         this.btns.addChild(this.confirmBtn);
-        this.props = this.setProps(params);
+        this.props = this.useParams(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);
@@ -369,47 +369,52 @@ class TdMessageBox extends ui_abstract_1.UI {
     //   onBeforeUnmount(() => {
     //     offDraggable()
     //   })
+    // 普通显示
+    static show(params) {
+        console.log('TdMessageBox show params is ', params);
+        const msgBox = new TdMessageBox(params);
+        return msgBox.promise();
+    }
     // 用 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();
+        const msgBox = new TdMessageBox(Object.assign({ boxType: 'confirm', message,
+            title, showCancelButton: true }, params));
+        return msgBox.promise();
     }
+    // todo 多次提交时，不触发返回操作。
     static prompt(message, title, params) {
-        var _a;
-        const msg = new TdMessageBox(Object.assign({ boxType: 'prompt', message,
+        const msgBox = 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
+        const input = msgBox.input;
+        return msgBox.promise(input);
     }
-    promise(value) {
+    promise(input) {
         return new Promise((resolve, reject) => {
             var _a;
-            this.confirmBtn.addEvent('click', this.confirmBtn.dom, () => {
-                console.log('confirm . then resolve . ');
-                resolve({ action: 'confirm', value });
+            this.confirmBtn.setEvent('click', () => {
+                console.log('confirm click . then resolve . ');
+                resolve({ action: 'confirm', input });
+            });
+            // this.cancelBtn.removeEvent('click', this.cancelBtn.dom);
+            (_a = this.cancelBtn) === null || _a === void 0 ? void 0 : _a.setEvents({
+                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?.preventDefault();
+                    if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'Enter') {
+                        // this.handleAction('cancel');
+                        resolve({ action: 'cancel' });
+                    }
+                },
             });
-            if ((_a = this.cancelBtn) === null || _a === void 0 ? void 0 : _a.dom) {
-                // 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() {
@@ -417,7 +422,7 @@ class TdMessageBox extends ui_abstract_1.UI {
         if (!this.visible)
             return;
         this.visible = false;
-        this.messageBox.ctrl.hide();
+        this.messageBox.style.hide();
         (0, framework_1.nextTick)(() => {
             if (this.state.action) {
                 this.emit('action', this.state.action);
@@ -432,17 +437,17 @@ class TdMessageBox extends ui_abstract_1.UI {
         }
     }
     handleAction(action) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         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);
+        ((_a = this.props) === null || _a === void 0 ? void 0 : _a.callback) && this.props.callback(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);
+            (_c = (_b = this.state).beforeClose) === null || _c === void 0 ? void 0 : _c.call(_b, action, this.state, this.doClose);
         }
         else {
             this.doClose();
@@ -456,7 +461,7 @@ class TdMessageBox extends ui_abstract_1.UI {
             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({
+                (_b = this.errorMsg) === null || _b === void 0 ? void 0 : _b.style.setObj({
                     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 || '');
@@ -468,7 +473,7 @@ class TdMessageBox extends ui_abstract_1.UI {
                 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({
+                    (_f = this.errorMsg) === null || _f === void 0 ? void 0 : _f.style.setObj({
                         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 || '');
@@ -477,7 +482,7 @@ class TdMessageBox extends ui_abstract_1.UI {
                 if (typeof validateResult === 'string') {
                     this.state.editorErrorMessage = validateResult;
                     this.state.validateError = true;
-                    (_j = this.errorMsg) === null || _j === void 0 ? void 0 : _j.ctrl.setStyleObj({
+                    (_j = this.errorMsg) === null || _j === void 0 ? void 0 : _j.style.setObj({
                         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 || '');

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

@@ -2,6 +2,7 @@ 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';
+import { TdInput } from '../../form';
 export interface ITdMessageBox extends IUI {
     className: 'TdMessageBox';
 }
@@ -10,7 +11,7 @@ export type IMessageBoxType = '' | 'prompt' | 'alert' | 'confirm';
 export type MessageBoxData = IMessageBoxInputData & IAction;
 export type IAction = 'confirm' | 'close' | 'cancel';
 export interface IMessageBoxInputData {
-    value?: string;
+    input?: TdInput;
     action?: IAction;
 }
 export interface MessageBoxInputValidator {

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

@@ -1,3 +1,4 @@
+import { TypeNode } from '@type-dom/framework';
 import { UI } from '../../../ui/ui.abstract';
 import { INotificationPosition, ITdNotification, ITdNotificationConfig } from './td-notification.interface';
 export declare class TdNotification extends UI<undefined> implements ITdNotification {
@@ -18,7 +19,7 @@ export declare class TdNotification extends UI<undefined> implements ITdNotifica
     private verticalProperty;
     constructor(option?: string | ITdNotificationConfig);
     mounted(): void;
-    initEvents(): void;
+    destroy(root?: TypeNode): void;
     static success(params?: ITdNotificationConfig): void;
     static warning(params?: ITdNotificationConfig): void;
     static error(params?: ITdNotificationConfig): void;
@@ -26,5 +27,5 @@ export declare class TdNotification extends UI<undefined> implements ITdNotifica
     startTimer(): void;
     clearTimer(): void;
     close(): void;
-    onKeydown({ code }: KeyboardEvent): void;
+    onKeydown: ({ code }: KeyboardEvent) => void;
 }

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

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdNotification = 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 aria_1 = require("../../../aria");
-const td_notification_style_1 = require("./td-notification.style");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
+const td_notification_style_1 = require("./td-notification.style");
 class TdNotification extends ui_abstract_1.UI {
     constructor(option) {
         let params;
@@ -22,6 +22,21 @@ class TdNotification extends ui_abstract_1.UI {
         this.GAP_SIZE = 16;
         this.seed = 1;
         this.timer = undefined;
+        this.onKeydown = ({ code }) => {
+            console.log('onKeydown ', code);
+            if (code === utils_1.EVENT_CODE.delete || code === utils_1.EVENT_CODE.backspace) {
+                this.clearTimer(); // press delete/backspace clear timer
+            }
+            else if (code === utils_1.EVENT_CODE.esc) {
+                // press esc to close the notification
+                if (this.visible) {
+                    this.close();
+                }
+            }
+            else {
+                this.startTimer(); // resume timer
+            }
+        };
         this.className = 'TdNotification';
         (0, td_notification_style_1.useStyle)(params);
         this.to = document.body;
@@ -135,7 +150,7 @@ class TdNotification extends ui_abstract_1.UI {
         this.notification.addChild(this.group);
         const position = (params === null || params === void 0 ? void 0 : params.position) || 'top-right';
         const horizontal = position.endsWith('right') ? 'right' : 'left';
-        this.notification.ctrl.addStyleObj({ [horizontal]: '16px' });
+        this.notification.style.addObj({ [horizontal]: '16px' });
         this.verticalProperty = position.startsWith('top') ? 'top' : 'bottom';
         let verticalOffset = (params === null || params === void 0 ? void 0 : params.offset) || 0;
         console.log('verticalOffset is ', verticalOffset);
@@ -147,21 +162,21 @@ class TdNotification extends ui_abstract_1.UI {
             [this.verticalProperty]: `${verticalOffset}px`,
             zIndex: 9999, // params?.zIndex ?? currentZIndex,
         };
-        this.notification.ctrl.addStyleObj(positionStyle);
+        this.notification.style.addObj(positionStyle);
         TdNotification.notifyId = TdNotification.notifyId + 1;
         TdNotification.notifications[position].push(this);
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
         this.mount(this.to);
     }
     mounted() {
         this.startTimer();
         // nextZIndex()
         this.visible = true;
+        document.addEventListener('keydown', this.onKeydown);
     }
-    initEvents() {
-        this.addEvent('keydown', document, (evt) => {
-            this.onKeydown(evt);
-        });
+    destroy(root) {
+        document.removeEventListener('keydown', this.onKeydown);
+        super.destroy(root);
     }
     static success(params) {
         new TdNotification(Object.assign({ type: 'success' }, params));
@@ -192,7 +207,7 @@ class TdNotification extends ui_abstract_1.UI {
     }
     close() {
         this.visible = false;
-        this.notification.ctrl.hide();
+        this.notification.style.hide();
         const position = this.props.position || 'top-right';
         TdNotification.notifications[position] = TdNotification.notifications[position].filter((notification) => notification !== this);
         TdNotification.notifyId = TdNotification.notifyId - 1;
@@ -200,28 +215,13 @@ class TdNotification extends ui_abstract_1.UI {
         console.log('height is ', verticalOffset);
         TdNotification.notifications[position].forEach((item, index) => {
             verticalOffset = verticalOffset + this.GAP_SIZE;
-            item.notification.ctrl.setStyleObj({
+            item.notification.style.setObj({
                 [this.verticalProperty]: `${verticalOffset}px`,
             });
             verticalOffset += item.notification.dom.offsetHeight; // + this.GAP_SIZE;
         });
         this.destroy(); // todo 应该是 Transition 的 afterLeave 触发 destroy；  会删除props
     }
-    onKeydown({ code }) {
-        console.log('onKeydown ', code);
-        if (code === aria_1.EVENT_CODE.delete || code === aria_1.EVENT_CODE.backspace) {
-            this.clearTimer(); // press delete/backspace clear timer
-        }
-        else if (code === aria_1.EVENT_CODE.esc) {
-            // press esc to close the notification
-            if (this.visible) {
-                this.close();
-            }
-        }
-        else {
-            this.startTimer(); // resume timer
-        }
-    }
 }
 exports.TdNotification = TdNotification;
 TdNotification.notifyId = 0;

package/src/components/feedback/td-only-child/td-only-child.class.d.ts

@@ -0,0 +1,7 @@
+import { ITypeConfig } from '@type-dom/framework';
+import { UI } from '../../../ui/ui.abstract';
+export declare class TdOnlyChild extends UI {
+    className: 'TdOnlyChild';
+    constructor(params?: ITypeConfig);
+    setup(): null;
+}

package/src/components/feedback/td-only-child/td-only-child.class.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdOnlyChild = void 0;
+const framework_1 = require("@type-dom/framework");
+const utils_1 = require("@type-dom/utils");
+const use_forward_ref_1 = require("../../../hooks/use-forward-ref");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+class TdOnlyChild extends ui_abstract_1.UI {
+    constructor(params = {}) {
+        super(params);
+        this.className = 'TdOnlyChild';
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a;
+        const forwardRefInjection = this.inject(use_forward_ref_1.FORWARD_REF_INJECTION_KEY);
+        const forwardRefDirective = (0, use_forward_ref_1.useForwardRefDirective)((_a = forwardRefInjection === null || forwardRefInjection === void 0 ? void 0 : forwardRefInjection.setForwardRef) !== null && _a !== void 0 ? _a : utils_1.NOOP);
+        const defaultSlot = this.slotNodes['default'];
+        if (!defaultSlot)
+            return null;
+        // if (defaultSlot.length > 1) {
+        //   // debugWarn('TdOnlyChild', 'requires exact only one valid child.')
+        //   return null
+        // }
+        // const firstLegitNode = findFirstLegitChild(defaultSlot!)
+        // if (!firstLegitNode) {
+        //   // debugWarn(NAME, 'no valid child node found')
+        //   return null
+        // }
+        // return withDirectives(cloneVNode(firstLegitNode!, attrs), [
+        //   [forwardRefDirective],
+        // ])
+        return null; // add by me todo
+    }
+}
+exports.TdOnlyChild = TdOnlyChild;
+function findFirstLegitChild(node) {
+    if (!node)
+        return null;
+    const children = node;
+    for (const child of children) {
+        /**
+         * when user uses h(Fragment, [text]) to render plain string,
+         * this switch case just cannot handle, when the value is primitives
+         * we should just return the wrapped string
+         */
+        if ((0, utils_1.isObject)(child)) {
+            // switch (child.dom) { // todo
+            //   case Comment:
+            //     continue
+            //   case Text:
+            //   case SVGElement:
+            //     return wrapTextContent(child)
+            //   case undefined:
+            //     return findFirstLegitChild(child.children as TypeNode[])
+            //   default:
+            //     return child
+            // }
+        }
+        return wrapTextContent(child);
+    }
+    return null;
+}
+function wrapTextContent(slot) {
+    // const ns = 'only-child';
+    // return `<span class=${ns + '-content'}>${s}</span>`;
+    return new framework_1.Span({
+        // text: s,
+        attrObj: {
+            class: 'only-child-content',
+        },
+        childNodes: typeof slot === 'string' ? [new framework_1.TextNode(slot)] : [slot],
+    });
+}

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

@@ -1,6 +1,6 @@
+import { TypeElement } from '@type-dom/framework';
 import { UI } from '../../../ui/ui.abstract';
 import { ITdOverlay, ITdOverlayConfig } from './td-overlay.interface';
-import { TypeElement } from '@type-dom/framework';
 export declare let overlayZIndex: number;
 export declare class TdOverlay extends UI implements ITdOverlay {
     className: 'TdOverlay';

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

@@ -9,14 +9,14 @@ class TdOverlay extends ui_abstract_1.UI {
         super(params);
         exports.overlayZIndex = exports.overlayZIndex + 1;
         this.className = 'TdOverlay';
-        this.ctrl.addStyleObj(td_overlay_style_1.$tdOverlayStyle);
+        this.style.addObj(td_overlay_style_1.$tdOverlayStyle);
         if (params === null || params === void 0 ? void 0 : params.mask) {
-            this.ctrl.addStyleObj({
+            this.style.addObj({
                 zIndex: (params === null || params === void 0 ? void 0 : params.zIndex) || exports.overlayZIndex,
             });
         }
         else {
-            this.ctrl.addStyleObj({
+            this.style.addObj({
                 zIndex: (params === null || params === void 0 ? void 0 : params.zIndex) || exports.overlayZIndex,
                 position: 'fixed',
                 top: '0px',
@@ -26,10 +26,10 @@ class TdOverlay extends ui_abstract_1.UI {
             });
         }
         this.addChild(this.getSlotNode());
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     addSlot(slot) {
-        this.getSlotNode('default').resetSlot(slot);
+        this.getSlotNode().resetSlot(slot);
     }
 }
 exports.TdOverlay = TdOverlay;

package/src/components/feedback/td-popper/arrow/arrow.class.d.ts

@@ -3,5 +3,11 @@ import { ITdPopperArrow, ITdPopperArrowConfig } from './arrow.interface';
 export declare class TdPopperArrow extends UI implements ITdPopperArrow {
     className: 'TdPopperArrow';
     props: ITdPopperArrowConfig;
+    private arrowOffset?;
+    arrowRef?: HTMLElement;
+    private arrowStyle?;
     constructor(params?: ITdPopperArrowConfig);
+    setup(): void;
+    beforeDestroy(): void;
+    setArrowOffset(offset: number): void;
 }

package/src/components/feedback/td-popper/arrow/arrow.class.js

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdPopperArrow = void 0;
 const var_1 = require("../../../../styles/var");
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
+const td_popper_const_1 = require("../td-popper.const");
 class TdPopperArrow extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, 'span');
         this.className = 'TdPopperArrow';
-        this.ctrl.addAttrName('td-popper-arrow');
-        this.ctrl.addStyleObj({
+        this.attr.addName('td-popper-arrow');
+        this.style.addObj({
             position: 'absolute',
             width: '10px',
             height: '10px',
@@ -26,7 +27,25 @@ class TdPopperArrow extends ui_abstract_1.UI {
             boxSizing: 'border-box'
             // }
         });
-        this.props = this.setProps(params);
+        this.buildProps({
+            arrowOffset: 5,
+        });
+        this.props = this.useParams(params);
+    }
+    setup() {
+        const { arrowOffset, arrowRef, arrowStyle } = this.inject(td_popper_const_1.POPPER_CONTENT_INJECTION_KEY, undefined);
+        this.arrowOffset = arrowOffset;
+        this.arrowRef = arrowRef;
+        this.arrowStyle = arrowStyle;
+    }
+    beforeDestroy() {
+        this.arrowRef = undefined;
+    }
+    setArrowOffset(offset) {
+        this.setProp('arrowOffset', offset);
+        if (offset) {
+            this.arrowOffset = offset;
+        }
     }
 }
 exports.TdPopperArrow = TdPopperArrow;

package/src/components/feedback/td-popper/composable/use-focus-trap.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -5,4 +5,5 @@ export declare class TdPopperContent extends UI implements ITdPopperContent {
     props: ITdPopperContentConfig;
     private focusTrap;
     constructor(params?: ITdPopperContentConfig);
+    setup(): void;
 }

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

@@ -1,17 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdPopperContent = void 0;
+const utils_1 = require("@type-dom/utils");
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 const td_focus_trap_class_1 = require("../../td-focus-trap/td-focus-trap.class");
+const content_const_1 = require("./content.const");
+const td_form_const_1 = require("../../../form/td-form/td-form.const");
+const td_popper_const_1 = require("../td-popper.const");
 class TdPopperContent extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params);
         this.className = 'TdPopperContent';
-        this.ctrl.addAttrName('td-popper-content');
-        this.ctrl.addAttrObj({
+        this.attr.addName('td-popper-content');
+        this.attr.addObj({
             tabindex: -1
         });
-        this.ctrl.addStyleObj({
+        this.style.addObj({
         // padding: '10px',
         // backgroundColor: $bgColors.default,
         // borderRadius: $borderRadius.base,
@@ -19,7 +23,24 @@ class TdPopperContent extends ui_abstract_1.UI {
         });
         this.focusTrap = new td_focus_trap_class_1.TdFocusTrap();
         this.addChild(this.focusTrap);
-        this.props = this.setProps(params);
+        if (params.contentStyle) { // todo
+            this.style.addObj(params.contentStyle);
+        }
+        this.buildProps(content_const_1.popperContentProps);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        const formItemContext = this.inject(td_form_const_1.formItemContextKey, undefined);
+        const arrowOffset = 0;
+        this.provide(td_popper_const_1.POPPER_CONTENT_INJECTION_KEY, {
+            // arrowStyle,
+            // arrowRef,
+            arrowOffset,
+        });
+        if (formItemContext) {
+            // disallow auto-id from inside popper content
+            this.provide(td_form_const_1.formItemContextKey, Object.assign(Object.assign({}, formItemContext), { addInputId: utils_1.NOOP, removeInputId: utils_1.NOOP }));
+        }
     }
 }
 exports.TdPopperContent = TdPopperContent;

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

@@ -0,0 +1,3 @@
+import { IPopperCoreConfigProps, ITdPopperContentConfig } from './content.interface';
+export declare const popperCoreConfigProps: IPopperCoreConfigProps;
+export declare const popperContentProps: ITdPopperContentConfig;