@type-dom/ui 0.0.2 → 0.0.4

package/src/{feedback → components/feedback}/overlay/container/header/title/title.js

@@ -6,18 +6,16 @@ class OverlayTitle extends framework_1.TypeSpan {
     constructor() {
         super();
         this.className = 'OverlayTitle';
-        this.propObj = {
-            styleObj: {
-                lineHeight: '16px',
-                fontSize: '16px',
-                color: '#000',
-            },
-            attrObj: {
-                name: 'overlay-title',
-            }
+        this.styleObj = {
+            lineHeight: '16px',
+            fontSize: '16px',
+            color: '#000'
         };
-        this.text = new framework_1.TextNode('标题');
-        this.childNodes = [this.text];
+        this.attrObj = {
+            name: 'overlay-title'
+        };
+        this.textNode = new framework_1.TextNode('标题');
+        this.childNodes = [this.textNode];
     }
 }
 exports.OverlayTitle = OverlayTitle;

package/src/{feedback → components/feedback}/overlay/overlay.abstract.d.ts

@@ -1,15 +1,12 @@
 import { TypeDiv } from '@type-dom/framework';
 import { OverlayContainer } from './container/container';
 export declare abstract class Overlay extends TypeDiv {
-    abstract className: string;
     childNodes: [OverlayContainer];
     container: OverlayContainer;
     protected constructor();
     setTitle(title: string): void;
     setMsg(msg: string): void;
     setContent(content: string): void;
-    show(): void;
-    hide(): void;
     clear(): void;
     clearBody(): void;
     initEvents(): void;

package/src/{feedback → components/feedback}/overlay/overlay.abstract.js

@@ -17,7 +17,7 @@ class Overlay extends framework_1.TypeDiv {
             zIndex: 2000,
             backgroundColor: 'rgba(0, 0, 0, 0.5)',
             overflow: 'auto',
-            display: framework_1.StyleDisplay.none,
+            display: framework_1.StyleDisplay.none
         });
         // document.body.appendChild(this.dom); // 挂载在 body 上
         this.container = new container_1.OverlayContainer();
@@ -25,7 +25,7 @@ class Overlay extends framework_1.TypeDiv {
         this.childNodes = [this.container];
     }
     setTitle(title) {
-        this.container.header.title.text.setText(title);
+        this.container.header.title.textNode.setText(title);
         this.container.header.render();
     }
     // 设置消息
@@ -33,7 +33,7 @@ class Overlay extends framework_1.TypeDiv {
         const span = new framework_1.Span({
             parent: this.container.body,
             childNodes: [
-                new framework_1.TextNode(msg),
+                new framework_1.TextNode(msg)
             ]
         });
         // this.container.body.clearChild();
@@ -44,14 +44,8 @@ class Overlay extends framework_1.TypeDiv {
     setContent(content) {
         //   ToDo
     }
-    show() {
-        this.setStyle('display', 'block');
-    }
-    hide() {
-        this.setStyle('display', 'none');
-    }
     clear() {
-        this.container.header.title.text.setText('标题');
+        this.container.header.title.textNode.setText('标题');
         this.container.body.clearChildren();
         this.container.footer.clearChildrenDom();
     }
@@ -59,7 +53,7 @@ class Overlay extends framework_1.TypeDiv {
         // this.container.body.clearChildDom();
     }
     initEvents() {
-        this.events.push((0, rxjs_1.fromEvent)(this.dom, 'click').subscribe(() => {
+        this.subscriptions.push((0, rxjs_1.fromEvent)(this.dom, 'click').subscribe(() => {
             this.hide();
         }));
     }

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

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

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

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdFocusTrap = void 0;
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const aria_1 = require("../../../aria");
+const utils_1 = require("./utils");
+class TdFocusTrap extends ui_abstract_1.UI {
+    constructor(config) {
+        super();
+        this.className = 'TdFocusTrap';
+        this.setConfig(config);
+    }
+    initEvents() {
+        const focusLayer = {
+            paused: false,
+            pause() {
+                this.paused = true;
+            },
+            resume() {
+                this.paused = false;
+            },
+        };
+        const { focusReason } = (0, utils_1.useFocusReason)();
+        const onKeydown = (e) => {
+            var _a, _b;
+            if (!((_a = this.config) === null || _a === void 0 ? void 0 : _a.loop) && !((_b = this.config) === null || _b === void 0 ? void 0 : _b.trapped))
+                return;
+            if (focusLayer.paused)
+                return;
+            const { key, altKey, ctrlKey, metaKey, currentTarget, shiftKey } = e;
+            const { loop } = this.config;
+            const isTabbing = key === aria_1.EVENT_CODE.tab && !altKey && !ctrlKey && !metaKey;
+            const currentFocusingEl = document.activeElement;
+            if (isTabbing && currentFocusingEl) {
+                const container = currentTarget;
+                const [first, last] = (0, utils_1.getEdges)(container);
+                const isTabbable = first && last;
+                if (!isTabbable) {
+                    if (currentFocusingEl === container) {
+                        const focusoutPreventedEvent = (0, utils_1.createFocusOutPreventedEvent)({
+                            focusReason: focusReason.value,
+                        });
+                        // emit('focusout-prevented', focusoutPreventedEvent);
+                        if (!focusoutPreventedEvent.defaultPrevented) {
+                            e.preventDefault();
+                        }
+                    }
+                }
+                else {
+                    if (!shiftKey && currentFocusingEl === last) {
+                        const focusoutPreventedEvent = (0, utils_1.createFocusOutPreventedEvent)({
+                            focusReason: focusReason.value,
+                        });
+                        // emit('focusout-prevented', focusoutPreventedEvent);
+                        if (!focusoutPreventedEvent.defaultPrevented) {
+                            e.preventDefault();
+                            if (loop)
+                                (0, utils_1.tryFocus)(first, true);
+                        }
+                    }
+                    else if (shiftKey &&
+                        [first, container].includes(currentFocusingEl)) {
+                        const focusoutPreventedEvent = (0, utils_1.createFocusOutPreventedEvent)({
+                            focusReason: focusReason.value,
+                        });
+                        // emit('focusout-prevented', focusoutPreventedEvent);
+                        if (!focusoutPreventedEvent.defaultPrevented) {
+                            e.preventDefault();
+                            if (loop)
+                                (0, utils_1.tryFocus)(last, true);
+                        }
+                    }
+                }
+            }
+        };
+        this.addEvents({
+            keydown: (evt) => onKeydown(evt),
+        });
+    }
+}
+exports.TdFocusTrap = TdFocusTrap;

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

@@ -0,0 +1,10 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+export interface ITdFocusTrap extends IUI {
+    className: 'TdFocusTrap';
+}
+export interface ITdFocusTrapConfig extends IUIConfig {
+    loop?: boolean;
+    trapped?: boolean;
+    focusTrapEl?: HTMLElement;
+    focusStartEl?: 'container' | 'first' | HTMLElement;
+}

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

@@ -0,0 +1,7 @@
+export declare const FOCUS_AFTER_TRAPPED = "focus-trap.focus-after-trapped";
+export declare const FOCUS_AFTER_RELEASED = "focus-trap.focus-after-released";
+export declare const FOCUSOUT_PREVENTED = "focus-trap.focusout-prevented";
+export declare const FOCUS_AFTER_TRAPPED_OPTS: EventInit;
+export declare const FOCUSOUT_PREVENTED_OPTS: EventInit;
+export declare const ON_TRAP_FOCUS_EVT = "focusAfterTrapped";
+export declare const ON_RELEASE_FOCUS_EVT = "focusAfterReleased";

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

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

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

@@ -0,0 +1,25 @@
+declare const focusReason: import("../../../../../../dist/libs/framework/src/reactivity/ref").Ref<"pointer" | "keyboard" | undefined>;
+export type FocusLayer = {
+    paused: boolean;
+    pause: () => void;
+    resume: () => void;
+};
+export type FocusStack = FocusLayer[];
+export declare const obtainAllFocusableElements: (element: HTMLElement) => HTMLElement[];
+export declare const getVisibleElement: (elements: HTMLElement[], container: HTMLElement) => HTMLElement | undefined;
+export declare const isHidden: (element: HTMLElement, container: HTMLElement) => boolean;
+export declare const getEdges: (container: HTMLElement) => (HTMLElement | undefined)[];
+export declare const tryFocus: (element?: HTMLElement | {
+    focus: () => void;
+} | null, shouldSelect?: boolean) => void;
+export declare const focusFirstDescendant: (elements: HTMLElement[], shouldSelect?: boolean) => void;
+export declare const focusableStack: {
+    push: (layer: FocusLayer) => void;
+    remove: (layer: FocusLayer) => void;
+};
+export declare const isFocusCausedByUserEvent: () => boolean;
+export declare const useFocusReason: () => {
+    focusReason: typeof focusReason;
+};
+export declare const createFocusOutPreventedEvent: (detail: CustomEventInit['detail']) => CustomEvent<any>;
+export {};

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

@@ -0,0 +1,153 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createFocusOutPreventedEvent = exports.useFocusReason = exports.isFocusCausedByUserEvent = exports.focusableStack = exports.focusFirstDescendant = exports.tryFocus = exports.getEdges = exports.isHidden = exports.getVisibleElement = exports.obtainAllFocusableElements = void 0;
+// import { onBeforeUnmount, onMounted, ref } from 'vue'
+const framework_1 = require("@type-dom/framework");
+const tokens_1 = require("./tokens");
+const focusReason = (0, framework_1.ref)();
+const lastUserFocusTimestamp = (0, framework_1.ref)(0);
+const lastAutomatedFocusTimestamp = (0, framework_1.ref)(0);
+let focusReasonUserCount = 0;
+const obtainAllFocusableElements = (element) => {
+    const nodes = [];
+    const walker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT, {
+        acceptNode: (node) => {
+            const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden';
+            if (node.disabled || node.hidden || isHiddenInput)
+                return NodeFilter.FILTER_SKIP;
+            return node.tabIndex >= 0 || node === document.activeElement
+                ? NodeFilter.FILTER_ACCEPT
+                : NodeFilter.FILTER_SKIP;
+        },
+    });
+    while (walker.nextNode())
+        nodes.push(walker.currentNode);
+    return nodes;
+};
+exports.obtainAllFocusableElements = obtainAllFocusableElements;
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+const getVisibleElement = (elements, container) => {
+    for (const element of elements) {
+        if (!(0, exports.isHidden)(element, container))
+            return element;
+    }
+};
+exports.getVisibleElement = getVisibleElement;
+const isHidden = (element, container) => {
+    if (process.env.NODE_ENV === 'test')
+        return false;
+    if (getComputedStyle(element).visibility === 'hidden')
+        return true;
+    while (element) {
+        if (container && element === container)
+            return false;
+        if (getComputedStyle(element).display === 'none')
+            return true;
+        element = element.parentElement;
+    }
+    return false;
+};
+exports.isHidden = isHidden;
+const getEdges = (container) => {
+    const focusable = (0, exports.obtainAllFocusableElements)(container);
+    const first = (0, exports.getVisibleElement)(focusable, container);
+    const last = (0, exports.getVisibleElement)(focusable.reverse(), container);
+    return [first, last];
+};
+exports.getEdges = getEdges;
+const isSelectable = (element) => {
+    return element instanceof HTMLInputElement && 'select' in element;
+};
+const tryFocus = (element, shouldSelect) => {
+    if (element && element.focus) {
+        const prevFocusedElement = document.activeElement;
+        element.focus({ preventScroll: true });
+        lastAutomatedFocusTimestamp.value = window.performance.now();
+        if (element !== prevFocusedElement &&
+            isSelectable(element) &&
+            shouldSelect) {
+            element.select();
+        }
+    }
+};
+exports.tryFocus = tryFocus;
+function removeFromStack(list, item) {
+    const copy = [...list];
+    const idx = list.indexOf(item);
+    if (idx !== -1) {
+        copy.splice(idx, 1);
+    }
+    return copy;
+}
+const createFocusableStack = () => {
+    let stack = [];
+    const push = (layer) => {
+        const currentLayer = stack[0];
+        if (currentLayer && layer !== currentLayer) {
+            currentLayer.pause();
+        }
+        stack = removeFromStack(stack, layer);
+        stack.unshift(layer);
+    };
+    const remove = (layer) => {
+        var _a, _b;
+        stack = removeFromStack(stack, layer);
+        (_b = (_a = stack[0]) === null || _a === void 0 ? void 0 : _a.resume) === null || _b === void 0 ? void 0 : _b.call(_a);
+    };
+    return {
+        push,
+        remove,
+    };
+};
+const focusFirstDescendant = (elements, shouldSelect = false) => {
+    const prevFocusedElement = document.activeElement;
+    for (const element of elements) {
+        (0, exports.tryFocus)(element, shouldSelect);
+        if (document.activeElement !== prevFocusedElement)
+            return;
+    }
+};
+exports.focusFirstDescendant = focusFirstDescendant;
+exports.focusableStack = createFocusableStack();
+const isFocusCausedByUserEvent = () => {
+    return lastUserFocusTimestamp.value > lastAutomatedFocusTimestamp.value;
+};
+exports.isFocusCausedByUserEvent = isFocusCausedByUserEvent;
+const notifyFocusReasonPointer = () => {
+    focusReason.value = 'pointer';
+    lastUserFocusTimestamp.value = window.performance.now();
+};
+const notifyFocusReasonKeydown = () => {
+    focusReason.value = 'keyboard';
+    lastUserFocusTimestamp.value = window.performance.now();
+};
+const useFocusReason = () => {
+    // onMounted(() => {
+    //   if (focusReasonUserCount === 0) {
+    //     document.addEventListener('mousedown', notifyFocusReasonPointer)
+    //     document.addEventListener('touchstart', notifyFocusReasonPointer)
+    //     document.addEventListener('keydown', notifyFocusReasonKeydown)
+    //   }
+    //   focusReasonUserCount++
+    // })
+    //
+    // onBeforeUnmount(() => {
+    //   focusReasonUserCount--
+    //   if (focusReasonUserCount <= 0) {
+    //     document.removeEventListener('mousedown', notifyFocusReasonPointer)
+    //     document.removeEventListener('touchstart', notifyFocusReasonPointer)
+    //     document.removeEventListener('keydown', notifyFocusReasonKeydown)
+    //   }
+    // })
+    return {
+        focusReason,
+        // lastUserFocusTimestamp,
+        // lastAutomatedFocusTimestamp,
+    };
+};
+exports.useFocusReason = useFocusReason;
+const createFocusOutPreventedEvent = (detail) => {
+    return new CustomEvent(tokens_1.FOCUSOUT_PREVENTED, Object.assign(Object.assign({}, tokens_1.FOCUSOUT_PREVENTED_OPTS), { detail }));
+};
+exports.createFocusOutPreventedEvent = createFocusOutPreventedEvent;

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

@@ -0,0 +1,6 @@
+import { UI } from '../../../../ui/ui.abstract';
+import { ITdPopperArrow, ITdPopperArrowConfig } from './arrow.interface';
+export declare class TdPopperArrow extends UI implements ITdPopperArrow {
+    className: 'TdPopperArrow';
+    constructor(config?: ITdPopperArrowConfig);
+}

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdPopperArrow = void 0;
+const var_1 = require("../../../../styles/var");
+const ui_abstract_1 = require("../../../../ui/ui.abstract");
+class TdPopperArrow extends ui_abstract_1.UI {
+    constructor(config) {
+        super({ tag: 'span' });
+        this.className = 'TdPopperArrow';
+        this.addAttrName('td-popper-arrow');
+        this.addStyleObj({
+            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.setConfig(config);
+    }
+}
+exports.TdPopperArrow = TdPopperArrow;

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

@@ -0,0 +1,11 @@
+import { IUI, IUIConfig } from '../../../../ui/ui.interface';
+export interface ITdPopperArrow extends IUI {
+    className: 'TdPopperArrow';
+}
+export interface ITdPopperArrowConfig extends IUIConfig {
+    /**
+     *
+     *     default: 5,
+     */
+    arrowOffset?: number;
+}

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

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

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

@@ -0,0 +1,7 @@
+import { UI } from '../../../../ui/ui.abstract';
+import { ITdPopperContent, ITdPopperContentConfig } from './content.interface';
+export declare class TdPopperContent extends UI implements ITdPopperContent {
+    className: 'TdPopperContent';
+    private focusTrap;
+    constructor(config?: ITdPopperContentConfig);
+}

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdPopperContent = void 0;
+const ui_abstract_1 = require("../../../../ui/ui.abstract");
+const td_focus_trap_class_1 = require("../../td-focus-trap/td-focus-trap.class");
+class TdPopperContent extends ui_abstract_1.UI {
+    constructor(config) {
+        super();
+        this.className = 'TdPopperContent';
+        this.addAttrName('td-popper-content');
+        this.addAttrObj({
+            tabindex: -1,
+        });
+        this.addStyleObj({
+        // padding: '10px',
+        // backgroundColor: $bgColors.default,
+        // borderRadius: $borderRadius.base,
+        // boxShadow: $boxShadow.base,
+        });
+        this.focusTrap = new td_focus_trap_class_1.TdFocusTrap();
+        this.addChild(this.focusTrap);
+        this.setConfig(config);
+    }
+}
+exports.TdPopperContent = TdPopperContent;

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

@@ -0,0 +1,37 @@
+import { IUI, IUIConfig } from '../../../../ui/ui.interface';
+export interface ITdPopperContent extends IUI {
+    className: 'TdPopperContent';
+}
+export interface IPopperCoreConfigProps extends IUIConfig {
+    boundariesPadding?: number;
+    gpuAcceleration?: boolean;
+    /**
+     * @description offset of the Tooltip
+     */
+    offset?: number;
+    /**
+     * @description position of Tooltip
+     *     values: placements,
+     *     default: 'bottom',
+     */
+    placement?: string;
+    /**
+     * @description [popper.js](https://popper.js.org/docs/v2/) parameters
+     */
+    strategy?: string;
+}
+export interface ITdPopperContentConfig extends IPopperCoreConfigProps {
+    id?: string;
+    effect?: string;
+    visible?: boolean;
+    enterable?: boolean;
+    pure?: boolean;
+    focusOnShow?: boolean;
+    trapping?: boolean;
+    referenceEl?: HTMLElement;
+    triggerTargetEl?: HTMLElement;
+    stopPopperMouseEvent?: boolean;
+    ariaLabel?: string;
+    virtualTriggering?: boolean;
+    zIndex?: number;
+}

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

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

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

@@ -0,0 +1,6 @@
+import { UI } from '../../../ui/ui.abstract';
+import { ITdPopper, ITdPopperConfig } from './td-popper.interface';
+export declare class TdPopper extends UI implements ITdPopper {
+    className: 'TdPopper';
+    constructor(config?: ITdPopperConfig);
+}

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdPopper = void 0;
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+class TdPopper extends ui_abstract_1.UI {
+    constructor(config) {
+        super();
+        this.className = 'TdPopper';
+        this.setConfig(config);
+    }
+}
+exports.TdPopper = TdPopper;

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

@@ -0,0 +1,12 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+export interface ITdPopper extends IUI {
+    className: 'TdPopper';
+}
+export interface ITdPopperConfig extends IUIConfig {
+    /**
+     *
+     *     default: 'tooltip',
+     */
+    role?: 'dialog' | 'grid' | 'group' | 'listbox' | 'menu' | 'navigation' | 'tooltip' | 'tree';
+}
+export declare const roleTypes: readonly ["dialog", "grid", "group", "listbox", "menu", "navigation", "tooltip", "tree"];

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.roleTypes = void 0;
+exports.roleTypes = [
+    'dialog',
+    'grid',
+    'group',
+    'listbox',
+    'menu',
+    'navigation',
+    'tooltip',
+    'tree',
+];

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

@@ -0,0 +1,6 @@
+import { UI } from '../../../../ui/ui.abstract';
+import { ITdPopperTrigger, ITdPopperTriggerConfig } from './trigger.interface';
+export declare class TdPopperTrigger extends UI implements ITdPopperTrigger {
+    className: 'TdPopperTrigger';
+    constructor(config?: ITdPopperTriggerConfig);
+}

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdPopperTrigger = void 0;
+const ui_abstract_1 = require("../../../../ui/ui.abstract");
+class TdPopperTrigger extends ui_abstract_1.UI {
+    constructor(config) {
+        super();
+        this.className = 'TdPopperTrigger';
+    }
+}
+exports.TdPopperTrigger = TdPopperTrigger;

package/src/components/feedback/td-popper/trigger/trigger.interface.d.ts

@@ -0,0 +1,8 @@
+import { IUI, IUIConfig } from '../../../../ui/ui.interface';
+export interface ITdPopperTrigger extends IUI {
+    className: 'TdPopperTrigger';
+}
+export interface ITdPopperTriggerConfig extends IUIConfig {
+    id?: string;
+    open?: boolean;
+}

package/src/components/feedback/td-popper/trigger/trigger.interface.js

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

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

@@ -0,0 +1,6 @@
+import { UI } from '../../../../ui/ui.abstract';
+import { ITdTooltipContentConfig } from './content.interface';
+export declare class TdTooltipContent extends UI {
+    className: 'TdTooltipContent';
+    constructor(config?: ITdTooltipContentConfig);
+}

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdTooltipContent = void 0;
+const ui_abstract_1 = require("../../../../ui/ui.abstract");
+class TdTooltipContent extends ui_abstract_1.UI {
+    constructor(config) {
+        super();
+        this.className = 'TdTooltipContent';
+        this.setConfig(config);
+    }
+}
+exports.TdTooltipContent = TdTooltipContent;