@type-dom/ui 0.0.3 → 0.0.5

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

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBordered = exports.$descriptionsCellContentStyle = exports.$descriptionsCellLabelStyle = exports.$descriptionsItemVerticalLabelPaddingBottom = exports.useSize = exports.$descriptionsItemLabelMarginRight = exports.$descriptionsBodyTableCellStyle = exports.$descriptionsBodyTableStyle = exports.$descriptionsBodyStyle = exports.$descriptionsHeaderTitleStyle = exports.$descriptionsHeaderStyle = exports.$descriptionsStyle = exports.$descriptions = exports.$descriptionsCellFontSize = exports.$descriptionsBorderedCellPadding = exports.$descriptionsCellPaddingBottom = exports.$descriptionsTitleFontSize = exports.$descriptionsHeaderMarginBottom = void 0;
+const var_1 = require("../../../styles/var");
+const td_input_style_1 = require("../../form/td-input/td-input.style");
+exports.$descriptionsHeaderMarginBottom = {
+    large: '20px',
+    default: '16px',
+    small: '12px'
+};
+exports.$descriptionsTitleFontSize = {
+    large: '16px',
+    default: '16px',
+    small: '14px'
+};
+exports.$descriptionsCellPaddingBottom = {
+    large: '16px',
+    default: '12px',
+    small: '8px'
+};
+exports.$descriptionsBorderedCellPadding = {
+    large: '12px 15px',
+    default: '8px 11px',
+    small: '4px 7px'
+};
+exports.$descriptionsCellFontSize = {
+    large: '14px',
+    default: '14px',
+    small: '12px'
+};
+// Descriptions
+// css3 var in packages/theme-chalk/src/descriptions.scss
+exports.$descriptions = {
+    // tableBorder: 1px solid getCssVar('border-color-lighter'),
+    tableBorder: '1px solid ' + var_1.$borderColor.lighter,
+    // itemBorderedLabelBackground: getCssVar('fill-color', 'light'),
+    itemBorderedLabelBackground: var_1.$fillColor.light
+};
+exports.$descriptionsStyle = {
+    boxSizing: 'border-box',
+    // fontSize: getCssVar('font-size', 'base'),
+    fontSize: var_1.$fontSizes.base,
+    // color: getCssVar('text-color', 'primary'),
+    color: var_1.$textColor.primary
+};
+exports.$descriptionsHeaderStyle = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    // margin-bottom: map.get($descriptions-header-margin-bottom, 'default'),
+    marginBottom: exports.$descriptionsHeaderMarginBottom.default
+};
+exports.$descriptionsHeaderTitleStyle = {
+    // color: getCssVar('text-color', 'primary'),
+    color: var_1.$textColor.primary,
+    // font-size: map.get($descriptions-title-font-size, 'default'),
+    fontSize: exports.$descriptionsTitleFontSize.default,
+    fontWeight: 'bold'
+};
+exports.$descriptionsBodyStyle = {
+    // background-color: getCssVar('fill-color', 'blank')
+    backgroundColor: var_1.$fillColor.blank
+};
+exports.$descriptionsBodyTableStyle = {
+    borderCollapse: 'collapse',
+    width: '100%'
+};
+exports.$descriptionsBodyTableCellStyle = {
+    // display: 'inline-flex', // add by me
+    boxSizing: 'border-box',
+    textAlign: 'left',
+    fontWeight: 'normal',
+    lineHeight: '23px',
+    // font-size: map.get($descriptions-cell-font-size, 'default'),
+    fontSize: exports.$descriptionsCellFontSize.default
+};
+exports.$descriptionsItemLabelMarginRight = {
+    large: '16px',
+    default: '16px',
+    small: '12px'
+};
+function useSize(config) {
+    const size = (config === null || config === void 0 ? void 0 : config.size) || 'default';
+    // if (size !== 'default') {
+    exports.$descriptionsStyle.fontSize = td_input_style_1.$inputFontSize[size];
+    exports.$descriptionsHeaderStyle.marginBottom = exports.$descriptionsHeaderMarginBottom[size];
+    exports.$descriptionsHeaderTitleStyle.fontSize = exports.$descriptionsTitleFontSize[size];
+    exports.$descriptionsBodyTableStyle.fontSize = exports.$descriptionsCellFontSize[size];
+    exports.$descriptionsBodyTableCellStyle.fontSize = exports.$descriptionsCellFontSize[size];
+    if (config === null || config === void 0 ? void 0 : config.border) {
+        exports.$descriptionsBodyTableCellStyle.padding =
+            exports.$descriptionsBorderedCellPadding[size];
+    }
+    else {
+        exports.$descriptionsBodyTableCellStyle.paddingBottom =
+            exports.$descriptionsCellPaddingBottom[size];
+        exports.$descriptionsCellLabelStyle.marginRight =
+            exports.$descriptionsItemLabelMarginRight[size];
+        exports.$descriptionsCellLabelStyle.paddingBottom =
+            exports.$descriptionsItemVerticalLabelPaddingBottom[size];
+    }
+    // }
+}
+exports.useSize = useSize;
+exports.$descriptionsItemVerticalLabelPaddingBottom = {
+    large: '8px',
+    default: '6px',
+    small: '4px'
+};
+exports.$descriptionsCellLabelStyle = {};
+exports.$descriptionsCellContentStyle = {
+    color: var_1.$textColor.regular
+};
+function useBordered(config) {
+    const bordered = config === null || config === void 0 ? void 0 : config.border;
+    if (bordered) {
+        exports.$descriptionsCellLabelStyle = {
+            fontWeight: 'bold',
+            color: var_1.$textColor.regular,
+            backgroundColor: exports.$descriptions.itemBorderedLabelBackground
+        };
+        exports.$descriptionsBodyTableCellStyle.border = exports.$descriptions.tableBorder;
+        exports.$descriptionsBodyTableCellStyle.padding =
+            exports.$descriptionsBorderedCellPadding.default;
+        exports.$descriptionsCellContentStyle.color = var_1.$textColor.primary;
+    }
+    else {
+        exports.$descriptionsBodyTableCellStyle.border = undefined;
+        exports.$descriptionsBodyTableCellStyle.padding = undefined;
+        exports.$descriptionsBodyTableCellStyle.paddingBottom =
+            exports.$descriptionsCellPaddingBottom.default;
+        exports.$descriptionsCellLabelStyle = {
+            color: var_1.$textColor.primary,
+            marginRight: exports.$descriptionsItemLabelMarginRight.default
+        };
+        if (config.direction === 'vertical') {
+            exports.$descriptionsCellLabelStyle.paddingBottom =
+                exports.$descriptionsItemVerticalLabelPaddingBottom.default;
+        }
+    }
+}
+exports.useBordered = useBordered;

