smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
761 lines (753 loc) • 43.2 kB
JavaScript
if(typeof window !== 'undefined') {
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
}
import './../source/modules/smart.slider';
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(() => SliderComponent),
multi: true
};
class SliderComponent 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 each time the user changes the value of the slider, either by dragging the handle or through keyboard input. It allows you to respond programmatically whenever the slider’s value is updated, such as by updating a display label or synchronizing the value with other form elements.
* @param event. The custom event. Custom event was created with: event.detail( value, oldValue)
* value - A numeric value indicating the scroll position.
* oldValue - A numeric value indicating the previous scroll position.
*/
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-slider');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description Sets or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. Use other valid values to enable and control different animation behaviors. */
get animation() {
return this.nativeElement ? this.nativeElement.animation : undefined;
}
set animation(value) {
this.nativeElement ? this.nativeElement.animation = value : undefined;
}
/** @description When the coerce property is set to true and the user clicks on the track, the slider thumb and its value will automatically snap to the nearest valid position based on the interval property. This ensures that the selected value always aligns with the allowed increments defined by interval. */
get coerce() {
return this.nativeElement ? this.nativeElement.coerce : undefined;
}
set coerce(value) {
this.nativeElement ? this.nativeElement.coerce = value : undefined;
}
/** @description Controls whether to display custom ticks on the axis, even if they are placed at uneven intervals. The specific positions of these custom ticks are defined by the customTicks property. Use this option to enable or disable the rendering of user-defined tick marks instead of automatically generated ones. */
get customInterval() {
return this.nativeElement ? this.nativeElement.customInterval : undefined;
}
set customInterval(value) {
this.nativeElement ? this.nativeElement.customInterval = value : undefined;
}
/** @description When customInterval is enabled, you can define a specific list of tick values to be displayed on the plot axis. If coerce is set to true, any input value will automatically adjust (or "snap") to the nearest specified tick value from this list, ensuring that only those defined tick marks are selected or displayed. */
get customTicks() {
return this.nativeElement ? this.nativeElement.customTicks : undefined;
}
set customTicks(value) {
this.nativeElement ? this.nativeElement.customTicks = value : undefined;
}
/** @description Sets or retrieves the format pattern used to display labels when the mode property is set to 'date'. This pattern determines how dates will appear in the labels, such as the order of day, month, and year, as well as the specific separators or formatting conventions applied. */
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 which symbol (such as a period "." or a comma ",") separates the integer part from the fractional part of a number when displaying or parsing numeric data. */
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 available for user interaction. When enabled, the widget is fully functional; when disabled, it becomes inactive and unresponsive to user input. */
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
this.nativeElement ? this.nativeElement.disabled = value : undefined;
}
/** @description Controls whether users can change the jqxSlider value by scrolling the mouse wheel. When enabled, scrolling the wheel while hovering over the slider will increment or decrement its value. Disabling this option prevents value changes via the mouse wheel interaction. */
get enableMouseWheelAction() {
return this.nativeElement ? this.nativeElement.enableMouseWheelAction : undefined;
}
set enableMouseWheelAction(value) {
this.nativeElement ? this.nativeElement.enableMouseWheelAction = value : undefined;
}
/** @description Specifies the set of predefined values or intervals that the slider's thumb will automatically align or "snap" to when moved by the user, ensuring precise selection and preventing arbitrary positioning. */
get interval() {
return this.nativeElement ? this.nativeElement.interval : undefined;
}
set interval(value) {
this.nativeElement ? this.nativeElement.interval = value : undefined;
}
/** @description Determines the orientation of the slider. When set to true, the positions of the slider’s start and end points are reversed, effectively flipping the slider’s direction from its default state. This can be useful for right-to-left layouts or custom UI requirements. */
get inverted() {
return this.nativeElement ? this.nativeElement.inverted : undefined;
}
set inverted(value) {
this.nativeElement ? this.nativeElement.inverted = value : undefined;
}
/** @description A callback function that receives the slider’s current value as an argument and returns a formatted string, which will be displayed on the slider’s labels and tooltip. This allows you to customize how the slider values appear to users, such as adding units, controlling decimal precision, or applying 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 by allowing you to set or retrieve its current state (visible or hidden). Use this property to show or hide the label as needed. */
get labelsVisibility() {
return this.nativeElement ? this.nativeElement.labelsVisibility : undefined;
}
set labelsVisibility(value) {
this.nativeElement ? this.nativeElement.labelsVisibility = value : undefined;
}
/** @description Defines or retrieves the unlockKey, a unique value used to authorize and enable access to the product’s features. */
get unlockKey() {
return this.nativeElement ? this.nativeElement.unlockKey : undefined;
}
set unlockKey(value) {
this.nativeElement ? this.nativeElement.unlockKey = value : undefined;
}
/** @description Specifies or retrieves the current locale setting, which determines the language and regional formatting used by the component. This property works in conjunction with the messages property to provide localized content, ensuring that labels, messages, and other text elements are displayed according to the selected locale. */
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, typically used to handle language changes, update localized content, or respond to localization-related 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 or a linear scale. When enabled, values on the widget are plotted using a logarithmic scale, which is useful for visualizing data that spans several orders of magnitude. When disabled, a standard linear scale is used. */
get logarithmicScale() {
return this.nativeElement ? this.nativeElement.logarithmicScale : undefined;
}
set logarithmicScale(value) {
this.nativeElement ? this.nativeElement.logarithmicScale = value : undefined;
}
/** @description Specifies or retrieves the maximum allowable value that the widget can accept. This property defines the upper limit for user input or the widget’s range, ensuring that values entered or selected cannot exceed this maximum threshold. */
get max() {
return this.nativeElement ? this.nativeElement.max : undefined;
}
set max(value) {
this.nativeElement ? this.nativeElement.max = value : undefined;
}
/** @description Specifies or retrieves the type of mechanical action being applied. This property determines the operational behavior or interaction mode of the mechanism (e.g., momentary, toggle, or latching). Use this to configure how the mechanism responds to user input or system events. */
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 strings used within the widget that can be localized (translated into different languages). This property works together with the locale setting to display the widget's text elements in the appropriate language for the user. Use this property to customize or override default text labels based on the selected locale. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Defines or retrieves the widget’s minimum allowed value. This property determines the lowest value a user can input or select within the widget. Setting this value restricts input to be no less than the specified minimum. */
get min() {
return this.nativeElement ? this.nativeElement.min : undefined;
}
set min(value) {
this.nativeElement ? this.nativeElement.min = value : undefined;
}
/** @description Specifies whether the widget is configured to handle numerical values or date values. When set, this determines if the widget processes input and displays output as numbers or as dates. When retrieved, it indicates the current mode—number or date—in which the widget is operating. */
get mode() {
return this.nativeElement ? this.nativeElement.mode : undefined;
}
set mode(value) {
this.nativeElement ? this.nativeElement.mode = value : undefined;
}
/** @description Sets or retrieves the element's name attribute, which serves as a key to identify the element's value when a form is submitted. This name is used to reference the data in the server-side processing, ensuring that the submitted value can be correctly associated with this specific element. */
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 defined orientation. This property affects how child elements are displayed within the widget. */
get orientation() {
return this.nativeElement ? this.nativeElement.orientation : undefined;
}
set orientation(value) {
this.nativeElement ? this.nativeElement.orientation = value : undefined;
}
/** @description Specifies how many digits should be displayed after the decimal point in numeric values. This setting is only effective when the scaleType property is set to 'integer'; it has no effect for other scale types. */
get precisionDigits() {
return this.nativeElement ? this.nativeElement.precisionDigits : undefined;
}
set precisionDigits(value) {
this.nativeElement ? this.nativeElement.precisionDigits = value : undefined;
}
/** @description Enables or disables the slider's range mode. When set to true, the slider displays two thumbs, allowing users to select a value range between a minimum and maximum. If set to false, only a single thumb is shown for selecting one value. */
get rangeSlider() {
return this.nativeElement ? this.nativeElement.rangeSlider : undefined;
}
set rangeSlider(value) {
this.nativeElement ? this.nativeElement.rangeSlider = value : undefined;
}
/** @description When the slider is set to read-only, users cannot interact with it; this means they are unable to drag the slider thumb or click on the track (including the filled portion) to change its value. The slider's current value remains visible, but it cannot be modified through user input. */
get readonly() {
return this.nativeElement ? this.nativeElement.readonly : undefined;
}
set readonly(value) {
this.nativeElement ? this.nativeElement.readonly = value : undefined;
}
/** @description Specifies or retrieves a value that determines whether the element’s content alignment supports right-to-left text direction, typically used for languages such as Arabic or Hebrew. This setting ensures the element renders content in accordance with right-to-left locale conventions. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Specifies the alignment or placement of the widget's scale indicators (such as axes, ticks, or labels) relative to the widget, determining where and how the scales appear within the widget's layout. */
get scalePosition() {
return this.nativeElement ? this.nativeElement.scalePosition : undefined;
}
set scalePosition(value) {
this.nativeElement ? this.nativeElement.scalePosition = value : undefined;
}
/** @description Defines the style of the slider's scale, such as linear or logarithmic, which determines how values are distributed along the slider track. */
get scaleType() {
return this.nativeElement ? this.nativeElement.scaleType : undefined;
}
set scaleType(value) {
this.nativeElement ? this.nativeElement.scaleType = value : undefined;
}
/** @description Specifies whether numerical values should be displayed in scientific notation (e.g., 1.23e+4) instead of standard decimal notation. Set to true to enable scientific notation, or false to display numbers in regular 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 buttons are visible or hidden. When enabled, the buttons will be displayed in the user interface; when disabled, the buttons will be hidden from view. */
get showButtons() {
return this.nativeElement ? this.nativeElement.showButtons : undefined;
}
set showButtons(value) {
this.nativeElement ? this.nativeElement.showButtons = value : undefined;
}
/** @description Controls whether the thumb label is visible or hidden. When enabled, the thumb label will be displayed; when disabled, it will be hidden. This option allows you to show or hide the label that appears above the slider's thumb to indicate its current value. */
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. 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 units (such as px, %, em, etc.) are visible alongside values. When enabled, the units are displayed; when disabled, values are shown without their corresponding units. */
get showUnit() {
return this.nativeElement ? this.nativeElement.showUnit : undefined;
}
set showUnit(value) {
this.nativeElement ? this.nativeElement.showUnit = value : undefined;
}
/** @description Identifies the number of significant digits present in a given number. This option is applicable only when the scaleType property is set to 'integer', ensuring that the operation is performed exclusively on integer values. */
get significantDigits() {
return this.nativeElement ? this.nativeElement.significantDigits : undefined;
}
set significantDigits(value) {
this.nativeElement ? this.nativeElement.significantDigits = value : undefined;
}
/** @description Specifies or retrieves the visual theme applied to the element, determining its overall appearance—such as colors, fonts, and styles—according to the selected theme configuration. */
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 on the slider control, indicating the value selected by the user. This property allows you to programmatically update the thumb label’s position or access its current location to reflect user interactions. */
get thumbLabelPosition() {
return this.nativeElement ? this.nativeElement.thumbLabelPosition : undefined;
}
set thumbLabelPosition(value) {
this.nativeElement ? this.nativeElement.thumbLabelPosition = value : undefined;
}
/** @description Determines or retrieves the placement of tick marks on the jqxSlider widget. This property allows you to specify where the ticks appear on the slider—such as at the top, bottom, left, or right—enhancing user interaction and slider orientation. */
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. When set, this property determines if tick marks on the component are displayed; when retrieved, it indicates the current visibility status 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 jqxSlider widget. This property determines where the tooltip appears relative to the slider handle, such as above, below, left, or right of the handle. Use this option to customize the tooltip placement to enhance user experience. */
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 the user (e.g., via keyboard navigation) or retrieves the current focusable state of the element. If set to true, the element can receive focus; if false, it cannot. */
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 jqxSlider widget, indicating the measurement or value type (such as 'px', '%', 'kg', etc.) associated with the slider's current position. This property allows you to define or access the text shown next to the slider value. */
get unit() {
return this.nativeElement ? this.nativeElement.unit : undefined;
}
set unit(value) {
this.nativeElement ? this.nativeElement.unit = value : undefined;
}
/** @description Configures how the value is validated against the specified minimum and maximum limits. - When set to 'strict', all value assignments—whether made by user interaction or programmatically—are automatically validated and coerced to remain within the min and max bounds. - When set to 'interaction', only values entered or changed by user interaction are validated and coerced to the min and max limits. Programmatic value changes are not automatically adjusted, and if the min or max is updated such that the current value falls outside the new range, the value remains unchanged. In this mode, no change event is triggered when values remain out of bounds following these updates. */
get validation() {
return this.nativeElement ? this.nativeElement.validation : undefined;
}
set validation(value) {
this.nativeElement ? this.nativeElement.validation = value : undefined;
}
/** @description Sets or retrieves the current value of the jqxSlider widget. This property is applicable only when the rangeSlider option is set to false, meaning the slider operates in single-value mode rather than as a range selector. When you use this property, you can either specify a new value for the slider or obtain the current value the slider is set to. */
get value() {
return this.nativeElement ? this.nativeElement.value : undefined;
}
set value(value) {
this.nativeElement ? this.nativeElement.value = value : undefined;
}
/** @description Gets or sets the current value of the jqxSlider widget. When the rangeSlider property is set to true, this property manages the values for both slider handles, typically as an array representing the selected range. For a single-value slider, it represents the selected value. Use this property to programmatically retrieve or update the slider's value(s). */
get values() {
return this.nativeElement ? this.nativeElement.values : undefined;
}
set values(value) {
this.nativeElement ? this.nativeElement.values = value : undefined;
}
/** @description Sets or retrieves the word length value, which determines the number of bits used to represent each integer value. This property is only relevant when scaleType is set to 'integer'. If scaleType has any other value, this property is ignored. */
get wordLength() {
return this.nativeElement ? this.nativeElement.wordLength : undefined;
}
set wordLength(value) {
this.nativeElement ? this.nativeElement.wordLength = value : undefined;
}
/** @description Sets the keyboard focus to the slider element, enabling users to interact with the slider using keyboard controls such as arrow keys, page up/down, and home/end. This facilitates accessibility and allows improved navigation for users relying on keyboard input.
*/
focus() {
if (this.nativeElement.isRendered) {
this.nativeElement.focus();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.focus();
});
}
}
/** @description Retrieves the most suitable width and height dimensions for the widget based on its content, layout constraints, and current configuration. Use this method to determine the preferred size the widget should be rendered to ensure 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 assigns the current value of the slider component. When used as a getter, it returns the slider’s present value. When used as a setter, it updates the slider to the specified value and triggers any associated change events or callbacks.
* @param {string | number | number[] | string[]} value?. The value to be set. If no parameter is passed, returns the displayed value of the slider.
* @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']);
}
}
}
SliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: SliderComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
SliderComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: SliderComponent, selector: "smart-slider, [smart-slider]", inputs: { animation: "animation", coerce: "coerce", customInterval: "customInterval", customTicks: "customTicks", dateLabelFormatString: "dateLabelFormatString", decimalSeparator: "decimalSeparator", disabled: "disabled", enableMouseWheelAction: "enableMouseWheelAction", 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", rangeSlider: "rangeSlider", readonly: "readonly", rightToLeft: "rightToLeft", scalePosition: "scalePosition", scaleType: "scaleType", scientificNotation: "scientificNotation", showButtons: "showButtons", 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", values: "values", wordLength: "wordLength" }, outputs: { onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], exportAs: ["smart-slider"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: SliderComponent, decorators: [{
type: Directive,
args: [{
exportAs: 'smart-slider', selector: 'smart-slider, [smart-slider]',
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
}], enableMouseWheelAction: [{
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
}], rangeSlider: [{
type: Input
}], readonly: [{
type: Input
}], rightToLeft: [{
type: Input
}], scalePosition: [{
type: Input
}], scaleType: [{
type: Input
}], scientificNotation: [{
type: Input
}], showButtons: [{
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
}], values: [{
type: Input
}], wordLength: [{
type: Input
}], onChange: [{
type: Output
}] } });
class SliderModule {
}
SliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: SliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
SliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: SliderModule, declarations: [SliderComponent], exports: [SliderComponent] });
SliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: SliderModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: SliderModule, decorators: [{
type: NgModule,
args: [{
declarations: [SliderComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
exports: [SliderComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { SliderComponent, SliderModule, Smart };
//# sourceMappingURL=smart-webcomponents-angular-slider.mjs.map