@type-dom/ui 0.0.3 → 0.0.5

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

@@ -0,0 +1 @@
+"use strict";

package/src/components/data/td-carousel/td-carousel.interface.js

@@ -0,0 +1 @@
+"use strict";

package/src/components/data/td-check-tag/td-check-tag.class.d.ts

@@ -0,0 +1,12 @@
+import { UI } from '../../../ui/ui.abstract';
+import { ITdCheckTag, ITdCheckTagConfig } from './td-check-tag.interface';
+export declare class TdCheckTag extends UI implements ITdCheckTag {
+    className: 'TdCheckTag';
+    props: ITdCheckTagConfig;
+    checked?: boolean;
+    private type;
+    constructor(params?: ITdCheckTagConfig);
+    initEvents(): void;
+    handleChange(): void;
+    setChecked(checked?: boolean): void;
+}

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

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdCheckTag = void 0;
+const var_1 = require("../../../styles/var");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const event_1 = require("../../../constants/event");
+const td_check_tag_style_1 = require("./td-check-tag.style");
+class TdCheckTag extends ui_abstract_1.UI {
+    constructor(params) {
+        super(params, 'span');
+        this.className = 'TdCheckTag';
+        this.ctrl.addAttrName('td-check-tag');
+        this.type = (params === null || params === void 0 ? void 0 : params.type) || 'primary';
+        (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);
+    }
+    initEvents() {
+        this.addEvents({
+            click: () => {
+                // if (this.props.emits?.change) {
+                //   this.checked = !this.checked;
+                //   this.setChecked(this.checked);
+                // }
+                this.handleChange();
+            },
+            mouseenter: () => {
+                if (this.checked) {
+                    this.ctrl.setStyleObj({
+                        backgroundColor: var_1.$colors[this.type]['light-7']
+                    });
+                }
+                else {
+                    this.ctrl.setStyleObj({
+                        backgroundColor: var_1.$colors.info['light-7']
+                    });
+                }
+            },
+            mouseleave: () => {
+                if (this.checked) {
+                    this.ctrl.setStyleObj({
+                        backgroundColor: var_1.$colors[this.type]['light-8']
+                    });
+                }
+                else {
+                    this.ctrl.setStyleObj({
+                        backgroundColor: var_1.$colors.info['light-9']
+                    });
+                }
+            }
+        });
+    }
+    handleChange() {
+        this.checked = !this.checked;
+        this.setChecked(this.checked);
+        this.emit(event_1.CHANGE_EVENT, this.checked);
+        this.emit('update:checked', this.checked);
+        // emit(CHANGE_EVENT, checked)
+        // emit('update:checked', checked)
+    }
+    setChecked(checked) {
+        this.checked = checked;
+        if (checked) {
+            this.ctrl.setStyleObj(td_check_tag_style_1.$checkTagChecked[this.type]);
+        }
+        else {
+            this.ctrl.setStyleObj({
+                backgroundColor: var_1.$colors.info['light-9'],
+                color: var_1.$colors.info.base
+            });
+        }
+    }
+}
+exports.TdCheckTag = TdCheckTag;

package/src/components/data/td-check-tag/td-check-tag.interface.d.ts

@@ -0,0 +1,22 @@
+import { IType } from '../../../styles/var';
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { CHANGE_EVENT } from '../../../constants/event';
+export interface ITdCheckTag extends IUI {
+    className: 'TdCheckTag';
+}
+export interface ITdCheckTagConfig extends IUIConfig {
+    /**
+     * @description is checked
+     *     default: false,
+     */
+    checked?: boolean;
+    /**
+     * @description type of Tag
+     *     default: 'primary',
+     */
+    type?: IType;
+    emits?: {
+        'update:checked'?: (value: boolean) => void;
+        [CHANGE_EVENT]?: (value: boolean) => void;
+    };
+}

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

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const event_1 = require("../../../constants/event");

package/src/components/data/td-check-tag/td-check-tag.style.d.ts

