drawer.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443
  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 drawer_1 = require("devextreme/ui/drawer");
  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. /**
  36. * The Drawer is a dismissible or permanently visible panel used for navigation in responsive web application layouts.
  37. */
  38. var DxDrawerComponent = (function (_super) {
  39. __extends(DxDrawerComponent, _super);
  40. function DxDrawerComponent(elementRef, ngZone, templateHost, _watcherHelper, optionHost, transferState, platformId) {
  41. var _this = _super.call(this, elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId) || this;
  42. _this._createEventEmitters([
  43. { subscribe: 'disposing', emit: 'onDisposing' },
  44. { subscribe: 'initialized', emit: 'onInitialized' },
  45. { subscribe: 'optionChanged', emit: 'onOptionChanged' },
  46. { emit: 'activeStateEnabledChange' },
  47. { emit: 'animationDurationChange' },
  48. { emit: 'animationEnabledChange' },
  49. { emit: 'closeOnOutsideClickChange' },
  50. { emit: 'disabledChange' },
  51. { emit: 'elementAttrChange' },
  52. { emit: 'heightChange' },
  53. { emit: 'hintChange' },
  54. { emit: 'hoverStateEnabledChange' },
  55. { emit: 'maxSizeChange' },
  56. { emit: 'minSizeChange' },
  57. { emit: 'openedChange' },
  58. { emit: 'openedStateModeChange' },
  59. { emit: 'positionChange' },
  60. { emit: 'revealModeChange' },
  61. { emit: 'rtlEnabledChange' },
  62. { emit: 'shadingChange' },
  63. { emit: 'targetChange' },
  64. { emit: 'templateChange' },
  65. { emit: 'visibleChange' },
  66. { emit: 'widthChange' }
  67. ]);
  68. optionHost.setHost(_this);
  69. return _this;
  70. }
  71. Object.defineProperty(DxDrawerComponent.prototype, "activeStateEnabled", {
  72. get: /**
  73. * Specifies whether or not the widget changes its state when interacting with a user.
  74. */
  75. function () {
  76. return this._getOption('activeStateEnabled');
  77. },
  78. set: function (value) {
  79. this._setOption('activeStateEnabled', value);
  80. },
  81. enumerable: true,
  82. configurable: true
  83. });
  84. Object.defineProperty(DxDrawerComponent.prototype, "animationDuration", {
  85. get: /**
  86. * Specifies the duration of the drawer's opening and closing animation (in milliseconds). Applies only if animationEnabled is true.
  87. */
  88. function () {
  89. return this._getOption('animationDuration');
  90. },
  91. set: function (value) {
  92. this._setOption('animationDuration', value);
  93. },
  94. enumerable: true,
  95. configurable: true
  96. });
  97. Object.defineProperty(DxDrawerComponent.prototype, "animationEnabled", {
  98. get: /**
  99. * Specifies whether to use an opening and closing animation.
  100. */
  101. function () {
  102. return this._getOption('animationEnabled');
  103. },
  104. set: function (value) {
  105. this._setOption('animationEnabled', value);
  106. },
  107. enumerable: true,
  108. configurable: true
  109. });
  110. Object.defineProperty(DxDrawerComponent.prototype, "closeOnOutsideClick", {
  111. get: /**
  112. * Specifies whether to close the drawer if a user clicks or taps the view area.
  113. */
  114. function () {
  115. return this._getOption('closeOnOutsideClick');
  116. },
  117. set: function (value) {
  118. this._setOption('closeOnOutsideClick', value);
  119. },
  120. enumerable: true,
  121. configurable: true
  122. });
  123. Object.defineProperty(DxDrawerComponent.prototype, "disabled", {
  124. get: /**
  125. * Specifies whether the widget responds to user interaction.
  126. */
  127. function () {
  128. return this._getOption('disabled');
  129. },
  130. set: function (value) {
  131. this._setOption('disabled', value);
  132. },
  133. enumerable: true,
  134. configurable: true
  135. });
  136. Object.defineProperty(DxDrawerComponent.prototype, "elementAttr", {
  137. get: /**
  138. * Specifies the attributes to be attached to the widget's root element.
  139. */
  140. function () {
  141. return this._getOption('elementAttr');
  142. },
  143. set: function (value) {
  144. this._setOption('elementAttr', value);
  145. },
  146. enumerable: true,
  147. configurable: true
  148. });
  149. Object.defineProperty(DxDrawerComponent.prototype, "height", {
  150. get: /**
  151. * Specifies the widget's height.
  152. */
  153. function () {
  154. return this._getOption('height');
  155. },
  156. set: function (value) {
  157. this._setOption('height', value);
  158. },
  159. enumerable: true,
  160. configurable: true
  161. });
  162. Object.defineProperty(DxDrawerComponent.prototype, "hint", {
  163. get: /**
  164. * Specifies text for a hint that appears when a user pauses on the widget.
  165. */
  166. function () {
  167. return this._getOption('hint');
  168. },
  169. set: function (value) {
  170. this._setOption('hint', value);
  171. },
  172. enumerable: true,
  173. configurable: true
  174. });
  175. Object.defineProperty(DxDrawerComponent.prototype, "hoverStateEnabled", {
  176. get: /**
  177. * Specifies whether the widget changes its state when a user pauses on it.
  178. */
  179. function () {
  180. return this._getOption('hoverStateEnabled');
  181. },
  182. set: function (value) {
  183. this._setOption('hoverStateEnabled', value);
  184. },
  185. enumerable: true,
  186. configurable: true
  187. });
  188. Object.defineProperty(DxDrawerComponent.prototype, "maxSize", {
  189. get: /**
  190. * Specifies the drawer's width or height (depending on the drawer's position) in the opened state.
  191. */
  192. function () {
  193. return this._getOption('maxSize');
  194. },
  195. set: function (value) {
  196. this._setOption('maxSize', value);
  197. },
  198. enumerable: true,
  199. configurable: true
  200. });
  201. Object.defineProperty(DxDrawerComponent.prototype, "minSize", {
  202. get: /**
  203. * Specifies the drawer's width or height (depending on the drawer's position) in the closed state.
  204. */
  205. function () {
  206. return this._getOption('minSize');
  207. },
  208. set: function (value) {
  209. this._setOption('minSize', value);
  210. },
  211. enumerable: true,
  212. configurable: true
  213. });
  214. Object.defineProperty(DxDrawerComponent.prototype, "opened", {
  215. get: /**
  216. * Specifies whether the drawer is opened.
  217. */
  218. function () {
  219. return this._getOption('opened');
  220. },
  221. set: function (value) {
  222. this._setOption('opened', value);
  223. },
  224. enumerable: true,
  225. configurable: true
  226. });
  227. Object.defineProperty(DxDrawerComponent.prototype, "openedStateMode", {
  228. get: /**
  229. * Specifies how the drawer interacts with the view in the opened state.
  230. */
  231. function () {
  232. return this._getOption('openedStateMode');
  233. },
  234. set: function (value) {
  235. this._setOption('openedStateMode', value);
  236. },
  237. enumerable: true,
  238. configurable: true
  239. });
  240. Object.defineProperty(DxDrawerComponent.prototype, "position", {
  241. get: /**
  242. * Specifies the drawer's position in relation to the view.
  243. */
  244. function () {
  245. return this._getOption('position');
  246. },
  247. set: function (value) {
  248. this._setOption('position', value);
  249. },
  250. enumerable: true,
  251. configurable: true
  252. });
  253. Object.defineProperty(DxDrawerComponent.prototype, "revealMode", {
  254. get: /**
  255. * Specifies the drawer's reveal mode.
  256. */
  257. function () {
  258. return this._getOption('revealMode');
  259. },
  260. set: function (value) {
  261. this._setOption('revealMode', value);
  262. },
  263. enumerable: true,
  264. configurable: true
  265. });
  266. Object.defineProperty(DxDrawerComponent.prototype, "rtlEnabled", {
  267. get: /**
  268. * Switches the widget to a right-to-left representation.
  269. */
  270. function () {
  271. return this._getOption('rtlEnabled');
  272. },
  273. set: function (value) {
  274. this._setOption('rtlEnabled', value);
  275. },
  276. enumerable: true,
  277. configurable: true
  278. });
  279. Object.defineProperty(DxDrawerComponent.prototype, "shading", {
  280. get: /**
  281. * Specifies whether to shade the view when the drawer is opened.
  282. */
  283. function () {
  284. return this._getOption('shading');
  285. },
  286. set: function (value) {
  287. this._setOption('shading', value);
  288. },
  289. enumerable: true,
  290. configurable: true
  291. });
  292. Object.defineProperty(DxDrawerComponent.prototype, "target", {
  293. get: /**
  294. * Specifies a CSS selector for the element in which the drawer should be rendered. Applies only when the openedStateMode is "overlap".
  295. */
  296. function () {
  297. return this._getOption('target');
  298. },
  299. set: function (value) {
  300. this._setOption('target', value);
  301. },
  302. enumerable: true,
  303. configurable: true
  304. });
  305. Object.defineProperty(DxDrawerComponent.prototype, "template", {
  306. get: /**
  307. * Specifies the drawer's content.
  308. */
  309. function () {
  310. return this._getOption('template');
  311. },
  312. set: function (value) {
  313. this._setOption('template', value);
  314. },
  315. enumerable: true,
  316. configurable: true
  317. });
  318. Object.defineProperty(DxDrawerComponent.prototype, "visible", {
  319. get: /**
  320. * Specifies whether the widget is visible.
  321. */
  322. function () {
  323. return this._getOption('visible');
  324. },
  325. set: function (value) {
  326. this._setOption('visible', value);
  327. },
  328. enumerable: true,
  329. configurable: true
  330. });
  331. Object.defineProperty(DxDrawerComponent.prototype, "width", {
  332. get: /**
  333. * Specifies the widget's width.
  334. */
  335. function () {
  336. return this._getOption('width');
  337. },
  338. set: function (value) {
  339. this._setOption('width', value);
  340. },
  341. enumerable: true,
  342. configurable: true
  343. });
  344. DxDrawerComponent.prototype._createInstance = function (element, options) {
  345. return new drawer_1.default(element, options);
  346. };
  347. DxDrawerComponent.prototype.ngOnDestroy = function () {
  348. this._destroyWidget();
  349. };
  350. DxDrawerComponent.decorators = [
  351. { type: core_1.Component, args: [{
  352. selector: 'dx-drawer',
  353. template: '<ng-content></ng-content>',
  354. providers: [
  355. template_host_1.DxTemplateHost,
  356. watcher_helper_1.WatcherHelper,
  357. nested_option_1.NestedOptionHost
  358. ]
  359. },] },
  360. ];
  361. /** @nocollapse */
  362. DxDrawerComponent.ctorParameters = function () { return [
  363. { type: core_1.ElementRef, },
  364. { type: core_1.NgZone, },
  365. { type: template_host_1.DxTemplateHost, },
  366. { type: watcher_helper_1.WatcherHelper, },
  367. { type: nested_option_1.NestedOptionHost, },
  368. { type: platform_browser_2.TransferState, },
  369. { type: undefined, decorators: [{ type: core_1.Inject, args: [core_1.PLATFORM_ID,] },] },
  370. ]; };
  371. DxDrawerComponent.propDecorators = {
  372. "activeStateEnabled": [{ type: core_1.Input },],
  373. "animationDuration": [{ type: core_1.Input },],
  374. "animationEnabled": [{ type: core_1.Input },],
  375. "closeOnOutsideClick": [{ type: core_1.Input },],
  376. "disabled": [{ type: core_1.Input },],
  377. "elementAttr": [{ type: core_1.Input },],
  378. "height": [{ type: core_1.Input },],
  379. "hint": [{ type: core_1.Input },],
  380. "hoverStateEnabled": [{ type: core_1.Input },],
  381. "maxSize": [{ type: core_1.Input },],
  382. "minSize": [{ type: core_1.Input },],
  383. "opened": [{ type: core_1.Input },],
  384. "openedStateMode": [{ type: core_1.Input },],
  385. "position": [{ type: core_1.Input },],
  386. "revealMode": [{ type: core_1.Input },],
  387. "rtlEnabled": [{ type: core_1.Input },],
  388. "shading": [{ type: core_1.Input },],
  389. "target": [{ type: core_1.Input },],
  390. "template": [{ type: core_1.Input },],
  391. "visible": [{ type: core_1.Input },],
  392. "width": [{ type: core_1.Input },],
  393. "onDisposing": [{ type: core_1.Output },],
  394. "onInitialized": [{ type: core_1.Output },],
  395. "onOptionChanged": [{ type: core_1.Output },],
  396. "activeStateEnabledChange": [{ type: core_1.Output },],
  397. "animationDurationChange": [{ type: core_1.Output },],
  398. "animationEnabledChange": [{ type: core_1.Output },],
  399. "closeOnOutsideClickChange": [{ type: core_1.Output },],
  400. "disabledChange": [{ type: core_1.Output },],
  401. "elementAttrChange": [{ type: core_1.Output },],
  402. "heightChange": [{ type: core_1.Output },],
  403. "hintChange": [{ type: core_1.Output },],
  404. "hoverStateEnabledChange": [{ type: core_1.Output },],
  405. "maxSizeChange": [{ type: core_1.Output },],
  406. "minSizeChange": [{ type: core_1.Output },],
  407. "openedChange": [{ type: core_1.Output },],
  408. "openedStateModeChange": [{ type: core_1.Output },],
  409. "positionChange": [{ type: core_1.Output },],
  410. "revealModeChange": [{ type: core_1.Output },],
  411. "rtlEnabledChange": [{ type: core_1.Output },],
  412. "shadingChange": [{ type: core_1.Output },],
  413. "targetChange": [{ type: core_1.Output },],
  414. "templateChange": [{ type: core_1.Output },],
  415. "visibleChange": [{ type: core_1.Output },],
  416. "widthChange": [{ type: core_1.Output },],
  417. };
  418. return DxDrawerComponent;
  419. }(component_1.DxComponent));
  420. exports.DxDrawerComponent = DxDrawerComponent;
  421. var DxDrawerModule = (function () {
  422. function DxDrawerModule() {
  423. }
  424. DxDrawerModule.decorators = [
  425. { type: core_1.NgModule, args: [{
  426. imports: [
  427. integration_1.DxIntegrationModule,
  428. template_1.DxTemplateModule,
  429. platform_browser_1.BrowserTransferStateModule
  430. ],
  431. declarations: [
  432. DxDrawerComponent
  433. ],
  434. exports: [
  435. DxDrawerComponent,
  436. template_1.DxTemplateModule
  437. ]
  438. },] },
  439. ];
  440. return DxDrawerModule;
  441. }());
  442. exports.DxDrawerModule = DxDrawerModule;
  443. //# sourceMappingURL=drawer.js.map