ngx-bootstrap-buttons.js 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383
  1. import { forwardRef, Directive, Input, HostBinding, HostListener, ChangeDetectorRef, ElementRef, Optional, Renderer2, NgModule } from '@angular/core';
  2. import { NG_VALUE_ACCESSOR } from '@angular/forms';
  3. /**
  4. * @fileoverview added by tsickle
  5. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  6. */
  7. // TODO: config: activeClass - Class to apply to the checked buttons
  8. /** @type {?} */
  9. const CHECKBOX_CONTROL_VALUE_ACCESSOR = {
  10. provide: NG_VALUE_ACCESSOR,
  11. /* tslint:disable-next-line: no-use-before-declare */
  12. useExisting: forwardRef((/**
  13. * @return {?}
  14. */
  15. () => ButtonCheckboxDirective)),
  16. multi: true
  17. };
  18. /**
  19. * Add checkbox functionality to any element
  20. */
  21. class ButtonCheckboxDirective {
  22. constructor() {
  23. /**
  24. * Truthy value, will be set to ngModel
  25. */
  26. this.btnCheckboxTrue = true;
  27. /**
  28. * Falsy value, will be set to ngModel
  29. */
  30. this.btnCheckboxFalse = false;
  31. this.state = false;
  32. this.onChange = Function.prototype;
  33. this.onTouched = Function.prototype;
  34. }
  35. // view -> model
  36. /**
  37. * @return {?}
  38. */
  39. onClick() {
  40. if (this.isDisabled) {
  41. return;
  42. }
  43. this.toggle(!this.state);
  44. this.onChange(this.value);
  45. }
  46. /**
  47. * @return {?}
  48. */
  49. ngOnInit() {
  50. this.toggle(this.trueValue === this.value);
  51. }
  52. /**
  53. * @protected
  54. * @return {?}
  55. */
  56. get trueValue() {
  57. return typeof this.btnCheckboxTrue !== 'undefined'
  58. ? this.btnCheckboxTrue
  59. : true;
  60. }
  61. /**
  62. * @protected
  63. * @return {?}
  64. */
  65. get falseValue() {
  66. return typeof this.btnCheckboxFalse !== 'undefined'
  67. ? this.btnCheckboxFalse
  68. : false;
  69. }
  70. /**
  71. * @param {?} state
  72. * @return {?}
  73. */
  74. toggle(state) {
  75. this.state = state;
  76. this.value = this.state ? this.trueValue : this.falseValue;
  77. }
  78. // ControlValueAccessor
  79. // model -> view
  80. /**
  81. * @param {?} value
  82. * @return {?}
  83. */
  84. writeValue(value) {
  85. this.state = this.trueValue === value;
  86. this.value = value ? this.trueValue : this.falseValue;
  87. }
  88. /**
  89. * @param {?} isDisabled
  90. * @return {?}
  91. */
  92. setDisabledState(isDisabled) {
  93. this.isDisabled = isDisabled;
  94. }
  95. /**
  96. * @param {?} fn
  97. * @return {?}
  98. */
  99. registerOnChange(fn) {
  100. this.onChange = fn;
  101. }
  102. /**
  103. * @param {?} fn
  104. * @return {?}
  105. */
  106. registerOnTouched(fn) {
  107. this.onTouched = fn;
  108. }
  109. }
  110. ButtonCheckboxDirective.decorators = [
  111. { type: Directive, args: [{
  112. selector: '[btnCheckbox]',
  113. providers: [CHECKBOX_CONTROL_VALUE_ACCESSOR]
  114. },] }
  115. ];
  116. ButtonCheckboxDirective.propDecorators = {
  117. btnCheckboxTrue: [{ type: Input }],
  118. btnCheckboxFalse: [{ type: Input }],
  119. state: [{ type: HostBinding, args: ['class.active',] }, { type: HostBinding, args: ['attr.aria-pressed',] }],
  120. onClick: [{ type: HostListener, args: ['click',] }]
  121. };
  122. /**
  123. * @fileoverview added by tsickle
  124. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  125. */
  126. /** @type {?} */
  127. const RADIO_CONTROL_VALUE_ACCESSOR = {
  128. provide: NG_VALUE_ACCESSOR,
  129. /* tslint:disable-next-line: no-use-before-declare */
  130. useExisting: forwardRef((/**
  131. * @return {?}
  132. */
  133. () => ButtonRadioGroupDirective)),
  134. multi: true
  135. };
  136. /**
  137. * A group of radio buttons.
  138. * A value of a selected button is bound to a variable specified via ngModel.
  139. */
  140. class ButtonRadioGroupDirective {
  141. /**
  142. * @param {?} cdr
  143. */
  144. constructor(cdr) {
  145. this.cdr = cdr;
  146. this.onChange = Function.prototype;
  147. this.onTouched = Function.prototype;
  148. }
  149. /**
  150. * @return {?}
  151. */
  152. get value() {
  153. return this._value;
  154. }
  155. /**
  156. * @param {?} value
  157. * @return {?}
  158. */
  159. set value(value) {
  160. this._value = value;
  161. }
  162. /**
  163. * @param {?} value
  164. * @return {?}
  165. */
  166. writeValue(value) {
  167. this._value = value;
  168. this.cdr.markForCheck();
  169. }
  170. /**
  171. * @param {?} fn
  172. * @return {?}
  173. */
  174. registerOnChange(fn) {
  175. this.onChange = fn;
  176. }
  177. /**
  178. * @param {?} fn
  179. * @return {?}
  180. */
  181. registerOnTouched(fn) {
  182. this.onTouched = fn;
  183. }
  184. }
  185. ButtonRadioGroupDirective.decorators = [
  186. { type: Directive, args: [{
  187. selector: '[btnRadioGroup]',
  188. providers: [RADIO_CONTROL_VALUE_ACCESSOR]
  189. },] }
  190. ];
  191. /** @nocollapse */
  192. ButtonRadioGroupDirective.ctorParameters = () => [
  193. { type: ChangeDetectorRef }
  194. ];
  195. /**
  196. * @fileoverview added by tsickle
  197. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  198. */
  199. /** @type {?} */
  200. const RADIO_CONTROL_VALUE_ACCESSOR$1 = {
  201. provide: NG_VALUE_ACCESSOR,
  202. /* tslint:disable-next-line: no-use-before-declare */
  203. useExisting: forwardRef((/**
  204. * @return {?}
  205. */
  206. () => ButtonRadioDirective)),
  207. multi: true
  208. };
  209. /**
  210. * Create radio buttons or groups of buttons.
  211. * A value of a selected button is bound to a variable specified via ngModel.
  212. */
  213. class ButtonRadioDirective {
  214. /**
  215. * @param {?} el
  216. * @param {?} cdr
  217. * @param {?} group
  218. * @param {?} renderer
  219. */
  220. constructor(el, cdr, group, renderer) {
  221. this.el = el;
  222. this.cdr = cdr;
  223. this.group = group;
  224. this.renderer = renderer;
  225. this.onChange = Function.prototype;
  226. this.onTouched = Function.prototype;
  227. }
  228. /**
  229. * Current value of radio component or group
  230. * @return {?}
  231. */
  232. get value() {
  233. return this.group ? this.group.value : this._value;
  234. }
  235. /**
  236. * @param {?} value
  237. * @return {?}
  238. */
  239. set value(value) {
  240. if (this.group) {
  241. this.group.value = value;
  242. return;
  243. }
  244. this._value = value;
  245. }
  246. /**
  247. * If `true` — radio button is disabled
  248. * @return {?}
  249. */
  250. get disabled() {
  251. return this._disabled;
  252. }
  253. /**
  254. * @param {?} disabled
  255. * @return {?}
  256. */
  257. set disabled(disabled) {
  258. this._disabled = disabled;
  259. this.setDisabledState(disabled);
  260. }
  261. /**
  262. * @return {?}
  263. */
  264. get isActive() {
  265. return this.btnRadio === this.value;
  266. }
  267. /**
  268. * @return {?}
  269. */
  270. onClick() {
  271. if (this.el.nativeElement.attributes.disabled || !this.uncheckable && this.btnRadio === this.value) {
  272. return;
  273. }
  274. this.value = this.uncheckable && this.btnRadio === this.value ? undefined : this.btnRadio;
  275. this._onChange(this.value);
  276. }
  277. /**
  278. * @return {?}
  279. */
  280. ngOnInit() {
  281. this.uncheckable = typeof this.uncheckable !== 'undefined';
  282. }
  283. /**
  284. * @return {?}
  285. */
  286. onBlur() {
  287. this.onTouched();
  288. }
  289. /**
  290. * @param {?} value
  291. * @return {?}
  292. */
  293. _onChange(value) {
  294. if (this.group) {
  295. this.group.onTouched();
  296. this.group.onChange(value);
  297. return;
  298. }
  299. this.onTouched();
  300. this.onChange(value);
  301. }
  302. // ControlValueAccessor
  303. // model -> view
  304. /**
  305. * @param {?} value
  306. * @return {?}
  307. */
  308. writeValue(value) {
  309. this.value = value;
  310. this.cdr.markForCheck();
  311. }
  312. /**
  313. * @param {?} fn
  314. * @return {?}
  315. */
  316. registerOnChange(fn) {
  317. this.onChange = fn;
  318. }
  319. /**
  320. * @param {?} fn
  321. * @return {?}
  322. */
  323. registerOnTouched(fn) {
  324. this.onTouched = fn;
  325. }
  326. /**
  327. * @param {?} disabled
  328. * @return {?}
  329. */
  330. setDisabledState(disabled) {
  331. if (disabled) {
  332. this.renderer.setAttribute(this.el.nativeElement, 'disabled', 'disabled');
  333. return;
  334. }
  335. this.renderer.removeAttribute(this.el.nativeElement, 'disabled');
  336. }
  337. }
  338. ButtonRadioDirective.decorators = [
  339. { type: Directive, args: [{
  340. selector: '[btnRadio]',
  341. providers: [RADIO_CONTROL_VALUE_ACCESSOR$1]
  342. },] }
  343. ];
  344. /** @nocollapse */
  345. ButtonRadioDirective.ctorParameters = () => [
  346. { type: ElementRef },
  347. { type: ChangeDetectorRef },
  348. { type: ButtonRadioGroupDirective, decorators: [{ type: Optional }] },
  349. { type: Renderer2 }
  350. ];
  351. ButtonRadioDirective.propDecorators = {
  352. btnRadio: [{ type: Input }],
  353. uncheckable: [{ type: Input }],
  354. value: [{ type: Input }],
  355. disabled: [{ type: Input }],
  356. isActive: [{ type: HostBinding, args: ['class.active',] }, { type: HostBinding, args: ['attr.aria-pressed',] }],
  357. onClick: [{ type: HostListener, args: ['click',] }]
  358. };
  359. /**
  360. * @fileoverview added by tsickle
  361. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  362. */
  363. class ButtonsModule {
  364. /**
  365. * @return {?}
  366. */
  367. static forRoot() {
  368. return { ngModule: ButtonsModule, providers: [] };
  369. }
  370. }
  371. ButtonsModule.decorators = [
  372. { type: NgModule, args: [{
  373. declarations: [ButtonCheckboxDirective, ButtonRadioDirective, ButtonRadioGroupDirective],
  374. exports: [ButtonCheckboxDirective, ButtonRadioDirective, ButtonRadioGroupDirective]
  375. },] }
  376. ];
  377. export { ButtonCheckboxDirective, ButtonRadioDirective, ButtonRadioGroupDirective, ButtonsModule, CHECKBOX_CONTROL_VALUE_ACCESSOR as ɵa, RADIO_CONTROL_VALUE_ACCESSOR as ɵb, RADIO_CONTROL_VALUE_ACCESSOR$1 as ɵc };
  378. //# sourceMappingURL=ngx-bootstrap-buttons.js.map