@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
107 lines • 12.7 kB
JavaScript
import { Component, ContentChild, forwardRef, Input, TemplateRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { toNumber } from 'lodash-es';
import { RangeDirective } from './range.directive';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
/**
* A component to render a range slider in Cumulocity UI. You need to wrap the default range
* input in this component, then use one of the four available options for the value display mode:
* `pop`, `start`, `end`, and `inline`
*
* ```html
* <c8y-range valueDisplayMode="inline">
* <input id="range" type="range" min="0" max="100000" value="0" step="1">
* </c8y-range>
* ```
*/
export class RangeComponent {
constructor() {
/**
* Value display mode, available options: `pop`, `start`, `end`, and `inline` (fallback)
*/
this.valueDisplayMode = 'inline';
}
/**
* @ignore
* @param obj The value to update
*/
writeValue(obj) {
this.range.elementRef.nativeElement.value = obj;
this.updateValue();
}
/**
* @ignore
* @param fn The function to register for changes
*/
registerOnChange(fn) {
this.onChange = fn;
}
/**
* @ignore
* @param fn The function to register for changes
*/
registerOnTouched(fn) {
this.onTouched = fn;
}
/**
* @ignore
*/
ngAfterContentInit() {
this.updateValue();
this.range.elementRef.nativeElement.addEventListener('input', () => this.updateValue());
}
/**
* @ignore
*/
ngOnDestroy() {
this.range.elementRef.nativeElement.removeEventListener('input', () => this.updateValue());
}
/**
* @ignore
*/
updateValue() {
const rangeValue = this.range.elementRef.nativeElement.value;
this.value = toNumber(rangeValue);
if (this.onChange) {
this.onChange(this.value);
}
this.updatePosition();
}
/**
* Updates the position of the slider
*/
updatePosition() {
const range = this.range.elementRef.nativeElement;
const newValue = Number(((range.value - range.min) * 100) / (range.max - range.min));
const newPosition = 12 - newValue * 0.24;
this.left = `calc(${newValue}% + (${newPosition}px))`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RangeComponent, selector: "c8y-range", inputs: { valueDisplayMode: "valueDisplayMode" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RangeComponent),
multi: true
}
], queries: [{ propertyName: "range", first: true, predicate: RangeDirective, descendants: true, static: true }, { propertyName: "rangeValue", first: true, predicate: ["c8yRangeValue"], descendants: true, static: true }], ngImport: i0, template: "<div\n class=\"range-wrap\"\n [ngClass]=\"valueDisplayMode\"\n style=\"--track-width: {{ left }}\"\n>\n <div\n class=\"range-value\"\n [style.left]=\"left\"\n >\n <span *ngIf=\"!rangeValue\">{{ value }}</span>\n <ng-container *ngTemplateOutlet=\"rangeValue\"></ng-container>\n </div>\n <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RangeComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-range', providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RangeComponent),
multi: true
}
], template: "<div\n class=\"range-wrap\"\n [ngClass]=\"valueDisplayMode\"\n style=\"--track-width: {{ left }}\"\n>\n <div\n class=\"range-value\"\n [style.left]=\"left\"\n >\n <span *ngIf=\"!rangeValue\">{{ value }}</span>\n <ng-container *ngTemplateOutlet=\"rangeValue\"></ng-container>\n </div>\n <ng-content></ng-content>\n</div>\n" }]
}], propDecorators: { valueDisplayMode: [{
type: Input
}], range: [{
type: ContentChild,
args: [RangeDirective, { static: true }]
}], rangeValue: [{
type: ContentChild,
args: ['c8yRangeValue', { static: true }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFuZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29yZS9mb3Jtcy9yYW5nZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9jb3JlL2Zvcm1zL3JhbmdlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFVBQVUsRUFBYSxLQUFLLEVBQUUsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ25HLE9BQU8sRUFBd0IsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUN6RSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sV0FBVyxDQUFDO0FBQ3JDLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQzs7O0FBRW5EOzs7Ozs7Ozs7O0dBVUc7QUFZSCxNQUFNLE9BQU8sY0FBYztJQVgzQjtRQVlFOztXQUVHO1FBQ00scUJBQWdCLEdBQXVDLFFBQVEsQ0FBQztLQXlGMUU7SUE3REM7OztPQUdHO0lBQ0gsVUFBVSxDQUFDLEdBQWU7UUFDeEIsSUFBSSxDQUFDLEtBQUssQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLEtBQUssR0FBRyxHQUFHLENBQUM7UUFDaEQsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFRDs7O09BR0c7SUFDSCxnQkFBZ0IsQ0FBQyxFQUFjO1FBQzdCLElBQUksQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFRDs7O09BR0c7SUFDSCxpQkFBaUIsQ0FBQyxFQUFjO1FBQzlCLElBQUksQ0FBQyxTQUFTLEdBQUcsRUFBRSxDQUFDO0lBQ3RCLENBQUM7SUFFRDs7T0FFRztJQUNILGtCQUFrQjtRQUNoQixJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDbkIsSUFBSSxDQUFDLEtBQUssQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLGdCQUFnQixDQUFDLE9BQU8sRUFBRSxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUMsQ0FBQztJQUMxRixDQUFDO0lBRUQ7O09BRUc7SUFDSCxXQUFXO1FBQ1QsSUFBSSxDQUFDLEtBQUssQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLG1CQUFtQixDQUFDLE9BQU8sRUFBRSxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUMsQ0FBQztJQUM3RixDQUFDO0lBRUQ7O09BRUc7SUFDSCxXQUFXO1FBQ1QsTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQztRQUM3RCxJQUFJLENBQUMsS0FBSyxHQUFHLFFBQVEsQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUNsQyxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUNsQixJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUM1QixDQUFDO1FBQ0QsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO0lBQ3hCLENBQUM7SUFFRDs7T0FFRztJQUNILGNBQWM7UUFDWixNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUM7UUFDbEQsTUFBTSxRQUFRLEdBQUcsTUFBTSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQyxHQUFHLENBQUMsR0FBRyxHQUFHLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxHQUFHLEdBQUcsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7UUFDckYsTUFBTSxXQUFXLEdBQUcsRUFBRSxHQUFHLFFBQVEsR0FBRyxJQUFJLENBQUM7UUFDekMsSUFBSSxDQUFDLElBQUksR0FBRyxRQUFRLFFBQVEsUUFBUSxXQUFXLE1BQU0sQ0FBQztJQUN4RCxDQUFDOytHQTVGVSxjQUFjO21HQUFkLGNBQWMsc0ZBUmQ7WUFDVDtnQkFDRSxPQUFPLEVBQUUsaUJBQWlCO2dCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLGNBQWMsQ0FBQztnQkFDN0MsS0FBSyxFQUFFLElBQUk7YUFDWjtTQUNGLDZEQVVhLGNBQWMsMEtDbkM5QixzVkFjQTs7NEZEYWEsY0FBYztrQkFYMUIsU0FBUzsrQkFDRSxXQUFXLGFBRVY7d0JBQ1Q7NEJBQ0UsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsZUFBZSxDQUFDOzRCQUM3QyxLQUFLLEVBQUUsSUFBSTt5QkFDWjtxQkFDRjs4QkFNUSxnQkFBZ0I7c0JBQXhCLEtBQUs7Z0JBS04sS0FBSztzQkFESixZQUFZO3VCQUFDLGNBQWMsRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUU7Z0JBTTlDLFVBQVU7c0JBRFQsWUFBWTt1QkFBQyxlQUFlLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBDb250ZW50Q2hpbGQsIGZvcndhcmRSZWYsIE9uRGVzdHJveSwgSW5wdXQsIFRlbXBsYXRlUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyB0b051bWJlciB9IGZyb20gJ2xvZGFzaC1lcyc7XG5pbXBvcnQgeyBSYW5nZURpcmVjdGl2ZSB9IGZyb20gJy4vcmFuZ2UuZGlyZWN0aXZlJztcblxuLyoqXG4gKiBBIGNvbXBvbmVudCB0byByZW5kZXIgYSByYW5nZSBzbGlkZXIgaW4gQ3VtdWxvY2l0eSBVSS4gWW91IG5lZWQgdG8gd3JhcCB0aGUgZGVmYXVsdCByYW5nZVxuICogaW5wdXQgaW4gdGhpcyBjb21wb25lbnQsIHRoZW4gdXNlIG9uZSBvZiB0aGUgZm91ciBhdmFpbGFibGUgb3B0aW9ucyBmb3IgdGhlIHZhbHVlIGRpc3BsYXkgbW9kZTpcbiAqIGBwb3BgLCBgc3RhcnRgLCBgZW5kYCwgYW5kIGBpbmxpbmVgXG4gKlxuICogYGBgaHRtbFxuICogPGM4eS1yYW5nZSB2YWx1ZURpc3BsYXlNb2RlPVwiaW5saW5lXCI+XG4gKiAgIDxpbnB1dCBpZD1cInJhbmdlXCIgdHlwZT1cInJhbmdlXCIgbWluPVwiMFwiIG1heD1cIjEwMDAwMFwiIHZhbHVlPVwiMFwiIHN0ZXA9XCIxXCI+XG4gKiA8L2M4eS1yYW5nZT5cbiAqIGBgYFxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjOHktcmFuZ2UnLFxuICB0ZW1wbGF0ZVVybDogJy4vcmFuZ2UuY29tcG9uZW50Lmh0bWwnLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IFJhbmdlQ29tcG9uZW50KSxcbiAgICAgIG11bHRpOiB0cnVlXG4gICAgfVxuICBdXG59KVxuZXhwb3J0IGNsYXNzIFJhbmdlQ29tcG9uZW50IGltcGxlbWVudHMgT25EZXN0cm95LCBDb250cm9sVmFsdWVBY2Nlc3NvciB7XG4gIC8qKlxuICAgKiBWYWx1ZSBkaXNwbGF5IG1vZGUsIGF2YWlsYWJsZSBvcHRpb25zOiBgcG9wYCwgYHN0YXJ0YCwgYGVuZGAsIGFuZCBgaW5saW5lYCAoZmFsbGJhY2spXG4gICAqL1xuICBASW5wdXQoKSB2YWx1ZURpc3BsYXlNb2RlOiAncG9wJyB8ICdpbmxpbmUnIHwgJ2VuZCcgfCAnc3RhcnQnID0gJ2lubGluZSc7XG4gIC8qKlxuICAgKiBUaGUgcmFuZ2UgaW5wdXRcbiAgICovXG4gIEBDb250ZW50Q2hpbGQoUmFuZ2VEaXJlY3RpdmUsIHsgc3RhdGljOiB0cnVlIH0pXG4gIHJhbmdlOiBSYW5nZURpcmVjdGl2ZTtcbiAgLyoqXG4gICAqIFRoZSByYW5nZSB2YWx1ZSBzbGlkZXJcbiAgICovXG4gIEBDb250ZW50Q2hpbGQoJ2M4eVJhbmdlVmFsdWUnLCB7IHN0YXRpYzogdHJ1ZSB9KVxuICByYW5nZVZhbHVlOiBUZW1wbGF0ZVJlZjx1bmtub3duPjtcbiAgLyoqXG4gICAqIFRoZSBjdXJyZW50IHZhbHVlLlxuICAgKi9cbiAgdmFsdWU6IG51bWJlcjtcbiAgLyoqXG4gICAqIFRoZSBjdXJyZW50IHBvc2l0aW9uIG9mIHRoZSB0b29sdGlwIGZyb20gbGVmdFxuICAgKi9cbiAgbGVmdDogc3RyaW5nO1xuICAvKipcbiAgICogQGlnbm9yZVxuICAgKi9cbiAgb25DaGFuZ2U6ICh2YWx1ZTogbnVtYmVyKSA9PiB2b2lkO1xuICAvKipcbiAgICogQGlnbm9yZVxuICAgKi9cbiAgb25Ub3VjaGVkOiAoKSA9PiB2b2lkO1xuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqIEBwYXJhbSBvYmogVGhlIHZhbHVlIHRvIHVwZGF0ZVxuICAgKi9cbiAgd3JpdGVWYWx1ZShvYmo6ICgpID0+IHZvaWQpOiB2b2lkIHtcbiAgICB0aGlzLnJhbmdlLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudC52YWx1ZSA9IG9iajtcbiAgICB0aGlzLnVwZGF0ZVZhbHVlKCk7XG4gIH1cblxuICAvKipcbiAgICogQGlnbm9yZVxuICAgKiBAcGFyYW0gZm4gVGhlIGZ1bmN0aW9uIHRvIHJlZ2lzdGVyIGZvciBjaGFuZ2VzXG4gICAqL1xuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiAoKSA9PiB2b2lkKTogdm9pZCB7XG4gICAgdGhpcy5vbkNoYW5nZSA9IGZuO1xuICB9XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICogQHBhcmFtIGZuIFRoZSBmdW5jdGlvbiB0byByZWdpc3RlciBmb3IgY2hhbmdlc1xuICAgKi9cbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46ICgpID0+IHZvaWQpOiB2b2lkIHtcbiAgICB0aGlzLm9uVG91Y2hlZCA9IGZuO1xuICB9XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIG5nQWZ0ZXJDb250ZW50SW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLnVwZGF0ZVZhbHVlKCk7XG4gICAgdGhpcy5yYW5nZS5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignaW5wdXQnLCAoKSA9PiB0aGlzLnVwZGF0ZVZhbHVlKCkpO1xuICB9XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMucmFuZ2UuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2lucHV0JywgKCkgPT4gdGhpcy51cGRhdGVWYWx1ZSgpKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICB1cGRhdGVWYWx1ZSgpIHtcbiAgICBjb25zdCByYW5nZVZhbHVlID0gdGhpcy5yYW5nZS5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQudmFsdWU7XG4gICAgdGhpcy52YWx1ZSA9IHRvTnVtYmVyKHJhbmdlVmFsdWUpO1xuICAgIGlmICh0aGlzLm9uQ2hhbmdlKSB7XG4gICAgICB0aGlzLm9uQ2hhbmdlKHRoaXMudmFsdWUpO1xuICAgIH1cbiAgICB0aGlzLnVwZGF0ZVBvc2l0aW9uKCk7XG4gIH1cblxuICAvKipcbiAgICogVXBkYXRlcyB0aGUgcG9zaXRpb24gb2YgdGhlIHNsaWRlclxuICAgKi9cbiAgdXBkYXRlUG9zaXRpb24oKSB7XG4gICAgY29uc3QgcmFuZ2UgPSB0aGlzLnJhbmdlLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudDtcbiAgICBjb25zdCBuZXdWYWx1ZSA9IE51bWJlcigoKHJhbmdlLnZhbHVlIC0gcmFuZ2UubWluKSAqIDEwMCkgLyAocmFuZ2UubWF4IC0gcmFuZ2UubWluKSk7XG4gICAgY29uc3QgbmV3UG9zaXRpb24gPSAxMiAtIG5ld1ZhbHVlICogMC4yNDtcbiAgICB0aGlzLmxlZnQgPSBgY2FsYygke25ld1ZhbHVlfSUgKyAoJHtuZXdQb3NpdGlvbn1weCkpYDtcbiAgfVxufVxuIiwiPGRpdlxuICBjbGFzcz1cInJhbmdlLXdyYXBcIlxuICBbbmdDbGFzc109XCJ2YWx1ZURpc3BsYXlNb2RlXCJcbiAgc3R5bGU9XCItLXRyYWNrLXdpZHRoOiB7eyBsZWZ0IH19XCJcbj5cbiAgPGRpdlxuICAgIGNsYXNzPVwicmFuZ2UtdmFsdWVcIlxuICAgIFtzdHlsZS5sZWZ0XT1cImxlZnRcIlxuICA+XG4gICAgPHNwYW4gKm5nSWY9XCIhcmFuZ2VWYWx1ZVwiPnt7IHZhbHVlIH19PC9zcGFuPlxuICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJyYW5nZVZhbHVlXCI+PC9uZy1jb250YWluZXI+XG4gIDwvZGl2PlxuICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48L2Rpdj5cbiJdfQ==