@junte/ui
Version:
Quality Angular UI components kit
136 lines • 13.3 kB
JavaScript
var SliderComponent_1;
import { __decorate, __metadata } from "tslib";
import { ChangeDetectionStrategy, Component, forwardRef, HostBinding, HostListener, Input } from '@angular/core';
import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms';
import { NGXLogger } from 'ngx-logger';
import { map } from 'rxjs/operators';
import { PropertyApi } from '../../core/decorators/api';
import { Size } from '../../core/enums/size';
import { UI } from '../../core/enums/ui';
const DEFAULT_MIN = 0;
const DEFAULT_MAX = 100;
const DEFAULT_STEP = 1;
let SliderComponent = SliderComponent_1 = class SliderComponent {
constructor(logger, fb) {
this.logger = logger;
this.fb = fb;
this.ui = UI;
this._min = DEFAULT_MIN;
this._max = DEFAULT_MAX;
this._step = DEFAULT_STEP;
this.rangeControl = this.fb.control(null);
this.form = this.fb.group({
range: this.rangeControl,
});
this.host = 'jnt-slider-host';
this._size = Size.normal;
this.disabled = false;
this.onChange = () => this.logger.error('value accessor is not registered');
this.onTouched = () => this.logger.error('value accessor is not registered');
this.registerOnChange = fn => this.onChange = fn;
this.registerOnTouched = fn => this.onTouched = fn;
this.onBlur = () => this.onTouched();
}
set min(min) {
this._min = min || DEFAULT_MIN;
}
get min() {
return this._min;
}
set max(max) {
this._max = max || DEFAULT_MAX;
}
get max() {
return this._max;
}
set step(step) {
this._step = step || DEFAULT_STEP;
}
get step() {
return this._step;
}
ngOnInit() {
this.rangeControl.valueChanges.pipe(map(value => +value))
.subscribe(value => {
if (value > this.max || value < this.min) {
value = Math.min(Math.max(value, this.min), this.max);
this.rangeControl.setValue(value, { emitEvent: false });
}
this.onChange(value);
});
}
writeValue(value) {
this.rangeControl.setValue(value || DEFAULT_MIN, { emitEvent: false });
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
};
SliderComponent.ctorParameters = () => [
{ type: NGXLogger },
{ type: FormBuilder }
];
__decorate([
HostBinding('attr.host'),
__metadata("design:type", Object)
], SliderComponent.prototype, "host", void 0);
__decorate([
HostBinding('attr.data-size'),
__metadata("design:type", String)
], SliderComponent.prototype, "_size", void 0);
__decorate([
HostBinding('attr.data-disabled'),
__metadata("design:type", Object)
], SliderComponent.prototype, "disabled", void 0);
__decorate([
PropertyApi({
description: 'Slider min',
type: 'number',
default: DEFAULT_MIN
}),
Input(),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], SliderComponent.prototype, "min", null);
__decorate([
PropertyApi({
description: 'Slider max',
type: 'number',
default: DEFAULT_MAX
}),
Input(),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], SliderComponent.prototype, "max", null);
__decorate([
PropertyApi({
description: 'Slider step',
type: 'number',
default: DEFAULT_STEP
}),
Input(),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], SliderComponent.prototype, "step", null);
__decorate([
HostListener('blur'),
__metadata("design:type", Object)
], SliderComponent.prototype, "onBlur", void 0);
SliderComponent = SliderComponent_1 = __decorate([
Component({
selector: 'jnt-slider',
template: "<div child-of=\"jnt-slider-host\" data-slided [style.width]=\"(+rangeControl.value | getPercent:min:max) + '%'\"></div>\n<div child-of=\"jnt-slider-host\" data-pointer [style.left]=\"'calc(' + (+rangeControl.value | getPercent:min:max) + '% - 8px)'\"></div>\n\n<form child-of=\"jnt-slider-host\" [formGroup]=\"form\">\n <input child-of=\"jnt-slider-host\" type=\"range\" [min]=\"min\" [max]=\"max\" [step]=\"step\"\n formControlName=\"range\" />\n</form>",
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SliderComponent_1),
multi: true
}
]
}),
__metadata("design:paramtypes", [NGXLogger,
FormBuilder])
], SliderComponent);
export { SliderComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BqdW50ZS91aS8iLCJzb3VyY2VzIjpbImxpYi9mb3Jtcy9zbGlkZXIvc2xpZGVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOztBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFVBQVUsRUFDVixXQUFXLEVBQ1gsWUFBWSxFQUNaLEtBQUssRUFFTixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsb0JBQW9CLEVBQUUsV0FBVyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDdEYsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFlBQVksQ0FBQztBQUN2QyxPQUFPLEVBQUUsR0FBRyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDckMsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ3hELE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUM3QyxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFFekMsTUFBTSxXQUFXLEdBQUcsQ0FBQyxDQUFDO0FBQ3RCLE1BQU0sV0FBVyxHQUFHLEdBQUcsQ0FBQztBQUN4QixNQUFNLFlBQVksR0FBRyxDQUFDLENBQUM7QUFjdkIsSUFBYSxlQUFlLHVCQUE1QixNQUFhLGVBQWU7SUFtRTFCLFlBQW9CLE1BQWlCLEVBQ2pCLEVBQWU7UUFEZixXQUFNLEdBQU4sTUFBTSxDQUFXO1FBQ2pCLE9BQUUsR0FBRixFQUFFLENBQWE7UUFsRW5DLE9BQUUsR0FBRyxFQUFFLENBQUM7UUFFQSxTQUFJLEdBQUcsV0FBVyxDQUFDO1FBQ25CLFNBQUksR0FBRyxXQUFXLENBQUM7UUFDbkIsVUFBSyxHQUFHLFlBQVksQ0FBQztRQUU3QixpQkFBWSxHQUFHLElBQUksQ0FBQyxFQUFFLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3JD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QztRQUNYLFdBQVcsRUFBRSxZQUFZO1FBQ3pCLElBQUksRUFBRSxRQUFRO1FBQ2QsT0FBTyxFQUFFLFdBQVc7S0FDckIsQ0FBQztJQUNELEtBQUssRUFBRTs7OzBDQUVQO0FBV1E7SUFMUixXQUFXLENBQUM7UUFDWCxXQUFXLEVBQUUsWUFBWTtRQUN6QixJQUFJLEVBQUUsUUFBUTtRQUNkLE9BQU8sRUFBRSxXQUFXO0tBQ3JCLENBQUM7SUFDRCxLQUFLLEVBQUU7OzswQ0FFUDtBQVdRO0lBTFIsV0FBVyxDQUFDO1FBQ1gsV0FBVyxFQUFFLGFBQWE7UUFDMUIsSUFBSSxFQUFFLFFBQVE7UUFDZCxPQUFPLEVBQUUsWUFBWTtLQUN0QixDQUFDO0lBQ0QsS0FBSyxFQUFFOzs7MkNBRVA7QUFVcUI7SUFBckIsWUFBWSxDQUFDLE1BQU0sQ0FBQzs7K0NBQWlDO0FBakUzQyxlQUFlO0lBWjNCLFNBQVMsQ0FBQztRQUNULFFBQVEsRUFBRSxZQUFZO1FBQ3RCLDRkQUF5QztRQUN6QyxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtRQUMvQyxTQUFTLEVBQUU7WUFDVDtnQkFDRSxPQUFPLEVBQUUsaUJBQWlCO2dCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLGlCQUFlLENBQUM7Z0JBQzlDLEtBQUssRUFBRSxJQUFJO2FBQ1o7U0FDRjtLQUNGLENBQUM7cUNBb0U0QixTQUFTO1FBQ2IsV0FBVztHQXBFeEIsZUFBZSxDQXlGM0I7U0F6RlksZUFBZSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIGZvcndhcmRSZWYsXG4gIEhvc3RCaW5kaW5nLFxuICBIb3N0TGlzdGVuZXIsXG4gIElucHV0LFxuICBPbkluaXRcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgRm9ybUJ1aWxkZXIsIE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgTkdYTG9nZ2VyIH0gZnJvbSAnbmd4LWxvZ2dlcic7XG5pbXBvcnQgeyBtYXAgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBQcm9wZXJ0eUFwaSB9IGZyb20gJy4uLy4uL2NvcmUvZGVjb3JhdG9ycy9hcGknO1xuaW1wb3J0IHsgU2l6ZSB9IGZyb20gJy4uLy4uL2NvcmUvZW51bXMvc2l6ZSc7XG5pbXBvcnQgeyBVSSB9IGZyb20gJy4uLy4uL2NvcmUvZW51bXMvdWknO1xuXG5jb25zdCBERUZBVUxUX01JTiA9IDA7XG5jb25zdCBERUZBVUxUX01BWCA9IDEwMDtcbmNvbnN0IERFRkFVTFRfU1RFUCA9IDE7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2pudC1zbGlkZXInLFxuICB0ZW1wbGF0ZVVybDogJy4vc2xpZGVyLmVuY2Fwc3VsYXRlZC5odG1sJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gU2xpZGVyQ29tcG9uZW50KSxcbiAgICAgIG11bHRpOiB0cnVlXG4gICAgfVxuICBdXG59KVxuZXhwb3J0IGNsYXNzIFNsaWRlckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xuXG4gIHVpID0gVUk7XG5cbiAgcHJpdmF0ZSBfbWluID0gREVGQVVMVF9NSU47XG4gIHByaXZhdGUgX21heCA9IERFRkFVTFRfTUFYO1xuICBwcml2YXRlIF9zdGVwID0gREVGQVVMVF9TVEVQO1xuXG4gIHJhbmdlQ29udHJvbCA9IHRoaXMuZmIuY29udHJvbChudWxsKTtcbiAgZm9ybSA9IHRoaXMuZmIuZ3JvdXAoe1xuICAgIHJhbmdlOiB0aGlzLnJhbmdlQ29udHJvbCxcbiAgfSk7XG5cbiAgQEhvc3RCaW5kaW5nKCdhdHRyLmhvc3QnKVxuICByZWFkb25seSBob3N0ID0gJ2pudC1zbGlkZXItaG9zdCc7XG5cbiAgQEhvc3RCaW5kaW5nKCdhdHRyLmRhdGEtc2l6ZScpXG4gIF9zaXplOiBTaXplID0gU2l6ZS5ub3JtYWw7XG5cbiAgQEhvc3RCaW5kaW5nKCdhdHRyLmRhdGEtZGlzYWJsZWQnKVxuICBkaXNhYmxlZCA9IGZhbHNlO1xuXG4gIEBQcm9wZXJ0eUFwaSh7XG4gICAgZGVzY3JpcHRpb246ICdTbGlkZXIgbWluJyxcbiAgICB0eXBlOiAnbnVtYmVyJyxcbiAgICBkZWZhdWx0OiBERUZBVUxUX01JTlxuICB9KVxuICBASW5wdXQoKSBzZXQgbWluKG1pbjogbnVtYmVyKSB7XG4gICAgdGhpcy5fbWluID0gbWluIHx8IERFRkFVTFRfTUlOO1xuICB9XG5cbiAgZ2V0IG1pbigpIHtcbiAgICByZXR1cm4gdGhpcy5fbWluO1xuICB9XG5cbiAgQFByb3BlcnR5QXBpKHtcbiAgICBkZXNjcmlwdGlvbjogJ1NsaWRlciBtYXgnLFxuICAgIHR5cGU6ICdudW1iZXInLFxuICAgIGRlZmF1bHQ6IERFRkFVTFRfTUFYXG4gIH0pXG4gIEBJbnB1dCgpIHNldCBtYXgobWF4OiBudW1iZXIpIHtcbiAgICB0aGlzLl9tYXggPSBtYXggfHwgREVGQVVMVF9NQVg7XG4gIH1cblxuICBnZXQgbWF4KCkge1xuICAgIHJldHVybiB0aGlzLl9tYXg7XG4gIH1cblxuICBAUHJvcGVydHlBcGkoe1xuICAgIGRlc2NyaXB0aW9uOiAnU2xpZGVyIHN0ZXAnLFxuICAgIHR5cGU6ICdudW1iZXInLFxuICAgIGRlZmF1bHQ6IERFRkFVTFRfU1RFUFxuICB9KVxuICBASW5wdXQoKSBzZXQgc3RlcChzdGVwOiBudW1iZXIpIHtcbiAgICB0aGlzLl9zdGVwID0gc3RlcCB8fCBERUZBVUxUX1NURVA7XG4gIH1cblxuICBnZXQgc3RlcCgpIHtcbiAgICByZXR1cm4gdGhpcy5fc3RlcDtcbiAgfVxuXG4gIG9uQ2hhbmdlOiAodmFsdWU6IGFueSkgPT4gdm9pZCA9ICgpID0+IHRoaXMubG9nZ2VyLmVycm9yKCd2YWx1ZSBhY2Nlc3NvciBpcyBub3QgcmVnaXN0ZXJlZCcpO1xuICBvblRvdWNoZWQ6ICgpID0+IHZvaWQgPSAoKSA9PiB0aGlzLmxvZ2dlci5lcnJvcigndmFsdWUgYWNjZXNzb3IgaXMgbm90IHJlZ2lzdGVyZWQnKTtcbiAgcmVnaXN0ZXJPbkNoYW5nZSA9IGZuID0+IHRoaXMub25DaGFuZ2UgPSBmbjtcbiAgcmVnaXN0ZXJPblRvdWNoZWQgPSBmbiA9PiB0aGlzLm9uVG91Y2hlZCA9IGZuO1xuICBASG9zdExpc3RlbmVyKCdibHVyJykgb25CbHVyID0gKCkgPT4gdGhpcy5vblRvdWNoZWQoKTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGxvZ2dlcjogTkdYTG9nZ2VyLFxuICAgICAgICAgICAgICBwcml2YXRlIGZiOiBGb3JtQnVpbGRlcikge1xuICB9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5yYW5nZUNvbnRyb2wudmFsdWVDaGFuZ2VzLnBpcGUobWFwKHZhbHVlID0+ICt2YWx1ZSkpXG4gICAgICAuc3Vic2NyaWJlKHZhbHVlID0+IHtcbiAgICAgICAgaWYgKHZhbHVlID4gdGhpcy5tYXggfHwgdmFsdWUgPCB0aGlzLm1pbikge1xuICAgICAgICAgIHZhbHVlID0gTWF0aC5taW4oTWF0aC5tYXgodmFsdWUsIHRoaXMubWluKSwgdGhpcy5tYXgpO1xuICAgICAgICAgIHRoaXMucmFuZ2VDb250cm9sLnNldFZhbHVlKHZhbHVlLCB7ZW1pdEV2ZW50OiBmYWxzZX0pO1xuICAgICAgICB9XG4gICAgICAgIHRoaXMub25DaGFuZ2UodmFsdWUpO1xuICAgICAgfSk7XG4gIH1cblxuICB3cml0ZVZhbHVlKHZhbHVlOiBudW1iZXIpIHtcbiAgICB0aGlzLnJhbmdlQ29udHJvbC5zZXRWYWx1ZSh2YWx1ZSB8fCBERUZBVUxUX01JTiwge2VtaXRFdmVudDogZmFsc2V9KTtcbiAgfVxuXG4gIHNldERpc2FibGVkU3RhdGUoaXNEaXNhYmxlZDogYm9vbGVhbikge1xuICAgIHRoaXMuZGlzYWJsZWQgPSBpc0Rpc2FibGVkO1xuICB9XG59XG4iXX0=