package/src/components/data/td-descriptions/td-descritions-cell.d.ts

@@ -0,0 +1,15 @@
+import { UI } from '../../../ui/ui.abstract';
+import { IUIConfig } from '../../../ui/ui.interface';
+import { ITdDescriptionsItemConfig } from '../td-descriptions-item/td-descriptions-item.interface';
+export interface ITdDescriptionsCellConfig extends IUIConfig {
+    cell?: ITdDescriptionsItemConfig;
+    tag?: string;
+    type?: string;
+    span?: number;
+}
+export declare class TdDescriptionsCell extends UI {
+    className: 'TdDescriptionsCell';
+    props: ITdDescriptionsCellConfig;
+    constructor(params?: ITdDescriptionsCellConfig);
+    created(): void;
+}

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

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdDescriptionsCell = void 0;
+const framework_1 = require("@type-dom/framework");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_descriptions_style_1 = require("./td-descriptions.style");
+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);
+    }
+    created() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+        const descriptions = this.up('TdDescriptions');
+        // console.log('descriptions is ', descriptions);
+        if (!descriptions) {
+            throw Error('TdDescriptionsRow need TdDescriptions as parent. ');
+        }
+        const descriptionsConfig = descriptions.props;
+        const isVertical = (descriptionsConfig === null || descriptionsConfig === void 0 ? void 0 : descriptionsConfig.direction) === 'vertical';
+        // useSize(descriptionsConfig);
+        // useBordered(descriptionsConfig);
+        this.ctrl.addStyleObj(td_descriptions_style_1.$descriptionsBodyTableCellStyle);
+        const props = this.props;
+        const span = ((_a = props.cell) === null || _a === void 0 ? void 0 : _a.span) || 1;
+        // console.log('span is ', span);
+        switch (props.type) {
+            case 'label':
+                console.log('label . ');
+                this.ctrl.addAttrObj({
+                    colspan: isVertical ? span : 1,
+                    // colspan: span * 2 - 1 || 1
+                });
+                this.ctrl.addStyleObj(td_descriptions_style_1.$descriptionsCellLabelStyle);
+                if ((_c = (_b = props.cell) === null || _b === void 0 ? void 0 : _b.slots) === null || _c === void 0 ? void 0 : _c.label) {
+                    this.addChild(props === null || props === void 0 ? void 0 : props.cell.slots.label);
+                }
+                else if ((_d = props.cell) === null || _d === void 0 ? void 0 : _d.label) {
+                    this.addChild(new framework_1.TextNode(props.cell.label));
+                    if (props.cell.labelStyle) {
+                        this.ctrl.addStyleObj((_e = props.cell) === null || _e === void 0 ? void 0 : _e.labelStyle);
+                    }
+                }
+                if ((_f = props.cell) === null || _f === void 0 ? void 0 : _f.labelAlign) {
+                    this.ctrl.addStyleObj({
+                        textAlign: props.cell.labelAlign
+                    });
+                }
+                if ((_g = props.cell) === null || _g === void 0 ? void 0 : _g.width) {
+                    this.ctrl.addStyleObj({
+                        width: props.cell.width
+                    });
+                }
+                break;
+            case 'content':
+                // debugger;
+                console.log('content . ');
+                this.ctrl.addAttrObj({
+                    colspan: span * 2 - 1 || 1
+                });
+                this.ctrl.addStyleObj(td_descriptions_style_1.$descriptionsCellContentStyle);
+                if (typeof ((_h = props.cell) === null || _h === void 0 ? void 0 : _h.text) === 'string') {
+                    this.addChild(new framework_1.TextNode(props.cell.text));
+                }
+                else if ((_j = props.cell) === null || _j === void 0 ? void 0 : _j.slot) {
+                    this.slotChild(props.cell.slot);
+                }
+                if ((_k = props.cell) === null || _k === void 0 ? void 0 : _k.contentStyle) {
+                    this.ctrl.addStyleObj(props.cell.contentStyle);
+                }
+                if ((_l = props.cell) === null || _l === void 0 ? void 0 : _l.align) {
+                    this.ctrl.addStyleObj({
+                        textAlign: props.cell.align
+                    });
+                }
+                if ((_m = props.cell) === null || _m === void 0 ? void 0 : _m.width) {
+                    this.ctrl.addStyleObj({
+                        width: props.cell.width
+                    });
+                }
+                break;
+            default:
+                this.ctrl.addAttrObj({
+                    colspan: span
+                });
+                if ((_p = (_o = props.cell) === null || _o === void 0 ? void 0 : _o.slots) === null || _p === void 0 ? void 0 : _p.label) {
+                    props.cell.slots.label.ctrl.setStyleObj(td_descriptions_style_1.$descriptionsCellLabelStyle);
+                    this.addChild((_r = (_q = props.cell) === null || _q === void 0 ? void 0 : _q.slots) === null || _r === void 0 ? void 0 : _r.label);
+                }
+                else if ((_s = props.cell) === null || _s === void 0 ? void 0 : _s.label) {
+                    this.addChild(new framework_1.Span({
+                        text: props.cell.label,
+                        styleObj: Object.assign(td_descriptions_style_1.$descriptionsCellLabelStyle, props.cell.labelStyle)
+                    }));
+                }
+                if ((_t = props.cell) === null || _t === void 0 ? void 0 : _t.text) {
+                    this.addChild(new framework_1.Span({
+                        text: props.cell.text,
+                        styleObj: td_descriptions_style_1.$descriptionsCellContentStyle
+                    }));
+                }
+                else if ((_u = props.cell) === null || _u === void 0 ? void 0 : _u.slot) {
+                    this.slotChild(props.cell.slot);
+                }
+                break;
+        }
+    }
+}
+exports.TdDescriptionsCell = TdDescriptionsCell;

