spinner.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354
  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 inputtext_1 = require("../inputtext/inputtext");
  15. var forms_1 = require("@angular/forms");
  16. exports.SPINNER_VALUE_ACCESSOR = {
  17. provide: forms_1.NG_VALUE_ACCESSOR,
  18. useExisting: core_1.forwardRef(function () { return Spinner; }),
  19. multi: true
  20. };
  21. var Spinner = /** @class */ (function () {
  22. function Spinner(el, cd) {
  23. this.el = el;
  24. this.cd = cd;
  25. this.onChange = new core_1.EventEmitter();
  26. this.onFocus = new core_1.EventEmitter();
  27. this.onBlur = new core_1.EventEmitter();
  28. this.step = 1;
  29. this.onModelChange = function () { };
  30. this.onModelTouched = function () { };
  31. this.keyPattern = /[0-9\+\-]/;
  32. this.negativeSeparator = '-';
  33. }
  34. Object.defineProperty(Spinner.prototype, "type", {
  35. set: function (value) {
  36. console.warn("type property is removed as Spinner does not format the value anymore");
  37. },
  38. enumerable: true,
  39. configurable: true
  40. });
  41. Spinner.prototype.ngAfterViewInit = function () {
  42. if (this.value && this.value.toString().indexOf('.') > 0) {
  43. this.precision = this.value.toString().split(/[.]/)[1].length;
  44. }
  45. else if (this.step % 1 !== 0) {
  46. // If step is not an integer then extract the length of the decimal part
  47. this.precision = this.step.toString().split(/[,]|[.]/)[1].length;
  48. }
  49. if (this.formatInput) {
  50. this.localeDecimalSeparator = (1.1).toLocaleString().substring(1, 2);
  51. this.localeThousandSeparator = (1000).toLocaleString().substring(1, 2);
  52. this.thousandRegExp = new RegExp("[" + (this.thousandSeparator || this.localeThousandSeparator) + "]", 'gim');
  53. if (this.decimalSeparator && this.thousandSeparator && this.decimalSeparator === this.thousandSeparator) {
  54. console.warn("thousandSeparator and decimalSeparator cannot have the same value.");
  55. }
  56. }
  57. };
  58. Spinner.prototype.repeat = function (event, interval, dir) {
  59. var _this = this;
  60. var i = interval || 500;
  61. this.clearTimer();
  62. this.timer = setTimeout(function () {
  63. _this.repeat(event, 40, dir);
  64. }, i);
  65. this.spin(event, dir);
  66. };
  67. Spinner.prototype.spin = function (event, dir) {
  68. var step = this.step * dir;
  69. var currentValue;
  70. if (this.value)
  71. currentValue = (typeof this.value === 'string') ? this.parseValue(this.value) : this.value;
  72. else
  73. currentValue = 0;
  74. if (this.precision)
  75. this.value = parseFloat(this.toFixed(currentValue + step, this.precision));
  76. else
  77. this.value = currentValue + step;
  78. if (this.maxlength !== undefined && this.value.toString().length > this.maxlength) {
  79. this.value = currentValue;
  80. }
  81. if (this.min !== undefined && this.value < this.min) {
  82. this.value = this.min;
  83. }
  84. if (this.max !== undefined && this.value > this.max) {
  85. this.value = this.max;
  86. }
  87. this.formatValue();
  88. this.onModelChange(this.value);
  89. this.onChange.emit(event);
  90. };
  91. Spinner.prototype.toFixed = function (value, precision) {
  92. var power = Math.pow(10, precision || 0);
  93. return String(Math.round(value * power) / power);
  94. };
  95. Spinner.prototype.onUpButtonMousedown = function (event) {
  96. if (!this.disabled) {
  97. this.inputfieldViewChild.nativeElement.focus();
  98. this.repeat(event, null, 1);
  99. this.updateFilledState();
  100. event.preventDefault();
  101. }
  102. };
  103. Spinner.prototype.onUpButtonMouseup = function (event) {
  104. if (!this.disabled) {
  105. this.clearTimer();
  106. }
  107. };
  108. Spinner.prototype.onUpButtonMouseleave = function (event) {
  109. if (!this.disabled) {
  110. this.clearTimer();
  111. }
  112. };
  113. Spinner.prototype.onDownButtonMousedown = function (event) {
  114. if (!this.disabled) {
  115. this.inputfieldViewChild.nativeElement.focus();
  116. this.repeat(event, null, -1);
  117. this.updateFilledState();
  118. event.preventDefault();
  119. }
  120. };
  121. Spinner.prototype.onDownButtonMouseup = function (event) {
  122. if (!this.disabled) {
  123. this.clearTimer();
  124. }
  125. };
  126. Spinner.prototype.onDownButtonMouseleave = function (event) {
  127. if (!this.disabled) {
  128. this.clearTimer();
  129. }
  130. };
  131. Spinner.prototype.onInputKeydown = function (event) {
  132. if (event.which == 38) {
  133. this.spin(event, 1);
  134. event.preventDefault();
  135. }
  136. else if (event.which == 40) {
  137. this.spin(event, -1);
  138. event.preventDefault();
  139. }
  140. };
  141. Spinner.prototype.onInputChange = function (event) {
  142. this.onChange.emit(event);
  143. };
  144. Spinner.prototype.onInput = function (event) {
  145. this.value = this.parseValue(event.target.value);
  146. this.onModelChange(this.value);
  147. this.updateFilledState();
  148. };
  149. Spinner.prototype.onInputBlur = function (event) {
  150. this.focus = false;
  151. this.formatValue();
  152. this.onModelTouched();
  153. this.onBlur.emit(event);
  154. };
  155. Spinner.prototype.onInputFocus = function (event) {
  156. this.focus = true;
  157. this.onFocus.emit(event);
  158. };
  159. Spinner.prototype.parseValue = function (val) {
  160. var value;
  161. if (val.trim() === '') {
  162. value = null;
  163. }
  164. else {
  165. if (this.formatInput) {
  166. val = val.replace(this.thousandRegExp, '');
  167. }
  168. if (this.precision) {
  169. val = this.formatInput ? val.replace(this.decimalSeparator || this.localeDecimalSeparator, '.') : val.replace(',', '.');
  170. value = parseFloat(val);
  171. }
  172. else {
  173. value = parseInt(val, 10);
  174. }
  175. if (!isNaN(value)) {
  176. if (this.max !== null && value > this.max) {
  177. value = this.max;
  178. }
  179. if (this.min !== null && value < this.min) {
  180. value = this.min;
  181. }
  182. }
  183. else {
  184. value = null;
  185. }
  186. }
  187. return value;
  188. };
  189. Spinner.prototype.formatValue = function () {
  190. var value = this.value;
  191. if (value != null) {
  192. if (this.formatInput) {
  193. value = value.toLocaleString(undefined, { maximumFractionDigits: 20 });
  194. if (this.decimalSeparator && this.thousandSeparator) {
  195. value = value.split(this.localeDecimalSeparator);
  196. if (this.precision && value[1]) {
  197. value[1] = (this.decimalSeparator || this.localeDecimalSeparator) + value[1];
  198. }
  199. if (this.thousandSeparator && value[0].length > 3) {
  200. value[0] = value[0].replace(new RegExp("[" + this.localeThousandSeparator + "]", 'gim'), this.thousandSeparator);
  201. }
  202. value = value.join('');
  203. }
  204. }
  205. this.formattedValue = value.toString();
  206. }
  207. else {
  208. this.formattedValue = null;
  209. }
  210. if (this.inputfieldViewChild && this.inputfieldViewChild.nativeElement) {
  211. this.inputfieldViewChild.nativeElement.value = this.formattedValue;
  212. }
  213. };
  214. Spinner.prototype.clearTimer = function () {
  215. if (this.timer) {
  216. clearInterval(this.timer);
  217. }
  218. };
  219. Spinner.prototype.writeValue = function (value) {
  220. this.value = value;
  221. this.formatValue();
  222. this.updateFilledState();
  223. this.cd.markForCheck();
  224. };
  225. Spinner.prototype.registerOnChange = function (fn) {
  226. this.onModelChange = fn;
  227. };
  228. Spinner.prototype.registerOnTouched = function (fn) {
  229. this.onModelTouched = fn;
  230. };
  231. Spinner.prototype.setDisabledState = function (val) {
  232. this.disabled = val;
  233. };
  234. Spinner.prototype.updateFilledState = function () {
  235. this.filled = (this.value !== undefined && this.value != null);
  236. };
  237. __decorate([
  238. core_1.Output(),
  239. __metadata("design:type", core_1.EventEmitter)
  240. ], Spinner.prototype, "onChange", void 0);
  241. __decorate([
  242. core_1.Output(),
  243. __metadata("design:type", core_1.EventEmitter)
  244. ], Spinner.prototype, "onFocus", void 0);
  245. __decorate([
  246. core_1.Output(),
  247. __metadata("design:type", core_1.EventEmitter)
  248. ], Spinner.prototype, "onBlur", void 0);
  249. __decorate([
  250. core_1.Input(),
  251. __metadata("design:type", Number)
  252. ], Spinner.prototype, "step", void 0);
  253. __decorate([
  254. core_1.Input(),
  255. __metadata("design:type", Number)
  256. ], Spinner.prototype, "min", void 0);
  257. __decorate([
  258. core_1.Input(),
  259. __metadata("design:type", Number)
  260. ], Spinner.prototype, "max", void 0);
  261. __decorate([
  262. core_1.Input(),
  263. __metadata("design:type", Number)
  264. ], Spinner.prototype, "maxlength", void 0);
  265. __decorate([
  266. core_1.Input(),
  267. __metadata("design:type", Number)
  268. ], Spinner.prototype, "size", void 0);
  269. __decorate([
  270. core_1.Input(),
  271. __metadata("design:type", String)
  272. ], Spinner.prototype, "placeholder", void 0);
  273. __decorate([
  274. core_1.Input(),
  275. __metadata("design:type", String)
  276. ], Spinner.prototype, "inputId", void 0);
  277. __decorate([
  278. core_1.Input(),
  279. __metadata("design:type", Boolean)
  280. ], Spinner.prototype, "disabled", void 0);
  281. __decorate([
  282. core_1.Input(),
  283. __metadata("design:type", Boolean)
  284. ], Spinner.prototype, "readonly", void 0);
  285. __decorate([
  286. core_1.Input(),
  287. __metadata("design:type", Number)
  288. ], Spinner.prototype, "tabindex", void 0);
  289. __decorate([
  290. core_1.Input(),
  291. __metadata("design:type", Boolean)
  292. ], Spinner.prototype, "required", void 0);
  293. __decorate([
  294. core_1.Input(),
  295. __metadata("design:type", String)
  296. ], Spinner.prototype, "name", void 0);
  297. __decorate([
  298. core_1.Input(),
  299. __metadata("design:type", Object)
  300. ], Spinner.prototype, "inputStyle", void 0);
  301. __decorate([
  302. core_1.Input(),
  303. __metadata("design:type", String)
  304. ], Spinner.prototype, "inputStyleClass", void 0);
  305. __decorate([
  306. core_1.Input(),
  307. __metadata("design:type", Boolean)
  308. ], Spinner.prototype, "formatInput", void 0);
  309. __decorate([
  310. core_1.Input(),
  311. __metadata("design:type", String)
  312. ], Spinner.prototype, "decimalSeparator", void 0);
  313. __decorate([
  314. core_1.Input(),
  315. __metadata("design:type", String)
  316. ], Spinner.prototype, "thousandSeparator", void 0);
  317. __decorate([
  318. core_1.ViewChild('inputfield', { static: false }),
  319. __metadata("design:type", core_1.ElementRef)
  320. ], Spinner.prototype, "inputfieldViewChild", void 0);
  321. __decorate([
  322. core_1.Input(),
  323. __metadata("design:type", String),
  324. __metadata("design:paramtypes", [String])
  325. ], Spinner.prototype, "type", null);
  326. Spinner = __decorate([
  327. core_1.Component({
  328. selector: 'p-spinner',
  329. template: "\n <span class=\"ui-spinner ui-widget ui-corner-all\">\n <input #inputfield type=\"text\" [attr.id]=\"inputId\" [value]=\"formattedValue||null\" [attr.name]=\"name\"\n [attr.size]=\"size\" [attr.maxlength]=\"maxlength\" [attr.tabindex]=\"tabindex\" [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [readonly]=\"readonly\" [attr.required]=\"required\"\n (keydown)=\"onInputKeydown($event)\" (blur)=\"onInputBlur($event)\" (input)=\"onInput($event)\" (change)=\"onInputChange($event)\" (focus)=\"onInputFocus($event)\"\n [ngStyle]=\"inputStyle\" [class]=\"inputStyleClass\" [ngClass]=\"'ui-spinner-input ui-inputtext ui-widget ui-state-default ui-corner-all'\">\n <button type=\"button\" [ngClass]=\"{'ui-spinner-button ui-spinner-up ui-corner-tr ui-button ui-widget ui-state-default':true,'ui-state-disabled':disabled}\" [disabled]=\"disabled||readonly\" [attr.tabindex]=\"tabindex\" [attr.readonly]=\"readonly\"\n (mouseleave)=\"onUpButtonMouseleave($event)\" (mousedown)=\"onUpButtonMousedown($event)\" (mouseup)=\"onUpButtonMouseup($event)\">\n <span class=\"ui-spinner-button-icon pi pi-caret-up ui-clickable\"></span>\n </button>\n <button type=\"button\" [ngClass]=\"{'ui-spinner-button ui-spinner-down ui-corner-br ui-button ui-widget ui-state-default':true,'ui-state-disabled':disabled}\" [disabled]=\"disabled||readonly\" [attr.tabindex]=\"tabindex\" [attr.readonly]=\"readonly\"\n (mouseleave)=\"onDownButtonMouseleave($event)\" (mousedown)=\"onDownButtonMousedown($event)\" (mouseup)=\"onDownButtonMouseup($event)\">\n <span class=\"ui-spinner-button-icon pi pi-caret-down ui-clickable\"></span>\n </button>\n </span>\n ",
  330. host: {
  331. '[class.ui-inputwrapper-filled]': 'filled',
  332. '[class.ui-inputwrapper-focus]': 'focus'
  333. },
  334. providers: [exports.SPINNER_VALUE_ACCESSOR]
  335. }),
  336. __metadata("design:paramtypes", [core_1.ElementRef, core_1.ChangeDetectorRef])
  337. ], Spinner);
  338. return Spinner;
  339. }());
  340. exports.Spinner = Spinner;
  341. var SpinnerModule = /** @class */ (function () {
  342. function SpinnerModule() {
  343. }
  344. SpinnerModule = __decorate([
  345. core_1.NgModule({
  346. imports: [common_1.CommonModule, inputtext_1.InputTextModule],
  347. exports: [Spinner],
  348. declarations: [Spinner]
  349. })
  350. ], SpinnerModule);
  351. return SpinnerModule;
  352. }());
  353. exports.SpinnerModule = SpinnerModule;
  354. //# sourceMappingURL=spinner.js.map