Tank JAVASCRIPT UI Component API

Tank Javascript API

Class

Tank

Tank is a UI Component used in Engineering and Scientific applications. It is broadly used to display the fluid levels.

Properties

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Allowed Values

"none" - animation is disabled
"simple" - ripple animation is disabled
"advanced" - all animations are enabled

Default value

"advanced"

Example

Set the animation property.

 <smart-tank animation='none'></smart-tank>

Set the animation property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.animation = 'simple';

Get the animation property.

 const tank = document.querySelector('smart-tank');

 let animation = tank.animation;

coerceboolean

If is set to true all values coerce to the interval, set in the interval property.

Default value

false

Example

Set the coerce property.

 <smart-tank coerce></smart-tank>

Set the coerce property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.coerce = false;

Get the coerce property.

 const tank = document.querySelector('smart-tank');

 let coerce = tank.coerce;

customIntervalboolean

Sets or gets whether custom ticks at (possibly) uneven interval will be plotted. The ticks to be plotted are defined with the property customTicks.

Default value

false

Example

Set the customInterval property.

 <smart-tank custom-interval></smart-tank>

Set the customInterval property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.customInterval = false;

Get the customInterval property.

 const tank = document.querySelector('smart-tank');

 let customInterval = tank.customInterval;

customTicksnumber[]

If customInterval is enabled, sets a list of ticks to be plotted. If coerce is set to true, the value will snap to these ticks.

Example

Set the customTicks property.

 <smart-tank custom-ticks='[100, 200, 1000, 8000, 10000]'></smart-tank>

Set the customTicks property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.customTicks = [1, 3, 5, 8];

Get the customTicks property.

 const tank = document.querySelector('smart-tank');

 let customTicks = tank.customTicks;

dateLabelFormatStringstring

Sets or gets the pattern which labels are displayed in when mode is 'date'.

Default value

"d"

Example

Set the dateLabelFormatString property.

 <smart-tank date-label-format-string='dddd-MMMM-yyyy'></smart-tank>

Set the dateLabelFormatString property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.dateLabelFormatString = 'FP';

Get the dateLabelFormatString property.

 const tank = document.querySelector('smart-tank');

 let dateLabelFormatString = tank.dateLabelFormatString;

decimalSeparatorstring

Sets or gets the char to use as the decimal separator in numeric values.

Default value

"".""

Example

Set the decimalSeparator property.

 <smart-tank decimal-separator=','></smart-tank>

Set the decimalSeparator property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.decimalSeparator = '.';

Get the decimalSeparator property.

 const tank = document.querySelector('smart-tank');

 let decimalSeparator = tank.decimalSeparator;

disabledboolean

Enables or disables the widget.

Default value

false

Example

Set the disabled property.

 <smart-tank disabled></smart-tank>

Set the disabled property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.disabled = false;

Get the disabled property.

 const tank = document.querySelector('smart-tank');

 let disabled = tank.disabled;

intervalstring | number

When cooerce property is true, all values coerce to the interval's value.

Default value

Example

Set the interval property.

 <smart-tank interval='2'></smart-tank>

Set the interval property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.interval = 10;

Get the interval property.

 const tank = document.querySelector('smart-tank');

 let interval = tank.interval;

invertedboolean

Sets the direction of the tank. If is true - positions of the tank's begin and end are changed.

Default value

false

Example

Set the inverted property.

 <smart-tank inverted></smart-tank>

Set the inverted property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.inverted = false;

Get the inverted property.

 const tank = document.querySelector('smart-tank');

 let inverted = tank.inverted;

labelFormatFunctionfunction | null

A callback function that can be used to format the values displayed on the tank labels.

Example

Set the labelFormatFunction property.

 <smart-tank label-format-function='function (value) { return value + '%'; }'></smart-tank>

Set the labelFormatFunction property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.labelFormatFunction = function (value) { return value + '$'; };

Get the labelFormatFunction property.

 const tank = document.querySelector('smart-tank');

 let labelFormatFunction = tank.labelFormatFunction;

labelsVisibility"all" | "endPoints" | "none"

Sets or gets the widget's label visibility

Default value

"all"

Example

Set the labelsVisibility property.

 <smart-tank labels-visibility='endPoints'></smart-tank>

Set the labelsVisibility property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.labelsVisibility = 'none';

Get the labelsVisibility property.

 const tank = document.querySelector('smart-tank');

 let labelsVisibility = tank.labelsVisibility;

localestring

Sets or gets the locale. Used in conjunction with the property messages.

Default value