@@ -0,0 +1,7 @@
+import { IStyle } from '@type-dom/css-type';
+import { IType } from '../../../styles/var';
+export declare const $checkTag: IStyle;
+export declare const $checkTagHover: IStyle;
+export declare const $checkTagChecked: Record<IType, IStyle<0 | (string & {}), string & {}>>;
+export declare const $checkTagCheckedHover: Record<IType, string>;
+export declare function useType(): void;

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useType = exports.$checkTagCheckedHover = exports.$checkTagChecked = exports.$checkTagHover = exports.$checkTag = void 0;
+const var_1 = require("../../../styles/var");
+const transition_1 = require("../../../styles/transition");
+exports.$checkTag = {
+    // background-color: getCssVar('color', 'info', 'light-9'),
+    backgroundColor: var_1.$colors.info['light-9'],
+    // border-radius: getCssVar('border-radius', 'base'),
+    borderRadius: var_1.$borderRadius.base,
+    // color: getCssVar('color', 'info'),
+    color: var_1.$colors.info.base,
+    cursor: 'pointer',
+    display: 'inline-block',
+    // font-size: getCssVar('font-size', 'base'),
+    fontSize: var_1.$fontSizes.base,
+    // line-height: getCssVar('font-size', 'base'),
+    lineHeight: var_1.$fontSizes.base,
+    padding: '7px 15px',
+    // transition: getCssVar('transition', 'all'),
+    transition: transition_1.$transition.all,
+    fontWeight: 'bold',
+    userSelect: 'none', // 禁止用户选中文本
+};
+exports.$checkTagHover = {
+    backgroundColor: var_1.$colors.info['light-7'],
+};
+exports.$checkTagChecked = {};
+exports.$checkTagCheckedHover = {};
+function useType() {
+    for (const type of var_1.$types) {
+        exports.$checkTagChecked[type] = {
+            backgroundColor: var_1.$colors[type]['light-8'],
+            color: var_1.$colors[type].base,
+        };
+        exports.$checkTagCheckedHover[type] = var_1.$colors[type]['light-7'];
+    }
+}
+exports.useType = useType;

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

@@ -0,0 +1,13 @@
+import { UI } from '../../../ui/ui.abstract';
+import { TdCollapseItem } from '../td-collapse-item/td-collapse-item.class';
+import type { ICollapseActiveName, ITdCollapse, ITdCollapseConfig } from './td-collapse.interface';
+export declare class TdCollapse extends UI implements ITdCollapse {
+    className: 'TdCollapse';
+    props: ITdCollapseConfig;
+    childNodes: TdCollapseItem[];
+    private activeNames;
+    constructor(params?: ITdCollapseConfig);
+    mounted(): void;
+    setActiveNames(activeNames: ICollapseActiveName[]): void;
+    handleItemClick(name: ICollapseActiveName): void;
+}

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

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdCollapse = void 0;
+const utils_1 = require("@type-dom/utils");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_collapse_style_1 = require("./td-collapse.style");
+class TdCollapse extends ui_abstract_1.UI {
+    constructor(params) {
+        var _a;
+        super(params);
+        this.className = 'TdCollapse';
+        this.childNodes = [];
+        this.ctrl.addStyleObj({
+            //   border-top: 1px solid getCssVar('collapse-border-color');
+            borderTop: '1px solid ' + td_collapse_style_1.$collapse.borderColor,
+            // border-bottom: 1px solid getCssVar('collapse-border-color');
+            borderBottom: '1px solid ' + td_collapse_style_1.$collapse.borderColor
+        });
+        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 : ''];
+        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);
+    }
+    mounted() {
+        this.setActiveNames(this.activeNames);
+    }
+    // get name() {
+    //   return this.props.name ??
+    // }
+    setActiveNames(activeNames) {
+        // this.activeNames = activeNames;
+        // if (this.props.accordion) {
+        //   this.activeNames = activeNames[0];
+        // }
+        this.activeNames = activeNames;
+        console.log('this.activeNames is ', this.activeNames);
+        if (activeNames) {
+            if (this.props.accordion) {
+                this.childNodes.forEach((item) => {
+                    if (item.props.nameId === activeNames[0]) {
+                        item.setActive(true);
+                    }
+                    else {
+                        item.setActive(false);
+                    }
+                });
+            }
+            else {
+                this.childNodes.forEach((item) => {
+                    var _a;
+                    if (activeNames && ((_a = item.props) === null || _a === void 0 ? void 0 : _a.nameId)) {
+                        if (activeNames.includes(item.props.nameId)) {
+                            item.setActive(true);
+                        }
+                        else {
+                            item.setActive(false);
+                        }
+                    }
+                });
+            }
+        }
+    }
+    handleItemClick(name) {
+        var _a;
+        console.log('handleItemClick, name is ', name);
+        if ((_a = this.props) === null || _a === void 0 ? void 0 : _a.accordion) {
+            this.setActiveNames([this.activeNames[0] === name ? '' : name]);
+        }
+        else {
+            const _activeNames = [...this.activeNames];
+            const index = _activeNames.indexOf(name);
+            if (index > -1) {
+                _activeNames.splice(index, 1);
+            }
+            else {
+                _activeNames.push(name);
+            }
+            this.setActiveNames(_activeNames);
+        }
+    }
+}
+exports.TdCollapse = TdCollapse;

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