package/src/components/data/td-descriptions-item/td-descriptions-item.class.d.ts

@@ -0,0 +1,10 @@
+import { TextNode, TypeNode } from '@type-dom/framework';
+import { UI } from '../../../ui/ui.abstract';
+import { ITdDescriptionsItem, ITdDescriptionsItemConfig } from './td-descriptions-item.interface';
+export declare class TdDescriptionsItem extends UI implements ITdDescriptionsItem {
+    className: 'TdDescriptionsItem';
+    props: ITdDescriptionsItemConfig;
+    label?: TypeNode;
+    content?: TextNode;
+    constructor(params?: ITdDescriptionsItemConfig);
+}

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdDescriptionsItem = void 0;
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+class TdDescriptionsItem extends ui_abstract_1.UI {
+    constructor(params) {
+        super(params);
+        this.className = 'TdDescriptionsItem';
+        // if (config?.slots?.label) {
+        //   this.label = config.slots.label
+        // } else if (config?.label) {
+        //   this.label = new TextNode(config.label);
+        // }
+        if (params === null || params === void 0 ? void 0 : params.slot) {
+            this.slotChild(params === null || params === void 0 ? void 0 : params.slot);
+        }
+        this.props = this.setParams(params);
+    }
+}
+exports.TdDescriptionsItem = TdDescriptionsItem;

