load-panel.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528
  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 load_panel_1 = require("devextreme/ui/load_panel");
  29. var component_1 = require("../core/component");
  30. var template_host_1 = require("../core/template-host");
  31. var integration_1 = require("../core/integration");
  32. var template_1 = require("../core/template");
  33. var nested_option_1 = require("../core/nested-option");
  34. var watcher_helper_1 = require("../core/watcher-helper");
  35. var animation_1 = require("./nested/animation");
  36. var hide_1 = require("./nested/hide");
  37. var show_1 = require("./nested/show");
  38. var position_1 = require("./nested/position");
  39. var at_1 = require("./nested/at");
  40. var boundary_offset_1 = require("./nested/boundary-offset");
  41. var collision_1 = require("./nested/collision");
  42. var my_1 = require("./nested/my");
  43. var offset_1 = require("./nested/offset");
  44. /**
  45. * The LoadPanel is an overlay widget notifying the viewer that loading is in progress.
  46. */
  47. var DxLoadPanelComponent = (function (_super) {
  48. __extends(DxLoadPanelComponent, _super);
  49. function DxLoadPanelComponent(elementRef, ngZone, templateHost, _watcherHelper, optionHost, transferState, platformId) {
  50. var _this = _super.call(this, elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId) || this;
  51. _this._createEventEmitters([
  52. { subscribe: 'contentReady', emit: 'onContentReady' },
  53. { subscribe: 'disposing', emit: 'onDisposing' },
  54. { subscribe: 'hidden', emit: 'onHidden' },
  55. { subscribe: 'hiding', emit: 'onHiding' },
  56. { subscribe: 'initialized', emit: 'onInitialized' },
  57. { subscribe: 'optionChanged', emit: 'onOptionChanged' },
  58. { subscribe: 'showing', emit: 'onShowing' },
  59. { subscribe: 'shown', emit: 'onShown' },
  60. { emit: 'animationChange' },
  61. { emit: 'closeOnOutsideClickChange' },
  62. { emit: 'containerChange' },
  63. { emit: 'deferRenderingChange' },
  64. { emit: 'delayChange' },
  65. { emit: 'elementAttrChange' },
  66. { emit: 'focusStateEnabledChange' },
  67. { emit: 'heightChange' },
  68. { emit: 'hintChange' },
  69. { emit: 'hoverStateEnabledChange' },
  70. { emit: 'indicatorSrcChange' },
  71. { emit: 'maxHeightChange' },
  72. { emit: 'maxWidthChange' },
  73. { emit: 'messageChange' },
  74. { emit: 'minHeightChange' },
  75. { emit: 'minWidthChange' },
  76. { emit: 'positionChange' },
  77. { emit: 'rtlEnabledChange' },
  78. { emit: 'shadingChange' },
  79. { emit: 'shadingColorChange' },
  80. { emit: 'showIndicatorChange' },
  81. { emit: 'showPaneChange' },
  82. { emit: 'visibleChange' },
  83. { emit: 'widthChange' }
  84. ]);
  85. optionHost.setHost(_this);
  86. return _this;
  87. }
  88. Object.defineProperty(DxLoadPanelComponent.prototype, "animation", {
  89. get: /**
  90. * Configures widget visibility animations. This object contains two fields: show and hide.
  91. */
  92. function () {
  93. return this._getOption('animation');
  94. },
  95. set: function (value) {
  96. this._setOption('animation', value);
  97. },
  98. enumerable: true,
  99. configurable: true
  100. });
  101. Object.defineProperty(DxLoadPanelComponent.prototype, "closeOnOutsideClick", {
  102. get: /**
  103. * Specifies whether to close the widget if a user clicks outside it.
  104. */
  105. function () {
  106. return this._getOption('closeOnOutsideClick');
  107. },
  108. set: function (value) {
  109. this._setOption('closeOnOutsideClick', value);
  110. },
  111. enumerable: true,
  112. configurable: true
  113. });
  114. Object.defineProperty(DxLoadPanelComponent.prototype, "container", {
  115. get: /**
  116. * Specifies the widget's container.
  117. */
  118. function () {
  119. return this._getOption('container');
  120. },
  121. set: function (value) {
  122. this._setOption('container', value);
  123. },
  124. enumerable: true,
  125. configurable: true
  126. });
  127. Object.defineProperty(DxLoadPanelComponent.prototype, "deferRendering", {
  128. get: /**
  129. * Specifies whether to render the widget's content when it is displayed. If false, the content is rendered immediately.
  130. */
  131. function () {
  132. return this._getOption('deferRendering');
  133. },
  134. set: function (value) {
  135. this._setOption('deferRendering', value);
  136. },
  137. enumerable: true,
  138. configurable: true
  139. });
  140. Object.defineProperty(DxLoadPanelComponent.prototype, "delay", {
  141. get: /**
  142. * The delay in milliseconds after which the load panel is displayed.
  143. */
  144. function () {
  145. return this._getOption('delay');
  146. },
  147. set: function (value) {
  148. this._setOption('delay', value);
  149. },
  150. enumerable: true,
  151. configurable: true
  152. });
  153. Object.defineProperty(DxLoadPanelComponent.prototype, "elementAttr", {
  154. get: /**
  155. * Specifies the attributes to be attached to the widget's root element.
  156. */
  157. function () {
  158. return this._getOption('elementAttr');
  159. },
  160. set: function (value) {
  161. this._setOption('elementAttr', value);
  162. },
  163. enumerable: true,
  164. configurable: true
  165. });
  166. Object.defineProperty(DxLoadPanelComponent.prototype, "focusStateEnabled", {
  167. get: /**
  168. * Specifies whether or not the widget can be focused.
  169. */
  170. function () {
  171. return this._getOption('focusStateEnabled');
  172. },
  173. set: function (value) {
  174. this._setOption('focusStateEnabled', value);
  175. },
  176. enumerable: true,
  177. configurable: true
  178. });
  179. Object.defineProperty(DxLoadPanelComponent.prototype, "height", {
  180. get: /**
  181. * Specifies the widget's height in pixels.
  182. */
  183. function () {
  184. return this._getOption('height');
  185. },
  186. set: function (value) {
  187. this._setOption('height', value);
  188. },
  189. enumerable: true,
  190. configurable: true
  191. });
  192. Object.defineProperty(DxLoadPanelComponent.prototype, "hint", {
  193. get: /**
  194. * Specifies text for a hint that appears when a user pauses on the widget.
  195. */
  196. function () {
  197. return this._getOption('hint');
  198. },
  199. set: function (value) {
  200. this._setOption('hint', value);
  201. },
  202. enumerable: true,
  203. configurable: true
  204. });
  205. Object.defineProperty(DxLoadPanelComponent.prototype, "hoverStateEnabled", {
  206. get: /**
  207. * Specifies whether the widget changes its state when a user pauses on it.
  208. */
  209. function () {
  210. return this._getOption('hoverStateEnabled');
  211. },
  212. set: function (value) {
  213. this._setOption('hoverStateEnabled', value);
  214. },
  215. enumerable: true,
  216. configurable: true
  217. });
  218. Object.defineProperty(DxLoadPanelComponent.prototype, "indicatorSrc", {
  219. get: /**
  220. * A URL pointing to an image to be used as a load indicator.
  221. */
  222. function () {
  223. return this._getOption('indicatorSrc');
  224. },
  225. set: function (value) {
  226. this._setOption('indicatorSrc', value);
  227. },
  228. enumerable: true,
  229. configurable: true
  230. });
  231. Object.defineProperty(DxLoadPanelComponent.prototype, "maxHeight", {
  232. get: /**
  233. * Specifies the maximum height the widget can reach while resizing.
  234. */
  235. function () {
  236. return this._getOption('maxHeight');
  237. },
  238. set: function (value) {
  239. this._setOption('maxHeight', value);
  240. },
  241. enumerable: true,
  242. configurable: true
  243. });
  244. Object.defineProperty(DxLoadPanelComponent.prototype, "maxWidth", {
  245. get: /**
  246. * Specifies the maximum width the widget can reach while resizing.
  247. */
  248. function () {
  249. return this._getOption('maxWidth');
  250. },
  251. set: function (value) {
  252. this._setOption('maxWidth', value);
  253. },
  254. enumerable: true,
  255. configurable: true
  256. });
  257. Object.defineProperty(DxLoadPanelComponent.prototype, "message", {
  258. get: /**
  259. * Specifies the text displayed in the load panel. Ignored in the Material Design theme.
  260. */
  261. function () {
  262. return this._getOption('message');
  263. },
  264. set: function (value) {
  265. this._setOption('message', value);
  266. },
  267. enumerable: true,
  268. configurable: true
  269. });
  270. Object.defineProperty(DxLoadPanelComponent.prototype, "minHeight", {
  271. get: /**
  272. * Specifies the minimum height the widget can reach while resizing.
  273. */
  274. function () {
  275. return this._getOption('minHeight');
  276. },
  277. set: function (value) {
  278. this._setOption('minHeight', value);
  279. },
  280. enumerable: true,
  281. configurable: true
  282. });
  283. Object.defineProperty(DxLoadPanelComponent.prototype, "minWidth", {
  284. get: /**
  285. * Specifies the minimum width the widget can reach while resizing.
  286. */
  287. function () {
  288. return this._getOption('minWidth');
  289. },
  290. set: function (value) {
  291. this._setOption('minWidth', value);
  292. },
  293. enumerable: true,
  294. configurable: true
  295. });
  296. Object.defineProperty(DxLoadPanelComponent.prototype, "position", {
  297. get: /**
  298. * Positions the widget.
  299. */
  300. function () {
  301. return this._getOption('position');
  302. },
  303. set: function (value) {
  304. this._setOption('position', value);
  305. },
  306. enumerable: true,
  307. configurable: true
  308. });
  309. Object.defineProperty(DxLoadPanelComponent.prototype, "rtlEnabled", {
  310. get: /**
  311. * Switches the widget to a right-to-left representation.
  312. */
  313. function () {
  314. return this._getOption('rtlEnabled');
  315. },
  316. set: function (value) {
  317. this._setOption('rtlEnabled', value);
  318. },
  319. enumerable: true,
  320. configurable: true
  321. });
  322. Object.defineProperty(DxLoadPanelComponent.prototype, "shading", {
  323. get: /**
  324. * Specifies whether to shade the background when the widget is active.
  325. */
  326. function () {
  327. return this._getOption('shading');
  328. },
  329. set: function (value) {
  330. this._setOption('shading', value);
  331. },
  332. enumerable: true,
  333. configurable: true
  334. });
  335. Object.defineProperty(DxLoadPanelComponent.prototype, "shadingColor", {
  336. get: /**
  337. * Specifies the shading color.
  338. */
  339. function () {
  340. return this._getOption('shadingColor');
  341. },
  342. set: function (value) {
  343. this._setOption('shadingColor', value);
  344. },
  345. enumerable: true,
  346. configurable: true
  347. });
  348. Object.defineProperty(DxLoadPanelComponent.prototype, "showIndicator", {
  349. get: /**
  350. * A Boolean value specifying whether or not to show a load indicator.
  351. */
  352. function () {
  353. return this._getOption('showIndicator');
  354. },
  355. set: function (value) {
  356. this._setOption('showIndicator', value);
  357. },
  358. enumerable: true,
  359. configurable: true
  360. });
  361. Object.defineProperty(DxLoadPanelComponent.prototype, "showPane", {
  362. get: /**
  363. * A Boolean value specifying whether or not to show the pane behind the load indicator.
  364. */
  365. function () {
  366. return this._getOption('showPane');
  367. },
  368. set: function (value) {
  369. this._setOption('showPane', value);
  370. },
  371. enumerable: true,
  372. configurable: true
  373. });
  374. Object.defineProperty(DxLoadPanelComponent.prototype, "visible", {
  375. get: /**
  376. * A Boolean value specifying whether or not the widget is visible.
  377. */
  378. function () {
  379. return this._getOption('visible');
  380. },
  381. set: function (value) {
  382. this._setOption('visible', value);
  383. },
  384. enumerable: true,
  385. configurable: true
  386. });
  387. Object.defineProperty(DxLoadPanelComponent.prototype, "width", {
  388. get: /**
  389. * Specifies the widget's width in pixels.
  390. */
  391. function () {
  392. return this._getOption('width');
  393. },
  394. set: function (value) {
  395. this._setOption('width', value);
  396. },
  397. enumerable: true,
  398. configurable: true
  399. });
  400. DxLoadPanelComponent.prototype._createInstance = function (element, options) {
  401. return new load_panel_1.default(element, options);
  402. };
  403. DxLoadPanelComponent.prototype.ngOnDestroy = function () {
  404. this._destroyWidget();
  405. };
  406. DxLoadPanelComponent.decorators = [
  407. { type: core_1.Component, args: [{
  408. selector: 'dx-load-panel',
  409. template: '',
  410. providers: [
  411. template_host_1.DxTemplateHost,
  412. watcher_helper_1.WatcherHelper,
  413. nested_option_1.NestedOptionHost
  414. ]
  415. },] },
  416. ];
  417. /** @nocollapse */
  418. DxLoadPanelComponent.ctorParameters = function () { return [
  419. { type: core_1.ElementRef, },
  420. { type: core_1.NgZone, },
  421. { type: template_host_1.DxTemplateHost, },
  422. { type: watcher_helper_1.WatcherHelper, },
  423. { type: nested_option_1.NestedOptionHost, },
  424. { type: platform_browser_2.TransferState, },
  425. { type: undefined, decorators: [{ type: core_1.Inject, args: [core_1.PLATFORM_ID,] },] },
  426. ]; };
  427. DxLoadPanelComponent.propDecorators = {
  428. "animation": [{ type: core_1.Input },],
  429. "closeOnOutsideClick": [{ type: core_1.Input },],
  430. "container": [{ type: core_1.Input },],
  431. "deferRendering": [{ type: core_1.Input },],
  432. "delay": [{ type: core_1.Input },],
  433. "elementAttr": [{ type: core_1.Input },],
  434. "focusStateEnabled": [{ type: core_1.Input },],
  435. "height": [{ type: core_1.Input },],
  436. "hint": [{ type: core_1.Input },],
  437. "hoverStateEnabled": [{ type: core_1.Input },],
  438. "indicatorSrc": [{ type: core_1.Input },],
  439. "maxHeight": [{ type: core_1.Input },],
  440. "maxWidth": [{ type: core_1.Input },],
  441. "message": [{ type: core_1.Input },],
  442. "minHeight": [{ type: core_1.Input },],
  443. "minWidth": [{ type: core_1.Input },],
  444. "position": [{ type: core_1.Input },],
  445. "rtlEnabled": [{ type: core_1.Input },],
  446. "shading": [{ type: core_1.Input },],
  447. "shadingColor": [{ type: core_1.Input },],
  448. "showIndicator": [{ type: core_1.Input },],
  449. "showPane": [{ type: core_1.Input },],
  450. "visible": [{ type: core_1.Input },],
  451. "width": [{ type: core_1.Input },],
  452. "onContentReady": [{ type: core_1.Output },],
  453. "onDisposing": [{ type: core_1.Output },],
  454. "onHidden": [{ type: core_1.Output },],
  455. "onHiding": [{ type: core_1.Output },],
  456. "onInitialized": [{ type: core_1.Output },],
  457. "onOptionChanged": [{ type: core_1.Output },],
  458. "onShowing": [{ type: core_1.Output },],
  459. "onShown": [{ type: core_1.Output },],
  460. "animationChange": [{ type: core_1.Output },],
  461. "closeOnOutsideClickChange": [{ type: core_1.Output },],
  462. "containerChange": [{ type: core_1.Output },],
  463. "deferRenderingChange": [{ type: core_1.Output },],
  464. "delayChange": [{ type: core_1.Output },],
  465. "elementAttrChange": [{ type: core_1.Output },],
  466. "focusStateEnabledChange": [{ type: core_1.Output },],
  467. "heightChange": [{ type: core_1.Output },],
  468. "hintChange": [{ type: core_1.Output },],
  469. "hoverStateEnabledChange": [{ type: core_1.Output },],
  470. "indicatorSrcChange": [{ type: core_1.Output },],
  471. "maxHeightChange": [{ type: core_1.Output },],
  472. "maxWidthChange": [{ type: core_1.Output },],
  473. "messageChange": [{ type: core_1.Output },],
  474. "minHeightChange": [{ type: core_1.Output },],
  475. "minWidthChange": [{ type: core_1.Output },],
  476. "positionChange": [{ type: core_1.Output },],
  477. "rtlEnabledChange": [{ type: core_1.Output },],
  478. "shadingChange": [{ type: core_1.Output },],
  479. "shadingColorChange": [{ type: core_1.Output },],
  480. "showIndicatorChange": [{ type: core_1.Output },],
  481. "showPaneChange": [{ type: core_1.Output },],
  482. "visibleChange": [{ type: core_1.Output },],
  483. "widthChange": [{ type: core_1.Output },],
  484. };
  485. return DxLoadPanelComponent;
  486. }(component_1.DxComponent));
  487. exports.DxLoadPanelComponent = DxLoadPanelComponent;
  488. var DxLoadPanelModule = (function () {
  489. function DxLoadPanelModule() {
  490. }
  491. DxLoadPanelModule.decorators = [
  492. { type: core_1.NgModule, args: [{
  493. imports: [
  494. animation_1.DxoAnimationModule,
  495. hide_1.DxoHideModule,
  496. show_1.DxoShowModule,
  497. position_1.DxoPositionModule,
  498. at_1.DxoAtModule,
  499. boundary_offset_1.DxoBoundaryOffsetModule,
  500. collision_1.DxoCollisionModule,
  501. my_1.DxoMyModule,
  502. offset_1.DxoOffsetModule,
  503. integration_1.DxIntegrationModule,
  504. template_1.DxTemplateModule,
  505. platform_browser_1.BrowserTransferStateModule
  506. ],
  507. declarations: [
  508. DxLoadPanelComponent
  509. ],
  510. exports: [
  511. DxLoadPanelComponent,
  512. animation_1.DxoAnimationModule,
  513. hide_1.DxoHideModule,
  514. show_1.DxoShowModule,
  515. position_1.DxoPositionModule,
  516. at_1.DxoAtModule,
  517. boundary_offset_1.DxoBoundaryOffsetModule,
  518. collision_1.DxoCollisionModule,
  519. my_1.DxoMyModule,
  520. offset_1.DxoOffsetModule,
  521. template_1.DxTemplateModule
  522. ]
  523. },] },
  524. ];
  525. return DxLoadPanelModule;
  526. }());
  527. exports.DxLoadPanelModule = DxLoadPanelModule;
  528. //# sourceMappingURL=load-panel.js.map