smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
722 lines (714 loc) • 40.2 kB
JavaScript
if(typeof window !== 'undefined') {
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
}
import './../source/modules/smart.tank';
import { __awaiter } from 'tslib';
import * as i0 from '@angular/core';
import { EventEmitter, Directive, Output, Input, forwardRef, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
class BaseElement {
constructor(ref) {
this.onCreate = new EventEmitter();
this.onReady = new EventEmitter();
this.onAttach = new EventEmitter();
this.onDetach = new EventEmitter();
const that = this;
this.nativeElement = ref.nativeElement;
that.nativeElement.onAttached = () => {
that.onAttach.emit(that.nativeElement);
};
that.nativeElement.onDetached = () => {
that.onDetach.emit(that.nativeElement);
};
}
addEventListener(type, listener, options = false) {
this.nativeElement.addEventListener(type, listener, options);
}
removeEventListener(type, listener, options = false) {
this.nativeElement.removeEventListener(type, listener, options);
}
dispatchEvent(event) {
return this.nativeElement.dispatchEvent(event);
}
blur() {
this.nativeElement.blur();
}
click() {
this.nativeElement.click();
}
focus(options) {
this.nativeElement.focus(options);
}
/** @description Sets or gets the license. */
get license() {
return this.nativeElement ? this.nativeElement.license : undefined;
}
set license(value) {
this.nativeElement ? this.nativeElement.license = value : undefined;
}
/** @description Sets or gets the language. Used in conjunction with the property messages. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Determines the theme. Theme defines the look of the element */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
}
BaseElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
BaseElement.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: BaseElement, inputs: { license: "license", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", rightToLeft: "rightToLeft", theme: "theme" }, outputs: { onCreate: "onCreate", onReady: "onReady", onAttach: "onAttach", onDetach: "onDetach" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onCreate: [{
type: Output
}], onReady: [{
type: Output
}], onAttach: [{
type: Output
}], onDetach: [{
type: Output
}], license: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], messages: [{
type: Input
}], rightToLeft: [{
type: Input
}], theme: [{
type: Input
}] } });
let Smart;
if (typeof window !== "undefined") {
Smart = window.Smart;
}
const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TankComponent),
multi: true
};
class TankComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
/**
* @description
* The registered callback function called when a change event occurs on the form elements.
*/
this._onChange = () => { };
/**
* @description
* The registered callback function called when a blur event occurs on the form elements.
*/
this._onTouched = () => { };
/** @description This event is triggered whenever the tank’s value is updated, whether through user interaction or programmatic changes. It allows listeners to respond immediately to any modification in the tank’s current state.
* @param event. The custom event. */
this.onChange = new EventEmitter();
this._initialChange = true;
this.nativeElement = ref.nativeElement;
}
/** @description Creates the component on demand.
* @param properties An optional object of properties, which will be added to the template binded ones.
*/
createComponent(properties = {}) {
this.nativeElement = document.createElement('smart-tank');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description Controls the animation mode by setting or retrieving its current state. When set to 'none', all animations are disabled and transitions will not occur. Use this property to enable, disable, or modify animation behavior according to your application's requirements. */
get animation() {
return this.nativeElement ? this.nativeElement.animation : undefined;
}
set animation(value) {
this.nativeElement ? this.nativeElement.animation = value : undefined;
}
/** @description When set to true, all values will be automatically adjusted (coerced) to fit within the range specified by the interval property. This ensures that any value outside the defined interval is converted to the nearest valid value within that range. */
get coerce() {
return this.nativeElement ? this.nativeElement.coerce : undefined;
}
set coerce(value) {
this.nativeElement ? this.nativeElement.coerce = value : undefined;
}
/** @description Controls whether custom tick marks, which may be spaced at uneven intervals, are displayed on the axis. The specific positions of these ticks are specified using the customTicks property. This option can be used to enable or disable the rendering of these custom-defined ticks. */
get customInterval() {
return this.nativeElement ? this.nativeElement.customInterval : undefined;
}
set customInterval(value) {
this.nativeElement ? this.nativeElement.customInterval = value : undefined;
}
/** @description If customInterval is enabled, this option provides a specific list of tick values to display on the plot's axis, overriding any automatically calculated intervals. When coerce is set to true, user inputs or plotted values will automatically adjust (or "snap") to the nearest tick in this list, ensuring all values align precisely with one of the specified ticks. */
get customTicks() {
return this.nativeElement ? this.nativeElement.customTicks : undefined;
}
set customTicks(value) {
this.nativeElement ? this.nativeElement.customTicks = value : undefined;
}
/** @description Specifies or retrieves the pattern used to format labels when the mode property is set to 'date'. This pattern determines how date labels are displayed to the user (for example, "MM/DD/YYYY" or "dd MMM, yyyy"). */
get dateLabelFormatString() {
return this.nativeElement ? this.nativeElement.dateLabelFormatString : undefined;
}
set dateLabelFormatString(value) {
this.nativeElement ? this.nativeElement.dateLabelFormatString = value : undefined;
}
/** @description Specifies or retrieves the character used as the decimal separator in numeric values. This determines how decimal points are displayed when formatting or parsing numbers (e.g., use "." for 12.34 or "," for 12,34, depending on locale or formatting requirements). */
get decimalSeparator() {
return this.nativeElement ? this.nativeElement.decimalSeparator : undefined;
}
set decimalSeparator(value) {
this.nativeElement ? this.nativeElement.decimalSeparator = value : undefined;
}
/** @description Determines whether the widget is active and visible to users. When enabled, the widget functions normally and is displayed in the user interface; when disabled, the widget is hidden or inactive, preventing user interaction. */
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
this.nativeElement ? this.nativeElement.disabled = value : undefined;
}
/** @description When the 'coerce' property is set to 'true', any input values that fall outside the specified interval will be automatically adjusted ("coerced") to the nearest boundary value of the interval. This ensures that all resulting values strictly adhere to the defined range, preventing any out-of-bounds input. */
get interval() {
return this.nativeElement ? this.nativeElement.interval : undefined;
}
set interval(value) {
this.nativeElement ? this.nativeElement.interval = value : undefined;
}
/** @description Defines the orientation of the tank. When set to true, the positions of the tank's front and rear are swapped, effectively reversing its direction. */
get inverted() {
return this.nativeElement ? this.nativeElement.inverted : undefined;
}
set inverted(value) {
this.nativeElement ? this.nativeElement.inverted = value : undefined;
}
/** @description A user-defined callback function that formats the values shown on the tank labels before they are displayed. This function receives the raw value as an argument and should return the formatted string to be rendered on the label, allowing for custom display logic such as unit conversion, number formatting, or localization. */
get labelFormatFunction() {
return this.nativeElement ? this.nativeElement.labelFormatFunction : undefined;
}
set labelFormatFunction(value) {
this.nativeElement ? this.nativeElement.labelFormatFunction = value : undefined;
}
/** @description Controls the visibility of the widget's label. When set, this property determines whether the label is displayed or hidden. When retrieved, it indicates the current visibility state of the label. */
get labelsVisibility() {
return this.nativeElement ? this.nativeElement.labelsVisibility : undefined;
}
set labelsVisibility(value) {
this.nativeElement ? this.nativeElement.labelsVisibility = value : undefined;
}
/** @description Retrieves or assigns the unlockKey property, which serves as a security token or code required to activate and access the product's full functionality. */
get unlockKey() {
return this.nativeElement ? this.nativeElement.unlockKey : undefined;
}
set unlockKey(value) {
this.nativeElement ? this.nativeElement.unlockKey = value : undefined;
}
/** @description Specifies the current locale for the application. This property determines language and regional formatting, and works together with the messages property to provide appropriate translations and locale-specific content. Use this property to get or set the active locale for displaying messages and other localized resources. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback function associated with the localization module. This callback is triggered during localization operations, such as language selection, translation processing, or locale updates, to handle custom logic or respond to localization events within the application. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Determines whether the widget displays data using a logarithmic scale. When enabled, values are plotted on a logarithmic scale instead of a linear scale, which can help visualize data with a wide range of values. When disabled, the widget uses a standard linear scale. */
get logarithmicScale() {
return this.nativeElement ? this.nativeElement.logarithmicScale : undefined;
}
set logarithmicScale(value) {
this.nativeElement ? this.nativeElement.logarithmicScale = value : undefined;
}
/** @description Gets or sets the maximum allowable value for the widget, defining the upper limit that users can select or enter. */
get max() {
return this.nativeElement ? this.nativeElement.max : undefined;
}
set max(value) {
this.nativeElement ? this.nativeElement.max = value : undefined;
}
/** @description Defines or retrieves the specific type of mechanical action being applied. This property allows you to specify what kind of mechanical action to use (such as momentary, toggle, or latching), or to query the current mechanical action configuration. */
get mechanicalAction() {
return this.nativeElement ? this.nativeElement.mechanicalAction : undefined;
}
set mechanicalAction(value) {
this.nativeElement ? this.nativeElement.mechanicalAction = value : undefined;
}
/** @description Defines or retrieves an object containing the localizable text strings used throughout the widget interface. This property allows you to customize the widget’s displayed messages for different languages and regions. It is typically used together with the locale property to support internationalization and provide translations based on the user’s locale settings. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Defines or retrieves the minimum allowable value for the widget. When setting this property, it restricts user input so that values below the specified minimum are not permitted. When getting this property, it returns the current minimum value constraint of the widget. */
get min() {
return this.nativeElement ? this.nativeElement.min : undefined;
}
set min(value) {
this.nativeElement ? this.nativeElement.min = value : undefined;
}
/** @description Determines whether the widget processes and displays numeric values or date values. This property can be set to configure the expected data type (numbers or dates), and can also be accessed to check the current mode of the widget. */
get mode() {
return this.nativeElement ? this.nativeElement.mode : undefined;
}
set mode(value) {
this.nativeElement ? this.nativeElement.mode = value : undefined;
}
/** @description Defines or retrieves the element's name attribute. This name uniquely identifies the element within a form and is used as the key when the form data is submitted to the server, allowing the associated value to be referenced and processed. */
get name() {
return this.nativeElement ? this.nativeElement.name : undefined;
}
set name(value) {
this.nativeElement ? this.nativeElement.name = value : undefined;
}
/** @description Specifies the layout direction of the widget, determining whether its content is arranged horizontally, vertically, or in another supported orientation. */
get orientation() {
return this.nativeElement ? this.nativeElement.orientation : undefined;
}
set orientation(value) {
this.nativeElement ? this.nativeElement.orientation = value : undefined;
}
/** @description Specifies the number of digits to display after the decimal point in numeric values. This setting is only applicable when scaleType is set to 'integer'. */
get precisionDigits() {
return this.nativeElement ? this.nativeElement.precisionDigits : undefined;
}
set precisionDigits(value) {
this.nativeElement ? this.nativeElement.precisionDigits = value : undefined;
}
/** @description If the widget is set to read-only, users will not be able to interact with or modify the element's content. Any input or actions from users will be disabled, ensuring that the widget's state remains unchanged. */
get readonly() {
return this.nativeElement ? this.nativeElement.readonly : undefined;
}
set readonly(value) {
this.nativeElement ? this.nativeElement.readonly = value : undefined;
}
/** @description Gets or sets a value that specifies whether the element’s content is aligned to accommodate right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element’s alignment and text direction are adjusted for proper display in RTL locales. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Specifies the placement of the widget’s scales relative to its main content, determining where the scale markers or labels appear within the widget interface (e.g., top, bottom, left, or right). */
get scalePosition() {
return this.nativeElement ? this.nativeElement.scalePosition : undefined;
}
set scalePosition(value) {
this.nativeElement ? this.nativeElement.scalePosition = value : undefined;
}
/** @description Specifies the measurement system used for the tank's scale, such as linear, logarithmic, or custom, which determines how values are displayed and interpreted on the tank's indicator. */
get scaleType() {
return this.nativeElement ? this.nativeElement.scaleType : undefined;
}
set scaleType(value) {
this.nativeElement ? this.nativeElement.scaleType = value : undefined;
}
/** @description Determines whether numerical values are displayed using scientific notation (e.g., 1.23e+6 instead of 1230000). Set to true to enable scientific notation, or false to display numbers in standard decimal format. */
get scientificNotation() {
return this.nativeElement ? this.nativeElement.scientificNotation : undefined;
}
set scientificNotation(value) {
this.nativeElement ? this.nativeElement.scientificNotation = value : undefined;
}
/** @description Controls whether the thumb label is visible or hidden. When enabled, the thumb label will be displayed alongside the slider's handle, providing users with a visual indicator of the current value. When disabled, the thumb label will not appear. */
get showThumbLabel() {
return this.nativeElement ? this.nativeElement.showThumbLabel : undefined;
}
set showThumbLabel(value) {
this.nativeElement ? this.nativeElement.showThumbLabel = value : undefined;
}
/** @description Controls whether the tooltip is visible to the user. When enabled, the tooltip will be displayed; when disabled, the tooltip will be hidden. */
get showTooltip() {
return this.nativeElement ? this.nativeElement.showTooltip : undefined;
}
set showTooltip(value) {
this.nativeElement ? this.nativeElement.showTooltip = value : undefined;
}
/** @description Controls whether unit labels (such as "kg", "cm", "°C") are shown alongside values. Set to true to display units next to values, or false to hide them. */
get showUnit() {
return this.nativeElement ? this.nativeElement.showUnit : undefined;
}
set showUnit(value) {
this.nativeElement ? this.nativeElement.showUnit = value : undefined;
}
/** @description Calculates the number of significant digits present in a given number. This process is only relevant and performed when the scaleType property is set to 'integer'. This property should be used to ensure numerical data integrity and appropriate formatting for integer-based values. */
get significantDigits() {
return this.nativeElement ? this.nativeElement.significantDigits : undefined;
}
set significantDigits(value) {
this.nativeElement ? this.nativeElement.significantDigits = value : undefined;
}
/** @description Sets or retrieves the visual theme applied to the element, determining its overall appearance such as color scheme, typography, and style variants. This property allows dynamic customization of the element’s look to match different design requirements or user preferences. */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
/** @description Sets or retrieves the current position of the thumb label, typically representing the value indicator on a slider or range input. This property allows you to programmatically control or access the exact location of the label relative to the slider track. */
get thumbLabelPosition() {
return this.nativeElement ? this.nativeElement.thumbLabelPosition : undefined;
}
set thumbLabelPosition(value) {
this.nativeElement ? this.nativeElement.thumbLabelPosition = value : undefined;
}
/** @description Defines or retrieves the placement of the tick marks in the jqxTank widget, specifying where the ticks are displayed relative to the tank (e.g., near, far, or both sides). This property allows you to control the visual positioning of the tick indicators along the scale of the jqxTank widget. */
get ticksPosition() {
return this.nativeElement ? this.nativeElement.ticksPosition : undefined;
}
set ticksPosition(value) {
this.nativeElement ? this.nativeElement.ticksPosition = value : undefined;
}
/** @description Controls whether the ticks are visible or hidden. This property allows you to enable (show) or disable (hide) the display of tick marks on the relevant component. When set, it determines if ticks are rendered; when accessed, it returns the current visibility state of the ticks. */
get ticksVisibility() {
return this.nativeElement ? this.nativeElement.ticksVisibility : undefined;
}
set ticksVisibility(value) {
this.nativeElement ? this.nativeElement.ticksVisibility = value : undefined;
}
/** @description Specifies or retrieves the position of the tooltip displayed on the jqxTank widget. This property determines where the tooltip appears relative to the tank control (e.g., top, bottom, left, or right). Use this option to customize the tooltip's placement for improved user experience and interface alignment. */
get tooltipPosition() {
return this.nativeElement ? this.nativeElement.tooltipPosition : undefined;
}
set tooltipPosition(value) {
this.nativeElement ? this.nativeElement.tooltipPosition = value : undefined;
}
/** @description Determines whether the element is focusable by setting or retrieving its ability to receive keyboard or mouse focus. If set to true, the element can be targeted by user interactions such as tab navigation or clicking. */
get unfocusable() {
return this.nativeElement ? this.nativeElement.unfocusable : undefined;
}
set unfocusable(value) {
this.nativeElement ? this.nativeElement.unfocusable = value : undefined;
}
/** @description Specifies or retrieves the unit label displayed on the jqxTank widget, indicating the measurement unit (e.g., "°C", "kg", "psi") associated with the tank's value. This property allows you to customize the text that appears alongside the value in the widget for better context and readability. */
get unit() {
return this.nativeElement ? this.nativeElement.unit : undefined;
}
set unit(value) {
this.nativeElement ? this.nativeElement.unit = value : undefined;
}
/** @description Enhances value validation using minimum and maximum boundaries. - When set to 'strict', all values—whether changed by user interaction or programmatically—are always constrained within the defined min and max limits. Any attempt to set a value outside this range will automatically adjust (coerce) it to the closest valid boundary.- When set to 'interaction', only values changed by user interaction (such as form input) are validated against min and max. Programmatic updates can set values outside this range, and if the min or max properties are later adjusted such that the current value falls out of bounds, the existing value remains unchanged and is not coerced. In these cases, no change event is triggered. */
get validation() {
return this.nativeElement ? this.nativeElement.validation : undefined;
}
set validation(value) {
this.nativeElement ? this.nativeElement.validation = value : undefined;
}
/** @description Gets the current value of the jqxTank widget or sets it to a specified value. This property or method enables you to retrieve the widget's current position (value) or assign a new value programmatically, allowing for dynamic interaction and control over the jqxTank component. */
get value() {
return this.nativeElement ? this.nativeElement.value : undefined;
}
set value(value) {
this.nativeElement ? this.nativeElement.value = value : undefined;
}
/** @description Specifies or retrieves the word length used for numeric representation. This property is relevant only when the scaleType is set to 'integer'. In such cases, it determines the number of bits allocated for each integer value. For other scaleType values, this setting has no effect. */
get wordLength() {
return this.nativeElement ? this.nativeElement.wordLength : undefined;
}
set wordLength(value) {
this.nativeElement ? this.nativeElement.wordLength = value : undefined;
}
/** @description Locks the keyboard and mouse input exclusively on the tank component, ensuring that all user interactions are directed to the tank (such as movement and firing controls) while disabling interactions with other interface elements.
*/
focus() {
if (this.nativeElement.isRendered) {
this.nativeElement.focus();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.focus();
});
}
}
/** @description Retrieves the recommended dimensions (width and height) for the widget based on its content and layout constraints, ensuring optimal display and usability.
* @returns {any}
*/
getOptimalSize() {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.getOptimalSize();
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
getOptimalSizeSync() {
if (this.nativeElement.isRendered) {
return this.nativeElement.getOptimalSize();
}
return null;
}
/** @description Retrieves or updates the current value stored in the tank. Use this property to access the tank’s value (such as its level, volume, or contents) or to assign a new value to it.
* @param {string | number} value?. The value to be set. If no parameter is passed, returns the displayed value of the tank.
* @returns {string}
*/
val(value) {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.val(value);
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
valSync(value) {
if (this.nativeElement.isRendered) {
return this.nativeElement.val(value);
}
return null;
}
get isRendered() {
return this.nativeElement ? this.nativeElement.isRendered : false;
}
ngOnInit() {
}
ngAfterViewInit() {
const that = this;
that.onCreate.emit(that.nativeElement);
if (Smart)
Smart.Render();
this.nativeElement.classList.add('smart-angular');
if (this.nativeElement.whenRendered)
this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });
this.listen();
}
ngOnDestroy() {
this.unlisten();
}
get ngValue() {
if (!this.nativeElement) {
return null;
}
const value = this.nativeElement.value;
return value;
}
set ngValue(value) {
if (this.nativeElement) {
this.writeValue(value);
}
}
writeValue(value) {
const that = this;
const normalizedValue = value == null ? '' : value;
that.nativeElement.whenRendered(() => {
that.value = normalizedValue;
if (that._initialChange === false) {
that._onChange(that.value);
}
});
}
registerOnChange(fn) {
this._onChange = fn;
}
registerOnTouched(fn) {
this._onTouched = fn;
}
ngOnChanges(changes) {
if (this.nativeElement && this.nativeElement.isRendered) {
for (const propName in changes) {
if (changes.hasOwnProperty(propName)) {
this.nativeElement[propName] = changes[propName].currentValue;
}
}
}
}
/** @description Add event listeners. */
listen() {
const that = this;
that.eventHandlers['changeHandler'] = (event) => { that.onChange.emit(event); };
that.nativeElement.addEventListener('change', that.eventHandlers['changeHandler']);
that.eventHandlers['changeModelHandler'] = (event) => {
that._initialChange = false;
that._onChange(that.nativeElement.value);
};
that.eventHandlers['blurModelHandler'] = (event) => {
that._onTouched();
};
that.nativeElement.whenRendered(() => {
if (that.nativeElement.querySelector('input')) {
that.eventHandlers['keyupModelHandler'] = (event) => {
setTimeout(() => { that.eventHandlers['changeModelHandler'](event); }, 50);
};
that.nativeElement.querySelector('input').addEventListener('keyup', that.eventHandlers['keyupModelHandler']);
}
});
that.nativeElement.addEventListener('change', that.eventHandlers['changeModelHandler']);
that.nativeElement.addEventListener('blur', that.eventHandlers['blurModelHandler']);
}
/** @description Remove event listeners. */
unlisten() {
const that = this;
if (that.eventHandlers['changeHandler']) {
that.nativeElement.removeEventListener('change', that.eventHandlers['changeHandler']);
}
if (that.eventHandlers['changeModelHandler']) {
that.nativeElement.removeEventListener('change', that.eventHandlers['changeModelHandler']);
if (that.nativeElement.querySelector('input')) {
that.nativeElement.querySelector('input').removeEventListener('keyup', that.eventHandlers['keyupModelHandler']);
}
}
if (that.eventHandlers['blurModelHandler']) {
that.nativeElement.removeEventListener('blur', that.eventHandlers['blurModelHandler']);
}
}
}
TankComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TankComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
TankComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: TankComponent, selector: "smart-tank, [smart-tank]", inputs: { animation: "animation", coerce: "coerce", customInterval: "customInterval", customTicks: "customTicks", dateLabelFormatString: "dateLabelFormatString", decimalSeparator: "decimalSeparator", disabled: "disabled", interval: "interval", inverted: "inverted", labelFormatFunction: "labelFormatFunction", labelsVisibility: "labelsVisibility", unlockKey: "unlockKey", locale: "locale", localizeFormatFunction: "localizeFormatFunction", logarithmicScale: "logarithmicScale", max: "max", mechanicalAction: "mechanicalAction", messages: "messages", min: "min", mode: "mode", name: "name", orientation: "orientation", precisionDigits: "precisionDigits", readonly: "readonly", rightToLeft: "rightToLeft", scalePosition: "scalePosition", scaleType: "scaleType", scientificNotation: "scientificNotation", showThumbLabel: "showThumbLabel", showTooltip: "showTooltip", showUnit: "showUnit", significantDigits: "significantDigits", theme: "theme", thumbLabelPosition: "thumbLabelPosition", ticksPosition: "ticksPosition", ticksVisibility: "ticksVisibility", tooltipPosition: "tooltipPosition", unfocusable: "unfocusable", unit: "unit", validation: "validation", value: "value", wordLength: "wordLength" }, outputs: { onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], exportAs: ["smart-tank"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TankComponent, decorators: [{
type: Directive,
args: [{
exportAs: 'smart-tank', selector: 'smart-tank, [smart-tank]',
providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { animation: [{
type: Input
}], coerce: [{
type: Input
}], customInterval: [{
type: Input
}], customTicks: [{
type: Input
}], dateLabelFormatString: [{
type: Input
}], decimalSeparator: [{
type: Input
}], disabled: [{
type: Input
}], interval: [{
type: Input
}], inverted: [{
type: Input
}], labelFormatFunction: [{
type: Input
}], labelsVisibility: [{
type: Input
}], unlockKey: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], logarithmicScale: [{
type: Input
}], max: [{
type: Input
}], mechanicalAction: [{
type: Input
}], messages: [{
type: Input
}], min: [{
type: Input
}], mode: [{
type: Input
}], name: [{
type: Input
}], orientation: [{
type: Input
}], precisionDigits: [{
type: Input
}], readonly: [{
type: Input
}], rightToLeft: [{
type: Input
}], scalePosition: [{
type: Input
}], scaleType: [{
type: Input
}], scientificNotation: [{
type: Input
}], showThumbLabel: [{
type: Input
}], showTooltip: [{
type: Input
}], showUnit: [{
type: Input
}], significantDigits: [{
type: Input
}], theme: [{
type: Input
}], thumbLabelPosition: [{
type: Input
}], ticksPosition: [{
type: Input
}], ticksVisibility: [{
type: Input
}], tooltipPosition: [{
type: Input
}], unfocusable: [{
type: Input
}], unit: [{
type: Input
}], validation: [{
type: Input
}], value: [{
type: Input
}], wordLength: [{
type: Input
}], onChange: [{
type: Output
}] } });
class TankModule {
}
TankModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TankModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
TankModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TankModule, declarations: [TankComponent], exports: [TankComponent] });
TankModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TankModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TankModule, decorators: [{
type: NgModule,
args: [{
declarations: [TankComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
exports: [TankComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Smart, TankComponent, TankModule };
//# sourceMappingURL=smart-webcomponents-angular-tank.mjs.map