"en"

Example

Set the locale property.

 <smart-tank locale='de'></smart-tank>

Set the locale property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.locale = 'fr';

Get the locale property.

 const tank = document.querySelector('smart-tank');

 let locale = tank.locale;

localizeFormatFunctionfunction | null

Callback, related to localization module.

Example

Set the localizeFormatFunction property.

 <smart-tank localize-format-function='function(){return '...'}'></smart-tank>

Set the localizeFormatFunction property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.localizeFormatFunction = function(){return '...'};

Get the localizeFormatFunction property.

 const tank = document.querySelector('smart-tank');

 let localizeFormatFunction = tank.localizeFormatFunction;

logarithmicScaleboolean

Enables or disables the usage of logarithmic scale in the widget.

Default value

false

Example

Set the logarithmicScale property.

 <smart-tank logarithmic-scale></smart-tank>

Set the logarithmicScale property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.logarithmicScale = false;

Get the logarithmicScale property.

 const tank = document.querySelector('smart-tank');

 let logarithmicScale = tank.logarithmicScale;

maxstring | number

Sets or gets the maximum value of the widget.

Default value

100

Example

Set the max property.

 <smart-tank max='20'></smart-tank>

Set the max property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.max = 50;

Get the max property.

 const tank = document.querySelector('smart-tank');

 let max = tank.max;

mechanicalAction"switchUntilReleased" | "switchWhenReleased" | "switchWhileDragging"

Sets or gets the type of used mechanical action.

Default value

"switchWhileDragging"

Example

Set the mechanicalAction property.

 <smart-tank mechanical-action='switchWhenReleased'></smart-tank>

Set the mechanicalAction property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.mechanicalAction = 'switchUntilReleased';

Get the mechanicalAction property.

 const tank = document.querySelector('smart-tank');

 let mechanicalAction = tank.mechanicalAction;

messagesobject

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

Default value

"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",

"significantPrecisionDigits": "{{elementType}}: the properties significantDigits and precisionDigits cannot be set at the same time.",

"invalidMinOrMax": "{{elementType}}: Invalid {{property}} value. Max cannot be lower than Min.",

"noInteger": "{{elementType}}: precisionDigits could be set only on \"floatingPoint\" scaleType."

}

Example

Set the messages property.

 <smart-tank messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss.","significantPrecisionDigits":"{{elementType}}: Die Eigenschaften significantDigits und precisionDigits konnen nicht gleichzeitig eingestellt werden.","invalidMinOrMax":"{{elementType}}: Ungultiger Wert {{property}} Max kann nicht niedriger sein als Min.","noInteger":"{{elementType}}: precisionDigits konnte nur fur \"floatingPoint\" scaleType festgelegt werden."}}'></smart-tank>

Set the messages property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.","significantPrecisionDigits":"{{elementType}}: the properties significantDigits and precisionDigits cannot be set at the same time.","invalidMinOrMax":"{{elementType}}: Invalid {{property}} value. Max cannot be lower than Min.","noInteger":"{{elementType}}: precisionDigits could be set only on \"floatingPoint\" scaleType."}};

Get the messages property.

 const tank = document.querySelector('smart-tank');

 let messages = tank.messages;

minstring | number

Sets or gets the minimum value of the widget.

Default value

Example

Set the min property.

 <smart-tank min='20'></smart-tank>

Set the min property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.min = 50;

Get the min property.

 const tank = document.querySelector('smart-tank');

 let min = tank.min;

mode"numeric" | "date"

Sets or gets whether the widget works with numbers or dates.

Default value

"numeric"

Example

Set the mode property.

 <smart-tank mode='date'></smart-tank>

Set the mode property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.mode = 'numeric';

Get the mode property.

 const tank = document.querySelector('smart-tank');

 let mode = tank.mode;

namestring

Sets or gets the element's name, which is used as a reference when the data is submitted.

Default value

Example

Set the name property.

 <smart-tank name='tank1'></smart-tank>

Set the name property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.name = 'tank2';

Get the name property.

 const tank = document.querySelector('smart-tank');

 let name = tank.name;

orientation"horizontal" | "vertical"

Sets the orientation of the widget

Default value

"vertical"

Example

Set the orientation property.

 <smart-tank orientation='vertical'></smart-tank>

Set the orientation property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.orientation = 'horizontal';

Get the orientation property.

 const tank = document.querySelector('smart-tank');

 let orientation = tank.orientation;

precisionDigitsnumber

Determines the number of digits after the decimal point. Applicable only when scaleType is 'integer'.

