UNPKG

smart-webcomponents-angular

Version:

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

580 lines (571 loc) 31.2 kB
if(typeof window !== 'undefined') { if (!window['Smart']) { window['Smart'] = { RenderMode: 'manual' }; } else { window['Smart'].RenderMode = 'manual'; } } import './../source/modules/smart.progressbar'; import * as i0 from '@angular/core'; import { EventEmitter, Directive, Output, Input, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 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; } class ProgressBarComponent extends BaseElement { constructor(ref) { super(ref); this.eventHandlers = []; /** @description This event is triggered whenever the value of the associated input or component is modified by the user or via programmatic changes. It provides an opportunity to respond in real time to updates, such as validating input, updating the UI, or synchronizing data with other components. * @param event. The custom event. */ this.onChange = new EventEmitter(); 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-progress-bar'); for (let propertyName in properties) { this.nativeElement[propertyName] = properties[propertyName]; } return this.nativeElement; } /** @description Sets or retrieves the current animation mode for the element. When this property is set to 'none', all animations are disabled and the element will not perform any animated transitions. Otherwise, specifying a different value enables the corresponding animation behavior. */ get animation() { return this.nativeElement ? this.nativeElement.animation : undefined; } set animation(value) { this.nativeElement ? this.nativeElement.animation = value : undefined; } /** @description Specifies whether the element is active and interactive (enabled) or inactive and unresponsive to user input (disabled). When set to true, the element is disabled and cannot be interacted with; when set to false, the element remains enabled and fully functional. */ get disabled() { return this.nativeElement ? this.nativeElement.disabled : undefined; } set disabled(value) { this.nativeElement ? this.nativeElement.disabled = value : undefined; } /** @description Sets the Progress bar’s value to the indeterminate state (by assigning null), which triggers and starts the loading animation. In the indeterminate state, the Progress bar does not display a fixed value but instead shows a continuous animation to indicate ongoing activity or loading without specifying progress percentage. */ get indeterminate() { return this.nativeElement ? this.nativeElement.indeterminate : undefined; } set indeterminate(value) { this.nativeElement ? this.nativeElement.indeterminate = value : undefined; } /** @description Specifies the direction in which the Progress Bar fills as its value increases, such as left to right, right to left, top to bottom, or bottom to top. */ get inverted() { return this.nativeElement ? this.nativeElement.inverted : undefined; } set inverted(value) { this.nativeElement ? this.nativeElement.inverted = value : undefined; } /** @description Gets or sets the unlockKey property, which serves as the authorization code required to activate and access the product’s full features. */ get formatFunction() { return this.nativeElement ? this.nativeElement.formatFunction : undefined; } set formatFunction(value) { this.nativeElement ? this.nativeElement.formatFunction = value : undefined; } /** @description Defines or retrieves the current language setting for the component. This property determines which language is used for displaying text and messages, and works together with the messages property to select the appropriate localized strings. Adjusting this property updates the displayed language dynamically based on the provided message translations. */ get unlockKey() { return this.nativeElement ? this.nativeElement.unlockKey : undefined; } set unlockKey(value) { this.nativeElement ? this.nativeElement.unlockKey = value : undefined; } /** @description Callback function associated with the localization module, typically invoked to handle language changes, load localized resources, or update content based on the selected locale. */ get locale() { return this.nativeElement ? this.nativeElement.locale : undefined; } set locale(value) { this.nativeElement ? this.nativeElement.locale = value : undefined; } /** @description Defines the highest value that the progress bar can represent, establishing the upper limit for progress tracking. This value determines when the progress bar is considered 100% complete. */ get localizeFormatFunction() { return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined; } set localizeFormatFunction(value) { this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined; } /** @description Defines an object containing string values that represent the various states of password strength (e.g., "weak", "medium", "strong"). These values can be used to display contextual feedback to users based on the evaluated strength of their password. */ get max() { return this.nativeElement ? this.nativeElement.max : undefined; } set max(value) { this.nativeElement ? this.nativeElement.max = value : undefined; } /** @description Defines the lowest allowable value for the progress bar, representing the starting point from which progress is measured. This sets the minimum boundary for the progress indicator’s range. */ get messages() { return this.nativeElement ? this.nativeElement.messages : undefined; } set messages(value) { this.nativeElement ? this.nativeElement.messages = value : undefined; } /** @description Specifies whether the progress bar is displayed horizontally or vertically. Adjusting this property changes the direction in which the progress indicator fills. */ get min() { return this.nativeElement ? this.nativeElement.min : undefined; } set min(value) { this.nativeElement ? this.nativeElement.min = value : undefined; } /** @description Specifies or retrieves a value that determines whether the element's alignment supports right-to-left (RTL) text direction, typically used for languages such as Arabic or Hebrew. When enabled, the element's content and layout will be adjusted to accommodate RTL locales. */ get orientation() { return this.nativeElement ? this.nativeElement.orientation : undefined; } set orientation(value) { this.nativeElement ? this.nativeElement.orientation = value : undefined; } /** @description Controls the visibility of the label for the Progress Bar. When enabled, the label will be displayed; when disabled, the label will be hidden. */ get rightToLeft() { return this.nativeElement ? this.nativeElement.rightToLeft : undefined; } set rightToLeft(value) { this.nativeElement ? this.nativeElement.rightToLeft = value : undefined; } /** @description Specifies the theme that controls the visual style and appearance of the element, including aspects such as colors, fonts, and overall design. Selecting a theme customizes how the element is displayed to users. */ get showProgressValue() { return this.nativeElement ? this.nativeElement.showProgressValue : undefined; } set showProgressValue(value) { this.nativeElement ? this.nativeElement.showProgressValue = value : undefined; } /** @description If set to true, this property prevents the element from receiving keyboard focus, making it unreachable via keyboard navigation such as the Tab key. */ get theme() { return this.nativeElement ? this.nativeElement.theme : undefined; } set theme(value) { this.nativeElement ? this.nativeElement.theme = value : undefined; } /** @description Retrieves the current value of the progress bar or sets it to a specified value, updating the visual representation accordingly. This value typically indicates the progress of a task as a numeric value within a defined range (e.g., 0 to 100). */ get unfocusable() { return this.nativeElement ? this.nativeElement.unfocusable : undefined; } set unfocusable(value) { this.nativeElement ? this.nativeElement.unfocusable = value : undefined; } /** @description undefined */ get value() { return this.nativeElement ? this.nativeElement.value : undefined; } set value(value) { this.nativeElement ? this.nativeElement.value = value : undefined; } 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(); } 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']); } /** @description Remove event listeners. */ unlisten() { const that = this; if (that.eventHandlers['changeHandler']) { that.nativeElement.removeEventListener('change', that.eventHandlers['changeHandler']); } } } ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ProgressBarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); ProgressBarComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: ProgressBarComponent, selector: "smart-progress-bar, [smart-progress-bar]", inputs: { animation: "animation", disabled: "disabled", indeterminate: "indeterminate", inverted: "inverted", formatFunction: "formatFunction", unlockKey: "unlockKey", locale: "locale", localizeFormatFunction: "localizeFormatFunction", max: "max", messages: "messages", min: "min", orientation: "orientation", rightToLeft: "rightToLeft", showProgressValue: "showProgressValue", theme: "theme", unfocusable: "unfocusable", value: "value" }, outputs: { onChange: "onChange" }, exportAs: ["smart-progress-bar"], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ProgressBarComponent, decorators: [{ type: Directive, args: [{ exportAs: 'smart-progress-bar', selector: 'smart-progress-bar, [smart-progress-bar]' }] }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { animation: [{ type: Input }], disabled: [{ type: Input }], indeterminate: [{ type: Input }], inverted: [{ type: Input }], formatFunction: [{ type: Input }], unlockKey: [{ type: Input }], locale: [{ type: Input }], localizeFormatFunction: [{ type: Input }], max: [{ type: Input }], messages: [{ type: Input }], min: [{ type: Input }], orientation: [{ type: Input }], rightToLeft: [{ type: Input }], showProgressValue: [{ type: Input }], theme: [{ type: Input }], unfocusable: [{ type: Input }], value: [{ type: Input }], onChange: [{ type: Output }] } }); class CircularProgressBarComponent extends BaseElement { constructor(ref) { super(ref); this.eventHandlers = []; /** @description This event is triggered whenever the value associated with this element changes, either through user input or programmatic updates. It allows you to respond dynamically whenever the value is modified. * @param event. The custom event. */ this.onChange = new EventEmitter(); 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-circular-progress-bar'); for (let propertyName in properties) { this.nativeElement[propertyName] = properties[propertyName]; } return this.nativeElement; } /** @description Specifies or retrieves the current animation mode. When set to 'none', all animations are disabled. For other values, animations are enabled according to the specified mode. */ get animation() { return this.nativeElement ? this.nativeElement.animation : undefined; } set animation(value) { this.nativeElement ? this.nativeElement.animation = value : undefined; } /** @description Specifies whether the element is interactive and can be used by the user. When enabled, the element is active and can receive user input; when disabled, the element is inactive and user interaction is prevented. */ get disabled() { return this.nativeElement ? this.nativeElement.disabled : undefined; } set disabled(value) { this.nativeElement ? this.nativeElement.disabled = value : undefined; } /** @description Sets the value of the Circular Progress bar to an indeterminate state (null), indicating that progress is ongoing without a specific completion percentage. This action also initiates the progress bar’s continuous animation, signaling that a task is in progress but the duration or endpoint is unknown. */ get formatFunction() { return this.nativeElement ? this.nativeElement.formatFunction : undefined; } set formatFunction(value) { this.nativeElement ? this.nativeElement.formatFunction = value : undefined; } /** @description Specifies the direction in which the Circular Progress Bar fills as progress increases, such as clockwise or counterclockwise. */ get indeterminate() { return this.nativeElement ? this.nativeElement.indeterminate : undefined; } set indeterminate(value) { this.nativeElement ? this.nativeElement.indeterminate = value : undefined; } /** @description Retrieves or assigns the unlockKey, a unique value required to unlock access to the product features or content. */ get inverted() { return this.nativeElement ? this.nativeElement.inverted : undefined; } set inverted(value) { this.nativeElement ? this.nativeElement.inverted = value : undefined; } /** @description Specifies or retrieves the current language in use. This property is typically used together with the messages property to determine which set of localized messages should be displayed based on the selected language. Setting this property changes the language context for retrieving appropriate translated content. */ get unlockKey() { return this.nativeElement ? this.nativeElement.unlockKey : undefined; } set unlockKey(value) { this.nativeElement ? this.nativeElement.unlockKey = value : undefined; } /** @description Callback function associated with the localization module, typically used to handle events or processes such as language changes, translation updates, or formatting adjustments based on user locale. */ get locale() { return this.nativeElement ? this.nativeElement.locale : undefined; } set locale(value) { this.nativeElement ? this.nativeElement.locale = value : undefined; } /** @description Defines the maximum value that the progress bar can represent, determining the upper limit for the progress indicator. Values above this threshold will be capped at this maximum. */ get localizeFormatFunction() { return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined; } set localizeFormatFunction(value) { this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined; } /** @description Defines or retrieves an object containing customizable strings used throughout the widget’s user interface, enabling support for multiple languages. This property works together with the locale property to provide localized text displayed in the widget, such as labels, tooltips, and messages. Use this object to supply translations and override the default UI text for different languages or regions. */ get max() { return this.nativeElement ? this.nativeElement.max : undefined; } set max(value) { this.nativeElement ? this.nativeElement.max = value : undefined; } /** @description Defines the lowest value that the progress bar can represent, establishing the starting point of the progress range. This value determines the minimum limit for the progress indicator. */ get messages() { return this.nativeElement ? this.nativeElement.messages : undefined; } set messages(value) { this.nativeElement ? this.nativeElement.messages = value : undefined; } /** @description Controls whether the label is displayed on the Progress Bar. When enabled, the label will be shown; when disabled, the label will be hidden. */ get min() { return this.nativeElement ? this.nativeElement.min : undefined; } set min(value) { this.nativeElement ? this.nativeElement.min = value : undefined; } /** @description Sets or retrieves a value that determines whether the element’s alignment supports right-to-left (RTL) text direction, which is commonly used in languages such as Arabic or Hebrew. This property ensures the element displays content appropriately for RTL locales. */ get showProgressValue() { return this.nativeElement ? this.nativeElement.showProgressValue : undefined; } set showProgressValue(value) { this.nativeElement ? this.nativeElement.showProgressValue = value : undefined; } /** @description Specifies the theme to be applied to the element, controlling its overall visual appearance—including colors, fonts, and styling. The selected theme determines how the element is displayed, ensuring consistency with the application's design guidelines. */ get rightToLeft() { return this.nativeElement ? this.nativeElement.rightToLeft : undefined; } set rightToLeft(value) { this.nativeElement ? this.nativeElement.rightToLeft = value : undefined; } /** @description When set to true, this property prevents the element from receiving keyboard focus, making it inaccessible via tab navigation or programmatic focus calls. */ 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 numerical value of the progress bar, representing the completion level of the task as a number within the defined minimum and maximum range. */ get unfocusable() { return this.nativeElement ? this.nativeElement.unfocusable : undefined; } set unfocusable(value) { this.nativeElement ? this.nativeElement.unfocusable = value : undefined; } /** @description undefined */ get value() { return this.nativeElement ? this.nativeElement.value : undefined; } set value(value) { this.nativeElement ? this.nativeElement.value = value : undefined; } 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(); } 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']); } /** @description Remove event listeners. */ unlisten() { const that = this; if (that.eventHandlers['changeHandler']) { that.nativeElement.removeEventListener('change', that.eventHandlers['changeHandler']); } } } CircularProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: CircularProgressBarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); CircularProgressBarComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: CircularProgressBarComponent, selector: "smart-circular-progress-bar, [smart-circular-progress-bar]", inputs: { animation: "animation", disabled: "disabled", formatFunction: "formatFunction", indeterminate: "indeterminate", inverted: "inverted", unlockKey: "unlockKey", locale: "locale", localizeFormatFunction: "localizeFormatFunction", max: "max", messages: "messages", min: "min", showProgressValue: "showProgressValue", rightToLeft: "rightToLeft", theme: "theme", unfocusable: "unfocusable", value: "value" }, outputs: { onChange: "onChange" }, exportAs: ["smart-circular-progress-bar"], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: CircularProgressBarComponent, decorators: [{ type: Directive, args: [{ exportAs: 'smart-circular-progress-bar', selector: 'smart-circular-progress-bar, [smart-circular-progress-bar]' }] }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { animation: [{ type: Input }], disabled: [{ type: Input }], formatFunction: [{ type: Input }], indeterminate: [{ type: Input }], inverted: [{ type: Input }], unlockKey: [{ type: Input }], locale: [{ type: Input }], localizeFormatFunction: [{ type: Input }], max: [{ type: Input }], messages: [{ type: Input }], min: [{ type: Input }], showProgressValue: [{ type: Input }], rightToLeft: [{ type: Input }], theme: [{ type: Input }], unfocusable: [{ type: Input }], value: [{ type: Input }], onChange: [{ type: Output }] } }); class ProgressBarModule { } ProgressBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); ProgressBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ProgressBarModule, declarations: [ProgressBarComponent, CircularProgressBarComponent], exports: [ProgressBarComponent, CircularProgressBarComponent] }); ProgressBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ProgressBarModule }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ProgressBarModule, decorators: [{ type: NgModule, args: [{ declarations: [ProgressBarComponent, CircularProgressBarComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], exports: [ProgressBarComponent, CircularProgressBarComponent] }] }] }); /** * Generated bundle index. Do not edit. */ export { CircularProgressBarComponent, ProgressBarComponent, ProgressBarModule, Smart }; //# sourceMappingURL=smart-webcomponents-angular-progressbar.mjs.map