ngx-bootstrap-slider
Version:
A flexible bootstrap slider for Angular
288 lines (280 loc) • 11.2 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Component, EventEmitter, ViewChild, Input, Output, NgModule } from '@angular/core';
class NgxBootstrapSliderService {
constructor() { }
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgxBootstrapSliderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgxBootstrapSliderService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgxBootstrapSliderService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [] });
class NgxBootstrapSliderComponent {
constructor() { }
ngOnInit() {
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgxBootstrapSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: NgxBootstrapSliderComponent, selector: "mv-ngx-bootstrap-slider", ngImport: i0, template: `
<p>
ngx-bootstrap-slider works!
</p>
`, isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgxBootstrapSliderComponent, decorators: [{
type: Component,
args: [{ selector: 'mv-ngx-bootstrap-slider', template: `
<p>
ngx-bootstrap-slider works!
</p>
` }]
}], ctorParameters: () => [] });
class SliderComponent {
// This property is not applied to the underlying slider element
set style(value) {
if (this.slider) {
this.slider.getElement().setAttribute('style', value);
}
else {
this.initialStyle = value;
}
}
// Handle the value (two-way)
set value(value) {
if (this.slider) {
this.slider.setValue(value);
}
else {
this.initialOptions.value = value;
}
}
// The following properties are applied to the underlying slider element
set min(value) {
this.changeAttribute('min', value);
}
set max(value) {
this.changeAttribute('max', value);
}
set step(value) {
this.changeAttribute('step', value);
}
set precision(value) {
this.changeAttribute('precision', value);
}
set orientation(value) {
this.changeAttribute('orientation', value);
}
set range(value) {
this.changeAttribute('range', value);
}
set selection(value) {
this.changeAttribute('selection', value);
}
set tooltip(value) {
this.changeAttribute('tooltip', value);
}
set tooltipSplit(value) {
this.changeAttribute('tooltip_split', value);
}
set tooltipPosition(value) {
this.changeAttribute('tooltip_position', value);
}
set handle(value) {
this.changeAttribute('handle', value);
}
set reversed(value) {
this.changeAttribute('reversed', value);
}
set rtl(value) {
this.changeAttribute('rtl', value);
}
set enabled(value) {
this.changeAttribute('enabled', value);
}
set naturalArrowKeys(value) {
this.changeAttribute('natural_arrow_keys', value);
}
set ticks(value) {
this.changeAttribute('ticks', value);
}
set ticksPositions(value) {
this.changeAttribute('ticks_positions', value);
}
set ticksLabels(value) {
this.changeAttribute('ticks_labels', value);
}
set ticksSnapBounds(value) {
this.changeAttribute('ticks_snap_bounds', value);
}
set ticksTooltip(value) {
this.changeAttribute('ticks_tooltip', value);
}
set scale(value) {
this.changeAttribute('scale', value);
}
set labelledBy(value) {
this.changeAttribute('labelledby', value);
}
set rangeHighlights(value) {
this.changeAttribute('rangeHighlights', value);
}
set formatter(value) {
this.changeAttribute('formatter', value);
}
set lockToTicks(value) {
this.changeAttribute('lock_to_ticks', value);
}
constructor() {
this.initialOptions = {};
this.valueChange = new EventEmitter();
// The following events are emitted
this.slide = new EventEmitter();
this.slideStart = new EventEmitter();
this.slideStop = new EventEmitter();
this.change = new EventEmitter();
}
addChangeListeners() {
this.slider.on('slide', (value) => {
this.slide.emit(value);
});
this.slider.on('slideStart', (value) => {
this.slideStart.emit(value);
});
this.slider.on('slideStop', (value) => {
this.slideStop.emit(value);
});
this.slider.on('change', (event) => {
this.change.emit(event);
this.valueChange.emit(event.newValue);
});
}
prepareSlider() {
// We need to add the change listeners again after each refresh
this.addChangeListeners();
// Add the styling to the element
this.slider.getElement().setAttribute('style', this.initialStyle);
}
changeAttribute(name, value) {
if (this.slider) {
this.slider.setAttribute(name, value);
this.slider.refresh();
this.prepareSlider();
}
else {
this.initialOptions[name] = value;
}
}
ngOnInit() {
// Don't set the value over the initial options, because it will alway
// be reset. This option seems to be a little buggy.
let value = undefined;
if (this.initialOptions.value) {
value = this.initialOptions.value;
delete this.initialOptions['value'];
}
this.slider = new Slider(this.sliderElement.nativeElement, this.initialOptions);
if (value) {
this.slider.setValue(value);
}
this.prepareSlider();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SliderComponent, selector: "mv-slider", inputs: { style: "style", value: "value", min: "min", max: "max", step: "step", precision: "precision", orientation: "orientation", range: "range", selection: "selection", tooltip: "tooltip", tooltipSplit: "tooltipSplit", tooltipPosition: "tooltipPosition", handle: "handle", reversed: "reversed", rtl: "rtl", enabled: "enabled", naturalArrowKeys: "naturalArrowKeys", ticks: "ticks", ticksPositions: "ticksPositions", ticksLabels: "ticksLabels", ticksSnapBounds: "ticksSnapBounds", ticksTooltip: "ticksTooltip", scale: "scale", labelledBy: "labelledBy", rangeHighlights: "rangeHighlights", formatter: "formatter", lockToTicks: "lockToTicks" }, outputs: { valueChange: "valueChange", slide: "slide", slideStart: "slideStart", slideStop: "slideStop", change: "change" }, viewQueries: [{ propertyName: "sliderElement", first: true, predicate: ["slider"], descendants: true, static: true }], ngImport: i0, template: "<input #slider>", styles: [""] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SliderComponent, decorators: [{
type: Component,
args: [{ selector: 'mv-slider', template: "<input #slider>" }]
}], ctorParameters: () => [], propDecorators: { sliderElement: [{
type: ViewChild,
args: ['slider', { static: true }]
}], style: [{
type: Input
}], value: [{
type: Input
}], valueChange: [{
type: Output
}], min: [{
type: Input
}], max: [{
type: Input
}], step: [{
type: Input
}], precision: [{
type: Input
}], orientation: [{
type: Input
}], range: [{
type: Input
}], selection: [{
type: Input
}], tooltip: [{
type: Input
}], tooltipSplit: [{
type: Input
}], tooltipPosition: [{
type: Input
}], handle: [{
type: Input
}], reversed: [{
type: Input
}], rtl: [{
type: Input
}], enabled: [{
type: Input
}], naturalArrowKeys: [{
type: Input
}], ticks: [{
type: Input
}], ticksPositions: [{
type: Input
}], ticksLabels: [{
type: Input
}], ticksSnapBounds: [{
type: Input
}], ticksTooltip: [{
type: Input
}], scale: [{
type: Input
}], labelledBy: [{
type: Input
}], rangeHighlights: [{
type: Input
}], formatter: [{
type: Input
}], lockToTicks: [{
type: Input
}], slide: [{
type: Output
}], slideStart: [{
type: Output
}], slideStop: [{
type: Output
}], change: [{
type: Output
}] } });
class NgxBootstrapSliderModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgxBootstrapSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: NgxBootstrapSliderModule, declarations: [NgxBootstrapSliderComponent, SliderComponent], exports: [NgxBootstrapSliderComponent,
SliderComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgxBootstrapSliderModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgxBootstrapSliderModule, decorators: [{
type: NgModule,
args: [{
imports: [],
declarations: [NgxBootstrapSliderComponent, SliderComponent],
exports: [
NgxBootstrapSliderComponent,
SliderComponent
]
}]
}] });
/*
* Public API Surface of ngx-bootstrap-slider
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxBootstrapSliderComponent, NgxBootstrapSliderModule, NgxBootstrapSliderService, SliderComponent };
//# sourceMappingURL=ngx-bootstrap-slider.mjs.map