Example

Set the precisionDigits property.

 <smart-tank precision-digits='5'></smart-tank>

Set the precisionDigits property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.precisionDigits = 6;

Get the precisionDigits property.

 const tank = document.querySelector('smart-tank');

 let precisionDigits = tank.precisionDigits;

readonlyboolean

If the widgets is readonly, the users cannot iteract with the element.

Default value

false

Example

Set the readonly property.

 <smart-tank readonly></smart-tank>

Set the readonly property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.readonly = true;

Get the readonly property.

 const tank = document.querySelector('smart-tank');

 let readonly = tank.readonly;

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false

Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property.

 <smart-tank right-to-left></smart-tank>

Set the rightToLeft property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.rightToLeft = true;

Get the rightToLeft property.

 const tank = document.querySelector('smart-tank');

 let rightToLeft = tank.rightToLeft;

scalePosition"near" | "far" | "both" | "none"

Sets the position of the widget's scales.

Default value

"near"

Example

Set the scalePosition property.

 <smart-tank scale-position='far'></smart-tank>

Set the scalePosition property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.scalePosition = 'both';

Get the scalePosition property.

 const tank = document.querySelector('smart-tank');

 let scalePosition = tank.scalePosition;

scaleType"floatingPoint" | "integer"

Sets the type of the tank's scale.

Default value

"floatingPoint"

Example

Set the scaleType property.

 <smart-tank scale-type='integer'></smart-tank>

Set the scaleType property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.scaleType = 'floatingPoint';

Get the scaleType property.

 const tank = document.querySelector('smart-tank');

 let scaleType = tank.scaleType;

scientificNotationboolean

Enables or disables scientific notation.

Default value

false

Example

Set the scientificNotation property.

 <smart-tank scientific-notation></smart-tank>

Set the scientificNotation property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.scientificNotation = true;

Get the scientificNotation property.

 const tank = document.querySelector('smart-tank');

 let scientificNotation = tank.scientificNotation;

showThumbLabelboolean

Enables or disables displaying of the thumb label.

Default value

false

Example

Set the showThumbLabel property.

 <smart-tank show-thumb-label></smart-tank>

Set the showThumbLabel property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.showThumbLabel = true;

Get the showThumbLabel property.

 const tank = document.querySelector('smart-tank');

 let showThumbLabel = tank.showThumbLabel;

showTooltipboolean

Enables or disables displaying of the tooltip.

Default value

false

Example

Set the showTooltip property.

 <smart-tank show-tooltip></smart-tank>

Set the showTooltip property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.showTooltip = true;

Get the showTooltip property.

 const tank = document.querySelector('smart-tank');

 let showTooltip = tank.showTooltip;

showUnitboolean

Enables or disables displaying of the units.

Default value

false

Example

Set the showUnit property.

 <smart-tank show-unit></smart-tank>

Set the showUnit property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.showUnit = false;

Get the showUnit property.

 const tank = document.querySelector('smart-tank');

 let showUnit = tank.showUnit;

significantDigitsnumber

Determining how many significant digits are in a number. Applicable only when scaleType is 'integer'.

Default value

Example

Set the significantDigits property.

 <smart-tank significant-digits='1'></smart-tank>

Set the significantDigits property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.significantDigits = 2;

Get the significantDigits property.

 const tank = document.querySelector('smart-tank');

 let significantDigits = tank.significantDigits;

themestring

Sets or gets the element's visual theme.

Default value

Example

Set the theme property.

 <smart-tank theme='material'></smart-tank>

Set the theme property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.theme = 'material-purple';

Get the theme property.

 const tank = document.querySelector('smart-tank');

 let theme = tank.theme;

thumbLabelPosition"near" | "far"

Sets or gets the position of the thumb label.

Default value

"near"

Example

Set the thumbLabelPosition property.

 <smart-tank thumb-label-position='far'></smart-tank>

Set the thumbLabelPosition property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.thumbLabelPosition = 'near';

Get the thumbLabelPosition property.

 const tank = document.querySelector('smart-tank');

 let thumbLabelPosition = tank.thumbLabelPosition;

ticksPosition"scale" | "track"

Sets or gets the position of the ticks in smartTank widget.

Default value

"scale"

Example

Set the ticksPosition property.

 <smart-tank ticks-position='track'></smart-tank>

Set the ticksPosition property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.ticksPosition = 'scale';

Get the ticksPosition property.

 const tank = document.querySelector('smart-tank');

 let ticksPosition = tank.ticksPosition;

