nav-bar.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552
  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 nav_bar_1 = require("devextreme/ui/nav_bar");
  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 NavBar is a widget that navigates the application views.
  40. */
  41. var DxNavBarComponent = (function (_super) {
  42. __extends(DxNavBarComponent, _super);
  43. function DxNavBarComponent(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: 'contentReady', emit: 'onContentReady' },
  49. { subscribe: 'disposing', emit: 'onDisposing' },
  50. { subscribe: 'initialized', emit: 'onInitialized' },
  51. { subscribe: 'itemClick', emit: 'onItemClick' },
  52. { subscribe: 'itemContextMenu', emit: 'onItemContextMenu' },
  53. { subscribe: 'itemHold', emit: 'onItemHold' },
  54. { subscribe: 'itemRendered', emit: 'onItemRendered' },
  55. { subscribe: 'optionChanged', emit: 'onOptionChanged' },
  56. { subscribe: 'selectionChanged', emit: 'onSelectionChanged' },
  57. { emit: 'accessKeyChange' },
  58. { emit: 'dataSourceChange' },
  59. { emit: 'disabledChange' },
  60. { emit: 'elementAttrChange' },
  61. { emit: 'focusStateEnabledChange' },
  62. { emit: 'heightChange' },
  63. { emit: 'hintChange' },
  64. { emit: 'hoverStateEnabledChange' },
  65. { emit: 'itemHoldTimeoutChange' },
  66. { emit: 'itemsChange' },
  67. { emit: 'itemTemplateChange' },
  68. { emit: 'keyExprChange' },
  69. { emit: 'noDataTextChange' },
  70. { emit: 'repaintChangesOnlyChange' },
  71. { emit: 'rtlEnabledChange' },
  72. { emit: 'scrollByContentChange' },
  73. { emit: 'selectedIndexChange' },
  74. { emit: 'selectedItemChange' },
  75. { emit: 'selectedItemKeysChange' },
  76. { emit: 'selectedItemsChange' },
  77. { emit: 'selectionModeChange' },
  78. { emit: 'tabIndexChange' },
  79. { emit: 'visibleChange' },
  80. { emit: 'widthChange' }
  81. ]);
  82. _this._idh.setHost(_this);
  83. optionHost.setHost(_this);
  84. return _this;
  85. }
  86. Object.defineProperty(DxNavBarComponent.prototype, "accessKey", {
  87. get: /**
  88. * Specifies the shortcut key that sets focus on the widget.
  89. */
  90. function () {
  91. return this._getOption('accessKey');
  92. },
  93. set: function (value) {
  94. this._setOption('accessKey', value);
  95. },
  96. enumerable: true,
  97. configurable: true
  98. });
  99. Object.defineProperty(DxNavBarComponent.prototype, "dataSource", {
  100. get: /**
  101. * Binds the widget to data.
  102. */
  103. function () {
  104. return this._getOption('dataSource');
  105. },
  106. set: function (value) {
  107. this._setOption('dataSource', value);
  108. },
  109. enumerable: true,
  110. configurable: true
  111. });
  112. Object.defineProperty(DxNavBarComponent.prototype, "disabled", {
  113. get: /**
  114. * Specifies whether the widget responds to user interaction.
  115. */
  116. function () {
  117. return this._getOption('disabled');
  118. },
  119. set: function (value) {
  120. this._setOption('disabled', value);
  121. },
  122. enumerable: true,
  123. configurable: true
  124. });
  125. Object.defineProperty(DxNavBarComponent.prototype, "elementAttr", {
  126. get: /**
  127. * Specifies the attributes to be attached to the widget's root element.
  128. */
  129. function () {
  130. return this._getOption('elementAttr');
  131. },
  132. set: function (value) {
  133. this._setOption('elementAttr', value);
  134. },
  135. enumerable: true,
  136. configurable: true
  137. });
  138. Object.defineProperty(DxNavBarComponent.prototype, "focusStateEnabled", {
  139. get: /**
  140. * Specifies whether the widget can be focused using keyboard navigation.
  141. */
  142. function () {
  143. return this._getOption('focusStateEnabled');
  144. },
  145. set: function (value) {
  146. this._setOption('focusStateEnabled', value);
  147. },
  148. enumerable: true,
  149. configurable: true
  150. });
  151. Object.defineProperty(DxNavBarComponent.prototype, "height", {
  152. get: /**
  153. * Specifies the widget's height.
  154. */
  155. function () {
  156. return this._getOption('height');
  157. },
  158. set: function (value) {
  159. this._setOption('height', value);
  160. },
  161. enumerable: true,
  162. configurable: true
  163. });
  164. Object.defineProperty(DxNavBarComponent.prototype, "hint", {
  165. get: /**
  166. * Specifies text for a hint that appears when a user pauses on the widget.
  167. */
  168. function () {
  169. return this._getOption('hint');
  170. },
  171. set: function (value) {
  172. this._setOption('hint', value);
  173. },
  174. enumerable: true,
  175. configurable: true
  176. });
  177. Object.defineProperty(DxNavBarComponent.prototype, "hoverStateEnabled", {
  178. get: /**
  179. * Specifies whether the widget changes its state when a user pauses on it.
  180. */
  181. function () {
  182. return this._getOption('hoverStateEnabled');
  183. },
  184. set: function (value) {
  185. this._setOption('hoverStateEnabled', value);
  186. },
  187. enumerable: true,
  188. configurable: true
  189. });
  190. Object.defineProperty(DxNavBarComponent.prototype, "itemHoldTimeout", {
  191. get: /**
  192. * The time period in milliseconds before the onItemHold event is raised.
  193. */
  194. function () {
  195. return this._getOption('itemHoldTimeout');
  196. },
  197. set: function (value) {
  198. this._setOption('itemHoldTimeout', value);
  199. },
  200. enumerable: true,
  201. configurable: true
  202. });
  203. Object.defineProperty(DxNavBarComponent.prototype, "items", {
  204. get: /**
  205. * An array of items displayed by the widget.
  206. */
  207. function () {
  208. return this._getOption('items');
  209. },
  210. set: function (value) {
  211. this._setOption('items', value);
  212. },
  213. enumerable: true,
  214. configurable: true
  215. });
  216. Object.defineProperty(DxNavBarComponent.prototype, "itemTemplate", {
  217. get: /**
  218. * Specifies a custom template for items.
  219. */
  220. function () {
  221. return this._getOption('itemTemplate');
  222. },
  223. set: function (value) {
  224. this._setOption('itemTemplate', value);
  225. },
  226. enumerable: true,
  227. configurable: true
  228. });
  229. Object.defineProperty(DxNavBarComponent.prototype, "keyExpr", {
  230. get: /**
  231. * Specifies which data field provides keys for widget items.
  232. */
  233. function () {
  234. return this._getOption('keyExpr');
  235. },
  236. set: function (value) {
  237. this._setOption('keyExpr', value);
  238. },
  239. enumerable: true,
  240. configurable: true
  241. });
  242. Object.defineProperty(DxNavBarComponent.prototype, "noDataText", {
  243. get: /**
  244. * The text or HTML markup displayed by the widget if the item collection is empty.
  245. */
  246. function () {
  247. return this._getOption('noDataText');
  248. },
  249. set: function (value) {
  250. this._setOption('noDataText', value);
  251. },
  252. enumerable: true,
  253. configurable: true
  254. });
  255. Object.defineProperty(DxNavBarComponent.prototype, "repaintChangesOnly", {
  256. get: /**
  257. * Specifies whether to repaint only those elements whose data changed.
  258. */
  259. function () {
  260. return this._getOption('repaintChangesOnly');
  261. },
  262. set: function (value) {
  263. this._setOption('repaintChangesOnly', value);
  264. },
  265. enumerable: true,
  266. configurable: true
  267. });
  268. Object.defineProperty(DxNavBarComponent.prototype, "rtlEnabled", {
  269. get: /**
  270. * Switches the widget to a right-to-left representation.
  271. */
  272. function () {
  273. return this._getOption('rtlEnabled');
  274. },
  275. set: function (value) {
  276. this._setOption('rtlEnabled', value);
  277. },
  278. enumerable: true,
  279. configurable: true
  280. });
  281. Object.defineProperty(DxNavBarComponent.prototype, "scrollByContent", {
  282. get: /**
  283. * Specifies whether or not an end-user can scroll tabs by swiping.
  284. */
  285. function () {
  286. return this._getOption('scrollByContent');
  287. },
  288. set: function (value) {
  289. this._setOption('scrollByContent', value);
  290. },
  291. enumerable: true,
  292. configurable: true
  293. });
  294. Object.defineProperty(DxNavBarComponent.prototype, "selectedIndex", {
  295. get: /**
  296. * The index of the currently selected widget item.
  297. */
  298. function () {
  299. return this._getOption('selectedIndex');
  300. },
  301. set: function (value) {
  302. this._setOption('selectedIndex', value);
  303. },
  304. enumerable: true,
  305. configurable: true
  306. });
  307. Object.defineProperty(DxNavBarComponent.prototype, "selectedItem", {
  308. get: /**
  309. * The selected item object.
  310. */
  311. function () {
  312. return this._getOption('selectedItem');
  313. },
  314. set: function (value) {
  315. this._setOption('selectedItem', value);
  316. },
  317. enumerable: true,
  318. configurable: true
  319. });
  320. Object.defineProperty(DxNavBarComponent.prototype, "selectedItemKeys", {
  321. get: /**
  322. * Specifies an array of currently selected item keys.
  323. */
  324. function () {
  325. return this._getOption('selectedItemKeys');
  326. },
  327. set: function (value) {
  328. this._setOption('selectedItemKeys', value);
  329. },
  330. enumerable: true,
  331. configurable: true
  332. });
  333. Object.defineProperty(DxNavBarComponent.prototype, "selectedItems", {
  334. get: /**
  335. * An array of currently selected item objects.
  336. */
  337. function () {
  338. return this._getOption('selectedItems');
  339. },
  340. set: function (value) {
  341. this._setOption('selectedItems', value);
  342. },
  343. enumerable: true,
  344. configurable: true
  345. });
  346. Object.defineProperty(DxNavBarComponent.prototype, "selectionMode", {
  347. get: /**
  348. * Specifies whether the widget enables an end-user to select only a single item or multiple items.
  349. */
  350. function () {
  351. return this._getOption('selectionMode');
  352. },
  353. set: function (value) {
  354. this._setOption('selectionMode', value);
  355. },
  356. enumerable: true,
  357. configurable: true
  358. });
  359. Object.defineProperty(DxNavBarComponent.prototype, "tabIndex", {
  360. get: /**
  361. * Specifies the number of the element when the Tab key is used for navigating.
  362. */
  363. function () {
  364. return this._getOption('tabIndex');
  365. },
  366. set: function (value) {
  367. this._setOption('tabIndex', value);
  368. },
  369. enumerable: true,
  370. configurable: true
  371. });
  372. Object.defineProperty(DxNavBarComponent.prototype, "visible", {
  373. get: /**
  374. * Specifies whether the widget is visible.
  375. */
  376. function () {
  377. return this._getOption('visible');
  378. },
  379. set: function (value) {
  380. this._setOption('visible', value);
  381. },
  382. enumerable: true,
  383. configurable: true
  384. });
  385. Object.defineProperty(DxNavBarComponent.prototype, "width", {
  386. get: /**
  387. * Specifies the widget's width.
  388. */
  389. function () {
  390. return this._getOption('width');
  391. },
  392. set: function (value) {
  393. this._setOption('width', value);
  394. },
  395. enumerable: true,
  396. configurable: true
  397. });
  398. Object.defineProperty(DxNavBarComponent.prototype, "itemsChildren", {
  399. get: function () {
  400. return this._getOption('items');
  401. },
  402. set: function (value) {
  403. this.setChildren('items', value);
  404. },
  405. enumerable: true,
  406. configurable: true
  407. });
  408. DxNavBarComponent.prototype._createInstance = function (element, options) {
  409. return new nav_bar_1.default(element, options);
  410. };
  411. DxNavBarComponent.prototype.ngOnDestroy = function () {
  412. this._destroyWidget();
  413. };
  414. DxNavBarComponent.prototype.ngOnChanges = function (changes) {
  415. _super.prototype.ngOnChanges.call(this, changes);
  416. this.setupChanges('dataSource', changes);
  417. this.setupChanges('items', changes);
  418. this.setupChanges('selectedItemKeys', changes);
  419. this.setupChanges('selectedItems', changes);
  420. };
  421. DxNavBarComponent.prototype.setupChanges = function (prop, changes) {
  422. if (!(prop in this._optionsToUpdate)) {
  423. this._idh.setup(prop, changes);
  424. }
  425. };
  426. DxNavBarComponent.prototype.ngDoCheck = function () {
  427. this._idh.doCheck('dataSource');
  428. this._idh.doCheck('items');
  429. this._idh.doCheck('selectedItemKeys');
  430. this._idh.doCheck('selectedItems');
  431. this._watcherHelper.checkWatchers();
  432. _super.prototype.ngDoCheck.call(this);
  433. _super.prototype.clearChangedOptions.call(this);
  434. };
  435. DxNavBarComponent.prototype._setOption = function (name, value) {
  436. var isSetup = this._idh.setupSingle(name, value);
  437. var isChanged = this._idh.getChanges(name, value) !== null;
  438. if (isSetup || isChanged) {
  439. _super.prototype._setOption.call(this, name, value);
  440. }
  441. };
  442. DxNavBarComponent.decorators = [
  443. { type: core_1.Component, args: [{
  444. selector: 'dx-nav-bar',
  445. template: '',
  446. providers: [
  447. template_host_1.DxTemplateHost,
  448. watcher_helper_1.WatcherHelper,
  449. nested_option_1.NestedOptionHost,
  450. iterable_differ_helper_1.IterableDifferHelper
  451. ]
  452. },] },
  453. ];
  454. /** @nocollapse */
  455. DxNavBarComponent.ctorParameters = function () { return [
  456. { type: core_1.ElementRef, },
  457. { type: core_1.NgZone, },
  458. { type: template_host_1.DxTemplateHost, },
  459. { type: watcher_helper_1.WatcherHelper, },
  460. { type: iterable_differ_helper_1.IterableDifferHelper, },
  461. { type: nested_option_1.NestedOptionHost, },
  462. { type: platform_browser_2.TransferState, },
  463. { type: undefined, decorators: [{ type: core_1.Inject, args: [core_1.PLATFORM_ID,] },] },
  464. ]; };
  465. DxNavBarComponent.propDecorators = {
  466. "accessKey": [{ type: core_1.Input },],
  467. "dataSource": [{ type: core_1.Input },],
  468. "disabled": [{ type: core_1.Input },],
  469. "elementAttr": [{ type: core_1.Input },],
  470. "focusStateEnabled": [{ type: core_1.Input },],
  471. "height": [{ type: core_1.Input },],
  472. "hint": [{ type: core_1.Input },],
  473. "hoverStateEnabled": [{ type: core_1.Input },],
  474. "itemHoldTimeout": [{ type: core_1.Input },],
  475. "items": [{ type: core_1.Input },],
  476. "itemTemplate": [{ type: core_1.Input },],
  477. "keyExpr": [{ type: core_1.Input },],
  478. "noDataText": [{ type: core_1.Input },],
  479. "repaintChangesOnly": [{ type: core_1.Input },],
  480. "rtlEnabled": [{ type: core_1.Input },],
  481. "scrollByContent": [{ type: core_1.Input },],
  482. "selectedIndex": [{ type: core_1.Input },],
  483. "selectedItem": [{ type: core_1.Input },],
  484. "selectedItemKeys": [{ type: core_1.Input },],
  485. "selectedItems": [{ type: core_1.Input },],
  486. "selectionMode": [{ type: core_1.Input },],
  487. "tabIndex": [{ type: core_1.Input },],
  488. "visible": [{ type: core_1.Input },],
  489. "width": [{ type: core_1.Input },],
  490. "onContentReady": [{ type: core_1.Output },],
  491. "onDisposing": [{ type: core_1.Output },],
  492. "onInitialized": [{ type: core_1.Output },],
  493. "onItemClick": [{ type: core_1.Output },],
  494. "onItemContextMenu": [{ type: core_1.Output },],
  495. "onItemHold": [{ type: core_1.Output },],
  496. "onItemRendered": [{ type: core_1.Output },],
  497. "onOptionChanged": [{ type: core_1.Output },],
  498. "onSelectionChanged": [{ type: core_1.Output },],
  499. "accessKeyChange": [{ type: core_1.Output },],
  500. "dataSourceChange": [{ type: core_1.Output },],
  501. "disabledChange": [{ type: core_1.Output },],
  502. "elementAttrChange": [{ type: core_1.Output },],
  503. "focusStateEnabledChange": [{ type: core_1.Output },],
  504. "heightChange": [{ type: core_1.Output },],
  505. "hintChange": [{ type: core_1.Output },],
  506. "hoverStateEnabledChange": [{ type: core_1.Output },],
  507. "itemHoldTimeoutChange": [{ type: core_1.Output },],
  508. "itemsChange": [{ type: core_1.Output },],
  509. "itemTemplateChange": [{ type: core_1.Output },],
  510. "keyExprChange": [{ type: core_1.Output },],
  511. "noDataTextChange": [{ type: core_1.Output },],
  512. "repaintChangesOnlyChange": [{ type: core_1.Output },],
  513. "rtlEnabledChange": [{ type: core_1.Output },],
  514. "scrollByContentChange": [{ type: core_1.Output },],
  515. "selectedIndexChange": [{ type: core_1.Output },],
  516. "selectedItemChange": [{ type: core_1.Output },],
  517. "selectedItemKeysChange": [{ type: core_1.Output },],
  518. "selectedItemsChange": [{ type: core_1.Output },],
  519. "selectionModeChange": [{ type: core_1.Output },],
  520. "tabIndexChange": [{ type: core_1.Output },],
  521. "visibleChange": [{ type: core_1.Output },],
  522. "widthChange": [{ type: core_1.Output },],
  523. "itemsChildren": [{ type: core_1.ContentChildren, args: [item_dxi_2.DxiItemComponent,] },],
  524. };
  525. return DxNavBarComponent;
  526. }(component_1.DxComponent));
  527. exports.DxNavBarComponent = DxNavBarComponent;
  528. var DxNavBarModule = (function () {
  529. function DxNavBarModule() {
  530. }
  531. DxNavBarModule.decorators = [
  532. { type: core_1.NgModule, args: [{
  533. imports: [
  534. item_dxi_1.DxiItemModule,
  535. integration_1.DxIntegrationModule,
  536. template_1.DxTemplateModule,
  537. platform_browser_1.BrowserTransferStateModule
  538. ],
  539. declarations: [
  540. DxNavBarComponent
  541. ],
  542. exports: [
  543. DxNavBarComponent,
  544. item_dxi_1.DxiItemModule,
  545. template_1.DxTemplateModule
  546. ]
  547. },] },
  548. ];
  549. return DxNavBarModule;
  550. }());
  551. exports.DxNavBarModule = DxNavBarModule;
  552. //# sourceMappingURL=nav-bar.js.map