@antscorp/antsomi-ui 1.3.5-beta.7 → 1.3.5-beta.71

package/es/components/template/TemplateListing/stories/dataTypes/components/BlankTemplatePropsTable/index.js

@@ -0,0 +1,46 @@
+// Libraries
+import React from 'react';
+// Components
+import { Table } from '../../../../../../organism';
+import { Typography, Flex } from '../../../../../../atoms';
+// Constants
+import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
+export const BlankTemplatePropsTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'show',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Handler show or hide Blank Template"))),
+            type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
+            default: React.createElement(CustomTag, { type: "default" }, "false"),
+        },
+        {
+            key: '2',
+            property: 'description',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "The text that is displayed below the Add Button"))),
+            type: React.createElement(CustomTag, { type: "normal" }, "string"),
+            default: React.createElement(CustomTag, { type: "default" }, "Blank Template"),
+        },
+        {
+            key: '3',
+            property: 'onClick',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Callback onClick on Blank Template"))),
+            type: React.createElement(CustomTag, { type: "normal" }, 'React.MouseEventHandler<HTMLElement>'),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+        {
+            key: '4',
+            property: 'blankTemplateRender',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Render Blank Template node for customizing"))),
+            type: React.createElement(CustomTag, { type: "normal" }, '(node: ReactNode) => ReactNode'),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+    ];
+    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+};

package/es/components/template/TemplateListing/stories/dataTypes/components/CategoryListingPropsTable/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CategoryListingPropsTable: React.FC;

package/es/components/template/TemplateListing/stories/dataTypes/components/CategoryListingPropsTable/index.js

@@ -0,0 +1,57 @@
+// Libraries
+import React from 'react';
+import LinkTo from '@storybook/addon-links/react';
+// Components
+import { Table } from '../../../../../../organism';
+import { Typography, Flex } from '../../../../../../atoms';
+// Constants
+import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+import { CATEGORY_LISTING_WITH } from '../../../../constants';
+// Utils
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
+export const CategoryListingPropsTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'items',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "List of category items"))),
+            type: (React.createElement(LinkTo, { story: "t-category-item" },
+                React.createElement(CustomTag, { type: "link" }, "TCategoryItem [ ]"))),
+            default: React.createElement(CustomTag, { type: "default" }, "[ ]"),
+        },
+        {
+            key: '2',
+            property: 'width',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Width of category"))),
+            type: React.createElement(CustomTag, { type: "normal" }, "number"),
+            default: React.createElement(CustomTag, { type: "default" }, CATEGORY_LISTING_WITH),
+        },
+        {
+            key: '3',
+            property: 'loading',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Show loading category listing"))),
+            type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
+            default: React.createElement(CustomTag, { type: "default" }, "false"),
+        },
+        {
+            key: '4',
+            property: 'show',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Handler show or hide category"))),
+            type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
+            default: React.createElement(CustomTag, { type: "default" }, "true"),
+        },
+        {
+            key: '5',
+            property: 'checkedCategories',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Record of checked categories"))),
+            type: React.createElement(CustomTag, { type: "link" }, "TCheckedCategories"),
+            default: React.createElement(CustomTag, { type: "default" }, '{ }'),
+        },
+    ];
+    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+};

package/es/components/template/TemplateListing/stories/dataTypes/components/DataTypeTables/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DataTypeTable: React.FC;

package/es/components/template/TemplateListing/stories/dataTypes/components/DataTypeTables/index.js

