List, ListBase: move files to TS

packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter_core.ts

@@ -1,6 +1,6 @@
 /* eslint-disable max-classes-per-file */
-import '@js/ui/list/modules/search';
-import '@js/ui/list/modules/selection';
+import '@ts/ui/list/modules/m_search';
+import '@ts/ui/list/modules/m_selection';
 
 import $ from '@js/core/renderer';
 import { extend } from '@js/core/utils/extend';

packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_tooltip_strategy_base.ts

@@ -1,8 +1,8 @@
 import $ from '@js/core/renderer';
 import { FunctionTemplate } from '@js/core/templates/function_template';
 import Button from '@js/ui/button';
-import List from '@js/ui/list/ui.list.edit';
 import { createPromise } from '@ts/core/utils/promise';
+import List from '@ts/ui/list/m_list.edit';
 
 const TOOLTIP_APPOINTMENT_ITEM = 'dx-tooltip-appointment-item';
 const TOOLTIP_APPOINTMENT_ITEM_CONTENT = `${TOOLTIP_APPOINTMENT_ITEM}-content`;

packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.list.ts

@@ -1,4 +1,4 @@
-import '@js/ui/list/modules/selection';
+import '@ts/ui/list/modules/m_selection';
 
 import { ensureDefined, noop } from '@js/core/utils/common';
 import dateSerialization from '@js/core/utils/date_serialization';

packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_list.ts

@@ -21,8 +21,8 @@ import { addNamespace } from '@js/events/utils/index';
 import messageLocalization from '@js/localization/message';
 import DataExpressionMixin from '@js/ui/editor/ui.data_expression';
 import List from '@js/ui/list_light';
-import DataConverterMixin from '@js/ui/shared/grouped_data_converter_mixin';
 import errors from '@js/ui/widget/ui.errors';
+import DataConverterMixin from '@ts/ui/shared/m_grouped_data_converter_mixin';
 
 import DropDownEditor from './m_drop_down_editor';
 

packages/devextreme/js/__internal/ui/list/m_item.ts

@@ -0,0 +1,53 @@
+import $ from '@js/core/renderer';
+import CollectionWidgetItem from '@js/ui/collection/item';
+
+const LIST_ITEM_BADGE_CONTAINER_CLASS = 'dx-list-item-badge-container';
+const LIST_ITEM_BADGE_CLASS = 'dx-list-item-badge';
+const BADGE_CLASS = 'dx-badge';
+
+const LIST_ITEM_CHEVRON_CONTAINER_CLASS = 'dx-list-item-chevron-container';
+const LIST_ITEM_CHEVRON_CLASS = 'dx-list-item-chevron';
+
+const ListItem = CollectionWidgetItem.inherit({
+
+  _renderWatchers() {
+    this.callBase();
+
+    this._startWatcher('badge', this._renderBadge.bind(this));
+    this._startWatcher('showChevron', this._renderShowChevron.bind(this));
+  },
+
+  _renderBadge(badge) {
+    this._$element.children(`.${LIST_ITEM_BADGE_CONTAINER_CLASS}`).remove();
+
+    if (!badge) {
+      return;
+    }
+
+    const $badge = $('<div>')
+      .addClass(LIST_ITEM_BADGE_CONTAINER_CLASS)
+      .append($('<div>')
+        .addClass(LIST_ITEM_BADGE_CLASS)
+        .addClass(BADGE_CLASS)
+        .text(badge));
+
+    const $chevron = this._$element.children(`.${LIST_ITEM_CHEVRON_CONTAINER_CLASS}`).first();
+    $chevron.length > 0 ? $badge.insertBefore($chevron) : $badge.appendTo(this._$element);
+  },
+
+  _renderShowChevron(showChevron) {
+    this._$element.children(`.${LIST_ITEM_CHEVRON_CONTAINER_CLASS}`).remove();
+
+    if (!showChevron) {
+      return;
+    }
+
+    const $chevronContainer = $('<div>').addClass(LIST_ITEM_CHEVRON_CONTAINER_CLASS);
+    const $chevron = $('<div>').addClass(LIST_ITEM_CHEVRON_CLASS);
+
+    $chevronContainer.append($chevron).appendTo(this._$element);
+  },
+
+});
+
+export default ListItem;