list.js 40 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063
  1. "use strict";
  2. var __extends = (this && this.__extends) || (function () {
  3. var extendStatics = Object.setPrototypeOf ||
  4. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  5. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  6. return function (d, b) {
  7. extendStatics(d, b);
  8. function __() { this.constructor = d; }
  9. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  10. };
  11. })();
  12. /*!
  13. * devextreme-angular
  14. * Version: 19.1.16
  15. * Build date: Tue Oct 18 2022
  16. *
  17. * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
  18. *
  19. * This software may be modified and distributed under the terms
  20. * of the MIT license. See the LICENSE file in the root of the project for details.
  21. *
  22. * https://github.com/DevExpress/devextreme-angular
  23. */
  24. Object.defineProperty(exports, "__esModule", { value: true });
  25. var platform_browser_1 = require("@angular/platform-browser");
  26. var platform_browser_2 = require("@angular/platform-browser");
  27. var core_1 = require("@angular/core");
  28. var list_1 = require("devextreme/ui/list");
  29. var component_1 = require("../core/component");
  30. var template_host_1 = require("../core/template-host");
  31. var integration_1 = require("../core/integration");
  32. var template_1 = require("../core/template");
  33. var nested_option_1 = require("../core/nested-option");
  34. var watcher_helper_1 = require("../core/watcher-helper");
  35. var iterable_differ_helper_1 = require("../core/iterable-differ-helper");
  36. var item_dxi_1 = require("./nested/item-dxi");
  37. var menu_item_dxi_1 = require("./nested/menu-item-dxi");
  38. var search_editor_options_1 = require("./nested/search-editor-options");
  39. var button_dxi_1 = require("./nested/button-dxi");
  40. var options_1 = require("./nested/options");
  41. var item_dxi_2 = require("./nested/item-dxi");
  42. var menu_item_dxi_2 = require("./nested/menu-item-dxi");
  43. /**
  44. * The List is a widget that represents a collection of items in a scrollable list.
  45. */
  46. var DxListComponent = (function (_super) {
  47. __extends(DxListComponent, _super);
  48. function DxListComponent(elementRef, ngZone, templateHost, _watcherHelper, _idh, optionHost, transferState, platformId) {
  49. var _this = _super.call(this, elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId) || this;
  50. _this._watcherHelper = _watcherHelper;
  51. _this._idh = _idh;
  52. _this._createEventEmitters([
  53. { subscribe: 'contentReady', emit: 'onContentReady' },
  54. { subscribe: 'disposing', emit: 'onDisposing' },
  55. { subscribe: 'groupRendered', emit: 'onGroupRendered' },
  56. { subscribe: 'initialized', emit: 'onInitialized' },
  57. { subscribe: 'itemClick', emit: 'onItemClick' },
  58. { subscribe: 'itemContextMenu', emit: 'onItemContextMenu' },
  59. { subscribe: 'itemDeleted', emit: 'onItemDeleted' },
  60. { subscribe: 'itemDeleting', emit: 'onItemDeleting' },
  61. { subscribe: 'itemHold', emit: 'onItemHold' },
  62. { subscribe: 'itemRendered', emit: 'onItemRendered' },
  63. { subscribe: 'itemReordered', emit: 'onItemReordered' },
  64. { subscribe: 'itemSwipe', emit: 'onItemSwipe' },
  65. { subscribe: 'optionChanged', emit: 'onOptionChanged' },
  66. { subscribe: 'pageLoading', emit: 'onPageLoading' },
  67. { subscribe: 'pullRefresh', emit: 'onPullRefresh' },
  68. { subscribe: 'scroll', emit: 'onScroll' },
  69. { subscribe: 'selectAllValueChanged', emit: 'onSelectAllValueChanged' },
  70. { subscribe: 'selectionChanged', emit: 'onSelectionChanged' },
  71. { emit: 'accessKeyChange' },
  72. { emit: 'activeStateEnabledChange' },
  73. { emit: 'allowItemDeletingChange' },
  74. { emit: 'allowItemReorderingChange' },
  75. { emit: 'bounceEnabledChange' },
  76. { emit: 'collapsibleGroupsChange' },
  77. { emit: 'dataSourceChange' },
  78. { emit: 'disabledChange' },
  79. { emit: 'displayExprChange' },
  80. { emit: 'elementAttrChange' },
  81. { emit: 'focusStateEnabledChange' },
  82. { emit: 'groupedChange' },
  83. { emit: 'groupTemplateChange' },
  84. { emit: 'heightChange' },
  85. { emit: 'hintChange' },
  86. { emit: 'hoverStateEnabledChange' },
  87. { emit: 'indicateLoadingChange' },
  88. { emit: 'itemDeleteModeChange' },
  89. { emit: 'itemHoldTimeoutChange' },
  90. { emit: 'itemsChange' },
  91. { emit: 'itemTemplateChange' },
  92. { emit: 'keyExprChange' },
  93. { emit: 'menuItemsChange' },
  94. { emit: 'menuModeChange' },
  95. { emit: 'nextButtonTextChange' },
  96. { emit: 'noDataTextChange' },
  97. { emit: 'pageLoadingTextChange' },
  98. { emit: 'pageLoadModeChange' },
  99. { emit: 'pulledDownTextChange' },
  100. { emit: 'pullingDownTextChange' },
  101. { emit: 'pullRefreshEnabledChange' },
  102. { emit: 'refreshingTextChange' },
  103. { emit: 'repaintChangesOnlyChange' },
  104. { emit: 'rtlEnabledChange' },
  105. { emit: 'scrollByContentChange' },
  106. { emit: 'scrollByThumbChange' },
  107. { emit: 'scrollingEnabledChange' },
  108. { emit: 'searchEditorOptionsChange' },
  109. { emit: 'searchEnabledChange' },
  110. { emit: 'searchExprChange' },
  111. { emit: 'searchModeChange' },
  112. { emit: 'searchTimeoutChange' },
  113. { emit: 'searchValueChange' },
  114. { emit: 'selectAllModeChange' },
  115. { emit: 'selectedItemKeysChange' },
  116. { emit: 'selectedItemsChange' },
  117. { emit: 'selectionModeChange' },
  118. { emit: 'showScrollbarChange' },
  119. { emit: 'showSelectionControlsChange' },
  120. { emit: 'tabIndexChange' },
  121. { emit: 'useNativeScrollingChange' },
  122. { emit: 'visibleChange' },
  123. { emit: 'widthChange' }
  124. ]);
  125. _this._idh.setHost(_this);
  126. optionHost.setHost(_this);
  127. return _this;
  128. }
  129. Object.defineProperty(DxListComponent.prototype, "accessKey", {
  130. get: /**
  131. * Specifies the shortcut key that sets focus on the widget.
  132. */
  133. function () {
  134. return this._getOption('accessKey');
  135. },
  136. set: function (value) {
  137. this._setOption('accessKey', value);
  138. },
  139. enumerable: true,
  140. configurable: true
  141. });
  142. Object.defineProperty(DxListComponent.prototype, "activeStateEnabled", {
  143. get: /**
  144. * Specifies whether or not the widget changes its state when interacting with a user.
  145. */
  146. function () {
  147. return this._getOption('activeStateEnabled');
  148. },
  149. set: function (value) {
  150. this._setOption('activeStateEnabled', value);
  151. },
  152. enumerable: true,
  153. configurable: true
  154. });
  155. Object.defineProperty(DxListComponent.prototype, "allowItemDeleting", {
  156. get: /**
  157. * Specifies whether or not an end user can delete list items.
  158. */
  159. function () {
  160. return this._getOption('allowItemDeleting');
  161. },
  162. set: function (value) {
  163. this._setOption('allowItemDeleting', value);
  164. },
  165. enumerable: true,
  166. configurable: true
  167. });
  168. Object.defineProperty(DxListComponent.prototype, "allowItemReordering", {
  169. get: /**
  170. * Specifies whether a user can reorder list items. Grouped items cannot be moved from one group to another.
  171. */
  172. function () {
  173. return this._getOption('allowItemReordering');
  174. },
  175. set: function (value) {
  176. this._setOption('allowItemReordering', value);
  177. },
  178. enumerable: true,
  179. configurable: true
  180. });
  181. Object.defineProperty(DxListComponent.prototype, "bounceEnabled", {
  182. get: /**
  183. * A Boolean value specifying whether to enable or disable the bounce-back effect.
  184. */
  185. function () {
  186. return this._getOption('bounceEnabled');
  187. },
  188. set: function (value) {
  189. this._setOption('bounceEnabled', value);
  190. },
  191. enumerable: true,
  192. configurable: true
  193. });
  194. Object.defineProperty(DxListComponent.prototype, "collapsibleGroups", {
  195. get: /**
  196. * Specifies whether or not an end-user can collapse groups.
  197. */
  198. function () {
  199. return this._getOption('collapsibleGroups');
  200. },
  201. set: function (value) {
  202. this._setOption('collapsibleGroups', value);
  203. },
  204. enumerable: true,
  205. configurable: true
  206. });
  207. Object.defineProperty(DxListComponent.prototype, "dataSource", {
  208. get: /**
  209. * Binds the widget to data.
  210. */
  211. function () {
  212. return this._getOption('dataSource');
  213. },
  214. set: function (value) {
  215. this._setOption('dataSource', value);
  216. },
  217. enumerable: true,
  218. configurable: true
  219. });
  220. Object.defineProperty(DxListComponent.prototype, "disabled", {
  221. get: /**
  222. * Specifies whether the widget responds to user interaction.
  223. */
  224. function () {
  225. return this._getOption('disabled');
  226. },
  227. set: function (value) {
  228. this._setOption('disabled', value);
  229. },
  230. enumerable: true,
  231. configurable: true
  232. });
  233. Object.defineProperty(DxListComponent.prototype, "displayExpr", {
  234. get: /**
  235. * Specifies the data field whose values should be displayed. Defaults to "text" when the data source contains objects.
  236. */
  237. function () {
  238. return this._getOption('displayExpr');
  239. },
  240. set: function (value) {
  241. this._setOption('displayExpr', value);
  242. },
  243. enumerable: true,
  244. configurable: true
  245. });
  246. Object.defineProperty(DxListComponent.prototype, "elementAttr", {
  247. get: /**
  248. * Specifies the attributes to be attached to the widget's root element.
  249. */
  250. function () {
  251. return this._getOption('elementAttr');
  252. },
  253. set: function (value) {
  254. this._setOption('elementAttr', value);
  255. },
  256. enumerable: true,
  257. configurable: true
  258. });
  259. Object.defineProperty(DxListComponent.prototype, "focusStateEnabled", {
  260. get: /**
  261. * Specifies whether the widget can be focused using keyboard navigation.
  262. */
  263. function () {
  264. return this._getOption('focusStateEnabled');
  265. },
  266. set: function (value) {
  267. this._setOption('focusStateEnabled', value);
  268. },
  269. enumerable: true,
  270. configurable: true
  271. });
  272. Object.defineProperty(DxListComponent.prototype, "grouped", {
  273. get: /**
  274. * Specifies whether data items should be grouped.
  275. */
  276. function () {
  277. return this._getOption('grouped');
  278. },
  279. set: function (value) {
  280. this._setOption('grouped', value);
  281. },
  282. enumerable: true,
  283. configurable: true
  284. });
  285. Object.defineProperty(DxListComponent.prototype, "groupTemplate", {
  286. get: /**
  287. * Specifies a custom template for group captions.
  288. */
  289. function () {
  290. return this._getOption('groupTemplate');
  291. },
  292. set: function (value) {
  293. this._setOption('groupTemplate', value);
  294. },
  295. enumerable: true,
  296. configurable: true
  297. });
  298. Object.defineProperty(DxListComponent.prototype, "height", {
  299. get: /**
  300. * Specifies the widget's height.
  301. */
  302. function () {
  303. return this._getOption('height');
  304. },
  305. set: function (value) {
  306. this._setOption('height', value);
  307. },
  308. enumerable: true,
  309. configurable: true
  310. });
  311. Object.defineProperty(DxListComponent.prototype, "hint", {
  312. get: /**
  313. * Specifies text for a hint that appears when a user pauses on the widget.
  314. */
  315. function () {
  316. return this._getOption('hint');
  317. },
  318. set: function (value) {
  319. this._setOption('hint', value);
  320. },
  321. enumerable: true,
  322. configurable: true
  323. });
  324. Object.defineProperty(DxListComponent.prototype, "hoverStateEnabled", {
  325. get: /**
  326. * Specifies whether the widget changes its state when a user pauses on it.
  327. */
  328. function () {
  329. return this._getOption('hoverStateEnabled');
  330. },
  331. set: function (value) {
  332. this._setOption('hoverStateEnabled', value);
  333. },
  334. enumerable: true,
  335. configurable: true
  336. });
  337. Object.defineProperty(DxListComponent.prototype, "indicateLoading", {
  338. get: /**
  339. * Specifies whether or not to show the loading panel when the DataSource bound to the widget is loading data.
  340. */
  341. function () {
  342. return this._getOption('indicateLoading');
  343. },
  344. set: function (value) {
  345. this._setOption('indicateLoading', value);
  346. },
  347. enumerable: true,
  348. configurable: true
  349. });
  350. Object.defineProperty(DxListComponent.prototype, "itemDeleteMode", {
  351. get: /**
  352. * Specifies the way a user can delete items from the list.
  353. */
  354. function () {
  355. return this._getOption('itemDeleteMode');
  356. },
  357. set: function (value) {
  358. this._setOption('itemDeleteMode', value);
  359. },
  360. enumerable: true,
  361. configurable: true
  362. });
  363. Object.defineProperty(DxListComponent.prototype, "itemHoldTimeout", {
  364. get: /**
  365. * The time period in milliseconds before the onItemHold event is raised.
  366. */
  367. function () {
  368. return this._getOption('itemHoldTimeout');
  369. },
  370. set: function (value) {
  371. this._setOption('itemHoldTimeout', value);
  372. },
  373. enumerable: true,
  374. configurable: true
  375. });
  376. Object.defineProperty(DxListComponent.prototype, "items", {
  377. get: /**
  378. * An array of items displayed by the widget.
  379. */
  380. function () {
  381. return this._getOption('items');
  382. },
  383. set: function (value) {
  384. this._setOption('items', value);
  385. },
  386. enumerable: true,
  387. configurable: true
  388. });
  389. Object.defineProperty(DxListComponent.prototype, "itemTemplate", {
  390. get: /**
  391. * Specifies a custom template for items.
  392. */
  393. function () {
  394. return this._getOption('itemTemplate');
  395. },
  396. set: function (value) {
  397. this._setOption('itemTemplate', value);
  398. },
  399. enumerable: true,
  400. configurable: true
  401. });
  402. Object.defineProperty(DxListComponent.prototype, "keyExpr", {
  403. get: /**
  404. * Specifies which data field provides keys for widget items.
  405. */
  406. function () {
  407. return this._getOption('keyExpr');
  408. },
  409. set: function (value) {
  410. this._setOption('keyExpr', value);
  411. },
  412. enumerable: true,
  413. configurable: true
  414. });
  415. Object.defineProperty(DxListComponent.prototype, "menuItems", {
  416. get: /**
  417. * Specifies the array of items for a context menu called for a list item.
  418. */
  419. function () {
  420. return this._getOption('menuItems');
  421. },
  422. set: function (value) {
  423. this._setOption('menuItems', value);
  424. },
  425. enumerable: true,
  426. configurable: true
  427. });
  428. Object.defineProperty(DxListComponent.prototype, "menuMode", {
  429. get: /**
  430. * Specifies whether an item context menu is shown when a user holds or swipes an item.
  431. */
  432. function () {
  433. return this._getOption('menuMode');
  434. },
  435. set: function (value) {
  436. this._setOption('menuMode', value);
  437. },
  438. enumerable: true,
  439. configurable: true
  440. });
  441. Object.defineProperty(DxListComponent.prototype, "nextButtonText", {
  442. get: /**
  443. * The text displayed on the button used to load the next page from the data source.
  444. */
  445. function () {
  446. return this._getOption('nextButtonText');
  447. },
  448. set: function (value) {
  449. this._setOption('nextButtonText', value);
  450. },
  451. enumerable: true,
  452. configurable: true
  453. });
  454. Object.defineProperty(DxListComponent.prototype, "noDataText", {
  455. get: /**
  456. * The text or HTML markup displayed by the widget if the item collection is empty.
  457. */
  458. function () {
  459. return this._getOption('noDataText');
  460. },
  461. set: function (value) {
  462. this._setOption('noDataText', value);
  463. },
  464. enumerable: true,
  465. configurable: true
  466. });
  467. Object.defineProperty(DxListComponent.prototype, "pageLoadingText", {
  468. get: /**
  469. * Specifies the text shown in the pullDown panel, which is displayed when the list is scrolled to the bottom.
  470. */
  471. function () {
  472. return this._getOption('pageLoadingText');
  473. },
  474. set: function (value) {
  475. this._setOption('pageLoadingText', value);
  476. },
  477. enumerable: true,
  478. configurable: true
  479. });
  480. Object.defineProperty(DxListComponent.prototype, "pageLoadMode", {
  481. get: /**
  482. * Specifies whether the next page is loaded when a user scrolls the widget to the bottom or when the "next" button is clicked.
  483. */
  484. function () {
  485. return this._getOption('pageLoadMode');
  486. },
  487. set: function (value) {
  488. this._setOption('pageLoadMode', value);
  489. },
  490. enumerable: true,
  491. configurable: true
  492. });
  493. Object.defineProperty(DxListComponent.prototype, "pulledDownText", {
  494. get: /**
  495. * Specifies the text displayed in the pullDown panel when the list is pulled below the refresh threshold.
  496. */
  497. function () {
  498. return this._getOption('pulledDownText');
  499. },
  500. set: function (value) {
  501. this._setOption('pulledDownText', value);
  502. },
  503. enumerable: true,
  504. configurable: true
  505. });
  506. Object.defineProperty(DxListComponent.prototype, "pullingDownText", {
  507. get: /**
  508. * Specifies the text shown in the pullDown panel while the list is being pulled down to the refresh threshold.
  509. */
  510. function () {
  511. return this._getOption('pullingDownText');
  512. },
  513. set: function (value) {
  514. this._setOption('pullingDownText', value);
  515. },
  516. enumerable: true,
  517. configurable: true
  518. });
  519. Object.defineProperty(DxListComponent.prototype, "pullRefreshEnabled", {
  520. get: /**
  521. * A Boolean value specifying whether or not the widget supports the "pull down to refresh" gesture.
  522. */
  523. function () {
  524. return this._getOption('pullRefreshEnabled');
  525. },
  526. set: function (value) {
  527. this._setOption('pullRefreshEnabled', value);
  528. },
  529. enumerable: true,
  530. configurable: true
  531. });
  532. Object.defineProperty(DxListComponent.prototype, "refreshingText", {
  533. get: /**
  534. * Specifies the text displayed in the pullDown panel while the list is being refreshed.
  535. */
  536. function () {
  537. return this._getOption('refreshingText');
  538. },
  539. set: function (value) {
  540. this._setOption('refreshingText', value);
  541. },
  542. enumerable: true,
  543. configurable: true
  544. });
  545. Object.defineProperty(DxListComponent.prototype, "repaintChangesOnly", {
  546. get: /**
  547. * Specifies whether to repaint only those elements whose data changed.
  548. */
  549. function () {
  550. return this._getOption('repaintChangesOnly');
  551. },
  552. set: function (value) {
  553. this._setOption('repaintChangesOnly', value);
  554. },
  555. enumerable: true,
  556. configurable: true
  557. });
  558. Object.defineProperty(DxListComponent.prototype, "rtlEnabled", {
  559. get: /**
  560. * Switches the widget to a right-to-left representation.
  561. */
  562. function () {
  563. return this._getOption('rtlEnabled');
  564. },
  565. set: function (value) {
  566. this._setOption('rtlEnabled', value);
  567. },
  568. enumerable: true,
  569. configurable: true
  570. });
  571. Object.defineProperty(DxListComponent.prototype, "scrollByContent", {
  572. get: /**
  573. * A Boolean value specifying if the list is scrolled by content.
  574. */
  575. function () {
  576. return this._getOption('scrollByContent');
  577. },
  578. set: function (value) {
  579. this._setOption('scrollByContent', value);
  580. },
  581. enumerable: true,
  582. configurable: true
  583. });
  584. Object.defineProperty(DxListComponent.prototype, "scrollByThumb", {
  585. get: /**
  586. * A Boolean value specifying if the list is scrolled using the scrollbar.
  587. */
  588. function () {
  589. return this._getOption('scrollByThumb');
  590. },
  591. set: function (value) {
  592. this._setOption('scrollByThumb', value);
  593. },
  594. enumerable: true,
  595. configurable: true
  596. });
  597. Object.defineProperty(DxListComponent.prototype, "scrollingEnabled", {
  598. get: /**
  599. * A Boolean value specifying whether to enable or disable list scrolling.
  600. */
  601. function () {
  602. return this._getOption('scrollingEnabled');
  603. },
  604. set: function (value) {
  605. this._setOption('scrollingEnabled', value);
  606. },
  607. enumerable: true,
  608. configurable: true
  609. });
  610. Object.defineProperty(DxListComponent.prototype, "searchEditorOptions", {
  611. get: /**
  612. * Configures the search panel.
  613. */
  614. function () {
  615. return this._getOption('searchEditorOptions');
  616. },
  617. set: function (value) {
  618. this._setOption('searchEditorOptions', value);
  619. },
  620. enumerable: true,
  621. configurable: true
  622. });
  623. Object.defineProperty(DxListComponent.prototype, "searchEnabled", {
  624. get: /**
  625. * Specifies whether the search panel is visible.
  626. */
  627. function () {
  628. return this._getOption('searchEnabled');
  629. },
  630. set: function (value) {
  631. this._setOption('searchEnabled', value);
  632. },
  633. enumerable: true,
  634. configurable: true
  635. });
  636. Object.defineProperty(DxListComponent.prototype, "searchExpr", {
  637. get: /**
  638. * Specifies a data object's field name or an expression whose value is compared to the search string.
  639. */
  640. function () {
  641. return this._getOption('searchExpr');
  642. },
  643. set: function (value) {
  644. this._setOption('searchExpr', value);
  645. },
  646. enumerable: true,
  647. configurable: true
  648. });
  649. Object.defineProperty(DxListComponent.prototype, "searchMode", {
  650. get: /**
  651. * Specifies a comparison operation used to search widget items.
  652. */
  653. function () {
  654. return this._getOption('searchMode');
  655. },
  656. set: function (value) {
  657. this._setOption('searchMode', value);
  658. },
  659. enumerable: true,
  660. configurable: true
  661. });
  662. Object.defineProperty(DxListComponent.prototype, "searchTimeout", {
  663. get: /**
  664. * Specifies a delay in milliseconds between when a user finishes typing, and the search is executed.
  665. */
  666. function () {
  667. return this._getOption('searchTimeout');
  668. },
  669. set: function (value) {
  670. this._setOption('searchTimeout', value);
  671. },
  672. enumerable: true,
  673. configurable: true
  674. });
  675. Object.defineProperty(DxListComponent.prototype, "searchValue", {
  676. get: /**
  677. * Specifies the current search string.
  678. */
  679. function () {
  680. return this._getOption('searchValue');
  681. },
  682. set: function (value) {
  683. this._setOption('searchValue', value);
  684. },
  685. enumerable: true,
  686. configurable: true
  687. });
  688. Object.defineProperty(DxListComponent.prototype, "selectAllMode", {
  689. get: /**
  690. * Specifies the mode in which all items are selected.
  691. */
  692. function () {
  693. return this._getOption('selectAllMode');
  694. },
  695. set: function (value) {
  696. this._setOption('selectAllMode', value);
  697. },
  698. enumerable: true,
  699. configurable: true
  700. });
  701. Object.defineProperty(DxListComponent.prototype, "selectedItemKeys", {
  702. get: /**
  703. * Specifies an array of currently selected item keys.
  704. */
  705. function () {
  706. return this._getOption('selectedItemKeys');
  707. },
  708. set: function (value) {
  709. this._setOption('selectedItemKeys', value);
  710. },
  711. enumerable: true,
  712. configurable: true
  713. });
  714. Object.defineProperty(DxListComponent.prototype, "selectedItems", {
  715. get: /**
  716. * An array of currently selected item objects.
  717. */
  718. function () {
  719. return this._getOption('selectedItems');
  720. },
  721. set: function (value) {
  722. this._setOption('selectedItems', value);
  723. },
  724. enumerable: true,
  725. configurable: true
  726. });
  727. Object.defineProperty(DxListComponent.prototype, "selectionMode", {
  728. get: /**
  729. * Specifies item selection mode.
  730. */
  731. function () {
  732. return this._getOption('selectionMode');
  733. },
  734. set: function (value) {
  735. this._setOption('selectionMode', value);
  736. },
  737. enumerable: true,
  738. configurable: true
  739. });
  740. Object.defineProperty(DxListComponent.prototype, "showScrollbar", {
  741. get: /**
  742. * Specifies when the widget shows the scrollbar.
  743. */
  744. function () {
  745. return this._getOption('showScrollbar');
  746. },
  747. set: function (value) {
  748. this._setOption('showScrollbar', value);
  749. },
  750. enumerable: true,
  751. configurable: true
  752. });
  753. Object.defineProperty(DxListComponent.prototype, "showSelectionControls", {
  754. get: /**
  755. * Specifies whether or not to display controls used to select list items.
  756. */
  757. function () {
  758. return this._getOption('showSelectionControls');
  759. },
  760. set: function (value) {
  761. this._setOption('showSelectionControls', value);
  762. },
  763. enumerable: true,
  764. configurable: true
  765. });
  766. Object.defineProperty(DxListComponent.prototype, "tabIndex", {
  767. get: /**
  768. * Specifies the number of the element when the Tab key is used for navigating.
  769. */
  770. function () {
  771. return this._getOption('tabIndex');
  772. },
  773. set: function (value) {
  774. this._setOption('tabIndex', value);
  775. },
  776. enumerable: true,
  777. configurable: true
  778. });
  779. Object.defineProperty(DxListComponent.prototype, "useNativeScrolling", {
  780. get: /**
  781. * Specifies whether or not the widget uses native scrolling.
  782. */
  783. function () {
  784. return this._getOption('useNativeScrolling');
  785. },
  786. set: function (value) {
  787. this._setOption('useNativeScrolling', value);
  788. },
  789. enumerable: true,
  790. configurable: true
  791. });
  792. Object.defineProperty(DxListComponent.prototype, "visible", {
  793. get: /**
  794. * Specifies whether the widget is visible.
  795. */
  796. function () {
  797. return this._getOption('visible');
  798. },
  799. set: function (value) {
  800. this._setOption('visible', value);
  801. },
  802. enumerable: true,
  803. configurable: true
  804. });
  805. Object.defineProperty(DxListComponent.prototype, "width", {
  806. get: /**
  807. * Specifies the widget's width.
  808. */
  809. function () {
  810. return this._getOption('width');
  811. },
  812. set: function (value) {
  813. this._setOption('width', value);
  814. },
  815. enumerable: true,
  816. configurable: true
  817. });
  818. Object.defineProperty(DxListComponent.prototype, "itemsChildren", {
  819. get: function () {
  820. return this._getOption('items');
  821. },
  822. set: function (value) {
  823. this.setChildren('items', value);
  824. },
  825. enumerable: true,
  826. configurable: true
  827. });
  828. Object.defineProperty(DxListComponent.prototype, "menuItemsChildren", {
  829. get: function () {
  830. return this._getOption('menuItems');
  831. },
  832. set: function (value) {
  833. this.setChildren('menuItems', value);
  834. },
  835. enumerable: true,
  836. configurable: true
  837. });
  838. DxListComponent.prototype._createInstance = function (element, options) {
  839. return new list_1.default(element, options);
  840. };
  841. DxListComponent.prototype.ngOnDestroy = function () {
  842. this._destroyWidget();
  843. };
  844. DxListComponent.prototype.ngOnChanges = function (changes) {
  845. _super.prototype.ngOnChanges.call(this, changes);
  846. this.setupChanges('dataSource', changes);
  847. this.setupChanges('items', changes);
  848. this.setupChanges('menuItems', changes);
  849. this.setupChanges('searchExpr', changes);
  850. this.setupChanges('selectedItemKeys', changes);
  851. this.setupChanges('selectedItems', changes);
  852. };
  853. DxListComponent.prototype.setupChanges = function (prop, changes) {
  854. if (!(prop in this._optionsToUpdate)) {
  855. this._idh.setup(prop, changes);
  856. }
  857. };
  858. DxListComponent.prototype.ngDoCheck = function () {
  859. this._idh.doCheck('dataSource');
  860. this._idh.doCheck('items');
  861. this._idh.doCheck('menuItems');
  862. this._idh.doCheck('searchExpr');
  863. this._idh.doCheck('selectedItemKeys');
  864. this._idh.doCheck('selectedItems');
  865. this._watcherHelper.checkWatchers();
  866. _super.prototype.ngDoCheck.call(this);
  867. _super.prototype.clearChangedOptions.call(this);
  868. };
  869. DxListComponent.prototype._setOption = function (name, value) {
  870. var isSetup = this._idh.setupSingle(name, value);
  871. var isChanged = this._idh.getChanges(name, value) !== null;
  872. if (isSetup || isChanged) {
  873. _super.prototype._setOption.call(this, name, value);
  874. }
  875. };
  876. DxListComponent.decorators = [
  877. { type: core_1.Component, args: [{
  878. selector: 'dx-list',
  879. template: '',
  880. providers: [
  881. template_host_1.DxTemplateHost,
  882. watcher_helper_1.WatcherHelper,
  883. nested_option_1.NestedOptionHost,
  884. iterable_differ_helper_1.IterableDifferHelper
  885. ]
  886. },] },
  887. ];
  888. /** @nocollapse */
  889. DxListComponent.ctorParameters = function () { return [
  890. { type: core_1.ElementRef, },
  891. { type: core_1.NgZone, },
  892. { type: template_host_1.DxTemplateHost, },
  893. { type: watcher_helper_1.WatcherHelper, },
  894. { type: iterable_differ_helper_1.IterableDifferHelper, },
  895. { type: nested_option_1.NestedOptionHost, },
  896. { type: platform_browser_2.TransferState, },
  897. { type: undefined, decorators: [{ type: core_1.Inject, args: [core_1.PLATFORM_ID,] },] },
  898. ]; };
  899. DxListComponent.propDecorators = {
  900. "accessKey": [{ type: core_1.Input },],
  901. "activeStateEnabled": [{ type: core_1.Input },],
  902. "allowItemDeleting": [{ type: core_1.Input },],
  903. "allowItemReordering": [{ type: core_1.Input },],
  904. "bounceEnabled": [{ type: core_1.Input },],
  905. "collapsibleGroups": [{ type: core_1.Input },],
  906. "dataSource": [{ type: core_1.Input },],
  907. "disabled": [{ type: core_1.Input },],
  908. "displayExpr": [{ type: core_1.Input },],
  909. "elementAttr": [{ type: core_1.Input },],
  910. "focusStateEnabled": [{ type: core_1.Input },],
  911. "grouped": [{ type: core_1.Input },],
  912. "groupTemplate": [{ type: core_1.Input },],
  913. "height": [{ type: core_1.Input },],
  914. "hint": [{ type: core_1.Input },],
  915. "hoverStateEnabled": [{ type: core_1.Input },],
  916. "indicateLoading": [{ type: core_1.Input },],
  917. "itemDeleteMode": [{ type: core_1.Input },],
  918. "itemHoldTimeout": [{ type: core_1.Input },],
  919. "items": [{ type: core_1.Input },],
  920. "itemTemplate": [{ type: core_1.Input },],
  921. "keyExpr": [{ type: core_1.Input },],
  922. "menuItems": [{ type: core_1.Input },],
  923. "menuMode": [{ type: core_1.Input },],
  924. "nextButtonText": [{ type: core_1.Input },],
  925. "noDataText": [{ type: core_1.Input },],
  926. "pageLoadingText": [{ type: core_1.Input },],
  927. "pageLoadMode": [{ type: core_1.Input },],
  928. "pulledDownText": [{ type: core_1.Input },],
  929. "pullingDownText": [{ type: core_1.Input },],
  930. "pullRefreshEnabled": [{ type: core_1.Input },],
  931. "refreshingText": [{ type: core_1.Input },],
  932. "repaintChangesOnly": [{ type: core_1.Input },],
  933. "rtlEnabled": [{ type: core_1.Input },],
  934. "scrollByContent": [{ type: core_1.Input },],
  935. "scrollByThumb": [{ type: core_1.Input },],
  936. "scrollingEnabled": [{ type: core_1.Input },],
  937. "searchEditorOptions": [{ type: core_1.Input },],
  938. "searchEnabled": [{ type: core_1.Input },],
  939. "searchExpr": [{ type: core_1.Input },],
  940. "searchMode": [{ type: core_1.Input },],
  941. "searchTimeout": [{ type: core_1.Input },],
  942. "searchValue": [{ type: core_1.Input },],
  943. "selectAllMode": [{ type: core_1.Input },],
  944. "selectedItemKeys": [{ type: core_1.Input },],
  945. "selectedItems": [{ type: core_1.Input },],
  946. "selectionMode": [{ type: core_1.Input },],
  947. "showScrollbar": [{ type: core_1.Input },],
  948. "showSelectionControls": [{ type: core_1.Input },],
  949. "tabIndex": [{ type: core_1.Input },],
  950. "useNativeScrolling": [{ type: core_1.Input },],
  951. "visible": [{ type: core_1.Input },],
  952. "width": [{ type: core_1.Input },],
  953. "onContentReady": [{ type: core_1.Output },],
  954. "onDisposing": [{ type: core_1.Output },],
  955. "onGroupRendered": [{ type: core_1.Output },],
  956. "onInitialized": [{ type: core_1.Output },],
  957. "onItemClick": [{ type: core_1.Output },],
  958. "onItemContextMenu": [{ type: core_1.Output },],
  959. "onItemDeleted": [{ type: core_1.Output },],
  960. "onItemDeleting": [{ type: core_1.Output },],
  961. "onItemHold": [{ type: core_1.Output },],
  962. "onItemRendered": [{ type: core_1.Output },],
  963. "onItemReordered": [{ type: core_1.Output },],
  964. "onItemSwipe": [{ type: core_1.Output },],
  965. "onOptionChanged": [{ type: core_1.Output },],
  966. "onPageLoading": [{ type: core_1.Output },],
  967. "onPullRefresh": [{ type: core_1.Output },],
  968. "onScroll": [{ type: core_1.Output },],
  969. "onSelectAllValueChanged": [{ type: core_1.Output },],
  970. "onSelectionChanged": [{ type: core_1.Output },],
  971. "accessKeyChange": [{ type: core_1.Output },],
  972. "activeStateEnabledChange": [{ type: core_1.Output },],
  973. "allowItemDeletingChange": [{ type: core_1.Output },],
  974. "allowItemReorderingChange": [{ type: core_1.Output },],
  975. "bounceEnabledChange": [{ type: core_1.Output },],
  976. "collapsibleGroupsChange": [{ type: core_1.Output },],
  977. "dataSourceChange": [{ type: core_1.Output },],
  978. "disabledChange": [{ type: core_1.Output },],
  979. "displayExprChange": [{ type: core_1.Output },],
  980. "elementAttrChange": [{ type: core_1.Output },],
  981. "focusStateEnabledChange": [{ type: core_1.Output },],
  982. "groupedChange": [{ type: core_1.Output },],
  983. "groupTemplateChange": [{ type: core_1.Output },],
  984. "heightChange": [{ type: core_1.Output },],
  985. "hintChange": [{ type: core_1.Output },],
  986. "hoverStateEnabledChange": [{ type: core_1.Output },],
  987. "indicateLoadingChange": [{ type: core_1.Output },],
  988. "itemDeleteModeChange": [{ type: core_1.Output },],
  989. "itemHoldTimeoutChange": [{ type: core_1.Output },],
  990. "itemsChange": [{ type: core_1.Output },],
  991. "itemTemplateChange": [{ type: core_1.Output },],
  992. "keyExprChange": [{ type: core_1.Output },],
  993. "menuItemsChange": [{ type: core_1.Output },],
  994. "menuModeChange": [{ type: core_1.Output },],
  995. "nextButtonTextChange": [{ type: core_1.Output },],
  996. "noDataTextChange": [{ type: core_1.Output },],
  997. "pageLoadingTextChange": [{ type: core_1.Output },],
  998. "pageLoadModeChange": [{ type: core_1.Output },],
  999. "pulledDownTextChange": [{ type: core_1.Output },],
  1000. "pullingDownTextChange": [{ type: core_1.Output },],
  1001. "pullRefreshEnabledChange": [{ type: core_1.Output },],
  1002. "refreshingTextChange": [{ type: core_1.Output },],
  1003. "repaintChangesOnlyChange": [{ type: core_1.Output },],
  1004. "rtlEnabledChange": [{ type: core_1.Output },],
  1005. "scrollByContentChange": [{ type: core_1.Output },],
  1006. "scrollByThumbChange": [{ type: core_1.Output },],
  1007. "scrollingEnabledChange": [{ type: core_1.Output },],
  1008. "searchEditorOptionsChange": [{ type: core_1.Output },],
  1009. "searchEnabledChange": [{ type: core_1.Output },],
  1010. "searchExprChange": [{ type: core_1.Output },],
  1011. "searchModeChange": [{ type: core_1.Output },],
  1012. "searchTimeoutChange": [{ type: core_1.Output },],
  1013. "searchValueChange": [{ type: core_1.Output },],
  1014. "selectAllModeChange": [{ type: core_1.Output },],
  1015. "selectedItemKeysChange": [{ type: core_1.Output },],
  1016. "selectedItemsChange": [{ type: core_1.Output },],
  1017. "selectionModeChange": [{ type: core_1.Output },],
  1018. "showScrollbarChange": [{ type: core_1.Output },],
  1019. "showSelectionControlsChange": [{ type: core_1.Output },],
  1020. "tabIndexChange": [{ type: core_1.Output },],
  1021. "useNativeScrollingChange": [{ type: core_1.Output },],
  1022. "visibleChange": [{ type: core_1.Output },],
  1023. "widthChange": [{ type: core_1.Output },],
  1024. "itemsChildren": [{ type: core_1.ContentChildren, args: [item_dxi_2.DxiItemComponent,] },],
  1025. "menuItemsChildren": [{ type: core_1.ContentChildren, args: [menu_item_dxi_2.DxiMenuItemComponent,] },],
  1026. };
  1027. return DxListComponent;
  1028. }(component_1.DxComponent));
  1029. exports.DxListComponent = DxListComponent;
  1030. var DxListModule = (function () {
  1031. function DxListModule() {
  1032. }
  1033. DxListModule.decorators = [
  1034. { type: core_1.NgModule, args: [{
  1035. imports: [
  1036. item_dxi_1.DxiItemModule,
  1037. menu_item_dxi_1.DxiMenuItemModule,
  1038. search_editor_options_1.DxoSearchEditorOptionsModule,
  1039. button_dxi_1.DxiButtonModule,
  1040. options_1.DxoOptionsModule,
  1041. integration_1.DxIntegrationModule,
  1042. template_1.DxTemplateModule,
  1043. platform_browser_1.BrowserTransferStateModule
  1044. ],
  1045. declarations: [
  1046. DxListComponent
  1047. ],
  1048. exports: [
  1049. DxListComponent,
  1050. item_dxi_1.DxiItemModule,
  1051. menu_item_dxi_1.DxiMenuItemModule,
  1052. search_editor_options_1.DxoSearchEditorOptionsModule,
  1053. button_dxi_1.DxiButtonModule,
  1054. options_1.DxoOptionsModule,
  1055. template_1.DxTemplateModule
  1056. ]
  1057. },] },
  1058. ];
  1059. return DxListModule;
  1060. }());
  1061. exports.DxListModule = DxListModule;
  1062. //# sourceMappingURL=list.js.map