@type-dom/ui 0.0.4 → 0.0.5

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

@@ -2,73 +2,136 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdIcon = void 0;
 const framework_1 = require("@type-dom/framework");
+const utils_1 = require("@type-dom/utils");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_icon_style_1 = require("./td-icon.style");
+/**
+ * TdIcon 类继承自 UI 类，实现了 ITdIcon 接口。
+ * 该类用于创建和管理图标，支持配置不同的图标样式和SVG图形。
+ */
 class TdIcon extends ui_abstract_1.UI {
-    constructor(config) {
-        super({ tag: 'i' });
+    /**
+     * TdIcon 类的构造函数。
+     * @param config 图标配置对象，可选参数。
+     */
+    constructor(params) {
+        super(params, 'i');
         this.className = 'TdIcon';
-        const slot = new framework_1.Slot({ parent: this });
-        this.childNodes = [slot];
-        this.addStyleObj(td_icon_style_1.$tdIcon);
-        this.setConfig(config);
-        this.resetConfig(config);
-    }
-    // todo
-    createSvg(className) {
-        return;
-    }
-    resetConfig(config) {
-        if (config === null || config === void 0 ? void 0 : config.SvgClass) {
-            // todo 直接作为 childNodes的子元素更合理；
-            const svg = new config.SvgClass(this);
-            // svg.resetSize('1em', '1em');
-            this.addChild(svg);
-            this.svg = svg;
+        this.ctrl.addStyleObj(td_icon_style_1.$tdIcon);
+        if (params === null || params === void 0 ? void 0 : params.loading) {
+            this.ctrl.addStyleObj(td_icon_style_1.$iconLoading);
         }
-        if (config === null || config === void 0 ? void 0 : config.svgObj) {
+        // 首次创建时，添加style标签；避免重复创建
+        if (!TdIcon.initCalled) {
+            TdIcon.initCalled = true;
+            const cssText = `
+/* 选择所有带有 data-v-366071 属性的元素 */
+/* 在这里添加您的样式规则 */
+@keyframes rotating-${framework_1.vHash} {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+      `;
+            (0, framework_1.createStyle)(cssText);
+            // createClass('td-icon', $tdIcon);
+        }
+        this.ctrl.addAttrClass('td-icon');
+        this.addChild(this.getSlotNode());
+        this.props = this.setParams(params);
+    }
+    /**
+     * 根据配置更新图标的状态和样式。
+     * @param config 图标的配置对象，可选参数。
+     */
+    setup() {
+        var _a;
+        const props = this.props;
+        if (props === null || props === void 0 ? void 0 : props.svgObj) {
             // 直接作为 childNodes的子元素更合理；
-            this.addChild(config.svgObj);
-            this.svg = config.svgObj;
+            this.getSlotNode().resetSlot(props.svgObj);
+            this.svg = props.svgObj;
+            this.svg.ctrl.addAttrObj({
+                height: '1em',
+                width: '1em',
+            });
         }
-        if (config === null || config === void 0 ? void 0 : config.color) {
-            this.addStyleObj({
-                color: config.color
+        if (props === null || props === void 0 ? void 0 : props.color) {
+            this.ctrl.addStyleObj({
+                color: props.color,
             });
         }
-        if (config === null || config === void 0 ? void 0 : config.size) {
-            this.addStyleObj({
-                fontSize: config.size
+        if (props === null || props === void 0 ? void 0 : props.size) {
+            this.ctrl.addStyleObj({
+                fontSize: (0, utils_1.addUnit)(props.size),
             });
+            (_a = this.svg) === null || _a === void 0 ? void 0 : _a.resetSize(props.size, props.size);
         }
-        if ((config === null || config === void 0 ? void 0 : config.position) === 'right') {
+        if ((props === null || props === void 0 ? void 0 : props.position) === 'right') {
             // 位置应该是引用的对象中设置，自身应该不需要设置。
-            this.addStyleObj(td_icon_style_1.$iconRight);
+            this.ctrl.addStyleObj(td_icon_style_1.$iconRight);
         }
-        else if ((config === null || config === void 0 ? void 0 : config.position) === 'left') {
-            this.addStyleObj(td_icon_style_1.$iconLeft);
+        else if ((props === null || props === void 0 ? void 0 : props.position) === 'left') {
+            this.ctrl.addStyleObj(td_icon_style_1.$iconLeft);
         }
-        // this.addStyleObj(sizeOpts[size]);
-        // this.addAttrObj({
-        //   type: 'primary', // success warn danger primary
-        //   size: 'middle' // small middle, large
-        // });
     }
-    created() {
+    /**
+     * 替换子节点中的SVG元素。
+     *
+     * 此方法用于查找并替换当前节点中指定的SVG元素。如果找不到指定的SVG元素，则将新SVG元素添加为子节点。
+     * 这对于动态更新SVG内容特别有用，比如在用户交互或数据变化时更新图表。
+     *
+     * @param toSvg 要替换为的新SVG元素。
+     * @param fromSvg 可选参数，指定要替换的SVG元素。如果不提供，则替换所有实例化的SVG元素。
+     */
+    replaceSvg(toSvg, fromSvg) {
         var _a;
-        if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.loading) {
-            this.addStyleObj(td_icon_style_1.$iconLoading);
+        const slotNode = this.getSlotNode('default');
+        console.log('replaceSvg slotNode is ', slotNode);
+        // 查找要替换的SVG元素的索引。
+        const svgIndex = (_a = slotNode.childNodes) === null || _a === void 0 ? void 0 : _a.findIndex((child) => {
+            // 如果指定了要替换的SVG元素，则判断当前元素是否是待替换的元素。
+            if (fromSvg) {
+                return child === fromSvg;
+            }
+            else if (child instanceof framework_1.TypeSvgSvg) { // 如果没有指定具体的SVG元素，则查找所有实例化的SVG元素的第一个。
+                fromSvg = child;
+                return true;
+            }
+            return false;
+        });
+        // 如果找不到指定的SVG元素，则将新SVG元素添加为子节点。
+        if (svgIndex === -1) {
+            slotNode.addChild(toSvg);
         }
+        else {
+            // 替换找到的SVG元素为新SVG元素。
+            if (fromSvg) {
+                fromSvg !== toSvg && slotNode.replaceChild(toSvg, fromSvg);
+            }
+            else {
+                slotNode.addChild(toSvg);
+            }
+            // slotNode.childNodes.splice(svgIndex, 1, toSvg);
+            this.clearChildrenDom();
+        }
+        // // 设置新SVG元素的父节点为当前节点。
+        // toSvg.parent = slotNode;
+        // 更新渲染，以显示替换或添加的新SVG元素。
+        slotNode.mount(this.dom);
     }
-    replaceSvg(svg) {
-        this.childNodes.splice(1, 1, svg);
-        svg.parent = this;
-        this.render();
-    }
+    /**
+     * 组件挂载后的钩子函数。
+     * 该函数目前用于处理加载状态的动画效果。
+     */
     mounted() {
         /**
          * loading 效果
-         * todo css 中配置 @keyframes rotating {
+         * todo css 中配置
+         * @keyframes rotating {
          *   0% {
          *     transform: rotateZ(0deg);
          *   }
@@ -79,10 +142,11 @@ class TdIcon extends ui_abstract_1.UI {
          * 现在配置的不生效 ？？？？  shadowRoot 会隔离了样式。
          * 而打包时，样式会在最外层的项目中生成，导致样式失效。
          */
-        // if (this.config?.loading) {
+        // if (this.props.loading) {
         //   const a = createRotatableElement(this.dom, 0, 60);
         //   a.start();
         // }
     }
 }
 exports.TdIcon = TdIcon;
+TdIcon.initCalled = false;

package/src/components/basic/td-icon/td-icon.interface.d.ts

@@ -1,13 +1,43 @@
 import { TypeSvgSvg } from '@type-dom/framework';
 import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { TdIcon } from './td-icon.class';
+/**
+ * 定义了图标的接口，继承自IUI接口。
+ * 此接口用于规范图标的属性和行为。
+ */
 export interface ITdIcon extends IUI {
+    /**
+     * 类名，固定为'TdIcon'，用于在HTML元素上应用样式。
+     */
     className: 'TdIcon';
 }
+/**
+ * 定义了图标配置的接口，扩展了IUIConfig接口。
+ * 这些配置用于自定义图标的展示方式。
+ */
 export interface ITdIconConfig extends IUIConfig {
-    SvgClass: any;
-    svgObj: TypeSvgSvg;
-    size: string;
-    color: string;
-    loading: boolean;
-    position: 'left' | 'right';
+    /**
+     * 可选。指定一个SVG图形对象，用于显示自定义SVG图标。
+     */
+    svgObj?: TypeSvgSvg;
+    /**
+     * 可选。指定图标的大小，可以是字符串（如"20px"）或数字。
+     */
+    size?: string | number;
+    /**
+     * 可选。指定图标的颜色，使用字符串表示的颜色值。
+     */
+    color?: string;
+    /**
+     * 可选。指定图标是否处于加载状态，用于显示加载中的动画效果。
+     */
+    loading?: boolean;
+    /**
+     * 可选。指定图标的对齐方式，可以是"left"（左对齐）或"right"（右对齐）。
+     */
+    position?: 'left' | 'right';
+    /**
+     * 可选。用于插槽的SVG图形对象，可以替换默认的图标展示。
+     */
+    slot?: TypeSvgSvg | TdIcon;
 }

package/src/components/basic/td-icon/td-icon.style.d.ts

@@ -1,14 +1,5 @@
-import { IStyle } from '@type-dom/framework';
-import './icon.scss';
-export declare const $tdIcon: Partial<IStyle>;
-export declare const $iconLoading: {
-    animation: string;
-};
-export declare const $iconRight: {
-    marginLeft: string;
-    float: string;
-};
-export declare const $iconLeft: {
-    marginRight: string;
-    float: string;
-};
+import { IStyle } from '@type-dom/css-type';
+export declare const $tdIcon: IStyle;
+export declare const $iconLoading: IStyle;
+export declare const $iconRight: IStyle;
+export declare const $iconLeft: IStyle;

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

@@ -2,21 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.$iconLeft = exports.$iconRight = exports.$iconLoading = exports.$tdIcon = void 0;
 const framework_1 = require("@type-dom/framework");
-require("./icon.scss");
 exports.$tdIcon = {
-    // height: '1em',
+    height: '1em',
     width: '1em',
     lineHeight: '1em',
-    display: framework_1.StyleDisplay.inlineFlex,
+    display: 'inline-flex',
     justifyContent: 'center',
     alignItems: 'center',
-    position: framework_1.StylePosition.relative,
+    position: 'relative',
     fill: 'currentColor',
-    // color: var(--color),
+    // color: 'var(--color)',
     fontSize: 'inherit'
 };
 exports.$iconLoading = {
-    animation: 'rotating 2s linear infinite'
+    animation: `rotating-${framework_1.vHash} 2s linear infinite`
 };
 exports.$iconRight = {
     marginLeft: '5px',

package/src/components/basic/td-layout/td-col/td-col.class.d.ts

@@ -1,13 +1,13 @@
+import { UI } from '../../../../ui/ui.abstract';
 import { TdRow } from '../td-row/td-row.class';
 import { ITdCol, ITdColConfig } from './td-col.interface';
-import { UI } from '../../../../ui/ui.abstract';
 export declare class TdCol extends UI implements ITdCol {
     className: 'TdCol';
-    config?: ITdColConfig;
     parent?: TdRow;
-    constructor(config?: ITdColConfig);
+    props: ITdColConfig;
+    constructor(params?: ITdColConfig);
     get screenWidth(): number;
-    setConfig(config?: ITdColConfig): void;
+    setup(): void;
     resize(): void;
     initEvents(): void;
 }

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

@@ -5,47 +5,47 @@ const rxjs_1 = require("rxjs");
 const utils_1 = require("@type-dom/utils");
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 class TdCol extends ui_abstract_1.UI {
-    constructor(config) {
-        super();
+    constructor(params) {
+        super(params);
         this.className = 'TdCol';
-        this.config = config;
-        this.setConfig(config);
+        this.addChild(this.getSlotNode());
+        this.props = this.setParams(params);
     }
     get screenWidth() {
         return window.innerWidth || document.documentElement.clientWidth;
     }
-    setConfig(config) {
-        super.setConfig(config);
-        if (config === null || config === void 0 ? void 0 : config.span) {
-            if (config.span === 0) {
-                this.addStyleObj({
+    setup() {
+        const props = this.props;
+        if (props === null || props === void 0 ? void 0 : props.span) {
+            if (props.span === 0) {
+                this.ctrl.addStyleObj({
                     display: 'none'
                 });
             }
             else {
-                const proportion = (0, utils_1.formatFloat)(config.span / 24) * 100 + '%';
-                this.addStyleObj({
+                const proportion = (0, utils_1.formatFloat)(props.span / 24) * 100 + '%';
+                this.ctrl.addStyleObj({
                     maxWidth: proportion,
                     flex: '0 0 ' + proportion
                 });
             }
         }
-        if (config === null || config === void 0 ? void 0 : config.offset) {
-            const proportion = (0, utils_1.formatFloat)(config.offset / 24) * 100 + '%';
-            this.addStyleObj({
+        if (props === null || props === void 0 ? void 0 : props.offset) {
+            const proportion = (0, utils_1.formatFloat)(props.offset / 24) * 100 + '%';
+            this.ctrl.addStyleObj({
                 marginLeft: proportion
             });
         }
-        if (config === null || config === void 0 ? void 0 : config.pull) {
-            const proportion = (0, utils_1.formatFloat)(config.pull / 24) * 100 + '%';
-            this.addStyleObj({
+        if (props === null || props === void 0 ? void 0 : props.pull) {
+            const proportion = (0, utils_1.formatFloat)(props.pull / 24) * 100 + '%';
+            this.ctrl.addStyleObj({
                 position: 'relative',
                 right: proportion
             });
         }
-        if (config === null || config === void 0 ? void 0 : config.push) {
-            const proportion = (0, utils_1.formatFloat)(config.push / 24) * 100 + '%';
-            this.addStyleObj({
+        if (props === null || props === void 0 ? void 0 : props.push) {
+            const proportion = (0, utils_1.formatFloat)(props.push / 24) * 100 + '%';
+            this.ctrl.addStyleObj({
                 position: 'relative',
                 left: proportion
             });
@@ -53,62 +53,65 @@ class TdCol extends ui_abstract_1.UI {
         this.resize();
     }
     resize() {
-        // console.log('this.screenWidth is ', this.screenWidth);
-        const config = this.config;
-        if (config === null || config === void 0 ? void 0 : config.xs) {
+        console.log('this.screenWidth is ', this.screenWidth);
+        const props = this.props;
+        if (props === null || props === void 0 ? void 0 : props.xs) {
             if (this.screenWidth < 768) {
                 // 超小屏幕（xs）
-                // console.log('当前屏幕尺寸小于768px，执行xs断点下的操作');
-                const proportion = (0, utils_1.formatFloat)(config.xs / 24) * 100 + '%';
-                this.setStyleObj({
+                // 当前屏幕尺寸小于768px，执行xs断点下的操作
+                const proportion = (0, utils_1.formatFloat)(props.xs / 24) * 100 + '%';
+                this.ctrl.setStyleObj({
                     maxWidth: proportion,
                     flex: '0 0 ' + proportion
                 });
             }
         }
-        if (config === null || config === void 0 ? void 0 : config.sm) {
-            if (this.screenWidth >= 768 && this.screenWidth < 992) {
+        if (props === null || props === void 0 ? void 0 : props.sm) {
+            if (this.screenWidth >= 768) {
+                // && this.screenWidth < 992
                 // 小屏幕（sm）
-                // console.log('当前屏幕尺寸在768px至991px之间，执行md断点下的操作');
+                // 当前屏幕尺寸在768px至991px之间，执行md断点下的操作
                 // 设置你的值或执行相应JS代码
-                const proportion = (0, utils_1.formatFloat)(config.sm / 24) * 100 + '%';
-                this.setStyleObj({
+                const proportion = (0, utils_1.formatFloat)(props.sm / 24) * 100 + '%';
+                this.ctrl.setStyleObj({
                     maxWidth: proportion,
                     flex: '0 0 ' + proportion
                 });
             }
         }
-        if (config === null || config === void 0 ? void 0 : config.md) {
-            if (this.screenWidth >= 992 && this.screenWidth < 1200) {
+        if (props === null || props === void 0 ? void 0 : props.md) {
+            if (this.screenWidth >= 992) {
+                // && this.screenWidth < 1200
                 // 中屏幕（md）
-                // console.log('当前屏幕尺寸在992px至1199px之间，执行lg断点下的操作');
+                // 当前屏幕尺寸在992px至1199px之间，执行lg断点下的操作
                 // 设置你的值或执行相应JS代码
-                const proportion = (0, utils_1.formatFloat)(config.md / 24) * 100 + '%';
-                this.setStyleObj({
+                const proportion = (0, utils_1.formatFloat)(props.md / 24) * 100 + '%';
+                this.ctrl.setStyleObj({
                     maxWidth: proportion,
                     flex: '0 0 ' + proportion
                 });
             }
         }
-        if (config === null || config === void 0 ? void 0 : config.lg) {
-            if (this.screenWidth >= 1200 && this.screenWidth < 1920) {
+        if (props === null || props === void 0 ? void 0 : props.lg) {
+            if (this.screenWidth >= 1200) {
+                // && this.screenWidth < 1920
                 // 大屏幕（lg）
-                // console.log('当前屏幕尺寸在1200px至1920px之间，执行lg断点下的操作');
+                // 当前屏幕尺寸在1200px至1920px之间，执行lg断点下的操作
                 // 设置你的值或执行相应JS代码
-                const proportion = (0, utils_1.formatFloat)(config.lg / 24) * 100 + '%';
-                this.setStyleObj({
+                const proportion = (0, utils_1.formatFloat)(props.lg / 24) * 100 + '%';
+                this.ctrl.setStyleObj({
                     maxWidth: proportion,
                     flex: '0 0 ' + proportion
                 });
             }
         }
-        if (config === null || config === void 0 ? void 0 : config.xl) {
+        if (props === null || props === void 0 ? void 0 : props.xl) {
             if (this.screenWidth >= 1920) {
                 // 超大屏幕（xl及以上）
-                // console.log('当前屏幕尺寸等于或大于1920px，执行xl断点下的操作');
+                // 当前屏幕尺寸等于或大于1920px，执行xl断点下的操作
                 // 设置你的值或执行相应JS代码
-                const proportion = (0, utils_1.formatFloat)(config.xl / 24) * 100 + '%';
-                this.setStyleObj({
+                const proportion = (0, utils_1.formatFloat)(props.xl / 24) * 100 + '%';
+                this.ctrl.setStyleObj({
                     maxWidth: proportion,
                     flex: '0 0 ' + proportion
                 });

package/src/components/basic/td-layout/td-col/td-col.interface.d.ts

@@ -3,10 +3,6 @@ export interface ITdCol extends IUI {
     className: 'TdCol';
 }
 export interface ITdColConfig extends IUIConfig {
-    /**
-     * @description custom element tag
-     */
-    tag?: string;
     /**
      * @description number of column the grid spans
      */

package/src/components/basic/td-layout/td-row/td-row.class.d.ts

@@ -1,10 +1,11 @@
-import { ITdRow, ITdRowConfig } from './td-row.interface';
 import { UI } from '../../../../ui/ui.abstract';
 import { TdCol } from '../td-col/td-col.class';
+import { ITdRow, ITdRowConfig } from './td-row.interface';
 export declare class TdRow extends UI implements ITdRow {
     className: 'TdRow';
+    props: ITdRowConfig;
     childNodes: TdCol[];
     gutter?: number;
-    constructor(config?: ITdRowConfig);
-    setConfig(config?: ITdRowConfig): void;
+    constructor(params?: ITdRowConfig);
+    setup(): void;
 }

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

@@ -7,63 +7,64 @@ class TdRow extends ui_abstract_1.UI {
     // justify: string = 'start';
     // align: string = 'top';
     // tag: string = 'div';
-    constructor(config) {
-        super();
+    constructor(params) {
+        super(params);
         this.className = 'TdRow';
-        this.addStyleObj({
+        this.ctrl.addStyleObj({
             display: 'flex',
             flexWrap: 'wrap',
             position: 'relative',
             boxSizing: 'border-box'
         });
         this.childNodes = [];
-        this.setConfig(config);
+        this.addChild(this.getSlotNode());
+        this.props = this.setParams(params);
     }
-    setConfig(config) {
-        super.setConfig(config);
-        if (config === null || config === void 0 ? void 0 : config.gutter) {
-            this.gutter = config.gutter;
-            this.addStyleObj({
-                marginLeft: `-${config.gutter / 2}px`,
-                marginRight: `-${config.gutter / 2}px`
+    setup() {
+        const props = this.props;
+        if (props === null || props === void 0 ? void 0 : props.gutter) {
+            this.gutter = props.gutter;
+            this.ctrl.addStyleObj({
+                marginLeft: `-${props.gutter / 2}px`,
+                marginRight: `-${props.gutter / 2}px`
             });
             this.children.forEach((child) => {
                 if (child instanceof td_col_class_1.TdCol) {
-                    if (config.gutter) {
-                        child.addStyleObj({
+                    if (props.gutter) {
+                        child.ctrl.addStyleObj({
                             boxSizing: 'border-box',
-                            paddingLeft: `${config.gutter / 2}px`,
-                            paddingRight: `${config.gutter / 2}px`
+                            paddingLeft: `${props.gutter / 2}px`,
+                            paddingRight: `${props.gutter / 2}px`
                         });
                     }
                 }
             });
         }
-        if (config === null || config === void 0 ? void 0 : config.justify) {
-            // this.setJustify(config.justify);
-            switch (config.justify) {
+        if (props === null || props === void 0 ? void 0 : props.justify) {
+            // this.setJustify(props.justify);
+            switch (props.justify) {
                 case 'center':
-                    this.addStyleObj({
+                    this.ctrl.addStyleObj({
                         justifyContent: 'center'
                     });
                     break;
                 case 'end':
-                    this.addStyleObj({
+                    this.ctrl.addStyleObj({
                         justifyContent: 'flex-end'
                     });
                     break;
                 case 'space-between':
-                    this.addStyleObj({
+                    this.ctrl.addStyleObj({
                         justifyContent: 'space-between'
                     });
                     break;
                 case 'space-around':
-                    this.addStyleObj({
+                    this.ctrl.addStyleObj({
                         justifyContent: 'space-around'
                     });
                     break;
                 case 'space-evenly':
-                    this.addStyleObj({
+                    this.ctrl.addStyleObj({
                         justifyContent: 'space-evenly'
                     });
                     break;
@@ -71,26 +72,26 @@ class TdRow extends ui_abstract_1.UI {
                     break;
             }
         }
-        if (config === null || config === void 0 ? void 0 : config.align) {
-            // this.setAlign(config.align);
-            switch (config.align) {
+        if (props === null || props === void 0 ? void 0 : props.align) {
+            // this.setAlign(props.align);
+            switch (props.align) {
                 case 'top':
-                    this.addStyleObj({
+                    this.ctrl.addStyleObj({
                         alignItems: 'flex-start'
                     });
                     break;
                 case 'middle':
-                    this.addStyleObj({
+                    this.ctrl.addStyleObj({
                         alignItems: 'center'
                     });
                     break;
                 case 'bottom':
-                    this.addStyleObj({
+                    this.ctrl.addStyleObj({
                         alignItems: 'flex-end'
                     });
                     break;
                 case 'stretch':
-                    this.addStyleObj({
+                    this.ctrl.addStyleObj({
                         alignItems: 'stretch'
                     });
                     break;

package/src/components/basic/td-layout/td-row/td-row.interface.d.ts

@@ -12,7 +12,6 @@ export interface ITdRowConfig extends IUIConfig {
     gutter?: number;
     justify?: string;
     align?: string;
-    tag?: string;
 }
 export declare const RowJustify: readonly ["start", "center", "end", "space-around", "space-between", "space-evenly"];
 export declare const RowAlign: readonly ["top", "middle", "bottom"];

package/src/components/basic/td-link/td-link.class.d.ts

@@ -1,11 +1,11 @@
 import { UI } from '../../../ui/ui.abstract';
-import { TdIcon } from '../td-icon/td-icon.class';
 import { ITdLink, ITdLinkConfig } from './td-link.interface';
 export declare class TdLink extends UI implements ITdLink {
     className: 'TdLink';
-    config?: ITdLinkConfig;
-    icon?: TdIcon;
-    constructor(configs: ITdLinkConfig);
-    setConfig(config?: Partial<ITdLinkConfig>): void;
+    props: ITdLinkConfig;
+    private inner?;
+    constructor(params: ITdLinkConfig);
+    setup(): void;
     initEvents(): void;
+    handleClick(event: MouseEvent): void;
 }