drop-down-box.js 34 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888
  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 drop_down_box_1 = require("devextreme/ui/drop_down_box");
  29. var forms_1 = require("@angular/forms");
  30. var component_1 = require("../core/component");
  31. var template_host_1 = require("../core/template-host");
  32. var integration_1 = require("../core/integration");
  33. var template_1 = require("../core/template");
  34. var nested_option_1 = require("../core/nested-option");
  35. var watcher_helper_1 = require("../core/watcher-helper");
  36. var iterable_differ_helper_1 = require("../core/iterable-differ-helper");
  37. var button_dxi_1 = require("./nested/button-dxi");
  38. var options_1 = require("./nested/options");
  39. var drop_down_options_1 = require("./nested/drop-down-options");
  40. var animation_1 = require("./nested/animation");
  41. var hide_1 = require("./nested/hide");
  42. var show_1 = require("./nested/show");
  43. var position_1 = require("./nested/position");
  44. var at_1 = require("./nested/at");
  45. var boundary_offset_1 = require("./nested/boundary-offset");
  46. var collision_1 = require("./nested/collision");
  47. var my_1 = require("./nested/my");
  48. var offset_1 = require("./nested/offset");
  49. var toolbar_item_dxi_1 = require("./nested/toolbar-item-dxi");
  50. var item_dxi_1 = require("./nested/item-dxi");
  51. var button_dxi_2 = require("./nested/button-dxi");
  52. var item_dxi_2 = require("./nested/item-dxi");
  53. var CUSTOM_VALUE_ACCESSOR_PROVIDER = {
  54. provide: forms_1.NG_VALUE_ACCESSOR,
  55. useExisting: core_1.forwardRef(function () { return DxDropDownBoxComponent; }),
  56. multi: true
  57. };
  58. /**
  59. * The DropDownBox widget consists of a text field, which displays the current value, and a drop-down field, which can contain any UI element.
  60. */
  61. var DxDropDownBoxComponent = (function (_super) {
  62. __extends(DxDropDownBoxComponent, _super);
  63. function DxDropDownBoxComponent(elementRef, ngZone, templateHost, _watcherHelper, _idh, optionHost, transferState, platformId) {
  64. var _this = _super.call(this, elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId) || this;
  65. _this._watcherHelper = _watcherHelper;
  66. _this._idh = _idh;
  67. _this.touched = function (_) { };
  68. _this._createEventEmitters([
  69. { subscribe: 'change', emit: 'onChange' },
  70. { subscribe: 'closed', emit: 'onClosed' },
  71. { subscribe: 'copy', emit: 'onCopy' },
  72. { subscribe: 'cut', emit: 'onCut' },
  73. { subscribe: 'disposing', emit: 'onDisposing' },
  74. { subscribe: 'enterKey', emit: 'onEnterKey' },
  75. { subscribe: 'focusIn', emit: 'onFocusIn' },
  76. { subscribe: 'focusOut', emit: 'onFocusOut' },
  77. { subscribe: 'initialized', emit: 'onInitialized' },
  78. { subscribe: 'input', emit: 'onInput' },
  79. { subscribe: 'keyDown', emit: 'onKeyDown' },
  80. { subscribe: 'keyPress', emit: 'onKeyPress' },
  81. { subscribe: 'keyUp', emit: 'onKeyUp' },
  82. { subscribe: 'opened', emit: 'onOpened' },
  83. { subscribe: 'optionChanged', emit: 'onOptionChanged' },
  84. { subscribe: 'paste', emit: 'onPaste' },
  85. { subscribe: 'valueChanged', emit: 'onValueChanged' },
  86. { emit: 'acceptCustomValueChange' },
  87. { emit: 'accessKeyChange' },
  88. { emit: 'activeStateEnabledChange' },
  89. { emit: 'buttonsChange' },
  90. { emit: 'contentTemplateChange' },
  91. { emit: 'dataSourceChange' },
  92. { emit: 'deferRenderingChange' },
  93. { emit: 'disabledChange' },
  94. { emit: 'displayExprChange' },
  95. { emit: 'dropDownButtonTemplateChange' },
  96. { emit: 'dropDownOptionsChange' },
  97. { emit: 'elementAttrChange' },
  98. { emit: 'fieldTemplateChange' },
  99. { emit: 'focusStateEnabledChange' },
  100. { emit: 'heightChange' },
  101. { emit: 'hintChange' },
  102. { emit: 'hoverStateEnabledChange' },
  103. { emit: 'inputAttrChange' },
  104. { emit: 'isValidChange' },
  105. { emit: 'itemsChange' },
  106. { emit: 'maxLengthChange' },
  107. { emit: 'nameChange' },
  108. { emit: 'openedChange' },
  109. { emit: 'openOnFieldClickChange' },
  110. { emit: 'placeholderChange' },
  111. { emit: 'readOnlyChange' },
  112. { emit: 'rtlEnabledChange' },
  113. { emit: 'showClearButtonChange' },
  114. { emit: 'showDropDownButtonChange' },
  115. { emit: 'stylingModeChange' },
  116. { emit: 'tabIndexChange' },
  117. { emit: 'textChange' },
  118. { emit: 'validationErrorChange' },
  119. { emit: 'validationMessageModeChange' },
  120. { emit: 'valueChange' },
  121. { emit: 'valueChangeEventChange' },
  122. { emit: 'valueExprChange' },
  123. { emit: 'visibleChange' },
  124. { emit: 'widthChange' },
  125. { emit: 'onBlur' }
  126. ]);
  127. _this._idh.setHost(_this);
  128. optionHost.setHost(_this);
  129. return _this;
  130. }
  131. Object.defineProperty(DxDropDownBoxComponent.prototype, "acceptCustomValue", {
  132. get: /**
  133. * Specifies whether the widget allows a user to enter a custom value.
  134. */
  135. function () {
  136. return this._getOption('acceptCustomValue');
  137. },
  138. set: function (value) {
  139. this._setOption('acceptCustomValue', value);
  140. },
  141. enumerable: true,
  142. configurable: true
  143. });
  144. Object.defineProperty(DxDropDownBoxComponent.prototype, "accessKey", {
  145. get: /**
  146. * Specifies the shortcut key that sets focus on the widget.
  147. */
  148. function () {
  149. return this._getOption('accessKey');
  150. },
  151. set: function (value) {
  152. this._setOption('accessKey', value);
  153. },
  154. enumerable: true,
  155. configurable: true
  156. });
  157. Object.defineProperty(DxDropDownBoxComponent.prototype, "activeStateEnabled", {
  158. get: /**
  159. * Specifies whether or not the widget changes its state when interacting with a user.
  160. */
  161. function () {
  162. return this._getOption('activeStateEnabled');
  163. },
  164. set: function (value) {
  165. this._setOption('activeStateEnabled', value);
  166. },
  167. enumerable: true,
  168. configurable: true
  169. });
  170. Object.defineProperty(DxDropDownBoxComponent.prototype, "buttons", {
  171. get: /**
  172. * Allows you to add custom buttons to the input text field.
  173. */
  174. function () {
  175. return this._getOption('buttons');
  176. },
  177. set: function (value) {
  178. this._setOption('buttons', value);
  179. },
  180. enumerable: true,
  181. configurable: true
  182. });
  183. Object.defineProperty(DxDropDownBoxComponent.prototype, "contentTemplate", {
  184. get: /**
  185. * Specifies a custom template for the drop-down content.
  186. */
  187. function () {
  188. return this._getOption('contentTemplate');
  189. },
  190. set: function (value) {
  191. this._setOption('contentTemplate', value);
  192. },
  193. enumerable: true,
  194. configurable: true
  195. });
  196. Object.defineProperty(DxDropDownBoxComponent.prototype, "dataSource", {
  197. get: /**
  198. * Binds the widget to data.
  199. */
  200. function () {
  201. return this._getOption('dataSource');
  202. },
  203. set: function (value) {
  204. this._setOption('dataSource', value);
  205. },
  206. enumerable: true,
  207. configurable: true
  208. });
  209. Object.defineProperty(DxDropDownBoxComponent.prototype, "deferRendering", {
  210. get: /**
  211. * Specifies whether to render the drop-down field's content when it is displayed. If false, the content is rendered immediately.
  212. */
  213. function () {
  214. return this._getOption('deferRendering');
  215. },
  216. set: function (value) {
  217. this._setOption('deferRendering', value);
  218. },
  219. enumerable: true,
  220. configurable: true
  221. });
  222. Object.defineProperty(DxDropDownBoxComponent.prototype, "disabled", {
  223. get: /**
  224. * Specifies whether the widget responds to user interaction.
  225. */
  226. function () {
  227. return this._getOption('disabled');
  228. },
  229. set: function (value) {
  230. this._setOption('disabled', value);
  231. },
  232. enumerable: true,
  233. configurable: true
  234. });
  235. Object.defineProperty(DxDropDownBoxComponent.prototype, "displayExpr", {
  236. get: /**
  237. * Specifies the data field whose values should be displayed.
  238. */
  239. function () {
  240. return this._getOption('displayExpr');
  241. },
  242. set: function (value) {
  243. this._setOption('displayExpr', value);
  244. },
  245. enumerable: true,
  246. configurable: true
  247. });
  248. Object.defineProperty(DxDropDownBoxComponent.prototype, "dropDownButtonTemplate", {
  249. get: /**
  250. * Specifies a custom template for the drop-down button.
  251. */
  252. function () {
  253. return this._getOption('dropDownButtonTemplate');
  254. },
  255. set: function (value) {
  256. this._setOption('dropDownButtonTemplate', value);
  257. },
  258. enumerable: true,
  259. configurable: true
  260. });
  261. Object.defineProperty(DxDropDownBoxComponent.prototype, "dropDownOptions", {
  262. get: /**
  263. * Configures the drop-down field which holds the content.
  264. */
  265. function () {
  266. return this._getOption('dropDownOptions');
  267. },
  268. set: function (value) {
  269. this._setOption('dropDownOptions', value);
  270. },
  271. enumerable: true,
  272. configurable: true
  273. });
  274. Object.defineProperty(DxDropDownBoxComponent.prototype, "elementAttr", {
  275. get: /**
  276. * Specifies the attributes to be attached to the widget's root element.
  277. */
  278. function () {
  279. return this._getOption('elementAttr');
  280. },
  281. set: function (value) {
  282. this._setOption('elementAttr', value);
  283. },
  284. enumerable: true,
  285. configurable: true
  286. });
  287. Object.defineProperty(DxDropDownBoxComponent.prototype, "fieldTemplate", {
  288. get: /**
  289. * Specifies a custom template for the text field. Must contain the TextBox widget.
  290. */
  291. function () {
  292. return this._getOption('fieldTemplate');
  293. },
  294. set: function (value) {
  295. this._setOption('fieldTemplate', value);
  296. },
  297. enumerable: true,
  298. configurable: true
  299. });
  300. Object.defineProperty(DxDropDownBoxComponent.prototype, "focusStateEnabled", {
  301. get: /**
  302. * Specifies whether the widget can be focused using keyboard navigation.
  303. */
  304. function () {
  305. return this._getOption('focusStateEnabled');
  306. },
  307. set: function (value) {
  308. this._setOption('focusStateEnabled', value);
  309. },
  310. enumerable: true,
  311. configurable: true
  312. });
  313. Object.defineProperty(DxDropDownBoxComponent.prototype, "height", {
  314. get: /**
  315. * Specifies the widget's height.
  316. */
  317. function () {
  318. return this._getOption('height');
  319. },
  320. set: function (value) {
  321. this._setOption('height', value);
  322. },
  323. enumerable: true,
  324. configurable: true
  325. });
  326. Object.defineProperty(DxDropDownBoxComponent.prototype, "hint", {
  327. get: /**
  328. * Specifies text for a hint that appears when a user pauses on the widget.
  329. */
  330. function () {
  331. return this._getOption('hint');
  332. },
  333. set: function (value) {
  334. this._setOption('hint', value);
  335. },
  336. enumerable: true,
  337. configurable: true
  338. });
  339. Object.defineProperty(DxDropDownBoxComponent.prototype, "hoverStateEnabled", {
  340. get: /**
  341. * Specifies whether the widget changes its state when a user pauses on it.
  342. */
  343. function () {
  344. return this._getOption('hoverStateEnabled');
  345. },
  346. set: function (value) {
  347. this._setOption('hoverStateEnabled', value);
  348. },
  349. enumerable: true,
  350. configurable: true
  351. });
  352. Object.defineProperty(DxDropDownBoxComponent.prototype, "inputAttr", {
  353. get: /**
  354. * Specifies the attributes to be passed on to the underlying HTML element.
  355. */
  356. function () {
  357. return this._getOption('inputAttr');
  358. },
  359. set: function (value) {
  360. this._setOption('inputAttr', value);
  361. },
  362. enumerable: true,
  363. configurable: true
  364. });
  365. Object.defineProperty(DxDropDownBoxComponent.prototype, "isValid", {
  366. get: /**
  367. * Specifies whether the editor's value is valid.
  368. */
  369. function () {
  370. return this._getOption('isValid');
  371. },
  372. set: function (value) {
  373. this._setOption('isValid', value);
  374. },
  375. enumerable: true,
  376. configurable: true
  377. });
  378. Object.defineProperty(DxDropDownBoxComponent.prototype, "items", {
  379. get: /**
  380. * An array of items displayed by the widget.
  381. */
  382. function () {
  383. return this._getOption('items');
  384. },
  385. set: function (value) {
  386. this._setOption('items', value);
  387. },
  388. enumerable: true,
  389. configurable: true
  390. });
  391. Object.defineProperty(DxDropDownBoxComponent.prototype, "maxLength", {
  392. get: /**
  393. * Specifies the maximum number of characters you can enter into the textbox.
  394. */
  395. function () {
  396. return this._getOption('maxLength');
  397. },
  398. set: function (value) {
  399. this._setOption('maxLength', value);
  400. },
  401. enumerable: true,
  402. configurable: true
  403. });
  404. Object.defineProperty(DxDropDownBoxComponent.prototype, "name", {
  405. get: /**
  406. * The value to be assigned to the `name` attribute of the underlying HTML element.
  407. */
  408. function () {
  409. return this._getOption('name');
  410. },
  411. set: function (value) {
  412. this._setOption('name', value);
  413. },
  414. enumerable: true,
  415. configurable: true
  416. });
  417. Object.defineProperty(DxDropDownBoxComponent.prototype, "opened", {
  418. get: /**
  419. * Specifies whether or not the drop-down editor is displayed.
  420. */
  421. function () {
  422. return this._getOption('opened');
  423. },
  424. set: function (value) {
  425. this._setOption('opened', value);
  426. },
  427. enumerable: true,
  428. configurable: true
  429. });
  430. Object.defineProperty(DxDropDownBoxComponent.prototype, "openOnFieldClick", {
  431. get: /**
  432. * Specifies whether a user can open the drop-down list by clicking a text field.
  433. */
  434. function () {
  435. return this._getOption('openOnFieldClick');
  436. },
  437. set: function (value) {
  438. this._setOption('openOnFieldClick', value);
  439. },
  440. enumerable: true,
  441. configurable: true
  442. });
  443. Object.defineProperty(DxDropDownBoxComponent.prototype, "placeholder", {
  444. get: /**
  445. * The text displayed by the widget when the widget value is empty.
  446. */
  447. function () {
  448. return this._getOption('placeholder');
  449. },
  450. set: function (value) {
  451. this._setOption('placeholder', value);
  452. },
  453. enumerable: true,
  454. configurable: true
  455. });
  456. Object.defineProperty(DxDropDownBoxComponent.prototype, "readOnly", {
  457. get: /**
  458. * Specifies whether the editor is read-only.
  459. */
  460. function () {
  461. return this._getOption('readOnly');
  462. },
  463. set: function (value) {
  464. this._setOption('readOnly', value);
  465. },
  466. enumerable: true,
  467. configurable: true
  468. });
  469. Object.defineProperty(DxDropDownBoxComponent.prototype, "rtlEnabled", {
  470. get: /**
  471. * Switches the widget to a right-to-left representation.
  472. */
  473. function () {
  474. return this._getOption('rtlEnabled');
  475. },
  476. set: function (value) {
  477. this._setOption('rtlEnabled', value);
  478. },
  479. enumerable: true,
  480. configurable: true
  481. });
  482. Object.defineProperty(DxDropDownBoxComponent.prototype, "showClearButton", {
  483. get: /**
  484. * Specifies whether to display the Clear button in the widget.
  485. */
  486. function () {
  487. return this._getOption('showClearButton');
  488. },
  489. set: function (value) {
  490. this._setOption('showClearButton', value);
  491. },
  492. enumerable: true,
  493. configurable: true
  494. });
  495. Object.defineProperty(DxDropDownBoxComponent.prototype, "showDropDownButton", {
  496. get: /**
  497. * Specifies whether the drop-down button is visible.
  498. */
  499. function () {
  500. return this._getOption('showDropDownButton');
  501. },
  502. set: function (value) {
  503. this._setOption('showDropDownButton', value);
  504. },
  505. enumerable: true,
  506. configurable: true
  507. });
  508. Object.defineProperty(DxDropDownBoxComponent.prototype, "stylingMode", {
  509. get: /**
  510. * Specifies how the widget's text field is styled.
  511. */
  512. function () {
  513. return this._getOption('stylingMode');
  514. },
  515. set: function (value) {
  516. this._setOption('stylingMode', value);
  517. },
  518. enumerable: true,
  519. configurable: true
  520. });
  521. Object.defineProperty(DxDropDownBoxComponent.prototype, "tabIndex", {
  522. get: /**
  523. * Specifies the number of the element when the Tab key is used for navigating.
  524. */
  525. function () {
  526. return this._getOption('tabIndex');
  527. },
  528. set: function (value) {
  529. this._setOption('tabIndex', value);
  530. },
  531. enumerable: true,
  532. configurable: true
  533. });
  534. Object.defineProperty(DxDropDownBoxComponent.prototype, "text", {
  535. get: /**
  536. * The read-only option that holds the text displayed by the widget input element.
  537. */
  538. function () {
  539. return this._getOption('text');
  540. },
  541. set: function (value) {
  542. this._setOption('text', value);
  543. },
  544. enumerable: true,
  545. configurable: true
  546. });
  547. Object.defineProperty(DxDropDownBoxComponent.prototype, "validationError", {
  548. get: /**
  549. * Specifies information on the validation error when using a custom validation engine. Should be changed at runtime along with the isValid option.
  550. */
  551. function () {
  552. return this._getOption('validationError');
  553. },
  554. set: function (value) {
  555. this._setOption('validationError', value);
  556. },
  557. enumerable: true,
  558. configurable: true
  559. });
  560. Object.defineProperty(DxDropDownBoxComponent.prototype, "validationMessageMode", {
  561. get: /**
  562. * Specifies how the message about the validation rules that are not satisfied by this editor's value is displayed.
  563. */
  564. function () {
  565. return this._getOption('validationMessageMode');
  566. },
  567. set: function (value) {
  568. this._setOption('validationMessageMode', value);
  569. },
  570. enumerable: true,
  571. configurable: true
  572. });
  573. Object.defineProperty(DxDropDownBoxComponent.prototype, "value", {
  574. get: /**
  575. * Specifies the currently selected value. May be an object if dataSource contains objects and valueExpr is not set.
  576. */
  577. function () {
  578. return this._getOption('value');
  579. },
  580. set: function (value) {
  581. this._setOption('value', value);
  582. },
  583. enumerable: true,
  584. configurable: true
  585. });
  586. Object.defineProperty(DxDropDownBoxComponent.prototype, "valueChangeEvent", {
  587. get: /**
  588. * Specifies the DOM events after which the widget's value should be updated.
  589. */
  590. function () {
  591. return this._getOption('valueChangeEvent');
  592. },
  593. set: function (value) {
  594. this._setOption('valueChangeEvent', value);
  595. },
  596. enumerable: true,
  597. configurable: true
  598. });
  599. Object.defineProperty(DxDropDownBoxComponent.prototype, "valueExpr", {
  600. get: /**
  601. * Specifies which data field provides unique values to the widget's value.
  602. */
  603. function () {
  604. return this._getOption('valueExpr');
  605. },
  606. set: function (value) {
  607. this._setOption('valueExpr', value);
  608. },
  609. enumerable: true,
  610. configurable: true
  611. });
  612. Object.defineProperty(DxDropDownBoxComponent.prototype, "visible", {
  613. get: /**
  614. * Specifies whether the widget is visible.
  615. */
  616. function () {
  617. return this._getOption('visible');
  618. },
  619. set: function (value) {
  620. this._setOption('visible', value);
  621. },
  622. enumerable: true,
  623. configurable: true
  624. });
  625. Object.defineProperty(DxDropDownBoxComponent.prototype, "width", {
  626. get: /**
  627. * Specifies the widget's width.
  628. */
  629. function () {
  630. return this._getOption('width');
  631. },
  632. set: function (value) {
  633. this._setOption('width', value);
  634. },
  635. enumerable: true,
  636. configurable: true
  637. });
  638. DxDropDownBoxComponent.prototype.change = function (_) { };
  639. Object.defineProperty(DxDropDownBoxComponent.prototype, "buttonsChildren", {
  640. get: function () {
  641. return this._getOption('buttons');
  642. },
  643. set: function (value) {
  644. this.setChildren('buttons', value);
  645. },
  646. enumerable: true,
  647. configurable: true
  648. });
  649. Object.defineProperty(DxDropDownBoxComponent.prototype, "itemsChildren", {
  650. get: function () {
  651. return this._getOption('items');
  652. },
  653. set: function (value) {
  654. this.setChildren('items', value);
  655. },
  656. enumerable: true,
  657. configurable: true
  658. });
  659. DxDropDownBoxComponent.prototype._createInstance = function (element, options) {
  660. return new drop_down_box_1.default(element, options);
  661. };
  662. DxDropDownBoxComponent.prototype.writeValue = function (value) {
  663. this.eventHelper.lockedValueChangeEvent = true;
  664. this.value = value;
  665. this.eventHelper.lockedValueChangeEvent = false;
  666. };
  667. DxDropDownBoxComponent.prototype.setDisabledState = function (isDisabled) {
  668. this.disabled = isDisabled;
  669. };
  670. DxDropDownBoxComponent.prototype.registerOnChange = function (fn) { this.change = fn; };
  671. DxDropDownBoxComponent.prototype.registerOnTouched = function (fn) { this.touched = fn; };
  672. DxDropDownBoxComponent.prototype._createWidget = function (element) {
  673. var _this = this;
  674. _super.prototype._createWidget.call(this, element);
  675. this.instance.on('focusOut', function (e) {
  676. _this.eventHelper.fireNgEvent('onBlur', [e]);
  677. });
  678. };
  679. DxDropDownBoxComponent.prototype.ngOnDestroy = function () {
  680. this._destroyWidget();
  681. };
  682. DxDropDownBoxComponent.prototype.ngOnChanges = function (changes) {
  683. _super.prototype.ngOnChanges.call(this, changes);
  684. this.setupChanges('buttons', changes);
  685. this.setupChanges('dataSource', changes);
  686. this.setupChanges('items', changes);
  687. };
  688. DxDropDownBoxComponent.prototype.setupChanges = function (prop, changes) {
  689. if (!(prop in this._optionsToUpdate)) {
  690. this._idh.setup(prop, changes);
  691. }
  692. };
  693. DxDropDownBoxComponent.prototype.ngDoCheck = function () {
  694. this._idh.doCheck('buttons');
  695. this._idh.doCheck('dataSource');
  696. this._idh.doCheck('items');
  697. this._watcherHelper.checkWatchers();
  698. _super.prototype.ngDoCheck.call(this);
  699. _super.prototype.clearChangedOptions.call(this);
  700. };
  701. DxDropDownBoxComponent.prototype._setOption = function (name, value) {
  702. var isSetup = this._idh.setupSingle(name, value);
  703. var isChanged = this._idh.getChanges(name, value) !== null;
  704. if (isSetup || isChanged) {
  705. _super.prototype._setOption.call(this, name, value);
  706. }
  707. };
  708. DxDropDownBoxComponent.decorators = [
  709. { type: core_1.Component, args: [{
  710. selector: 'dx-drop-down-box',
  711. template: '<ng-content></ng-content>',
  712. providers: [
  713. template_host_1.DxTemplateHost,
  714. watcher_helper_1.WatcherHelper,
  715. CUSTOM_VALUE_ACCESSOR_PROVIDER,
  716. nested_option_1.NestedOptionHost,
  717. iterable_differ_helper_1.IterableDifferHelper
  718. ]
  719. },] },
  720. ];
  721. /** @nocollapse */
  722. DxDropDownBoxComponent.ctorParameters = function () { return [
  723. { type: core_1.ElementRef, },
  724. { type: core_1.NgZone, },
  725. { type: template_host_1.DxTemplateHost, },
  726. { type: watcher_helper_1.WatcherHelper, },
  727. { type: iterable_differ_helper_1.IterableDifferHelper, },
  728. { type: nested_option_1.NestedOptionHost, },
  729. { type: platform_browser_2.TransferState, },
  730. { type: undefined, decorators: [{ type: core_1.Inject, args: [core_1.PLATFORM_ID,] },] },
  731. ]; };
  732. DxDropDownBoxComponent.propDecorators = {
  733. "acceptCustomValue": [{ type: core_1.Input },],
  734. "accessKey": [{ type: core_1.Input },],
  735. "activeStateEnabled": [{ type: core_1.Input },],
  736. "buttons": [{ type: core_1.Input },],
  737. "contentTemplate": [{ type: core_1.Input },],
  738. "dataSource": [{ type: core_1.Input },],
  739. "deferRendering": [{ type: core_1.Input },],
  740. "disabled": [{ type: core_1.Input },],
  741. "displayExpr": [{ type: core_1.Input },],
  742. "dropDownButtonTemplate": [{ type: core_1.Input },],
  743. "dropDownOptions": [{ type: core_1.Input },],
  744. "elementAttr": [{ type: core_1.Input },],
  745. "fieldTemplate": [{ type: core_1.Input },],
  746. "focusStateEnabled": [{ type: core_1.Input },],
  747. "height": [{ type: core_1.Input },],
  748. "hint": [{ type: core_1.Input },],
  749. "hoverStateEnabled": [{ type: core_1.Input },],
  750. "inputAttr": [{ type: core_1.Input },],
  751. "isValid": [{ type: core_1.Input },],
  752. "items": [{ type: core_1.Input },],
  753. "maxLength": [{ type: core_1.Input },],
  754. "name": [{ type: core_1.Input },],
  755. "opened": [{ type: core_1.Input },],
  756. "openOnFieldClick": [{ type: core_1.Input },],
  757. "placeholder": [{ type: core_1.Input },],
  758. "readOnly": [{ type: core_1.Input },],
  759. "rtlEnabled": [{ type: core_1.Input },],
  760. "showClearButton": [{ type: core_1.Input },],
  761. "showDropDownButton": [{ type: core_1.Input },],
  762. "stylingMode": [{ type: core_1.Input },],
  763. "tabIndex": [{ type: core_1.Input },],
  764. "text": [{ type: core_1.Input },],
  765. "validationError": [{ type: core_1.Input },],
  766. "validationMessageMode": [{ type: core_1.Input },],
  767. "value": [{ type: core_1.Input },],
  768. "valueChangeEvent": [{ type: core_1.Input },],
  769. "valueExpr": [{ type: core_1.Input },],
  770. "visible": [{ type: core_1.Input },],
  771. "width": [{ type: core_1.Input },],
  772. "onChange": [{ type: core_1.Output },],
  773. "onClosed": [{ type: core_1.Output },],
  774. "onCopy": [{ type: core_1.Output },],
  775. "onCut": [{ type: core_1.Output },],
  776. "onDisposing": [{ type: core_1.Output },],
  777. "onEnterKey": [{ type: core_1.Output },],
  778. "onFocusIn": [{ type: core_1.Output },],
  779. "onFocusOut": [{ type: core_1.Output },],
  780. "onInitialized": [{ type: core_1.Output },],
  781. "onInput": [{ type: core_1.Output },],
  782. "onKeyDown": [{ type: core_1.Output },],
  783. "onKeyPress": [{ type: core_1.Output },],
  784. "onKeyUp": [{ type: core_1.Output },],
  785. "onOpened": [{ type: core_1.Output },],
  786. "onOptionChanged": [{ type: core_1.Output },],
  787. "onPaste": [{ type: core_1.Output },],
  788. "onValueChanged": [{ type: core_1.Output },],
  789. "acceptCustomValueChange": [{ type: core_1.Output },],
  790. "accessKeyChange": [{ type: core_1.Output },],
  791. "activeStateEnabledChange": [{ type: core_1.Output },],
  792. "buttonsChange": [{ type: core_1.Output },],
  793. "contentTemplateChange": [{ type: core_1.Output },],
  794. "dataSourceChange": [{ type: core_1.Output },],
  795. "deferRenderingChange": [{ type: core_1.Output },],
  796. "disabledChange": [{ type: core_1.Output },],
  797. "displayExprChange": [{ type: core_1.Output },],
  798. "dropDownButtonTemplateChange": [{ type: core_1.Output },],
  799. "dropDownOptionsChange": [{ type: core_1.Output },],
  800. "elementAttrChange": [{ type: core_1.Output },],
  801. "fieldTemplateChange": [{ type: core_1.Output },],
  802. "focusStateEnabledChange": [{ type: core_1.Output },],
  803. "heightChange": [{ type: core_1.Output },],
  804. "hintChange": [{ type: core_1.Output },],
  805. "hoverStateEnabledChange": [{ type: core_1.Output },],
  806. "inputAttrChange": [{ type: core_1.Output },],
  807. "isValidChange": [{ type: core_1.Output },],
  808. "itemsChange": [{ type: core_1.Output },],
  809. "maxLengthChange": [{ type: core_1.Output },],
  810. "nameChange": [{ type: core_1.Output },],
  811. "openedChange": [{ type: core_1.Output },],
  812. "openOnFieldClickChange": [{ type: core_1.Output },],
  813. "placeholderChange": [{ type: core_1.Output },],
  814. "readOnlyChange": [{ type: core_1.Output },],
  815. "rtlEnabledChange": [{ type: core_1.Output },],
  816. "showClearButtonChange": [{ type: core_1.Output },],
  817. "showDropDownButtonChange": [{ type: core_1.Output },],
  818. "stylingModeChange": [{ type: core_1.Output },],
  819. "tabIndexChange": [{ type: core_1.Output },],
  820. "textChange": [{ type: core_1.Output },],
  821. "validationErrorChange": [{ type: core_1.Output },],
  822. "validationMessageModeChange": [{ type: core_1.Output },],
  823. "valueChange": [{ type: core_1.Output },],
  824. "valueChangeEventChange": [{ type: core_1.Output },],
  825. "valueExprChange": [{ type: core_1.Output },],
  826. "visibleChange": [{ type: core_1.Output },],
  827. "widthChange": [{ type: core_1.Output },],
  828. "onBlur": [{ type: core_1.Output },],
  829. "change": [{ type: core_1.HostListener, args: ['valueChange', ['$event'],] },],
  830. "touched": [{ type: core_1.HostListener, args: ['onBlur', ['$event'],] },],
  831. "buttonsChildren": [{ type: core_1.ContentChildren, args: [button_dxi_2.DxiButtonComponent,] },],
  832. "itemsChildren": [{ type: core_1.ContentChildren, args: [item_dxi_2.DxiItemComponent,] },],
  833. };
  834. return DxDropDownBoxComponent;
  835. }(component_1.DxComponent));
  836. exports.DxDropDownBoxComponent = DxDropDownBoxComponent;
  837. var DxDropDownBoxModule = (function () {
  838. function DxDropDownBoxModule() {
  839. }
  840. DxDropDownBoxModule.decorators = [
  841. { type: core_1.NgModule, args: [{
  842. imports: [
  843. button_dxi_1.DxiButtonModule,
  844. options_1.DxoOptionsModule,
  845. drop_down_options_1.DxoDropDownOptionsModule,
  846. animation_1.DxoAnimationModule,
  847. hide_1.DxoHideModule,
  848. show_1.DxoShowModule,
  849. position_1.DxoPositionModule,
  850. at_1.DxoAtModule,
  851. boundary_offset_1.DxoBoundaryOffsetModule,
  852. collision_1.DxoCollisionModule,
  853. my_1.DxoMyModule,
  854. offset_1.DxoOffsetModule,
  855. toolbar_item_dxi_1.DxiToolbarItemModule,
  856. item_dxi_1.DxiItemModule,
  857. integration_1.DxIntegrationModule,
  858. template_1.DxTemplateModule,
  859. platform_browser_1.BrowserTransferStateModule
  860. ],
  861. declarations: [
  862. DxDropDownBoxComponent
  863. ],
  864. exports: [
  865. DxDropDownBoxComponent,
  866. button_dxi_1.DxiButtonModule,
  867. options_1.DxoOptionsModule,
  868. drop_down_options_1.DxoDropDownOptionsModule,
  869. animation_1.DxoAnimationModule,
  870. hide_1.DxoHideModule,
  871. show_1.DxoShowModule,
  872. position_1.DxoPositionModule,
  873. at_1.DxoAtModule,
  874. boundary_offset_1.DxoBoundaryOffsetModule,
  875. collision_1.DxoCollisionModule,
  876. my_1.DxoMyModule,
  877. offset_1.DxoOffsetModule,
  878. toolbar_item_dxi_1.DxiToolbarItemModule,
  879. item_dxi_1.DxiItemModule,
  880. template_1.DxTemplateModule
  881. ]
  882. },] },
  883. ];
  884. return DxDropDownBoxModule;
  885. }());
  886. exports.DxDropDownBoxModule = DxDropDownBoxModule;
  887. //# sourceMappingURL=drop-down-box.js.map