@catull/igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
1,369 lines • 140 kB
JavaScript
var IgxSliderComponent_1;
import { __decorate, __metadata } from "tslib";
import { CommonModule } from '@angular/common';
import { AfterViewInit, Component, ElementRef, EventEmitter, HostBinding, Input, NgModule, OnInit, Output, Renderer2, ViewChild, TemplateRef, ContentChild, OnDestroy, HostListener, ViewChildren, QueryList, ChangeDetectorRef, OnChanges } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { IgxSliderThumbComponent } from './thumb/thumb-slider.component';
import { Subject, merge, timer } from 'rxjs';
import { takeUntil, throttleTime } from 'rxjs/operators';
import { SliderHandle, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, SliderType, TicksOrientation, TickLabelsOrientation, IgxTickLabelTemplateDirective } from './slider.common';
import { IgxThumbLabelComponent } from './label/thumb-label.component';
import { IgxTicksComponent } from './ticks/ticks.component';
import { IgxTickLabelsPipe } from './ticks/tick.pipe';
import { resizeObservable } from '../core/utils';
const noop = () => {
};
const ɵ0 = noop;
let NEXT_ID = 0;
/**
* **Ignite UI for Angular Slider** -
* [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/slider.html)
*
* The Ignite UI Slider allows selection in a given range by moving the thumb along the track. The track
* can be defined as continuous or stepped, and you can choose between single and range slider types.
*
* Example:
* ```html
* <igx-slider id="slider"
* [minValue]="0" [maxValue]="100"
* [continuous]=true [(ngModel)]="volume">
* </igx-slider>
* ```
*/
let IgxSliderComponent = IgxSliderComponent_1 = class IgxSliderComponent {
constructor(renderer, _el, _cdr) {
this.renderer = renderer;
this._el = _el;
this._cdr = _cdr;
// Limit handle travel zone
this._pMin = 0;
this._pMax = 1;
// From/upperValue in percent values
this._hasViewInit = false;
this._minValue = 0;
this._maxValue = 100;
this._continuous = false;
this._disabled = false;
this._step = 1;
// ticks
this._primaryTicks = 0;
this._secondaryTicks = 0;
this._labels = new Array();
this._type = SliderType.SLIDER;
this._destroyer$ = new Subject();
this._indicatorsDestroyer$ = new Subject();
this._onChangeCallback = noop;
this._onTouchedCallback = noop;
/**
* @hidden
*/
this.thumbs = new QueryList();
/**
* @hidden
*/
this.labelRefs = new QueryList();
/**
* @hidden
*/
this.stepDistance = this._step;
/**
* @hidden
*/
this.onPan = new Subject();
/**
* @hidden
*/
this.role = 'slider';
/**
* @hidden
*/
this.slierClass = true;
/**
* An @Input property that sets the value of the `id` attribute.
* If not provided it will be automatically generated.
* ```html
* <igx-slider [id]="'igx-slider-32'" [(ngModel)]="task.percentCompleted" [step]="5" [lowerBound]="20">
* ```
*/
this.id = `igx-slider-${NEXT_ID++}`;
/**
*An @Input property that sets the duration visibility of thumbs labels. The default value is 750 milliseconds.
*```html
*<igx-slider #slider [thumbLabelVisibilityDuration]="3000" [(ngModel)]="task.percentCompleted" [step]="5">
*```
*/
this.thumbLabelVisibilityDuration = 750;
/**
* Show/hide slider ticks
* ```html
* <igx-slier [showTicks]="true" [primaryTicks]="5"></igx-slier>
* ```
*/
this.showTicks = false;
/**
* show/hide primary tick labels
* ```html
* <igx-slider [primaryTicks]="5" [primaryTickLabels]="false"></igx-slider>
* ```
*/
this.primaryTickLabels = true;
/**
* show/hide secondary tick labels
* ```html
* <igx-slider [secondaryTicks]="5" [secondaryTickLabels]="false"></igx-slider>
* ```
*/
this.secondaryTickLabels = true;
/**
* Changes ticks orientation:
* bottom - The default orienation, below the slider track.
* top - Above the slider track
* mirror - combines top and bottom orientation.
* ```html
* <igx-slider [primaryTicks]="5" [ticksOrientation]="ticksOrientation"></igx-slider>
* ```
*/
this.ticksOrientation = TicksOrientation.Bottom;
/**
* Changes tick labels rotation:
* horizontal - The default rotation
* toptobottom - Rotates tick labels vertically to 90deg
* bottomtotop - Rotate tick labels vertically to -90deg
* ```html
* <igx-slider [primaryTicks]="5" [secondaryTicks]="3" [tickLabelsOrientation]="tickLabelsOrientaiton"></igx-slider>
* ```
*/
this.tickLabelsOrientation = TickLabelsOrientation.Horizontal;
/**
* This event is emitted when user has stopped interacting the thumb and value is changed.
* ```typescript
* public change(event){
* alert("The value has been changed!");
*}
* ```
* ```html
* <igx-slider (onValueChange)="change($event)" #slider [(ngModel)]="task.percentCompleted" [step]="5">
* ```
*/
this.onValueChange = new EventEmitter();
}
get thumbFrom() {
return this.thumbs.find(thumb => thumb.type === SliderHandle.FROM);
}
get thumbTo() {
return this.thumbs.find(thumb => thumb.type === SliderHandle.TO);
}
get labelFrom() {
return this.labelRefs.find(label => label.type === SliderHandle.FROM);
}
get labelTo() {
return this.labelRefs.find(label => label.type === SliderHandle.TO);
}
/**
* @hidden
*/
get valuemin() {
return this.minValue;
}
/**
* @hidden
*/
get valuemax() {
return this.maxValue;
}
/**
* @hidden
*/
get readonly() {
return this.disabled;
}
/**
* @hidden
*/
get disabledClass() {
return this.disabled;
}
/**
* An @Input property that gets the type of the `IgxSliderComponent`. The slider can be SliderType.SLIDER(default) or SliderType.RANGE.
* ```typescript
* @ViewChild("slider2")
* public slider: IgxSliderComponent;
* ngAfterViewInit(){
* let type = this.slider.type;
* }
*/
get type() {
return this._type;
}
/**
* An @Input property that sets the type of the `IgxSliderComponent`. The slider can be SliderType.SLIDER(default) or SliderType.RANGE.
* ```typescript
* sliderType: SliderType = SliderType.RANGE;
* ```
* ```html
* <igx-slider #slider2 [type]="sliderType" [(ngModel)]="rangeValue" [minValue]="0" [maxValue]="100">
* ```
*/
set type(type) {
this._type = type;
if (type === SliderType.SLIDER) {
this.lowerValue = 0;
}
if (this.labelsViewEnabled && this.upperValue > this.maxValue) {
this.upperValue = this.labels.length - 1;
}
if (this._hasViewInit) {
this.updateTrack();
}
}
/**
* Enables `labelView`, by accepting a collection of primitive values with more than one element.
* Each element will be equally spread over the slider and it will serve as a thumb label.
* Once the property is set, it will precendence over {@link maxValue}, {@link minValue}, {@link step}.
* This means that the manipulation for those properties won't be allowed.
*/
get labels() {
return this._labels;
}
set labels(labels) {
this._labels = labels;
this._pMax = this.valueToFraction(this.upperBound, 0, 1);
this._pMin = this.valueToFraction(this.lowerBound, 0, 1);
this.stepDistance = this.calculateStepDistance();
this.positionHandlersAndUpdateTrack();
if (this._hasViewInit) {
this.setTickInterval();
}
}
/**
* Returns the template context corresponding
* to {@link IgxThumbFromTemplateDirective} and {@link IgxThumbToTemplateDirective} templates.
*
* ```typescript
* return {
* $implicit // returns the value of the label,
* labels // returns the labels collection the user has passed.
* }
* ```
*/
get context() {
return {
$implicit: this.value,
labels: this.labels
};
}
/**
* An @Input property that sets the incremental/decremental step of the value when dragging the thumb.
* The default step is 1, and step should not be less or equal than 0.
* ```html
* <igx-slider #slider [(ngModel)]="task.percentCompleted" [step]="5">
* ```
*/
set step(step) {
this._step = step;
this.stepDistance = this.calculateStepDistance();
if (this._hasViewInit) {
this.normalizeByStep(this.value);
this.setTickInterval();
}
}
/**
* Returns the incremental/decremental dragging step of the {@link IgxSliderComponent}.
* ```typescript
* @ViewChild("slider2")
* public slider: IgxSliderComponent;
* ngAfterViewInit(){
* let step = this.slider.step;
* }
* ```
*/
get step() {
return this.labelsViewEnabled ? 1 : this._step;
}
/**
* Returns if the {@link IgxSliderComponent} is disabled.
* ```typescript
* @ViewChild("slider2")
* public slider: IgxSliderComponent;
* ngAfterViewInit(){
* let isDisabled = this.slider.disabled;
* }
* ```
*/
get disabled() {
return this._disabled;
}
/**
*An @Input property that disables or enables UI interaction.
*```html
*<igx-slider #slider [disabled]="'true'" [(ngModel)]="task.percentCompleted" [step]="5" [lowerBound]="20">
*```
*/
set disabled(disable) {
this._disabled = disable;
if (this._hasViewInit) {
this.changeThumbFocusableState(disable);
}
}
/**
* Returns if the {@link IgxSliderComponent} is set as continuous.
* ```typescript
* @ViewChild("slider2")
* public slider: IgxSliderComponent;
* ngAfterViewInit(){
* let continuous = this.slider.continuous;
* }
* ```
*/
get continuous() {
return this._continuous;
}
/**
* An @Input property that marks the {@link IgxSliderComponent} as continuous.
* By default is considered that the {@link IgxSliderComponent} is discrete.
* Discrete {@link IgxSliderComponent} does not have ticks and does not show bubble labels for values.
* ```html
* <igx-slider #slider [continuous]="'true'" [(ngModel)]="task.percentCompleted" [step]="5" [lowerBound]="20">
* ```
*/
set continuous(continuous) {
this._continuous = continuous;
if (this._hasViewInit) {
this.setTickInterval();
}
}
/**
*Returns the minimal value of the `IgxSliderComponent`.
*```typescript
*@ViewChild("slider2")
*public slider: IgxSliderComponent;
*ngAfterViewInit(){
* let sliderMin = this.slider.minValue;
*}
*```
*/
get minValue() {
if (this.labelsViewEnabled) {
return 0;
}
return this._minValue;
}
/**
* Sets the minimal value for the `IgxSliderComponent`.
* The default minimal value is 0.
* ```html
* <igx-slider [type]="sliderType" [minValue]="56" [maxValue]="100">
* ```
*/
set minValue(value) {
if (value >= this.maxValue) {
return;
}
else {
this._minValue = value;
}
if (value > this.upperBound) {
this.updateUpperBoundAndMaxTravelZone();
this.lowerBound = value;
}
// Refresh min travel zone limit.
this._pMin = 0;
// Recalculate step distance.
this.stepDistance = this.calculateStepDistance();
this.positionHandlersAndUpdateTrack();
if (this._hasViewInit) {
this.setTickInterval();
}
}
/**
* Returns the maximum value for the {@link IgxSliderComponent}.
* ```typescript
*@ViewChild("slider")
*public slider: IgxSliderComponent;
*ngAfterViewInit(){
* let sliderMax = this.slider.maxValue;
*}
* ```
*/
get maxValue() {
return this.labelsViewEnabled ?
this.labels.length - 1 :
this._maxValue;
}
/**
* Sets the maximal value for the `IgxSliderComponent`.
* The default maximum value is 100.
* ```html
* <igx-slider [type]="sliderType" [minValue]="56" [maxValue]="256">
* ```
*/
set maxValue(value) {
if (value <= this._minValue) {
return;
}
else {
this._maxValue = value;
}
if (value < this.lowerBound) {
this.updateLowerBoundAndMinTravelZone();
this.upperBound = value;
}
// refresh max travel zone limits.
this._pMax = 1;
// recalculate step distance.
this.stepDistance = this.calculateStepDistance();
this.positionHandlersAndUpdateTrack();
if (this._hasViewInit) {
this.setTickInterval();
}
}
/**
* Returns the lower boundary of the `IgxSliderComponent`.
*```typescript
*@ViewChild("slider")
*public slider: IgxSliderComponent;
*ngAfterViewInit(){
* let sliderLowBound = this.slider.lowerBound;
*}
*```
*/
get lowerBound() {
if (!Number.isNaN(this._lowerBound) && this._lowerBound !== undefined) {
return this.valueInRange(this._lowerBound, this.minValue, this.maxValue);
}
return this.minValue;
}
/**
* Sets the lower boundary of the `IgxSliderComponent`.
* If not set is the same as min value.
* ```html
* <igx-slider [step]="5" [lowerBound]="20">
* ```
*/
set lowerBound(value) {
if (value >= this.upperBound || (this.labelsViewEnabled && value < 0)) {
return;
}
this._lowerBound = this.valueInRange(value, this.minValue, this.maxValue);
// Refresh min travel zone.
this._pMin = this.valueToFraction(this._lowerBound, 0, 1);
this.positionHandlersAndUpdateTrack();
}
/**
* Returns the upper boundary of the `IgxSliderComponent`.
* ```typescript
*@ViewChild("slider")
*public slider: IgxSliderComponent;
*ngAfterViewInit(){
* let sliderUpBound = this.slider.upperBound;
*}
* ```
*/
get upperBound() {
if (!Number.isNaN(this._upperBound) && this._upperBound !== undefined) {
return this.valueInRange(this._upperBound, this.minValue, this.maxValue);
}
return this.maxValue;
}
/**
* Sets the upper boundary of the `IgxSliderComponent`.
* If not set is the same as max value.
* ```html
* <igx-slider [step]="5" [upperBound]="20">
* ```
*/
set upperBound(value) {
if (value <= this.lowerBound || (this.labelsViewEnabled && value > this.labels.length - 1)) {
return;
}
this._upperBound = this.valueInRange(value, this.minValue, this.maxValue);
// Refresh time travel zone.
this._pMax = this.valueToFraction(this._upperBound, 0, 1);
this.positionHandlersAndUpdateTrack();
}
/**
* Returns the slider value. If the slider is of type {@link SliderType.SLIDER} the returned value is number.
* If the slider type is {@link SliderType.RANGE} the returned value represents an object of {@link lowerValue} and {@link upperValue}.
*```typescript
*@ViewChild("slider2")
*public slider: IgxSliderComponent;
*public sliderValue(event){
* let sliderVal = this.slider.value;
*}
*```
*/
get value() {
if (this.isRange) {
return {
lower: this.valueInRange(this.lowerValue, this.lowerBound, this.upperBound),
upper: this.valueInRange(this.upperValue, this.lowerBound, this.upperBound)
};
}
else {
return this.valueInRange(this.upperValue, this.lowerBound, this.upperBound);
}
}
/**
* Sets the slider value.
* If the slider is of type {@link SliderType.SLIDER} the argument is number. By default the {@link value} gets the {@link lowerBound}.
* If the slider type is {@link SliderType.RANGE} the argument
* represents an object of {@link lowerValue} and {@link upperValue} properties.
* By default the object is associated with the {@link lowerBound} and {@link upperBound} property values.
* ```typescript
*rangeValue = {
* lower: 30,
* upper: 60
*};
* ```
* ```html
* <igx-slider [type]="sliderType" [(ngModel)]="rangeValue" [minValue]="56" [maxValue]="256">
* ```
*/
set value(value) {
if (!this.isRange) {
this.upperValue = value - (value % this.step);
}
else {
value = this.validateInitialValue(value);
this.upperValue = value.upper;
this.lowerValue = value.lower;
}
this._onChangeCallback(this.value);
if (this._hasViewInit) {
this.positionHandlersAndUpdateTrack();
}
}
/**
* Returns the number of the presented primary ticks.
* ```typescript
* const primaryTicks = this.slider.primaryTicks;
* ```
*/
get primaryTicks() {
if (this.labelsViewEnabled) {
return this._primaryTicks = this.labels.length;
}
return this._primaryTicks;
}
/**
* Sets the number of primary ticks. If {@link @labels} is enabled, this property won't function.
* Insted enable ticks by {@link showTicks} property.
* ```typescript
* this.slider.primaryTicks = 5;
* ```
*/
set primaryTicks(val) {
if (val <= 1) {
return;
}
this._primaryTicks = val;
}
/**
* Returns the number of the presented secondary ticks.
* ```typescript
* const secondaryTicks = this.slider.secondaryTicks;
* ```
*/
get secondaryTicks() {
return this._secondaryTicks;
}
/**
* Sets the number of secondary ticks. The property functions even when {@link labels} is enabled,
* but all secondary ticks won't present any tick labels.
* ```typescript
* this.slider.secondaryTicks = 5;
* ```
*/
set secondaryTicks(val) {
if (val < 1) {
return;
}
this._secondaryTicks = val;
}
/**
* @hidden
*/
get deactivateThumbLabel() {
return ((this.primaryTicks && this.primaryTickLabels) || (this.secondaryTicks && this.secondaryTickLabels)) &&
(this.ticksOrientation === TicksOrientation.Top || this.ticksOrientation === TicksOrientation.Mirror);
}
/**
* @hidden
*/
onPointerDown($event) {
this.findClosestThumb($event);
if (!this.thumbTo.isActive && this.thumbFrom === undefined) {
return;
}
const activeThumb = this.thumbTo.isActive ? this.thumbTo : this.thumbFrom;
activeThumb.nativeElement.setPointerCapture($event.pointerId);
this.showSliderIndicators();
$event.preventDefault();
}
/**
* @hidden
*/
onPointerUp($event) {
if (!this.thumbTo.isActive && this.thumbFrom === undefined) {
return;
}
const activeThumb = this.thumbTo.isActive ? this.thumbTo : this.thumbTo;
activeThumb.nativeElement.releasePointerCapture($event.pointerId);
this.hideSliderIndicators();
}
/**
* @hidden
*/
onFocus() {
this.toggleSliderIndicators();
}
/**
* @hidden
*/
onPanListener($event) {
this.update($event.srcEvent.clientX);
}
/**
* @hidden
*/
onPanStart() {
this.showSliderIndicators();
}
/**
* @hidden
*/
onPanEnd() {
this.hideSliderIndicators();
}
/**
*Returns whether the `IgxSliderComponent` type is RANGE.
*```typescript
*@ViewChild("slider")
*public slider: IgxSliderComponent;
*ngAfterViewInit(){
* let sliderRange = this.slider.isRange;
*}
* ```
*/
get isRange() {
return this.type === SliderType.RANGE;
}
/**
* Returns the lower value of the `IgxSliderComponent`.
* ```typescript
* @ViewChild("slider")
* public slider: IgxSliderComponent;
* public lowValue(event){
* let sliderLowValue = this.slider.lowerValue;
*}
*```
*/
get lowerValue() {
if (!Number.isNaN(this._lowerValue) && this._lowerValue !== undefined && this._lowerValue >= this.lowerBound) {
return this._lowerValue;
}
return this.lowerBound;
}
/**
*Sets the lower value of the `IgxSliderComponent`.
*```typescript
*@ViewChild("slider2")
*public slider: IgxSliderComponent;
*public lowValue(event){
* this.slider.lowerValue = 120;
*}
*```
*/
set lowerValue(value) {
value = this.valueInRange(value, this.lowerBound, this.upperBound);
this._lowerValue = value;
}
/**
*Returns the upper value of the `IgxSliderComponent`.
*```typescript
*@ViewChild("slider2")
*public slider: IgxSliderComponent;
*public upperValue(event){
* let upperValue = this.slider.upperValue;
*}
*```
*/
get upperValue() {
if (!Number.isNaN(this._upperValue) && this._upperValue !== undefined && this._upperValue <= this.upperBound) {
return this._upperValue;
}
return this.upperBound;
}
/**
*Sets the upper value of the `IgxSliderComponent`.
*```typescript
*@ViewChild("slider2")
*public slider: IgxSliderComponent;
*public upperValue(event){
* this.slider.upperValue = 120;
*}
*```
*/
set upperValue(value) {
value = this.valueInRange(value, this.lowerBound, this.upperBound);
this._upperValue = value;
}
/**
* Returns the value corresponding the lower label.
*```typescript
* @ViewChild("slider")
* public slider: IgxSliderComponent;
* let label = this.slider.lowerLabel;
*```
*/
get lowerLabel() {
return this.labelsViewEnabled ?
this.labels[this.lowerValue] :
this.lowerValue;
}
/**
* Returns the value corresponding the upper label.
*```typescript
* @ViewChild("slider")
* public slider: IgxSliderComponent;
* let label = this.slider.upperLabel;
*```
*/
get upperLabel() {
return this.labelsViewEnabled ?
this.labels[this.upperValue] :
this.upperValue;
}
/**
* Returns if label view is enabled.
* If the {@link labels} is set, the view is automatically activated.
*```typescript
* @ViewChild("slider")
* public slider: IgxSliderComponent;
* let labelView = this.slider.labelsViewEnabled;
*```
*/
get labelsViewEnabled() {
return !!(this.labels && this.labels.length > 1);
}
/**
* @hidden
*/
get showTopTicks() {
return this.ticksOrientation === TicksOrientation.Top ||
this.ticksOrientation === TicksOrientation.Mirror;
}
/**
* @hidden
*/
get showBottomTicks() {
return this.ticksOrientation === TicksOrientation.Bottom ||
this.ticksOrientation === TicksOrientation.Mirror;
}
/**
* @hidden
*/
ngOnInit() {
this.sliderSetup();
// Set track travel zone
this._pMin = this.valueToFraction(this.lowerBound) || 0;
this._pMax = this.valueToFraction(this.upperBound) || 1;
}
ngOnChanges(changes) {
if (changes.minValue && changes.maxValue &&
changes.minValue.currentValue < changes.maxValue.currentValue) {
this._maxValue = changes.maxValue.currentValue;
this._minValue = changes.minValue.currentValue;
}
}
/**
* @hidden
*/
ngAfterViewInit() {
this._hasViewInit = true;
this.positionHandlersAndUpdateTrack();
this.setTickInterval();
this.changeThumbFocusableState(this.disabled);
this.subscribeTo(this.thumbFrom, this.thumbChanged.bind(this));
this.subscribeTo(this.thumbTo, this.thumbChanged.bind(this));
this.thumbs.changes.pipe(takeUntil(this._destroyer$)).subscribe(change => {
const thumbFrom = change.find((thumb) => thumb.type === SliderHandle.FROM);
this.positionHandler(thumbFrom, null, this.lowerValue);
this.subscribeTo(thumbFrom, this.thumbChanged.bind(this));
this.changeThumbFocusableState(this.disabled);
});
this.labelRefs.changes.pipe(takeUntil(this._destroyer$)).subscribe(change => {
const labelFrom = this.labelRefs.find((label) => label.type === SliderHandle.FROM);
this.positionHandler(null, labelFrom, this.lowerValue);
});
resizeObservable(this._el.nativeElement).pipe(throttleTime(40), takeUntil(this._destroyer$)).subscribe(() => {
this.stepDistance = this.calculateStepDistance();
});
}
/**
* @hidden
*/
ngOnDestroy() {
this._destroyer$.next(true);
this._destroyer$.complete();
this._indicatorsDestroyer$.next(true);
this._indicatorsDestroyer$.complete();
}
/**
* @hidden
*/
writeValue(value) {
if (!value) {
return;
}
this.normalizeByStep(value);
}
/**
* @hidden
*/
registerOnChange(fn) {
this._onChangeCallback = fn;
}
/**
* @hidden
*/
registerOnTouched(fn) {
this._onTouchedCallback = fn;
}
/** @hidden */
getEditElement() {
return this.isRange ? this.thumbFrom.nativeElement : this.thumbTo.nativeElement;
}
/**
*
* @hidden
*/
update(mouseX) {
if (this.disabled) {
return;
}
// Update To/From Values
this.onPan.next(mouseX);
// Finally do positionHandlersAndUpdateTrack the DOM
// based on data values
this.positionHandlersAndUpdateTrack();
this._onTouchedCallback();
}
/**
* @hidden
*/
thumbChanged(value, thumbType) {
const oldValue = this.value;
let newVal;
if (this.isRange) {
if (thumbType === SliderHandle.FROM) {
newVal = {
lower: this.value.lower + value,
upper: this.value.upper
};
}
else {
newVal = {
lower: this.value.lower,
upper: this.value.upper + value
};
}
// Swap the thumbs if a collision appears.
if (newVal.lower >= newVal.upper) {
this.value = this.swapThumb(newVal);
}
else {
this.value = newVal;
}
}
else {
this.value = this.value + value;
}
if (this.hasValueChanged(oldValue)) {
this.emitValueChanged(oldValue);
}
}
/**
* @hidden
*/
onThumbChange() {
this.toggleSliderIndicators();
}
/**
* @hidden
*/
onHoverChange(state) {
return state ? this.showSliderIndicators() : this.hideSliderIndicators();
}
swapThumb(value) {
if (this.thumbFrom.isActive) {
value.upper = this.upperValue;
value.lower = this.upperValue;
}
else {
value.upper = this.lowerValue;
value.lower = this.lowerValue;
}
this.toggleThumb();
return value;
}
findClosestThumb(event) {
if (this.isRange) {
this.closestHandle(event);
}
else {
this.thumbTo.nativeElement.focus();
}
this.update(event.clientX);
}
updateLowerBoundAndMinTravelZone() {
this.lowerBound = this.minValue;
this._pMin = 0;
}
updateUpperBoundAndMaxTravelZone() {
this.upperBound = this.maxValue;
this._pMax = 1;
}
sliderSetup() {
/**
* if {@link SliderType.SLIDER} than the initial value shold be the lowest one.
*/
if (!this.isRange && this._upperValue === undefined) {
this._upperValue = this.lowerBound;
}
}
calculateStepDistance() {
return this._el.nativeElement.getBoundingClientRect().width / (this.maxValue - this.minValue) * this.step;
}
toggleThumb() {
return this.thumbFrom.isActive ?
this.thumbTo.nativeElement.focus() :
this.thumbFrom.nativeElement.focus();
}
valueInRange(value, min = 0, max = 100) {
return Math.max(Math.min(value, max), min);
}
generateTickMarks(color, interval) {
return interval !== null ? `repeating-linear-gradient(
${'to left'},
${color},
${color} 1.5px,
transparent 1.5px,
transparent ${interval}%
), repeating-linear-gradient(
${'to right'},
${color},
${color} 1.5px,
transparent 1.5px,
transparent ${interval}%
)` : interval;
}
positionHandler(thumbHandle, labelHandle, position) {
const positionLeft = `${this.valueToFraction(position) * 100}%`;
if (thumbHandle) {
thumbHandle.nativeElement.style.left = positionLeft;
}
if (labelHandle) {
labelHandle.nativeElement.style.left = positionLeft;
}
}
positionHandlersAndUpdateTrack() {
if (!this.isRange) {
this.positionHandler(this.thumbTo, this.labelTo, this.value);
}
else {
this.positionHandler(this.thumbTo, this.labelTo, this.value.upper);
this.positionHandler(this.thumbFrom, this.labelFrom, this.value.lower);
}
if (this._hasViewInit) {
this.updateTrack();
}
}
closestHandle(event) {
const fromOffset = this.thumbFrom.nativeElement.offsetLeft + this.thumbFrom.nativeElement.offsetWidth / 2;
const toOffset = this.thumbTo.nativeElement.offsetLeft + this.thumbTo.nativeElement.offsetWidth / 2;
const xPointer = event.clientX - this._el.nativeElement.getBoundingClientRect().left;
const match = this.closestTo(xPointer, [fromOffset, toOffset]);
if (fromOffset === toOffset && toOffset < xPointer) {
this.thumbTo.nativeElement.focus();
}
else if (fromOffset === toOffset && toOffset > xPointer) {
this.thumbFrom.nativeElement.focus();
}
else if (match === fromOffset) {
this.thumbFrom.nativeElement.focus();
}
else {
this.thumbTo.nativeElement.focus();
}
}
setTickInterval() {
let interval;
const trackProgress = 100;
if (this.labelsViewEnabled) {
// Calc ticks depending on the labels length;
interval = ((trackProgress / (this.labels.length - 1) * 10)) / 10;
}
else {
const trackRange = this.maxValue - this.minValue;
interval = this.step > 1 ?
(trackProgress / ((trackRange / this.step)) * 10) / 10
: null;
}
const renderCallbackExecution = !this.continuous ? this.generateTickMarks('white', interval) : null;
this.renderer.setStyle(this.ticks.nativeElement, 'background', renderCallbackExecution);
}
showSliderIndicators() {
if (this.disabled) {
return;
}
if (this._indicatorsTimer) {
this._indicatorsDestroyer$.next(true);
this._indicatorsTimer = null;
}
this.thumbTo.showThumbIndicators();
this.labelTo.active = true;
if (this.thumbFrom) {
this.thumbFrom.showThumbIndicators();
}
if (this.labelFrom) {
this.labelFrom.active = true;
}
}
hideSliderIndicators() {
if (this.disabled) {
return;
}
this._indicatorsTimer = timer(this.thumbLabelVisibilityDuration);
this._indicatorsTimer.pipe(takeUntil(this._indicatorsDestroyer$)).subscribe(() => {
this.thumbTo.hideThumbIndicators();
this.labelTo.active = false;
if (this.thumbFrom) {
this.thumbFrom.hideThumbIndicators();
}
if (this.labelFrom) {
this.labelFrom.active = false;
}
});
}
toggleSliderIndicators() {
this.showSliderIndicators();
this.hideSliderIndicators();
}
changeThumbFocusableState(state) {
const value = state ? -1 : 1;
if (this.isRange) {
this.thumbFrom.tabindex = value;
}
this.thumbTo.tabindex = value;
this._cdr.detectChanges();
}
closestTo(goal, positions) {
return positions.reduce((previous, current) => {
return (Math.abs(goal - current) < Math.abs(goal - previous) ? current : previous);
});
}
valueToFraction(value, pMin = this._pMin, pMax = this._pMax) {
return this.valueInRange((value - this.minValue) / (this.maxValue - this.minValue), pMin, pMax);
}
/**
* @hidden
* Normalizе the value when two-way data bind is used and {@link this.step} is set.
* @param value
*/
normalizeByStep(value) {
if (this.isRange) {
this.value = {
lower: value.lower - (value.lower % this.step),
upper: value.upper - (value.upper % this.step)
};
}
else {
this.value = value - (value % this.step);
}
}
updateTrack() {
const fromPosition = this.valueToFraction(this.lowerValue);
const toPosition = this.valueToFraction(this.upperValue);
const positionGap = toPosition - fromPosition;
let trackLeftIndention = fromPosition;
if (this.isRange) {
if (positionGap) {
trackLeftIndention = Math.round((1 / positionGap * fromPosition) * 100);
}
this.renderer.setStyle(this.trackRef.nativeElement, 'transform', `scaleX(${positionGap}) translateX(${trackLeftIndention}%)`);
}
else {
this.renderer.setStyle(this.trackRef.nativeElement, 'transform', `scaleX(${toPosition})`);
}
}
validateInitialValue(value) {
if (value.lower < this.lowerBound && value.upper < this.lowerBound) {
value.upper = this.lowerBound;
value.lower = this.lowerBound;
}
if (value.lower > this.upperBound && value.upper > this.upperBound) {
value.upper = this.upperBound;
value.lower = this.upperBound;
}
if (value.upper < value.lower) {
value.upper = this.upperValue;
value.lower = this.lowerValue;
}
return value;
}
subscribeTo(thumb, callback) {
if (!thumb) {
return;
}
thumb.onThumbValueChange
.pipe(takeUntil(this.unsubscriber(thumb)))
.subscribe(value => callback(value, thumb.type));
}
unsubscriber(thumb) {
return merge(this._destroyer$, thumb.destroy);
}
hasValueChanged(oldValue) {
const isSliderWithDifferentValue = !this.isRange && oldValue !== this.value;
const isRangeWithOneDifferentValue = this.isRange &&
(oldValue.lower !== this.value.lower ||
oldValue.upper !== this.value.upper);
return isSliderWithDifferentValue || isRangeWithOneDifferentValue;
}
emitValueChanged(oldValue) {
this.onValueChange.emit({ oldValue, value: this.value });
}
};
IgxSliderComponent.ctorParameters = () => [
{ type: Renderer2 },
{ type: ElementRef },
{ type: ChangeDetectorRef }
];
__decorate([
ViewChild('ticks', { static: true }),
__metadata("design:type", ElementRef)
], IgxSliderComponent.prototype, "ticks", void 0);
__decorate([
ViewChildren(IgxSliderThumbComponent),
__metadata("design:type", QueryList)
], IgxSliderComponent.prototype, "thumbs", void 0);
__decorate([
ViewChildren(IgxThumbLabelComponent),
__metadata("design:type", QueryList)
], IgxSliderComponent.prototype, "labelRefs", void 0);
__decorate([
ViewChild('track', { static: true }),
__metadata("design:type", ElementRef)
], IgxSliderComponent.prototype, "trackRef", void 0);
__decorate([
ContentChild(IgxThumbFromTemplateDirective, { read: TemplateRef }),
__metadata("design:type", TemplateRef)
], IgxSliderComponent.prototype, "thumbFromTemplateRef", void 0);
__decorate([
ContentChild(IgxThumbToTemplateDirective, { read: TemplateRef }),
__metadata("design:type", TemplateRef)
], IgxSliderComponent.prototype, "thumbToTemplateRef", void 0);
__decorate([
ContentChild(IgxTickLabelTemplateDirective, { read: TemplateRef, static: false }),
__metadata("design:type", TemplateRef)
], IgxSliderComponent.prototype, "tickLabelTemplateRef", void 0);
__decorate([
HostBinding(`attr.role`),
__metadata("design:type", Object)
], IgxSliderComponent.prototype, "role", void 0);
__decorate([
HostBinding(`attr.aria-valuemin`),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], IgxSliderComponent.prototype, "valuemin", null);
__decorate([
HostBinding(`attr.aria-valuemax`),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], IgxSliderComponent.prototype, "valuemax", null);
__decorate([
HostBinding(`attr.aria-readonly`),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], IgxSliderComponent.prototype, "readonly", null);
__decorate([
HostBinding('class.igx-slider'),
__metadata("design:type", Object)
], IgxSliderComponent.prototype, "slierClass", void 0);
__decorate([
HostBinding('class.igx-slider--disabled'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], IgxSliderComponent.prototype, "disabledClass", null);
__decorate([
HostBinding('attr.id'),
Input(),
__metadata("design:type", Object)
], IgxSliderComponent.prototype, "id", void 0);
__decorate([
Input(),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], IgxSliderComponent.prototype, "type", null);
__decorate([
Input(),
__metadata("design:type", Object)
], IgxSliderComponent.prototype, "thumbLabelVisibilityDuration", void 0);
__decorate([
Input(),
__metadata("design:type", Array),
__metadata("design:paramtypes", [Array])
], IgxSliderComponent.prototype, "labels", null);
__decorate([
Input(),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], IgxSliderComponent.prototype, "step", null);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], IgxSliderComponent.prototype, "disabled", null);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], IgxSliderComponent.prototype, "continuous", null);
__decorate([
Input(),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], IgxSliderComponent.prototype, "minValue", null);
__decorate([
Input(),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], IgxSliderComponent.prototype, "maxValue", null);
__decorate([
Input(),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], IgxSliderComponent.prototype, "lowerBound", null);
__decorate([
Input(),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], IgxSliderComponent.prototype, "upperBound", null);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], IgxSliderComponent.prototype, "value", null);
__decorate([
Input(),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], IgxSliderComponent.prototype, "primaryTicks", null);
__decorate([
Input(),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], IgxSliderComponent.prototype, "secondaryTicks", null);
__decorate([
Input(),
__metadata("design:type", Object)
], IgxSliderComponent.prototype, "showTicks", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], IgxSliderComponent.prototype, "primaryTickLabels", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], IgxSliderComponent.prototype, "secondaryTickLabels", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], IgxSliderComponent.prototype, "ticksOrientation", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], IgxSliderComponent.prototype, "tickLabelsOrientation", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], IgxSliderComponent.prototype, "onValueChange", void 0);
__decorate([
HostListener('pointerdown', ['$event']),
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], IgxSliderComponent.prototype, "onPointerDown", null);
__decorate([
HostListener('pointerup', ['$event']),
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], IgxSliderComponent.prototype, "onPointerUp", null);
__decorate([
HostListener('focus'),
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], IgxSliderComponent.prototype, "onFocus", null);
__decorate([
HostListener('pan', ['$event']),
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], IgxSliderComponent.prototype, "onPanListener", null);
__decorate([
HostListener('panstart'),
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], IgxSliderComponent.prototype, "onPanStart", null);
__decorate([
HostListener('panend'),
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], IgxSliderComponent.prototype, "onPanEnd", null);
IgxSliderComponent = IgxSliderComponent_1 = __decorate([
Component({
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSliderComponent_1, multi: true }],
selector: 'igx-slider',
template: "<div class=\"igx-slider__track\">\n <igx-ticks\n *ngIf=\"showTicks && showTopTicks\"\n [ticksOrientation]=\"0\"\n [primaryTicks]=\"primaryTicks\"\n [secondaryTicks]=\"secondaryTicks\"\n [primaryTickLabels]=\"primaryTickLabels\"\n [secondaryTickLabels]=\"secondaryTickLabels\"\n [tickLabelsOrientation]=\"tickLabelsOrientation\"\n [labelsViewEnabled]=\"labelsViewEnabled\"\n [labels]=\"labels | spreadTickLabels:secondaryTicks\"\n [tickLabelTemplateRef]=\"tickLabelTemplateRef\"\n [minValue]=\"minValue\"\n [maxValue]=\"maxValue\"></igx-ticks>\n\n <div #track class=\"igx-slider__track-fill\"></div>\n <div #ticks class=\"igx-slider__track-steps\"></div>\n\n <igx-ticks\n *ngIf=\"showTicks && showBottomTicks\"\n [ticksOrientation]=\"1\"\n [primaryTicks]=\"primaryTicks\"\n [secondaryTicks]=\"secondaryTicks\"\n [primaryTickLabels]=\"primaryTickLabels\"\n [secondaryTickLabels]=\"secondaryTickLabels\"\n [tickLabelsOrientation]=\"tickLabelsOrientation\"\n [labelsViewEnabled]=\"labelsViewEnabled\"\n [labels]=\"labels | spreadTickLabels:secondaryTicks\"\n [tickLabelTemplateRef]=\"tickLabelTemplateRef\"\n [minValue]=\"minValue\"\n [maxValue]=\"maxValue\"></igx-ticks>\n</div>\n<div class=\"igx-slider__thumbs\">\n <igx-thumb-label\n *ngIf=\"isRange\"\n [type]=\"0\"\n [value]=\"lowerLabel\"\n [templateRef]=\"thumbFromTemplateRef\"\n [continuous]=\"continuous\"\n [context]=\"context\"\n [deactiveState]=\"deactivateThumbLabel\"></igx-thumb-label>\n\n <igx-thumb\n *ngIf=\"isRange\"\n #thumbFrom\n [type]=\"0\"\n [value]=\"lowerLabel\"\n [disabled]=\"disabled\"\n [continuous]=\"continuous\"\n [onPan]=\"onPan\"\n [stepDistance]=\"stepDistance\"\n [step]=\"step\"\n [templateRef]=\"thumbFromTemplateRef\"\n [context]=\"context\"\n (onChange)=\"onThumbChange()\"\n (onHoverChange)=\"onHoverChange($event)\"\n [deactiveState]=\"deactivateThumbLabel\"\n [thumbLabelVisibilityDuration]=\"thumbLabelVisibilityDuration\"></igx-thumb>\n\n <igx-thumb-label\n [value]=\"upperLabel\"\n [type]=\"1\"\n [templateRef]=\"thumbToTemplateRef\"\n [continuous]=\"continuous\"\n [context]=\"context\"\n [deactiveState]=\"deactivateThumbLabel\"></igx-thumb-label>\n\n <igx-thumb\n #thumbTo\n [type]=\"1\"\n [value]=\"upperLabel\"\n [disabled]=\"disabled\"\n [continuous]=\"continuous\"\n [onPan]=\"onPan\"\n [stepDistance]=\"stepDistance\"\n [step]=\"step\"\n [templateRef]=\"thumbToTemplateRef\"\n [context]=\"context\"\n (onChange)=\"onThumbChange()\"\n (onHoverChange)=\"onHoverChange($event)\"\n [deactiveState]=\"deactivateThumbLabel\"\n [thumbLabelVisibilityDuration]=\"thumbLabelVisibilityDuration\"></igx-thumb>\n</div>\n"
}),
__metadata("design:paramtypes", [Renderer2,
ElementRef,
ChangeDetectorRef])
], IgxSliderComponent);
export { IgxSliderComponent };
/**
* @hidden
*/
let IgxSliderModule = class IgxSliderModule {
};
IgxSliderModule = __decorate([
NgModule({
declarations: [
IgxSliderComponent,
IgxThumbFromTemplateDirective,
IgxThumbToTemplateDirective,
IgxTickLabelTemplateDirective,
IgxSliderThumbComponent,
IgxThumbLabelComponent,
IgxTicksComponent,
IgxTickLabelsPipe
],
exports: [
IgxSliderComponent,
IgxThumbFromTemplateDirective,
IgxThumbToTemplateDirective,
IgxTickLabelTemplateDirective,
IgxSliderThumbComponent,
IgxThumbLabelComponent,
IgxTicksComponent
],
imports: [CommonModule, FormsModule]
})
], IgxSliderModule);
export { IgxSliderModule };
export { ɵ0 };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL2lnbml0ZXVpLWFuZ3VsYXIvIiwic291cmNlcyI6WyJsaWIvc2xpZGVyL3NsaWRlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7QUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUNILGFBQWEsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLFlBQVksRUFDbEQsV0FBVyxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQ3ZELFNBQVMsRUFDVCxXQUFXLEVBQ1gsWUFBWSxFQUNaLFNBQVMsRUFDVCxZQUFZLEVBQ1osWUFBWSxFQUNaLFNBQVMsRUFDVCxpQkFBaUIsRUFDakIsU0FBUyxFQUNaLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBd0IsaUJBQWlCLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFdEYsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFDekUsT0FBTyxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQWMsS0FBSyxFQUFRLE1BQU0sTUFBTSxDQUFDO0FBQy9ELE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDekQsT0FBTyxFQUFFLFlBQVksRUFDakIsNkJBQTZCLEVBQzdCLDJCQUEyQixFQUUzQixVQUFVLEVBRVYsZ0JBQWdCLEVBQ2hCLHFCQUFxQixFQUNyQiw2QkFBNkIsRUFDaEMsTUFBTSxpQkFBaUIsQ0FBQztBQUN6QixPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUN2RSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUM1RCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUN0RCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFakQsTUFBTSxJQUFJLEdBQUcsR0FBRyxFQUFFO0FBQ2xCLENBQUMsQ0FBQzs7QUFFRixJQUFJLE9BQU8sR0FBRyxDQUFDLENBQUM7QUFFaEI7Ozs7Ozs7Ozs7Ozs7O0dBY0c7QUFNSCxJQUFhLGtCQUFrQiwwQkFBL0IsTUFBYSxrQkFBa0I7SUF5ckIzQixZQUNZLFFBQW1CLEVBQ25CLEdBQWUsRUFDZixJQUF1QjtRQUZ2QixhQUFRLEdBQVIsUUFBUSxDQUFXO1FBQ25CLFFBQUcsR0FBSCxHQUFHLENBQVk7UUFDZixTQUFJLEdBQUosSUFBSSxDQUFtQjtRQXByQm5DLDJCQUEyQjtRQUNuQixVQUFLLEdBQUcsQ0FBQyxDQUFDO1FBQ1YsVUFBSyxHQUFHLENBQUMsQ0FBQztRQUVsQixvQ0FBb0M7UUFDNUIsaUJBQVksR0FBRyxLQUFLLENBQUM7UUFDckIsY0FBUyxHQUFHLENBQUMsQ0FBQztRQUNkLGNBQVMsR0FBRyxHQUFHLENBQUM7UUFLaEIsZ0JBQVcsR0FBRyxLQUFLLENBQUM7UUFDcEIsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUNsQixVQUFLLEdBQUcsQ0FBQyxDQUFDO1FBRWxCLFFBQVE7UUFDQSxrQkFBYSxHQUFHLENBQUMsQ0FBQztRQUNsQixvQkFBZSxHQUFHLENBQUMsQ0FBQztRQUVwQixZQUFPLEdBQUcsSUFBSSxLQUFLLEVBQXdDLENBQUM7UUFDNUQsVUFBSyxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFFMUIsZ0JBQVcsR0FBRyxJQUFJLE9BQU8sRUFBVyxDQUFDO1FBQ3JDLDB