@catull/igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
1,368 lines • 151 kB
JavaScript
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';
var noop = function () {
};
var ɵ0 = noop;
var 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>
* ```
*/
var IgxSliderComponent = /** @class */ (function () {
function IgxSliderComponent(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();
}
IgxSliderComponent_1 = IgxSliderComponent;
Object.defineProperty(IgxSliderComponent.prototype, "thumbFrom", {
get: function () {
return this.thumbs.find(function (thumb) { return thumb.type === SliderHandle.FROM; });
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxSliderComponent.prototype, "thumbTo", {
get: function () {
return this.thumbs.find(function (thumb) { return thumb.type === SliderHandle.TO; });
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxSliderComponent.prototype, "labelFrom", {
get: function () {
return this.labelRefs.find(function (label) { return label.type === SliderHandle.FROM; });
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxSliderComponent.prototype, "labelTo", {
get: function () {
return this.labelRefs.find(function (label) { return label.type === SliderHandle.TO; });
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxSliderComponent.prototype, "valuemin", {
/**
* @hidden
*/
get: function () {
return this.minValue;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxSliderComponent.prototype, "valuemax", {
/**
* @hidden
*/
get: function () {
return this.maxValue;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxSliderComponent.prototype, "readonly", {
/**
* @hidden
*/
get: function () {
return this.disabled;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxSliderComponent.prototype, "disabledClass", {
/**
* @hidden
*/
get: function () {
return this.disabled;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxSliderComponent.prototype, "type", {
/**
* 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: function () {
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: function (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();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxSliderComponent.prototype, "labels", {
/**
* 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: function () {
return this._labels;
},
set: function (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();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxSliderComponent.prototype, "context", {
/**
* 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: function () {
return {
$implicit: this.value,
labels: this.labels
};
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxSliderComponent.prototype, "step", {
/**
* Returns the incremental/decremental dragging step of the {@link IgxSliderComponent}.
* ```typescript
* @ViewChild("slider2")
* public slider: IgxSliderComponent;
* ngAfterViewInit(){
* let step = this.slider.step;
* }
* ```
*/
get: function () {
return this.labelsViewEnabled ? 1 : this._step;
},
/**
* 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: function (step) {
this._step = step;
this.stepDistance = this.calculateStepDistance();
if (this._hasViewInit) {
this.normalizeByStep(this.value);
this.setTickInterval();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxSliderComponent.prototype, "disabled", {
/**
* Returns if the {@link IgxSliderComponent} is disabled.
* ```typescript
* @ViewChild("slider2")
* public slider: IgxSliderComponent;
* ngAfterViewInit(){
* let isDisabled = this.slider.disabled;
* }
* ```
*/
get: function () {
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: function (disable) {
this._disabled = disable;
if (this._hasViewInit) {
this.changeThumbFocusableState(disable);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxSliderComponent.prototype, "continuous", {
/**
* Returns if the {@link IgxSliderComponent} is set as continuous.
* ```typescript
* @ViewChild("slider2")
* public slider: IgxSliderComponent;
* ngAfterViewInit(){
* let continuous = this.slider.continuous;
* }
* ```
*/
get: function () {
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: function (continuous) {
this._continuous = continuous;
if (this._hasViewInit) {
this.setTickInterval();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxSliderComponent.prototype, "minValue", {
/**
*Returns the minimal value of the `IgxSliderComponent`.
*```typescript
*@ViewChild("slider2")
*public slider: IgxSliderComponent;
*ngAfterViewInit(){
* let sliderMin = this.slider.minValue;
*}
*```
*/
get: function () {
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: function (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();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxSliderComponent.prototype, "maxValue", {
/**
* Returns the maximum value for the {@link IgxSliderComponent}.
* ```typescript
*@ViewChild("slider")
*public slider: IgxSliderComponent;
*ngAfterViewInit(){
* let sliderMax = this.slider.maxValue;
*}
* ```
*/
get: function () {
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: function (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();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxSliderComponent.prototype, "lowerBound", {
/**
* Returns the lower boundary of the `IgxSliderComponent`.
*```typescript
*@ViewChild("slider")
*public slider: IgxSliderComponent;
*ngAfterViewInit(){
* let sliderLowBound = this.slider.lowerBound;
*}
*```
*/
get: function () {
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: function (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();
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxSliderComponent.prototype, "upperBound", {
/**
* Returns the upper boundary of the `IgxSliderComponent`.
* ```typescript
*@ViewChild("slider")
*public slider: IgxSliderComponent;
*ngAfterViewInit(){
* let sliderUpBound = this.slider.upperBound;
*}
* ```
*/
get: function () {
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: function (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();
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxSliderComponent.prototype, "value", {
/**
* 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: function () {
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: function (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();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxSliderComponent.prototype, "primaryTicks", {
/**
* Returns the number of the presented primary ticks.
* ```typescript
* const primaryTicks = this.slider.primaryTicks;
* ```
*/
get: function () {
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: function (val) {
if (val <= 1) {
return;
}
this._primaryTicks = val;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxSliderComponent.prototype, "secondaryTicks", {
/**
* Returns the number of the presented secondary ticks.
* ```typescript
* const secondaryTicks = this.slider.secondaryTicks;
* ```
*/
get: function () {
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: function (val) {
if (val < 1) {
return;
}
this._secondaryTicks = val;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxSliderComponent.prototype, "deactivateThumbLabel", {
/**
* @hidden
*/
get: function () {
return ((this.primaryTicks && this.primaryTickLabels) || (this.secondaryTicks && this.secondaryTickLabels)) &&
(this.ticksOrientation === TicksOrientation.Top || this.ticksOrientation === TicksOrientation.Mirror);
},
enumerable: true,
configurable: true
});
/**
* @hidden
*/
IgxSliderComponent.prototype.onPointerDown = function ($event) {
this.findClosestThumb($event);
if (!this.thumbTo.isActive && this.thumbFrom === undefined) {
return;
}
var activeThumb = this.thumbTo.isActive ? this.thumbTo : this.thumbFrom;
activeThumb.nativeElement.setPointerCapture($event.pointerId);
this.showSliderIndicators();
$event.preventDefault();
};
/**
* @hidden
*/
IgxSliderComponent.prototype.onPointerUp = function ($event) {
if (!this.thumbTo.isActive && this.thumbFrom === undefined) {
return;
}
var activeThumb = this.thumbTo.isActive ? this.thumbTo : this.thumbTo;
activeThumb.nativeElement.releasePointerCapture($event.pointerId);
this.hideSliderIndicators();
};
/**
* @hidden
*/
IgxSliderComponent.prototype.onFocus = function () {
this.toggleSliderIndicators();
};
/**
* @hidden
*/
IgxSliderComponent.prototype.onPanListener = function ($event) {
this.update($event.srcEvent.clientX);
};
/**
* @hidden
*/
IgxSliderComponent.prototype.onPanStart = function () {
this.showSliderIndicators();
};
/**
* @hidden
*/
IgxSliderComponent.prototype.onPanEnd = function () {
this.hideSliderIndicators();
};
Object.defineProperty(IgxSliderComponent.prototype, "isRange", {
/**
*Returns whether the `IgxSliderComponent` type is RANGE.
*```typescript
*@ViewChild("slider")
*public slider: IgxSliderComponent;
*ngAfterViewInit(){
* let sliderRange = this.slider.isRange;
*}
* ```
*/
get: function () {
return this.type === SliderType.RANGE;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxSliderComponent.prototype, "lowerValue", {
/**
* Returns the lower value of the `IgxSliderComponent`.
* ```typescript
* @ViewChild("slider")
* public slider: IgxSliderComponent;
* public lowValue(event){
* let sliderLowValue = this.slider.lowerValue;
*}
*```
*/
get: function () {
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: function (value) {
value = this.valueInRange(value, this.lowerBound, this.upperBound);
this._lowerValue = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxSliderComponent.prototype, "upperValue", {
/**
*Returns the upper value of the `IgxSliderComponent`.
*```typescript
*@ViewChild("slider2")
*public slider: IgxSliderComponent;
*public upperValue(event){
* let upperValue = this.slider.upperValue;
*}
*```
*/
get: function () {
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: function (value) {
value = this.valueInRange(value, this.lowerBound, this.upperBound);
this._upperValue = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxSliderComponent.prototype, "lowerLabel", {
/**
* Returns the value corresponding the lower label.
*```typescript
* @ViewChild("slider")
* public slider: IgxSliderComponent;
* let label = this.slider.lowerLabel;
*```
*/
get: function () {
return this.labelsViewEnabled ?
this.labels[this.lowerValue] :
this.lowerValue;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxSliderComponent.prototype, "upperLabel", {
/**
* Returns the value corresponding the upper label.
*```typescript
* @ViewChild("slider")
* public slider: IgxSliderComponent;
* let label = this.slider.upperLabel;
*```
*/
get: function () {
return this.labelsViewEnabled ?
this.labels[this.upperValue] :
this.upperValue;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxSliderComponent.prototype, "labelsViewEnabled", {
/**
* 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: function () {
return !!(this.labels && this.labels.length > 1);
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxSliderComponent.prototype, "showTopTicks", {
/**
* @hidden
*/
get: function () {
return this.ticksOrientation === TicksOrientation.Top ||
this.ticksOrientation === TicksOrientation.Mirror;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxSliderComponent.prototype, "showBottomTicks", {
/**
* @hidden
*/
get: function () {
return this.ticksOrientation === TicksOrientation.Bottom ||
this.ticksOrientation === TicksOrientation.Mirror;
},
enumerable: true,
configurable: true
});
/**
* @hidden
*/
IgxSliderComponent.prototype.ngOnInit = function () {
this.sliderSetup();
// Set track travel zone
this._pMin = this.valueToFraction(this.lowerBound) || 0;
this._pMax = this.valueToFraction(this.upperBound) || 1;
};
IgxSliderComponent.prototype.ngOnChanges = function (changes) {
if (changes.minValue && changes.maxValue &&
changes.minValue.currentValue < changes.maxValue.currentValue) {
this._maxValue = changes.maxValue.currentValue;
this._minValue = changes.minValue.currentValue;
}
};
/**
* @hidden
*/
IgxSliderComponent.prototype.ngAfterViewInit = function () {
var _this = this;
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(function (change) {
var thumbFrom = change.find(function (thumb) { return 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(function (change) {
var labelFrom = _this.labelRefs.find(function (label) { return label.type === SliderHandle.FROM; });
_this.positionHandler(null, labelFrom, _this.lowerValue);
});
resizeObservable(this._el.nativeElement).pipe(throttleTime(40), takeUntil(this._destroyer$)).subscribe(function () {
_this.stepDistance = _this.calculateStepDistance();
});
};
/**
* @hidden
*/
IgxSliderComponent.prototype.ngOnDestroy = function () {
this._destroyer$.next(true);
this._destroyer$.complete();
this._indicatorsDestroyer$.next(true);
this._indicatorsDestroyer$.complete();
};
/**
* @hidden
*/
IgxSliderComponent.prototype.writeValue = function (value) {
if (!value) {
return;
}
this.normalizeByStep(value);
};
/**
* @hidden
*/
IgxSliderComponent.prototype.registerOnChange = function (fn) {
this._onChangeCallback = fn;
};
/**
* @hidden
*/
IgxSliderComponent.prototype.registerOnTouched = function (fn) {
this._onTouchedCallback = fn;
};
/** @hidden */
IgxSliderComponent.prototype.getEditElement = function () {
return this.isRange ? this.thumbFrom.nativeElement : this.thumbTo.nativeElement;
};
/**
*
* @hidden
*/
IgxSliderComponent.prototype.update = function (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
*/
IgxSliderComponent.prototype.thumbChanged = function (value, thumbType) {
var oldValue = this.value;
var 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
*/
IgxSliderComponent.prototype.onThumbChange = function () {
this.toggleSliderIndicators();
};
/**
* @hidden
*/
IgxSliderComponent.prototype.onHoverChange = function (state) {
return state ? this.showSliderIndicators() : this.hideSliderIndicators();
};
IgxSliderComponent.prototype.swapThumb = function (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;
};
IgxSliderComponent.prototype.findClosestThumb = function (event) {
if (this.isRange) {
this.closestHandle(event);
}
else {
this.thumbTo.nativeElement.focus();
}
this.update(event.clientX);
};
IgxSliderComponent.prototype.updateLowerBoundAndMinTravelZone = function () {
this.lowerBound = this.minValue;
this._pMin = 0;
};
IgxSliderComponent.prototype.updateUpperBoundAndMaxTravelZone = function () {
this.upperBound = this.maxValue;
this._pMax = 1;
};
IgxSliderComponent.prototype.sliderSetup = function () {
/**
* if {@link SliderType.SLIDER} than the initial value shold be the lowest one.
*/
if (!this.isRange && this._upperValue === undefined) {
this._upperValue = this.lowerBound;
}
};
IgxSliderComponent.prototype.calculateStepDistance = function () {
return this._el.nativeElement.getBoundingClientRect().width / (this.maxValue - this.minValue) * this.step;
};
IgxSliderComponent.prototype.toggleThumb = function () {
return this.thumbFrom.isActive ?
this.thumbTo.nativeElement.focus() :
this.thumbFrom.nativeElement.focus();
};
IgxSliderComponent.prototype.valueInRange = function (value, min, max) {
if (min === void 0) { min = 0; }
if (max === void 0) { max = 100; }
return Math.max(Math.min(value, max), min);
};
IgxSliderComponent.prototype.generateTickMarks = function (color, interval) {
return interval !== null ? "repeating-linear-gradient(\n " + 'to left' + ",\n " + color + ",\n " + color + " 1.5px,\n transparent 1.5px,\n transparent " + interval + "%\n ), repeating-linear-gradient(\n " + 'to right' + ",\n " + color + ",\n " + color + " 1.5px,\n transparent 1.5px,\n transparent " + interval + "%\n )" : interval;
};
IgxSliderComponent.prototype.positionHandler = function (thumbHandle, labelHandle, position) {
var positionLeft = this.valueToFraction(position) * 100 + "%";
if (thumbHandle) {
thumbHandle.nativeElement.style.left = positionLeft;
}
if (labelHandle) {
labelHandle.nativeElement.style.left = positionLeft;
}
};
IgxSliderComponent.prototype.positionHandlersAndUpdateTrack = function () {
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();
}
};
IgxSliderComponent.prototype.closestHandle = function (event) {
var fromOffset = this.thumbFrom.nativeElement.offsetLeft + this.thumbFrom.nativeElement.offsetWidth / 2;
var toOffset = this.thumbTo.nativeElement.offsetLeft + this.thumbTo.nativeElement.offsetWidth / 2;
var xPointer = event.clientX - this._el.nativeElement.getBoundingClientRect().left;
var 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();
}
};
IgxSliderComponent.prototype.setTickInterval = function () {
var interval;
var trackProgress = 100;
if (this.labelsViewEnabled) {
// Calc ticks depending on the labels length;
interval = ((trackProgress / (this.labels.length - 1) * 10)) / 10;
}
else {
var trackRange = this.maxValue - this.minValue;
interval = this.step > 1 ?
(trackProgress / ((trackRange / this.step)) * 10) / 10
: null;
}
var renderCallbackExecution = !this.continuous ? this.generateTickMarks('white', interval) : null;
this.renderer.setStyle(this.ticks.nativeElement, 'background', renderCallbackExecution);
};
IgxSliderComponent.prototype.showSliderIndicators = function () {
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;
}
};
IgxSliderComponent.prototype.hideSliderIndicators = function () {
var _this = this;
if (this.disabled) {
return;
}
this._indicatorsTimer = timer(this.thumbLabelVisibilityDuration);
this._indicatorsTimer.pipe(takeUntil(this._indicatorsDestroyer$)).subscribe(function () {
_this.thumbTo.hideThumbIndicators();
_this.labelTo.active = false;
if (_this.thumbFrom) {
_this.thumbFrom.hideThumbIndicators();
}
if (_this.labelFrom) {
_this.labelFrom.active = false;
}
});
};
IgxSliderComponent.prototype.toggleSliderIndicators = function () {
this.showSliderIndicators();
this.hideSliderIndicators();
};
IgxSliderComponent.prototype.changeThumbFocusableState = function (state) {
var value = state ? -1 : 1;
if (this.isRange) {
this.thumbFrom.tabindex = value;
}
this.thumbTo.tabindex = value;
this._cdr.detectChanges();
};
IgxSliderComponent.prototype.closestTo = function (goal, positions) {
return positions.reduce(function (previous, current) {
return (Math.abs(goal - current) < Math.abs(goal - previous) ? current : previous);
});
};
IgxSliderComponent.prototype.valueToFraction = function (value, pMin, pMax) {
if (pMin === void 0) { pMin = this._pMin; }
if (pMax === void 0) { 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
*/
IgxSliderComponent.prototype.normalizeByStep = function (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);
}
};
IgxSliderComponent.prototype.updateTrack = function () {
var fromPosition = this.valueToFraction(this.lowerValue);
var toPosition = this.valueToFraction(this.upperValue);
var positionGap = toPosition - fromPosition;
var 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 + ")");
}
};
IgxSliderComponent.prototype.validateInitialValue = function (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;
};
IgxSliderComponent.prototype.subscribeTo = function (thumb, callback) {
if (!thumb) {
return;
}
thumb.onThumbValueChange
.pipe(takeUntil(this.unsubscriber(thumb)))
.subscribe(function (value) { return callback(value, thumb.type); });
};
IgxSliderComponent.prototype.unsubscriber = function (thumb) {
return merge(this._destroyer$, thumb.destroy);
};
IgxSliderComponent.prototype.hasValueChanged = function (oldValue) {
var isSliderWithDifferentValue = !this.isRange && oldValue !== this.value;
var isRangeWithOneDifferentValue = this.isRange &&
(oldValue.lower !== this.value.lower ||
oldValue.upper !== this.value.upper);
return isSliderWithDifferentValue || isRangeWithOneDifferentValue;
};
IgxSliderComponent.prototype.emitValueChanged = function (oldValue) {
this.onValueChange.emit({ oldValue: oldValue, value: this.value });
};
var IgxSliderComponent_1;
IgxSliderComponent.ctorParameters = function () { return [
{ 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(),
_