@obliczeniowo/elementary
Version:
Library made in Angular version 20
164 lines (159 loc) • 13.9 kB
JavaScript
import * as i0 from '@angular/core';
import { model, input, ViewChild, HostBinding, Input, Component, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule, FormsModule } from '@angular/forms';
import * as i1 from '@obliczeniowo/elementary/numeric-pipes';
import { LimitsPipe } from '@obliczeniowo/elementary/numeric-pipes';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
class MinMaxInputComponent {
limits;
label;
min = model(0);
max = model(100);
value = model(50);
precision = input(0, {
transform: (precision) => {
return this.limits.transform([precision], {
min: 0,
transformTo: 'int-round',
})[0];
},
});
appearance = 'outlined';
valueFormatter = (value, precision) => value.toFixed(precision);
disabled = false;
get invalid() {
const { value, min, max } = this;
return value() < min() || value() > max();
}
valueContainer;
mouseValue = 0;
mouseIn;
constructor(limits) {
this.limits = limits;
}
get valueWidth() {
const dValue = +this.max() - +this.min();
const value = +((this.mouseIn ? this.mouseValue : this.value()) - this.min()).toFixed(this.precision());
return (dValue > 0 ? value / dValue : 0) * 100 + '%';
}
mouseMove(mouseEvent) {
const rect = this.valueContainer.nativeElement.getBoundingClientRect();
const x = mouseEvent.clientX - rect.x;
const width = this.valueContainer.nativeElement.clientWidth - 1 || 1;
this.mouseValue = (x / width) * (+this.max() - +this.min()) + +this.min();
}
setValue(value) {
const { min, max } = this;
this.value.set(+value.toFixed(+this.precision()));
this.onChange({
value: +value.toFixed(+this.precision()),
min: min(),
max: max(),
});
}
onChange = (value) => { };
onTouched = () => { };
abstractControl;
validate(control) {
this.abstractControl = control;
this.abstractControl.setErrors(this.invalid ? { range: true } : null);
return this.abstractControl.errors;
}
registerOnValidatorChange(fn) {
this.onChange = fn;
}
writeValue(value) {
this.value.set(value.value);
this.min.set(value.min || this.min());
this.max.set(value.max || this.max());
}
registerOnChange(onChange) {
this.onChange = onChange;
}
registerOnTouched(onTouched) {
this.onTouched = onTouched;
}
setDisabledState(disabled) {
this.disabled = disabled;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: MinMaxInputComponent, deps: [{ token: i1.LimitsPipe }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: MinMaxInputComponent, isStandalone: false, selector: "obl-min-max-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, precision: { classPropertyName: "precision", publicName: "precision", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: false, isRequired: false, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { min: "minChange", max: "maxChange", value: "valueChange" }, host: { properties: { "class.disabled": "this.disabled", "class.invalid": "this.invalid" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: MinMaxInputComponent,
},
{
provide: NG_VALIDATORS,
multi: true,
useExisting: MinMaxInputComponent,
},
LimitsPipe,
], viewQueries: [{ propertyName: "valueContainer", first: true, predicate: ["valueContainer"], descendants: true }], ngImport: i0, template: "<fieldset>\n @if (label) {\n <legend>{{ label }}</legend>\n }\n\n <div\n class=\"value-wrapper\"\n (mousemove)=\"mouseMove($event)\"\n (mouseleave)=\"mouseIn = false\"\n (mouseenter)=\"mouseIn = true\"\n (click)=\"setValue(mouseValue)\"\n #valueContainer\n >\n <div class=\"value\" [ngStyle]=\"{ width: valueWidth }\"></div>\n <div class=\"value-text\">\n {{\n valueFormatter(\n mouseIn ? mouseValue : value(),\n precision()\n )\n }}\n </div>\n </div>\n</fieldset>\n", styles: [":root{--obl-spinner-width: 30px;--obl-font-size: 14px}:root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}:host{display:block}:host.invalid fieldset{border-color:var(--obl-default-error-color)}:host.invalid fieldset .value{background-color:var(--obl-default-error-color)}:host.invalid fieldset .value-wrapper{background-color:var(--obl-default-error-color)}:host.invalid fieldset .value-text{color:var(--aob-min-max-error-color, white)}:host.invalid fieldset legend{color:var(--obl-default-error-color)}.value-wrapper{width:100%;height:20px;position:relative;background-color:var(--obl-min-max-background-wrapper-color, #eeeeee);color:var(--obl-min-max-wrapper-color, black);cursor:pointer;overflow:hidden}.value{height:20px;background-color:var(--obl-background-value-color, #cfcfcf);cursor:pointer}fieldset{padding:5px;border-width:1px;border-radius:5px;border-color:var(--default-border-color)}.value-text{position:absolute;inset:0;text-align:center;height:20px;padding:1px;cursor:pointer}legend{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px;font-size:12px}.none{border:none}\n"], dependencies: [{ kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: MinMaxInputComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-min-max-input', providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: MinMaxInputComponent,
},
{
provide: NG_VALIDATORS,
multi: true,
useExisting: MinMaxInputComponent,
},
LimitsPipe,
], standalone: false, template: "<fieldset>\n @if (label) {\n <legend>{{ label }}</legend>\n }\n\n <div\n class=\"value-wrapper\"\n (mousemove)=\"mouseMove($event)\"\n (mouseleave)=\"mouseIn = false\"\n (mouseenter)=\"mouseIn = true\"\n (click)=\"setValue(mouseValue)\"\n #valueContainer\n >\n <div class=\"value\" [ngStyle]=\"{ width: valueWidth }\"></div>\n <div class=\"value-text\">\n {{\n valueFormatter(\n mouseIn ? mouseValue : value(),\n precision()\n )\n }}\n </div>\n </div>\n</fieldset>\n", styles: [":root{--obl-spinner-width: 30px;--obl-font-size: 14px}:root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}:host{display:block}:host.invalid fieldset{border-color:var(--obl-default-error-color)}:host.invalid fieldset .value{background-color:var(--obl-default-error-color)}:host.invalid fieldset .value-wrapper{background-color:var(--obl-default-error-color)}:host.invalid fieldset .value-text{color:var(--aob-min-max-error-color, white)}:host.invalid fieldset legend{color:var(--obl-default-error-color)}.value-wrapper{width:100%;height:20px;position:relative;background-color:var(--obl-min-max-background-wrapper-color, #eeeeee);color:var(--obl-min-max-wrapper-color, black);cursor:pointer;overflow:hidden}.value{height:20px;background-color:var(--obl-background-value-color, #cfcfcf);cursor:pointer}fieldset{padding:5px;border-width:1px;border-radius:5px;border-color:var(--default-border-color)}.value-text{position:absolute;inset:0;text-align:center;height:20px;padding:1px;cursor:pointer}legend{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px;font-size:12px}.none{border:none}\n"] }]
}], ctorParameters: () => [{ type: i1.LimitsPipe }], propDecorators: { label: [{
type: Input
}], appearance: [{
type: Input
}], valueFormatter: [{
type: Input
}], disabled: [{
type: Input
}, {
type: HostBinding,
args: ['class.disabled']
}], invalid: [{
type: HostBinding,
args: ['class.invalid']
}], valueContainer: [{
type: ViewChild,
args: ['valueContainer']
}] } });
class MinMaxInputModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: MinMaxInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: MinMaxInputModule, declarations: [MinMaxInputComponent], imports: [CommonModule,
ReactiveFormsModule,
FormsModule,
LimitsPipe], exports: [MinMaxInputComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: MinMaxInputModule, imports: [CommonModule,
ReactiveFormsModule,
FormsModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: MinMaxInputModule, decorators: [{
type: NgModule,
args: [{
declarations: [
MinMaxInputComponent
],
imports: [
CommonModule,
ReactiveFormsModule,
FormsModule,
LimitsPipe
],
exports: [
MinMaxInputComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { MinMaxInputComponent, MinMaxInputModule };
//# sourceMappingURL=obliczeniowo-elementary-min-max-input.mjs.map