@progress/kendo-angular-inputs
Version:
Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, Te
283 lines (282 loc) • 12.3 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { increment, decrement, incrementLarge, decrementLarge, identity } from './sliders-util';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { Input, Output, EventEmitter, HostBinding, Injector, Renderer2, NgZone, ChangeDetectorRef, ElementRef, ViewChild, ContentChild, Component } from '@angular/core';
import { Subscription } from 'rxjs';
import { NgControl } from '@angular/forms';
import { Keys } from '@progress/kendo-angular-common';
import { validatePackage } from '@progress/kendo-licensing';
import { packageMetadata } from '../package-metadata';
import { LabelTemplateDirective } from './label-template.directive';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-l10n";
/**
* @hidden
*/
export class SliderBase {
localizationService;
injector;
renderer;
ngZone;
changeDetector;
hostElement;
/**
* Defines the title of the ticks ([see example]({% slug ticks_slider %}#toc-titles)). The default title
* for each tick is its Slider value. If you use a callback function, the function accepts an argument
* that holds the value of the component and returns a string with the new title.
*/
title = identity;
/**
* Denotes the location of the tick marks in the Slider ([see example]({% slug ticks_slider %}#toc-placement)).
*
* The available options are:
* * `before`—The tick marks are located to the top side of the horizontal track or to the left side of a vertical track.
* * `after`—The tick marks are located to the bottom side of the horizontal track or to the right side of the vertical track.
* * `both`— (Default) The tick marks are located on both sides of the track.
* * `none`—The tick marks are not visible. The actual elements are not added to the DOM tree.
*/
tickPlacement = 'both';
/**
* If `vertical` is set to `true`, the orientation of the Slider changes from horizontal to vertical
* ([see example]({% slug orientation_slider %})).
*/
vertical = false;
/**
* The minimum value of the Slider ([see example]({% slug predefinedsteps_slider %}#toc-small-steps)).
* The attribute accepts both integers and floating-point numbers.
*/
min = 0;
/**
* The maximum value of the Slider ([see example]({% slug predefinedsteps_slider %}#toc-small-steps)).
* The attribute accepts both integers and floating-point numbers.
*/
max = 10;
/**
* The step value of the Slider ([see example]({% slug predefinedsteps_slider %}#toc-small-steps)).
* Accepts positive values only. Can be an integer or a floating-point number.
*/
smallStep = 1;
/**
* Specifies that every n<sup>th</sup> tick will be large and will have a label
* ([see example]({% slug predefinedsteps_slider %}#toc-large-steps)).
* Accepts positive integer values only.
*/
largeStep = null;
/**
* Sets the width between each two ticks along the track ([see example]({% slug ticks_slider %}#toc-width)). The value
* has to be set in pixels. If no `fixedTickWidth` is provided, the Slider automatically adjusts the tick width to
* accommodate the elements within the size of the component.
*/
fixedTickWidth;
/**
* Determines whether the Slider is disabled ([see example]({% slug disabledstate_slider %})). To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_slider#toc-managing-the-slider-disabled-state-in-reactive-forms).
*/
disabled = false;
/**
* Determines whether the Slider is in its read-only state ([see example]({% slug readonly_slider %})).
*
* @default false
*/
readonly = false;
/**
* Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the Slider.
*/
tabindex = 0;
/**
* Fires each time the user focuses the component.
*/
onFocus = new EventEmitter();
/**
* Fires each time the component is blurred.
*/
onBlur = new EventEmitter();
/**
* Fires each time the user selects a new value.
*/
valueChange = new EventEmitter();
direction;
get horizontalClass() {
return !this.vertical;
}
get verticalClass() {
return this.vertical;
}
sliderClass = true;
get disabledClass() {
return this.disabled;
}
wrapper;
track;
sliderSelection;
ticksContainer;
ticks;
labelTemplate;
subscriptions = new Subscription();
isFocused;
isDragged;
control;
constructor(localizationService, injector, renderer, ngZone, changeDetector, hostElement) {
this.localizationService = localizationService;
this.injector = injector;
this.renderer = renderer;
this.ngZone = ngZone;
this.changeDetector = changeDetector;
this.hostElement = hostElement;
validatePackage(packageMetadata);
this.direction = localizationService.rtl ? 'rtl' : 'ltr';
}
/**
* @hidden
* Called when the status of the component changes to or from `disabled`.
* Depending on the value, it enables or disables the appropriate DOM element.
*
* @param isDisabled
*/
setDisabledState(isDisabled) {
this.changeDetector.markForCheck();
this.disabled = isDisabled;
}
ngOnInit() {
this.subscriptions.add(this.localizationService
.changes
.subscribe(({ rtl }) => {
this.direction = rtl ? 'rtl' : 'ltr';
this.sizeComponent();
}));
if (this.hostElement) {
this.renderer.removeAttribute(this.hostElement.nativeElement, "tabindex");
}
this.control = this.injector.get(NgControl, null);
}
/**
* @hidden
*/
get isDisabled() {
return this.disabled || this.readonly;
}
/**
* @hidden
*/
ifEnabled = (callback, event) => {
if (!this.isDisabled) {
callback.call(this, event);
}
};
/**
* @hidden
* Used by the FloatingLabel to determine if the component is empty.
*/
isEmpty() {
return false;
}
get reverse() {
return this.localizationService.rtl && !this.vertical;
}
get keyBinding() {
const reverse = this.reverse;
return {
[Keys.ArrowLeft]: reverse ? increment : decrement,
[Keys.ArrowRight]: reverse ? decrement : increment,
[Keys.ArrowDown]: decrement,
[Keys.ArrowUp]: increment,
[Keys.PageUp]: incrementLarge,
[Keys.PageDown]: decrementLarge,
[Keys.Home]: ({ min }) => min,
[Keys.End]: ({ max }) => max
};
}
resetStyles(elements) {
elements.forEach(el => {
if (el) {
if (this.vertical) {
this.renderer.removeStyle(el, 'width');
this.renderer.removeStyle(el, 'left');
this.renderer.removeStyle(el, 'right');
}
else {
this.renderer.removeStyle(el, 'height');
this.renderer.removeStyle(el, 'bottom');
}
this.renderer.removeStyle(el, 'padding-top');
}
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SliderBase, deps: [{ token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SliderBase, selector: "kendo-slider-base", inputs: { title: "title", tickPlacement: "tickPlacement", vertical: "vertical", min: "min", max: "max", smallStep: "smallStep", largeStep: "largeStep", fixedTickWidth: "fixedTickWidth", disabled: "disabled", readonly: "readonly", tabindex: "tabindex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "class.k-readonly": "this.readonly", "attr.dir": "this.direction", "class.k-slider-horizontal": "this.horizontalClass", "class.k-slider-vertical": "this.verticalClass", "class.k-slider": "this.sliderClass", "class.k-disabled": "this.disabledClass" } }, queries: [{ propertyName: "labelTemplate", first: true, predicate: LabelTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrap"], descendants: true, static: true }, { propertyName: "track", first: true, predicate: ["track"], descendants: true, static: true }, { propertyName: "sliderSelection", first: true, predicate: ["sliderSelection"], descendants: true, static: true }, { propertyName: "ticksContainer", first: true, predicate: ["ticks"], descendants: true, read: ElementRef }, { propertyName: "ticks", first: true, predicate: ["ticks"], descendants: true }], ngImport: i0, template: ``, isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SliderBase, decorators: [{
type: Component,
args: [{
selector: 'kendo-slider-base',
template: ``
}]
}], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { title: [{
type: Input
}], tickPlacement: [{
type: Input
}], vertical: [{
type: Input
}], min: [{
type: Input
}], max: [{
type: Input
}], smallStep: [{
type: Input
}], largeStep: [{
type: Input
}], fixedTickWidth: [{
type: Input
}], disabled: [{
type: Input
}], readonly: [{
type: Input
}, {
type: HostBinding,
args: ['class.k-readonly']
}], tabindex: [{
type: Input
}], onFocus: [{
type: Output,
args: ['focus']
}], onBlur: [{
type: Output,
args: ['blur']
}], valueChange: [{
type: Output
}], direction: [{
type: HostBinding,
args: ['attr.dir']
}], horizontalClass: [{
type: HostBinding,
args: ['class.k-slider-horizontal']
}], verticalClass: [{
type: HostBinding,
args: ['class.k-slider-vertical']
}], sliderClass: [{
type: HostBinding,
args: ['class.k-slider']
}], disabledClass: [{
type: HostBinding,
args: ['class.k-disabled']
}], wrapper: [{
type: ViewChild,
args: ['wrap', { static: true }]
}], track: [{
type: ViewChild,
args: ['track', { static: true }]
}], sliderSelection: [{
type: ViewChild,
args: ['sliderSelection', { static: true }]
}], ticksContainer: [{
type: ViewChild,
args: ['ticks', { read: ElementRef, static: false }]
}], ticks: [{
type: ViewChild,
args: ['ticks', { static: false }]
}], labelTemplate: [{
type: ContentChild,
args: [LabelTemplateDirective, { static: false }]
}] } });