@type-dom/ui 0.0.7 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@type-dom/ui",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "dependencies": {
     "@type-dom/svgs": "*",
     "rxjs": "^7.5.7",

package/src/components/basic/td-button/td-button.abstract.js

@@ -17,7 +17,7 @@ class TdButtonAbstract extends ui_abstract_1.UI {
         });
         this.ctrl.addStyleObj(td_button_style_1.$tdButtonBase);
         this.childNodes = [];
-        this.props = this.setParams(params); // 这里的config赋值是要替换掉上面的config的预置值的。
+        this.props = this.setProps(params); // 这里的config赋值是要替换掉上面的config的预置值的。
     }
     setup() {
         var _a, _b, _c;

package/src/components/basic/td-button-group/td-button-group.class.js

@@ -15,7 +15,7 @@ class TdButtonGroup extends ui_abstract_1.UI {
         if (params === null || params === void 0 ? void 0 : params.slot) {
             this.slotChild(params === null || params === void 0 ? void 0 : params.slot);
         }
-        this.setParams(params);
+        this.setProps(params);
     }
     created() {
         this.children.forEach((btn, index) => {

package/src/components/basic/td-container/td-aside/td-aside.class.js

@@ -14,7 +14,7 @@ class TdAside extends ui_abstract_1.UI {
             width: (params === null || params === void 0 ? void 0 : params.width) ? (0, utils_1.addUnit)(params.width) : '300px'
         });
         this.addChild(this.getSlotNode());
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
 }
 exports.TdAside = TdAside;

package/src/components/basic/td-container/td-container.class.js

@@ -23,7 +23,7 @@ class TdContainer extends ui_abstract_1.UI {
             });
         }
         this.addChild(this.getSlotNode());
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
 }
 exports.TdContainer = TdContainer;

package/src/components/basic/td-container/td-footer/td-footer.class.js

@@ -16,7 +16,7 @@ class TdFooter extends ui_abstract_1.UI {
         if (params === null || params === void 0 ? void 0 : params.slot) {
             this.slotChild(params.slot);
         }
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
 }
 exports.TdFooter = TdFooter;

package/src/components/basic/td-container/td-header/td-header.class.js

@@ -16,11 +16,10 @@ class TdHeader extends ui_abstract_1.UI {
             height: 60,
             backgroundColor: '#fff'
         });
-        this.addChild(this.getSlotNode());
         if (params === null || params === void 0 ? void 0 : params.slot) {
             this.slotChild(params.slot);
         }
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
 }
 exports.TdHeader = TdHeader;

package/src/components/basic/td-container/td-main/td-main.class.js

@@ -16,7 +16,7 @@ class TdMain extends ui_abstract_1.UI {
         });
         this.addChild(this.getSlotNode());
         console.warn('TdMain slotNodes.default is ', this.getSlotNode());
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
 }
 exports.TdMain = TdMain;

package/src/components/basic/td-icon/td-icon.class.js

