button-checkbox.directive.js 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. /**
  2. * @fileoverview added by tsickle
  3. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  4. */
  5. // tslint:disable:no-use-before-declare
  6. import { Directive, forwardRef, HostBinding, HostListener, Input } from '@angular/core';
  7. import { NG_VALUE_ACCESSOR } from '@angular/forms';
  8. // TODO: config: activeClass - Class to apply to the checked buttons
  9. /** @type {?} */
  10. export const CHECKBOX_CONTROL_VALUE_ACCESSOR = {
  11. provide: NG_VALUE_ACCESSOR,
  12. /* tslint:disable-next-line: no-use-before-declare */
  13. useExisting: forwardRef((/**
  14. * @return {?}
  15. */
  16. () => ButtonCheckboxDirective)),
  17. multi: true
  18. };
  19. /**
  20. * Add checkbox functionality to any element
  21. */
  22. export class ButtonCheckboxDirective {
  23. constructor() {
  24. /**
  25. * Truthy value, will be set to ngModel
  26. */
  27. this.btnCheckboxTrue = true;
  28. /**
  29. * Falsy value, will be set to ngModel
  30. */
  31. this.btnCheckboxFalse = false;
  32. this.state = false;
  33. this.onChange = Function.prototype;
  34. this.onTouched = Function.prototype;
  35. }
  36. // view -> model
  37. /**
  38. * @return {?}
  39. */
  40. onClick() {
  41. if (this.isDisabled) {
  42. return;
  43. }
  44. this.toggle(!this.state);
  45. this.onChange(this.value);
  46. }
  47. /**
  48. * @return {?}
  49. */
  50. ngOnInit() {
  51. this.toggle(this.trueValue === this.value);
  52. }
  53. /**
  54. * @protected
  55. * @return {?}
  56. */
  57. get trueValue() {
  58. return typeof this.btnCheckboxTrue !== 'undefined'
  59. ? this.btnCheckboxTrue
  60. : true;
  61. }
  62. /**
  63. * @protected
  64. * @return {?}
  65. */
  66. get falseValue() {
  67. return typeof this.btnCheckboxFalse !== 'undefined'
  68. ? this.btnCheckboxFalse
  69. : false;
  70. }
  71. /**
  72. * @param {?} state
  73. * @return {?}
  74. */
  75. toggle(state) {
  76. this.state = state;
  77. this.value = this.state ? this.trueValue : this.falseValue;
  78. }
  79. // ControlValueAccessor
  80. // model -> view
  81. /**
  82. * @param {?} value
  83. * @return {?}
  84. */
  85. writeValue(value) {
  86. this.state = this.trueValue === value;
  87. this.value = value ? this.trueValue : this.falseValue;
  88. }
  89. /**
  90. * @param {?} isDisabled
  91. * @return {?}
  92. */
  93. setDisabledState(isDisabled) {
  94. this.isDisabled = isDisabled;
  95. }
  96. /**
  97. * @param {?} fn
  98. * @return {?}
  99. */
  100. registerOnChange(fn) {
  101. this.onChange = fn;
  102. }
  103. /**
  104. * @param {?} fn
  105. * @return {?}
  106. */
  107. registerOnTouched(fn) {
  108. this.onTouched = fn;
  109. }
  110. }
  111. ButtonCheckboxDirective.decorators = [
  112. { type: Directive, args: [{
  113. selector: '[btnCheckbox]',
  114. providers: [CHECKBOX_CONTROL_VALUE_ACCESSOR]
  115. },] }
  116. ];
  117. ButtonCheckboxDirective.propDecorators = {
  118. btnCheckboxTrue: [{ type: Input }],
  119. btnCheckboxFalse: [{ type: Input }],
  120. state: [{ type: HostBinding, args: ['class.active',] }, { type: HostBinding, args: ['attr.aria-pressed',] }],
  121. onClick: [{ type: HostListener, args: ['click',] }]
  122. };
  123. if (false) {
  124. /**
  125. * Truthy value, will be set to ngModel
  126. * @type {?}
  127. */
  128. ButtonCheckboxDirective.prototype.btnCheckboxTrue;
  129. /**
  130. * Falsy value, will be set to ngModel
  131. * @type {?}
  132. */
  133. ButtonCheckboxDirective.prototype.btnCheckboxFalse;
  134. /** @type {?} */
  135. ButtonCheckboxDirective.prototype.state;
  136. /**
  137. * @type {?}
  138. * @protected
  139. */
  140. ButtonCheckboxDirective.prototype.value;
  141. /**
  142. * @type {?}
  143. * @protected
  144. */
  145. ButtonCheckboxDirective.prototype.isDisabled;
  146. /**
  147. * @type {?}
  148. * @protected
  149. */
  150. ButtonCheckboxDirective.prototype.onChange;
  151. /**
  152. * @type {?}
  153. * @protected
  154. */
  155. ButtonCheckboxDirective.prototype.onTouched;
  156. }
  157. //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLWNoZWNrYm94LmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1ib290c3RyYXAvYnV0dG9ucy8iLCJzb3VyY2VzIjpbImJ1dHRvbi1jaGVja2JveC5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFDQSxPQUFPLEVBQ0wsU0FBUyxFQUNULFVBQVUsRUFDVixXQUFXLEVBQ1gsWUFBWSxFQUNaLEtBQUssRUFHTixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQXdCLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7OztBQUd6RSxNQUFNLE9BQU8sK0JBQStCLEdBQWE7SUFDdkQsT0FBTyxFQUFFLGlCQUFpQjs7SUFFMUIsV0FBVyxFQUFFLFVBQVU7OztJQUFDLEdBQUcsRUFBRSxDQUFDLHVCQUF1QixFQUFDO0lBQ3RELEtBQUssRUFBRSxJQUFJO0NBQ1o7Ozs7QUFTRCxNQUFNLE9BQU8sdUJBQXVCO0lBSnBDOzs7O1FBTVcsb0JBQWUsR0FBRyxJQUFJLENBQUM7Ozs7UUFFdkIscUJBQWdCLEdBQUcsS0FBSyxDQUFDO1FBSWxDLFVBQUssR0FBRyxLQUFLLENBQUM7UUFLSixhQUFRLEdBQUcsUUFBUSxDQUFDLFNBQVMsQ0FBQztRQUM5QixjQUFTLEdBQUcsUUFBUSxDQUFDLFNBQVMsQ0FBQztJQW9EM0MsQ0FBQzs7Ozs7SUFoREMsT0FBTztRQUNMLElBQUksSUFBSSxDQUFDLFVBQVUsRUFBRTtZQUNuQixPQUFPO1NBQ1I7UUFFRCxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3pCLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzVCLENBQUM7Ozs7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsU0FBUyxLQUFLLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM3QyxDQUFDOzs7OztJQUVELElBQWMsU0FBUztRQUNyQixPQUFPLE9BQU8sSUFBSSxDQUFDLGVBQWUsS0FBSyxXQUFXO1lBQ2hELENBQUMsQ0FBQyxJQUFJLENBQUMsZUFBZTtZQUN0QixDQUFDLENBQUMsSUFBSSxDQUFDO0lBQ1gsQ0FBQzs7Ozs7SUFFRCxJQUFjLFVBQVU7UUFDdEIsT0FBTyxPQUFPLElBQUksQ0FBQyxnQkFBZ0IsS0FBSyxXQUFXO1lBQ2pELENBQUMsQ0FBQyxJQUFJLENBQUMsZ0JBQWdCO1lBQ3ZCLENBQUMsQ0FBQyxLQUFLLENBQUM7SUFDWixDQUFDOzs7OztJQUVELE1BQU0sQ0FBQyxLQUFjO1FBQ25CLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO1FBQ25CLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQztJQUM3RCxDQUFDOzs7Ozs7O0lBSUQsVUFBVSxDQUFDLEtBQThCO1FBQ3ZDLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLFNBQVMsS0FBSyxLQUFLLENBQUM7UUFDdEMsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUM7SUFDeEQsQ0FBQzs7Ozs7SUFFRCxnQkFBZ0IsQ0FBQyxVQUFtQjtRQUNsQyxJQUFJLENBQUMsVUFBVSxHQUFHLFVBQVUsQ0FBQztJQUMvQixDQUFDOzs7OztJQUVELGdCQUFnQixDQUFDLEVBQVk7UUFDM0IsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7SUFDckIsQ0FBQzs7Ozs7SUFFRCxpQkFBaUIsQ0FBQyxFQUFZO1FBQzVCLElBQUksQ0FBQyxTQUFTLEdBQUcsRUFBRSxDQUFDO0lBQ3RCLENBQUM7OztZQXJFRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGVBQWU7Z0JBQ3pCLFNBQVMsRUFBRSxDQUFDLCtCQUErQixDQUFDO2FBQzdDOzs7OEJBR0UsS0FBSzsrQkFFTCxLQUFLO29CQUVMLFdBQVcsU0FBQyxjQUFjLGNBQzFCLFdBQVcsU0FBQyxtQkFBbUI7c0JBVS9CLFlBQVksU0FBQyxPQUFPOzs7Ozs7O0lBZnJCLGtEQUFnQzs7Ozs7SUFFaEMsbURBQWtDOztJQUVsQyx3Q0FFYzs7Ozs7SUFFZCx3Q0FBa0M7Ozs7O0lBQ2xDLDZDQUE4Qjs7Ozs7SUFFOUIsMkNBQXdDOzs7OztJQUN4Qyw0Q0FBeUMiLCJzb3VyY2VzQ29udGVudCI6WyIvLyB0c2xpbnQ6ZGlzYWJsZTpuby11c2UtYmVmb3JlLWRlY2xhcmVcbmltcG9ydCB7XG4gIERpcmVjdGl2ZSxcbiAgZm9yd2FyZFJlZixcbiAgSG9zdEJpbmRpbmcsXG4gIEhvc3RMaXN0ZW5lcixcbiAgSW5wdXQsXG4gIE9uSW5pdCxcbiAgUHJvdmlkZXJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbi8vIFRPRE86IGNvbmZpZzogYWN0aXZlQ2xhc3MgLSBDbGFzcyB0byBhcHBseSB0byB0aGUgY2hlY2tlZCBidXR0b25zXG5leHBvcnQgY29uc3QgQ0hFQ0tCT1hfQ09OVFJPTF9WQUxVRV9BQ0NFU1NPUjogUHJvdmlkZXIgPSB7XG4gIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAvKiB0c2xpbnQ6ZGlzYWJsZS1uZXh0LWxpbmU6IG5vLXVzZS1iZWZvcmUtZGVjbGFyZSAqL1xuICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBCdXR0b25DaGVja2JveERpcmVjdGl2ZSksXG4gIG11bHRpOiB0cnVlXG59O1xuXG4vKipcbiAqIEFkZCBjaGVja2JveCBmdW5jdGlvbmFsaXR5IHRvIGFueSBlbGVtZW50XG4gKi9cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1tidG5DaGVja2JveF0nLFxuICBwcm92aWRlcnM6IFtDSEVDS0JPWF9DT05UUk9MX1ZBTFVFX0FDQ0VTU09SXVxufSlcbmV4cG9ydCBjbGFzcyBCdXR0b25DaGVja2JveERpcmVjdGl2ZSBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBPbkluaXQge1xuICAvKiogVHJ1dGh5IHZhbHVlLCB3aWxsIGJlIHNldCB0byBuZ01vZGVsICovXG4gIEBJbnB1dCgpIGJ0bkNoZWNrYm94VHJ1ZSA9IHRydWU7XG4gIC8qKiBGYWxzeSB2YWx1ZSwgd2lsbCBiZSBzZXQgdG8gbmdNb2RlbCAqL1xuICBASW5wdXQoKSBidG5DaGVja2JveEZhbHNlID0gZmFsc2U7XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5hY3RpdmUnKVxuICBASG9zdEJpbmRpbmcoJ2F0dHIuYXJpYS1wcmVzc2VkJylcbiAgc3RhdGUgPSBmYWxzZTtcblxuICBwcm90ZWN0ZWQgdmFsdWU6IGJvb2xlYW4gfCBzdHJpbmc7XG4gIHByb3RlY3RlZCBpc0Rpc2FibGVkOiBib29sZWFuO1xuXG4gIHByb3RlY3RlZCBvbkNoYW5nZSA9IEZ1bmN0aW9uLnByb3RvdHlwZTtcbiAgcHJvdGVjdGVkIG9uVG91Y2hlZCA9IEZ1bmN0aW9uLnByb3RvdHlwZTtcblxuICAvLyB2aWV3IC0+IG1vZGVsXG4gIEBIb3N0TGlzdGVuZXIoJ2NsaWNrJylcbiAgb25DbGljaygpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5pc0Rpc2FibGVkKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgdGhpcy50b2dnbGUoIXRoaXMuc3RhdGUpO1xuICAgIHRoaXMub25DaGFuZ2UodGhpcy52YWx1ZSk7XG4gIH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLnRvZ2dsZSh0aGlzLnRydWVWYWx1ZSA9PT0gdGhpcy52YWx1ZSk7XG4gIH1cblxuICBwcm90ZWN0ZWQgZ2V0IHRydWVWYWx1ZSgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdHlwZW9mIHRoaXMuYnRuQ2hlY2tib3hUcnVlICE9PSAndW5kZWZpbmVkJ1xuICAgICAgPyB0aGlzLmJ0bkNoZWNrYm94VHJ1ZVxuICAgICAgOiB0cnVlO1xuICB9XG5cbiAgcHJvdGVjdGVkIGdldCBmYWxzZVZhbHVlKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0eXBlb2YgdGhpcy5idG5DaGVja2JveEZhbHNlICE9PSAndW5kZWZpbmVkJ1xuICAgICAgPyB0aGlzLmJ0bkNoZWNrYm94RmFsc2VcbiAgICAgIDogZmFsc2U7XG4gIH1cblxuICB0b2dnbGUoc3RhdGU6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICB0aGlzLnN0YXRlID0gc3RhdGU7XG4gICAgdGhpcy52YWx1ZSA9IHRoaXMuc3RhdGUgPyB0aGlzLnRydWVWYWx1ZSA6IHRoaXMuZmFsc2VWYWx1ZTtcbiAgfVxuXG4gIC8vIENvbnRyb2xWYWx1ZUFjY2Vzc29yXG4gIC8vIG1vZGVsIC0+IHZpZXdcbiAgd3JpdGVWYWx1ZSh2YWx1ZTogYm9vbGVhbiB8IHN0cmluZyB8IG51bGwpOiB2b2lkIHtcbiAgICB0aGlzLnN0YXRlID0gdGhpcy50cnVlVmFsdWUgPT09IHZhbHVlO1xuICAgIHRoaXMudmFsdWUgPSB2YWx1ZSA/IHRoaXMudHJ1ZVZhbHVlIDogdGhpcy5mYWxzZVZhbHVlO1xuICB9XG5cbiAgc2V0RGlzYWJsZWRTdGF0ZShpc0Rpc2FibGVkOiBib29sZWFuKTogdm9pZCB7XG4gICAgdGhpcy5pc0Rpc2FibGVkID0gaXNEaXNhYmxlZDtcbiAgfVxuXG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46ICgpID0+IHt9KTogdm9pZCB7XG4gICAgdGhpcy5vbkNoYW5nZSA9IGZuO1xuICB9XG5cbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46ICgpID0+IHt9KTogdm9pZCB7XG4gICAgdGhpcy5vblRvdWNoZWQgPSBmbjtcbiAgfVxufVxuIl19