systelab-components
Version:
systelab-components is a set of components that use wide accepted and adopted standard technologies like Angular and Bootstrap, as well as other popular libraries. Please read the ATTRIBUTION.md file for a complete list of dependencies.
84 lines • 12.4 kB
JavaScript
import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class SliderDoubleRangeComponent {
constructor() {
this.min = 0;
this.max = 100;
this.step = 1;
this.continuous = true;
this.minValue = 0;
this.maxValue = 0;
this.minValueChange = new EventEmitter();
this.maxValueChange = new EventEmitter();
this.minGap = 0;
this.clicked = false;
}
firstSliderInputEvent() {
const result = Number(this.secondRange.nativeElement.value) - Number(this.firstRange.nativeElement.value);
this.clicked = true;
if (result <= this.minGap) {
this.minValue = Number(this.secondRange.nativeElement.value);
this.firstRange.nativeElement.value = this.minValue;
}
else {
this.minValue = Number(this.firstRange.nativeElement.value);
}
this.minValueChange.emit(this.minValue);
}
sliderOneChangeEvent() {
const value = this.firstRange.nativeElement.value;
if (value !== this.minValue) {
this.minValue = value;
this.minValueChange.emit(this.minValue);
}
}
secondSliderInputEvent() {
this.clicked = true;
const result = Number(this.secondRange.nativeElement.value) - Number(this.firstRange.nativeElement.value);
if (result <= this.minGap) {
this.maxValue = Number(this.firstRange.nativeElement.value);
this.secondRange.nativeElement.value = this.maxValue;
}
else {
this.maxValue = Number(this.secondRange.nativeElement.value);
}
this.maxValueChange.emit(this.maxValue);
}
sliderTwoChangeEvent() {
const value = this.secondRange.nativeElement.value;
if (value !== this.maxValue) {
this.maxValue = value;
this.maxValueChange.emit(this.maxValue);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SliderDoubleRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: SliderDoubleRangeComponent, selector: "systelab-slider-double-range", inputs: { min: "min", max: "max", step: "step", continuous: "continuous", minValue: "minValue", maxValue: "maxValue" }, outputs: { minValueChange: "minValueChange", maxValueChange: "maxValueChange" }, viewQueries: [{ propertyName: "firstRange", first: true, predicate: ["firstRange"], descendants: true }, { propertyName: "secondRange", first: true, predicate: ["secondRange"], descendants: true }], ngImport: i0, template: "<div class=\"slider-container\">\n <div class=\"slider-track\" [ngClass]=\"clicked ?'focused':''\"></div>\n <input #firstRange type=\"range\" min=\"{{ min }}\" max=\"{{ max }}\" value=\"{{ minValue }}\" step=\"{{ step }}\"\n (input)=\"firstSliderInputEvent()\" (change)=\"sliderOneChangeEvent()\" class=\"slab-slider-double\" id=\"firstRange\" />\n\n <input #secondRange type=\"range\" min=\"{{ min }}\" max=\"{{ max }}\" value=\"{{ maxValue }}\" step=\"{{ step }}\"\n (input)=\"secondSliderInputEvent()\" (change)=\"sliderTwoChangeEvent()\" class=\"slab-slider-double\" id=\"secondRange\" />\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SliderDoubleRangeComponent, decorators: [{
type: Component,
args: [{ selector: 'systelab-slider-double-range', template: "<div class=\"slider-container\">\n <div class=\"slider-track\" [ngClass]=\"clicked ?'focused':''\"></div>\n <input #firstRange type=\"range\" min=\"{{ min }}\" max=\"{{ max }}\" value=\"{{ minValue }}\" step=\"{{ step }}\"\n (input)=\"firstSliderInputEvent()\" (change)=\"sliderOneChangeEvent()\" class=\"slab-slider-double\" id=\"firstRange\" />\n\n <input #secondRange type=\"range\" min=\"{{ min }}\" max=\"{{ max }}\" value=\"{{ maxValue }}\" step=\"{{ step }}\"\n (input)=\"secondSliderInputEvent()\" (change)=\"sliderTwoChangeEvent()\" class=\"slab-slider-double\" id=\"secondRange\" />\n</div>" }]
}], propDecorators: { min: [{
type: Input
}], max: [{
type: Input
}], step: [{
type: Input
}], continuous: [{
type: Input
}], minValue: [{
type: Input
}], maxValue: [{
type: Input
}], minValueChange: [{
type: Output
}], maxValueChange: [{
type: Output
}], firstRange: [{
type: ViewChild,
args: ['firstRange', { static: false }]
}], secondRange: [{
type: ViewChild,
args: ['secondRange', { static: false }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGVyLWRvdWJsZS1yYW5nZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zeXN0ZWxhYi1jb21wb25lbnRzL3NyYy9saWIvc2xpZGVyLWRvdWJsZS1yYW5nZS9zbGlkZXItZG91YmxlLXJhbmdlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N5c3RlbGFiLWNvbXBvbmVudHMvc3JjL2xpYi9zbGlkZXItZG91YmxlLXJhbmdlL3NsaWRlci1kb3VibGUtcmFuZ2UuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQU05RixNQUFNLE9BQU8sMEJBQTBCO0lBSnZDO1FBTWlCLFFBQUcsR0FBRyxDQUFDLENBQUM7UUFDUixRQUFHLEdBQUcsR0FBRyxDQUFDO1FBQ1YsU0FBSSxHQUFHLENBQUMsQ0FBQztRQUNULGVBQVUsR0FBRyxJQUFJLENBQUM7UUFFbEIsYUFBUSxHQUFHLENBQUMsQ0FBQztRQUNiLGFBQVEsR0FBRyxDQUFDLENBQUM7UUFDWixtQkFBYyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDcEMsbUJBQWMsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBS3JELFdBQU0sR0FBRyxDQUFDLENBQUM7UUFDWCxZQUFPLEdBQUcsS0FBSyxDQUFDO0tBeUNoQjtJQXZDTyxxQkFBcUI7UUFDM0IsTUFBTSxNQUFNLEdBQUcsTUFBTSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxHQUFHLE1BQU0sQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUMxRyxJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQztRQUNw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LCBJbnB1dCwgT3V0cHV0LCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiAgICAnc3lzdGVsYWItc2xpZGVyLWRvdWJsZS1yYW5nZScsXG5cdHRlbXBsYXRlVXJsOiAnc2xpZGVyLWRvdWJsZS1yYW5nZS5jb21wb25lbnQuaHRtbCdcbn0pXG5leHBvcnQgY2xhc3MgU2xpZGVyRG91YmxlUmFuZ2VDb21wb25lbnQge1xuXG5cdEBJbnB1dCgpIHB1YmxpYyBtaW4gPSAwO1xuXHRASW5wdXQoKSBwdWJsaWMgbWF4ID0gMTAwO1xuXHRASW5wdXQoKSBwdWJsaWMgc3RlcCA9IDE7XG5cdEBJbnB1dCgpIHB1YmxpYyBjb250aW51b3VzID0gdHJ1ZTtcblxuXHRASW5wdXQoKSBwdWJsaWMgbWluVmFsdWUgPSAwO1xuXHRASW5wdXQoKSBwdWJsaWMgbWF4VmFsdWUgPSAwO1xuXHRAT3V0cHV0KCkgcHVibGljIG1pblZhbHVlQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXHRAT3V0cHV0KCkgcHVibGljIG1heFZhbHVlQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG5cdEBWaWV3Q2hpbGQoJ2ZpcnN0UmFuZ2UnLCB7c3RhdGljOiBmYWxzZX0pIGZpcnN0UmFuZ2U6IEVsZW1lbnRSZWY7XG5cdEBWaWV3Q2hpbGQoJ3NlY29uZFJhbmdlJywge3N0YXRpYzogZmFsc2V9KSBzZWNvbmRSYW5nZTogRWxlbWVudFJlZjtcblxuXHRtaW5HYXAgPSAwO1xuXHRjbGlja2VkID0gZmFsc2U7XG5cblx0cHVibGljIGZpcnN0U2xpZGVySW5wdXRFdmVudCgpOiB2b2lkIHtcblx0XHRjb25zdCByZXN1bHQgPSBOdW1iZXIodGhpcy5zZWNvbmRSYW5nZS5uYXRpdmVFbGVtZW50LnZhbHVlKSAtIE51bWJlcih0aGlzLmZpcnN0UmFuZ2UubmF0aXZlRWxlbWVudC52YWx1ZSk7XG5cdFx0dGhpcy5jbGlja2VkID0gdHJ1ZTtcblx0XHRpZiAocmVzdWx0IDw9IHRoaXMubWluR2FwKSB7XG5cdFx0XHR0aGlzLm1pblZhbHVlID0gTnVtYmVyKHRoaXMuc2Vjb25kUmFuZ2UubmF0aXZlRWxlbWVudC52YWx1ZSk7XG5cdFx0XHR0aGlzLmZpcnN0UmFuZ2UubmF0aXZlRWxlbWVudC52YWx1ZSA9IHRoaXMubWluVmFsdWU7XG5cdFx0fWVsc2V7XG5cdFx0XHR0aGlzLm1pblZhbHVlID0gTnVtYmVyKHRoaXMuZmlyc3RSYW5nZS5uYXRpdmVFbGVtZW50LnZhbHVlKTtcblx0XHR9XG5cdFx0dGhpcy5taW5WYWx1ZUNoYW5nZS5lbWl0KHRoaXMubWluVmFsdWUpO1xuXHR9XG5cblx0cHVibGljIHNsaWRlck9uZUNoYW5nZUV2ZW50KCk6IHZvaWQge1xuXHRcdGNvbnN0IHZhbHVlID0gdGhpcy5maXJzdFJhbmdlLm5hdGl2ZUVsZW1lbnQudmFsdWU7XG5cdFx0aWYgKHZhbHVlICE9PSB0aGlzLm1pblZhbHVlKSB7XG5cdFx0XHR0aGlzLm1pblZhbHVlID0gdmFsdWU7XG5cdFx0XHR0aGlzLm1pblZhbHVlQ2hhbmdlLmVtaXQodGhpcy5taW5WYWx1ZSk7XG5cdFx0fVxuXHR9XG5cblx0cHVibGljIHNlY29uZFNsaWRlcklucHV0RXZlbnQoKTogdm9pZCB7XG5cdFx0dGhpcy5jbGlja2VkID0gdHJ1ZTtcblx0XHRjb25zdCByZXN1bHQgPSBOdW1iZXIodGhpcy5zZWNvbmRSYW5nZS5uYXRpdmVFbGVtZW50LnZhbHVlKSAtIE51bWJlcih0aGlzLmZpcnN0UmFuZ2UubmF0aXZlRWxlbWVudC52YWx1ZSk7XG5cdFx0aWYgKHJlc3VsdCA8PSB0aGlzLm1pbkdhcCkge1xuXHRcdFx0dGhpcy5tYXhWYWx1ZSA9IE51bWJlcih0aGlzLmZpcnN0UmFuZ2UubmF0aXZlRWxlbWVudC52YWx1ZSk7XG5cdFx0XHR0aGlzLnNlY29uZFJhbmdlLm5hdGl2ZUVsZW1lbnQudmFsdWUgPSB0aGlzLm1heFZhbHVlO1xuXHRcdH1lbHNle1xuXHRcdFx0dGhpcy5tYXhWYWx1ZSA9IE51bWJlcih0aGlzLnNlY29uZFJhbmdlLm5hdGl2ZUVsZW1lbnQudmFsdWUpO1xuXHRcdH1cblx0XHR0aGlzLm1heFZhbHVlQ2hhbmdlLmVtaXQodGhpcy5tYXhWYWx1ZSk7XG5cdH1cblxuXHRwdWJsaWMgc2xpZGVyVHdvQ2hhbmdlRXZlbnQoKTogdm9pZCB7XG5cdFx0Y29uc3QgdmFsdWUgPSB0aGlzLnNlY29uZFJhbmdlLm5hdGl2ZUVsZW1lbnQudmFsdWU7XG5cdFx0aWYgKHZhbHVlIT09IHRoaXMubWF4VmFsdWUpIHtcblx0XHRcdHRoaXMubWF4VmFsdWUgPSB2YWx1ZTtcblx0XHRcdHRoaXMubWF4VmFsdWVDaGFuZ2UuZW1pdCh0aGlzLm1heFZhbHVlKTtcblx0XHR9XG5cdH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJzbGlkZXItY29udGFpbmVyXCI+XG4gIDxkaXYgY2xhc3M9XCJzbGlkZXItdHJhY2tcIiBbbmdDbGFzc109XCJjbGlja2VkID8nZm9jdXNlZCc6JydcIj48L2Rpdj5cbiAgPGlucHV0ICNmaXJzdFJhbmdlIHR5cGU9XCJyYW5nZVwiIG1pbj1cInt7IG1pbiB9fVwiIG1heD1cInt7IG1heCB9fVwiIHZhbHVlPVwie3sgbWluVmFsdWUgfX1cIiBzdGVwPVwie3sgc3RlcCB9fVwiXG4gICAgKGlucHV0KT1cImZpcnN0U2xpZGVySW5wdXRFdmVudCgpXCIgKGNoYW5nZSk9XCJzbGlkZXJPbmVDaGFuZ2VFdmVudCgpXCIgY2xhc3M9XCJzbGFiLXNsaWRlci1kb3VibGVcIiBpZD1cImZpcnN0UmFuZ2VcIiAvPlxuXG4gIDxpbnB1dCAjc2Vjb25kUmFuZ2UgdHlwZT1cInJhbmdlXCIgbWluPVwie3sgbWluIH19XCIgbWF4PVwie3sgbWF4IH19XCIgdmFsdWU9XCJ7eyBtYXhWYWx1ZSB9fVwiIHN0ZXA9XCJ7eyBzdGVwIH19XCJcbiAgICAoaW5wdXQpPVwic2Vjb25kU2xpZGVySW5wdXRFdmVudCgpXCIgKGNoYW5nZSk9XCJzbGlkZXJUd29DaGFuZ2VFdmVudCgpXCIgY2xhc3M9XCJzbGFiLXNsaWRlci1kb3VibGVcIiBpZD1cInNlY29uZFJhbmdlXCIgLz5cbjwvZGl2PiJdfQ==