@@ -0,0 +1,18 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { Arrayable } from '../../feedback/td-tooltip/utils';
+export interface ITdCollapse extends IUI {
+    className: 'TdCollapse';
+}
+export interface ITdCollapseConfig extends IUIConfig {
+    /**
+     * @description whether to activate accordion mode
+     */
+    accordion?: boolean;
+    /**
+     * @description currently active panel, the type is `string` in accordion mode, otherwise it is `array`
+     *   default: () => mutable([] as const),
+     */
+    modelValue?: string | number | ICollapseActiveName[];
+}
+export type ICollapseActiveName = string | number;
+export type ICollapseModelValue = Arrayable<ICollapseActiveName>;

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

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

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

@@ -0,0 +1,11 @@
+export declare const $collapse: {
+    borderColor: string;
+    headerHeight: string;
+    headerBgColor: string;
+    headerTextColor: string;
+    headerFontSize: string;
+    contentBgColor: string;
+    'content-font-size': string;
+    contentFontSize: string;
+    contentTextColor: string;
+};

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$collapse = void 0;
+const var_1 = require("../../../styles/var");
+exports.$collapse = {
+    // 'border-color': getCssVar('border-color-lighter'),
+    borderColor: var_1.$borderColor.lighter,
+    // 'header-height': '48px',
+    headerHeight: '48px',
+    // 'header-bg-color': getCssVar('fill-color', 'blank'),
+    headerBgColor: var_1.$fillColor.blank,
+    // 'header-text-color': getCssVar('text-color-primary'),
+    headerTextColor: var_1.$textColor.primary,
+    // 'header-font-size': '13px',
+    headerFontSize: '13px',
+    // 'content-bg-color': getCssVar('fill-color', 'blank'),
+    contentBgColor: var_1.$fillColor.blank,
+    'content-font-size': '13px',
+    contentFontSize: '13px',
+    // 'content-text-color': getCssVar('text-color-primary'),
+    contentTextColor: var_1.$textColor.primary
+};

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

@@ -0,0 +1,25 @@
+import { Button, Div } from '@type-dom/framework';
+import { UI } from '../../../ui/ui.abstract';
+import { TdIcon } from '../../basic/td-icon/td-icon.class';
+import { TdCollapse } from '../td-collapse/td-collapse.class';
+import { ICollapseActiveName } from '../td-collapse/td-collapse.interface';
+import { ITdCollapseItem, ITdCollapseItemConfig } from './td-collapse-item.interface';
+export declare class TdCollapseItem extends UI<undefined> implements ITdCollapseItem {
+    className: 'TdCollapseItem';
+    props: ITdCollapseItemConfig;
+    parent?: TdCollapse;
+    headerBtn: Button;
+    private disabled?;
+    wrapper: Div;
+    content: Div;
+    private focusing?;
+    private isClick?;
+    private transition;
+    arrowIcon: TdIcon;
+    constructor(params?: ITdCollapseItemConfig);
+    setActive(active: boolean): void;
+    setDisable(disabled: boolean): void;
+    handleFocus(): void;
+    handleHeaderClick(name: ICollapseActiveName): void;
+    handleEnterClick(): void;
+}

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

