design-angular-kit
Version:
Un toolkit Angular conforme alle linee guida di design per i servizi web della PA
64 lines • 12.7 kB
JavaScript
import { ChangeDetectionStrategy, Component, Input, ViewChild, } from '@angular/core';
import { ItAbstractFormComponent } from '../../../abstracts/abstract-form.component';
import { ReactiveFormsModule } from '@angular/forms';
import { distinctUntilChanged, startWith } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
export class ItRangeComponent extends ItAbstractFormComponent {
ngOnInit() {
super.ngOnInit();
this.subscription = this.control.valueChanges
.pipe(distinctUntilChanged(), startWith(undefined))
.subscribe(() => this.updateSliderColor());
}
ngOnChanges(changes) {
if (changes['leftColor']) {
this.slider.nativeElement.style.setProperty('--range-left-color', this.leftColor ?? null);
}
if (changes['rightColor']) {
this.slider.nativeElement.style.setProperty('--range-right-color', this.rightColor ?? null);
}
}
ngOnDestroy() {
this.subscription?.unsubscribe();
}
writeValue(value) {
super.writeValue(value);
this.updateSliderColor();
}
/**
* Update the percentage of slider color
* @private
*/
updateSliderColor() {
if (!this.leftColor || !this.rightColor) {
return;
}
const max = Number(this.slider.nativeElement.max) || 100;
const min = Number(this.slider.nativeElement.min) || 0;
// Calculate visible width
const diff = max - min;
const val = (((this.control.value ?? diff / 2) - min) * 100) / diff;
this.slider.nativeElement.style.setProperty('--range-percentage', `${val}%`);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItRangeComponent, isStandalone: true, selector: "it-range", inputs: { max: "max", min: "min", step: "step", leftColor: "leftColor", rightColor: "rightColor" }, viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex justify-content-between align-items-center\">\n @if (label) {\n <label [for]=\"id\" class=\"form-label\">{{ label }}</label>\n }\n <ng-content></ng-content>\n</div>\n\n<input\n #slider\n [id]=\"id\"\n type=\"range\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n class=\"form-range\"\n [class.double-color]=\"!!leftColor && !!rightColor\"\n [formControl]=\"control\" />\n", styles: [".form-range.double-color::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--range-left-color) var(--range-percentage),var(--range-right-color) var(--range-percentage))}.form-range.double-color::-moz-range-track{background:linear-gradient(to right,var(--range-left-color) var(--range-percentage),var(--range-right-color) var(--range-percentage))}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItRangeComponent, decorators: [{
type: Component,
args: [{ selector: 'it-range', standalone: true, imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex justify-content-between align-items-center\">\n @if (label) {\n <label [for]=\"id\" class=\"form-label\">{{ label }}</label>\n }\n <ng-content></ng-content>\n</div>\n\n<input\n #slider\n [id]=\"id\"\n type=\"range\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n class=\"form-range\"\n [class.double-color]=\"!!leftColor && !!rightColor\"\n [formControl]=\"control\" />\n", styles: [".form-range.double-color::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--range-left-color) var(--range-percentage),var(--range-right-color) var(--range-percentage))}.form-range.double-color::-moz-range-track{background:linear-gradient(to right,var(--range-left-color) var(--range-percentage),var(--range-right-color) var(--range-percentage))}\n"] }]
}], propDecorators: { max: [{
type: Input
}], min: [{
type: Input
}], step: [{
type: Input
}], leftColor: [{
type: Input
}], rightColor: [{
type: Input
}], slider: [{
type: ViewChild,
args: ['slider', { static: true }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFuZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZGVzaWduLWFuZ3VsYXIta2l0L3NyYy9saWIvY29tcG9uZW50cy9mb3JtL3JhbmdlL3JhbmdlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Rlc2lnbi1hbmd1bGFyLWtpdC9zcmMvbGliL2NvbXBvbmVudHMvZm9ybS9yYW5nZS9yYW5nZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFFVCxLQUFLLEVBS0wsU0FBUyxHQUNWLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDRDQUE0QyxDQUFDO0FBQ3JGLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3JELE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxTQUFTLEVBQWdCLE1BQU0sTUFBTSxDQUFDOzs7QUFVckUsTUFBTSxPQUFPLGdCQUFpQixTQUFRLHVCQUFrRDtJQWtDN0UsUUFBUTtRQUNmLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQztRQUNqQixJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsWUFBWTthQUMxQyxJQUFJLENBQUMsb0JBQW9CLEVBQUUsRUFBRSxTQUFTLENBQUMsU0FBUyxDQUFDLENBQUM7YUFDbEQsU0FBUyxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDLENBQUM7SUFDL0MsQ0FBQztJQUVRLFdBQVcsQ0FBQyxPQUFzQjtRQUN6QyxJQUFJLE9BQU8sQ0FBQyxXQUFXLENBQUMsRUFBRSxDQUFDO1lBQ3pCLElBQUksQ0FBQyxNQUFNLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxXQUFXLENBQUMsb0JBQW9CLEVBQUUsSUFBSSxDQUFDLFNBQVMsSUFBSSxJQUFJLENBQUMsQ0FBQztRQUM1RixDQUFDO1FBQ0QsSUFBSSxPQUFPLENBQUMsWUFBWSxDQUFDLEVBQUUsQ0FBQztZQUMxQixJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsV0FBVyxDQUFDLHFCQUFxQixFQUFFLElBQUksQ0FBQyxVQUFVLElBQUksSUFBSSxDQUFDLENBQUM7UUFDOUYsQ0FBQztJQUNILENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLFlBQVksRUFBRSxXQUFXLEVBQUUsQ0FBQztJQUNuQyxDQUFDO0lBRVEsVUFBVSxDQUFDLEtBQWdDO1FBQ2xELEtBQUssQ0FBQyxVQUFVLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDeEIsSUFBSSxDQUFDLGlCQUFpQixFQUFFLENBQUM7SUFDM0IsQ0FBQztJQUVEOzs7T0FHRztJQUNLLGlCQUFpQjtRQUN2QixJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztZQUN4QyxPQUFPO1FBQ1QsQ0FBQztRQUVELE1BQU0sR0FBRyxHQUFHLE1BQU0sQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxHQUFHLENBQUMsSUFBSSxHQUFHLENBQUM7UUFDekQsTUFBTSxHQUFHLEdBQUcsTUFBTSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsYUFBYSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUV2RCwwQkFBMEI7UUFDMUIsTUFBTSxJQUFJLEdBQUcsR0FBRyxHQUFHLEdBQUcsQ0FBQztRQUN2QixNQUFNLEdBQUcsR0FBRyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssSUFBSSxJQUFJLEdBQUcsQ0FBQyxDQUFDLEdBQUcsR0FBRyxDQUFDLEdBQUcsR0FBRyxDQUFDLEdBQUcsSUFBSSxDQUFDO1FBQ3BFLElBQUksQ0FBQyxNQUFNLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxXQUFXLENBQUMsb0JBQW9CLEVBQUUsR0FBRyxHQUFHLEdBQUcsQ0FBQyxDQUFDO0lBQy9FLENBQUM7OEdBM0VVLGdCQUFnQjtrR0FBaEIsZ0JBQWdCLG9VQ3ZCN0IsNlpBaUJBLDBhRENZLG1CQUFtQjs7MkZBS2xCLGdCQUFnQjtrQkFSNUIsU0FBUzsrQkFDRSxVQUFVLGNBQ1IsSUFBSSxXQUNQLENBQUMsbUJBQW1CLENBQUMsbUJBR2IsdUJBQXVCLENBQUMsTUFBTTs4QkFNdEMsR0FBRztzQkFBWCxLQUFLO2dCQUtHLEdBQUc7c0JBQVgsS0FBSztnQkFLRyxJQUFJO3NCQUFaLEtBQUs7Z0JBT0csU0FBUztzQkFBakIsS0FBSztnQkFPRyxVQUFVO3NCQUFsQixLQUFLO2dCQUVpQyxNQUFNO3NCQUE1QyxTQUFTO3VCQUFDLFFBQVEsRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBJbnB1dCxcbiAgT25DaGFuZ2VzLFxuICBPbkRlc3Ryb3ksXG4gIE9uSW5pdCxcbiAgU2ltcGxlQ2hhbmdlcyxcbiAgVmlld0NoaWxkLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEl0QWJzdHJhY3RGb3JtQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vLi4vYWJzdHJhY3RzL2Fic3RyYWN0LWZvcm0uY29tcG9uZW50JztcbmltcG9ydCB7IFJlYWN0aXZlRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBkaXN0aW5jdFVudGlsQ2hhbmdlZCwgc3RhcnRXaXRoLCBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnaXQtcmFuZ2UnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbUmVhY3RpdmVGb3Jtc01vZHVsZV0sXG4gIHRlbXBsYXRlVXJsOiAnLi9yYW5nZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3JhbmdlLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBJdFJhbmdlQ29tcG9uZW50IGV4dGVuZHMgSXRBYnN0cmFjdEZvcm1Db21wb25lbnQ8bnVtYmVyIHwgbnVsbCB8IHVuZGVmaW5lZD4gaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcywgT25EZXN0cm95IHtcbiAgLyoqXG4gICAqIFRoZSBtYXggdmFsdWVcbiAgICovXG4gIEBJbnB1dCgpIG1heD86IG51bWJlcjtcblxuICAvKipcbiAgICogVGhlIG1pbiB2YWx1ZVxuICAgKi9cbiAgQElucHV0KCkgbWluPzogbnVtYmVyO1xuXG4gIC8qKlxuICAgKiBUaGUgc3RlcCB2YWx1ZVxuICAgKi9cbiAgQElucHV0KCkgc3RlcD86IG51bWJlciB8ICdhbnknO1xuXG4gIC8qKlxuICAgKiBUaGUgY29sb3Igb24gbGVmdCBvZiB0aHVtYiBbUmVxdWlyZSByaWdodENvbG9yXVxuICAgKiBAZXhhbXBsZSAnIzBkNmVmZCcgb3IgJ3ZhcigtLWJzLXByaW1hcnkpJ1xuICAgKiBAZGVmYXVsdCB1bmRlZmluZWQgKCd2YXIoLS1icy1ncmF5LTMwMCknKVxuICAgKi9cbiAgQElucHV0KCkgbGVmdENvbG9yPzogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBUaGUgY29sb3Igb24gcmlnaHQgb2YgdGh1bWIgW1JlcXVpcmUgbGVmdENvbG9yXVxuICAgKiBAZXhhbXBsZSAnIzBkNmVmZCcgb3IgJ3ZhcigtLWJzLXByaW1hcnkpJ1xuICAgKiBAZGVmYXVsdCB1bmRlZmluZWQgKCd2YXIoLS1icy1ncmF5LTMwMCknKVxuICAgKi9cbiAgQElucHV0KCkgcmlnaHRDb2xvcj86IHN0cmluZztcblxuICBAVmlld0NoaWxkKCdzbGlkZXInLCB7IHN0YXRpYzogdHJ1ZSB9KSBzbGlkZXIhOiBFbGVtZW50UmVmPEhUTUxJbnB1dEVsZW1lbnQ+O1xuXG4gIHByaXZhdGUgc3Vic2NyaXB0aW9uPzogU3Vic2NyaXB0aW9uO1xuXG4gIG92ZXJyaWRlIG5nT25Jbml0KCkge1xuICAgIHN1cGVyLm5nT25Jbml0KCk7XG4gICAgdGhpcy5zdWJzY3JpcHRpb24gPSB0aGlzLmNvbnRyb2wudmFsdWVDaGFuZ2VzXG4gICAgICAucGlwZShkaXN0aW5jdFVudGlsQ2hhbmdlZCgpLCBzdGFydFdpdGgodW5kZWZpbmVkKSlcbiAgICAgIC5zdWJzY3JpYmUoKCkgPT4gdGhpcy51cGRhdGVTbGlkZXJDb2xvcigpKTtcbiAgfVxuXG4gIG92ZXJyaWRlIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpIHtcbiAgICBpZiAoY2hhbmdlc1snbGVmdENvbG9yJ10pIHtcbiAgICAgIHRoaXMuc2xpZGVyLm5hdGl2ZUVsZW1lbnQuc3R5bGUuc2V0UHJvcGVydHkoJy0tcmFuZ2UtbGVmdC1jb2xvcicsIHRoaXMubGVmdENvbG9yID8/IG51bGwpO1xuICAgIH1cbiAgICBpZiAoY2hhbmdlc1sncmlnaHRDb2xvciddKSB7XG4gICAgICB0aGlzLnNsaWRlci5uYXRpdmVFbGVtZW50LnN0eWxlLnNldFByb3BlcnR5KCctLXJhbmdlLXJpZ2h0LWNvbG9yJywgdGhpcy5yaWdodENvbG9yID8/IG51bGwpO1xuICAgIH1cbiAgfVxuXG4gIG5nT25EZXN0cm95KCkge1xuICAgIHRoaXMuc3Vic2NyaXB0aW9uPy51bnN1YnNjcmliZSgpO1xuICB9XG5cbiAgb3ZlcnJpZGUgd3JpdGVWYWx1ZSh2YWx1ZTogbnVtYmVyIHwgbnVsbCB8IHVuZGVmaW5lZCkge1xuICAgIHN1cGVyLndyaXRlVmFsdWUodmFsdWUpO1xuICAgIHRoaXMudXBkYXRlU2xpZGVyQ29sb3IoKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBVcGRhdGUgdGhlIHBlcmNlbnRhZ2Ugb2Ygc2xpZGVyIGNvbG9yXG4gICAqIEBwcml2YXRlXG4gICAqL1xuICBwcml2YXRlIHVwZGF0ZVNsaWRlckNvbG9yKCk6IHZvaWQge1xuICAgIGlmICghdGhpcy5sZWZ0Q29sb3IgfHwgIXRoaXMucmlnaHRDb2xvcikge1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIGNvbnN0IG1heCA9IE51bWJlcih0aGlzLnNsaWRlci5uYXRpdmVFbGVtZW50Lm1heCkgfHwgMTAwO1xuICAgIGNvbnN0IG1pbiA9IE51bWJlcih0aGlzLnNsaWRlci5uYXRpdmVFbGVtZW50Lm1pbikgfHwgMDtcblxuICAgIC8vIENhbGN1bGF0ZSB2aXNpYmxlIHdpZHRoXG4gICAgY29uc3QgZGlmZiA9IG1heCAtIG1pbjtcbiAgICBjb25zdCB2YWwgPSAoKCh0aGlzLmNvbnRyb2wudmFsdWUgPz8gZGlmZiAvIDIpIC0gbWluKSAqIDEwMCkgLyBkaWZmO1xuICAgIHRoaXMuc2xpZGVyLm5hdGl2ZUVsZW1lbnQuc3R5bGUuc2V0UHJvcGVydHkoJy0tcmFuZ2UtcGVyY2VudGFnZScsIGAke3ZhbH0lYCk7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJkLWZsZXgganVzdGlmeS1jb250ZW50LWJldHdlZW4gYWxpZ24taXRlbXMtY2VudGVyXCI+XG4gIEBpZiAobGFiZWwpIHtcbiAgICA8bGFiZWwgW2Zvcl09XCJpZFwiIGNsYXNzPVwiZm9ybS1sYWJlbFwiPnt7IGxhYmVsIH19PC9sYWJlbD5cbiAgfVxuICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48L2Rpdj5cblxuPGlucHV0XG4gICNzbGlkZXJcbiAgW2lkXT1cImlkXCJcbiAgdHlwZT1cInJhbmdlXCJcbiAgW21pbl09XCJtaW5cIlxuICBbbWF4XT1cIm1heFwiXG4gIFtzdGVwXT1cInN0ZXBcIlxuICBjbGFzcz1cImZvcm0tcmFuZ2VcIlxuICBbY2xhc3MuZG91YmxlLWNvbG9yXT1cIiEhbGVmdENvbG9yICYmICEhcmlnaHRDb2xvclwiXG4gIFtmb3JtQ29udHJvbF09XCJjb250cm9sXCIgLz5cbiJdfQ==