calendar.js 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615
  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 calendar_1 = require("devextreme/ui/calendar");
  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 CUSTOM_VALUE_ACCESSOR_PROVIDER = {
  38. provide: forms_1.NG_VALUE_ACCESSOR,
  39. useExisting: core_1.forwardRef(function () { return DxCalendarComponent; }),
  40. multi: true
  41. };
  42. /**
  43. * The Calendar is a widget that displays a calendar and allows an end user to select the required date within a specified date range.
  44. */
  45. var DxCalendarComponent = (function (_super) {
  46. __extends(DxCalendarComponent, _super);
  47. function DxCalendarComponent(elementRef, ngZone, templateHost, _watcherHelper, _idh, optionHost, transferState, platformId) {
  48. var _this = _super.call(this, elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId) || this;
  49. _this._watcherHelper = _watcherHelper;
  50. _this._idh = _idh;
  51. _this.touched = function (_) { };
  52. _this._createEventEmitters([
  53. { subscribe: 'disposing', emit: 'onDisposing' },
  54. { subscribe: 'initialized', emit: 'onInitialized' },
  55. { subscribe: 'optionChanged', emit: 'onOptionChanged' },
  56. { subscribe: 'valueChanged', emit: 'onValueChanged' },
  57. { emit: 'accessKeyChange' },
  58. { emit: 'activeStateEnabledChange' },
  59. { emit: 'cellTemplateChange' },
  60. { emit: 'dateSerializationFormatChange' },
  61. { emit: 'disabledChange' },
  62. { emit: 'disabledDatesChange' },
  63. { emit: 'elementAttrChange' },
  64. { emit: 'firstDayOfWeekChange' },
  65. { emit: 'focusStateEnabledChange' },
  66. { emit: 'heightChange' },
  67. { emit: 'hintChange' },
  68. { emit: 'hoverStateEnabledChange' },
  69. { emit: 'isValidChange' },
  70. { emit: 'maxChange' },
  71. { emit: 'maxZoomLevelChange' },
  72. { emit: 'minChange' },
  73. { emit: 'minZoomLevelChange' },
  74. { emit: 'nameChange' },
  75. { emit: 'readOnlyChange' },
  76. { emit: 'rtlEnabledChange' },
  77. { emit: 'showTodayButtonChange' },
  78. { emit: 'tabIndexChange' },
  79. { emit: 'validationErrorChange' },
  80. { emit: 'validationMessageModeChange' },
  81. { emit: 'valueChange' },
  82. { emit: 'visibleChange' },
  83. { emit: 'widthChange' },
  84. { emit: 'zoomLevelChange' },
  85. { emit: 'onBlur' }
  86. ]);
  87. _this._idh.setHost(_this);
  88. optionHost.setHost(_this);
  89. return _this;
  90. }
  91. Object.defineProperty(DxCalendarComponent.prototype, "accessKey", {
  92. get: /**
  93. * Specifies the shortcut key that sets focus on the widget.
  94. */
  95. function () {
  96. return this._getOption('accessKey');
  97. },
  98. set: function (value) {
  99. this._setOption('accessKey', value);
  100. },
  101. enumerable: true,
  102. configurable: true
  103. });
  104. Object.defineProperty(DxCalendarComponent.prototype, "activeStateEnabled", {
  105. get: /**
  106. * Specifies whether or not the widget changes its state when interacting with a user.
  107. */
  108. function () {
  109. return this._getOption('activeStateEnabled');
  110. },
  111. set: function (value) {
  112. this._setOption('activeStateEnabled', value);
  113. },
  114. enumerable: true,
  115. configurable: true
  116. });
  117. Object.defineProperty(DxCalendarComponent.prototype, "cellTemplate", {
  118. get: /**
  119. * Specifies a custom template for calendar cells.
  120. */
  121. function () {
  122. return this._getOption('cellTemplate');
  123. },
  124. set: function (value) {
  125. this._setOption('cellTemplate', value);
  126. },
  127. enumerable: true,
  128. configurable: true
  129. });
  130. Object.defineProperty(DxCalendarComponent.prototype, "dateSerializationFormat", {
  131. get: /**
  132. * Specifies the date-time value serialization format. Use it only if you do not specify the value at design time.
  133. */
  134. function () {
  135. return this._getOption('dateSerializationFormat');
  136. },
  137. set: function (value) {
  138. this._setOption('dateSerializationFormat', value);
  139. },
  140. enumerable: true,
  141. configurable: true
  142. });
  143. Object.defineProperty(DxCalendarComponent.prototype, "disabled", {
  144. get: /**
  145. * Specifies whether the widget responds to user interaction.
  146. */
  147. function () {
  148. return this._getOption('disabled');
  149. },
  150. set: function (value) {
  151. this._setOption('disabled', value);
  152. },
  153. enumerable: true,
  154. configurable: true
  155. });
  156. Object.defineProperty(DxCalendarComponent.prototype, "disabledDates", {
  157. get: /**
  158. * Specifies dates to be disabled.
  159. */
  160. function () {
  161. return this._getOption('disabledDates');
  162. },
  163. set: function (value) {
  164. this._setOption('disabledDates', value);
  165. },
  166. enumerable: true,
  167. configurable: true
  168. });
  169. Object.defineProperty(DxCalendarComponent.prototype, "elementAttr", {
  170. get: /**
  171. * Specifies the attributes to be attached to the widget's root element.
  172. */
  173. function () {
  174. return this._getOption('elementAttr');
  175. },
  176. set: function (value) {
  177. this._setOption('elementAttr', value);
  178. },
  179. enumerable: true,
  180. configurable: true
  181. });
  182. Object.defineProperty(DxCalendarComponent.prototype, "firstDayOfWeek", {
  183. get: /**
  184. * Specifies the first day of a week.
  185. */
  186. function () {
  187. return this._getOption('firstDayOfWeek');
  188. },
  189. set: function (value) {
  190. this._setOption('firstDayOfWeek', value);
  191. },
  192. enumerable: true,
  193. configurable: true
  194. });
  195. Object.defineProperty(DxCalendarComponent.prototype, "focusStateEnabled", {
  196. get: /**
  197. * Specifies whether the widget can be focused using keyboard navigation.
  198. */
  199. function () {
  200. return this._getOption('focusStateEnabled');
  201. },
  202. set: function (value) {
  203. this._setOption('focusStateEnabled', value);
  204. },
  205. enumerable: true,
  206. configurable: true
  207. });
  208. Object.defineProperty(DxCalendarComponent.prototype, "height", {
  209. get: /**
  210. * Specifies the widget's height.
  211. */
  212. function () {
  213. return this._getOption('height');
  214. },
  215. set: function (value) {
  216. this._setOption('height', value);
  217. },
  218. enumerable: true,
  219. configurable: true
  220. });
  221. Object.defineProperty(DxCalendarComponent.prototype, "hint", {
  222. get: /**
  223. * Specifies text for a hint that appears when a user pauses on the widget.
  224. */
  225. function () {
  226. return this._getOption('hint');
  227. },
  228. set: function (value) {
  229. this._setOption('hint', value);
  230. },
  231. enumerable: true,
  232. configurable: true
  233. });
  234. Object.defineProperty(DxCalendarComponent.prototype, "hoverStateEnabled", {
  235. get: /**
  236. * Specifies whether the widget changes its state when a user pauses on it.
  237. */
  238. function () {
  239. return this._getOption('hoverStateEnabled');
  240. },
  241. set: function (value) {
  242. this._setOption('hoverStateEnabled', value);
  243. },
  244. enumerable: true,
  245. configurable: true
  246. });
  247. Object.defineProperty(DxCalendarComponent.prototype, "isValid", {
  248. get: /**
  249. * Specifies whether the editor's value is valid.
  250. */
  251. function () {
  252. return this._getOption('isValid');
  253. },
  254. set: function (value) {
  255. this._setOption('isValid', value);
  256. },
  257. enumerable: true,
  258. configurable: true
  259. });
  260. Object.defineProperty(DxCalendarComponent.prototype, "max", {
  261. get: /**
  262. * The latest date the widget allows to select.
  263. */
  264. function () {
  265. return this._getOption('max');
  266. },
  267. set: function (value) {
  268. this._setOption('max', value);
  269. },
  270. enumerable: true,
  271. configurable: true
  272. });
  273. Object.defineProperty(DxCalendarComponent.prototype, "maxZoomLevel", {
  274. get: /**
  275. * Specifies the maximum zoom level of the calendar.
  276. */
  277. function () {
  278. return this._getOption('maxZoomLevel');
  279. },
  280. set: function (value) {
  281. this._setOption('maxZoomLevel', value);
  282. },
  283. enumerable: true,
  284. configurable: true
  285. });
  286. Object.defineProperty(DxCalendarComponent.prototype, "min", {
  287. get: /**
  288. * The earliest date the widget allows to select.
  289. */
  290. function () {
  291. return this._getOption('min');
  292. },
  293. set: function (value) {
  294. this._setOption('min', value);
  295. },
  296. enumerable: true,
  297. configurable: true
  298. });
  299. Object.defineProperty(DxCalendarComponent.prototype, "minZoomLevel", {
  300. get: /**
  301. * Specifies the minimum zoom level of the calendar.
  302. */
  303. function () {
  304. return this._getOption('minZoomLevel');
  305. },
  306. set: function (value) {
  307. this._setOption('minZoomLevel', value);
  308. },
  309. enumerable: true,
  310. configurable: true
  311. });
  312. Object.defineProperty(DxCalendarComponent.prototype, "name", {
  313. get: /**
  314. * The value to be assigned to the `name` attribute of the underlying HTML element.
  315. */
  316. function () {
  317. return this._getOption('name');
  318. },
  319. set: function (value) {
  320. this._setOption('name', value);
  321. },
  322. enumerable: true,
  323. configurable: true
  324. });
  325. Object.defineProperty(DxCalendarComponent.prototype, "readOnly", {
  326. get: /**
  327. * Specifies whether the editor is read-only.
  328. */
  329. function () {
  330. return this._getOption('readOnly');
  331. },
  332. set: function (value) {
  333. this._setOption('readOnly', value);
  334. },
  335. enumerable: true,
  336. configurable: true
  337. });
  338. Object.defineProperty(DxCalendarComponent.prototype, "rtlEnabled", {
  339. get: /**
  340. * Switches the widget to a right-to-left representation.
  341. */
  342. function () {
  343. return this._getOption('rtlEnabled');
  344. },
  345. set: function (value) {
  346. this._setOption('rtlEnabled', value);
  347. },
  348. enumerable: true,
  349. configurable: true
  350. });
  351. Object.defineProperty(DxCalendarComponent.prototype, "showTodayButton", {
  352. get: /**
  353. * Specifies whether or not the widget displays a button that selects the current date.
  354. */
  355. function () {
  356. return this._getOption('showTodayButton');
  357. },
  358. set: function (value) {
  359. this._setOption('showTodayButton', value);
  360. },
  361. enumerable: true,
  362. configurable: true
  363. });
  364. Object.defineProperty(DxCalendarComponent.prototype, "tabIndex", {
  365. get: /**
  366. * Specifies the number of the element when the Tab key is used for navigating.
  367. */
  368. function () {
  369. return this._getOption('tabIndex');
  370. },
  371. set: function (value) {
  372. this._setOption('tabIndex', value);
  373. },
  374. enumerable: true,
  375. configurable: true
  376. });
  377. Object.defineProperty(DxCalendarComponent.prototype, "validationError", {
  378. get: /**
  379. * Specifies information on the validation error when using a custom validation engine. Should be changed at runtime along with the isValid option.
  380. */
  381. function () {
  382. return this._getOption('validationError');
  383. },
  384. set: function (value) {
  385. this._setOption('validationError', value);
  386. },
  387. enumerable: true,
  388. configurable: true
  389. });
  390. Object.defineProperty(DxCalendarComponent.prototype, "validationMessageMode", {
  391. get: /**
  392. * Specifies how the message about the validation rules that are not satisfied by this editor's value is displayed.
  393. */
  394. function () {
  395. return this._getOption('validationMessageMode');
  396. },
  397. set: function (value) {
  398. this._setOption('validationMessageMode', value);
  399. },
  400. enumerable: true,
  401. configurable: true
  402. });
  403. Object.defineProperty(DxCalendarComponent.prototype, "value", {
  404. get: /**
  405. * An object or a value specifying the date and time currently selected in the calendar.
  406. */
  407. function () {
  408. return this._getOption('value');
  409. },
  410. set: function (value) {
  411. this._setOption('value', value);
  412. },
  413. enumerable: true,
  414. configurable: true
  415. });
  416. Object.defineProperty(DxCalendarComponent.prototype, "visible", {
  417. get: /**
  418. * Specifies whether the widget is visible.
  419. */
  420. function () {
  421. return this._getOption('visible');
  422. },
  423. set: function (value) {
  424. this._setOption('visible', value);
  425. },
  426. enumerable: true,
  427. configurable: true
  428. });
  429. Object.defineProperty(DxCalendarComponent.prototype, "width", {
  430. get: /**
  431. * Specifies the widget's width.
  432. */
  433. function () {
  434. return this._getOption('width');
  435. },
  436. set: function (value) {
  437. this._setOption('width', value);
  438. },
  439. enumerable: true,
  440. configurable: true
  441. });
  442. Object.defineProperty(DxCalendarComponent.prototype, "zoomLevel", {
  443. get: /**
  444. * Specifies the current calendar zoom level.
  445. */
  446. function () {
  447. return this._getOption('zoomLevel');
  448. },
  449. set: function (value) {
  450. this._setOption('zoomLevel', value);
  451. },
  452. enumerable: true,
  453. configurable: true
  454. });
  455. DxCalendarComponent.prototype.change = function (_) { };
  456. DxCalendarComponent.prototype._createInstance = function (element, options) {
  457. return new calendar_1.default(element, options);
  458. };
  459. DxCalendarComponent.prototype.writeValue = function (value) {
  460. this.eventHelper.lockedValueChangeEvent = true;
  461. this.value = value;
  462. this.eventHelper.lockedValueChangeEvent = false;
  463. };
  464. DxCalendarComponent.prototype.setDisabledState = function (isDisabled) {
  465. this.disabled = isDisabled;
  466. };
  467. DxCalendarComponent.prototype.registerOnChange = function (fn) { this.change = fn; };
  468. DxCalendarComponent.prototype.registerOnTouched = function (fn) { this.touched = fn; };
  469. DxCalendarComponent.prototype._createWidget = function (element) {
  470. var _this = this;
  471. _super.prototype._createWidget.call(this, element);
  472. this.instance.on('focusOut', function (e) {
  473. _this.eventHelper.fireNgEvent('onBlur', [e]);
  474. });
  475. };
  476. DxCalendarComponent.prototype.ngOnDestroy = function () {
  477. this._destroyWidget();
  478. };
  479. DxCalendarComponent.prototype.ngOnChanges = function (changes) {
  480. _super.prototype.ngOnChanges.call(this, changes);
  481. this.setupChanges('disabledDates', changes);
  482. };
  483. DxCalendarComponent.prototype.setupChanges = function (prop, changes) {
  484. if (!(prop in this._optionsToUpdate)) {
  485. this._idh.setup(prop, changes);
  486. }
  487. };
  488. DxCalendarComponent.prototype.ngDoCheck = function () {
  489. this._idh.doCheck('disabledDates');
  490. this._watcherHelper.checkWatchers();
  491. _super.prototype.ngDoCheck.call(this);
  492. _super.prototype.clearChangedOptions.call(this);
  493. };
  494. DxCalendarComponent.prototype._setOption = function (name, value) {
  495. var isSetup = this._idh.setupSingle(name, value);
  496. var isChanged = this._idh.getChanges(name, value) !== null;
  497. if (isSetup || isChanged) {
  498. _super.prototype._setOption.call(this, name, value);
  499. }
  500. };
  501. DxCalendarComponent.decorators = [
  502. { type: core_1.Component, args: [{
  503. selector: 'dx-calendar',
  504. template: '',
  505. providers: [
  506. template_host_1.DxTemplateHost,
  507. watcher_helper_1.WatcherHelper,
  508. CUSTOM_VALUE_ACCESSOR_PROVIDER,
  509. nested_option_1.NestedOptionHost,
  510. iterable_differ_helper_1.IterableDifferHelper
  511. ]
  512. },] },
  513. ];
  514. /** @nocollapse */
  515. DxCalendarComponent.ctorParameters = function () { return [
  516. { type: core_1.ElementRef, },
  517. { type: core_1.NgZone, },
  518. { type: template_host_1.DxTemplateHost, },
  519. { type: watcher_helper_1.WatcherHelper, },
  520. { type: iterable_differ_helper_1.IterableDifferHelper, },
  521. { type: nested_option_1.NestedOptionHost, },
  522. { type: platform_browser_2.TransferState, },
  523. { type: undefined, decorators: [{ type: core_1.Inject, args: [core_1.PLATFORM_ID,] },] },
  524. ]; };
  525. DxCalendarComponent.propDecorators = {
  526. "accessKey": [{ type: core_1.Input },],
  527. "activeStateEnabled": [{ type: core_1.Input },],
  528. "cellTemplate": [{ type: core_1.Input },],
  529. "dateSerializationFormat": [{ type: core_1.Input },],
  530. "disabled": [{ type: core_1.Input },],
  531. "disabledDates": [{ type: core_1.Input },],
  532. "elementAttr": [{ type: core_1.Input },],
  533. "firstDayOfWeek": [{ type: core_1.Input },],
  534. "focusStateEnabled": [{ type: core_1.Input },],
  535. "height": [{ type: core_1.Input },],
  536. "hint": [{ type: core_1.Input },],
  537. "hoverStateEnabled": [{ type: core_1.Input },],
  538. "isValid": [{ type: core_1.Input },],
  539. "max": [{ type: core_1.Input },],
  540. "maxZoomLevel": [{ type: core_1.Input },],
  541. "min": [{ type: core_1.Input },],
  542. "minZoomLevel": [{ type: core_1.Input },],
  543. "name": [{ type: core_1.Input },],
  544. "readOnly": [{ type: core_1.Input },],
  545. "rtlEnabled": [{ type: core_1.Input },],
  546. "showTodayButton": [{ type: core_1.Input },],
  547. "tabIndex": [{ type: core_1.Input },],
  548. "validationError": [{ type: core_1.Input },],
  549. "validationMessageMode": [{ type: core_1.Input },],
  550. "value": [{ type: core_1.Input },],
  551. "visible": [{ type: core_1.Input },],
  552. "width": [{ type: core_1.Input },],
  553. "zoomLevel": [{ type: core_1.Input },],
  554. "onDisposing": [{ type: core_1.Output },],
  555. "onInitialized": [{ type: core_1.Output },],
  556. "onOptionChanged": [{ type: core_1.Output },],
  557. "onValueChanged": [{ type: core_1.Output },],
  558. "accessKeyChange": [{ type: core_1.Output },],
  559. "activeStateEnabledChange": [{ type: core_1.Output },],
  560. "cellTemplateChange": [{ type: core_1.Output },],
  561. "dateSerializationFormatChange": [{ type: core_1.Output },],
  562. "disabledChange": [{ type: core_1.Output },],
  563. "disabledDatesChange": [{ type: core_1.Output },],
  564. "elementAttrChange": [{ type: core_1.Output },],
  565. "firstDayOfWeekChange": [{ type: core_1.Output },],
  566. "focusStateEnabledChange": [{ type: core_1.Output },],
  567. "heightChange": [{ type: core_1.Output },],
  568. "hintChange": [{ type: core_1.Output },],
  569. "hoverStateEnabledChange": [{ type: core_1.Output },],
  570. "isValidChange": [{ type: core_1.Output },],
  571. "maxChange": [{ type: core_1.Output },],
  572. "maxZoomLevelChange": [{ type: core_1.Output },],
  573. "minChange": [{ type: core_1.Output },],
  574. "minZoomLevelChange": [{ type: core_1.Output },],
  575. "nameChange": [{ type: core_1.Output },],
  576. "readOnlyChange": [{ type: core_1.Output },],
  577. "rtlEnabledChange": [{ type: core_1.Output },],
  578. "showTodayButtonChange": [{ type: core_1.Output },],
  579. "tabIndexChange": [{ type: core_1.Output },],
  580. "validationErrorChange": [{ type: core_1.Output },],
  581. "validationMessageModeChange": [{ type: core_1.Output },],
  582. "valueChange": [{ type: core_1.Output },],
  583. "visibleChange": [{ type: core_1.Output },],
  584. "widthChange": [{ type: core_1.Output },],
  585. "zoomLevelChange": [{ type: core_1.Output },],
  586. "onBlur": [{ type: core_1.Output },],
  587. "change": [{ type: core_1.HostListener, args: ['valueChange', ['$event'],] },],
  588. "touched": [{ type: core_1.HostListener, args: ['onBlur', ['$event'],] },],
  589. };
  590. return DxCalendarComponent;
  591. }(component_1.DxComponent));
  592. exports.DxCalendarComponent = DxCalendarComponent;
  593. var DxCalendarModule = (function () {
  594. function DxCalendarModule() {
  595. }
  596. DxCalendarModule.decorators = [
  597. { type: core_1.NgModule, args: [{
  598. imports: [
  599. integration_1.DxIntegrationModule,
  600. template_1.DxTemplateModule,
  601. platform_browser_1.BrowserTransferStateModule
  602. ],
  603. declarations: [
  604. DxCalendarComponent
  605. ],
  606. exports: [
  607. DxCalendarComponent,
  608. template_1.DxTemplateModule
  609. ]
  610. },] },
  611. ];
  612. return DxCalendarModule;
  613. }());
  614. exports.DxCalendarModule = DxCalendarModule;
  615. //# sourceMappingURL=calendar.js.map