@type-dom/ui 0.1.0 → 0.1.1

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

@@ -2,86 +2,38 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdCard = void 0;
 const framework_1 = require("@type-dom/framework");
-const var_1 = require("../../../styles/var");
-const td_card_style_1 = require("./td-card.style");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const td_card_const_1 = require("./td-card.const");
+require("./style/index");
 class TdCard extends framework_1.TypeDiv {
     constructor(params = {}) {
         super();
         this.className = 'TdCard';
         this.attr.addName('td-card');
-        this.style.addObj(td_card_style_1.$cardStyle);
-        this.addShadow(params);
-        this.addHeader(params);
-        this.body = new framework_1.Div({
-            styleObj: {
-                // padding: getCssVar('card', 'padding'),
-                padding: td_card_style_1.$card.padding
-            }
-        });
-        if (params.bodyStyle) {
-            this.body.style.addObj(params.bodyStyle);
-        }
-        if (params.bodyClass) {
-            this.body.attr.addClass(params.bodyClass);
-        }
-        if (params.slot) {
-            this.body.slotChild(params.slot);
-        }
-        this.addChild(this.body);
-        this.addFooter(params);
+        this.assignProps(td_card_const_1.cardProps);
         this.props = this.useParams(params);
     }
-    addShadow(params) {
-        const shadow = params.shadow || 'always';
-        if (shadow === 'always') {
-            this.style.addObj({
-                boxShadow: var_1.$boxShadow.light
-            });
-        }
-        else if (shadow === 'hover') {
-            //   todo :hover :focus boxShadow: $boxShadow.light
-            this.attr.addClass('hover-shadow');
-            (0, framework_1.createClass)('hover-shadow:hover', {
-                boxShadow: var_1.$boxShadow.light
-            });
-            (0, framework_1.createClass)('hover-shadow:focus', {
-                boxShadow: var_1.$boxShadow.light
-            });
-        }
-    }
-    addHeader(params) {
-        var _a;
-        if ((_a = params === null || params === void 0 ? void 0 : params.slots) === null || _a === void 0 ? void 0 : _a.header) {
-            this.header = new framework_1.Div({
-                styleObj: td_card_style_1.$cardHeaderStyle
-            });
-            this.header.slotChild(params.slots.header);
-            this.addChild(this.header);
-        }
-        else if (params === null || params === void 0 ? void 0 : params.header) {
-            // 文本
-            this.header = new framework_1.Div({
-                text: params.header,
-                styleObj: td_card_style_1.$cardHeaderStyle
-            });
-            this.addChild(this.header);
-        }
-    }
-    addFooter(params) {
-        var _a;
-        if ((_a = params.slots) === null || _a === void 0 ? void 0 : _a.footer) {
-            this.footer = new framework_1.Div({
-                styleObj: td_card_style_1.$cardFooterStyle
-            });
-            this.footer.slotChild(params.slots.footer);
-            this.addChild(this.footer);
-        }
-        else if (params.footer) {
-            this.footer = new framework_1.Div({
-                slot: params.footer,
-                styleObj: td_card_style_1.$cardFooterStyle
-            });
-            this.addChild(this.footer);
+    setup() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const props = this.props;
+        const ns = (0, use_namespace_1.useNamespace)('card');
+        this.attr.addClass([ns.b(), ns.is(`${props.shadow}-shadow`)]);
+        if (((_a = props.slots) === null || _a === void 0 ? void 0 : _a.header) || props.header) {
+            this.addChild(new framework_1.Div({
+                class: ns.e('header'),
+                slot: (_c = (_b = props.slots) === null || _b === void 0 ? void 0 : _b.header) !== null && _c !== void 0 ? _c : props.header,
+            }));
+        }
+        this.addChild(new framework_1.Div({
+            class: [ns.e('body'), props.bodyClass],
+            styleObj: props.bodyStyle,
+            slot: (_e = (_d = props.slots) === null || _d === void 0 ? void 0 : _d.default) !== null && _e !== void 0 ? _e : props.slot,
+        }));
+        if (((_f = props.slots) === null || _f === void 0 ? void 0 : _f.footer) || props.footer) {
+            this.addChild(new framework_1.Div({
+                class: ns.e('footer'),
+                slot: (_h = (_g = props.slots) === null || _g === void 0 ? void 0 : _g.footer) !== null && _h !== void 0 ? _h : props.footer,
+            }));
         }
     }
 }

package/src/components/data/td-card/td-card.const.d.ts

@@ -0,0 +1,2 @@
+import { CardProps } from './td-card.interface';
+export declare const cardProps: CardProps;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cardProps = void 0;
+exports.cardProps = {
+    header: '',
+    footer: '',
+    shadow: 'always',
+};

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

@@ -1,9 +1,9 @@
 import { IStyle } from '@type-dom/css-type';
-import { ITypeConfig, ITypeDiv } from '@type-dom/framework';
+import { ITypeDiv, TypeDivProps } from '@type-dom/framework';
 export interface ITdCard extends ITypeDiv {
     className: 'TdCard';
 }
-export interface ITdCardConfig extends ITypeConfig {
+export interface CardProps extends TypeDivProps {
     /**
      * @description title of the card. Also accepts a DOM passed by `slot#header`
      *     default: '',

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

@@ -9,7 +9,7 @@ exports.$card = {
     borderRadius: '4px',
     padding: '20px',
     // 'bg-color': getCssVar('fill-color', 'blank'),
-    bgColor: var_1.$fillColor.blank
+    bgColor: var_1.$fillColor.blank,
 };
 exports.$cardStyle = {
     //   border-radius: getCssVar('card', 'border-radius'),
@@ -22,7 +22,7 @@ exports.$cardStyle = {
     // color: getCssVar('text-color', 'primary'),
     color: var_1.$textColor.primary,
     // transition: getCssVar('transition-duration'),
-    transition: transition_1.$transitionDuration.default
+    transition: transition_1.$transitionDuration.default,
 };
 exports.$cardHeaderStyle = {
     // padding: calc(#{getCssVar('card', 'padding')} - 2px) getCssVar('card', 'padding'),
@@ -30,7 +30,7 @@ exports.$cardHeaderStyle = {
     // border-bottom: 1px solid getCssVar('card', 'border-color'),
     borderBottom: '1px solid ' + exports.$card.borderColor,
     // box-sizing: border-box,
-    boxSizing: 'border-box'
+    boxSizing: 'border-box',
 };
 exports.$cardFooterStyle = {
     //     padding: calc(#{getCssVar('card', 'padding')} - 2px)
@@ -39,5 +39,5 @@ exports.$cardFooterStyle = {
     // border-top: 1px solid getCssVar('card', 'border-color'),
     borderTop: '1px solid ' + exports.$card.borderColor,
     // box-sizing: border-box,
-    boxSizing: 'border-box'
+    boxSizing: 'border-box',
 };

package/src/components/data/td-carousel/constants.d.ts

@@ -0,0 +1,32 @@
+import { Ref, Signal } from '@type-dom/signals';
+import { CarouselItemProps } from './td-carousel-item.interface';
+import { InjectionKey } from '@type-dom/framework';
+export type CarouselItemStates = {
+    hover: Signal<boolean>;
+    translate: Signal<number>;
+    scale: Signal<number>;
+    active: Signal<boolean>;
+    ready: Signal<boolean>;
+    inStage: Signal<boolean>;
+    animating: Signal<boolean>;
+};
+export type CarouselItemContext = {
+    props: CarouselItemProps;
+    states: CarouselItemStates;
+    uid: number;
+    translateItem: (index: number, activeIndex: number, oldIndex?: number) => void;
+};
+export type CarouselContext = {
+    root: Ref<HTMLElement | undefined>;
+    items: Ref<CarouselItemContext[]>;
+    isCardType: Ref<boolean>;
+    isVertical: Ref<boolean>;
+    loop?: boolean;
+    cardScale?: number;
+    addItem: (item: CarouselItemContext) => void;
+    removeItem: (uid: number) => void;
+    setActiveItem: (index: number) => void;
+    setContainerHeight: (height: number) => void;
+};
+export declare const carouselContextKey: InjectionKey<CarouselContext>;
+export declare const CAROUSEL_ITEM_NAME = "ElCarouselItem";

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

@@ -0,0 +1,8 @@
+"use strict";
+// import type { InjectionKey, Ref } from 'vue'
+//
+// import type { CarouselItemProps } from './carousel-item'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CAROUSEL_ITEM_NAME = exports.carouselContextKey = void 0;
+exports.carouselContextKey = Symbol('carouselContextKey');
+exports.CAROUSEL_ITEM_NAME = 'ElCarouselItem';

package/src/components/data/td-carousel/style/css.d.ts

@@ -0,0 +1,2 @@
+import '@element-plus/components/base/style/css';
+import '@element-plus/theme-chalk/el-carousel.css';

package/src/components/data/td-carousel/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@element-plus/components/base/style/css");
+require("@element-plus/theme-chalk/el-carousel.css");

package/src/components/data/td-carousel/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../base/style';
+import '../../../../theme-chalk/carousel.scss';

package/src/components/data/td-carousel/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../base/style");
+require("../../../../theme-chalk/carousel.scss");

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

@@ -0,0 +1,8 @@
+import { TypeDiv } from '@type-dom/framework';
+import { CarouselItemProps, ITdCarouselItem } from './td-carousel-item.interface';
+export declare class TdCarouselItem extends TypeDiv implements ITdCarouselItem {
+    className: 'TdCarouselItem';
+    props: CarouselItemProps;
+    constructor(params: CarouselItemProps);
+    setup(): void;
+}

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

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdCarouselItem = void 0;
+const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const use_carousel_item_1 = require("./use-carousel-item");
+class TdCarouselItem extends framework_1.TypeDiv {
+    constructor(params) {
+        super();
+        this.className = 'TdCarouselItem';
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a;
+        const props = this.props;
+        const ns = (0, use_namespace_1.useNamespace)('carousel');
+        // inject
+        const { carouselItemRef, active, animating, hover, inStage, isVertical, translate, isCardType, scale, ready, handleItemClick, } = (0, use_carousel_item_1.useCarouselItem)(props);
+        const itemKls = (0, signals_1.computed)(() => [
+            ns.e('item'),
+            ns.is('active', active.get()),
+            ns.is('in-stage', inStage.get()),
+            ns.is('hover', hover.get()),
+            ns.is('animating', animating.get()),
+            {
+                [ns.em('item', 'card')]: isCardType.get(),
+                [ns.em('item', 'card-vertical')]: isCardType.get() && isVertical.get(),
+            },
+        ]);
+        const itemStyle = (0, signals_1.computed)(() => {
+            const translateType = `translate${(0, signals_1.unref)(isVertical) ? 'Y' : 'X'}`;
+            const _translate = `${translateType}(${(0, signals_1.unref)(translate)}px)`;
+            const _scale = `scale(${(0, signals_1.unref)(scale)})`;
+            const transform = [_translate, _scale];
+            return {
+                transform,
+            };
+        });
+        this.assignProps({
+            vShow: ready,
+            refDom: carouselItemRef,
+            class: itemKls,
+            styleObj: itemStyle,
+            events: {
+                click: handleItemClick,
+            },
+        });
+        if (isCardType) {
+            this.addChild(new framework_1.Div({
+                vShow: !active,
+                class: ns.e('mask'),
+            }));
+        }
+        this.slotChildren(props.slot || ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default));
+    }
+}
+exports.TdCarouselItem = TdCarouselItem;

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

@@ -0,0 +1,16 @@
+import { ITypeDiv, TypeDivProps } from '@type-dom/framework';
+export interface ITdCarouselItem extends ITypeDiv {
+    className: 'TdCarouselItem';
+}
+export interface CarouselItemProps extends TypeDivProps {
+    /**
+     * @description name of the item, can be used in `setActiveItem`
+     * default: ''
+     */
+    name: string;
+    /**
+     * @description text content for the corresponding indicator
+     *     default: '',
+     */
+    label: string | number;
+}

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

@@ -0,0 +1,13 @@
+import { TypeDiv } from '@type-dom/framework';
+import { Signal } from '@type-dom/signals';
+import { CarouselProps, ITdCarousel } from './td-carousel.interface';
+export declare class TdCarousel extends TypeDiv implements ITdCarousel {
+    className: 'TdCarousel';
+    props: CarouselProps;
+    activeIndex?: Signal<number>;
+    setActiveItem?: (index: string | number) => void;
+    prev?: () => void;
+    next?: () => void;
+    constructor(params?: CarouselProps);
+    setup(): void;
+}

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

@@ -1 +1,213 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdCarousel = void 0;
+const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
+const td_carousel_const_1 = require("./td-carousel.const");
+const use_carousel_1 = require("./use-carousel");
+const svgs_1 = require("@type-dom/svgs");
+class TdCarousel extends framework_1.TypeDiv {
+    constructor(params = {}) {
+        super();
+        this.className = 'TdCarousel';
+        this.addEmits(td_carousel_const_1.carouselEmits);
+        this.assignProps(td_carousel_const_1.carouselProps);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a;
+        const COMPONENT_NAME = 'TdCarousel';
+        const props = this.props;
+        const emit = this.emit;
+        const { root, activeIndex, arrowDisplay, hasLabel, hover, isCardType, items, isVertical, containerStyle, handleButtonEnter, handleButtonLeave, isTransitioning, handleIndicatorClick, handleMouseEnter, handleMouseLeave, handleTransitionEnd, setActiveItem, prev, next, PlaceholderItem, isTwoLengthShow, throttledArrowClick, throttledIndicatorHover, } = (0, use_carousel_1.useCarousel)(props, emit, COMPONENT_NAME);
+        const ns = (0, use_namespace_1.useNamespace)('carousel');
+        // const { t } = useLocale()
+        const carouselClasses = (0, signals_1.computed)(() => {
+            const classes = [ns.b(), ns.m(props.direction)];
+            if ((0, signals_1.unref)(isCardType)) {
+                classes.push(ns.m('card'));
+            }
+            return classes;
+        });
+        const carouselContainer = (0, signals_1.computed)(() => {
+            const classes = [ns.e('container')];
+            if (props.motionBlur &&
+                (0, signals_1.unref)(isTransitioning) &&
+                items.get().length > 1) {
+                classes.push((0, signals_1.unref)(isVertical)
+                    ? `${ns.namespace.get()}-transitioning-vertical`
+                    : `${ns.namespace.get()}-transitioning`);
+            }
+            return classes;
+        });
+        const indicatorsClasses = (0, signals_1.computed)(() => {
+            const classes = [
+                ns.e('indicators'),
+                ns.em('indicators', props.direction),
+            ];
+            if ((0, signals_1.unref)(hasLabel)) {
+                classes.push(ns.em('indicators', 'labels'));
+            }
+            if (props.indicatorPosition === 'outside') {
+                classes.push(ns.em('indicators', 'outside'));
+            }
+            if ((0, signals_1.unref)(isVertical)) {
+                classes.push(ns.em('indicators', 'right'));
+            }
+            return classes;
+        });
+        (0, framework_1.defineExpose)({
+            /** @description active slide index */
+            activeIndex,
+            /** @description manually switch slide, index of the slide to be switched to, starting from 0; or the `name` of corresponding `el-carousel-item` */
+            setActiveItem,
+            /** @description switch to the previous slide */
+            prev,
+            /** @description switch to the next slide */
+            next,
+        });
+        this.assignProps({
+            refDom: root,
+            attrObj: {
+                class: carouselClasses,
+            },
+            events: {
+                mouseenter: (evt) => {
+                    handleMouseEnter();
+                    evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+                },
+                mouseleave: (evt) => {
+                    handleMouseLeave();
+                    evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+                },
+            },
+        });
+        if (arrowDisplay.get()) {
+            this.addChild(new framework_1.Transition({
+                name: 'carousel-arrow-left',
+                slot: new framework_1.Button({
+                    vShow: (props.arrow === 'always' || hover) &&
+                        (props.loop || activeIndex.get() > 0), // todo watch
+                    attrObj: {
+                        type: 'button',
+                        class: [ns.e('arrow'), ns.em('arrow', 'left')],
+                        // ariaLabel: t('el.carousel.leftArrow')
+                    },
+                    events: {
+                        click: (evt) => {
+                            throttledArrowClick(activeIndex.get() - 1);
+                            evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+                        },
+                        mouseenter: (evt) => handleButtonEnter('left'),
+                        mouseleave: handleButtonLeave,
+                    },
+                    slot: new td_icon_class_1.TdIcon({
+                        slot: new svgs_1.ElArrowLeftSvg(),
+                    }),
+                }),
+            }));
+        }
+        if (arrowDisplay.get()) {
+            this.addChild(new framework_1.Transition({
+                name: 'carousel-arrow-right',
+                slot: new framework_1.Button({
+                    vShow: (props.arrow === 'always' || hover) &&
+                        (props.loop || activeIndex.get() < items.get().length - 1),
+                    attrObj: {
+                        type: 'button',
+                        class: [ns.e('arrow'), ns.em('arrow', 'right')],
+                        // ariaLabel: t('el.carousel.rightArrow')
+                    },
+                    events: {
+                        click: (evt) => {
+                            throttledArrowClick(activeIndex.get() + 1);
+                            evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+                        },
+                        mouseenter: () => handleButtonEnter('right'),
+                        mouseleave: handleButtonLeave,
+                    },
+                    slot: new td_icon_class_1.TdIcon({
+                        slot: new svgs_1.ElArrowRightSvg(),
+                    }),
+                }),
+            }));
+        }
+        this.addChild(new framework_1.Div({
+            class: carouselContainer,
+            styleObj: containerStyle,
+            emits: {
+                transitionend: handleTransitionEnd,
+            },
+            slot: [
+                // new PlaceholderItem(),
+                ...(0, framework_1.arraySlot)(props.slot || ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default)),
+            ],
+        }));
+        if (props.indicatorPosition !== 'none') {
+            this.addChild(new framework_1.UL({
+                slot: items.get().map((item, index) => {
+                    return new framework_1.LI({
+                        vShow: isTwoLengthShow(index),
+                        class: (0, signals_1.computed)(() => [
+                            ns.e('indicator'),
+                            ns.em('indicator', props.direction),
+                            ns.is('active', index === activeIndex.get()),
+                        ]),
+                        events: {
+                            mouseenter: () => throttledIndicatorHover(index),
+                            click: (evt) => {
+                                handleIndicatorClick(index);
+                                evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+                            },
+                        },
+                        slot: new framework_1.Button({
+                            class: ns.e('button'),
+                            // ariaLabel: t('el.carousel.indicator', { index: index + 1 })
+                            slot: new framework_1.Span({
+                                vIf: hasLabel,
+                                slot: item.props.label,
+                            }),
+                        }),
+                    });
+                }),
+            }));
+        }
+        if (props.motionBlur) {
+            this.addChild(new svgs_1.SvgSvg({
+                styleObj: {
+                    display: 'none',
+                },
+                slot: new framework_1.SvgDefs({
+                    slot: [
+                        //   todo
+                        new framework_1.SvgFilter({
+                            attrObj: {
+                                id: 'elCarouselHorizontal',
+                            },
+                            slot: new framework_1.SvgFeGaussianBlur({
+                                attrObj: {
+                                    in: 'SourceGraphic',
+                                    stdDeviation: '12,0',
+                                },
+                            }),
+                        }),
+                        new framework_1.SvgFilter({
+                            attrObj: {
+                                id: 'elCarouselVertical',
+                            },
+                            slot: new framework_1.SvgFeGaussianBlur({
+                                attrObj: {
+                                    in: 'SourceGraphic',
+                                    stdDeviation: '0,1o',
+                                },
+                            }),
+                        }),
+                    ],
+                }),
+            }));
+        }
+    }
+}
+exports.TdCarousel = TdCarousel;

package/src/components/data/td-carousel/td-carousel.const.d.ts

@@ -0,0 +1,10 @@
+import { CarouselProps } from './td-carousel.interface';
+export declare const carouselProps: CarouselProps;
+export declare const carouselEmits: {
+    /**
+     * @description triggers when the active slide switches
+     * @param current index of the new active slide
+     * @param prev index of the old active slide
+     */
+    change: (current: number, prev: number) => boolean;
+};

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.carouselEmits = exports.carouselProps = void 0;
+const utils_1 = require("@type-dom/utils");
+exports.carouselProps = {
+    /**
+     * @description index of the initially active slide (starting from 0)
+     */
+    initialIndex: 0,
+    trigger: 'hover',
+    autoplay: true,
+    interval: 3000,
+    arrow: 'hover',
+    cardScale: 0.83,
+    loop: true,
+    direction: 'horizontal',
+    pauseOnHover: true,
+};
+exports.carouselEmits = {
+    /**
+     * @description triggers when the active slide switches
+     * @param current index of the new active slide
+     * @param prev index of the old active slide
+     */
+    change: (current, prev) => [current, prev].every(utils_1.isNumber),
+};

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

@@ -0,0 +1,70 @@
+import { ITypeDiv, TypeDivProps } from '@type-dom/framework';
+export interface ITdCarousel extends ITypeDiv {
+    className: 'TdCarousel';
+}
+export interface CarouselProps extends TypeDivProps {
+    /**
+     * @description index of the initially active slide (starting from 0)
+     *     default: 0,
+     */
+    initialIndex?: number;
+    /**
+     * @description height of the carousel
+     *     default: '',
+     */
+    height?: string;
+    /**
+     * @description how indicators are triggered
+     *     default: 'hover',
+     */
+    trigger?: 'hover' | 'click';
+    /**
+     * @description whether automatically loop the slides
+     *     default: true,
+     */
+    autoplay?: boolean;
+    /**
+     * @description interval of the auto loop, in milliseconds
+     *     default: 3000,
+     */
+    interval?: number;
+    /**
+     * @description position of the indicators
+     *     default: '',
+     */
+    indicatorPosition?: '' | 'none' | 'outside';
+    /**
+     * @description when arrows are shown
+     *     default: 'hover',
+     */
+    arrow?: 'always' | 'hover' | 'never';
+    /**
+     * @description type of the Carousel
+     *     default: '',
+     */
+    type?: '' | 'card';
+    /**
+     * @description when type is card, scaled size of secondary cards
+     *     default: 0.83,
+     */
+    cardScale?: number;
+    /**
+     * @description display the items in loop
+     *     default: true,
+     */
+    loop?: boolean;
+    /**
+     * @description display direction
+     *     default: 'horizontal',
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * @description pause autoplay when hover
+     *     default: true,
+     */
+    pauseOnHover?: boolean;
+    /**
+     * @description infuse dynamism and smoothness into the carousel
+     */
+    motionBlur?: boolean;
+}

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

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