date-box.js 39 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054
  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 date_box_1 = require("devextreme/ui/date_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 calendar_options_1 = require("./nested/calendar-options");
  40. var display_format_1 = require("./nested/display-format");
  41. var button_dxi_2 = require("./nested/button-dxi");
  42. var CUSTOM_VALUE_ACCESSOR_PROVIDER = {
  43. provide: forms_1.NG_VALUE_ACCESSOR,
  44. useExisting: core_1.forwardRef(function () { return DxDateBoxComponent; }),
  45. multi: true
  46. };
  47. /**
  48. * The DateBox is a widget that displays date and time in a specified format, and enables a user to pick or type in the required date/time value.
  49. */
  50. var DxDateBoxComponent = (function (_super) {
  51. __extends(DxDateBoxComponent, _super);
  52. function DxDateBoxComponent(elementRef, ngZone, templateHost, _watcherHelper, _idh, optionHost, transferState, platformId) {
  53. var _this = _super.call(this, elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId) || this;
  54. _this._watcherHelper = _watcherHelper;
  55. _this._idh = _idh;
  56. _this.touched = function (_) { };
  57. _this._createEventEmitters([
  58. { subscribe: 'change', emit: 'onChange' },
  59. { subscribe: 'closed', emit: 'onClosed' },
  60. { subscribe: 'contentReady', emit: 'onContentReady' },
  61. { subscribe: 'copy', emit: 'onCopy' },
  62. { subscribe: 'cut', emit: 'onCut' },
  63. { subscribe: 'disposing', emit: 'onDisposing' },
  64. { subscribe: 'enterKey', emit: 'onEnterKey' },
  65. { subscribe: 'focusIn', emit: 'onFocusIn' },
  66. { subscribe: 'focusOut', emit: 'onFocusOut' },
  67. { subscribe: 'initialized', emit: 'onInitialized' },
  68. { subscribe: 'input', emit: 'onInput' },
  69. { subscribe: 'keyDown', emit: 'onKeyDown' },
  70. { subscribe: 'keyPress', emit: 'onKeyPress' },
  71. { subscribe: 'keyUp', emit: 'onKeyUp' },
  72. { subscribe: 'opened', emit: 'onOpened' },
  73. { subscribe: 'optionChanged', emit: 'onOptionChanged' },
  74. { subscribe: 'paste', emit: 'onPaste' },
  75. { subscribe: 'valueChanged', emit: 'onValueChanged' },
  76. { emit: 'acceptCustomValueChange' },
  77. { emit: 'accessKeyChange' },
  78. { emit: 'activeStateEnabledChange' },
  79. { emit: 'adaptivityEnabledChange' },
  80. { emit: 'applyButtonTextChange' },
  81. { emit: 'applyValueModeChange' },
  82. { emit: 'buttonsChange' },
  83. { emit: 'calendarOptionsChange' },
  84. { emit: 'cancelButtonTextChange' },
  85. { emit: 'dateOutOfRangeMessageChange' },
  86. { emit: 'dateSerializationFormatChange' },
  87. { emit: 'deferRenderingChange' },
  88. { emit: 'disabledChange' },
  89. { emit: 'disabledDatesChange' },
  90. { emit: 'displayFormatChange' },
  91. { emit: 'dropDownButtonTemplateChange' },
  92. { emit: 'elementAttrChange' },
  93. { emit: 'focusStateEnabledChange' },
  94. { emit: 'heightChange' },
  95. { emit: 'hintChange' },
  96. { emit: 'hoverStateEnabledChange' },
  97. { emit: 'inputAttrChange' },
  98. { emit: 'intervalChange' },
  99. { emit: 'invalidDateMessageChange' },
  100. { emit: 'isValidChange' },
  101. { emit: 'maxChange' },
  102. { emit: 'maxLengthChange' },
  103. { emit: 'maxZoomLevelChange' },
  104. { emit: 'minChange' },
  105. { emit: 'minZoomLevelChange' },
  106. { emit: 'nameChange' },
  107. { emit: 'openedChange' },
  108. { emit: 'openOnFieldClickChange' },
  109. { emit: 'pickerTypeChange' },
  110. { emit: 'placeholderChange' },
  111. { emit: 'readOnlyChange' },
  112. { emit: 'rtlEnabledChange' },
  113. { emit: 'showAnalogClockChange' },
  114. { emit: 'showClearButtonChange' },
  115. { emit: 'showDropDownButtonChange' },
  116. { emit: 'spellcheckChange' },
  117. { emit: 'stylingModeChange' },
  118. { emit: 'tabIndexChange' },
  119. { emit: 'textChange' },
  120. { emit: 'typeChange' },
  121. { emit: 'useMaskBehaviorChange' },
  122. { emit: 'validationErrorChange' },
  123. { emit: 'validationMessageModeChange' },
  124. { emit: 'valueChange' },
  125. { emit: 'valueChangeEventChange' },
  126. { emit: 'visibleChange' },
  127. { emit: 'widthChange' },
  128. { emit: 'onBlur' }
  129. ]);
  130. _this._idh.setHost(_this);
  131. optionHost.setHost(_this);
  132. return _this;
  133. }
  134. Object.defineProperty(DxDateBoxComponent.prototype, "acceptCustomValue", {
  135. get: /**
  136. * Specifies whether or not the widget allows an end-user to enter a custom value.
  137. */
  138. function () {
  139. return this._getOption('acceptCustomValue');
  140. },
  141. set: function (value) {
  142. this._setOption('acceptCustomValue', value);
  143. },
  144. enumerable: true,
  145. configurable: true
  146. });
  147. Object.defineProperty(DxDateBoxComponent.prototype, "accessKey", {
  148. get: /**
  149. * Specifies the shortcut key that sets focus on the widget.
  150. */
  151. function () {
  152. return this._getOption('accessKey');
  153. },
  154. set: function (value) {
  155. this._setOption('accessKey', value);
  156. },
  157. enumerable: true,
  158. configurable: true
  159. });
  160. Object.defineProperty(DxDateBoxComponent.prototype, "activeStateEnabled", {
  161. get: /**
  162. * Specifies whether or not the widget changes its state when interacting with a user.
  163. */
  164. function () {
  165. return this._getOption('activeStateEnabled');
  166. },
  167. set: function (value) {
  168. this._setOption('activeStateEnabled', value);
  169. },
  170. enumerable: true,
  171. configurable: true
  172. });
  173. Object.defineProperty(DxDateBoxComponent.prototype, "adaptivityEnabled", {
  174. get: /**
  175. * Specifies whether or not adaptive widget rendering is enabled on a small screen.
  176. */
  177. function () {
  178. return this._getOption('adaptivityEnabled');
  179. },
  180. set: function (value) {
  181. this._setOption('adaptivityEnabled', value);
  182. },
  183. enumerable: true,
  184. configurable: true
  185. });
  186. Object.defineProperty(DxDateBoxComponent.prototype, "applyButtonText", {
  187. get: /**
  188. * The text displayed on the Apply button.
  189. */
  190. function () {
  191. return this._getOption('applyButtonText');
  192. },
  193. set: function (value) {
  194. this._setOption('applyButtonText', value);
  195. },
  196. enumerable: true,
  197. configurable: true
  198. });
  199. Object.defineProperty(DxDateBoxComponent.prototype, "applyValueMode", {
  200. get: /**
  201. * Specifies the way an end-user applies the selected value.
  202. */
  203. function () {
  204. return this._getOption('applyValueMode');
  205. },
  206. set: function (value) {
  207. this._setOption('applyValueMode', value);
  208. },
  209. enumerable: true,
  210. configurable: true
  211. });
  212. Object.defineProperty(DxDateBoxComponent.prototype, "buttons", {
  213. get: /**
  214. * Allows you to add custom buttons to the input text field.
  215. */
  216. function () {
  217. return this._getOption('buttons');
  218. },
  219. set: function (value) {
  220. this._setOption('buttons', value);
  221. },
  222. enumerable: true,
  223. configurable: true
  224. });
  225. Object.defineProperty(DxDateBoxComponent.prototype, "calendarOptions", {
  226. get: /**
  227. * Configures the calendar's value picker. Applies only if the pickerType is "calendar".
  228. */
  229. function () {
  230. return this._getOption('calendarOptions');
  231. },
  232. set: function (value) {
  233. this._setOption('calendarOptions', value);
  234. },
  235. enumerable: true,
  236. configurable: true
  237. });
  238. Object.defineProperty(DxDateBoxComponent.prototype, "cancelButtonText", {
  239. get: /**
  240. * The text displayed on the Cancel button.
  241. */
  242. function () {
  243. return this._getOption('cancelButtonText');
  244. },
  245. set: function (value) {
  246. this._setOption('cancelButtonText', value);
  247. },
  248. enumerable: true,
  249. configurable: true
  250. });
  251. Object.defineProperty(DxDateBoxComponent.prototype, "dateOutOfRangeMessage", {
  252. get: /**
  253. * Specifies the message displayed if the specified date is later than the max value or earlier than the min value.
  254. */
  255. function () {
  256. return this._getOption('dateOutOfRangeMessage');
  257. },
  258. set: function (value) {
  259. this._setOption('dateOutOfRangeMessage', value);
  260. },
  261. enumerable: true,
  262. configurable: true
  263. });
  264. Object.defineProperty(DxDateBoxComponent.prototype, "dateSerializationFormat", {
  265. get: /**
  266. * Specifies the date-time value serialization format. Use it only if you do not specify the value at design time.
  267. */
  268. function () {
  269. return this._getOption('dateSerializationFormat');
  270. },
  271. set: function (value) {
  272. this._setOption('dateSerializationFormat', value);
  273. },
  274. enumerable: true,
  275. configurable: true
  276. });
  277. Object.defineProperty(DxDateBoxComponent.prototype, "deferRendering", {
  278. get: /**
  279. * Specifies whether to render the drop-down field's content when it is displayed. If false, the content is rendered immediately.
  280. */
  281. function () {
  282. return this._getOption('deferRendering');
  283. },
  284. set: function (value) {
  285. this._setOption('deferRendering', value);
  286. },
  287. enumerable: true,
  288. configurable: true
  289. });
  290. Object.defineProperty(DxDateBoxComponent.prototype, "disabled", {
  291. get: /**
  292. * Specifies whether the widget responds to user interaction.
  293. */
  294. function () {
  295. return this._getOption('disabled');
  296. },
  297. set: function (value) {
  298. this._setOption('disabled', value);
  299. },
  300. enumerable: true,
  301. configurable: true
  302. });
  303. Object.defineProperty(DxDateBoxComponent.prototype, "disabledDates", {
  304. get: /**
  305. * Specifies dates to be disabled. Applies only if pickerType is "calendar".
  306. */
  307. function () {
  308. return this._getOption('disabledDates');
  309. },
  310. set: function (value) {
  311. this._setOption('disabledDates', value);
  312. },
  313. enumerable: true,
  314. configurable: true
  315. });
  316. Object.defineProperty(DxDateBoxComponent.prototype, "displayFormat", {
  317. get: /**
  318. * Specifies the date display format. Ignored if the pickerType option is "native"
  319. */
  320. function () {
  321. return this._getOption('displayFormat');
  322. },
  323. set: function (value) {
  324. this._setOption('displayFormat', value);
  325. },
  326. enumerable: true,
  327. configurable: true
  328. });
  329. Object.defineProperty(DxDateBoxComponent.prototype, "dropDownButtonTemplate", {
  330. get: /**
  331. * Specifies a custom template for the drop-down button.
  332. */
  333. function () {
  334. return this._getOption('dropDownButtonTemplate');
  335. },
  336. set: function (value) {
  337. this._setOption('dropDownButtonTemplate', value);
  338. },
  339. enumerable: true,
  340. configurable: true
  341. });
  342. Object.defineProperty(DxDateBoxComponent.prototype, "elementAttr", {
  343. get: /**
  344. * Specifies the attributes to be attached to the widget's root element.
  345. */
  346. function () {
  347. return this._getOption('elementAttr');
  348. },
  349. set: function (value) {
  350. this._setOption('elementAttr', value);
  351. },
  352. enumerable: true,
  353. configurable: true
  354. });
  355. Object.defineProperty(DxDateBoxComponent.prototype, "focusStateEnabled", {
  356. get: /**
  357. * Specifies whether the widget can be focused using keyboard navigation.
  358. */
  359. function () {
  360. return this._getOption('focusStateEnabled');
  361. },
  362. set: function (value) {
  363. this._setOption('focusStateEnabled', value);
  364. },
  365. enumerable: true,
  366. configurable: true
  367. });
  368. Object.defineProperty(DxDateBoxComponent.prototype, "height", {
  369. get: /**
  370. * Specifies the widget's height.
  371. */
  372. function () {
  373. return this._getOption('height');
  374. },
  375. set: function (value) {
  376. this._setOption('height', value);
  377. },
  378. enumerable: true,
  379. configurable: true
  380. });
  381. Object.defineProperty(DxDateBoxComponent.prototype, "hint", {
  382. get: /**
  383. * Specifies text for a hint that appears when a user pauses on the widget.
  384. */
  385. function () {
  386. return this._getOption('hint');
  387. },
  388. set: function (value) {
  389. this._setOption('hint', value);
  390. },
  391. enumerable: true,
  392. configurable: true
  393. });
  394. Object.defineProperty(DxDateBoxComponent.prototype, "hoverStateEnabled", {
  395. get: /**
  396. * Specifies whether the widget changes its state when a user pauses on it.
  397. */
  398. function () {
  399. return this._getOption('hoverStateEnabled');
  400. },
  401. set: function (value) {
  402. this._setOption('hoverStateEnabled', value);
  403. },
  404. enumerable: true,
  405. configurable: true
  406. });
  407. Object.defineProperty(DxDateBoxComponent.prototype, "inputAttr", {
  408. get: /**
  409. * Specifies the attributes to be passed on to the underlying HTML element.
  410. */
  411. function () {
  412. return this._getOption('inputAttr');
  413. },
  414. set: function (value) {
  415. this._setOption('inputAttr', value);
  416. },
  417. enumerable: true,
  418. configurable: true
  419. });
  420. Object.defineProperty(DxDateBoxComponent.prototype, "interval", {
  421. get: /**
  422. * Specifies the interval between neighboring values in the popup list in minutes.
  423. */
  424. function () {
  425. return this._getOption('interval');
  426. },
  427. set: function (value) {
  428. this._setOption('interval', value);
  429. },
  430. enumerable: true,
  431. configurable: true
  432. });
  433. Object.defineProperty(DxDateBoxComponent.prototype, "invalidDateMessage", {
  434. get: /**
  435. * Specifies the message displayed if the typed value is not a valid date or time.
  436. */
  437. function () {
  438. return this._getOption('invalidDateMessage');
  439. },
  440. set: function (value) {
  441. this._setOption('invalidDateMessage', value);
  442. },
  443. enumerable: true,
  444. configurable: true
  445. });
  446. Object.defineProperty(DxDateBoxComponent.prototype, "isValid", {
  447. get: /**
  448. * Specifies whether the editor's value is valid.
  449. */
  450. function () {
  451. return this._getOption('isValid');
  452. },
  453. set: function (value) {
  454. this._setOption('isValid', value);
  455. },
  456. enumerable: true,
  457. configurable: true
  458. });
  459. Object.defineProperty(DxDateBoxComponent.prototype, "max", {
  460. get: /**
  461. * The last date that can be selected within the widget.
  462. */
  463. function () {
  464. return this._getOption('max');
  465. },
  466. set: function (value) {
  467. this._setOption('max', value);
  468. },
  469. enumerable: true,
  470. configurable: true
  471. });
  472. Object.defineProperty(DxDateBoxComponent.prototype, "maxLength", {
  473. get: /**
  474. * Specifies the maximum number of characters you can enter into the textbox.
  475. */
  476. function () {
  477. return this._getOption('maxLength');
  478. },
  479. set: function (value) {
  480. this._setOption('maxLength', value);
  481. },
  482. enumerable: true,
  483. configurable: true
  484. });
  485. Object.defineProperty(DxDateBoxComponent.prototype, "maxZoomLevel", {
  486. get: /**
  487. * Use the calendarOptions option instead.
  488. */
  489. function () {
  490. return this._getOption('maxZoomLevel');
  491. },
  492. set: function (value) {
  493. this._setOption('maxZoomLevel', value);
  494. },
  495. enumerable: true,
  496. configurable: true
  497. });
  498. Object.defineProperty(DxDateBoxComponent.prototype, "min", {
  499. get: /**
  500. * The minimum date that can be selected within the widget.
  501. */
  502. function () {
  503. return this._getOption('min');
  504. },
  505. set: function (value) {
  506. this._setOption('min', value);
  507. },
  508. enumerable: true,
  509. configurable: true
  510. });
  511. Object.defineProperty(DxDateBoxComponent.prototype, "minZoomLevel", {
  512. get: /**
  513. * Use the calendarOptions option instead.
  514. */
  515. function () {
  516. return this._getOption('minZoomLevel');
  517. },
  518. set: function (value) {
  519. this._setOption('minZoomLevel', value);
  520. },
  521. enumerable: true,
  522. configurable: true
  523. });
  524. Object.defineProperty(DxDateBoxComponent.prototype, "name", {
  525. get: /**
  526. * The value to be assigned to the `name` attribute of the underlying HTML element.
  527. */
  528. function () {
  529. return this._getOption('name');
  530. },
  531. set: function (value) {
  532. this._setOption('name', value);
  533. },
  534. enumerable: true,
  535. configurable: true
  536. });
  537. Object.defineProperty(DxDateBoxComponent.prototype, "opened", {
  538. get: /**
  539. * Specifies whether or not the drop-down editor is displayed.
  540. */
  541. function () {
  542. return this._getOption('opened');
  543. },
  544. set: function (value) {
  545. this._setOption('opened', value);
  546. },
  547. enumerable: true,
  548. configurable: true
  549. });
  550. Object.defineProperty(DxDateBoxComponent.prototype, "openOnFieldClick", {
  551. get: /**
  552. * Specifies whether a user can open the drop-down list by clicking a text field.
  553. */
  554. function () {
  555. return this._getOption('openOnFieldClick');
  556. },
  557. set: function (value) {
  558. this._setOption('openOnFieldClick', value);
  559. },
  560. enumerable: true,
  561. configurable: true
  562. });
  563. Object.defineProperty(DxDateBoxComponent.prototype, "pickerType", {
  564. get: /**
  565. * Specifies the type of the date/time picker.
  566. */
  567. function () {
  568. return this._getOption('pickerType');
  569. },
  570. set: function (value) {
  571. this._setOption('pickerType', value);
  572. },
  573. enumerable: true,
  574. configurable: true
  575. });
  576. Object.defineProperty(DxDateBoxComponent.prototype, "placeholder", {
  577. get: /**
  578. * Specifies a placeholder for the input field.
  579. */
  580. function () {
  581. return this._getOption('placeholder');
  582. },
  583. set: function (value) {
  584. this._setOption('placeholder', value);
  585. },
  586. enumerable: true,
  587. configurable: true
  588. });
  589. Object.defineProperty(DxDateBoxComponent.prototype, "readOnly", {
  590. get: /**
  591. * Specifies whether the editor is read-only.
  592. */
  593. function () {
  594. return this._getOption('readOnly');
  595. },
  596. set: function (value) {
  597. this._setOption('readOnly', value);
  598. },
  599. enumerable: true,
  600. configurable: true
  601. });
  602. Object.defineProperty(DxDateBoxComponent.prototype, "rtlEnabled", {
  603. get: /**
  604. * Switches the widget to a right-to-left representation.
  605. */
  606. function () {
  607. return this._getOption('rtlEnabled');
  608. },
  609. set: function (value) {
  610. this._setOption('rtlEnabled', value);
  611. },
  612. enumerable: true,
  613. configurable: true
  614. });
  615. Object.defineProperty(DxDateBoxComponent.prototype, "showAnalogClock", {
  616. get: /**
  617. * Specifies whether to show the analog clock in the value picker. Applies only if type is "datetime" and pickerType is "calendar".
  618. */
  619. function () {
  620. return this._getOption('showAnalogClock');
  621. },
  622. set: function (value) {
  623. this._setOption('showAnalogClock', value);
  624. },
  625. enumerable: true,
  626. configurable: true
  627. });
  628. Object.defineProperty(DxDateBoxComponent.prototype, "showClearButton", {
  629. get: /**
  630. * Specifies whether to display the Clear button in the widget.
  631. */
  632. function () {
  633. return this._getOption('showClearButton');
  634. },
  635. set: function (value) {
  636. this._setOption('showClearButton', value);
  637. },
  638. enumerable: true,
  639. configurable: true
  640. });
  641. Object.defineProperty(DxDateBoxComponent.prototype, "showDropDownButton", {
  642. get: /**
  643. * Specifies whether the drop-down button is visible.
  644. */
  645. function () {
  646. return this._getOption('showDropDownButton');
  647. },
  648. set: function (value) {
  649. this._setOption('showDropDownButton', value);
  650. },
  651. enumerable: true,
  652. configurable: true
  653. });
  654. Object.defineProperty(DxDateBoxComponent.prototype, "spellcheck", {
  655. get: /**
  656. * Specifies whether or not the widget checks the inner text for spelling mistakes.
  657. */
  658. function () {
  659. return this._getOption('spellcheck');
  660. },
  661. set: function (value) {
  662. this._setOption('spellcheck', value);
  663. },
  664. enumerable: true,
  665. configurable: true
  666. });
  667. Object.defineProperty(DxDateBoxComponent.prototype, "stylingMode", {
  668. get: /**
  669. * Specifies how the widget's text field is styled.
  670. */
  671. function () {
  672. return this._getOption('stylingMode');
  673. },
  674. set: function (value) {
  675. this._setOption('stylingMode', value);
  676. },
  677. enumerable: true,
  678. configurable: true
  679. });
  680. Object.defineProperty(DxDateBoxComponent.prototype, "tabIndex", {
  681. get: /**
  682. * Specifies the number of the element when the Tab key is used for navigating.
  683. */
  684. function () {
  685. return this._getOption('tabIndex');
  686. },
  687. set: function (value) {
  688. this._setOption('tabIndex', value);
  689. },
  690. enumerable: true,
  691. configurable: true
  692. });
  693. Object.defineProperty(DxDateBoxComponent.prototype, "text", {
  694. get: /**
  695. * The read-only option that holds the text displayed by the widget input element.
  696. */
  697. function () {
  698. return this._getOption('text');
  699. },
  700. set: function (value) {
  701. this._setOption('text', value);
  702. },
  703. enumerable: true,
  704. configurable: true
  705. });
  706. Object.defineProperty(DxDateBoxComponent.prototype, "type", {
  707. get: /**
  708. * A format used to display date/time information.
  709. */
  710. function () {
  711. return this._getOption('type');
  712. },
  713. set: function (value) {
  714. this._setOption('type', value);
  715. },
  716. enumerable: true,
  717. configurable: true
  718. });
  719. Object.defineProperty(DxDateBoxComponent.prototype, "useMaskBehavior", {
  720. get: /**
  721. * Specifies whether to control user input using a mask created based on the displayFormat.
  722. */
  723. function () {
  724. return this._getOption('useMaskBehavior');
  725. },
  726. set: function (value) {
  727. this._setOption('useMaskBehavior', value);
  728. },
  729. enumerable: true,
  730. configurable: true
  731. });
  732. Object.defineProperty(DxDateBoxComponent.prototype, "validationError", {
  733. get: /**
  734. * Specifies information on the validation error when using a custom validation engine. Should be changed at runtime along with the isValid option.
  735. */
  736. function () {
  737. return this._getOption('validationError');
  738. },
  739. set: function (value) {
  740. this._setOption('validationError', value);
  741. },
  742. enumerable: true,
  743. configurable: true
  744. });
  745. Object.defineProperty(DxDateBoxComponent.prototype, "validationMessageMode", {
  746. get: /**
  747. * Specifies how the message about the validation rules that are not satisfied by this editor's value is displayed.
  748. */
  749. function () {
  750. return this._getOption('validationMessageMode');
  751. },
  752. set: function (value) {
  753. this._setOption('validationMessageMode', value);
  754. },
  755. enumerable: true,
  756. configurable: true
  757. });
  758. Object.defineProperty(DxDateBoxComponent.prototype, "value", {
  759. get: /**
  760. * An object or a value specifying the date and time currently selected using the date box.
  761. */
  762. function () {
  763. return this._getOption('value');
  764. },
  765. set: function (value) {
  766. this._setOption('value', value);
  767. },
  768. enumerable: true,
  769. configurable: true
  770. });
  771. Object.defineProperty(DxDateBoxComponent.prototype, "valueChangeEvent", {
  772. get: /**
  773. * Specifies the DOM events after which the widget's value should be updated.
  774. */
  775. function () {
  776. return this._getOption('valueChangeEvent');
  777. },
  778. set: function (value) {
  779. this._setOption('valueChangeEvent', value);
  780. },
  781. enumerable: true,
  782. configurable: true
  783. });
  784. Object.defineProperty(DxDateBoxComponent.prototype, "visible", {
  785. get: /**
  786. * Specifies whether the widget is visible.
  787. */
  788. function () {
  789. return this._getOption('visible');
  790. },
  791. set: function (value) {
  792. this._setOption('visible', value);
  793. },
  794. enumerable: true,
  795. configurable: true
  796. });
  797. Object.defineProperty(DxDateBoxComponent.prototype, "width", {
  798. get: /**
  799. * Specifies the widget's width.
  800. */
  801. function () {
  802. return this._getOption('width');
  803. },
  804. set: function (value) {
  805. this._setOption('width', value);
  806. },
  807. enumerable: true,
  808. configurable: true
  809. });
  810. DxDateBoxComponent.prototype.change = function (_) { };
  811. Object.defineProperty(DxDateBoxComponent.prototype, "buttonsChildren", {
  812. get: function () {
  813. return this._getOption('buttons');
  814. },
  815. set: function (value) {
  816. this.setChildren('buttons', value);
  817. },
  818. enumerable: true,
  819. configurable: true
  820. });
  821. DxDateBoxComponent.prototype._createInstance = function (element, options) {
  822. return new date_box_1.default(element, options);
  823. };
  824. DxDateBoxComponent.prototype.writeValue = function (value) {
  825. this.eventHelper.lockedValueChangeEvent = true;
  826. this.value = value;
  827. this.eventHelper.lockedValueChangeEvent = false;
  828. };
  829. DxDateBoxComponent.prototype.setDisabledState = function (isDisabled) {
  830. this.disabled = isDisabled;
  831. };
  832. DxDateBoxComponent.prototype.registerOnChange = function (fn) { this.change = fn; };
  833. DxDateBoxComponent.prototype.registerOnTouched = function (fn) { this.touched = fn; };
  834. DxDateBoxComponent.prototype._createWidget = function (element) {
  835. var _this = this;
  836. _super.prototype._createWidget.call(this, element);
  837. this.instance.on('focusOut', function (e) {
  838. _this.eventHelper.fireNgEvent('onBlur', [e]);
  839. });
  840. };
  841. DxDateBoxComponent.prototype.ngOnDestroy = function () {
  842. this._destroyWidget();
  843. };
  844. DxDateBoxComponent.prototype.ngOnChanges = function (changes) {
  845. _super.prototype.ngOnChanges.call(this, changes);
  846. this.setupChanges('buttons', changes);
  847. this.setupChanges('disabledDates', changes);
  848. };
  849. DxDateBoxComponent.prototype.setupChanges = function (prop, changes) {
  850. if (!(prop in this._optionsToUpdate)) {
  851. this._idh.setup(prop, changes);
  852. }
  853. };
  854. DxDateBoxComponent.prototype.ngDoCheck = function () {
  855. this._idh.doCheck('buttons');
  856. this._idh.doCheck('disabledDates');
  857. this._watcherHelper.checkWatchers();
  858. _super.prototype.ngDoCheck.call(this);
  859. _super.prototype.clearChangedOptions.call(this);
  860. };
  861. DxDateBoxComponent.prototype._setOption = function (name, value) {
  862. var isSetup = this._idh.setupSingle(name, value);
  863. var isChanged = this._idh.getChanges(name, value) !== null;
  864. if (isSetup || isChanged) {
  865. _super.prototype._setOption.call(this, name, value);
  866. }
  867. };
  868. DxDateBoxComponent.decorators = [
  869. { type: core_1.Component, args: [{
  870. selector: 'dx-date-box',
  871. template: '',
  872. providers: [
  873. template_host_1.DxTemplateHost,
  874. watcher_helper_1.WatcherHelper,
  875. CUSTOM_VALUE_ACCESSOR_PROVIDER,
  876. nested_option_1.NestedOptionHost,
  877. iterable_differ_helper_1.IterableDifferHelper
  878. ]
  879. },] },
  880. ];
  881. /** @nocollapse */
  882. DxDateBoxComponent.ctorParameters = function () { return [
  883. { type: core_1.ElementRef, },
  884. { type: core_1.NgZone, },
  885. { type: template_host_1.DxTemplateHost, },
  886. { type: watcher_helper_1.WatcherHelper, },
  887. { type: iterable_differ_helper_1.IterableDifferHelper, },
  888. { type: nested_option_1.NestedOptionHost, },
  889. { type: platform_browser_2.TransferState, },
  890. { type: undefined, decorators: [{ type: core_1.Inject, args: [core_1.PLATFORM_ID,] },] },
  891. ]; };
  892. DxDateBoxComponent.propDecorators = {
  893. "acceptCustomValue": [{ type: core_1.Input },],
  894. "accessKey": [{ type: core_1.Input },],
  895. "activeStateEnabled": [{ type: core_1.Input },],
  896. "adaptivityEnabled": [{ type: core_1.Input },],
  897. "applyButtonText": [{ type: core_1.Input },],
  898. "applyValueMode": [{ type: core_1.Input },],
  899. "buttons": [{ type: core_1.Input },],
  900. "calendarOptions": [{ type: core_1.Input },],
  901. "cancelButtonText": [{ type: core_1.Input },],
  902. "dateOutOfRangeMessage": [{ type: core_1.Input },],
  903. "dateSerializationFormat": [{ type: core_1.Input },],
  904. "deferRendering": [{ type: core_1.Input },],
  905. "disabled": [{ type: core_1.Input },],
  906. "disabledDates": [{ type: core_1.Input },],
  907. "displayFormat": [{ type: core_1.Input },],
  908. "dropDownButtonTemplate": [{ type: core_1.Input },],
  909. "elementAttr": [{ type: core_1.Input },],
  910. "focusStateEnabled": [{ type: core_1.Input },],
  911. "height": [{ type: core_1.Input },],
  912. "hint": [{ type: core_1.Input },],
  913. "hoverStateEnabled": [{ type: core_1.Input },],
  914. "inputAttr": [{ type: core_1.Input },],
  915. "interval": [{ type: core_1.Input },],
  916. "invalidDateMessage": [{ type: core_1.Input },],
  917. "isValid": [{ type: core_1.Input },],
  918. "max": [{ type: core_1.Input },],
  919. "maxLength": [{ type: core_1.Input },],
  920. "maxZoomLevel": [{ type: core_1.Input },],
  921. "min": [{ type: core_1.Input },],
  922. "minZoomLevel": [{ type: core_1.Input },],
  923. "name": [{ type: core_1.Input },],
  924. "opened": [{ type: core_1.Input },],
  925. "openOnFieldClick": [{ type: core_1.Input },],
  926. "pickerType": [{ type: core_1.Input },],
  927. "placeholder": [{ type: core_1.Input },],
  928. "readOnly": [{ type: core_1.Input },],
  929. "rtlEnabled": [{ type: core_1.Input },],
  930. "showAnalogClock": [{ type: core_1.Input },],
  931. "showClearButton": [{ type: core_1.Input },],
  932. "showDropDownButton": [{ type: core_1.Input },],
  933. "spellcheck": [{ type: core_1.Input },],
  934. "stylingMode": [{ type: core_1.Input },],
  935. "tabIndex": [{ type: core_1.Input },],
  936. "text": [{ type: core_1.Input },],
  937. "type": [{ type: core_1.Input },],
  938. "useMaskBehavior": [{ type: core_1.Input },],
  939. "validationError": [{ type: core_1.Input },],
  940. "validationMessageMode": [{ type: core_1.Input },],
  941. "value": [{ type: core_1.Input },],
  942. "valueChangeEvent": [{ type: core_1.Input },],
  943. "visible": [{ type: core_1.Input },],
  944. "width": [{ type: core_1.Input },],
  945. "onChange": [{ type: core_1.Output },],
  946. "onClosed": [{ type: core_1.Output },],
  947. "onContentReady": [{ type: core_1.Output },],
  948. "onCopy": [{ type: core_1.Output },],
  949. "onCut": [{ type: core_1.Output },],
  950. "onDisposing": [{ type: core_1.Output },],
  951. "onEnterKey": [{ type: core_1.Output },],
  952. "onFocusIn": [{ type: core_1.Output },],
  953. "onFocusOut": [{ type: core_1.Output },],
  954. "onInitialized": [{ type: core_1.Output },],
  955. "onInput": [{ type: core_1.Output },],
  956. "onKeyDown": [{ type: core_1.Output },],
  957. "onKeyPress": [{ type: core_1.Output },],
  958. "onKeyUp": [{ type: core_1.Output },],
  959. "onOpened": [{ type: core_1.Output },],
  960. "onOptionChanged": [{ type: core_1.Output },],
  961. "onPaste": [{ type: core_1.Output },],
  962. "onValueChanged": [{ type: core_1.Output },],
  963. "acceptCustomValueChange": [{ type: core_1.Output },],
  964. "accessKeyChange": [{ type: core_1.Output },],
  965. "activeStateEnabledChange": [{ type: core_1.Output },],
  966. "adaptivityEnabledChange": [{ type: core_1.Output },],
  967. "applyButtonTextChange": [{ type: core_1.Output },],
  968. "applyValueModeChange": [{ type: core_1.Output },],
  969. "buttonsChange": [{ type: core_1.Output },],
  970. "calendarOptionsChange": [{ type: core_1.Output },],
  971. "cancelButtonTextChange": [{ type: core_1.Output },],
  972. "dateOutOfRangeMessageChange": [{ type: core_1.Output },],
  973. "dateSerializationFormatChange": [{ type: core_1.Output },],
  974. "deferRenderingChange": [{ type: core_1.Output },],
  975. "disabledChange": [{ type: core_1.Output },],
  976. "disabledDatesChange": [{ type: core_1.Output },],
  977. "displayFormatChange": [{ type: core_1.Output },],
  978. "dropDownButtonTemplateChange": [{ type: core_1.Output },],
  979. "elementAttrChange": [{ type: core_1.Output },],
  980. "focusStateEnabledChange": [{ type: core_1.Output },],
  981. "heightChange": [{ type: core_1.Output },],
  982. "hintChange": [{ type: core_1.Output },],
  983. "hoverStateEnabledChange": [{ type: core_1.Output },],
  984. "inputAttrChange": [{ type: core_1.Output },],
  985. "intervalChange": [{ type: core_1.Output },],
  986. "invalidDateMessageChange": [{ type: core_1.Output },],
  987. "isValidChange": [{ type: core_1.Output },],
  988. "maxChange": [{ type: core_1.Output },],
  989. "maxLengthChange": [{ type: core_1.Output },],
  990. "maxZoomLevelChange": [{ type: core_1.Output },],
  991. "minChange": [{ type: core_1.Output },],
  992. "minZoomLevelChange": [{ type: core_1.Output },],
  993. "nameChange": [{ type: core_1.Output },],
  994. "openedChange": [{ type: core_1.Output },],
  995. "openOnFieldClickChange": [{ type: core_1.Output },],
  996. "pickerTypeChange": [{ type: core_1.Output },],
  997. "placeholderChange": [{ type: core_1.Output },],
  998. "readOnlyChange": [{ type: core_1.Output },],
  999. "rtlEnabledChange": [{ type: core_1.Output },],
  1000. "showAnalogClockChange": [{ type: core_1.Output },],
  1001. "showClearButtonChange": [{ type: core_1.Output },],
  1002. "showDropDownButtonChange": [{ type: core_1.Output },],
  1003. "spellcheckChange": [{ type: core_1.Output },],
  1004. "stylingModeChange": [{ type: core_1.Output },],
  1005. "tabIndexChange": [{ type: core_1.Output },],
  1006. "textChange": [{ type: core_1.Output },],
  1007. "typeChange": [{ type: core_1.Output },],
  1008. "useMaskBehaviorChange": [{ type: core_1.Output },],
  1009. "validationErrorChange": [{ type: core_1.Output },],
  1010. "validationMessageModeChange": [{ type: core_1.Output },],
  1011. "valueChange": [{ type: core_1.Output },],
  1012. "valueChangeEventChange": [{ type: core_1.Output },],
  1013. "visibleChange": [{ type: core_1.Output },],
  1014. "widthChange": [{ type: core_1.Output },],
  1015. "onBlur": [{ type: core_1.Output },],
  1016. "change": [{ type: core_1.HostListener, args: ['valueChange', ['$event'],] },],
  1017. "touched": [{ type: core_1.HostListener, args: ['onBlur', ['$event'],] },],
  1018. "buttonsChildren": [{ type: core_1.ContentChildren, args: [button_dxi_2.DxiButtonComponent,] },],
  1019. };
  1020. return DxDateBoxComponent;
  1021. }(component_1.DxComponent));
  1022. exports.DxDateBoxComponent = DxDateBoxComponent;
  1023. var DxDateBoxModule = (function () {
  1024. function DxDateBoxModule() {
  1025. }
  1026. DxDateBoxModule.decorators = [
  1027. { type: core_1.NgModule, args: [{
  1028. imports: [
  1029. button_dxi_1.DxiButtonModule,
  1030. options_1.DxoOptionsModule,
  1031. calendar_options_1.DxoCalendarOptionsModule,
  1032. display_format_1.DxoDisplayFormatModule,
  1033. integration_1.DxIntegrationModule,
  1034. template_1.DxTemplateModule,
  1035. platform_browser_1.BrowserTransferStateModule
  1036. ],
  1037. declarations: [
  1038. DxDateBoxComponent
  1039. ],
  1040. exports: [
  1041. DxDateBoxComponent,
  1042. button_dxi_1.DxiButtonModule,
  1043. options_1.DxoOptionsModule,
  1044. calendar_options_1.DxoCalendarOptionsModule,
  1045. display_format_1.DxoDisplayFormatModule,
  1046. template_1.DxTemplateModule
  1047. ]
  1048. },] },
  1049. ];
  1050. return DxDateBoxModule;
  1051. }());
  1052. exports.DxDateBoxModule = DxDateBoxModule;
  1053. //# sourceMappingURL=date-box.js.map