@universal-material/angular
Version:
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.0.
93 lines • 13.6 kB
JavaScript
import { Component, forwardRef, HostBinding, Input, ViewChild } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
const SliderValueAcessor = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SliderComponent),
multi: true
};
export class SliderComponent {
constructor(elementRef) {
this.elementRef = elementRef;
this.step = 1;
this.showTrack = false;
this._disabled = false;
this._onTouched = () => { };
this._onChange = (_) => { };
this.elementRef.nativeElement.setAttribute('role', 'slider');
this.elementRef.nativeElement.setAttribute('aria-orientation', 'horizontal');
this.elementRef.nativeElement.classList.add('u-slider');
}
_setThumbAndTrack() {
let value = this._value;
const offset = this.max - this.min;
value -= this.min;
const position = value * 100 / offset;
this._trackWidth = `${position}%`;
}
ngOnInit() {
this.inputRef.nativeElement.addEventListener(window.navigator.userAgent.indexOf('Trident/') > -1 ? 'change' : 'input', () => {
this._value = this.inputRef.nativeElement.valueAsNumber;
this._onChange(this.inputRef.nativeElement.valueAsNumber);
this._setThumbAndTrack();
});
if (typeof this.step === 'string') {
this.step = parseFloat(this.step);
}
if (typeof this.min === 'string') {
this.min = parseInt(this.min, 10);
}
if (typeof this.max === 'string') {
this.max = parseInt(this.max, 10);
}
if (this._value === undefined) {
this._value = ((this.max - this.min) / 2) + this.min;
this._onChange(this._value);
this._setThumbAndTrack();
}
}
registerOnChange(fn) {
this._onChange = fn;
}
registerOnTouched(fn) {
this._onTouched = fn;
}
setDisabledState(disabled) {
this._disabled = disabled;
}
writeValue(obj) {
this._value = obj;
this._setThumbAndTrack();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SliderComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SliderComponent, selector: "u-slider", inputs: { step: "step", showTrack: "showTrack", min: "min", max: "max" }, host: { properties: { "attr.aria-minvalue": "this.min", "attr.aria-maxvalue": "this.max", "attr.aria-disabled": "this._disabled", "attr.aria-valuenow": "this._value" } }, providers: [SliderValueAcessor], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: "<input type=\"range\" [min]=\"min\" [max]=\"max\" [step]=\"step\" aria-hidden=\"true\" [disabled]=\"_disabled\" [valueAsNumber]=\"_value\" #input>\n<div class=\"u-slider-thumb-container\">\n <div class=\"u-slider-thumb\" [style.width]=\"_trackWidth\"></div>\n</div>\n<div class=\"u-slider-track-container\">\n <div class=\"u-slider-track-marker-container\" *ngIf=\"showTrack\">\n <div class=\"u-slider-track-marker\"></div>\n </div>\n <div class=\"u-slider-track\" [style.width]=\"_trackWidth\"></div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SliderComponent, decorators: [{
type: Component,
args: [{ selector: 'u-slider', providers: [SliderValueAcessor], template: "<input type=\"range\" [min]=\"min\" [max]=\"max\" [step]=\"step\" aria-hidden=\"true\" [disabled]=\"_disabled\" [valueAsNumber]=\"_value\" #input>\n<div class=\"u-slider-thumb-container\">\n <div class=\"u-slider-thumb\" [style.width]=\"_trackWidth\"></div>\n</div>\n<div class=\"u-slider-track-container\">\n <div class=\"u-slider-track-marker-container\" *ngIf=\"showTrack\">\n <div class=\"u-slider-track-marker\"></div>\n </div>\n <div class=\"u-slider-track\" [style.width]=\"_trackWidth\"></div>\n</div>\n", styles: [":host{display:block}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { step: [{
type: Input
}], showTrack: [{
type: Input
}], min: [{
type: HostBinding,
args: ['attr.aria-minvalue']
}, {
type: Input
}], max: [{
type: HostBinding,
args: ['attr.aria-maxvalue']
}, {
type: Input
}], _disabled: [{
type: HostBinding,
args: ['attr.aria-disabled']
}], _value: [{
type: HostBinding,
args: ['attr.aria-valuenow']
}], inputRef: [{
type: ViewChild,
args: ['input', { static: true }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9zbGlkZXIvc2xpZGVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3NyYy9zbGlkZXIvc2xpZGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWMsVUFBVSxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQVUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pHLE9BQU8sRUFBd0IsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7O0FBRXpFLE1BQU0sa0JBQWtCLEdBQUc7SUFDekIsT0FBTyxFQUFFLGlCQUFpQjtJQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLGVBQWUsQ0FBQztJQUM5QyxLQUFLLEVBQUUsSUFBSTtDQUNaLENBQUM7QUFRRixNQUFNLE9BQU8sZUFBZTtJQW1CMUIsWUFBNkIsVUFBbUM7UUFBbkMsZUFBVSxHQUFWLFVBQVUsQ0FBeUI7UUFqQnZELFNBQUksR0FBRyxDQUFDLENBQUM7UUFDVCxjQUFTLEdBQUcsS0FBSyxDQUFDO1FBR1EsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUk3QyxlQUFVLEdBQUcsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFBO1FBQ3JCLGNBQVMsR0FBRyxDQUFDLENBQU0sRUFBRSxFQUFFLEdBQUUsQ0FBQyxDQUFBO1FBU2hDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLFlBQVksQ0FBQyxNQUFNLEVBQUUsUUFBUSxDQUFDLENBQUM7UUFDN0QsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsWUFBWSxDQUFDLGtCQUFrQixFQUFFLFlBQVksQ0FBQyxDQUFDO1FBQzdFLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsVUFBVSxDQUFDLENBQUM7SUFD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Qjs7c0JBQUcsS0FBSztnQkFDTixTQUFTO3NCQUEzQyxXQUFXO3VCQUFDLG9CQUFvQjtnQkFDRSxNQUFNO3NCQUF4QyxXQUFXO3VCQUFDLG9CQUFvQjtnQkFNRyxRQUFRO3NCQUEzQyxTQUFTO3VCQUFDLE9BQU8sRUFBRSxFQUFDLE1BQU0sRUFBRSxJQUFJLEVBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIGZvcndhcmRSZWYsIEhvc3RCaW5kaW5nLCBJbnB1dCwgT25Jbml0LCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuY29uc3QgU2xpZGVyVmFsdWVBY2Vzc29yID0ge1xuICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gU2xpZGVyQ29tcG9uZW50KSxcbiAgbXVsdGk6IHRydWVcbn07XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3Utc2xpZGVyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3NsaWRlci5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3NsaWRlci5jb21wb25lbnQuc2NzcyddLFxuICBwcm92aWRlcnM6IFtTbGlkZXJWYWx1ZUFjZXNzb3JdXG59KVxuZXhwb3J0IGNsYXNzIFNsaWRlckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xuXG4gIEBJbnB1dCgpIHN0ZXAgPSAxO1xuICBASW5wdXQoKSBzaG93VHJhY2sgPSBmYWxzZTtcbiAgQEhvc3RCaW5kaW5nKCdhdHRyLmFyaWEtbWludmFsdWUnKSBASW5wdXQoKSBtaW4hOiBudW1iZXI7XG4gIEBIb3N0QmluZGluZygnYXR0ci5hcmlhLW1heHZhbHVlJykgQElucHV0KCkgbWF4ITogbnVtYmVyO1xuICBASG9zdEJpbmRpbmcoJ2F0dHIuYXJpYS1kaXNhYmxlZCcpIF9kaXNhYmxlZCA9IGZhbHNlO1xuICBASG9zdEJpbmRpbmcoJ2F0dHIuYXJpYS12YWx1ZW5vdycpIF92YWx1ZSE6IG51bWJlcjtcbiAgX3RyYWNrV2lkdGghOiBzdHJpbmc7XG5cbiAgcHJpdmF0ZSBfb25Ub3VjaGVkID0gKCkgPT4ge31cbiAgcHJpdmF0ZSBfb25DaGFuZ2UgPSAoXzogYW55KSA9PiB7fVxuXG4gIEBWaWV3Q2hpbGQoJ2lucHV0Jywge3N0YXRpYzogdHJ1ZX0pIGlucHV0UmVmITogRWxlbWVudFJlZjxIVE1MSW5wdXRFbGVtZW50PjtcblxuICBzdGF0aWMgbmdBY2NlcHRJbnB1dFR5cGVfbWluOiBudW1iZXIgfCBzdHJpbmc7XG4gIHN0YXRpYyBuZ0FjY2VwdElucHV0VHlwZV9tYXg6IG51bWJlciB8IHN0cmluZztcbiAgc3RhdGljIG5nQWNjZXB0SW5wdXRUeXBlX3N0ZXA6IG51bWJlciB8IHN0cmluZztcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHJlYWRvbmx5IGVsZW1lbnRSZWY6IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+KSB7XG4gICAgdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuc2V0QXR0cmlidXRlKCdyb2xlJywgJ3NsaWRlcicpO1xuICAgIHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LnNldEF0dHJpYnV0ZSgnYXJpYS1vcmllbnRhdGlvbicsICdob3Jpem9udGFsJyk7XG4gICAgdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuY2xhc3NMaXN0LmFkZCgndS1zbGlkZXInKTtcbiAgfVxuXG4gIHByaXZhdGUgX3NldFRodW1iQW5kVHJhY2soKSB7XG5cbiAgICBsZXQgdmFsdWUgPSB0aGlzLl92YWx1ZTtcblxuICAgIGNvbnN0IG9mZnNldCA9IHRoaXMubWF4IC0gdGhpcy5taW47XG4gICAgdmFsdWUgLT0gdGhpcy5taW47XG5cbiAgICBjb25zdCBwb3NpdGlvbiA9IHZhbHVlICogMTAwIC8gb2Zmc2V0O1xuICAgIHRoaXMuX3RyYWNrV2lkdGggPSBgJHtwb3NpdGlvbn0lYDtcbiAgfVxuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMuaW5wdXRSZWYubmF0aXZlRWxlbWVudC5hZGRFdmVudExpc3RlbmVyKHdpbmRvdy5uYXZpZ2F0b3IudXNlckFnZW50LmluZGV4T2YoJ1RyaWRlbnQvJykgPiAtMSA/ICdjaGFuZ2UnIDogJ2lucHV0JyxcbiAgICAgICgpID0+IHtcbiAgICAgICAgdGhpcy5fdmFsdWUgPSB0aGlzLmlucHV0UmVmLm5hdGl2ZUVsZW1lbnQudmFsdWVBc051bWJlcjtcbiAgICAgICAgdGhpcy5fb25DaGFuZ2UodGhpcy5pbnB1dFJlZi5uYXRpdmVFbGVtZW50LnZhbHVlQXNOdW1iZXIpO1xuICAgICAgICB0aGlzLl9zZXRUaHVtYkFuZFRyYWNrKCk7XG4gICAgICB9KTtcblxuICAgIGlmICh0eXBlb2YgdGhpcy5zdGVwID09PSAnc3RyaW5nJykge1xuICAgICAgdGhpcy5zdGVwID0gcGFyc2VGbG9hdCh0aGlzLnN0ZXApO1xuICAgIH1cblxuICAgIGlmICh0eXBlb2YgdGhpcy5taW4gPT09ICdzdHJpbmcnKSB7XG4gICAgICB0aGlzLm1pbiA9IHBhcnNlSW50KHRoaXMubWluLCAxMCk7XG4gICAgfVxuXG4gICAgaWYgKHR5cGVvZiB0aGlzLm1heCA9PT0gJ3N0cmluZycpIHtcbiAgICAgIHRoaXMubWF4ID0gcGFyc2VJbnQodGhpcy5tYXgsIDEwKTtcbiAgICB9XG5cbiAgICBpZiAodGhpcy5fdmFsdWUgPT09IHVuZGVmaW5lZCkge1xuICAgICAgdGhpcy5fdmFsdWUgPSAoKHRoaXMubWF4IC0gdGhpcy5taW4pIC8gMikgKyB0aGlzLm1pbjtcbiAgICAgIHRoaXMuX29uQ2hhbmdlKHRoaXMuX3ZhbHVlKTtcblxuICAgICAgdGhpcy5fc2V0VGh1bWJBbmRUcmFjaygpO1xuICAgIH1cbiAgfVxuXG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46IGFueSk6IHZvaWQge1xuICAgIHRoaXMuX29uQ2hhbmdlID0gZm47XG4gIH1cblxuICByZWdpc3Rlck9uVG91Y2hlZChmbjogYW55KTogdm9pZCB7XG4gICAgdGhpcy5fb25Ub3VjaGVkID0gZm47XG4gIH1cblxuICBzZXREaXNhYmxlZFN0YXRlKGRpc2FibGVkOiBib29sZWFuKTogdm9pZCB7XG4gICAgdGhpcy5fZGlzYWJsZWQgPSBkaXNhYmxlZDtcbiAgfVxuXG4gIHdyaXRlVmFsdWUob2JqOiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLl92YWx1ZSA9IG9iajtcbiAgICB0aGlzLl9zZXRUaHVtYkFuZFRyYWNrKCk7XG4gIH1cbn1cbiIsIjxpbnB1dCB0eXBlPVwicmFuZ2VcIiBbbWluXT1cIm1pblwiIFttYXhdPVwibWF4XCIgW3N0ZXBdPVwic3RlcFwiIGFyaWEtaGlkZGVuPVwidHJ1ZVwiIFtkaXNhYmxlZF09XCJfZGlzYWJsZWRcIiBbdmFsdWVBc051bWJlcl09XCJfdmFsdWVcIiAjaW5wdXQ+XG48ZGl2IGNsYXNzPVwidS1zbGlkZXItdGh1bWItY29udGFpbmVyXCI+XG4gIDxkaXYgY2xhc3M9XCJ1LXNsaWRlci10aHVtYlwiIFtzdHlsZS53aWR0aF09XCJfdHJhY2tXaWR0aFwiPjwvZGl2PlxuPC9kaXY+XG48ZGl2IGNsYXNzPVwidS1zbGlkZXItdHJhY2stY29udGFpbmVyXCI+XG4gIDxkaXYgY2xhc3M9XCJ1LXNsaWRlci10cmFjay1tYXJrZXItY29udGFpbmVyXCIgKm5nSWY9XCJzaG93VHJhY2tcIj5cbiAgICA8ZGl2IGNsYXNzPVwidS1zbGlkZXItdHJhY2stbWFya2VyXCI+PC9kaXY+XG4gIDwvZGl2PlxuICA8ZGl2IGNsYXNzPVwidS1zbGlkZXItdHJhY2tcIiBbc3R5bGUud2lkdGhdPVwiX3RyYWNrV2lkdGhcIj48L2Rpdj5cbjwvZGl2PlxuIl19