Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | 93x 93x 93x 4x 4x 4x 4x 3x 3x 3x 3x 3x 3x 1x 2x 1x 3x 3x 1x 2x 1x 93x | import { InputFactory } from '../zd-input/input-factory';
import { NumberInput as ZdNumber } from '../zd-number-input/number-input';
import { IIncrement } from './interfaces';
/**
* Base class for Increment component.
*/
export class Increment extends ZdNumber implements IIncrement {
public align = 'center';
/**
* Appends a plus icon inside of the component
*/
public appendIcon = 'plus';
/**
* Maximum value of increment
*/
public maxValue?: number;
/**
* Minimum value of decrement
*/
public minValue?: number;
/**
* Prepends a minus icon inside of the component
*/
public prependIcon = 'minus';
/**
* Defines the increment value
*/
public step = 1;
/* istanbul ignore next */
/**
* Creates a new Increment.
* @param props Increment properties
*/
constructor(props: IIncrement & { component: string; name: string }) {
super(props);
this.maxValue = this.getInitValue('maxValue', props.maxValue, this.maxValue);
this.minValue = this.getInitValue('minValue', props.minValue, this.minValue);
this.step = this.getInitValue('step', props.step, this.step);
const userAppendIconClick = this.events.appendIconClick;
this.events.appendIconClick = ({ event, element, component }) => {
this.plusClick(event!, element!);
if (userAppendIconClick && typeof userAppendIconClick === 'function') {
userAppendIconClick({ event, element, component });
}
};
const userPrependIconClick = this.events.prependIconClick;
this.events.prependIconClick = ({ event, element, component }) => {
this.minusClick(event!, element!);
if (userPrependIconClick && typeof userPrependIconClick === 'function') {
userPrependIconClick({ event, element, component });
}
};
if (this.maxValue !== undefined) {
this.addValidation('max', { limit: this.maxValue });
}
if (this.minValue !== undefined) {
this.addValidation('min', { limit: this.minValue });
}
}
/**
* Triggered when the prepended icon is clicked.
* @param event DOM event
* @param element Increment
*/
public minusClick(event: Event, element: any) {
this.decrement();
super.change(event, element);
}
/**
* Triggered when the appended icon is clicked.
* @param event DOM event
* @param element Increment
*/
public plusClick(event: Event, element: any) {
this.increment();
super.change(event, element);
}
/**
* Method to increment the value
*/
public increment() {
this.value = this.value ? Number(this.value) : this.value;
if ((this.value === null || Number.isNaN(this.value)) && this.minValue) {
this.value = this.minValue;
} else if (this.value !== this.maxValue) {
this.value += this.step;
}
}
/**
* Method to decrement the value
*/
public decrement() {
this.value = this.value ? Number(this.value) : this.value;
if ((this.value === null || Number.isNaN(this.value)) && this.maxValue) {
this.value = this.maxValue;
} else if (this.value !== this.minValue) {
this.value -= this.step;
}
}
}
InputFactory.register('ZdIncrement', Increment);
|