@syncfusion/ej2-lists 29.2.4 → 30.1.37

package/dist/ts/component.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Export ListView
+ */
+export * from './list-view/list-view';

package/dist/ts/component.ts

@@ -0,0 +1,4 @@
+/**
+ * Export ListView
+ */
+export * from './list-view/list-view';

package/dist/ts/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * List Components
+ */
+export * from './list-view/index';
+export * from './common/index';
+export * from './sortable';

package/dist/ts/index.ts

@@ -0,0 +1,6 @@
+/**
+ * List Components
+ */
+export * from './list-view/index';
+export * from './common/index';
+export * from './sortable';

package/dist/ts/list-view/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Listview Component
+ */
+export * from './list-view';
+export * from './virtualization';
+export * from './list-view-model';

package/dist/ts/list-view/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Listview Component
+ */
+export * from './list-view';
+export * from './virtualization';
+export * from './list-view-model';

package/dist/ts/list-view/list-view-model.d.ts

@@ -0,0 +1,324 @@
+import { Virtualization } from './virtualization';import { merge, formatUnit, isNullOrUndefined, append, detach, ModuleDeclaration, extend } from '@syncfusion/ej2-base';import { attributes, addClass, removeClass, prepend, closest, remove } from '@syncfusion/ej2-base';import { Component, EventHandler, BaseEventArgs, Property, Complex, Event } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, ChildProperty } from '@syncfusion/ej2-base';import { KeyboardEventArgs, EmitType, compile, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { Animation, AnimationOptions, Effect, rippleEffect, Touch, SwipeEventArgs, animationMode } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { createCheckBox } from '@syncfusion/ej2-buttons';import { ListBase, ListBaseOptions, SortOrder, getFieldValues, FieldsMapping } from '../common/list-base';
+import {AnimationSettings,checkBoxPosition,SelectEventArgs,ScrolledEventArgs} from "./list-view";
+import {ComponentModel} from '@syncfusion/ej2-base';
+
+/**
+ * Interface for a class FieldSettings
+ */
+export interface FieldSettingsModel {
+
+    /**
+     * Specifies the id field mapped in dataSource.
+     */
+    id?: string;
+
+    /**
+     * The `text` property is used to map the text value from the data source for each list item.
+     */
+    text?: string;
+
+    /**
+     * The `isChecked` property is used to check whether the list items are in checked state or not.
+     */
+    isChecked?: string;
+
+    /**
+     * The `isVisible` property is used to check whether the list items are in visible state or not.
+     */
+    isVisible?: string;
+
+    /**
+     * Specifies the enabled state of the ListView component.
+     * And, we can disable the component using this property by setting its value as false.
+     */
+    enabled?: string;
+
+    /**
+     * The `iconCss` is used to customize the icon to the list items dynamically.
+     *  We can add a specific image to the icons using `iconCss` property.
+     */
+    iconCss?: string;
+
+    /**
+     * The `child` property is used for nested navigation of listed items.
+     */
+    child?: string;
+
+    /**
+     * The `tooltip` is used to display the information about the target element while hovering on list items.
+     */
+    tooltip?: string;
+
+    /**
+     * The `groupBy` property is used to wraps the ListView elements into a group.
+     */
+    groupBy?: string;
+
+    /**
+     * The `sortBy` property used to enable the sorting of list items to be ascending or descending order.
+     */
+    sortBy?: string;
+
+    /**
+     * The `htmlAttributes` allows additional attributes such as id, class, etc., and
+     *  accepts n number of attributes in a key-value pair format.
+     */
+    htmlAttributes?: string;
+
+    /**
+     * Specifies the `tableName` used to fetch data from a specific table in the server.
+     */
+    tableName?: string;
+
+}
+
+/**
+ * Interface for a class ListView
+ */
+export interface ListViewModel extends ComponentModel{
+
+    /**
+     * The `cssClass` property is used to add a user-preferred class name in the root element of the ListView,
+     *  using which we can customize the component (both CSS and functionality customization)
+     *
+     * {% codeBlock src='listview/cssClass/index.md' %}{% endcodeBlock %}
+     *
+     * @default ''
+     */
+    cssClass?: string;
+
+    /**
+     * If `enableVirtualization` set to true, which will increase the ListView performance, while loading a large amount of data.
+     *
+     * {% codeBlock src='listview/enableVirtualization/index.md' %}{% endcodeBlock %}
+     *
+     * @default false
+     */
+    enableVirtualization?: boolean;
+
+    /**
+     * The `htmlAttributes` allows additional attributes such as id, class, etc., and
+     *  accepts n number of attributes in a key-value pair format.
+     *
+     * {% codeBlock src='listview/htmlAttributes/index.md' %}{% endcodeBlock %}
+     *
+     * @default {}
+     */
+    htmlAttributes?: { [key: string]: string; };
+
+    /**
+     * If `enable` set to true, the list items are enabled.
+     * And, we can disable the component using this property by setting its value as false.
+     *
+     * {% codeBlock src='listview/enable/index.md' %}{% endcodeBlock %}
+     *
+     * @default true
+     */
+    enable?: boolean;
+
+    /**
+     * The `dataSource` provides the data to render the ListView component which is mapped with the fields of ListView.
+     *
+     * @isGenericType true
+     *
+     * {% codeBlock src='listview/dataSource/index.md' %}{% endcodeBlock %}
+     *
+     * @default []
+     */
+    dataSource?: { [key: string]: Object }[] | string[] | number[] | DataManager;
+
+    /**
+     * The `query` is used to fetch the specific data from dataSource by using where and select keywords.
+     *
+     * {% codeBlock src='listview/query/index.md' %}{% endcodeBlock %}
+     *
+     * @default null
+     */
+    query?: Query;
+
+    /**
+     * The `fields` is used to map keys from the dataSource which extracts the appropriate data from the dataSource
+     *  with specified mapped with the column fields to render the ListView.
+     *
+     * {% codeBlock src='listview/fields/index.md' %}{% endcodeBlock %}
+     *
+     * @default defaultMappedFields
+     */
+    fields?: FieldSettingsModel;
+
+    /**
+     * The `animation` property provides an option to apply the different
+     *  animations on the ListView component.
+     *
+     * {% codeBlock src='listview/animation/index.md' %}{% endcodeBlock %}
+     *
+     *
+     * @default { effect: 'SlideLeft', duration: 400, easing: 'ease' }
+     */
+    animation?: AnimationSettings;
+
+    /**
+     * The `sortOrder` is used to sort the data source. The available type of sort orders are,
+     * * `None` - The data source is not sorting.
+     * * `Ascending` - The data source is sorting with ascending order.
+     * * `Descending` - The data source is sorting with descending order.
+     *
+     * {% codeBlock src='listview/sortOrder/index.md' %}{% endcodeBlock %}
+     *
+     * @default 'None'
+     */
+    sortOrder?: SortOrder;
+
+    /**
+     * If `showIcon` set to true, which will show or hide the icon of the list item.
+     *
+     * {% codeBlock src='listview/showIcon/index.md' %}{% endcodeBlock %}
+     *
+     * @default false
+     */
+    showIcon?: boolean;
+
+    /**
+     * If `showCheckBox` set to true, which will show or hide the checkbox.
+     *
+     * {% codeBlock src='listview/showCheckBox/index.md' %}{% endcodeBlock %}
+     *
+     *
+     * @default false
+     */
+    showCheckBox?: boolean;
+
+    /**
+     * The `checkBoxPosition` is used to set the position of check box in a list item.
+     * By default, the `checkBoxPosition` is Left, which will appear before the text content in a list item.
+     *
+     * {% codeBlock src='listview/checkBoxPosition/index.md' %}{% endcodeBlock %}
+     *
+     * @default 'Left'
+     */
+    checkBoxPosition?: checkBoxPosition;
+
+    /**
+     * The `headerTitle` is used to set the title of the ListView component.
+     *
+     * {% codeBlock src='listview/headerTitle/index.md' %}{% endcodeBlock %}
+     *
+     *
+     * @default ""
+     */
+    headerTitle?: string;
+
+    /**
+     * If `showHeader` set to true, which will show or hide the header of the ListView component.
+     *
+     * {% codeBlock src='listview/showHeader/index.md' %}{% endcodeBlock %}
+     *
+     * @default false
+     */
+    showHeader?: boolean;
+
+    /**
+     * Specifies whether to display or remove the untrusted HTML values in the ListView component.
+     * If 'enableHtmlSanitizer' set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
+     *
+     * {% codeBlock src='listview/enableHtmlSanitizer/index.md' %}{% endcodeBlock %}
+     *
+     * @default true
+     */
+    enableHtmlSanitizer?: boolean;
+
+    /**
+     * Defines the height of the ListView component which accepts both string and number values.
+     *
+     * {% codeBlock src='listview/height/index.md' %}{% endcodeBlock %}
+     *
+     * @default ''
+     */
+    height?: number | string;
+
+    /**
+     * Defines the width of the ListView component which accepts both string and number values.
+     *
+     * {% codeBlock src='listview/width/index.md' %}{% endcodeBlock %}
+     *
+     * @default ''
+     */
+    width?: number | string;
+
+    /**
+     * The ListView component supports to customize the content of each list items with the help of `template` property.
+     *
+     * {% codeBlock src='listview/template/index.md' %}{% endcodeBlock %}
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    template?: string | Function;
+
+    /**
+     * The ListView has an option to custom design the ListView header title with the help of `headerTemplate` property.
+     *
+     * {% codeBlock src="listview/headerTemplate/index.md" %}{% endcodeBlock %}
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    headerTemplate?: string | Function;
+
+    /**
+     * The ListView has an option to custom design the group header title with the help of `groupTemplate` property.
+     *
+     * {% codeBlock src="listview/groupTemplate/index.md" %}{% endcodeBlock %}
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    groupTemplate?: string | Function;
+
+    /**
+     * Triggers when we select the list item in the component.
+     *
+     * @event 'object'
+     */
+    select?: EmitType<SelectEventArgs>;
+
+    /**
+     * Triggers when every ListView action starts.
+     *
+     * @event 'object'
+     */
+    actionBegin?: EmitType<object>;
+
+    /**
+     * Triggers when every ListView actions completed.
+     *
+     * @event 'object'
+     */
+    /* es-lint disable */
+    actionComplete?: EmitType<MouseEvent>;
+
+    /**
+     * Triggers, when the data fetch request from the remote server, fails.
+     *
+     * @event 'object'
+     *
+     */
+    actionFailure?: EmitType<MouseEvent>;
+
+    /**
+     * Triggers when scrollbar of the ListView component reaches to the top or bottom.
+     *
+     * @event 'object'
+     */
+    scroll?: EmitType<ScrolledEventArgs>;
+
+}