checkbox.js 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. /**
  2. * @fileoverview added by tsickle
  3. * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  4. */
  5. import { ChangeDetectorRef, Directive, forwardRef, Input } from '@angular/core';
  6. import { NG_VALUE_ACCESSOR } from '@angular/forms';
  7. import { NgbButtonLabel } from './label';
  8. /** @type {?} */
  9. const NGB_CHECKBOX_VALUE_ACCESSOR = {
  10. provide: NG_VALUE_ACCESSOR,
  11. useExisting: forwardRef((/**
  12. * @return {?}
  13. */
  14. () => NgbCheckBox)),
  15. multi: true
  16. };
  17. /**
  18. * Allows to easily create Bootstrap-style checkbox buttons.
  19. *
  20. * Integrates with forms, so the value of a checked button is bound to the underlying form control
  21. * either in a reactive or template-driven way.
  22. */
  23. export class NgbCheckBox {
  24. /**
  25. * @param {?} _label
  26. * @param {?} _cd
  27. */
  28. constructor(_label, _cd) {
  29. this._label = _label;
  30. this._cd = _cd;
  31. /**
  32. * If `true`, the checkbox button will be disabled
  33. */
  34. this.disabled = false;
  35. /**
  36. * The form control value when the checkbox is checked.
  37. */
  38. this.valueChecked = true;
  39. /**
  40. * The form control value when the checkbox is unchecked.
  41. */
  42. this.valueUnChecked = false;
  43. this.onChange = (/**
  44. * @param {?} _
  45. * @return {?}
  46. */
  47. (_) => { });
  48. this.onTouched = (/**
  49. * @return {?}
  50. */
  51. () => { });
  52. }
  53. /**
  54. * @param {?} isFocused
  55. * @return {?}
  56. */
  57. set focused(isFocused) {
  58. this._label.focused = isFocused;
  59. if (!isFocused) {
  60. this.onTouched();
  61. }
  62. }
  63. /**
  64. * @param {?} $event
  65. * @return {?}
  66. */
  67. onInputChange($event) {
  68. /** @type {?} */
  69. const modelToPropagate = $event.target.checked ? this.valueChecked : this.valueUnChecked;
  70. this.onChange(modelToPropagate);
  71. this.onTouched();
  72. this.writeValue(modelToPropagate);
  73. }
  74. /**
  75. * @param {?} fn
  76. * @return {?}
  77. */
  78. registerOnChange(fn) { this.onChange = fn; }
  79. /**
  80. * @param {?} fn
  81. * @return {?}
  82. */
  83. registerOnTouched(fn) { this.onTouched = fn; }
  84. /**
  85. * @param {?} isDisabled
  86. * @return {?}
  87. */
  88. setDisabledState(isDisabled) {
  89. this.disabled = isDisabled;
  90. this._label.disabled = isDisabled;
  91. }
  92. /**
  93. * @param {?} value
  94. * @return {?}
  95. */
  96. writeValue(value) {
  97. this.checked = value === this.valueChecked;
  98. this._label.active = this.checked;
  99. // label won't be updated, if it is inside the OnPush component when [ngModel] changes
  100. this._cd.markForCheck();
  101. }
  102. }
  103. NgbCheckBox.decorators = [
  104. { type: Directive, args: [{
  105. selector: '[ngbButton][type=checkbox]',
  106. host: {
  107. '[checked]': 'checked',
  108. '[disabled]': 'disabled',
  109. '(change)': 'onInputChange($event)',
  110. '(focus)': 'focused = true',
  111. '(blur)': 'focused = false'
  112. },
  113. providers: [NGB_CHECKBOX_VALUE_ACCESSOR]
  114. },] }
  115. ];
  116. /** @nocollapse */
  117. NgbCheckBox.ctorParameters = () => [
  118. { type: NgbButtonLabel },
  119. { type: ChangeDetectorRef }
  120. ];
  121. NgbCheckBox.propDecorators = {
  122. disabled: [{ type: Input }],
  123. valueChecked: [{ type: Input }],
  124. valueUnChecked: [{ type: Input }]
  125. };
  126. if (false) {
  127. /** @type {?} */
  128. NgbCheckBox.prototype.checked;
  129. /**
  130. * If `true`, the checkbox button will be disabled
  131. * @type {?}
  132. */
  133. NgbCheckBox.prototype.disabled;
  134. /**
  135. * The form control value when the checkbox is checked.
  136. * @type {?}
  137. */
  138. NgbCheckBox.prototype.valueChecked;
  139. /**
  140. * The form control value when the checkbox is unchecked.
  141. * @type {?}
  142. */
  143. NgbCheckBox.prototype.valueUnChecked;
  144. /** @type {?} */
  145. NgbCheckBox.prototype.onChange;
  146. /** @type {?} */
  147. NgbCheckBox.prototype.onTouched;
  148. /**
  149. * @type {?}
  150. * @private
  151. */
  152. NgbCheckBox.prototype._label;
  153. /**
  154. * @type {?}
  155. * @private
  156. */
  157. NgbCheckBox.prototype._cd;
  158. }
  159. //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3guanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AbmctYm9vdHN0cmFwL25nLWJvb3RzdHJhcC8iLCJzb3VyY2VzIjpbImJ1dHRvbnMvY2hlY2tib3gudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBQyxpQkFBaUIsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUM5RSxPQUFPLEVBQXVCLGlCQUFpQixFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFFdkUsT0FBTyxFQUFDLGNBQWMsRUFBQyxNQUFNLFNBQVMsQ0FBQzs7TUFFakMsMkJBQTJCLEdBQUc7SUFDbEMsT0FBTyxFQUFFLGlCQUFpQjtJQUMxQixXQUFXLEVBQUUsVUFBVTs7O0lBQUMsR0FBRyxFQUFFLENBQUMsV0FBVyxFQUFDO0lBQzFDLEtBQUssRUFBRSxJQUFJO0NBQ1o7Ozs7Ozs7QUFvQkQsTUFBTSxPQUFPLFdBQVc7Ozs7O0lBNEJ0QixZQUFvQixNQUFzQixFQUFVLEdBQXNCO1FBQXRELFdBQU0sR0FBTixNQUFNLENBQWdCO1FBQVUsUUFBRyxHQUFILEdBQUcsQ0FBbUI7Ozs7UUF0QmpFLGFBQVEsR0FBRyxLQUFLLENBQUM7Ozs7UUFLakIsaUJBQVksR0FBRyxJQUFJLENBQUM7Ozs7UUFLcEIsbUJBQWMsR0FBRyxLQUFLLENBQUM7UUFFaEMsYUFBUTs7OztRQUFHLENBQUMsQ0FBTSxFQUFFLEVBQUUsR0FBRSxDQUFDLEVBQUM7UUFDMUIsY0FBUzs7O1FBQUcsR0FBRyxFQUFFLEdBQUUsQ0FBQyxFQUFDO0lBU3dELENBQUM7Ozs7O0lBUDlFLElBQUksT0FBTyxDQUFDLFNBQWtCO1FBQzVCLElBQUksQ0FBQyxNQUFNLENBQUMsT0FBTyxHQUFHLFNBQVMsQ0FBQztRQUNoQyxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQ2QsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1NBQ2xCO0lBQ0gsQ0FBQzs7Ozs7SUFJRCxhQUFhLENBQUMsTUFBTTs7Y0FDWixnQkFBZ0IsR0FBRyxNQUFNLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLGNBQWM7UUFDeEYsSUFBSSxDQUFDLFFBQVEsQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1FBQ2hDLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztRQUNqQixJQUFJLENBQUMsVUFBVSxDQUFDLGdCQUFnQixDQUFDLENBQUM7SUFDcEMsQ0FBQzs7Ozs7SUFFRCxnQkFBZ0IsQ0FBQyxFQUF1QixJQUFVLElBQUksQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFDLENBQUMsQ0FBQzs7Ozs7SUFFdkUsaUJBQWlCLENBQUMsRUFBYSxJQUFVLElBQUksQ0FBQyxTQUFTLEdBQUcsRUFBRSxDQUFDLENBQUMsQ0FBQzs7Ozs7SUFFL0QsZ0JBQWdCLENBQUMsVUFBbUI7UUFDbEMsSUFBSSxDQUFDLFFBQVEsR0FBRyxVQUFVLENBQUM7UUFDM0IsSUFBSSxDQUFDLE1BQU0sQ0FBQyxRQUFRLEdBQUcsVUFBVSxDQUFDO0lBQ3BDLENBQUM7Ozs7O0lBRUQsVUFBVSxDQUFDLEtBQUs7UUFDZCxJQUFJLENBQUMsT0FBTyxHQUFHLEtBQUssS0FBSyxJQUFJLENBQUMsWUFBWSxDQUFDO1FBQzNDLElBQUksQ0FBQyxNQUFNLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUM7UUFFbEMsc0ZBQXNGO1FBQ3RGLElBQUksQ0FBQyxHQUFHLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDMUIsQ0FBQzs7O1lBL0RGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsNEJBQTRCO2dCQUN0QyxJQUFJLEVBQUU7b0JBQ0osV0FBVyxFQUFFLFNBQVM7b0JBQ3RCLFlBQVksRUFBRSxVQUFVO29CQUN4QixVQUFVLEVBQUUsdUJBQXVCO29CQUNuQyxTQUFTLEVBQUUsZ0JBQWdCO29CQUMzQixRQUFRLEVBQUUsaUJBQWlCO2lCQUM1QjtnQkFDRCxTQUFTLEVBQUUsQ0FBQywyQkFBMkIsQ0FBQzthQUN6Qzs7OztZQXpCTyxjQUFjO1lBSGQsaUJBQWlCOzs7dUJBbUN0QixLQUFLOzJCQUtMLEtBQUs7NkJBS0wsS0FBSzs7OztJQWZOLDhCQUFROzs7OztJQUtSLCtCQUEwQjs7Ozs7SUFLMUIsbUNBQTZCOzs7OztJQUs3QixxQ0FBZ0M7O0lBRWhDLCtCQUEwQjs7SUFDMUIsZ0NBQXFCOzs7OztJQVNULDZCQUE4Qjs7Ozs7SUFBRSwwQkFBOEIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NoYW5nZURldGVjdG9yUmVmLCBEaXJlY3RpdmUsIGZvcndhcmRSZWYsIElucHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7Q29udHJvbFZhbHVlQWNjZXNzb3IsIE5HX1ZBTFVFX0FDQ0VTU09SfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbmltcG9ydCB7TmdiQnV0dG9uTGFiZWx9IGZyb20gJy4vbGFiZWwnO1xuXG5jb25zdCBOR0JfQ0hFQ0tCT1hfVkFMVUVfQUNDRVNTT1IgPSB7XG4gIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBOZ2JDaGVja0JveCksXG4gIG11bHRpOiB0cnVlXG59O1xuXG5cbi8qKlxuICogQWxsb3dzIHRvIGVhc2lseSBjcmVhdGUgQm9vdHN0cmFwLXN0eWxlIGNoZWNrYm94IGJ1dHRvbnMuXG4gKlxuICogSW50ZWdyYXRlcyB3aXRoIGZvcm1zLCBzbyB0aGUgdmFsdWUgb2YgYSBjaGVja2VkIGJ1dHRvbiBpcyBib3VuZCB0byB0aGUgdW5kZXJseWluZyBmb3JtIGNvbnRyb2xcbiAqIGVpdGhlciBpbiBhIHJlYWN0aXZlIG9yIHRlbXBsYXRlLWRyaXZlbiB3YXkuXG4gKi9cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1tuZ2JCdXR0b25dW3R5cGU9Y2hlY2tib3hdJyxcbiAgaG9zdDoge1xuICAgICdbY2hlY2tlZF0nOiAnY2hlY2tlZCcsXG4gICAgJ1tkaXNhYmxlZF0nOiAnZGlzYWJsZWQnLFxuICAgICcoY2hhbmdlKSc6ICdvbklucHV0Q2hhbmdlKCRldmVudCknLFxuICAgICcoZm9jdXMpJzogJ2ZvY3VzZWQgPSB0cnVlJyxcbiAgICAnKGJsdXIpJzogJ2ZvY3VzZWQgPSBmYWxzZSdcbiAgfSxcbiAgcHJvdmlkZXJzOiBbTkdCX0NIRUNLQk9YX1ZBTFVFX0FDQ0VTU09SXVxufSlcbmV4cG9ydCBjbGFzcyBOZ2JDaGVja0JveCBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yIHtcbiAgY2hlY2tlZDtcblxuICAvKipcbiAgICogSWYgYHRydWVgLCB0aGUgY2hlY2tib3ggYnV0dG9uIHdpbGwgYmUgZGlzYWJsZWRcbiAgICovXG4gIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIFRoZSBmb3JtIGNvbnRyb2wgdmFsdWUgd2hlbiB0aGUgY2hlY2tib3ggaXMgY2hlY2tlZC5cbiAgICovXG4gIEBJbnB1dCgpIHZhbHVlQ2hlY2tlZCA9IHRydWU7XG5cbiAgLyoqXG4gICAqIFRoZSBmb3JtIGNvbnRyb2wgdmFsdWUgd2hlbiB0aGUgY2hlY2tib3ggaXMgdW5jaGVja2VkLlxuICAgKi9cbiAgQElucHV0KCkgdmFsdWVVbkNoZWNrZWQgPSBmYWxzZTtcblxuICBvbkNoYW5nZSA9IChfOiBhbnkpID0+IHt9O1xuICBvblRvdWNoZWQgPSAoKSA9PiB7fTtcblxuICBzZXQgZm9jdXNlZChpc0ZvY3VzZWQ6IGJvb2xlYW4pIHtcbiAgICB0aGlzLl9sYWJlbC5mb2N1c2VkID0gaXNGb2N1c2VkO1xuICAgIGlmICghaXNGb2N1c2VkKSB7XG4gICAgICB0aGlzLm9uVG91Y2hlZCgpO1xuICAgIH1cbiAgfVxuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgX2xhYmVsOiBOZ2JCdXR0b25MYWJlbCwgcHJpdmF0ZSBfY2Q6IENoYW5nZURldGVjdG9yUmVmKSB7fVxuXG4gIG9uSW5wdXRDaGFuZ2UoJGV2ZW50KSB7XG4gICAgY29uc3QgbW9kZWxUb1Byb3BhZ2F0ZSA9ICRldmVudC50YXJnZXQuY2hlY2tlZCA/IHRoaXMudmFsdWVDaGVja2VkIDogdGhpcy52YWx1ZVVuQ2hlY2tlZDtcbiAgICB0aGlzLm9uQ2hhbmdlKG1vZGVsVG9Qcm9wYWdhdGUpO1xuICAgIHRoaXMub25Ub3VjaGVkKCk7XG4gICAgdGhpcy53cml0ZVZhbHVlKG1vZGVsVG9Qcm9wYWdhdGUpO1xuICB9XG5cbiAgcmVnaXN0ZXJPbkNoYW5nZShmbjogKHZhbHVlOiBhbnkpID0+IGFueSk6IHZvaWQgeyB0aGlzLm9uQ2hhbmdlID0gZm47IH1cblxuICByZWdpc3Rlck9uVG91Y2hlZChmbjogKCkgPT4gYW55KTogdm9pZCB7IHRoaXMub25Ub3VjaGVkID0gZm47IH1cblxuICBzZXREaXNhYmxlZFN0YXRlKGlzRGlzYWJsZWQ6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICB0aGlzLmRpc2FibGVkID0gaXNEaXNhYmxlZDtcbiAgICB0aGlzLl9sYWJlbC5kaXNhYmxlZCA9IGlzRGlzYWJsZWQ7XG4gIH1cblxuICB3cml0ZVZhbHVlKHZhbHVlKSB7XG4gICAgdGhpcy5jaGVja2VkID0gdmFsdWUgPT09IHRoaXMudmFsdWVDaGVja2VkO1xuICAgIHRoaXMuX2xhYmVsLmFjdGl2ZSA9IHRoaXMuY2hlY2tlZDtcblxuICAgIC8vIGxhYmVsIHdvbid0IGJlIHVwZGF0ZWQsIGlmIGl0IGlzIGluc2lkZSB0aGUgT25QdXNoIGNvbXBvbmVudCB3aGVuIFtuZ01vZGVsXSBjaGFuZ2VzXG4gICAgdGhpcy5fY2QubWFya0ZvckNoZWNrKCk7XG4gIH1cbn1cbiJdfQ==