splitbutton.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  1. "use strict";
  2. var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  3. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  4. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  5. else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  6. return c > 3 && r && Object.defineProperty(target, key, r), r;
  7. };
  8. var __metadata = (this && this.__metadata) || function (k, v) {
  9. if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
  10. };
  11. Object.defineProperty(exports, "__esModule", { value: true });
  12. var core_1 = require("@angular/core");
  13. var animations_1 = require("@angular/animations");
  14. var common_1 = require("@angular/common");
  15. var domhandler_1 = require("../dom/domhandler");
  16. var button_1 = require("../button/button");
  17. var router_1 = require("@angular/router");
  18. var router_2 = require("@angular/router");
  19. var SplitButton = /** @class */ (function () {
  20. function SplitButton(el, renderer, router, cd) {
  21. this.el = el;
  22. this.renderer = renderer;
  23. this.router = router;
  24. this.cd = cd;
  25. this.iconPos = 'left';
  26. this.onClick = new core_1.EventEmitter();
  27. this.onDropdownClick = new core_1.EventEmitter();
  28. this.showTransitionOptions = '225ms ease-out';
  29. this.hideTransitionOptions = '195ms ease-in';
  30. this.overlayVisible = false;
  31. }
  32. SplitButton.prototype.onDefaultButtonClick = function (event) {
  33. this.onClick.emit(event);
  34. };
  35. SplitButton.prototype.itemClick = function (event, item) {
  36. if (item.disabled) {
  37. event.preventDefault();
  38. return;
  39. }
  40. if (!item.url) {
  41. event.preventDefault();
  42. }
  43. if (item.command) {
  44. item.command({
  45. originalEvent: event,
  46. item: item
  47. });
  48. }
  49. this.overlayVisible = false;
  50. };
  51. SplitButton.prototype.show = function () {
  52. this.overlayVisible = !this.overlayVisible;
  53. };
  54. SplitButton.prototype.onOverlayAnimationStart = function (event) {
  55. switch (event.toState) {
  56. case 'visible':
  57. this.overlay = event.element;
  58. this.appendOverlay();
  59. this.overlay.style.zIndex = String(++domhandler_1.DomHandler.zindex);
  60. this.alignOverlay();
  61. this.bindDocumentClickListener();
  62. this.bindDocumentResizeListener();
  63. break;
  64. case 'void':
  65. this.onOverlayHide();
  66. break;
  67. }
  68. };
  69. SplitButton.prototype.onDropdownButtonClick = function (event) {
  70. this.onDropdownClick.emit(event);
  71. this.dropdownClick = true;
  72. this.show();
  73. };
  74. SplitButton.prototype.alignOverlay = function () {
  75. if (this.appendTo)
  76. domhandler_1.DomHandler.absolutePosition(this.overlay, this.containerViewChild.nativeElement);
  77. else
  78. domhandler_1.DomHandler.relativePosition(this.overlay, this.containerViewChild.nativeElement);
  79. };
  80. SplitButton.prototype.appendOverlay = function () {
  81. if (this.appendTo) {
  82. if (this.appendTo === 'body')
  83. document.body.appendChild(this.overlay);
  84. else
  85. domhandler_1.DomHandler.appendChild(this.overlay, this.appendTo);
  86. this.overlay.style.minWidth = domhandler_1.DomHandler.getWidth(this.el.nativeElement.children[0]) + 'px';
  87. }
  88. };
  89. SplitButton.prototype.restoreOverlayAppend = function () {
  90. if (this.overlay && this.appendTo) {
  91. this.el.nativeElement.appendChild(this.overlay);
  92. }
  93. };
  94. SplitButton.prototype.bindDocumentClickListener = function () {
  95. var _this = this;
  96. if (!this.documentClickListener) {
  97. this.documentClickListener = this.renderer.listen('document', 'click', function () {
  98. if (_this.dropdownClick) {
  99. _this.dropdownClick = false;
  100. }
  101. else {
  102. _this.overlayVisible = false;
  103. _this.unbindDocumentClickListener();
  104. _this.cd.markForCheck();
  105. }
  106. });
  107. }
  108. };
  109. SplitButton.prototype.unbindDocumentClickListener = function () {
  110. if (this.documentClickListener) {
  111. this.documentClickListener();
  112. this.documentClickListener = null;
  113. }
  114. };
  115. SplitButton.prototype.bindDocumentResizeListener = function () {
  116. this.documentResizeListener = this.onWindowResize.bind(this);
  117. window.addEventListener('resize', this.documentResizeListener);
  118. };
  119. SplitButton.prototype.unbindDocumentResizeListener = function () {
  120. if (this.documentResizeListener) {
  121. window.removeEventListener('resize', this.documentResizeListener);
  122. this.documentResizeListener = null;
  123. }
  124. };
  125. SplitButton.prototype.onWindowResize = function () {
  126. this.overlayVisible = false;
  127. };
  128. SplitButton.prototype.onOverlayHide = function () {
  129. this.unbindDocumentClickListener();
  130. this.unbindDocumentResizeListener();
  131. this.overlay = null;
  132. };
  133. SplitButton.prototype.ngOnDestroy = function () {
  134. this.restoreOverlayAppend();
  135. this.onOverlayHide();
  136. };
  137. __decorate([
  138. core_1.Input(),
  139. __metadata("design:type", Array)
  140. ], SplitButton.prototype, "model", void 0);
  141. __decorate([
  142. core_1.Input(),
  143. __metadata("design:type", String)
  144. ], SplitButton.prototype, "icon", void 0);
  145. __decorate([
  146. core_1.Input(),
  147. __metadata("design:type", String)
  148. ], SplitButton.prototype, "iconPos", void 0);
  149. __decorate([
  150. core_1.Input(),
  151. __metadata("design:type", String)
  152. ], SplitButton.prototype, "label", void 0);
  153. __decorate([
  154. core_1.Output(),
  155. __metadata("design:type", core_1.EventEmitter)
  156. ], SplitButton.prototype, "onClick", void 0);
  157. __decorate([
  158. core_1.Output(),
  159. __metadata("design:type", core_1.EventEmitter)
  160. ], SplitButton.prototype, "onDropdownClick", void 0);
  161. __decorate([
  162. core_1.Input(),
  163. __metadata("design:type", Object)
  164. ], SplitButton.prototype, "style", void 0);
  165. __decorate([
  166. core_1.Input(),
  167. __metadata("design:type", String)
  168. ], SplitButton.prototype, "styleClass", void 0);
  169. __decorate([
  170. core_1.Input(),
  171. __metadata("design:type", Object)
  172. ], SplitButton.prototype, "menuStyle", void 0);
  173. __decorate([
  174. core_1.Input(),
  175. __metadata("design:type", String)
  176. ], SplitButton.prototype, "menuStyleClass", void 0);
  177. __decorate([
  178. core_1.Input(),
  179. __metadata("design:type", Boolean)
  180. ], SplitButton.prototype, "disabled", void 0);
  181. __decorate([
  182. core_1.Input(),
  183. __metadata("design:type", Number)
  184. ], SplitButton.prototype, "tabindex", void 0);
  185. __decorate([
  186. core_1.Input(),
  187. __metadata("design:type", Object)
  188. ], SplitButton.prototype, "appendTo", void 0);
  189. __decorate([
  190. core_1.Input(),
  191. __metadata("design:type", String)
  192. ], SplitButton.prototype, "dir", void 0);
  193. __decorate([
  194. core_1.Input(),
  195. __metadata("design:type", String)
  196. ], SplitButton.prototype, "showTransitionOptions", void 0);
  197. __decorate([
  198. core_1.Input(),
  199. __metadata("design:type", String)
  200. ], SplitButton.prototype, "hideTransitionOptions", void 0);
  201. __decorate([
  202. core_1.ViewChild('container', { static: false }),
  203. __metadata("design:type", core_1.ElementRef)
  204. ], SplitButton.prototype, "containerViewChild", void 0);
  205. __decorate([
  206. core_1.ViewChild('defaultbtn', { static: false }),
  207. __metadata("design:type", core_1.ElementRef)
  208. ], SplitButton.prototype, "buttonViewChild", void 0);
  209. SplitButton = __decorate([
  210. core_1.Component({
  211. selector: 'p-splitButton',
  212. template: "\n <div #container [ngClass]=\"{'ui-splitbutton ui-buttonset ui-widget':true,'ui-state-disabled':disabled}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n <button #defaultbtn type=\"button\" pButton [icon]=\"icon\" [iconPos]=\"iconPos\" [label]=\"label\" [cornerStyleClass]=\"dir === 'rtl' ? 'ui-corner-right': 'ui-corner-left'\" (click)=\"onDefaultButtonClick($event)\" [disabled]=\"disabled\" [attr.tabindex]=\"tabindex\">\n </button><button type=\"button\" pButton class=\"ui-splitbutton-menubutton\" icon=\"pi pi-chevron-down\" [cornerStyleClass]=\"dir === 'rtl' ? 'ui-corner-left': 'ui-corner-right'\" (click)=\"onDropdownButtonClick($event)\" [disabled]=\"disabled\"></button>\n <div #overlay [ngClass]=\"'ui-menu ui-menu-dynamic ui-widget ui-widget-content ui-corner-all ui-helper-clearfix ui-shadow'\" *ngIf=\"overlayVisible\"\n [ngStyle]=\"menuStyle\" [class]=\"menuStyleClass\"\n [@overlayAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\">\n <ul class=\"ui-menu-list ui-helper-reset\">\n <ng-template ngFor let-item [ngForOf]=\"model\">\n <li class=\"ui-menuitem ui-widget ui-corner-all\" role=\"menuitem\" *ngIf=\"item.visible !== false\">\n <a *ngIf=\"!item.routerLink\" [attr.href]=\"item.url\" class=\"ui-menuitem-link ui-corner-all\" [attr.target]=\"item.target\"\n [ngClass]=\"{'ui-state-disabled':item.disabled}\" (click)=\"itemClick($event, item)\">\n <span [ngClass]=\"'ui-menuitem-icon'\" [class]=\"item.icon\" *ngIf=\"item.icon\"></span>\n <span class=\"ui-menuitem-text\">{{item.label}}</span>\n </a>\n <a *ngIf=\"item.routerLink\" [routerLink]=\"item.routerLink\" [queryParams]=\"item.queryParams\"\n class=\"ui-menuitem-link ui-corner-all\" [attr.target]=\"item.target\" [ngClass]=\"{'ui-state-disabled':item.disabled}\" (click)=\"itemClick($event, item)\">\n <span [ngClass]=\"'ui-menuitem-icon'\" [class]=\"item.icon\" *ngIf=\"item.icon\"></span>\n <span class=\"ui-menuitem-text\">{{item.label}}</span>\n </a>\n </li>\n </ng-template>\n </ul>\n </div>\n </div>\n ",
  213. animations: [
  214. animations_1.trigger('overlayAnimation', [
  215. animations_1.state('void', animations_1.style({
  216. transform: 'translateY(5%)',
  217. opacity: 0
  218. })),
  219. animations_1.state('visible', animations_1.style({
  220. transform: 'translateY(0)',
  221. opacity: 1
  222. })),
  223. animations_1.transition('void => visible', animations_1.animate('{{showTransitionParams}}')),
  224. animations_1.transition('visible => void', animations_1.animate('{{hideTransitionParams}}'))
  225. ])
  226. ]
  227. }),
  228. __metadata("design:paramtypes", [core_1.ElementRef, core_1.Renderer2, router_1.Router, core_1.ChangeDetectorRef])
  229. ], SplitButton);
  230. return SplitButton;
  231. }());
  232. exports.SplitButton = SplitButton;
  233. var SplitButtonModule = /** @class */ (function () {
  234. function SplitButtonModule() {
  235. }
  236. SplitButtonModule = __decorate([
  237. core_1.NgModule({
  238. imports: [common_1.CommonModule, button_1.ButtonModule, router_2.RouterModule],
  239. exports: [SplitButton, button_1.ButtonModule, router_2.RouterModule],
  240. declarations: [SplitButton]
  241. })
  242. ], SplitButtonModule);
  243. return SplitButtonModule;
  244. }());
  245. exports.SplitButtonModule = SplitButtonModule;
  246. //# sourceMappingURL=splitbutton.js.map