package/src/components/data/td-descriptions-item/td-descriptions-item.interface.d.ts

@@ -0,0 +1,51 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { TypeHtml } from '@type-dom/framework';
+import { IStyle } from '@type-dom/css-type';
+export interface ITdDescriptionsItem extends IUI {
+    className: 'TdDescriptionsItem';
+}
+export interface ITdDescriptionsItemConfig extends IUIConfig {
+    /**
+     * @description label text
+     *     default: '',
+     */
+    label?: string;
+    /**
+     * @description colspan of column
+     *     default: 1,
+     */
+    span?: number;
+    /**
+     * @description column width, the width of the same column in different rows is set by the max value (If no `border`, width contains label and content)
+     *     default: '',
+     */
+    width?: string | number;
+    /**
+     * @description column minimum width, columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion (If no`border`, width contains label and content)
+     *     default: '',
+     */
+    minWidth?: string | number;
+    /**
+     * @description column content alignment (If no `border`, effective for both label and content)
+     *     default: 'left',
+     */
+    align?: string;
+    /**
+     * @description column label alignment, if omitted, the value of the above `align` attribute will be applied (If no `border`, please use `align` attribute)
+     *     default: '',
+     */
+    labelAlign?: string;
+    /**
+     * @description column content custom class name
+     *     default: '',
+     */
+    contentStyle?: IStyle;
+    /**
+     * @description column label custom class name
+     *     default: '',
+     */
+    labelStyle?: IStyle;
+    slots?: {
+        label: TypeHtml;
+    };
+}

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

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

package/src/components/data/td-descriptions-item/td-descriptions-item.style.d.ts

@@ -0,0 +1,10 @@
+export declare const $descriptionsItemLabelMarginRight: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $descriptionsItemVerticalLabelPaddingBottom: {
+    large: string;
+    default: string;
+    small: string;
+};

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$descriptionsItemVerticalLabelPaddingBottom = exports.$descriptionsItemLabelMarginRight = void 0;
+exports.$descriptionsItemLabelMarginRight = {
+    large: '16px',
+    default: '16px',
+    small: '12px'
+};
+exports.$descriptionsItemVerticalLabelPaddingBottom = {
+    large: '8px',
+    default: '6px',
+    small: '4px'
+};

package/src/components/data/td-empty/img-empty.class.d.ts

@@ -0,0 +1,5 @@
+import { ITypeConfig, TypeSvgSvg } from '@type-dom/framework';
+export declare class ImgEmpty extends TypeSvgSvg {
+    className: 'ImgEmpty';
+    constructor(params?: ITypeConfig);
+}

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