@@ -0,0 +1,78 @@
+// Libraries
+import React from 'react';
+import { Table } from '@antscorp/antsomi-ui/es/index';
+import LinkTo from '@storybook/addon-links/react';
+import { Image } from 'antd';
+// Images
+import templatesImage from '../../../../../../../assets/images/components/TemplateListing/templates.png';
+import templateItemImage from '../../../../../../../assets/images/components/TemplateListing/templateItem.png';
+import categoryListingImage from '../../../../../../../assets/images/components/TemplateListing/categoryListing.png';
+import blankTemplateImage from '../../../../../../../assets/images/components/TemplateListing/blankTemplate.png';
+import previewModalImage from '../../../../../../../assets/images/components/TemplateListing/previewModal.png';
+import emptyImage from '../../../../../../../assets/images/components/TemplateListing/empty.png';
+// Constants
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
+export const DataTypeTable = () => {
+    const columns = [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: 'Type',
+            dataIndex: 'type',
+            key: 'type',
+        },
+        {
+            title: 'Description',
+            dataIndex: 'description',
+            key: 'description',
+        },
+    ];
+    const dataSource = [
+        {
+            key: 'templatesProps',
+            name: 'templatesProps',
+            type: (React.createElement(LinkTo, { story: "templates-props" },
+                React.createElement(CustomTag, { type: "link" }, "templatesProps"))),
+            description: React.createElement(Image, { src: templatesImage, width: 200, height: "auto" }),
+        },
+        {
+            key: 'templateItemProps',
+            name: 'templateItemProps',
+            type: (React.createElement("a", { href: "../?path=/docs/molecules-thumbnailcard--default", target: "_blank" },
+                React.createElement(CustomTag, { type: "link" }, "templateItemProps"))),
+            description: React.createElement(Image, { src: templateItemImage, width: 200, height: "auto" }),
+        },
+        {
+            key: 'categoryListingProps',
+            name: 'categoryListingProps',
+            type: (React.createElement(LinkTo, { story: "category-listing-props" },
+                React.createElement(CustomTag, { type: "link" }, "categoryListingProps"))),
+            description: React.createElement(Image, { src: categoryListingImage, width: 200, height: "auto" }),
+        },
+        {
+            key: 'blankTemplateProps',
+            name: 'blankTemplateProps',
+            type: (React.createElement(LinkTo, { story: "blank-template-props" },
+                React.createElement(CustomTag, { type: "link" }, "blankTemplateProps"))),
+            description: React.createElement(Image, { src: blankTemplateImage, width: 200, height: "auto" }),
+        },
+        {
+            key: 'previewModalProps',
+            name: 'previewModalProps',
+            type: (React.createElement("a", { href: "../?path=/docs/organisms-previewtemplatemodal--default", target: "_blank" },
+                React.createElement(CustomTag, { type: "link" }, "previewModalProps"))),
+            description: React.createElement(Image, { src: previewModalImage, width: 200, height: "auto" }),
+        },
+        {
+            key: 'emptyProps',
+            name: 'emptyProps',
+            type: (React.createElement(LinkTo, { story: "empty-props" },
+                React.createElement(CustomTag, { type: "link" }, "emptyProps"))),
+            description: React.createElement(Image, { src: emptyImage, width: 200, height: "auto" }),
+        },
+    ];
+    return React.createElement(Table, { dataSource: dataSource, columns: columns, pagination: false });
+};

package/es/components/template/TemplateListing/stories/dataTypes/components/EmptyPropsTable/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const EmptyPropsTable: React.FC;

package/es/components/template/TemplateListing/stories/dataTypes/components/EmptyPropsTable/index.js

@@ -0,0 +1,30 @@
+// Libraries
+import React from 'react';
+// Components
+import { Table } from '../../../../../../organism';
+import { Typography, Flex } from '../../../../../../atoms';
+// Constants
+import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
+export const EmptyPropsTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'icon',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Customize Empty icon"))),
+            type: React.createElement(CustomTag, { type: "normal" }, "ReactNode"),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+        {
+            key: '2',
+            property: 'description',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "The text that is displayed below the Icon"))),
+            type: React.createElement(CustomTag, { type: "normal" }, "string"),
+            default: React.createElement(CustomTag, { type: "default" }, "No data"),
+        },
+    ];
+    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+};

package/es/components/template/TemplateListing/stories/dataTypes/components/TCategoryItemTable/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TCategoryItemTable: React.FC;

package/es/components/template/TemplateListing/stories/dataTypes/components/TCategoryItemTable/index.js

@@ -0,0 +1,46 @@
+// Libraries
+import React from 'react';
+// Components
+import { Table } from '../../../../../../organism';
+import { Typography, Flex } from '../../../../../../atoms';
+// Constants
+import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
+export const TCategoryItemTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'TCategoryItemId',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Identification of Category Item"))),
+            type: React.createElement(CustomTag, { type: "link" }, "TCategoryItemId"),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+        {
+            key: '2',
+            property: 'label',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Label of Category Item"))),
+            type: React.createElement(CustomTag, { type: "normal" }, "string"),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+        {
+            key: '3',
+            property: 'total',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Total child categories of it"))),
+            type: React.createElement(CustomTag, { type: "normal" }, "number"),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+        {
+            key: '4',
+            property: 'children',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Its children categories"))),
+            type: React.createElement(CustomTag, { type: "link" }, "TCategoryItem [ ]"),
+            default: React.createElement(CustomTag, { type: "default" }, " [ ] "),
+        },
+    ];
+    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+};

package/es/components/template/TemplateListing/stories/dataTypes/components/TTemplateItemTable/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TTemplateItemTable: React.FC;

package/es/components/template/TemplateListing/stories/dataTypes/components/TTemplateItemTable/index.js

