UNPKG

smart-webcomponents-angular

Version:

[![Price](https://img.shields.io/badge/price-COMMERCIAL-0098f7.svg)](https://jqwidgets.com/license/)

717 lines (709 loc) 31.6 kB
if(typeof window !== 'undefined') { if (!window['Smart']) { window['Smart'] = { RenderMode: 'manual' }; } else { window['Smart'].RenderMode = 'manual'; } } import './../source/modules/smart.tank'; 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 when the value of the tank is changed. * @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 Sets or gets the animation mode. Animation is disabled when the property is set to 'none' */ get animation() { return this.nativeElement ? this.nativeElement.animation : undefined; } set animation(value) { this.nativeElement ? this.nativeElement.animation = value : undefined; } /** @description If is set to true all values coerce to the interval, set in the interval property. */ get coerce() { return this.nativeElement ? this.nativeElement.coerce : undefined; } set coerce(value) { this.nativeElement ? this.nativeElement.coerce = value : undefined; } /** @description Sets or gets whether custom ticks at (possibly) uneven interval will be plotted. The ticks to be plotted are defined with the property customTicks. */ get customInterval() { return this.nativeElement ? this.nativeElement.customInterval : undefined; } set customInterval(value) { this.nativeElement ? this.nativeElement.customInterval = value : undefined; } /** @description 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. */ get customTicks() { return this.nativeElement ? this.nativeElement.customTicks : undefined; } set customTicks(value) { this.nativeElement ? this.nativeElement.customTicks = value : undefined; } /** @description Sets or gets the pattern which labels are displayed in when mode is 'date'. */ get dateLabelFormatString() { return this.nativeElement ? this.nativeElement.dateLabelFormatString : undefined; } set dateLabelFormatString(value) { this.nativeElement ? this.nativeElement.dateLabelFormatString = value : undefined; } /** @description Sets or gets the char to use as the decimal separator in numeric values. */ get decimalSeparator() { return this.nativeElement ? this.nativeElement.decimalSeparator : undefined; } set decimalSeparator(value) { this.nativeElement ? this.nativeElement.decimalSeparator = value : undefined; } /** @description Enables or disables the widget. */ get disabled() { return this.nativeElement ? this.nativeElement.disabled : undefined; } set disabled(value) { this.nativeElement ? this.nativeElement.disabled = value : undefined; } /** @description When cooerce property is true, all values coerce to the interval's value. */ get interval() { return this.nativeElement ? this.nativeElement.interval : undefined; } set interval(value) { this.nativeElement ? this.nativeElement.interval = value : undefined; } /** @description Sets the direction of the tank. If is true - positions of the tank's begin and end are changed. */ get inverted() { return this.nativeElement ? this.nativeElement.inverted : undefined; } set inverted(value) { this.nativeElement ? this.nativeElement.inverted = value : undefined; } /** @description A callback function that can be used to format the values displayed on the tank labels. */ get labelFormatFunction() { return this.nativeElement ? this.nativeElement.labelFormatFunction : undefined; } set labelFormatFunction(value) { this.nativeElement ? this.nativeElement.labelFormatFunction = value : undefined; } /** @description Sets or gets the widget's label visibility */ get labelsVisibility() { return this.nativeElement ? this.nativeElement.labelsVisibility : undefined; } set labelsVisibility(value) { this.nativeElement ? this.nativeElement.labelsVisibility = value : undefined; } /** @description Sets or gets the unlockKey which unlocks the product. */ get unlockKey() { return this.nativeElement ? this.nativeElement.unlockKey : undefined; } set unlockKey(value) { this.nativeElement ? this.nativeElement.unlockKey = value : undefined; } /** @description Sets or gets the locale. 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, related to localization module. */ get localizeFormatFunction() { return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined; } set localizeFormatFunction(value) { this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined; } /** @description Enables or disables the usage of logarithmic scale in the widget. */ get logarithmicScale() { return this.nativeElement ? this.nativeElement.logarithmicScale : undefined; } set logarithmicScale(value) { this.nativeElement ? this.nativeElement.logarithmicScale = value : undefined; } /** @description Sets or gets the maximum value of the widget. */ get max() { return this.nativeElement ? this.nativeElement.max : undefined; } set max(value) { this.nativeElement ? this.nativeElement.max = value : undefined; } /** @description Sets or gets the type of used mechanical action. */ get mechanicalAction() { return this.nativeElement ? this.nativeElement.mechanicalAction : undefined; } set mechanicalAction(value) { this.nativeElement ? this.nativeElement.mechanicalAction = 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 minimum value of the widget. */ get min() { return this.nativeElement ? this.nativeElement.min : undefined; } set min(value) { this.nativeElement ? this.nativeElement.min = value : undefined; } /** @description Sets or gets whether the widget works with numbers or dates. */ get mode() { return this.nativeElement ? this.nativeElement.mode : undefined; } set mode(value) { this.nativeElement ? this.nativeElement.mode = value : undefined; } /** @description Sets or gets the element's name, which is used as a reference when the data is submitted. */ get name() { return this.nativeElement ? this.nativeElement.name : undefined; } set name(value) { this.nativeElement ? this.nativeElement.name = value : undefined; } /** @description Sets the orientation of the widget */ get orientation() { return this.nativeElement ? this.nativeElement.orientation : undefined; } set orientation(value) { this.nativeElement ? this.nativeElement.orientation = value : undefined; } /** @description Determines the number of digits after the decimal point. Applicable only when scaleType is 'integer'. */ get precisionDigits() { return this.nativeElement ? this.nativeElement.precisionDigits : undefined; } set precisionDigits(value) { this.nativeElement ? this.nativeElement.precisionDigits = value : undefined; } /** @description If the widgets is readonly, the users cannot iteract with the element. */ get readonly() { return this.nativeElement ? this.nativeElement.readonly : undefined; } set readonly(value) { this.nativeElement ? this.nativeElement.readonly = 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 Sets the position of the widget's scales. */ get scalePosition() { return this.nativeElement ? this.nativeElement.scalePosition : undefined; } set scalePosition(value) { this.nativeElement ? this.nativeElement.scalePosition = value : undefined; } /** @description Sets the type of the tank's scale. */ get scaleType() { return this.nativeElement ? this.nativeElement.scaleType : undefined; } set scaleType(value) { this.nativeElement ? this.nativeElement.scaleType = value : undefined; } /** @description Enables or disables scientific notation. */ get scientificNotation() { return this.nativeElement ? this.nativeElement.scientificNotation : undefined; } set scientificNotation(value) { this.nativeElement ? this.nativeElement.scientificNotation = value : undefined; } /** @description Enables or disables displaying of the thumb label. */ get showThumbLabel() { return this.nativeElement ? this.nativeElement.showThumbLabel : undefined; } set showThumbLabel(value) { this.nativeElement ? this.nativeElement.showThumbLabel = value : undefined; } /** @description Enables or disables displaying of the tooltip. */ get showTooltip() { return this.nativeElement ? this.nativeElement.showTooltip : undefined; } set showTooltip(value) { this.nativeElement ? this.nativeElement.showTooltip = value : undefined; } /** @description Enables or disables displaying of the units. */ get showUnit() { return this.nativeElement ? this.nativeElement.showUnit : undefined; } set showUnit(value) { this.nativeElement ? this.nativeElement.showUnit = value : undefined; } /** @description Determining how many significant digits are in a number. Applicable only when scaleType is 'integer'. */ get significantDigits() { return this.nativeElement ? this.nativeElement.significantDigits : undefined; } set significantDigits(value) { this.nativeElement ? this.nativeElement.significantDigits = value : undefined; } /** @description Sets or gets the element's visual theme. */ get theme() { return this.nativeElement ? this.nativeElement.theme : undefined; } set theme(value) { this.nativeElement ? this.nativeElement.theme = value : undefined; } /** @description Sets or gets the position of the thumb label. */ get thumbLabelPosition() { return this.nativeElement ? this.nativeElement.thumbLabelPosition : undefined; } set thumbLabelPosition(value) { this.nativeElement ? this.nativeElement.thumbLabelPosition = value : undefined; } /** @description Sets or gets the position of the ticks in jqxTank widget. */ get ticksPosition() { return this.nativeElement ? this.nativeElement.ticksPosition : undefined; } set ticksPosition(value) { this.nativeElement ? this.nativeElement.ticksPosition = value : undefined; } /** @description Sets or gets the visibility of the ticks. */ get ticksVisibility() { return this.nativeElement ? this.nativeElement.ticksVisibility : undefined; } set ticksVisibility(value) { this.nativeElement ? this.nativeElement.ticksVisibility = value : undefined; } /** @description Sets or gets the position of the tooltip in jqxTank widget. */ get tooltipPosition() { return this.nativeElement ? this.nativeElement.tooltipPosition : undefined; } set tooltipPosition(value) { this.nativeElement ? this.nativeElement.tooltipPosition = value : undefined; } /** @description Sets or gets if the element can be focused. */ get unfocusable() { return this.nativeElement ? this.nativeElement.unfocusable : undefined; } set unfocusable(value) { this.nativeElement ? this.nativeElement.unfocusable = value : undefined; } /** @description Sets or gets the name of unit used in jqxTank widget. */ get unit() { return this.nativeElement ? this.nativeElement.unit : undefined; } set unit(value) { this.nativeElement ? this.nativeElement.unit = value : undefined; } /** @description 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. */ get validation() { return this.nativeElement ? this.nativeElement.validation : undefined; } set validation(value) { this.nativeElement ? this.nativeElement.validation = value : undefined; } /** @description Sets or gets the value of the jqxTank widget. */ get value() { return this.nativeElement ? this.nativeElement.value : undefined; } set value(value) { this.nativeElement ? this.nativeElement.value = value : undefined; } /** @description Sets or gets the word length. Applicable only when scaleType is 'integer'. */ get wordLength() { return this.nativeElement ? this.nativeElement.wordLength : undefined; } set wordLength(value) { this.nativeElement ? this.nativeElement.wordLength = value : undefined; } /** @description Focuses the tank. */ focus() { if (this.nativeElement.isRendered) { this.nativeElement.focus(); } else { this.nativeElement.whenRendered(() => { this.nativeElement.focus(); }); } } /** @description Gets the optimal size of the widget. * @returns {any} */ async getOptimalSize() { const getResultOnRender = () => { return new Promise(resolve => { this.nativeElement.whenRendered(() => { const result = this.nativeElement.getOptimalSize(); resolve(result); }); }); }; const result = await getResultOnRender(); return result; } getOptimalSizeSync() { if (this.nativeElement.isRendered) { return this.nativeElement.getOptimalSize(); } return null; } /** @description Get/set the value of the tank. * @param {string | number} value?. The value to be set. If no parameter is passed, returns the displayed value of the tank. * @returns {string} */ async val(value) { const getResultOnRender = () => { return new Promise(resolve => { this.nativeElement.whenRendered(() => { const result = this.nativeElement.val(value); resolve(result); }); }); }; const result = await 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