@type-dom/ui 0.1.0 → 0.1.1

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

@@ -1,9 +1,9 @@
-import { TypeDiv, TypeElement } from '@type-dom/framework';
-import { ITdOverlay, ITdOverlayConfig } from './td-overlay.interface';
-export declare let overlayZIndex: number;
+import { TypeDiv } from '@type-dom/framework';
+import { ITdOverlay, OverlayProps } from './td-overlay.interface';
+import './style/index';
 export declare class TdOverlay extends TypeDiv implements ITdOverlay {
     className: 'TdOverlay';
-    props: ITdOverlayConfig;
-    constructor(params?: ITdOverlayConfig);
-    addSlot(slot: TypeElement): void;
+    props: OverlayProps;
+    constructor(params?: OverlayProps);
+    setup(): void;
 }

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

@@ -1,36 +1,55 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdOverlay = exports.overlayZIndex = void 0;
+exports.TdOverlay = void 0;
 const framework_1 = require("@type-dom/framework");
-const td_overlay_style_1 = require("./td-overlay.style");
-exports.overlayZIndex = 2000;
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const use_same_target_1 = require("../../../hooks/use-same-target");
+const td_overlay_const_1 = require("./td-overlay.const");
+require("./style/index");
 class TdOverlay extends framework_1.TypeDiv {
     constructor(params = {}) {
         super();
-        exports.overlayZIndex = exports.overlayZIndex + 1;
         this.className = 'TdOverlay';
-        this.style.addObj(td_overlay_style_1.$tdOverlayStyle);
-        if (params === null || params === void 0 ? void 0 : params.mask) {
+        this.addEmits(td_overlay_const_1.overlayEmits);
+        this.assignProps(td_overlay_const_1.overlayProps);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a, _b, _c, _d;
+        const BLOCK = 'overlay';
+        const props = this.props;
+        const emit = this.emit;
+        // No reactivity on this prop because when its rendering with a global
+        // component, this will be a constant flag.
+        const ns = (0, use_namespace_1.useNamespace)(BLOCK);
+        const onMaskClick = (e) => {
+            // emit('click', e)  // 会死循环
+        };
+        const { onClick, onMousedown, onMouseup } = (0, use_same_target_1.useSameTarget)(props.customMaskEvent ? undefined : onMaskClick);
+        if (props.mask) {
+            this.attr.addClass([ns.b(), props.overlayClass]);
             this.style.addObj({
-                zIndex: (params === null || params === void 0 ? void 0 : params.zIndex) || exports.overlayZIndex,
+                zIndex: props.zIndex,
+            });
+            this.addEvents({
+                click: onClick,
+                mousedown: onMousedown,
+                mouseup: onMouseup,
             });
+            this.slotChildren((_a = props.slot) !== null && _a !== void 0 ? _a : (_b = props.slots) === null || _b === void 0 ? void 0 : _b.default);
         }
         else {
+            this.attr.addClass(props.overlayClass);
             this.style.addObj({
-                zIndex: (params === null || params === void 0 ? void 0 : params.zIndex) || exports.overlayZIndex,
+                zIndex: props.zIndex,
                 position: 'fixed',
                 top: '0px',
                 right: '0px',
                 bottom: '0px',
                 left: '0px',
             });
+            this.slotChildren((_c = props.slot) !== null && _c !== void 0 ? _c : (_d = props.slots) === null || _d === void 0 ? void 0 : _d.default);
         }
-        // this.addChild(this.getSlotNode());
-        this.slotChild(params.slot);
-        this.props = this.useParams(params);
-    }
-    addSlot(slot) {
-        // this.getSlotNode().resetSlot(slot);
     }
 }
 exports.TdOverlay = TdOverlay;

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

@@ -0,0 +1,5 @@
+import { OverlayProps } from './td-overlay.interface';
+export declare const overlayProps: OverlayProps;
+export declare const overlayEmits: {
+    click: (evt: MouseEvent) => boolean;
+};

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.overlayEmits = exports.overlayProps = void 0;
+exports.overlayProps = {
+    mask: true,
+};
+exports.overlayEmits = {
+    click: (evt) => evt instanceof MouseEvent,
+};

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

@@ -1,11 +1,12 @@
 import { Property } from '@type-dom/css-type';
-import { ITypeConfig, ITypeDiv } from '@type-dom/framework';
+import { ITypeDiv, TypeDivProps } from '@type-dom/framework';
 export interface ITdOverlay extends ITypeDiv {
     className: 'TdOverlay';
 }
-export interface ITdOverlayConfig extends ITypeConfig {
+export interface OverlayProps extends TypeDivProps {
     mask?: boolean;
     customMaskEvent?: boolean;
+    overlayClass?: string | (string | undefined)[] | Record<string, boolean | unknown>;
     zIndex?: Property.ZIndex;
     emits?: {
         click: (event: MouseEvent) => void;

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

@@ -0,0 +1,8 @@
+import { TypeDiv } from '@type-dom/framework';
+import { ITdOverlay, OverlayProps } from './td-overlay.interface';
+export declare let overlayZIndex: number;
+export declare class TdOverlay extends TypeDiv implements ITdOverlay {
+    className: 'TdOverlay';
+    props: OverlayProps;
+    constructor(params?: OverlayProps);
+}

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdOverlay = exports.overlayZIndex = void 0;
+const framework_1 = require("@type-dom/framework");
+const td_overlay_style_1 = require("./td-overlay.style");
+exports.overlayZIndex = 2000;
+class TdOverlay extends framework_1.TypeDiv {
+    constructor(params = {}) {
+        super();
+        exports.overlayZIndex = exports.overlayZIndex + 1;
+        this.className = 'TdOverlay';
+        this.style.addObj(td_overlay_style_1.$tdOverlayStyle);
+        if (params === null || params === void 0 ? void 0 : params.mask) {
+            this.style.addObj({
+                zIndex: (params === null || params === void 0 ? void 0 : params.zIndex) || exports.overlayZIndex,
+            });
+        }
+        else {
+            this.style.addObj({
+                zIndex: (params === null || params === void 0 ? void 0 : params.zIndex) || exports.overlayZIndex,
+                position: 'fixed',
+                top: '0px',
+                right: '0px',
+                bottom: '0px',
+                left: '0px',
+            });
+        }
+        this.slotChildren(params.slot);
+        this.props = this.useParams(params);
+    }
+}
+exports.TdOverlay = TdOverlay;

package/src/components/feedback/td-popover/style/css.d.ts

@@ -0,0 +1,3 @@
+import '@element-plus/components/base/style/css';
+import '@element-plus/components/popper/style/css';
+import '@element-plus/theme-chalk/el-popover.css';

package/src/components/feedback/td-popover/style/css.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@element-plus/components/base/style/css");
+require("@element-plus/components/popper/style/css");
+require("@element-plus/theme-chalk/el-popover.css");

package/src/components/feedback/td-popover/style/index.d.ts

@@ -0,0 +1,3 @@
+import '../../../../components/base/style';
+import '../../../../components/feedback/td-popper/style';
+import '../../../../theme-chalk/popover.scss';

package/src/components/feedback/td-popover/style/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../../components/base/style");
+require("../../../../components/feedback/td-popper/style");
+require("../../../../theme-chalk/popover.scss");

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

@@ -0,0 +1,13 @@
+import { TypeFragment } from '@type-dom/framework';
+import { Computed } from '@type-dom/signals';
+import { TdPopper } from '../td-popper/td-popper.class';
+import { ITdPopover, PopoverProps } from './td-popover.interface';
+import './style/index';
+export declare class TdPopover extends TypeFragment implements ITdPopover {
+    className: 'TdPopover';
+    props: PopoverProps;
+    popperRef?: Computed<TdPopper | undefined>;
+    hide?: () => void;
+    constructor(params: PopoverProps);
+    setup(): void;
+}

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

@@ -1 +1,124 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdPopover = void 0;
+const framework_1 = require("@type-dom/framework");
+const utils_1 = require("@type-dom/utils");
+const signals_1 = require("@type-dom/signals");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const td_tooltip_class_1 = require("../td-tooltip/td-tooltip.class");
+const td_popper_const_1 = require("./td-popper.const");
+require("./style/index");
+class TdPopover extends framework_1.TypeFragment {
+    constructor(params) {
+        super();
+        this.className = 'TdPopover';
+        this.addEmits(td_popper_const_1.popoverEmits);
+        this.assignProps(td_popper_const_1.popoverProps);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a, _b, _c, _d, _e;
+        const props = this.props;
+        const emit = this.emit;
+        const updateEventKeyRaw = `onUpdate:visible`;
+        const onUpdateVisible = (0, signals_1.computed)(() => {
+            return props[updateEventKeyRaw];
+            // return props.emits?.['update:visible']
+        });
+        const ns = (0, use_namespace_1.useNamespace)('popover');
+        const tooltipRef = (0, signals_1.signal)();
+        const popperRef = (0, signals_1.computed)(() => {
+            var _a, _b;
+            return (_b = (_a = (0, signals_1.unref)(tooltipRef)) === null || _a === void 0 ? void 0 : _a.popperRef) === null || _b === void 0 ? void 0 : _b.get();
+        });
+        const style = (0, signals_1.computed)(() => {
+            return [
+                {
+                    width: (0, utils_1.addUnit)(props.width),
+                },
+                props.popperStyle,
+            ];
+        });
+        const kls = (0, signals_1.computed)(() => {
+            return [ns.b(), props.popperClass, { [ns.m('plain')]: !!props.content }];
+        });
+        const gpuAcceleration = (0, signals_1.computed)(() => {
+            return props.transition === `${ns.namespace.get()}-fade-in-linear`;
+        });
+        const hide = () => {
+            var _a, _b;
+            (_b = (_a = tooltipRef.get()) === null || _a === void 0 ? void 0 : _a.hide) === null || _b === void 0 ? void 0 : _b.call(_a);
+        };
+        const beforeEnter = () => {
+            emit('before-enter');
+        };
+        const beforeLeave = () => {
+            emit('before-leave');
+        };
+        const afterEnter = () => {
+            emit('after-enter');
+        };
+        const afterLeave = () => {
+            emit('update:visible', false);
+            emit('after-leave');
+        };
+        (0, framework_1.defineExpose)({
+            /** @description popper ref */
+            popperRef,
+            /** @description hide popover */
+            hide,
+        });
+        this.addChild(new td_tooltip_class_1.TdTooltip({
+            refEl: tooltipRef,
+            //    v-bind="$attrs"
+            trigger: props.trigger,
+            placement: props.placement,
+            disabled: props.disabled,
+            visible: (_a = props.visible) !== null && _a !== void 0 ? _a : null, // todo undefined don't show popover , why ?
+            transition: props.transition,
+            popperOptions: props.popperOptions,
+            content: props.content,
+            offset: props.offset,
+            showAfter: props.showAfter,
+            hideAfter: props.hideAfter,
+            autoClose: props.autoClose,
+            showArrow: props.showArrow,
+            effect: props.effect,
+            enterable: props.enterable,
+            popperClass: kls.get(),
+            popperStyle: style.get(),
+            teleported: props.teleported,
+            persistent: props.persistent,
+            gpuAcceleration: gpuAcceleration.get(),
+            attrObj: {
+                tabindex: props.tabindex,
+                ariaLabel: props.title,
+            },
+            emits: {
+                'update:visible': onUpdateVisible.get(), // todo
+                beforeShow: beforeEnter,
+                beforeHide: beforeLeave,
+                show: afterEnter,
+                hide: afterLeave,
+            },
+            slots: {
+                default: (_b = props.slots) === null || _b === void 0 ? void 0 : _b.reference,
+                content: [
+                    props.title
+                        ? new framework_1.Div({
+                            class: ns.e('title'),
+                            attrObj: {
+                                role: 'title',
+                            },
+                            slot: props.title,
+                        })
+                        : undefined,
+                    new framework_1.Fragment({
+                        slot: (_e = (_c = props.slot) !== null && _c !== void 0 ? _c : (_d = props.slots) === null || _d === void 0 ? void 0 : _d.default) !== null && _e !== void 0 ? _e : props.content,
+                    }),
+                ],
+            },
+        }));
+    }
+}
+exports.TdPopover = TdPopover;

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

@@ -0,0 +1,106 @@
+import { ITypeFragment, TypeFragmentProps } from '@type-dom/framework';
+import { TooltipTriggerType } from '../td-tooltip/trigger/trigger.interface';
+import { Placement } from '@type-dom/popper';
+import { IStyle } from '@type-dom/css-type';
+import { TooltipContentProps } from '../td-tooltip/content/content.interface';
+export interface ITdPopover extends ITypeFragment {
+    className: 'TdPopover';
+}
+export interface PopoverProps extends TypeFragmentProps {
+    /**
+     * @description how the popover is triggered
+     */
+    trigger?: TooltipTriggerType | TooltipTriggerType[];
+    /**
+     * @description popover placement
+     * bottom
+     */
+    placement?: Placement;
+    /**
+     * @description whether Popover is disabled
+     */
+    disabled?: boolean;
+    /**
+     * @description whether popover is visible
+     */
+    visible?: TooltipContentProps['visible'];
+    /**
+     * @description popover transition animation
+     */
+    transition?: string;
+    /**
+     * @description parameters for [popper.js](https://popper.js.org/docs/v2/)
+     */
+    popperOptions?: any;
+    /**
+     * @description [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover
+     */
+    tabindex?: string | number;
+    /**
+     * @description popover content, can be replaced with a default `slot`
+     */
+    content?: string;
+    /**
+     * @description custom style for popover
+     */
+    popperStyle?: IStyle;
+    /**
+     * @description custom class name for popover
+     */
+    popperClass?: TooltipContentProps['popperClass'];
+    /**
+     *  ...useTooltipContentProps.enterable,
+     default: true,
+     */
+    enterable?: TooltipContentProps['enterable'];
+    /**
+     * @description Tooltip theme, built-in theme: `dark` / `light`
+     *     default: 'light',
+     */
+    effect?: 'dark' | 'light';
+    /**
+     * @description whether popover dropdown is teleported to the body
+     * true
+     */
+    teleported?: boolean;
+    /**
+     * @description popover title
+     */
+    title?: string;
+    /**
+     * @description popover width
+     default: 150,
+     */
+    width?: string | number;
+    /**
+     * @description popover offset
+     default: undefined,
+     */
+    offset?: number;
+    /**
+     * @description delay of appearance, in millisecond
+     default: 0,
+     */
+    showAfter?: number;
+    /**
+     * @description delay of disappear, in millisecond
+     default: 200,
+     */
+    hideAfter?: number;
+    /**
+     * @description timeout in milliseconds to hide tooltip
+     default: 0,
+     */
+    autoClose?: number;
+    /**
+     * @description whether a tooltip arrow is displayed or not. For more info, please refer to [ElPopper](https://github.com/element-plus/element-plus/tree/dev/packages/components/popper)
+     default: true,
+     */
+    showArrow?: boolean;
+    /**
+     * @description when popover inactive and `persistent` is `false` , popover will be destroyed
+     default: true,
+     */
+    persistent?: boolean;
+    'onUpdate:visible'?: (visible: boolean) => void;
+}

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

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

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

@@ -0,0 +1,13 @@
+import { IStyle } from '@type-dom/css-type';
+export declare const $popover: {
+    bgColor: string;
+    fontSize: string;
+    borderColor: string;
+    padding: string;
+    paddingLarge: string;
+    titleFontSize: string;
+    titleTextColor: string;
+    borderRadius: string;
+};
+export declare const $popoverPopperStyle: IStyle;
+export declare const $popoverTitleStyle: IStyle;

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

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$popoverTitleStyle = exports.$popoverPopperStyle = exports.$popover = void 0;
+const var_1 = require("../../../styles/var");
+// Popover
+// css3 var in packages/theme-chalk/src/popover.scss
+exports.$popover = {
+    // bgColor': getCssVar('bg-color', 'overlay'),
+    bgColor: var_1.$bgColor.overlay,
+    // font-size': getCssVar('font-size-base'),
+    fontSize: var_1.$fontSizes.base,
+    // border-color': getCssVar('border-color-lighter'),
+    borderColor: var_1.$borderColor.lighter,
+    padding: '12px',
+    paddingLarge: '18px 20px',
+    titleFontSize: '16px',
+    // title-text-color': getCssVar('text-color-primary'),
+    titleTextColor: var_1.$textColor.primary,
+    borderRadius: '4px',
+};
+exports.$popoverPopperStyle = {
+    // background: getCssVar('popover-bg-color'),
+    background: exports.$popover.bgColor,
+    minWidth: '150px',
+    // borderRadius: getCssVar('popover-border-radius'),
+    borderRadius: exports.$popover.borderRadius,
+    // border: 1px solid getCssVar('popover-border-color'),
+    border: '1px solid ' + exports.$popover.borderColor,
+    // padding: getCssVar('popover-padding'),
+    padding: exports.$popover.padding,
+    // z-index: getCssVar('index-popper'),
+    zIndex: 1000,
+    // color: getCssVar('text-color', 'regular'),
+    color: var_1.$textColor.regular,
+    lineHeight: 1.4,
+    // font-size: getCssVar('popover-font-size'),
+    fontSize: exports.$popover.fontSize,
+    // box-shadow: getCssVar('box-shadow-light'),
+    boxShadow: var_1.$boxShadow.light,
+    overflowWrap: 'break-word',
+    boxSizing: 'border-box',
+};
+exports.$popoverTitleStyle = {
+    // color: getCssVar('popover-title-text-color'),
+    color: exports.$popover.titleTextColor,
+    // font-size: getCssVar('popover-title-font-size'),
+    fontSize: exports.$popover.titleFontSize,
+    lineHeight: 1,
+    marginBottom: '12px',
+};

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

@@ -0,0 +1,9 @@
+import { PopoverProps } from './td-popover.interface';
+export declare const popoverProps: PopoverProps;
+export declare const popoverEmits: {
+    'update:visible': (value: boolean) => boolean;
+    'before-enter': () => boolean;
+    'before-leave': () => boolean;
+    'after-enter': () => boolean;
+    'after-leave': () => boolean;
+};

package/src/components/feedback/td-popover/td-popper.const.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.popoverEmits = exports.popoverProps = void 0;
+const utils_1 = require("@type-dom/utils");
+exports.popoverProps = {
+    trigger: 'hover',
+    placement: 'bottom',
+    // visible: undefined,
+    tabindex: 9,
+    enterable: true,
+    effect: 'light',
+    teleported: true,
+    showAfter: 0,
+    hideAfter: 200,
+    autoClose: 0,
+    showArrow: true,
+    persistent: true,
+    // 'onUpdate:visible': {
+    //   type: Function as PropType<(visible: boolean) => void>,
+    // },
+};
+exports.popoverEmits = {
+    'update:visible': (value) => (0, utils_1.isBoolean)(value),
+    'before-enter': () => true,
+    'before-leave': () => true,
+    'after-enter': () => true,
+    'after-leave': () => true,
+};

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

@@ -1,13 +1,10 @@
 import { TypeSpan } from '@type-dom/framework';
-import { ITdPopperArrow, ITdPopperArrowConfig } from './arrow.interface';
+import { Ref } from '@type-dom/signals';
+import { ITdPopperArrow, PopperArrowProps } from './arrow.interface';
 export declare class TdPopperArrow extends TypeSpan implements ITdPopperArrow {
     className: 'TdPopperArrow';
-    props: ITdPopperArrowConfig;
-    private arrowOffset?;
-    arrowRef?: HTMLElement;
-    private arrowStyle?;
-    constructor(params?: ITdPopperArrowConfig);
+    props: PopperArrowProps;
+    arrowRef?: Ref<HTMLElement>;
+    constructor(params?: PopperArrowProps);
     setup(): void;
-    beforeDestroy(): void;
-    setArrowOffset(offset: number): void;
 }

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

@@ -2,51 +2,43 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdPopperArrow = void 0;
 const framework_1 = require("@type-dom/framework");
-const var_1 = require("../../../../styles/var");
+const signals_1 = require("@type-dom/signals");
+const use_namespace_1 = require("../../../../hooks/use-namespace");
 const constants_1 = require("../constants");
 class TdPopperArrow extends framework_1.TypeSpan {
     constructor(params = {}) {
         super();
-        // this.useTag('span');
         this.className = 'TdPopperArrow';
         this.attr.addName('td-popper-arrow');
-        this.style.addObj({
-            position: 'absolute',
-            width: '10px',
-            height: '10px',
-            zIndex: -1,
-            //   todo next is ::before style
-            //   &::before {
-            //   position: absolute;
-            //   width: 10px;
-            //   height: 10px;
-            //   z-index: -1;
-            content: ' ',
-            transform: 'rotate(45deg)',
-            // background: getCssVar('text-color', 'primary'),
-            backgroundColor: var_1.$textColor.primary,
-            boxSizing: 'border-box'
-            // }
-        });
-        this.assignProps({
-            arrowOffset: 5,
-        });
+        // this.assignProps(popperArrowProps);
         this.props = this.useParams(params);
     }
     setup() {
-        const { arrowOffset, arrowRef, arrowStyle } = this.inject(constants_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;
-        }
+        console.log('TdPopperArrow setup . ');
+        const props = this.props;
+        const ns = (0, use_namespace_1.useNamespace)('popper');
+        const { arrowOffset, arrowRef, arrowStyle } = (0, framework_1.inject)(constants_1.POPPER_CONTENT_INJECTION_KEY, undefined);
+        (0, signals_1.watch)(() => { var _a; return (_a = props.arrowOffset) === null || _a === void 0 ? void 0 : _a.get(); }, (val) => {
+            console.warn('watch props.arrowOffset is ', val);
+            arrowOffset === null || arrowOffset === void 0 ? void 0 : arrowOffset.set(val);
+        });
+        (0, framework_1.onBeforeUnmount)(() => {
+            arrowRef === null || arrowRef === void 0 ? void 0 : arrowRef.set(undefined);
+        });
+        (0, framework_1.defineExpose)({
+            /**
+             * @description Arrow element
+             */
+            arrowRef,
+        });
+        this.assignProps({
+            refDom: arrowRef,
+        });
+        this.attr.addClass(ns.e('arrow'));
+        this.attr.addObj({
+            'data-popper-arrow': 'data-popper-arrow',
+        });
+        this.style.addObj(arrowStyle);
     }
 }
 exports.TdPopperArrow = TdPopperArrow;

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

@@ -1,3 +1,2 @@
-export declare const popperArrowProps: {
-    arrowOffset: number;
-};
+import { PopperArrowProps } from './arrow.interface';
+export declare const popperArrowProps: PopperArrowProps;

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.popperArrowProps = void 0;
+const signals_1 = require("@type-dom/signals");
 exports.popperArrowProps = {
-    arrowOffset: 5,
+    arrowOffset: (0, signals_1.signal)(5),
 };