@@ -41,7 +41,7 @@ class TdIcon extends ui_abstract_1.UI {
         }
         this.ctrl.addAttrClass('td-icon');
         this.addChild(this.getSlotNode());
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     /**
      * 根据配置更新图标的状态和样式。

package/src/components/basic/td-layout/td-col/td-col.class.js

@@ -9,7 +9,7 @@ class TdCol extends ui_abstract_1.UI {
         super(params);
         this.className = 'TdCol';
         this.addChild(this.getSlotNode());
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     get screenWidth() {
         return window.innerWidth || document.documentElement.clientWidth;
@@ -119,13 +119,13 @@ class TdCol extends ui_abstract_1.UI {
         }
     }
     initEvents() {
-        this.subscriptions.push((0, rxjs_1.fromEvent)(window, 'resize')
+        (0, rxjs_1.fromEvent)(window, 'resize')
             .pipe((0, rxjs_1.debounceTime)(250) // 防抖延时
         // distinctUntilChanged() // 可选，仅在窗口尺寸发生实际变化时才触发
         )
             .subscribe((event) => {
             this.resize();
-        }));
+        });
     }
 }
 exports.TdCol = TdCol;

package/src/components/basic/td-layout/td-row/td-row.class.js

@@ -18,7 +18,7 @@ class TdRow extends ui_abstract_1.UI {
         });
         this.childNodes = [];
         this.addChild(this.getSlotNode());
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     setup() {
         const props = this.props;

package/src/components/basic/td-link/td-link.class.js

@@ -10,7 +10,7 @@ class TdLink extends ui_abstract_1.UI {
         this.className = 'TdLink';
         (0, td_link_style_1.useType)(params);
         this.ctrl.addStyleObj(td_link_style_1.$linkStyle);
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     // override beforeCreate() {
     //   this.ctrl.addStyleObj($linkStyle);

package/src/components/basic/td-scrollbar/bar/bar.class.js

@@ -26,7 +26,7 @@ class TdScrollbarBar extends ui_abstract_1.UI {
                 ratio: 1
             })
         ];
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
 }
 exports.TdScrollbarBar = TdScrollbarBar;

package/src/components/basic/td-scrollbar/td-scrollbar.class.js

@@ -43,7 +43,7 @@ class TdScrollbar extends ui_abstract_1.UI {
         if (params === null || params === void 0 ? void 0 : params.contents) {
             this.view.addChildren(...params.contents);
         }
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
 }
 exports.TdScrollbar = TdScrollbar;

package/src/components/basic/td-scrollbar/thumb/thumb.class.js

@@ -39,7 +39,7 @@ class TdScrollbarThumb extends ui_abstract_1.UI {
             }
         });
         this.addChild(this.thumb);
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
 }
 exports.TdScrollbarThumb = TdScrollbarThumb;

package/src/components/basic/td-space/td-space.class.js

@@ -14,7 +14,7 @@ class TdSpace extends ui_abstract_1.UI {
             verticalAlign: 'top'
         });
         this.addChild(this.getSlotNode());
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     setup() {
         this.children.forEach((item) => {

package/src/components/basic/td-text/td-text.class.js

@@ -9,7 +9,7 @@ class TdText extends ui_abstract_1.UI {
         this.className = 'TdText';
         this.ctrl.addStyleObj(td_text_style_1.$baseText);
         this.addChild(this.getSlotNode());
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     setup() {
         const props = this.props;

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

@@ -29,7 +29,7 @@ class TdAvatar extends ui_abstract_1.UI {
             fontSize: td_avatar_style_1.$avatar.textSize
         });
         this.hasLoadError = false;
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     setup() {
         var _a, _b, _c;
@@ -100,7 +100,7 @@ class TdAvatar extends ui_abstract_1.UI {
                 });
             }
         }
-        // super.setParams(config);
+        // super.setProps(config);
     }
     // todo 监听 src 改变
     setSrc(src) {

package/src/components/data/td-badge/td-badge.class.d.ts

@@ -6,4 +6,5 @@ export declare class TdBadge extends UI implements ITdBadge {
     private sup;
     constructor(params?: ITdBadgeConfig);
     setup(): void;
+    changeValue(value: number | string): void;
 }

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

@@ -19,7 +19,7 @@ class TdBadge extends ui_abstract_1.UI {
             display: 'inline-block',
             width: 'fit-content'
         });
-        this.addChild(this.getSlotNode());
+        // this.addChild(this.getSlotNode());
         this.sup = new framework_1.Sup({
             styleObj: {
                 // background-color: getCssVar('badge', 'bg-color'),
@@ -47,17 +47,17 @@ class TdBadge extends ui_abstract_1.UI {
         this.addChild(new framework_1.Transition({
             name: 'td-badge',
             parent: this,
-            slot: this.sup
+            childNodes: [this.sup]
         }));
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     setup() {
-        var _a;
         console.log('TdBadge setup');
         const props = this.props;
         let content = (props === null || props === void 0 ? void 0 : props.isDot) ? '' : props === null || props === void 0 ? void 0 : props.value;
         console.warn('TdBadge setup content is ', content);
-        this.sup.addChild(new framework_1.TextNode(content));
+        this.sup.getTextNode().setText(content || '');
+        // this.sup.addChild(new TextNode(content))
         if ((props === null || props === void 0 ? void 0 : props.max) &&
             (props === null || props === void 0 ? void 0 : props.value) &&
             (0, utils_1.isNumber)(props === null || props === void 0 ? void 0 : props.value) &&
@@ -68,7 +68,7 @@ class TdBadge extends ui_abstract_1.UI {
             else {
                 content = props.value === 0 && !props.showZero ? '' : props.value;
             }
-            (_a = this.sup.textNode) === null || _a === void 0 ? void 0 : _a.setText(content);
+            this.sup.getTextNode().setText(content);
         }
         if (props === null || props === void 0 ? void 0 : props.slot) {
             this.sup.ctrl.addStyleObj({
@@ -100,5 +100,8 @@ class TdBadge extends ui_abstract_1.UI {
             this.sup.ctrl.addStyleObj(props.dotStyle);
         }
     }
+    changeValue(value) {
+        this.props.value = value;
+    }
 }
 exports.TdBadge = TdBadge;

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

@@ -43,7 +43,7 @@ class TdCard extends ui_abstract_1.UI {
         }
         this.addChild(this.body);
         this.addFooter(params);
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     addShadow(params) {
         const shadow = (params === null || params === void 0 ? void 0 : params.shadow) || 'always';

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

@@ -14,7 +14,7 @@ class TdCheckTag extends ui_abstract_1.UI {
         (0, td_check_tag_style_1.useType)();
         this.ctrl.addStyleObj(td_check_tag_style_1.$checkTag);
         this.setChecked(params === null || params === void 0 ? void 0 : params.checked);
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     initEvents() {
         this.addEvents({

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

@@ -19,8 +19,7 @@ class TdCollapse extends ui_abstract_1.UI {
         this.activeNames = (0, utils_1.isArray)(params === null || params === void 0 ? void 0 : params.modelValue)
             ? params.modelValue
             : [(_a = params === null || params === void 0 ? void 0 : params.modelValue) !== null && _a !== void 0 ? _a : ''];
-        this.addChild(this.getSlotNode());
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     mounted() {
         this.setActiveNames(this.activeNames);

package/src/components/data/td-collapse/td-collapse.interface.d.ts

@@ -13,6 +13,7 @@ export interface ITdCollapseConfig extends IUIConfig {
      *   default: () => mutable([] as const),
      */
     modelValue?: string | number | ICollapseActiveName[];