@@ -0,0 +1,38 @@
+// Libraries
+import React from 'react';
+// Components
+import { Table } from '../../../../../../organism';
+import { Typography, Flex } from '../../../../../../atoms';
+// Constants
+import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
+export const TTemplateItemTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'id',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Identification of Template Item"))),
+            type: React.createElement(CustomTag, { type: "link" }, "TThumbnailCardId"),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+        {
+            key: '2',
+            property: 'name',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Name of Template Item"))),
+            type: React.createElement(CustomTag, { type: "normal" }, "string"),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+        {
+            key: '3',
+            property: 'thumbnail',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Thumbnail image of Template Item"))),
+            type: React.createElement(CustomTag, { type: "normal" }, "string"),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+    ];
+    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+};

package/es/components/template/TemplateListing/stories/dataTypes/components/TemplatesPropsTable/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TemplatesPropsTable: React.FC;

package/es/components/template/TemplateListing/stories/dataTypes/components/TemplatesPropsTable/index.js

@@ -0,0 +1,50 @@
+// Libraries
+import React from 'react';
+import LinkTo from '@storybook/addon-links/react';
+// Components
+import { Table } from '../../../../../../organism';
+import { Tag, Typography, Flex } from '../../../../../../atoms';
+// Constants
+import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+import { LISTING_GAP_DEFAULT } from '../../../../constants';
+// Utils
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
+export const TemplatesPropsTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'items',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "List of templates"))),
+            type: (React.createElement(LinkTo, { story: "t-template-item" },
+                React.createElement(CustomTag, { type: "link" }, "( TTemplateItem & T) [ ]"))),
+            default: React.createElement(Tag, { bordered: false }, "[ ]"),
+        },
+        {
+            key: '2',
+            property: 'loading',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Show loading template listing"))),
+            type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
+            default: React.createElement(CustomTag, { type: "default" }, "false"),
+        },
+        {
+            key: '3',
+            property: 'gap',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Spacing between template items"),
+                React.createElement(Typography.Text, null, "When the screen size changes, the height and width of each template will change according to the screen, but the gap remains the same."))),
+            type: React.createElement(CustomTag, { type: "normal" }, "number"),
+            default: React.createElement(CustomTag, { type: "default" }, LISTING_GAP_DEFAULT),
+        },
+        {
+            key: '4',
+            property: 'onLoadMoreTemplates',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Handles loading additional data based on lazy loading mechanism"))),
+            type: React.createElement(CustomTag, { type: "normal" }, '( ) => void'),
+            default: React.createElement(CustomTag, { type: "default" }, '( ) => { }'),
+        },
+    ];
+    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+};

package/es/components/template/TemplateListing/stories/dataTypes/components/index.d.ts

@@ -0,0 +1,7 @@
+export { DataTypeTable } from './DataTypeTables';
+export { TemplatesPropsTable } from './TemplatesPropsTable';
+export { CategoryListingPropsTable } from './CategoryListingPropsTable';
+export { BlankTemplatePropsTable } from './BlankTemplatePropsTable';
+export { EmptyPropsTable } from './EmptyPropsTable';
+export { TTemplateItemTable } from './TTemplateItemTable';
+export { TCategoryItemTable } from './TCategoryItemTable';

package/es/components/template/TemplateListing/stories/dataTypes/components/index.js

@@ -0,0 +1,7 @@
+export { DataTypeTable } from './DataTypeTables';
+export { TemplatesPropsTable } from './TemplatesPropsTable';
+export { CategoryListingPropsTable } from './CategoryListingPropsTable';
+export { BlankTemplatePropsTable } from './BlankTemplatePropsTable';
+export { EmptyPropsTable } from './EmptyPropsTable';
+export { TTemplateItemTable } from './TTemplateItemTable';
+export { TCategoryItemTable } from './TCategoryItemTable';

package/es/components/template/TemplateListing/stories/demo/styled.d.ts

@@ -0,0 +1 @@
+export declare const ImageWrapper: import("styled-components").StyledComponent<"img", any, {}, never>;

package/es/components/template/TemplateListing/stories/demo/styled.js

@@ -0,0 +1,7 @@
+// Libraries
+import styled from 'styled-components';
+export const ImageWrapper = styled.img `
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+`;

package/es/components/template/TemplateListing/styled/index.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="react" />
 export declare const TemplateListingWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const LoadMoreBlock: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/template/TemplateListing/styled/index.js

