togglebutton.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  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 common_1 = require("@angular/common");
  14. var forms_1 = require("@angular/forms");
  15. exports.TOGGLEBUTTON_VALUE_ACCESSOR = {
  16. provide: forms_1.NG_VALUE_ACCESSOR,
  17. useExisting: core_1.forwardRef(function () { return ToggleButton; }),
  18. multi: true
  19. };
  20. var ToggleButton = /** @class */ (function () {
  21. function ToggleButton() {
  22. this.onLabel = 'Yes';
  23. this.offLabel = 'No';
  24. this.iconPos = 'left';
  25. this.onChange = new core_1.EventEmitter();
  26. this.checked = false;
  27. this.focus = false;
  28. this.onModelChange = function () { };
  29. this.onModelTouched = function () { };
  30. }
  31. ToggleButton.prototype.ngAfterViewInit = function () {
  32. if (this.checkboxViewChild) {
  33. this.checkbox = this.checkboxViewChild.nativeElement;
  34. }
  35. };
  36. ToggleButton.prototype.toggle = function (event) {
  37. if (!this.disabled) {
  38. this.checked = !this.checked;
  39. this.onModelChange(this.checked);
  40. this.onModelTouched();
  41. this.onChange.emit({
  42. originalEvent: event,
  43. checked: this.checked
  44. });
  45. if (this.checkbox) {
  46. this.checkbox.focus();
  47. }
  48. }
  49. };
  50. ToggleButton.prototype.onFocus = function () {
  51. this.focus = true;
  52. };
  53. ToggleButton.prototype.onBlur = function () {
  54. this.focus = false;
  55. this.onModelTouched();
  56. };
  57. ToggleButton.prototype.writeValue = function (value) {
  58. this.checked = value;
  59. };
  60. ToggleButton.prototype.registerOnChange = function (fn) {
  61. this.onModelChange = fn;
  62. };
  63. ToggleButton.prototype.registerOnTouched = function (fn) {
  64. this.onModelTouched = fn;
  65. };
  66. ToggleButton.prototype.setDisabledState = function (val) {
  67. this.disabled = val;
  68. };
  69. Object.defineProperty(ToggleButton.prototype, "hasOnLabel", {
  70. get: function () {
  71. return this.onLabel && this.onLabel.length > 0;
  72. },
  73. enumerable: true,
  74. configurable: true
  75. });
  76. Object.defineProperty(ToggleButton.prototype, "hasOffLabel", {
  77. get: function () {
  78. return this.onLabel && this.onLabel.length > 0;
  79. },
  80. enumerable: true,
  81. configurable: true
  82. });
  83. __decorate([
  84. core_1.Input(),
  85. __metadata("design:type", String)
  86. ], ToggleButton.prototype, "onLabel", void 0);
  87. __decorate([
  88. core_1.Input(),
  89. __metadata("design:type", String)
  90. ], ToggleButton.prototype, "offLabel", void 0);
  91. __decorate([
  92. core_1.Input(),
  93. __metadata("design:type", String)
  94. ], ToggleButton.prototype, "onIcon", void 0);
  95. __decorate([
  96. core_1.Input(),
  97. __metadata("design:type", String)
  98. ], ToggleButton.prototype, "offIcon", void 0);
  99. __decorate([
  100. core_1.Input(),
  101. __metadata("design:type", Boolean)
  102. ], ToggleButton.prototype, "disabled", void 0);
  103. __decorate([
  104. core_1.Input(),
  105. __metadata("design:type", Object)
  106. ], ToggleButton.prototype, "style", void 0);
  107. __decorate([
  108. core_1.Input(),
  109. __metadata("design:type", String)
  110. ], ToggleButton.prototype, "styleClass", void 0);
  111. __decorate([
  112. core_1.Input(),
  113. __metadata("design:type", String)
  114. ], ToggleButton.prototype, "inputId", void 0);
  115. __decorate([
  116. core_1.Input(),
  117. __metadata("design:type", Number)
  118. ], ToggleButton.prototype, "tabindex", void 0);
  119. __decorate([
  120. core_1.Input(),
  121. __metadata("design:type", String)
  122. ], ToggleButton.prototype, "iconPos", void 0);
  123. __decorate([
  124. core_1.Output(),
  125. __metadata("design:type", core_1.EventEmitter)
  126. ], ToggleButton.prototype, "onChange", void 0);
  127. __decorate([
  128. core_1.ViewChild('checkbox', { static: false }),
  129. __metadata("design:type", core_1.ElementRef)
  130. ], ToggleButton.prototype, "checkboxViewChild", void 0);
  131. ToggleButton = __decorate([
  132. core_1.Component({
  133. selector: 'p-toggleButton',
  134. template: "\n <div [ngClass]=\"{'ui-button ui-togglebutton ui-widget ui-state-default ui-corner-all': true, 'ui-button-text-only': (!onIcon && !offIcon), \n 'ui-button-text-icon-left': (onIcon && offIcon && hasOnLabel && hasOffLabel && iconPos === 'left'), \n 'ui-button-text-icon-right': (onIcon && offIcon && hasOnLabel && hasOffLabel && iconPos === 'right'),'ui-button-icon-only': (onIcon && offIcon && !hasOnLabel && !hasOffLabel),\n 'ui-state-active': checked,'ui-state-focus':focus,'ui-state-disabled':disabled}\" [ngStyle]=\"style\" [class]=\"styleClass\" \n (click)=\"toggle($event)\" (keydown.enter)=\"toggle($event)\">\n <div class=\"ui-helper-hidden-accessible\">\n <input #checkbox type=\"checkbox\" [attr.id]=\"inputId\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [attr.tabindex]=\"tabindex\">\n </div>\n <span *ngIf=\"onIcon||offIcon\" class=\"ui-button-icon-left\" [class]=\"checked ? this.onIcon : this.offIcon\" [ngClass]=\"{'ui-button-icon-left': (iconPos === 'left'), \n 'ui-button-icon-right': (iconPos === 'right')}\"></span>\n <span class=\"ui-button-text ui-unselectable-text\">{{checked ? hasOnLabel ? onLabel : 'ui-btn' : hasOffLabel ? offLabel : 'ui-btn'}}</span>\n </div>\n ",
  135. providers: [exports.TOGGLEBUTTON_VALUE_ACCESSOR]
  136. })
  137. ], ToggleButton);
  138. return ToggleButton;
  139. }());
  140. exports.ToggleButton = ToggleButton;
  141. var ToggleButtonModule = /** @class */ (function () {
  142. function ToggleButtonModule() {
  143. }
  144. ToggleButtonModule = __decorate([
  145. core_1.NgModule({
  146. imports: [common_1.CommonModule],
  147. exports: [ToggleButton],
  148. declarations: [ToggleButton]
  149. })
  150. ], ToggleButtonModule);
  151. return ToggleButtonModule;
  152. }());
  153. exports.ToggleButtonModule = ToggleButtonModule;
  154. //# sourceMappingURL=togglebutton.js.map