ticksVisibility"major" | "minor" | "none"

Sets or gets the visibility of the ticks.

Default value

"minor"

Example

Set the ticksVisibility property.

 <smart-tank ticks-visibility='major'></smart-tank>

Set the ticksVisibility property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.ticksVisibility = 'none';

Get the ticksVisibility property.

 const tank = document.querySelector('smart-tank');

 let ticksVisibility = tank.ticksVisibility;

tooltipPosition"near" | "far"

Sets or gets the position of the tooltip in smartTank widget.

Default value

"near"

Example

Set the tooltipPosition property.

 <smart-tank tooltip-position='far'></smart-tank>

Set the tooltipPosition property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.tooltipPosition = 'near';

Get the tooltipPosition property.

 const tank = document.querySelector('smart-tank');

 let tooltipPosition = tank.tooltipPosition;

unfocusableboolean

Sets or gets if the element can be focused.

Default value

false

Example

Set the unfocusable property.

 <smart-tank unfocusable></smart-tank>

Set the unfocusable property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.unfocusable = false;

Get the unfocusable property.

 const tank = document.querySelector('smart-tank');

 let unfocusable = tank.unfocusable;

unitstring

Sets or gets the name of unit used in smartTank widget.

Default value

"kg"

Example

Set the unit property.

 <smart-tank unit='mm'></smart-tank>

Set the unit property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.unit = 'cm';

Get the unit property.

 const tank = document.querySelector('smart-tank');

 let unit = tank.unit;

validation"strict" | "interaction"

Sets the value's validation by min/max. If 'strict' is applied, the value is always validated by min and max. If 'interaction' is applied, programmatic value changes are not coerced to min/max and if min/max are changed, resulting in the current value being out of range, the value is not coerced, and no change event is fired.

Default value

"strict"

Example

Set the validation property.

 <smart-tank validation='left'></smart-tank>

Set the validation property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.validation = 'right';

Get the validation property.

 const tank = document.querySelector('smart-tank');

 let validation = tank.validation;

valueany

Sets or gets the value of the smartTank widget.

Default value

Example

Set the value property.

 <smart-tank value='50'></smart-tank>

Set the value property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.value = 100;

Get the value property.

 const tank = document.querySelector('smart-tank');

 let value = tank.value;

wordLength"int8" | "uint8" | "int16" | "uint16" | "int32" | "uint32" | "int64" | "uint64"

Sets or gets the word length. Applicable only when scaleType is 'integer'.

Default value

"int32"

Example

Set the wordLength property.

 <smart-tank word-length='int8'></smart-tank>

Set the wordLength property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.wordLength = 'int16';

Get the wordLength property.

 const tank = document.querySelector('smart-tank');

 let wordLength = tank.wordLength;

Events

changeCustomEvent

This event is triggered when the value of the tank is changed.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onChange

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of change event.

const tank = document.querySelector('smart-tank');
tank.addEventListener('change', function (event) {
	// event handling code goes here.
})

Methods

focus(): void

Focuses the tank.

Invoke the focus method.

const tank = document.querySelector('smart-tank');
tank.focus();

getOptimalSize(): object

Gets the optimal size of the widget.

Returnsobject

Invoke the getOptimalSize method.

const tank = document.querySelector('smart-tank');
const result = tank.getOptimalSize();

val( value?: string | number): string

Get/set the value of the tank.

Arguments

value?string | number

The value to be set. If no parameter is passed, returns the displayed value of the tank.

Returnsstring

Invoke the val method.

const tank = document.querySelector('smart-tank');
const result = tank.val("10");

CSS Variables

--smart-tank-default-widthvar()

Default value

"var(--smart-editor-width)"

smartTank default width

--smart-tank-default-heightvar()

Default value

"calc(10 * var(--smart-editor-height))"

smartTank default height

--smart-tank-scale-sizevar()

Default value

"105px"

smartTank scale size

--smart-tank-thumb-widthvar()

Default value

"25px"

smartTank thumb width

--smart-tank-thumb-heightvar()

Default value

"var(--smart-tank-thumb-width)"

smartTank thumb height

Default value

"80px"

smartTank tooltip width

Default value

"30px"

smartTank thumb height

--smart-tank-tick-sizevar()

Default value

"10px"

smartTank tick size. Horizontal Tank tick height = Vertical Tank tick width.

--smart-tank-minor-tick-sizevar()

Default value

"5px"

smartTank minor tick size.

--smart-tank-minimum-track-sizevar()

Default value

"6px"

smartTank horizontal track min-height, vertical track min-width