Angular

Vue

React

Getting Started with NumericTextBox Web Component

Smart UI Web Components work with current evergreen browsers and Node 18+ for local tooling; pin package versions to match your project policy.

Smart UI is distributed as the smart-webcomponents NPM package. You can also use the full download from the Download page.

Quick start

Install the package:
```
npm install smart-webcomponents
```

Load the NumericTextBox module (ES module script):

<script type="module" src="node_modules/smart-webcomponents/source/modules/smart.numerictextbox.js"></script>

Add the default stylesheet (prefer angular.json / bundler entry in app codebases; for plain HTML use a link):

<link rel="stylesheet" type="text/css" href="node_modules/smart-webcomponents/source/styles/smart.default.css" />

Add markup in one of two ways - semantic custom element (the component tag is in your HTML) or a host div (you mount programmatically with appendTo):

Semantic element (id matches the selector in Smart()):
```
<smart-numeric-text-box id="numerictextbox"></smart-numeric-text-box>
```
Host container (id matches appendTo on Smart.NumericTextBox):
```
<div id="numerictextboxContainer"></div>
```

Initialize after the module loads: define a const numerictextboxOptions object, then either bind with Smart('#numerictextbox', ...) on the semantic tag or use new Smart.NumericTextBox({ ...numerictextboxOptions, appendTo: '#numerictextboxContainer' }) on the host div:

<script type="module">
	import 'node_modules/smart-webcomponents/source/modules/smart.numerictextbox.js';

	const numerictextboxOptions = { value: "100" };

	// Option A - semantic <smart-numeric-text-box> with id="numerictextbox"
	Smart('#numerictextbox', class {
		get properties() {
			return numerictextboxOptions;
		}
	});

	// Option B - host div id="numerictextboxContainer"
	// const numerictextboxInstance = new Smart.NumericTextBox({
	// 	...numerictextboxOptions,
	// 	appendTo: '#numerictextboxContainer'
	// });

	// Option C - constructor(selector, options), then append the returned element yourself
	// const myNumericTextBox = new Smart.NumericTextBox('#numerictextbox', numerictextboxOptions);
	// document.body.appendChild(myNumericTextBox);
</script>

Uncomment Option B when you use the host div; use Option A when you use the semantic element. The Runtime cookbook also documents new Smart.NumericTextBox('#numerictextbox', numerictextboxOptions) with appendChild, and document.createElement('smart-numeric-text-box') with .props or Object.assign (all are valid patterns; do not combine overlapping patterns for the same instance unless you intend multiple components).

Serve the folder over HTTP (or use your bundler dev server) and open the page.

Runtime cookbook

Alternative creation patterns and imperative APIs. These are all valid ways to create Smart UI components: semantic markup + Smart(); new Smart.NumericTextBox({ ...options, appendTo: '#...' }); new Smart.NumericTextBox('#numerictextbox', numerictextboxOptions) plus appendChild on the returned element; and document.createElement('smart-numeric-text-box') then assigning options via .props or Object.assign on the element.

Constructor with a selector string and options, then append the returned element (for example const myNumericTextBox = new Smart.NumericTextBox('#numerictextbox', numerictextboxOptions)):

	const numerictextboxOptions = { value: "100" };
	const myNumericTextBox = new Smart.NumericTextBox('#numerictextbox', numerictextboxOptions);
	document.body.appendChild(myNumericTextBox);

Create with document.createElement('smart-numeric-text-box'), assign properties (same as any custom element), then append:

	const numerictextboxOptions = { value: "100" };
	const numerictextbox = document.createElement('smart-numeric-text-box');
	Object.assign(numerictextbox, numerictextboxOptions);
	document.body.appendChild(numerictextbox);

Host on a div with appendTo (import the module, then instantiate when the document is ready; the container id must match appendTo):

	import "../../source/modules/smart.numerictextbox.js";

	document.readyState === 'complete' ? init() : window.addEventListener('load', init);

	function init() {
		const numerictextboxOptions = { value: "100" };
		const numerictextbox = new Smart.NumericTextBox({
			...numerictextboxOptions,
			appendTo: '#numerictextboxContainer'
		});
	}

Appearance

Numeric Text fields allow users to enter and edit any type of numbers. The most basic version of the element is represented by editable input field.

Demo

 <smart-numeric-text-box></smart-numeric-text-box>

Optional elements are :

spin buttons - repeat buttons, shown on left or right side of the text input. They are shown whem spinButtons propsrty is set to true.
radix display - small box, shown on left or right side of the element, displayed current radix type. It's shown whem radixDisplay property is set to true.
dropdown - displayed different radix options and how the value is represented in each of them. Dropdown's appearance is controlled by dropDownEnabled and opened proprties.
unit display - an optional element displayed particular unit description. Controlled by showUnit property.

<smart-numeric-text-box significant-digits="8" radix-display spin-buttons show-unit drop-down-enabled radix="10"></smart-numeric-text-box>

Behavior

Numeric Text Box allows few different types of input. The type is defined in inputFormat property. It can be :

integer - default input format

floatingPoint

<smart-numeric-text-box input-format="floatingPoint"></smart-numeric-text-box>

complex

<smart-numeric-text-box input-format="complex" spin-buttons spin-buttons-position="left"></smart-numeric-text-box>

Additionally to "floatingPoint" and "complex" input formats could be added scientific notation.

                    <smart-numeric-text-box input-format="floatingPoint" scientific-notation ></smart-numeric-text-box>

Demo

Setting precisionDigits determines the number of digits after the decimal point. Applicable when inputFormat is either 'floatingPoint' or 'complex'.

                    <smart-numeric-text-box input-format="floatingPoint" precision-digits="5" ></smart-numeric-text-box>

Demo

Setting significantDigits determining how many significant digits are in a number. Applicable when inputFormat is either 'floatingPoint' or 'complex'. Note that precisionDigits and significantDigits properties are mutually exclusive.

                    <smart-numeric-text-box input-format="floatingPoint" significant-digits="5" ></smart-numeric-text-box>

Demo

Keyboard Support

Arrow Up	Increments the value.
Arrow Down	Decrements the value.

Append to the DOM:

const container = document.getElementById('numerictextbox-container');
container.appendChild(numerictextbox);

Remove from the DOM:

numerictextbox.remove();

Set a property:

numerictextbox.disabled = true;
numerictextbox.theme = 'dark';

Get a property value:

const isDisabled = numerictextbox.disabled;
const currentTheme = numerictextbox.theme;

Invoke a method:

numerictextbox.refresh();
numerictextbox.focus();

Add event listener:

numerictextbox.addEventListener('change', (event) => {
    console.log('change triggered:', event.detail);
});

Remove event listener:

const handleNumericTextBoxEvent = (event) => {
    console.log('change triggered:', event.detail);
};

numerictextbox.addEventListener('change', handleNumericTextBoxEvent);
numerictextbox.removeEventListener('change', handleNumericTextBoxEvent);

Live demos

Supported stacks: Smart UI targets Angular 17+, React 18+, Vue 3+, Node 18 LTS, and evergreen browsers; pin exact package versions to your org policy.