ngx-numeric-counter
Version:
Angular component for numeric input with increment and decrement buttons.
107 lines (102 loc) • 5.56 kB
JavaScript
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { forwardRef, Input, Component } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
class NgxNumericCounterComponent {
constructor() {
this.min = Number.NEGATIVE_INFINITY;
this.max = Number.POSITIVE_INFINITY;
this.step = 1;
this.disabled = false;
this.buttonClass = '';
this.inputClass = '';
this.containerClass = '';
this.value = 0;
this.onChange = (value) => { };
this.onTouched = () => { };
}
writeValue(value) {
this.value = value ?? 0;
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
increment() {
if (this.disabled)
return;
const newValue = this.value + this.step;
if (newValue <= this.max) {
this.value = newValue;
this.onChange(this.value);
this.onTouched();
}
}
decrement() {
if (this.disabled)
return;
const newValue = this.value - this.step;
if (newValue >= this.min) {
this.value = newValue;
this.onChange(this.value);
this.onTouched();
}
}
onInputChange(event) {
const val = +event.target.value;
if (!isNaN(val) && val >= this.min && val <= this.max) {
this.value = val;
this.onChange(this.value);
}
else if (event.target.value === '') {
this.value = 0;
this.onChange(this.value);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxNumericCounterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NgxNumericCounterComponent, isStandalone: true, selector: "ngx-numeric-counter", inputs: { min: "min", max: "max", step: "step", disabled: "disabled", buttonClass: "buttonClass", inputClass: "inputClass", containerClass: "containerClass" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NgxNumericCounterComponent),
multi: true,
},
], ngImport: i0, template: "<div class=\"counter-container\" [ngClass]=\"containerClass\">\n <button\n (click)=\"decrement()\"\n [disabled]=\"disabled || value <= min\"\n [ngClass]=\"buttonClass\"\n >\n -\n </button>\n\n <input\n type=\"number\"\n [value]=\"value\"\n (input)=\"onInputChange($event)\"\n [disabled]=\"disabled\"\n [ngClass]=\"inputClass\"\n />\n\n <button\n (click)=\"increment()\"\n [disabled]=\"disabled || value >= max\"\n [ngClass]=\"buttonClass\"\n >\n +\n </button>\n</div>\n", styles: [".counter-container{display:inline-flex;align-items:center;gap:4px}.counter-container button{width:32px;height:32px;font-weight:700;font-size:16px;cursor:pointer}.counter-container input{width:60px;text-align:center;padding:4px;font-size:16px}.counter-container button:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxNumericCounterComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-numeric-counter', standalone: true, imports: [CommonModule], providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NgxNumericCounterComponent),
multi: true,
},
], template: "<div class=\"counter-container\" [ngClass]=\"containerClass\">\n <button\n (click)=\"decrement()\"\n [disabled]=\"disabled || value <= min\"\n [ngClass]=\"buttonClass\"\n >\n -\n </button>\n\n <input\n type=\"number\"\n [value]=\"value\"\n (input)=\"onInputChange($event)\"\n [disabled]=\"disabled\"\n [ngClass]=\"inputClass\"\n />\n\n <button\n (click)=\"increment()\"\n [disabled]=\"disabled || value >= max\"\n [ngClass]=\"buttonClass\"\n >\n +\n </button>\n</div>\n", styles: [".counter-container{display:inline-flex;align-items:center;gap:4px}.counter-container button{width:32px;height:32px;font-weight:700;font-size:16px;cursor:pointer}.counter-container input{width:60px;text-align:center;padding:4px;font-size:16px}.counter-container button:disabled{opacity:.5;cursor:not-allowed}\n"] }]
}], propDecorators: { min: [{
type: Input
}], max: [{
type: Input
}], step: [{
type: Input
}], disabled: [{
type: Input
}], buttonClass: [{
type: Input
}], inputClass: [{
type: Input
}], containerClass: [{
type: Input
}] } });
/*
* Public API Surface of ngx-numeric-counter
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxNumericCounterComponent };
//# sourceMappingURL=ngx-numeric-counter.mjs.map