@@ -0,0 +1,204 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImgEmpty = void 0;
+const framework_1 = require("@type-dom/framework");
+const td_empty_style_1 = require("./td-empty.style");
+class ImgEmpty extends framework_1.TypeSvgSvg {
+    constructor(params) {
+        super();
+        this.className = 'ImgEmpty';
+        this.ctrl.addAttrObj({
+            name: 'image-empty',
+            viewBox: '0 0 79 86'
+        });
+        (params === null || params === void 0 ? void 0 : params.styleObj) && this.ctrl.addStyleObj(params.styleObj);
+        const id = 111;
+        this.addChild(new framework_1.SvgDefs({
+            childNodes: [
+                new framework_1.SvgLinearGradient({
+                    attrObj: {
+                        id: `linearGradient-1-` + id,
+                        x1: '38.8503086%',
+                        y1: '0%',
+                        x2: '61.1496914%',
+                        y2: '100%'
+                    },
+                    childNodes: [
+                        new framework_1.SvgStop({
+                            attrObj: {
+                                stopColor: td_empty_style_1.$empty['fill-color-1'],
+                                offset: '0%'
+                            }
+                        }),
+                        new framework_1.SvgStop({
+                            attrObj: {
+                                stopColor: td_empty_style_1.$empty['fill-color-4'],
+                                offset: '100%'
+                            }
+                        })
+                    ]
+                }),
+                new framework_1.SvgLinearGradient({
+                    attrObj: {
+                        id: `linearGradient-2-` + id,
+                        x1: '0%',
+                        y1: '9.5%',
+                        x2: '100%',
+                        y2: '90.5%'
+                    },
+                    childNodes: [
+                        new framework_1.SvgStop({
+                            attrObj: {
+                                stopColor: td_empty_style_1.$empty['fill-color-1'],
+                                offset: '0%'
+                            }
+                        }),
+                        new framework_1.SvgStop({
+                            attrObj: {
+                                stopColor: td_empty_style_1.$empty['fill-color-6'],
+                                offset: '100%'
+                            }
+                        })
+                    ]
+                }),
+                new framework_1.SvgRect({
+                    attrObj: {
+                        id: `path-3-` + id,
+                        x: 0,
+                        y: 0,
+                        width: 17,
+                        height: 36
+                    }
+                })
+            ]
+        }));
+        this.addChild(new framework_1.SvgG({
+            attrObj: {
+                id: 'Illustrations',
+                stroke: 'none',
+                strokeWidth: '1',
+                fill: 'none',
+                fillRule: 'evenodd'
+            },
+            childNodes: [
+                new framework_1.SvgG({
+                    attrObj: {
+                        id: 'B-type',
+                        transform: 'translate(-1268.000000, -535.000000)'
+                    },
+                    childNodes: [
+                        new framework_1.SvgG({
+                            attrObj: {
+                                id: 'Group-2',
+                                transform: 'translate(1268.000000, 535.000000)'
+                            },
+                            childNodes: [
+                                new framework_1.SvgPath({
+                                    attrObj: {
+                                        id: 'Oval-Copy-2',
+                                        d: 'M39.5,86 C61.3152476,86 79,83.9106622 79,81.3333333 C79,78.7560045 57.3152476,78 35.5,78 C13.6847524,78 0,78.7560045 0,81.3333333 C0,83.9106622 17.6847524,86 39.5,86 Z',
+                                        fill: td_empty_style_1.$empty['fill-color-3']
+                                    }
+                                }),
+                                new framework_1.SvgPolygon({
+                                    attrObj: {
+                                        id: 'Rectangle-Copy-14',
+                                        fill: td_empty_style_1.$empty['fill-color-7'],
+                                        transform: 'translate(27.500000, 51.500000) scale(1, -1) translate(-27.500000, -51.500000) ',
+                                        points: '13 58 53 58 42 45 2 45'
+                                    }
+                                }),
+                                new framework_1.SvgG({
+                                    attrObj: {
+                                        id: 'Group-Copy',
+                                        transform: 'translate(34.500000, 31.500000) scale(-1, 1) rotate(-25.000000) translate(-34.500000, -31.500000) translate(7.000000, 10.000000)'
+                                    },
+                                    childNodes: [
+                                        new framework_1.SvgPolygon({
+                                            attrObj: {
+                                                id: 'Rectangle-Copy-10',
+                                                fill: td_empty_style_1.$empty['fill-color-7'],
+                                                transform: 'translate(11.500000, 5.000000) scale(1, -1) translate(-11.500000, -5.000000) ',
+                                                points: '2.84078316e-14 3 18 3 23 7 5 7'
+                                            }
+                                        }),
+                                        new framework_1.SvgPolygon({
+                                            attrObj: {
+                                                id: 'Rectangle-Copy-11',
+                                                fill: td_empty_style_1.$empty['fill-color-5'],
+                                                points: '-3.69149156e-15 7 38 7 38 43 -3.69149156e-15 43'
+                                            }
+                                        }),
+                                        new framework_1.SvgRect({
+                                            attrObj: {
+                                                id: 'Rectangle-Copy-12',
+                                                fill: 'url(#linearGradient-1-' + id + ')',
+                                                transform: 'translate(46.500000, 25.000000) scale(-1, 1) translate(-46.500000, -25.000000) ',
+                                                x: 38,
+                                                y: 7,
+                                                width: 17,
+                                                height: 36
+                                            }
+                                        }),
+                                        new framework_1.SvgPolygon({
+                                            attrObj: {
+                                                id: 'Rectangle-Copy-13',
+                                                fill: td_empty_style_1.$empty['fill-color-2'],
+                                                transform: 'translate(39.500000, 3.500000) scale(-1, 1) translate(-39.500000, -3.500000) ',
+                                                points: '24 7 41 7 55 -3.63806207e-12 38 -3.63806207e-12'
+                                            }
+                                        })
+                                    ]
+                                }),
+                                new framework_1.SvgRect({
+                                    attrObj: {
+                                        id: 'Rectangle-Copy-15',
+                                        fill: 'url(#linearGradient-2-' + id + ')',
+                                        x: 13,
+                                        y: 45,
+                                        width: 40,
+                                        height: 36
+                                    }
+                                }),
+                                new framework_1.SvgG({
+                                    attrObj: {
+                                        id: 'Rectangle-Copy-17', transform: 'translate(53.000000, 45.000000)'
+                                    },
+                                    childNodes: [
+                                        new framework_1.SvgUse({
+                                            attrObj: {
+                                                id: 'Mask',
+                                                fill: td_empty_style_1.$empty['fill-color-8'],
+                                                transform: 'translate(8.500000, 18.000000) scale(-1, 1) translate(-8.500000, -18.000000) ',
+                                                xlinkHref: '#path-3-' + id
+                                            }
+                                        }),
+                                        new framework_1.SvgPolygon({
+                                            attrObj: {
+                                                id: 'Rectangle-Copy',
+                                                fill: td_empty_style_1.$empty['fill-color-9'],
+                                                mask: 'url(#mask-4-' + id + ')',
+                                                transform: 'translate(12.000000, 9.000000) scale(-1, 1) translate(-12.000000, -9.000000) ',
+                                                points: '7 0 24 0 20 18 7 16.5'
+                                            }
+                                        })
+                                    ]
+                                }),
+                                new framework_1.SvgPolygon({
+                                    attrObj: {
+                                        id: 'Rectangle-Copy-18',
+                                        fill: td_empty_style_1.$empty['fill-color-2'],
+                                        transform: 'translate(66.000000, 51.500000) scale(-1, 1) translate(-66.000000, -51.500000) ',
+                                        points: '62 45 79 45 70 58 53 58'
+                                    }
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        }));
+        // this.setParams(params);
+    }
+}
+exports.ImgEmpty = ImgEmpty;

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

@@ -0,0 +1,13 @@
+import { IStyle } from '@type-dom/css-type';
+import { UI } from '../../../ui/ui.abstract';
+import { ITdEmpty, ITdEmptyConfig } from './td-empty.interface';
+export declare class TdEmpty extends UI implements ITdEmpty {
+    className: 'TdEmpty';
+    props: ITdEmptyConfig;
+    private image;
+    private description;
+    private bottom?;
+    constructor(params?: ITdEmptyConfig);
+    get emptyDescription(): string;
+    get imageStyle(): IStyle;
+}