@@ -0,0 +1,222 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdCollapseItem = void 0;
+const framework_1 = require("@type-dom/framework");
+const svgs_1 = require("@type-dom/svgs");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const var_1 = require("../../../styles/var");
+const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
+// import { $collapseTransition, $collapseTransitionActive, $transition } from '../../../styles/transition';
+const td_collapse_style_1 = require("../td-collapse/td-collapse.style");
+const td_collapse_transition_class_1 = require("../td-collapse-transition/td-collapse-transition.class");
+class TdCollapseItem extends ui_abstract_1.UI {
+    constructor(params) {
+        var _a;
+        super(params, 'fragment');
+        this.className = 'TdCollapseItem';
+        this.headerBtn = new framework_1.Button({
+            name: 'collapse-item-header',
+            attrObj: {
+                type: 'button',
+                // ariaControls: scopedHeadId,
+                // ariaExpanded: 'isActive',
+                tabIndex: this.disabled ? -1 : 0
+            },
+            styleObj: {
+                width: '100%',
+                padding: 0,
+                border: 'none',
+                display: 'flex',
+                alignItems: 'center',
+                // height: getCssVar('collapse-header-height'),
+                height: td_collapse_style_1.$collapse.headerHeight,
+                // line-height: getCssVar('collapse-header-height'),
+                lineHeight: td_collapse_style_1.$collapse.headerHeight,
+                // background-color: getCssVar('collapse-header-bg-color'),
+                backgroundColor: td_collapse_style_1.$collapse.headerBgColor,
+                // color: getCssVar('collapse-header-text-color'),
+                color: td_collapse_style_1.$collapse.headerTextColor,
+                cursor: 'pointer',
+                // border-bottom: 1px solid getCssVar('collapse-border-color'),
+                borderBottom: '1px solid ' + td_collapse_style_1.$collapse.borderColor,
+                // font-size: getCssVar('collapse-header-font-size'),
+                fontSize: td_collapse_style_1.$collapse.headerFontSize,
+                fontWeight: 500,
+                // transition: border-bottom-color getCssVar('transition-duration'),
+                transition: 'border-bottom-color ' + var_1.$transitionDuration,
+                outline: 'none'
+            },
+            events: {
+                click: () => {
+                    const nameId = (params === null || params === void 0 ? void 0 : params.nameId) || '';
+                    this.handleHeaderClick(nameId);
+                },
+                // keydown.space.enter.stop.prevent: () => {
+                // },
+                keydown: (event) => {
+                    if (event.key === 'Enter' ||
+                        event.key === ' ') {
+                        event === null || event === void 0 ? void 0 : event.preventDefault();
+                        event === null || event === void 0 ? void 0 : event.stopPropagation();
+                        this.handleEnterClick();
+                    }
+                },
+                focus: () => {
+                    this.handleFocus();
+                },
+                blur: (evt, element) => {
+                    this.focusing = false;
+                }
+            }
+        });
+        this.addChild(this.headerBtn);
+        if ((_a = params === null || params === void 0 ? void 0 : params.slots) === null || _a === void 0 ? void 0 : _a.title) {
+            this.headerBtn.slotChild(params.slots.title);
+        }
+        else if (params === null || params === void 0 ? void 0 : params.title) {
+            this.headerBtn.setTitle(params.title);
+        }
+        this.arrowIcon = new td_icon_class_1.TdIcon({
+            svgObj: new svgs_1.ElArrowRightSvg(),
+            styleObj: {
+                margin: '0 8px 0 auto',
+                // transition: transform getCssVar('transition-duration'),
+                transition: 'transform ' + var_1.$transitionDuration,
+                fontWeight: 300
+            }
+        });
+        this.headerBtn.addChild(this.arrowIcon);
+        this.wrapper = new framework_1.Div({
+            name: 'wrapper',
+            attrObj: {
+                ariaHidden: 'true',
+                role: 'region'
+                // ariaLabelledby: scopedHeadId,
+            },
+            styleObj: {
+                // display: 'none',
+                willChange: 'height',
+                // maxHeight: 0,
+                // background-color: getCssVar('collapse-content-bg-color'),
+                backgroundColor: td_collapse_style_1.$collapse.contentBgColor,
+                overflow: 'hidden',
+                boxSizing: 'border-box',
+                // border-bottom: 1px solid getCssVar('collapse-border-color'),
+                borderBottom: '1px solid ' + td_collapse_style_1.$collapse.borderColor
+            }
+        });
+        this.content = new framework_1.Div({
+            name: 'collapse-item-content',
+            styleObj: {
+                paddingBottom: '25px',
+                // font-size: getCssVar('collapse-content-font-size'),
+                fontSize: td_collapse_style_1.$collapse.contentFontSize,
+                // color: getCssVar('collapse-content-text-color'),
+                color: td_collapse_style_1.$collapse.contentTextColor,
+                lineHeight: 1.769230769230769
+            }
+        });
+        if (params === null || params === void 0 ? void 0 : params.slot) {
+            this.content.slotChild(params.slot);
+        }
+        this.wrapper.addChild(this.content);
+        this.transition = new td_collapse_transition_class_1.TdCollapseTransition({
+            parent: this,
+            slot: this.wrapper
+        });
+        this.addChild(this.transition);
+        this.props = this.setParams(params);
+    }
+    setActive(active) {
+        if (active) {
+            // todo transition
+            // this.wrapper.addStyleObj($collapseTransitionActive);
+            // collapseTransitionConfig.beforeEnter && collapseTransitionConfig.beforeEnter(this.wrapper);
+            // collapseTransitionConfig.enter && collapseTransitionConfig.enter(this.wrapper);
+            // collapseTransitionConfig.afterEnter && collapseTransitionConfig.afterEnter(this.wrapper);
+            // collapseTransitionConfig.enterCancelled(this.wrapper);
+            // nextFrame(() => {
+            //   // 计算内容的高度
+            //   const contentHeight = this.wrapper.dom.scrollHeight + 'px';
+            //   console.log('contentHeight is ', contentHeight);
+            //   this.wrapper.setStyleObj({
+            //     maxHeight: contentHeight,
+            //     // height: '50px',
+            //     // opacity: 1,
+            //     // display: undefined,
+            //   });
+            // });
+            this.transition.showSlot(true);
+            this.headerBtn.ctrl.setStyleObj({
+                borderBottomColor: 'transparent'
+            });
+            this.arrowIcon.ctrl.setStyleObj({
+                transform: 'rotate(90deg)'
+            });
+        }
+        else {
+            // todo transition
+            // this.wrapper.addStyleObj($collapseTransition);
+            // nextFrame(() => {
+            //   this.wrapper.setStyleObj({
+            //     maxHeight: 0,
+            //     // height: '0px',
+            //     // opacity: 0,
+            //     // display: 'none',
+            //     // transition: 'transform 1s', // + $transitionDuration,
+            //   });
+            // });
+            this.transition.showSlot(false);
+            this.headerBtn.ctrl.setStyleObj({
+                transition: 'transform ' + var_1.$transitionDuration
+            });
+            this.arrowIcon.ctrl.setStyleObj({
+                transform: 'rotate(0deg)'
+            });
+            // todo transition
+            // this.wrapper.addStyleObj($collapseTransition);
+        }
+    }
+    setDisable(disabled) {
+        if (disabled) {
+            this.headerBtn.ctrl.setStyleObj({
+                // color: getCssVar('text-color-disabled'),
+                color: var_1.$textColor.disabled,
+                cursor: 'not-allowed'
+            });
+        }
+        else {
+            this.headerBtn.ctrl.setStyleObj({
+                // color: getCssVar('collapse-header-text-color'),
+                color: td_collapse_style_1.$collapse.headerTextColor,
+                cursor: 'pointer'
+            });
+        }
+    }
+    handleFocus() {
+        setTimeout(() => {
+            if (!this.isClick) {
+                this.focusing = true;
+            }
+            else {
+                this.isClick = false;
+            }
+        }, 50);
+    }
+    handleHeaderClick(name) {
+        var _a;
+        console.log('handleHeaderClick, name is ', name);
+        if (this.props.disabled) {
+            return;
+        }
+        (_a = this.parent) === null || _a === void 0 ? void 0 : _a.handleItemClick(name);
+        this.focusing = false;
+        this.isClick = true;
+    }
+    handleEnterClick() {
+        var _a;
+        // name todo
+        (_a = this.parent) === null || _a === void 0 ? void 0 : _a.handleItemClick('name');
+    }
+}
+exports.TdCollapseItem = TdCollapseItem;

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