@@ -3,14 +3,33 @@ import styled from 'styled-components';
 // Components
 import { Flex } from '../../../atoms';
 export const TemplateListingWrapper = styled(Flex) `
+  position: relative;
   height: 100%;
 
-  .category-listing {
-    flex-shrink: 0;
-  }
-
   .template-listing {
     flex: 1 1 0%;
-    height: fit-content;
+    height: 100%;
+    max-height: 100%;
+    overflow-y: auto;
+    box-sizing: border-box;
+    padding: 15px;
+
+    &__loading {
+      height: 100%;
+
+      .antsomi-spin-container {
+        height: 100%;
+        width: 100%;
+
+        > div {
+          max-height: 100%;
+        }
+      }
+
+      &--full {
+        width: 100%;
+      }
+    }
   }
 `;
+export const LoadMoreBlock = styled.div ``;

package/es/components/template/TemplateListing/types/BlankTemplate.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 export interface BlankTemplateProps {
+    show?: boolean;
     width?: number;
     height?: number;
-    show?: boolean;
     description?: string;
     onClick?: React.MouseEventHandler<HTMLElement>;
     blankTemplateRender?: (node: ReactNode) => ReactNode;

package/es/components/template/TemplateListing/types/CategoryListing.d.ts

@@ -1,12 +1,15 @@
 /// <reference types="react" />
 import { MenuProps } from 'antd';
+import { EmptyProps } from './Empty';
 export type TCheckedCategories = Record<string | number, (string | number)[]>;
 export type TCategoryItemId = string | number;
 export interface CategoryListingProps extends MenuProps {
-    items: TCategoryItem[];
+    items?: TCategoryItem[];
     width?: number;
-    visible?: boolean;
+    loading?: boolean;
+    show?: boolean;
     checkedCategories?: TCheckedCategories;
+    emptyProps?: EmptyProps;
     onMenuChange?: (value: TCheckedCategories) => void;
 }
 export type TMenuItem = Required<MenuProps>['items'][number];

package/es/components/template/TemplateListing/types/Empty.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface EmptyProps {
+    icon?: React.ReactNode;
+    description?: string;
+}

package/es/components/template/TemplateListing/types/Empty.js

@@ -0,0 +1 @@
+export {};

package/es/components/template/TemplateListing/types/TemplateListing.d.ts

@@ -1,16 +1,26 @@
 import { ThumbnailCardProps } from '../../../molecules';
 import { TThumbnailCardId } from '../../../molecules/ThumbnailCard';
+import { PreviewTemplateModalProps } from '../../../organism/PreviewTemplateModal/types';
 import { BlankTemplateProps } from './BlankTemplate';
 import { CategoryListingProps } from './CategoryListing';
-export interface TemplateListingProps {
-    templateItems?: TTemplateItem[];
-    categoryItems?: CategoryListingProps['items'];
+import { EmptyProps } from './Empty';
+export interface TemplateListingProps<T = {}> {
+    templatesProps?: TemplatesProps<T>;
     templateItemProps?: Omit<ThumbnailCardProps, 'id' | 'thumbnail'>;
-    categoryListingProps?: Omit<CategoryListingProps, 'items'>;
+    categoryListingProps?: Omit<CategoryListingProps, 'emptyProps'>;
     blankTemplateProps?: Omit<BlankTemplateProps, 'width' | 'height'>;
+    emptyProps?: EmptyProps;
+    previewModalProps?: PreviewTemplateModalProps;
 }
+export type TemplatesProps<T = {}> = {
+    items?: (TTemplateItem & T)[];
+    loading?: boolean;
+    gap?: number;
+    onLoadMoreTemplates?: () => void;
+};
 export interface TTemplateItem {
-    name: string;
-    key: TThumbnailCardId;
+    id: TThumbnailCardId;
+    name?: ThumbnailCardProps['name'];
     thumbnail?: ThumbnailCardProps['thumbnail'];
 }
+export type TSelectTemplateAction = 'edit' | 'preview' | 'use';

package/es/components/template/index.d.ts

@@ -1,2 +1,3 @@
-export { TemplateListing } from './TemplateListing';
+export { TemplateListing } from './TemplateListing/Loadable';
 export * from './TemplateListing/types';
+export * from './TemplateListing/hooks';

package/es/components/template/index.js

@@ -1,2 +1,6 @@
-export { TemplateListing } from './TemplateListing';
+// Components
+export { TemplateListing } from './TemplateListing/Loadable';
+// Types
 export * from './TemplateListing/types';
+// Hooks
+export * from './TemplateListing/hooks';

package/es/constants/datetime.d.ts

@@ -0,0 +1,8 @@
+export declare const TIME_ZONES: {
+    label: string;
+    value: string;
+}[];
+export declare const DATE_TIME_FORMAT: {
+    TITLE_DATE_TIME: string;
+    DATE_TIME: string;
+};