action-sheet.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452
  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 action_sheet_1 = require("devextreme/ui/action_sheet");
  29. var component_1 = require("../core/component");
  30. var template_host_1 = require("../core/template-host");
  31. var integration_1 = require("../core/integration");
  32. var template_1 = require("../core/template");
  33. var nested_option_1 = require("../core/nested-option");
  34. var watcher_helper_1 = require("../core/watcher-helper");
  35. var iterable_differ_helper_1 = require("../core/iterable-differ-helper");
  36. var item_dxi_1 = require("./nested/item-dxi");
  37. var item_dxi_2 = require("./nested/item-dxi");
  38. /**
  39. * The ActionSheet widget is a sheet containing a set of buttons located one under the other. These buttons usually represent several choices relating to a single task.
  40. */
  41. var DxActionSheetComponent = (function (_super) {
  42. __extends(DxActionSheetComponent, _super);
  43. function DxActionSheetComponent(elementRef, ngZone, templateHost, _watcherHelper, _idh, optionHost, transferState, platformId) {
  44. var _this = _super.call(this, elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId) || this;
  45. _this._watcherHelper = _watcherHelper;
  46. _this._idh = _idh;
  47. _this._createEventEmitters([
  48. { subscribe: 'cancelClick', emit: 'onCancelClick' },
  49. { subscribe: 'contentReady', emit: 'onContentReady' },
  50. { subscribe: 'disposing', emit: 'onDisposing' },
  51. { subscribe: 'initialized', emit: 'onInitialized' },
  52. { subscribe: 'itemClick', emit: 'onItemClick' },
  53. { subscribe: 'itemContextMenu', emit: 'onItemContextMenu' },
  54. { subscribe: 'itemHold', emit: 'onItemHold' },
  55. { subscribe: 'itemRendered', emit: 'onItemRendered' },
  56. { subscribe: 'optionChanged', emit: 'onOptionChanged' },
  57. { emit: 'cancelTextChange' },
  58. { emit: 'dataSourceChange' },
  59. { emit: 'disabledChange' },
  60. { emit: 'elementAttrChange' },
  61. { emit: 'heightChange' },
  62. { emit: 'hintChange' },
  63. { emit: 'hoverStateEnabledChange' },
  64. { emit: 'itemHoldTimeoutChange' },
  65. { emit: 'itemsChange' },
  66. { emit: 'itemTemplateChange' },
  67. { emit: 'rtlEnabledChange' },
  68. { emit: 'showCancelButtonChange' },
  69. { emit: 'showTitleChange' },
  70. { emit: 'targetChange' },
  71. { emit: 'titleChange' },
  72. { emit: 'usePopoverChange' },
  73. { emit: 'visibleChange' },
  74. { emit: 'widthChange' }
  75. ]);
  76. _this._idh.setHost(_this);
  77. optionHost.setHost(_this);
  78. return _this;
  79. }
  80. Object.defineProperty(DxActionSheetComponent.prototype, "cancelText", {
  81. get: /**
  82. * The text displayed in the button that closes the action sheet.
  83. */
  84. function () {
  85. return this._getOption('cancelText');
  86. },
  87. set: function (value) {
  88. this._setOption('cancelText', value);
  89. },
  90. enumerable: true,
  91. configurable: true
  92. });
  93. Object.defineProperty(DxActionSheetComponent.prototype, "dataSource", {
  94. get: /**
  95. * Binds the widget to data.
  96. */
  97. function () {
  98. return this._getOption('dataSource');
  99. },
  100. set: function (value) {
  101. this._setOption('dataSource', value);
  102. },
  103. enumerable: true,
  104. configurable: true
  105. });
  106. Object.defineProperty(DxActionSheetComponent.prototype, "disabled", {
  107. get: /**
  108. * Specifies whether the widget responds to user interaction.
  109. */
  110. function () {
  111. return this._getOption('disabled');
  112. },
  113. set: function (value) {
  114. this._setOption('disabled', value);
  115. },
  116. enumerable: true,
  117. configurable: true
  118. });
  119. Object.defineProperty(DxActionSheetComponent.prototype, "elementAttr", {
  120. get: /**
  121. * Specifies the attributes to be attached to the widget's root element.
  122. */
  123. function () {
  124. return this._getOption('elementAttr');
  125. },
  126. set: function (value) {
  127. this._setOption('elementAttr', value);
  128. },
  129. enumerable: true,
  130. configurable: true
  131. });
  132. Object.defineProperty(DxActionSheetComponent.prototype, "height", {
  133. get: /**
  134. * Specifies the widget's height.
  135. */
  136. function () {
  137. return this._getOption('height');
  138. },
  139. set: function (value) {
  140. this._setOption('height', value);
  141. },
  142. enumerable: true,
  143. configurable: true
  144. });
  145. Object.defineProperty(DxActionSheetComponent.prototype, "hint", {
  146. get: /**
  147. * Specifies text for a hint that appears when a user pauses on the widget.
  148. */
  149. function () {
  150. return this._getOption('hint');
  151. },
  152. set: function (value) {
  153. this._setOption('hint', value);
  154. },
  155. enumerable: true,
  156. configurable: true
  157. });
  158. Object.defineProperty(DxActionSheetComponent.prototype, "hoverStateEnabled", {
  159. get: /**
  160. * Specifies whether the widget changes its state when a user pauses on it.
  161. */
  162. function () {
  163. return this._getOption('hoverStateEnabled');
  164. },
  165. set: function (value) {
  166. this._setOption('hoverStateEnabled', value);
  167. },
  168. enumerable: true,
  169. configurable: true
  170. });
  171. Object.defineProperty(DxActionSheetComponent.prototype, "itemHoldTimeout", {
  172. get: /**
  173. * The time period in milliseconds before the onItemHold event is raised.
  174. */
  175. function () {
  176. return this._getOption('itemHoldTimeout');
  177. },
  178. set: function (value) {
  179. this._setOption('itemHoldTimeout', value);
  180. },
  181. enumerable: true,
  182. configurable: true
  183. });
  184. Object.defineProperty(DxActionSheetComponent.prototype, "items", {
  185. get: /**
  186. * An array of items displayed by the widget.
  187. */
  188. function () {
  189. return this._getOption('items');
  190. },
  191. set: function (value) {
  192. this._setOption('items', value);
  193. },
  194. enumerable: true,
  195. configurable: true
  196. });
  197. Object.defineProperty(DxActionSheetComponent.prototype, "itemTemplate", {
  198. get: /**
  199. * Specifies a custom template for items.
  200. */
  201. function () {
  202. return this._getOption('itemTemplate');
  203. },
  204. set: function (value) {
  205. this._setOption('itemTemplate', value);
  206. },
  207. enumerable: true,
  208. configurable: true
  209. });
  210. Object.defineProperty(DxActionSheetComponent.prototype, "rtlEnabled", {
  211. get: /**
  212. * Switches the widget to a right-to-left representation.
  213. */
  214. function () {
  215. return this._getOption('rtlEnabled');
  216. },
  217. set: function (value) {
  218. this._setOption('rtlEnabled', value);
  219. },
  220. enumerable: true,
  221. configurable: true
  222. });
  223. Object.defineProperty(DxActionSheetComponent.prototype, "showCancelButton", {
  224. get: /**
  225. * Specifies whether or not to display the Cancel button in action sheet.
  226. */
  227. function () {
  228. return this._getOption('showCancelButton');
  229. },
  230. set: function (value) {
  231. this._setOption('showCancelButton', value);
  232. },
  233. enumerable: true,
  234. configurable: true
  235. });
  236. Object.defineProperty(DxActionSheetComponent.prototype, "showTitle", {
  237. get: /**
  238. * A Boolean value specifying whether or not the title of the action sheet is visible.
  239. */
  240. function () {
  241. return this._getOption('showTitle');
  242. },
  243. set: function (value) {
  244. this._setOption('showTitle', value);
  245. },
  246. enumerable: true,
  247. configurable: true
  248. });
  249. Object.defineProperty(DxActionSheetComponent.prototype, "target", {
  250. get: /**
  251. * Specifies the element the action sheet popover points at. Applies only if usePopover is true.
  252. */
  253. function () {
  254. return this._getOption('target');
  255. },
  256. set: function (value) {
  257. this._setOption('target', value);
  258. },
  259. enumerable: true,
  260. configurable: true
  261. });
  262. Object.defineProperty(DxActionSheetComponent.prototype, "title", {
  263. get: /**
  264. * The title of the action sheet.
  265. */
  266. function () {
  267. return this._getOption('title');
  268. },
  269. set: function (value) {
  270. this._setOption('title', value);
  271. },
  272. enumerable: true,
  273. configurable: true
  274. });
  275. Object.defineProperty(DxActionSheetComponent.prototype, "usePopover", {
  276. get: /**
  277. * Specifies whether or not to show the action sheet within a Popover widget.
  278. */
  279. function () {
  280. return this._getOption('usePopover');
  281. },
  282. set: function (value) {
  283. this._setOption('usePopover', value);
  284. },
  285. enumerable: true,
  286. configurable: true
  287. });
  288. Object.defineProperty(DxActionSheetComponent.prototype, "visible", {
  289. get: /**
  290. * A Boolean value specifying whether or not the ActionSheet widget is visible.
  291. */
  292. function () {
  293. return this._getOption('visible');
  294. },
  295. set: function (value) {
  296. this._setOption('visible', value);
  297. },
  298. enumerable: true,
  299. configurable: true
  300. });
  301. Object.defineProperty(DxActionSheetComponent.prototype, "width", {
  302. get: /**
  303. * Specifies the widget's width.
  304. */
  305. function () {
  306. return this._getOption('width');
  307. },
  308. set: function (value) {
  309. this._setOption('width', value);
  310. },
  311. enumerable: true,
  312. configurable: true
  313. });
  314. Object.defineProperty(DxActionSheetComponent.prototype, "itemsChildren", {
  315. get: function () {
  316. return this._getOption('items');
  317. },
  318. set: function (value) {
  319. this.setChildren('items', value);
  320. },
  321. enumerable: true,
  322. configurable: true
  323. });
  324. DxActionSheetComponent.prototype._createInstance = function (element, options) {
  325. return new action_sheet_1.default(element, options);
  326. };
  327. DxActionSheetComponent.prototype.ngOnDestroy = function () {
  328. this._destroyWidget();
  329. };
  330. DxActionSheetComponent.prototype.ngOnChanges = function (changes) {
  331. _super.prototype.ngOnChanges.call(this, changes);
  332. this.setupChanges('dataSource', changes);
  333. this.setupChanges('items', changes);
  334. };
  335. DxActionSheetComponent.prototype.setupChanges = function (prop, changes) {
  336. if (!(prop in this._optionsToUpdate)) {
  337. this._idh.setup(prop, changes);
  338. }
  339. };
  340. DxActionSheetComponent.prototype.ngDoCheck = function () {
  341. this._idh.doCheck('dataSource');
  342. this._idh.doCheck('items');
  343. this._watcherHelper.checkWatchers();
  344. _super.prototype.ngDoCheck.call(this);
  345. _super.prototype.clearChangedOptions.call(this);
  346. };
  347. DxActionSheetComponent.prototype._setOption = function (name, value) {
  348. var isSetup = this._idh.setupSingle(name, value);
  349. var isChanged = this._idh.getChanges(name, value) !== null;
  350. if (isSetup || isChanged) {
  351. _super.prototype._setOption.call(this, name, value);
  352. }
  353. };
  354. DxActionSheetComponent.decorators = [
  355. { type: core_1.Component, args: [{
  356. selector: 'dx-action-sheet',
  357. template: '',
  358. providers: [
  359. template_host_1.DxTemplateHost,
  360. watcher_helper_1.WatcherHelper,
  361. nested_option_1.NestedOptionHost,
  362. iterable_differ_helper_1.IterableDifferHelper
  363. ]
  364. },] },
  365. ];
  366. /** @nocollapse */
  367. DxActionSheetComponent.ctorParameters = function () { return [
  368. { type: core_1.ElementRef, },
  369. { type: core_1.NgZone, },
  370. { type: template_host_1.DxTemplateHost, },
  371. { type: watcher_helper_1.WatcherHelper, },
  372. { type: iterable_differ_helper_1.IterableDifferHelper, },
  373. { type: nested_option_1.NestedOptionHost, },
  374. { type: platform_browser_2.TransferState, },
  375. { type: undefined, decorators: [{ type: core_1.Inject, args: [core_1.PLATFORM_ID,] },] },
  376. ]; };
  377. DxActionSheetComponent.propDecorators = {
  378. "cancelText": [{ type: core_1.Input },],
  379. "dataSource": [{ type: core_1.Input },],
  380. "disabled": [{ type: core_1.Input },],
  381. "elementAttr": [{ type: core_1.Input },],
  382. "height": [{ type: core_1.Input },],
  383. "hint": [{ type: core_1.Input },],
  384. "hoverStateEnabled": [{ type: core_1.Input },],
  385. "itemHoldTimeout": [{ type: core_1.Input },],
  386. "items": [{ type: core_1.Input },],
  387. "itemTemplate": [{ type: core_1.Input },],
  388. "rtlEnabled": [{ type: core_1.Input },],
  389. "showCancelButton": [{ type: core_1.Input },],
  390. "showTitle": [{ type: core_1.Input },],
  391. "target": [{ type: core_1.Input },],
  392. "title": [{ type: core_1.Input },],
  393. "usePopover": [{ type: core_1.Input },],
  394. "visible": [{ type: core_1.Input },],
  395. "width": [{ type: core_1.Input },],
  396. "onCancelClick": [{ type: core_1.Output },],
  397. "onContentReady": [{ type: core_1.Output },],
  398. "onDisposing": [{ type: core_1.Output },],
  399. "onInitialized": [{ type: core_1.Output },],
  400. "onItemClick": [{ type: core_1.Output },],
  401. "onItemContextMenu": [{ type: core_1.Output },],
  402. "onItemHold": [{ type: core_1.Output },],
  403. "onItemRendered": [{ type: core_1.Output },],
  404. "onOptionChanged": [{ type: core_1.Output },],
  405. "cancelTextChange": [{ type: core_1.Output },],
  406. "dataSourceChange": [{ type: core_1.Output },],
  407. "disabledChange": [{ type: core_1.Output },],
  408. "elementAttrChange": [{ type: core_1.Output },],
  409. "heightChange": [{ type: core_1.Output },],
  410. "hintChange": [{ type: core_1.Output },],
  411. "hoverStateEnabledChange": [{ type: core_1.Output },],
  412. "itemHoldTimeoutChange": [{ type: core_1.Output },],
  413. "itemsChange": [{ type: core_1.Output },],
  414. "itemTemplateChange": [{ type: core_1.Output },],
  415. "rtlEnabledChange": [{ type: core_1.Output },],
  416. "showCancelButtonChange": [{ type: core_1.Output },],
  417. "showTitleChange": [{ type: core_1.Output },],
  418. "targetChange": [{ type: core_1.Output },],
  419. "titleChange": [{ type: core_1.Output },],
  420. "usePopoverChange": [{ type: core_1.Output },],
  421. "visibleChange": [{ type: core_1.Output },],
  422. "widthChange": [{ type: core_1.Output },],
  423. "itemsChildren": [{ type: core_1.ContentChildren, args: [item_dxi_2.DxiItemComponent,] },],
  424. };
  425. return DxActionSheetComponent;
  426. }(component_1.DxComponent));
  427. exports.DxActionSheetComponent = DxActionSheetComponent;
  428. var DxActionSheetModule = (function () {
  429. function DxActionSheetModule() {
  430. }
  431. DxActionSheetModule.decorators = [
  432. { type: core_1.NgModule, args: [{
  433. imports: [
  434. item_dxi_1.DxiItemModule,
  435. integration_1.DxIntegrationModule,
  436. template_1.DxTemplateModule,
  437. platform_browser_1.BrowserTransferStateModule
  438. ],
  439. declarations: [
  440. DxActionSheetComponent
  441. ],
  442. exports: [
  443. DxActionSheetComponent,
  444. item_dxi_1.DxiItemModule,
  445. template_1.DxTemplateModule
  446. ]
  447. },] },
  448. ];
  449. return DxActionSheetModule;
  450. }());
  451. exports.DxActionSheetModule = DxActionSheetModule;
  452. //# sourceMappingURL=action-sheet.js.map