UNPKG

devextreme-angular

Version:

Angular UI and visualization components based on DevExtreme widgets

945 lines (823 loc) 31.3 kB
import * as i0 from '@angular/core'; import { forwardRef, PLATFORM_ID, Component, Inject, Input, Output, HostListener, NgModule } from '@angular/core'; import DxRangeSlider from 'devextreme/ui/range_slider'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import * as i1 from 'devextreme-angular/core'; import { DxComponent, DxTemplateHost, WatcherHelper, NestedOptionHost, IterableDifferHelper, DxIntegrationModule, DxTemplateModule } from 'devextreme-angular/core'; import { DxoLabelModule, DxoFormatModule, DxoTooltipModule } from 'devextreme-angular/ui/nested'; import { DxoRangeSliderFormatModule, DxoRangeSliderLabelModule, DxoRangeSliderTooltipModule } from 'devextreme-angular/ui/range-slider/nested'; /*! * devextreme-angular * Version: 24.2.6 * Build date: Mon Mar 17 2025 * * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED * * This software may be modified and distributed under the terms * of the MIT license. See the LICENSE file in the root of the project for details. * * https://github.com/DevExpress/devextreme-angular */ /* tslint:disable:max-line-length */ const CUSTOM_VALUE_ACCESSOR_PROVIDER = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DxRangeSliderComponent), multi: true }; /** * The RangeSlider is a UI component that allows an end user to choose a range of numeric values. */ class DxRangeSliderComponent extends DxComponent { _watcherHelper; _idh; instance = null; /** * Specifies the shortcut key that sets focus on the UI component. */ get accessKey() { return this._getOption('accessKey'); } set accessKey(value) { this._setOption('accessKey', value); } /** * Specifies whether the UI component changes its visual state as a result of user interaction. */ get activeStateEnabled() { return this._getOption('activeStateEnabled'); } set activeStateEnabled(value) { this._setOption('activeStateEnabled', value); } /** * Specifies whether the UI component responds to user interaction. */ get disabled() { return this._getOption('disabled'); } set disabled(value) { this._setOption('disabled', value); } /** * Specifies the global attributes to be attached to the UI component's container element. */ get elementAttr() { return this._getOption('elementAttr'); } set elementAttr(value) { this._setOption('elementAttr', value); } /** * The right edge of the interval currently selected using the range slider. */ get end() { return this._getOption('end'); } set end(value) { this._setOption('end', value); } /** * The value to be assigned to the name attribute of the underlying `` element. */ get endName() { return this._getOption('endName'); } set endName(value) { this._setOption('endName', value); } /** * Specifies whether the UI component can be focused using keyboard navigation. */ get focusStateEnabled() { return this._getOption('focusStateEnabled'); } set focusStateEnabled(value) { this._setOption('focusStateEnabled', value); } /** * Specifies the UI component's height. */ get height() { return this._getOption('height'); } set height(value) { this._setOption('height', value); } /** * Specifies text for a hint that appears when a user pauses on the UI component. */ get hint() { return this._getOption('hint'); } set hint(value) { this._setOption('hint', value); } /** * Specifies whether the UI component changes its state when a user pauses on it. */ get hoverStateEnabled() { return this._getOption('hoverStateEnabled'); } set hoverStateEnabled(value) { this._setOption('hoverStateEnabled', value); } /** * Specifies whether the component's current value differs from the initial value. */ get isDirty() { return this._getOption('isDirty'); } set isDirty(value) { this._setOption('isDirty', value); } /** * Specifies or indicates whether the editor's value is valid. */ get isValid() { return this._getOption('isValid'); } set isValid(value) { this._setOption('isValid', value); } /** * Specifies the step by which a handle moves when a user presses Page Up or Page Down. */ get keyStep() { return this._getOption('keyStep'); } set keyStep(value) { this._setOption('keyStep', value); } /** * Configures the labels displayed at the min and max values. */ get label() { return this._getOption('label'); } set label(value) { this._setOption('label', value); } /** * The maximum value the UI component can accept. */ get max() { return this._getOption('max'); } set max(value) { this._setOption('max', value); } /** * The minimum value the UI component can accept. */ get min() { return this._getOption('min'); } set min(value) { this._setOption('min', value); } /** * Specifies whether the editor is read-only. */ get readOnly() { return this._getOption('readOnly'); } set readOnly(value) { this._setOption('readOnly', value); } /** * Switches the UI component to a right-to-left representation. */ get rtlEnabled() { return this._getOption('rtlEnabled'); } set rtlEnabled(value) { this._setOption('rtlEnabled', value); } /** * Specifies whether to highlight the selected range. */ get showRange() { return this._getOption('showRange'); } set showRange(value) { this._setOption('showRange', value); } /** * The left edge of the interval currently selected using the range slider. */ get start() { return this._getOption('start'); } set start(value) { this._setOption('start', value); } /** * The value to be assigned to the name attribute of the underlying `` element. */ get startName() { return this._getOption('startName'); } set startName(value) { this._setOption('startName', value); } /** * Specifies the step by which the UI component's value changes when a user drags a handler. */ get step() { return this._getOption('step'); } set step(value) { this._setOption('step', value); } /** * Specifies the number of the element when the Tab key is used for navigating. */ get tabIndex() { return this._getOption('tabIndex'); } set tabIndex(value) { this._setOption('tabIndex', value); } /** * Configures a tooltip. */ get tooltip() { return this._getOption('tooltip'); } set tooltip(value) { this._setOption('tooltip', value); } /** * Information on the broken validation rule. Contains the first item from the validationErrors array. */ get validationError() { return this._getOption('validationError'); } set validationError(value) { this._setOption('validationError', value); } /** * An array of the validation rules that failed. */ get validationErrors() { return this._getOption('validationErrors'); } set validationErrors(value) { this._setOption('validationErrors', value); } /** * Specifies how the message about the validation rules that are not satisfied by this editor's value is displayed. */ get validationMessageMode() { return this._getOption('validationMessageMode'); } set validationMessageMode(value) { this._setOption('validationMessageMode', value); } /** * Specifies the position of a validation message relative to the component. The validation message describes the validation rules that this component's value does not satisfy. */ get validationMessagePosition() { return this._getOption('validationMessagePosition'); } set validationMessagePosition(value) { this._setOption('validationMessagePosition', value); } /** * Indicates or specifies the current validation status. */ get validationStatus() { return this._getOption('validationStatus'); } set validationStatus(value) { this._setOption('validationStatus', value); } /** * Specifies the UI component's value. */ get value() { return this._getOption('value'); } set value(value) { this._setOption('value', value); } /** * Specifies when to change the component's value. */ get valueChangeMode() { return this._getOption('valueChangeMode'); } set valueChangeMode(value) { this._setOption('valueChangeMode', value); } /** * Specifies whether the UI component is visible. */ get visible() { return this._getOption('visible'); } set visible(value) { this._setOption('visible', value); } /** * Specifies the UI component's width. */ get width() { return this._getOption('width'); } set width(value) { this._setOption('width', value); } /** * A function that is executed when the UI component is rendered and each time the component is repainted. */ onContentReady; /** * A function that is executed before the UI component is disposed of. */ onDisposing; /** * A function used in JavaScript frameworks to save the UI component instance. */ onInitialized; /** * A function that is executed after a UI component property is changed. */ onOptionChanged; /** * A function that is executed after the UI component's value is changed. */ onValueChanged; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ accessKeyChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ activeStateEnabledChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ disabledChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ elementAttrChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ endChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ endNameChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ focusStateEnabledChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ heightChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ hintChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ hoverStateEnabledChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ isDirtyChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ isValidChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ keyStepChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ labelChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ maxChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ minChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ readOnlyChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ rtlEnabledChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ showRangeChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ startChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ startNameChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ stepChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ tabIndexChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ tooltipChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ validationErrorChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ validationErrorsChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ validationMessageModeChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ validationMessagePositionChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ validationStatusChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ valueChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ valueChangeModeChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ visibleChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ widthChange; /** * */ onBlur; change(_) { } touched = (_) => { }; constructor(elementRef, ngZone, templateHost, _watcherHelper, _idh, optionHost, transferState, platformId) { super(elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId); this._watcherHelper = _watcherHelper; this._idh = _idh; this._createEventEmitters([ { subscribe: 'contentReady', emit: 'onContentReady' }, { subscribe: 'disposing', emit: 'onDisposing' }, { subscribe: 'initialized', emit: 'onInitialized' }, { subscribe: 'optionChanged', emit: 'onOptionChanged' }, { subscribe: 'valueChanged', emit: 'onValueChanged' }, { emit: 'accessKeyChange' }, { emit: 'activeStateEnabledChange' }, { emit: 'disabledChange' }, { emit: 'elementAttrChange' }, { emit: 'endChange' }, { emit: 'endNameChange' }, { emit: 'focusStateEnabledChange' }, { emit: 'heightChange' }, { emit: 'hintChange' }, { emit: 'hoverStateEnabledChange' }, { emit: 'isDirtyChange' }, { emit: 'isValidChange' }, { emit: 'keyStepChange' }, { emit: 'labelChange' }, { emit: 'maxChange' }, { emit: 'minChange' }, { emit: 'readOnlyChange' }, { emit: 'rtlEnabledChange' }, { emit: 'showRangeChange' }, { emit: 'startChange' }, { emit: 'startNameChange' }, { emit: 'stepChange' }, { emit: 'tabIndexChange' }, { emit: 'tooltipChange' }, { emit: 'validationErrorChange' }, { emit: 'validationErrorsChange' }, { emit: 'validationMessageModeChange' }, { emit: 'validationMessagePositionChange' }, { emit: 'validationStatusChange' }, { emit: 'valueChange' }, { emit: 'valueChangeModeChange' }, { emit: 'visibleChange' }, { emit: 'widthChange' }, { emit: 'onBlur' } ]); this._idh.setHost(this); optionHost.setHost(this); } _createInstance(element, options) { return new DxRangeSlider(element, options); } writeValue(value) { this.eventHelper.lockedValueChangeEvent = true; this.value = value; this.eventHelper.lockedValueChangeEvent = false; } setDisabledState(isDisabled) { this.disabled = isDisabled; } registerOnChange(fn) { this.change = fn; } registerOnTouched(fn) { this.touched = fn; } _createWidget(element) { super._createWidget(element); this.instance.on('focusOut', (e) => { this.eventHelper.fireNgEvent('onBlur', [e]); }); } ngOnDestroy() { this._destroyWidget(); } ngOnChanges(changes) { super.ngOnChanges(changes); this.setupChanges('validationErrors', changes); this.setupChanges('value', changes); } setupChanges(prop, changes) { if (!(prop in this._optionsToUpdate)) { this._idh.setup(prop, changes); } } ngDoCheck() { this._idh.doCheck('validationErrors'); this._idh.doCheck('value'); this._watcherHelper.checkWatchers(); super.ngDoCheck(); super.clearChangedOptions(); } _setOption(name, value) { let isSetup = this._idh.setupSingle(name, value); let isChanged = this._idh.getChanges(name, value) !== null; if (isSetup || isChanged) { super._setOption(name, value); } } /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DxRangeSliderComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.DxTemplateHost }, { token: i1.WatcherHelper }, { token: i1.IterableDifferHelper }, { token: i1.NestedOptionHost }, { token: i0.TransferState }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DxRangeSliderComponent, selector: "dx-range-slider", inputs: { accessKey: "accessKey", activeStateEnabled: "activeStateEnabled", disabled: "disabled", elementAttr: "elementAttr", end: "end", endName: "endName", focusStateEnabled: "focusStateEnabled", height: "height", hint: "hint", hoverStateEnabled: "hoverStateEnabled", isDirty: "isDirty", isValid: "isValid", keyStep: "keyStep", label: "label", max: "max", min: "min", readOnly: "readOnly", rtlEnabled: "rtlEnabled", showRange: "showRange", start: "start", startName: "startName", step: "step", tabIndex: "tabIndex", tooltip: "tooltip", validationError: "validationError", validationErrors: "validationErrors", validationMessageMode: "validationMessageMode", validationMessagePosition: "validationMessagePosition", validationStatus: "validationStatus", value: "value", valueChangeMode: "valueChangeMode", visible: "visible", width: "width" }, outputs: { onContentReady: "onContentReady", onDisposing: "onDisposing", onInitialized: "onInitialized", onOptionChanged: "onOptionChanged", onValueChanged: "onValueChanged", accessKeyChange: "accessKeyChange", activeStateEnabledChange: "activeStateEnabledChange", disabledChange: "disabledChange", elementAttrChange: "elementAttrChange", endChange: "endChange", endNameChange: "endNameChange", focusStateEnabledChange: "focusStateEnabledChange", heightChange: "heightChange", hintChange: "hintChange", hoverStateEnabledChange: "hoverStateEnabledChange", isDirtyChange: "isDirtyChange", isValidChange: "isValidChange", keyStepChange: "keyStepChange", labelChange: "labelChange", maxChange: "maxChange", minChange: "minChange", readOnlyChange: "readOnlyChange", rtlEnabledChange: "rtlEnabledChange", showRangeChange: "showRangeChange", startChange: "startChange", startNameChange: "startNameChange", stepChange: "stepChange", tabIndexChange: "tabIndexChange", tooltipChange: "tooltipChange", validationErrorChange: "validationErrorChange", validationErrorsChange: "validationErrorsChange", validationMessageModeChange: "validationMessageModeChange", validationMessagePositionChange: "validationMessagePositionChange", validationStatusChange: "validationStatusChange", valueChange: "valueChange", valueChangeModeChange: "valueChangeModeChange", visibleChange: "visibleChange", widthChange: "widthChange", onBlur: "onBlur" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "valueChange": "change($event)", "onBlur": "touched($event)" } }, providers: [ DxTemplateHost, WatcherHelper, CUSTOM_VALUE_ACCESSOR_PROVIDER, NestedOptionHost, IterableDifferHelper ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DxRangeSliderComponent, decorators: [{ type: Component, args: [{ selector: 'dx-range-slider', template: '', host: { ngSkipHydration: 'true' }, providers: [ DxTemplateHost, WatcherHelper, CUSTOM_VALUE_ACCESSOR_PROVIDER, NestedOptionHost, IterableDifferHelper ] }] }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.DxTemplateHost }, { type: i1.WatcherHelper }, { type: i1.IterableDifferHelper }, { type: i1.NestedOptionHost }, { type: i0.TransferState }, { type: undefined, decorators: [{ type: Inject, args: [PLATFORM_ID] }] }], propDecorators: { accessKey: [{ type: Input }], activeStateEnabled: [{ type: Input }], disabled: [{ type: Input }], elementAttr: [{ type: Input }], end: [{ type: Input }], endName: [{ type: Input }], focusStateEnabled: [{ type: Input }], height: [{ type: Input }], hint: [{ type: Input }], hoverStateEnabled: [{ type: Input }], isDirty: [{ type: Input }], isValid: [{ type: Input }], keyStep: [{ type: Input }], label: [{ type: Input }], max: [{ type: Input }], min: [{ type: Input }], readOnly: [{ type: Input }], rtlEnabled: [{ type: Input }], showRange: [{ type: Input }], start: [{ type: Input }], startName: [{ type: Input }], step: [{ type: Input }], tabIndex: [{ type: Input }], tooltip: [{ type: Input }], validationError: [{ type: Input }], validationErrors: [{ type: Input }], validationMessageMode: [{ type: Input }], validationMessagePosition: [{ type: Input }], validationStatus: [{ type: Input }], value: [{ type: Input }], valueChangeMode: [{ type: Input }], visible: [{ type: Input }], width: [{ type: Input }], onContentReady: [{ type: Output }], onDisposing: [{ type: Output }], onInitialized: [{ type: Output }], onOptionChanged: [{ type: Output }], onValueChanged: [{ type: Output }], accessKeyChange: [{ type: Output }], activeStateEnabledChange: [{ type: Output }], disabledChange: [{ type: Output }], elementAttrChange: [{ type: Output }], endChange: [{ type: Output }], endNameChange: [{ type: Output }], focusStateEnabledChange: [{ type: Output }], heightChange: [{ type: Output }], hintChange: [{ type: Output }], hoverStateEnabledChange: [{ type: Output }], isDirtyChange: [{ type: Output }], isValidChange: [{ type: Output }], keyStepChange: [{ type: Output }], labelChange: [{ type: Output }], maxChange: [{ type: Output }], minChange: [{ type: Output }], readOnlyChange: [{ type: Output }], rtlEnabledChange: [{ type: Output }], showRangeChange: [{ type: Output }], startChange: [{ type: Output }], startNameChange: [{ type: Output }], stepChange: [{ type: Output }], tabIndexChange: [{ type: Output }], tooltipChange: [{ type: Output }], validationErrorChange: [{ type: Output }], validationErrorsChange: [{ type: Output }], validationMessageModeChange: [{ type: Output }], validationMessagePositionChange: [{ type: Output }], validationStatusChange: [{ type: Output }], valueChange: [{ type: Output }], valueChangeModeChange: [{ type: Output }], visibleChange: [{ type: Output }], widthChange: [{ type: Output }], onBlur: [{ type: Output }], change: [{ type: HostListener, args: ['valueChange', ['$event']] }], touched: [{ type: HostListener, args: ['onBlur', ['$event']] }] } }); class DxRangeSliderModule { /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DxRangeSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); /** @nocollapse */ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: DxRangeSliderModule, declarations: [DxRangeSliderComponent], imports: [DxoLabelModule, DxoFormatModule, DxoTooltipModule, DxoRangeSliderFormatModule, DxoRangeSliderLabelModule, DxoRangeSliderTooltipModule, DxIntegrationModule, DxTemplateModule], exports: [DxRangeSliderComponent, DxoLabelModule, DxoFormatModule, DxoTooltipModule, DxoRangeSliderFormatModule, DxoRangeSliderLabelModule, DxoRangeSliderTooltipModule, DxTemplateModule] }); /** @nocollapse */ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DxRangeSliderModule, imports: [DxoLabelModule, DxoFormatModule, DxoTooltipModule, DxoRangeSliderFormatModule, DxoRangeSliderLabelModule, DxoRangeSliderTooltipModule, DxIntegrationModule, DxTemplateModule, DxoLabelModule, DxoFormatModule, DxoTooltipModule, DxoRangeSliderFormatModule, DxoRangeSliderLabelModule, DxoRangeSliderTooltipModule, DxTemplateModule] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DxRangeSliderModule, decorators: [{ type: NgModule, args: [{ imports: [ DxoLabelModule, DxoFormatModule, DxoTooltipModule, DxoRangeSliderFormatModule, DxoRangeSliderLabelModule, DxoRangeSliderTooltipModule, DxIntegrationModule, DxTemplateModule ], declarations: [ DxRangeSliderComponent ], exports: [ DxRangeSliderComponent, DxoLabelModule, DxoFormatModule, DxoTooltipModule, DxoRangeSliderFormatModule, DxoRangeSliderLabelModule, DxoRangeSliderTooltipModule, DxTemplateModule ] }] }] }); /** * Generated bundle index. Do not edit. */ export { DxRangeSliderComponent, DxRangeSliderModule }; //# sourceMappingURL=devextreme-angular-ui-range-slider.mjs.map