+    slot?: undefined;
 }
 export type ICollapseActiveName = string | number;
 export type ICollapseModelValue = Arrayable<ICollapseActiveName>;

package/src/components/data/td-collapse-item/td-collapse-item.class.js

@@ -122,10 +122,10 @@ class TdCollapseItem extends ui_abstract_1.UI {
         this.wrapper.addChild(this.content);
         this.transition = new td_collapse_transition_class_1.TdCollapseTransition({
             parent: this,
-            slot: this.wrapper
+            childNodes: [this.wrapper]
         });
         this.addChild(this.transition);
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     setActive(active) {
         if (active) {

package/src/components/data/td-count-down/td-count-down.class.js

@@ -14,7 +14,7 @@ class TdCountDown extends td_statistic_abstract_1.TdStatisticAbstract {
         this.rawValue = (0, utils_2.getTime)((params === null || params === void 0 ? void 0 : params.value) || 0) - Date.now();
         this.setNumber(this.rawValue);
         this.addChild(this.getSlotNode());
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     mounted() {
         this.stopTimer();

package/src/components/data/td-descriptions/td-descriptions-row.js

@@ -13,7 +13,7 @@ class TdDescriptionsRow extends framework_1.TypeFragment {
         super();
         this.className = 'TdDescriptionsRow';
         this.childNodes = [];
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     created() {
         var _a;
@@ -74,7 +74,7 @@ class TdDescriptionsRow extends framework_1.TypeFragment {
             });
             this.addChild(tr);
         }
-        // this.setParams(this.config);
+        // this.setProps(this.config);
     }
 }
 exports.TdDescriptionsRow = TdDescriptionsRow;

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

@@ -10,7 +10,7 @@ class TdDescriptions extends ui_abstract_1.UI {
     constructor(params) {
         super(params);
         this.className = 'TdDescriptions';
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     created() {
         var _a, _b, _c, _d;
@@ -85,7 +85,7 @@ class TdDescriptions extends ui_abstract_1.UI {
         });
         this.body.addChild(this.bodyTable);
         this.addChild(this.body);
-        this.setParams(props); // todo ????
+        this.setProps(props); // todo ????
     }
     filledNode(node, span, count, isLast = false) {
         if (!node.props) {

package/src/components/data/td-descriptions/td-descritions-cell.js

@@ -8,7 +8,7 @@ class TdDescriptionsCell extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, (params === null || params === void 0 ? void 0 : params.tag) || 'td');
         this.className = 'TdDescriptionsCell';
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     created() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;

package/src/components/data/td-descriptions-item/td-descriptions-item.class.js

@@ -12,7 +12,7 @@ class TdDescriptionsItem extends ui_abstract_1.UI {
         //   this.label = new TextNode(config.label);
         // }
         this.addChild(this.getSlotNode());
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
 }
 exports.TdDescriptionsItem = TdDescriptionsItem;

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

@@ -198,7 +198,7 @@ class ImgEmpty extends framework_1.TypeSvgSvg {
                 })
             ]
         }));
