button.js 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  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 domhandler_1 = require("../dom/domhandler");
  14. var common_1 = require("@angular/common");
  15. var ButtonDirective = /** @class */ (function () {
  16. function ButtonDirective(el) {
  17. this.el = el;
  18. this.iconPos = 'left';
  19. this.cornerStyleClass = 'ui-corner-all';
  20. }
  21. ButtonDirective.prototype.ngAfterViewInit = function () {
  22. domhandler_1.DomHandler.addMultipleClasses(this.el.nativeElement, this.getStyleClass());
  23. if (this.icon) {
  24. var iconElement = document.createElement("span");
  25. iconElement.setAttribute("aria-hidden", "true");
  26. var iconPosClass = (this.iconPos == 'right') ? 'ui-button-icon-right' : 'ui-button-icon-left';
  27. iconElement.className = iconPosClass + ' ui-clickable ' + this.icon;
  28. this.el.nativeElement.appendChild(iconElement);
  29. }
  30. var labelElement = document.createElement("span");
  31. labelElement.className = 'ui-button-text ui-clickable';
  32. labelElement.appendChild(document.createTextNode(this.label || 'ui-btn'));
  33. this.el.nativeElement.appendChild(labelElement);
  34. this.initialized = true;
  35. };
  36. ButtonDirective.prototype.getStyleClass = function () {
  37. var styleClass = 'ui-button ui-widget ui-state-default ' + this.cornerStyleClass;
  38. if (this.icon) {
  39. if (this.label != null && this.label != undefined) {
  40. if (this.iconPos == 'left')
  41. styleClass = styleClass + ' ui-button-text-icon-left';
  42. else
  43. styleClass = styleClass + ' ui-button-text-icon-right';
  44. }
  45. else {
  46. styleClass = styleClass + ' ui-button-icon-only';
  47. }
  48. }
  49. else {
  50. if (this.label) {
  51. styleClass = styleClass + ' ui-button-text-only';
  52. }
  53. else {
  54. styleClass = styleClass + ' ui-button-text-empty';
  55. }
  56. }
  57. return styleClass;
  58. };
  59. Object.defineProperty(ButtonDirective.prototype, "label", {
  60. get: function () {
  61. return this._label;
  62. },
  63. set: function (val) {
  64. this._label = val;
  65. if (this.initialized) {
  66. domhandler_1.DomHandler.findSingle(this.el.nativeElement, '.ui-button-text').textContent = this._label;
  67. if (!this.icon) {
  68. if (this._label) {
  69. domhandler_1.DomHandler.removeClass(this.el.nativeElement, 'ui-button-text-empty');
  70. domhandler_1.DomHandler.addClass(this.el.nativeElement, 'ui-button-text-only');
  71. }
  72. else {
  73. domhandler_1.DomHandler.addClass(this.el.nativeElement, 'ui-button-text-empty');
  74. domhandler_1.DomHandler.removeClass(this.el.nativeElement, 'ui-button-text-only');
  75. }
  76. }
  77. }
  78. },
  79. enumerable: true,
  80. configurable: true
  81. });
  82. Object.defineProperty(ButtonDirective.prototype, "icon", {
  83. get: function () {
  84. return this._icon;
  85. },
  86. set: function (val) {
  87. this._icon = val;
  88. if (this.initialized) {
  89. var iconPosClass = (this.iconPos == 'right') ? 'ui-button-icon-right' : 'ui-button-icon-left';
  90. domhandler_1.DomHandler.findSingle(this.el.nativeElement, '.ui-clickable').className =
  91. iconPosClass + ' ui-clickable ' + this.icon;
  92. }
  93. },
  94. enumerable: true,
  95. configurable: true
  96. });
  97. ButtonDirective.prototype.ngOnDestroy = function () {
  98. while (this.el.nativeElement.hasChildNodes()) {
  99. this.el.nativeElement.removeChild(this.el.nativeElement.lastChild);
  100. }
  101. this.initialized = false;
  102. };
  103. __decorate([
  104. core_1.Input(),
  105. __metadata("design:type", String)
  106. ], ButtonDirective.prototype, "iconPos", void 0);
  107. __decorate([
  108. core_1.Input(),
  109. __metadata("design:type", String)
  110. ], ButtonDirective.prototype, "cornerStyleClass", void 0);
  111. __decorate([
  112. core_1.Input(),
  113. __metadata("design:type", String),
  114. __metadata("design:paramtypes", [String])
  115. ], ButtonDirective.prototype, "label", null);
  116. __decorate([
  117. core_1.Input(),
  118. __metadata("design:type", String),
  119. __metadata("design:paramtypes", [String])
  120. ], ButtonDirective.prototype, "icon", null);
  121. ButtonDirective = __decorate([
  122. core_1.Directive({
  123. selector: '[pButton]'
  124. }),
  125. __metadata("design:paramtypes", [core_1.ElementRef])
  126. ], ButtonDirective);
  127. return ButtonDirective;
  128. }());
  129. exports.ButtonDirective = ButtonDirective;
  130. var Button = /** @class */ (function () {
  131. function Button() {
  132. this.iconPos = 'left';
  133. this.onClick = new core_1.EventEmitter();
  134. this.onFocus = new core_1.EventEmitter();
  135. this.onBlur = new core_1.EventEmitter();
  136. }
  137. __decorate([
  138. core_1.Input(),
  139. __metadata("design:type", String)
  140. ], Button.prototype, "type", void 0);
  141. __decorate([
  142. core_1.Input(),
  143. __metadata("design:type", String)
  144. ], Button.prototype, "iconPos", void 0);
  145. __decorate([
  146. core_1.Input(),
  147. __metadata("design:type", String)
  148. ], Button.prototype, "icon", void 0);
  149. __decorate([
  150. core_1.Input(),
  151. __metadata("design:type", String)
  152. ], Button.prototype, "label", void 0);
  153. __decorate([
  154. core_1.Input(),
  155. __metadata("design:type", Boolean)
  156. ], Button.prototype, "disabled", void 0);
  157. __decorate([
  158. core_1.Input(),
  159. __metadata("design:type", Object)
  160. ], Button.prototype, "style", void 0);
  161. __decorate([
  162. core_1.Input(),
  163. __metadata("design:type", String)
  164. ], Button.prototype, "styleClass", void 0);
  165. __decorate([
  166. core_1.Output(),
  167. __metadata("design:type", core_1.EventEmitter)
  168. ], Button.prototype, "onClick", void 0);
  169. __decorate([
  170. core_1.Output(),
  171. __metadata("design:type", core_1.EventEmitter)
  172. ], Button.prototype, "onFocus", void 0);
  173. __decorate([
  174. core_1.Output(),
  175. __metadata("design:type", core_1.EventEmitter)
  176. ], Button.prototype, "onBlur", void 0);
  177. Button = __decorate([
  178. core_1.Component({
  179. selector: 'p-button',
  180. template: "\n <button [attr.type]=\"type\" [class]=\"styleClass\" [ngStyle]=\"style\" [disabled]=\"disabled\"\n [ngClass]=\"{'ui-button ui-widget ui-state-default ui-corner-all':true,\n 'ui-button-icon-only': (icon && !label),\n 'ui-button-text-icon-left': (icon && label && iconPos === 'left'),\n 'ui-button-text-icon-right': (icon && label && iconPos === 'right'),\n 'ui-button-text-only': (!icon && label),\n 'ui-button-text-empty': (!icon && !label),\n 'ui-state-disabled': disabled}\"\n (click)=\"onClick.emit($event)\" (focus)=\"onFocus.emit($event)\" (blur)=\"onBlur.emit($event)\">\n <ng-content></ng-content>\n <span [ngClass]=\"{'ui-clickable': true,\n 'ui-button-icon-left': (iconPos === 'left'), \n 'ui-button-icon-right': (iconPos === 'right')}\"\n [class]=\"icon\" *ngIf=\"icon\"></span>\n <span class=\"ui-button-text ui-clickable\">{{label||'ui-btn'}}</span>\n </button>\n "
  181. })
  182. ], Button);
  183. return Button;
  184. }());
  185. exports.Button = Button;
  186. var ButtonModule = /** @class */ (function () {
  187. function ButtonModule() {
  188. }
  189. ButtonModule = __decorate([
  190. core_1.NgModule({
  191. imports: [common_1.CommonModule],
  192. exports: [ButtonDirective, Button],
  193. declarations: [ButtonDirective, Button]
  194. })
  195. ], ButtonModule);
  196. return ButtonModule;
  197. }());
  198. exports.ButtonModule = ButtonModule;
  199. //# sourceMappingURL=button.js.map