ngx-bootstrap-rating.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ChangeDetectorRef, Input, Output, HostListener, NgModule } from '@angular/core';
  2. import { NG_VALUE_ACCESSOR } from '@angular/forms';
  3. import { CommonModule } from '@angular/common';
  4. /**
  5. * @fileoverview added by tsickle
  6. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  7. */
  8. /** @type {?} */
  9. const RATING_CONTROL_VALUE_ACCESSOR = {
  10. provide: NG_VALUE_ACCESSOR,
  11. /* tslint:disable-next-line: no-use-before-declare */
  12. useExisting: forwardRef((/**
  13. * @return {?}
  14. */
  15. () => RatingComponent)),
  16. multi: true
  17. };
  18. class RatingComponent {
  19. /**
  20. * @param {?} changeDetection
  21. */
  22. constructor(changeDetection) {
  23. this.changeDetection = changeDetection;
  24. /**
  25. * number of icons
  26. */
  27. this.max = 5;
  28. /**
  29. * fired when icon selected, $event:number equals to selected rating
  30. */
  31. this.onHover = new EventEmitter();
  32. /**
  33. * fired when icon selected, $event:number equals to previous rating value
  34. */
  35. this.onLeave = new EventEmitter();
  36. // tslint:disable-next-line:no-any
  37. this.onChange = Function.prototype;
  38. // tslint:disable-next-line:no-any
  39. this.onTouched = Function.prototype;
  40. }
  41. /**
  42. * @param {?} event
  43. * @return {?}
  44. */
  45. onKeydown(event) {
  46. /* tslint:disable-next-line: deprecation */
  47. if ([37, 38, 39, 40].indexOf(event.which) === -1) {
  48. return;
  49. }
  50. event.preventDefault();
  51. event.stopPropagation();
  52. /* tslint:disable-next-line: deprecation */
  53. /** @type {?} */
  54. const sign = event.which === 38 || event.which === 39 ? 1 : -1;
  55. this.rate(this.value + sign);
  56. }
  57. /**
  58. * @return {?}
  59. */
  60. ngOnInit() {
  61. this.max = typeof this.max !== 'undefined' ? this.max : 5;
  62. this.titles =
  63. typeof this.titles !== 'undefined' && this.titles.length > 0
  64. ? this.titles
  65. : [];
  66. this.range = this.buildTemplateObjects(this.max);
  67. }
  68. // model -> view
  69. /**
  70. * @param {?} value
  71. * @return {?}
  72. */
  73. writeValue(value) {
  74. if (value % 1 !== value) {
  75. this.value = Math.round(value);
  76. this.preValue = value;
  77. this.changeDetection.markForCheck();
  78. return;
  79. }
  80. this.preValue = value;
  81. this.value = value;
  82. this.changeDetection.markForCheck();
  83. }
  84. /**
  85. * @param {?} value
  86. * @return {?}
  87. */
  88. enter(value) {
  89. if (!this.readonly) {
  90. this.value = value;
  91. this.changeDetection.markForCheck();
  92. this.onHover.emit(value);
  93. }
  94. }
  95. /**
  96. * @return {?}
  97. */
  98. reset() {
  99. this.value = this.preValue;
  100. this.changeDetection.markForCheck();
  101. this.onLeave.emit(this.value);
  102. }
  103. /**
  104. * @param {?} fn
  105. * @return {?}
  106. */
  107. registerOnChange(fn) {
  108. this.onChange = fn;
  109. }
  110. /**
  111. * @param {?} fn
  112. * @return {?}
  113. */
  114. registerOnTouched(fn) {
  115. this.onTouched = fn;
  116. }
  117. /**
  118. * @param {?} value
  119. * @return {?}
  120. */
  121. rate(value) {
  122. if (!this.readonly && value >= 0 && value <= this.range.length) {
  123. this.writeValue(value);
  124. this.onChange(value);
  125. }
  126. }
  127. /**
  128. * @protected
  129. * @param {?} max
  130. * @return {?}
  131. */
  132. buildTemplateObjects(max) {
  133. /** @type {?} */
  134. const result = [];
  135. for (let i = 0; i < max; i++) {
  136. result.push({
  137. index: i,
  138. title: this.titles[i] || i + 1
  139. });
  140. }
  141. return result;
  142. }
  143. }
  144. RatingComponent.decorators = [
  145. { type: Component, args: [{
  146. selector: 'rating',
  147. template: "<span (mouseleave)=\"reset()\" (keydown)=\"onKeydown($event)\" tabindex=\"0\"\n role=\"slider\" aria-valuemin=\"0\" [attr.aria-valuemax]=\"range.length\"\n [attr.aria-valuenow]=\"value\">\n <ng-template #star let-value=\"value\" let-index=\"index\">{{ index < value ? '&#9733;' : '&#9734;' }}</ng-template>\n <ng-template ngFor let-r [ngForOf]=\"range\" let-index=\"index\">\n <span class=\"sr-only\">({{ index < value ? '*' : ' ' }})</span>\n <span class=\"bs-rating-star\"\n (mouseenter)=\"enter(index + 1)\"\n (click)=\"rate(index + 1)\"\n [title]=\"r.title\"\n [style.cursor]=\"readonly ? 'default' : 'pointer'\"\n [class.active]=\"index < value\">\n <ng-template [ngTemplateOutlet]=\"customTemplate || star\"\n [ngTemplateOutletContext]=\"{index: index, value: value}\">\n </ng-template>\n </span>\n </ng-template>\n</span>\n",
  148. providers: [RATING_CONTROL_VALUE_ACCESSOR],
  149. changeDetection: ChangeDetectionStrategy.OnPush
  150. }] }
  151. ];
  152. /** @nocollapse */
  153. RatingComponent.ctorParameters = () => [
  154. { type: ChangeDetectorRef }
  155. ];
  156. RatingComponent.propDecorators = {
  157. max: [{ type: Input }],
  158. readonly: [{ type: Input }],
  159. titles: [{ type: Input }],
  160. customTemplate: [{ type: Input }],
  161. onHover: [{ type: Output }],
  162. onLeave: [{ type: Output }],
  163. onKeydown: [{ type: HostListener, args: ['keydown', ['$event'],] }]
  164. };
  165. /**
  166. * @fileoverview added by tsickle
  167. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  168. */
  169. class RatingModule {
  170. /**
  171. * @return {?}
  172. */
  173. static forRoot() {
  174. return {
  175. ngModule: RatingModule,
  176. providers: []
  177. };
  178. }
  179. }
  180. RatingModule.decorators = [
  181. { type: NgModule, args: [{
  182. imports: [CommonModule],
  183. declarations: [RatingComponent],
  184. exports: [RatingComponent]
  185. },] }
  186. ];
  187. export { RatingComponent, RatingModule, RATING_CONTROL_VALUE_ACCESSOR as ɵa };
  188. //# sourceMappingURL=ngx-bootstrap-rating.js.map