@@ -0,0 +1,20 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+export interface ITdCollapseItem extends IUI {
+    className: 'TdCollapseItem';
+}
+export interface ITdCollapseItemConfig extends IUIConfig {
+    /**
+     * @description title of the panel
+     *     default: '',
+     */
+    title?: string;
+    /**
+     * @description unique identification of the panel
+     *     default: undefined,
+     */
+    nameId?: string | number;
+    /**
+     * @description disable the collapse item
+     */
+    disabled?: boolean;
+}

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

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

package/src/components/data/td-collapse-transition/td-collapse-transition.class.d.ts

@@ -0,0 +1,6 @@
+import { ITransitionConfig, TypeTransition } from '@type-dom/framework';
+import { ITdCollapseTransition } from './td-collapse-transition.interface';
+export declare class TdCollapseTransition extends TypeTransition implements ITdCollapseTransition {
+    className: 'TdCollapseTransition';
+    constructor(params?: ITransitionConfig);
+}

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdCollapseTransition = void 0;
+const framework_1 = require("@type-dom/framework");
+const td_collapse_transition_util_1 = require("./td-collapse-transition.util");
+class TdCollapseTransition extends framework_1.TypeTransition {
+    constructor(params) {
+        super(Object.assign(td_collapse_transition_util_1.collapseTransitionConfig, params));
+        this.className = 'TdCollapseTransition';
+    }
+}
+exports.TdCollapseTransition = TdCollapseTransition;

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

@@ -0,0 +1,4 @@
+import { ITypeTransition } from '@type-dom/framework';
+export interface ITdCollapseTransition extends ITypeTransition {
+    className: 'TdCollapseTransition';
+}

package/src/components/data/td-collapse-transition/td-collapse-transition.interface.js

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

package/src/components/data/td-collapse-transition/td-collapse-transition.util.d.ts

@@ -0,0 +1,2 @@
+import { ITransitionConfig } from '@type-dom/framework';
+export declare const collapseTransitionConfig: ITransitionConfig;