-        // this.setParams(params);
+        // this.setProps(params);
     }
 }
 exports.ImgEmpty = ImgEmpty;

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

@@ -65,7 +65,7 @@ class TdEmpty extends ui_abstract_1.UI {
             this.addChild(this.bottom);
             this.bottom.slotChild(params.slot);
         }
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     get emptyDescription() {
         return this.props.description || 'No Data'; // || t('el.table.emptyText')

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

@@ -32,7 +32,7 @@ class TdImage extends ui_abstract_1.UI {
         });
         this.hasLoadError = false;
         // todo preview
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     setup() {
         var _a, _b;
@@ -76,7 +76,7 @@ class TdImage extends ui_abstract_1.UI {
         (_b = this.img) === null || _b === void 0 ? void 0 : _b.ctrl.addStyleObj({
             objectFit: fit
         });
-        super.setParams(props);
+        super.setProps(props);
     }
     // todo 监听 src 改变
     setSrc(src) {

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

@@ -43,6 +43,7 @@ class TdImageViewer extends ui_abstract_1.UI {
         this.teleport.addChild(this.transition);
         // this.mount(document.body);
         // this.ctrl.addAttrName('wrapper');
+        // todo transition 如何设置样式 ？？？ developing ......
         this.transition.ctrl.addStyleObj({
             position: 'fixed',
             top: 0,
@@ -179,7 +180,7 @@ class TdImageViewer extends ui_abstract_1.UI {
         this.transition.addChild(new framework_1.Div({
             childNodes: imgList
         }));
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     get imgStyle() {
         const { scale, deg, offsetX, offsetY, enableTransition } = this.transform;

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

@@ -72,7 +72,7 @@ class TdResult extends ui_abstract_1.UI {
             }));
             // this.getSlotNode('extra').addSlot(params.slots.extra);
         }
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     resultIcon(params) {
         const icon = params === null || params === void 0 ? void 0 : params.icon;

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

@@ -82,7 +82,7 @@ class TdSegmented extends ui_abstract_1.UI {
             labels.push(label);
         });
         this.group.addChildren(...labels);
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     mounted() {
         console.log('TdSegmented created');
@@ -149,24 +149,23 @@ class TdSegmented extends ui_abstract_1.UI {
         this.selectedDiv.ctrl.setStyleObj(this.selectedStyle);
     }
     handleChange(item, element) {
-        var _a, _b;
-        // const value = getValue(item)
-        // emit(UPDATE_MODEL_EVENT, value)
-        // emit(CHANGE_EVENT, value)
+        const value = this.getValue(item);
+        this.emit(event_1.UPDATE_MODEL_EVENT, value);
+        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);
         this.updateSelect();
-        const value = this.getValue(item);
-        const update = (_a = this.props.emits) === null || _a === void 0 ? void 0 : _a[event_1.UPDATE_MODEL_EVENT];
-        if (update) {
-            update(value);
-        }
-        const change = (_b = this.props.emits) === null || _b === void 0 ? void 0 : _b[event_1.CHANGE_EVENT];
-        if (change) {
-            change(value);
-        }
+        // const value = this.getValue(item);
+        // const update = this.props.emits?.[UPDATE_MODEL_EVENT];
+        // if (update) {
+        //   update(value);
+        // }
+        // const change = this.props.emits?.[CHANGE_EVENT];
+        // if (change) {
+        //   change(value);
+        // }
     }
 }
 exports.TdSegmented = TdSegmented;

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

@@ -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.setParams(params);
+        this.props = this.setProps(params);
     }
     formatValue(value) {
         const { formatter, precision, decimalSeparator, groupSeparator } = this.props;

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

@@ -82,10 +82,10 @@ class TdTag extends ui_abstract_1.UI {
         this.ctrl.addStyleObj(td_tag_style_1.$tagSizes[size]);
         // if (!params?.disableTransitions) { // TODO: 添加过渡
         //   params?.parent?.addChild(new Transition({
-        //     slot: this,
+        //     childNodes: [this],
         //   }))
         // }
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
         if (params === null || params === void 0 ? void 0 : params.closable) {
             this.ctrl.addStyleObj({
                 paddingRight: parseFloat(td_tag_style_1.$tagIconSpanGap.default) - parseFloat(var_1.$borderWidth) + 'px'

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

@@ -9,7 +9,7 @@ class Dialog extends overlay_abstract_1.Overlay {
         this.ctrl.addAttrObj({
             name: 'dialog'
         });
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
         if (params === null || params === void 0 ? void 0 : params.to) {
             this.mount(params.to);
         }

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

@@ -9,7 +9,7 @@ class MessageBox extends overlay_abstract_1.Overlay {
         this.ctrl.addAttrObj({
             name: 'message-box'
         });
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
         if (params === null || params === void 0 ? void 0 : params.el) {
             this.mount(params.el);
         }

package/src/components/feedback/overlay/container/container.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OverlayContainer = void 0;
-const rxjs_1 = require("rxjs");
 const framework_1 = require("@type-dom/framework");
 const header_1 = require("./header/header");
 const body_1 = require("./body/body");
@@ -29,9 +28,11 @@ class OverlayContainer extends framework_1.TypeDiv {
         this.childNodes = [this.header, this.body, this.footer];
     }
     initEvents() {
-        this.subscriptions.push((0, rxjs_1.fromEvent)(this.dom, 'click').subscribe((e) => {
-            e.stopPropagation();
-        }));
+        this.addEvents({
+            click: (e) => {
+                e === null || e === void 0 ? void 0 : e.stopPropagation();
+            }
+        });
     }
 }
 exports.OverlayContainer = OverlayContainer;

package/src/components/feedback/overlay/container/footer/cancel-button/cancel-button.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CancelButton = void 0;
-const rxjs_1 = require("rxjs");
 const framework_1 = require("@type-dom/framework");
 class CancelButton extends framework_1.TypeButton {
     constructor() {
@@ -22,10 +21,12 @@ class CancelButton extends framework_1.TypeButton {
         if (!((_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.parent)) {
             console.error('this.parent?.parent?.parent is undefined . ');
         }
-        this.subscriptions.push((0, rxjs_1.fromEvent)(this.dom, 'click').subscribe(() => {
-            var _a, _b, _c;
-            (_c = (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.parent) === null || _c === void 0 ? void 0 : _c.ctrl.hide();
-        }));
+        this.addEvents({
+            click: () => {
+                var _a, _b, _c;
+                (_c = (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.parent) === null || _c === void 0 ? void 0 : _c.ctrl.hide();
+            }
+        });
     }
 }
 exports.CancelButton = CancelButton;

package/src/components/feedback/overlay/container/footer/confirm-button/confirm-button.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConfirmButton = void 0;
-const rxjs_1 = require("rxjs");
 const framework_1 = require("@type-dom/framework");
 class ConfirmButton extends framework_1.TypeButton {
     constructor() {
@@ -22,10 +21,12 @@ class ConfirmButton extends framework_1.TypeButton {
         if (!((_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.parent)) {
             console.error('this.parent?.parent?.parent is undefined . ');
         }
-        this.subscriptions.push((0, rxjs_1.fromEvent)(this.dom, 'click').subscribe(() => {
-            var _a, _b, _c;
-            (_c = (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.parent) === null || _c === void 0 ? void 0 : _c.ctrl.hide();
-        }));
+        this.addEvents({
+            click: () => {
+                var _a, _b, _c;
+                (_c = (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.parent) === null || _c === void 0 ? void 0 : _c.ctrl.hide();
+            }
+        });
     }
 }
 exports.ConfirmButton = ConfirmButton;