input-plus-minus

input-plus-minus is a ts library creates stylized input.

Library depends on Inputmask.

Setup

add with:

npm

npm install input-plus-minus --save

yarn

yarn add input-plus-minus

Classic web with script tag

<script src="public/InputPlusMinusWindow.js"></script>

ES6 import

import InputPlusMinus from 'InputPlusMinus';

Usage

InputPlusMinus('#id', InputPlusMinusSettings, ['themes']);

Settings

interface InputPlusMinusSettings {
  plusText?: string;
  minusText?: string;
  min?: number;
  max?: number;
  start?: number;
  step?: number | InputPlusMinusSteps;
  digits?: number;
  grid?: boolean;
  gridSuffix?: string;
  gridCompression?: boolean;
  gridCompressionValues?: InputPlusMinusGridCompression[];
  thumb?: string;
  thumbCreator?: (thumb: string, input: HTMLInputElement) => Element;
}

Fields

elements

elements: InputPlusMinusElements

saveValidValue

last valid number

saveValidValue: number

self

self: HTMLInputElement

callbacks

callbacks: Callbacks

Methods

constructor

constructor(initElement: Element | string, settings?: InputPlusMinusSettings, themes?: string[])

changeValue

changeValue(value: number): void

updateConfiguration

updateConfiguration(
    settings: InputPlusMinusSettings,
    themes?: string[],
    fireInput: boolean = false,
    start: boolean = false
): void

next

next(): void

prev

prev(): void

destructor

destructor(): void

Interfaces and types

InputPlusMinusElements

interface InputPlusMinusElements {
  wrapper: Element;
  minus: Element;
  plus: Element;
  grid: Element;
  gridMin: Element;
  gridMax: Element;
}

InputPlusMinusEvents

type InputPlusMinusEvents = 'input' | 'beforeChange' | 'afterChange'

InputPlusMinusSteps

interface InputPlusMinusSteps {
  [key: string]: number;
}

InputPlusMinusGridCompression

interface InputPlusMinusGridCompression {
  text: string;
  compression: number;
  digits: number;
}

Events

• beforeChange
• afterChange

const second = new InputPlusMinus('#second');
const secondInput = document.getElementById('#second');
secondInput.addEventListener(
  'beforeChange_InputPlusMinus',
  (e: InputPlusMinusEventBeforeChange) => {
    const detail = e.detail;
    const current = detail.current;
    console.log('before change', current, detail.next);
  }
);

Callbacks

• beforeChange
• afterChange

add

const example = new InputPlusMinus('#example');
example.callbacks.add(
  'test',
  'beforeChange',
  (data: InputPlusMinusEventDataBeforeChange) => {
    console.log(data);
  }
);

remove

const example = new InputPlusMinus('#example');
example.callbacks.remove(
  'test'
);

Static callbacks

getInstance

InputPlusMinus.getInstance(info: Element | string): InputPlusMinus;

checkInstance

InputPlusMinus.checkInstance(info: HTMLInputElement): boolean;

Compatibility with ie11

Include to your project packages classlist-polyfill and custom-event-polyfill