@coolon/angular-ui-powerups 16.1.0-aplpha.120 → 16.1.0-aplpha.121
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/forms/number-input/number-input.component.mjs +41 -5
- package/fesm2022/coolon-angular-ui-powerups.mjs +40 -4
- package/fesm2022/coolon-angular-ui-powerups.mjs.map +1 -1
- package/lib/components/forms/number-input/number-input.component.d.ts +10 -2
- package/package.json +1 -1
|
@@ -23,21 +23,45 @@ export class NumberInputComponent extends AbstractValueInputComponent {
|
|
|
23
23
|
#max_accessor_storage = Number.MAX_SAFE_INTEGER;
|
|
24
24
|
get max() { return this.#max_accessor_storage; }
|
|
25
25
|
set max(value) { this.#max_accessor_storage = value; }
|
|
26
|
+
#significantDigits$_accessor_storage = proxify((ValueModel));
|
|
27
|
+
get significantDigits$() { return this.#significantDigits$_accessor_storage; }
|
|
28
|
+
set significantDigits$(value) { this.#significantDigits$_accessor_storage = value; }
|
|
29
|
+
#significantDigits_accessor_storage;
|
|
30
|
+
get significantDigits() { return this.#significantDigits_accessor_storage; }
|
|
31
|
+
set significantDigits(value) { this.#significantDigits_accessor_storage = value; }
|
|
26
32
|
incrementCommand;
|
|
27
33
|
decrementCommand;
|
|
34
|
+
displayValue$;
|
|
35
|
+
step$;
|
|
28
36
|
constructor() {
|
|
29
37
|
super();
|
|
30
38
|
const { chain } = Dsl.disposeWith(this);
|
|
39
|
+
this.step$ = chain(this.significantDigits$).map(v => 10 ** (-v)).otherwise(1);
|
|
40
|
+
this.displayValue$ = chain(this.value$).map(v => this.clamp(v), {
|
|
41
|
+
dependsOn: this.significantDigits$
|
|
42
|
+
});
|
|
31
43
|
const normalisedValue$ = chain(this.value$).otherwise(0);
|
|
32
44
|
this.incrementCommand = Command.create(() => {
|
|
33
|
-
this.value$.value =
|
|
45
|
+
this.value$.value = this.increment(this.value$.value);
|
|
34
46
|
}).enableWhile(chain.numericValue(normalisedValue$).isLessThan(this.max$).and(this.enabled$));
|
|
35
47
|
this.decrementCommand = Command.create(() => {
|
|
36
|
-
this.value$.value =
|
|
48
|
+
this.value$.value = this.decrement(this.value$.value);
|
|
37
49
|
}).enableWhile(chain.numericValue(normalisedValue$).isGreaterThan(this.min$).and(this.enabled$));
|
|
38
50
|
}
|
|
51
|
+
increment(value) {
|
|
52
|
+
return this.clamp((value ?? 0) + this.step$.value);
|
|
53
|
+
}
|
|
54
|
+
decrement(value) {
|
|
55
|
+
return this.clamp((value ?? 0) - this.step$.value);
|
|
56
|
+
}
|
|
57
|
+
clamp(value) {
|
|
58
|
+
return Number(value.toFixed(this.significantDigits));
|
|
59
|
+
}
|
|
60
|
+
onValueChange(value) {
|
|
61
|
+
this.value$.value = value;
|
|
62
|
+
}
|
|
39
63
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
40
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: NumberInputComponent, selector: "aup-number-input", inputs: { autocomplete: "autocomplete", min$: "min$", min: "min", max$: "max$", max: "max" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field floatLabel=\"always\">\n <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n <input type=\"number\"\n matInput\n placeholder=\"{{placeholder}}\"\n [attr.autocomplete]=\"autocomplete\"\n [
|
|
64
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: NumberInputComponent, selector: "aup-number-input", inputs: { autocomplete: "autocomplete", min$: "min$", min: "min", max$: "max$", max: "max", significantDigits$: "significantDigits$", significantDigits: "significantDigits" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field floatLabel=\"always\">\n <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n <input type=\"number\"\n matInput\n placeholder=\"{{placeholder}}\"\n [attr.autocomplete]=\"autocomplete\"\n [ngModel]=\"displayValue$.value\"\n (ngModelChange)=\"onValueChange($event)\"\n [disabled]=\"!enabled$.value\"\n (keydown.enter)=\"notifyEnterKey()\"\n (keydown.escape)=\"notifyEscapeKey()\"\n [pectinFocusBinding]=\"focusContext\"\n [errorStateMatcher]=\"errorStateMatcher\"\n [min]=\"min\"\n [max]=\"max\"\n [size]=\"4\"\n [step]=\"step$.value\"\n >\n <section matIconSuffix>\n <button [pectinCommand]=\"decrementCommand\">-</button>\n <button [pectinCommand]=\"incrementCommand\">+</button>\n </section>\n <mat-hint *ngIf=\"hint && !dense\">{{ hint }}</mat-hint>\n <mat-error *ngIf=\"hasErrors\">{{ firstError }}</mat-error>\n</mat-form-field>\n", styles: [":host{--width: 56px;--height: 42px;--margin-right: 1px;--border-radius: 3px;--border-color:#d5d5d5;--button-background: #fafafa;--button-background-hover: #efefef}:host input[type=number]{appearance:textfield}:host input[type=number]::-webkit-inner-spin-button,:host input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}:host:focus-within:has(section:not(:focus-within)){--height: 40px;--margin-right: 2px;--border-radius: 2px}:host section[maticonsuffix]{display:flex;flex-direction:row;align-items:stretch;gap:1px;background-color:var(--border-color);border-left:1px solid var(--border-color);width:var(--width);min-width:var(--width);height:var(--height);min-height:var(--height);margin-right:var(--margin-right);border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);overflow:hidden}:host button{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:center;font-weight:600;border-style:none;background-color:var(--button-background)}:host button:hover{background-color:var(--button-background-hover)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { kind: "directive", type: i6.FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }] });
|
|
41
65
|
}
|
|
42
66
|
__decorate([
|
|
43
67
|
Proxify(),
|
|
@@ -55,9 +79,17 @@ __decorate([
|
|
|
55
79
|
StoreInValueModel(),
|
|
56
80
|
__metadata("design:type", Object)
|
|
57
81
|
], NumberInputComponent.prototype, "max", null);
|
|
82
|
+
__decorate([
|
|
83
|
+
Proxify(),
|
|
84
|
+
__metadata("design:type", ValueModel)
|
|
85
|
+
], NumberInputComponent.prototype, "significantDigits$", null);
|
|
86
|
+
__decorate([
|
|
87
|
+
StoreInValueModel(),
|
|
88
|
+
__metadata("design:type", Number)
|
|
89
|
+
], NumberInputComponent.prototype, "significantDigits", null);
|
|
58
90
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NumberInputComponent, decorators: [{
|
|
59
91
|
type: Component,
|
|
60
|
-
args: [{ selector: 'aup-number-input', template: "<mat-form-field floatLabel=\"always\">\n <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n <input type=\"number\"\n matInput\n placeholder=\"{{placeholder}}\"\n [attr.autocomplete]=\"autocomplete\"\n [
|
|
92
|
+
args: [{ selector: 'aup-number-input', template: "<mat-form-field floatLabel=\"always\">\n <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n <input type=\"number\"\n matInput\n placeholder=\"{{placeholder}}\"\n [attr.autocomplete]=\"autocomplete\"\n [ngModel]=\"displayValue$.value\"\n (ngModelChange)=\"onValueChange($event)\"\n [disabled]=\"!enabled$.value\"\n (keydown.enter)=\"notifyEnterKey()\"\n (keydown.escape)=\"notifyEscapeKey()\"\n [pectinFocusBinding]=\"focusContext\"\n [errorStateMatcher]=\"errorStateMatcher\"\n [min]=\"min\"\n [max]=\"max\"\n [size]=\"4\"\n [step]=\"step$.value\"\n >\n <section matIconSuffix>\n <button [pectinCommand]=\"decrementCommand\">-</button>\n <button [pectinCommand]=\"incrementCommand\">+</button>\n </section>\n <mat-hint *ngIf=\"hint && !dense\">{{ hint }}</mat-hint>\n <mat-error *ngIf=\"hasErrors\">{{ firstError }}</mat-error>\n</mat-form-field>\n", styles: [":host{--width: 56px;--height: 42px;--margin-right: 1px;--border-radius: 3px;--border-color:#d5d5d5;--button-background: #fafafa;--button-background-hover: #efefef}:host input[type=number]{appearance:textfield}:host input[type=number]::-webkit-inner-spin-button,:host input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}:host:focus-within:has(section:not(:focus-within)){--height: 40px;--margin-right: 2px;--border-radius: 2px}:host section[maticonsuffix]{display:flex;flex-direction:row;align-items:stretch;gap:1px;background-color:var(--border-color);border-left:1px solid var(--border-color);width:var(--width);min-width:var(--width);height:var(--height);min-height:var(--height);margin-right:var(--margin-right);border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);overflow:hidden}:host button{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:center;font-weight:600;border-style:none;background-color:var(--button-background)}:host button:hover{background-color:var(--button-background-hover)}\n"] }]
|
|
61
93
|
}], ctorParameters: function () { return []; }, propDecorators: { autocomplete: [{
|
|
62
94
|
type: Input
|
|
63
95
|
}], min$: [{
|
|
@@ -68,5 +100,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
|
|
|
68
100
|
type: Input
|
|
69
101
|
}], max: [{
|
|
70
102
|
type: Input
|
|
103
|
+
}], significantDigits$: [{
|
|
104
|
+
type: Input
|
|
105
|
+
}], significantDigits: [{
|
|
106
|
+
type: Input
|
|
71
107
|
}] } });
|
|
72
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
108
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibnVtYmVyLWlucHV0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci11aS1wb3dlcnVwcy9zcmMvbGliL2NvbXBvbmVudHMvZm9ybXMvbnVtYmVyLWlucHV0L251bWJlci1pbnB1dC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItdWktcG93ZXJ1cHMvc3JjL2xpYi9jb21wb25lbnRzL2Zvcm1zL251bWJlci1pbnB1dC9udW1iZXItaW5wdXQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsS0FBSyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQy9DLE9BQU8sRUFBQyxPQUFPLEVBQUUsR0FBRyxFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsaUJBQWlCLEVBQVMsVUFBVSxFQUFrQixNQUFNLGdCQUFnQixDQUFDO0FBQ3JILE9BQU8sRUFBQywyQkFBMkIsRUFBQyxNQUFNLG1DQUFtQyxDQUFDOzs7Ozs7OztBQVE5RSxNQUFNLE9BQU8sb0JBQXFCLFNBQVEsMkJBQW1DO0lBRWxFLFlBQVksQ0FBUztJQUdyQix5QkFBMkIsT0FBTyxDQUFDLENBQUEsVUFBa0IsQ0FBQSxDQUFDLENBQUM7SUFBdkQsSUFBQSxJQUFJLDBDQUFtRDtJQUF2RCxJQUFBLElBQUksZ0RBQW1EO0lBR3ZELHdCQUFNLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQztJQUE5QixJQUFBLEdBQUcseUNBQTJCO0lBQTlCLElBQUEsR0FBRywrQ0FBMkI7SUFHOUIseUJBQTJCLE9BQU8sQ0FBQyxDQUFBLFVBQWtCLENBQUEsQ0FBQyxDQUFDO0lBQXZELElBQUEsSUFBSSwwQ0FBbUQ7SUFBdkQsSUFBQSxJQUFJLGdEQUFtRDtJQUd2RCx3QkFBTSxNQUFNLENBQUMsZ0JBQWdCLENBQUM7SUFBOUIsSUFBQSxHQUFH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R0E5RFUsb0JBQW9COzJGQUFwQixvQkFBb0IsK1BDVmpDLGk5QkF5QkE7O0FEVlc7SUFEQyxPQUFPLEVBQUU7OEJBQ0osVUFBVTtnREFBdUM7QUFHdkQ7SUFEQyxpQkFBaUIsRUFBRTs7K0NBQ1U7QUFHOUI7SUFEQyxPQUFPLEVBQUU7OEJBQ0osVUFBVTtnREFBdUM7QUFHdkQ7SUFEQyxpQkFBaUIsRUFBRTs7K0NBQ1U7QUFHOUI7SUFEQyxPQUFPLEVBQUU7OEJBQ1MsVUFBVTs4REFBdUM7QUFHcEU7SUFEQyxpQkFBaUIsRUFBRTs7NkRBQ007MkZBcEJ4QixvQkFBb0I7a0JBTGhDLFNBQVM7K0JBQ0Usa0JBQWtCOzBFQU1uQixZQUFZO3NCQUFwQixLQUFLO2dCQUdHLElBQUk7c0JBRFosS0FBSztnQkFJRyxHQUFHO3NCQURYLEtBQUs7Z0JBSUcsSUFBSTtzQkFEWixLQUFLO2dCQUlHLEdBQUc7c0JBRFgsS0FBSztnQkFJRyxrQkFBa0I7c0JBRDFCLEtBQUs7Z0JBSUcsaUJBQWlCO3NCQUR6QixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIElucHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7Q29tbWFuZCwgRHNsLCBQcm94aWZ5LCBwcm94aWZ5LCBTdG9yZUluVmFsdWVNb2RlbCwgVHJhY2UsIFZhbHVlTW9kZWwsIFZhbHVlTW9kZWxDaGFpbn0gZnJvbSBcIkBjb29sb24vcGVjdGluXCI7XG5pbXBvcnQge0Fic3RyYWN0VmFsdWVJbnB1dENvbXBvbmVudH0gZnJvbSAnLi4vYWJzdHJhY3QtdmFsdWUtaW5wdXQuY29tcG9uZW50JztcblxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhdXAtbnVtYmVyLWlucHV0JyxcbiAgdGVtcGxhdGVVcmw6ICcuL251bWJlci1pbnB1dC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL251bWJlci1pbnB1dC5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIE51bWJlcklucHV0Q29tcG9uZW50IGV4dGVuZHMgQWJzdHJhY3RWYWx1ZUlucHV0Q29tcG9uZW50PG51bWJlcj4ge1xuXG4gIEBJbnB1dCgpIGF1dG9jb21wbGV0ZTogc3RyaW5nO1xuXG4gIEBJbnB1dCgpIEBQcm94aWZ5KClcbiAgYWNjZXNzb3IgbWluJDogVmFsdWVNb2RlbDxudW1iZXI+ID0gcHJveGlmeShWYWx1ZU1vZGVsPG51bWJlcj4pO1xuXG4gIEBJbnB1dCgpIEBTdG9yZUluVmFsdWVNb2RlbCgpXG4gIGFjY2Vzc29yIG1pbiA9IE51bWJlci5NSU5fU0FGRV9JTlRFR0VSO1xuXG4gIEBJbnB1dCgpIEBQcm94aWZ5KClcbiAgYWNjZXNzb3IgbWF4JDogVmFsdWVNb2RlbDxudW1iZXI+ID0gcHJveGlmeShWYWx1ZU1vZGVsPG51bWJlcj4pO1xuXG4gIEBJbnB1dCgpIEBTdG9yZUluVmFsdWVNb2RlbCgpXG4gIGFjY2Vzc29yIG1heCA9IE51bWJlci5NQVhfU0FGRV9JTlRFR0VSO1xuXG4gIEBJbnB1dCgpIEBQcm94aWZ5KClcbiAgYWNjZXNzb3Igc2lnbmlmaWNhbnREaWdpdHMkOlZhbHVlTW9kZWw8bnVtYmVyPiA9IHByb3hpZnkoVmFsdWVNb2RlbDxudW1iZXI+KTtcblxuICBASW5wdXQoKSBAU3RvcmVJblZhbHVlTW9kZWwoKVxuICBhY2Nlc3NvciBzaWduaWZpY2FudERpZ2l0czogbnVtYmVyO1xuXG4gIHByb3RlY3RlZCByZWFkb25seSBpbmNyZW1lbnRDb21tYW5kOiBDb21tYW5kPHZvaWQ+O1xuICBwcm90ZWN0ZWQgcmVhZG9ubHkgZGVjcmVtZW50Q29tbWFuZDogQ29tbWFuZDx2b2lkPjtcbiAgcHJvdGVjdGVkIHJlYWRvbmx5IGRpc3BsYXlWYWx1ZSQ6IFZhbHVlTW9kZWw8bnVtYmVyPjtcbiAgcHJvdGVjdGVkIHJlYWRvbmx5IHN0ZXAkOiBWYWx1ZU1vZGVsQ2hhaW48bnVtYmVyPjtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICAgIGNvbnN0IHtjaGFpbn0gPSBEc2wuZGlzcG9zZVdpdGgodGhpcyk7XG5cbiAgICB0aGlzLnN0ZXAkID0gY2hhaW4odGhpcy5zaWduaWZpY2FudERpZ2l0cyQpLm1hcCh2ID0+IDEwICoqICgtdikpLm90aGVyd2lzZSgxKVxuXG4gICAgdGhpcy5kaXNwbGF5VmFsdWUkID0gY2hhaW4odGhpcy52YWx1ZSQpLm1hcCh2ID0+IHRoaXMuY2xhbXAodiksIHtcbiAgICAgIGRlcGVuZHNPbjogdGhpcy5zaWduaWZpY2FudERpZ2l0cyRcbiAgICB9KTtcblxuICAgIGNvbnN0IG5vcm1hbGlzZWRWYWx1ZSQgPSBjaGFpbih0aGlzLnZhbHVlJCkub3RoZXJ3aXNlKDApO1xuXG4gICAgdGhpcy5pbmNyZW1lbnRDb21tYW5kID0gQ29tbWFuZC5jcmVhdGUoKCkgPT4ge1xuICAgICAgdGhpcy52YWx1ZSQudmFsdWUgPSB0aGlzLmluY3JlbWVudCh0aGlzLnZhbHVlJC52YWx1ZSk7XG4gICAgfSkuZW5hYmxlV2hpbGUoY2hhaW4ubnVtZXJpY1ZhbHVlKG5vcm1hbGlzZWRWYWx1ZSQpLmlzTGVzc1RoYW4odGhpcy5tYXgkKS5hbmQodGhpcy5lbmFibGVkJCkpO1xuXG4gICAgdGhpcy5kZWNyZW1lbnRDb21tYW5kID0gQ29tbWFuZC5jcmVhdGUoKCkgPT4ge1xuICAgICAgdGhpcy52YWx1ZSQudmFsdWUgPSB0aGlzLmRlY3JlbWVudCh0aGlzLnZhbHVlJC52YWx1ZSk7XG4gICAgfSkuZW5hYmxlV2hpbGUoY2hhaW4ubnVtZXJpY1ZhbHVlKG5vcm1hbGlzZWRWYWx1ZSQpLmlzR3JlYXRlclRoYW4odGhpcy5taW4kKS5hbmQodGhpcy5lbmFibGVkJCkpO1xuICB9XG5cbiAgcHJpdmF0ZSBpbmNyZW1lbnQodmFsdWU6IG51bWJlcikge1xuICAgIHJldHVybiB0aGlzLmNsYW1wKCh2YWx1ZSA/PyAwKSArIHRoaXMuc3RlcCQudmFsdWUpXG4gIH1cblxuICBwcml2YXRlIGRlY3JlbWVudCh2YWx1ZTogbnVtYmVyKSB7XG4gICAgcmV0dXJuIHRoaXMuY2xhbXAoKHZhbHVlID8/IDApIC0gdGhpcy5zdGVwJC52YWx1ZSlcbiAgfVxuXG4gIHByaXZhdGUgY2xhbXAodmFsdWU6IG51bWJlcik6IG51bWJlciB7XG4gICAgcmV0dXJuIE51bWJlcih2YWx1ZS50b0ZpeGVkKHRoaXMuc2lnbmlmaWNhbnREaWdpdHMpKTtcbiAgfVxuXG4gIG9uVmFsdWVDaGFuZ2UodmFsdWU6IG51bWJlcikge1xuICAgIHRoaXMudmFsdWUkLnZhbHVlID0gdmFsdWU7XG4gIH1cbn1cbiIsIjxtYXQtZm9ybS1maWVsZCBmbG9hdExhYmVsPVwiYWx3YXlzXCI+XG4gIDxtYXQtbGFiZWwgKm5nSWY9XCJsYWJlbFwiPnt7IGxhYmVsIH19PC9tYXQtbGFiZWw+XG4gIDxpbnB1dCB0eXBlPVwibnVtYmVyXCJcbiAgICAgICAgIG1hdElucHV0XG4gICAgICAgICBwbGFjZWhvbGRlcj1cInt7cGxhY2Vob2xkZXJ9fVwiXG4gICAgICAgICBbYXR0ci5hdXRvY29tcGxldGVdPVwiYXV0b2NvbXBsZXRlXCJcbiAgICAgICAgIFtuZ01vZGVsXT1cImRpc3BsYXlWYWx1ZSQudmFsdWVcIlxuICAgICAgICAgKG5nTW9kZWxDaGFuZ2UpPVwib25WYWx1ZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgICAgIFtkaXNhYmxlZF09XCIhZW5hYmxlZCQudmFsdWVcIlxuICAgICAgICAgKGtleWRvd24uZW50ZXIpPVwibm90aWZ5RW50ZXJLZXkoKVwiXG4gICAgICAgICAoa2V5ZG93bi5lc2NhcGUpPVwibm90aWZ5RXNjYXBlS2V5KClcIlxuICAgICAgICAgW3BlY3RpbkZvY3VzQmluZGluZ109XCJmb2N1c0NvbnRleHRcIlxuICAgICAgICAgW2Vycm9yU3RhdGVNYXRjaGVyXT1cImVycm9yU3RhdGVNYXRjaGVyXCJcbiAgICAgICAgIFttaW5dPVwibWluXCJcbiAgICAgICAgIFttYXhdPVwibWF4XCJcbiAgICAgICAgIFtzaXplXT1cIjRcIlxuICAgICAgICAgW3N0ZXBdPVwic3RlcCQudmFsdWVcIlxuICA+XG4gIDxzZWN0aW9uIG1hdEljb25TdWZmaXg+XG4gICAgPGJ1dHRvbiBbcGVjdGluQ29tbWFuZF09XCJkZWNyZW1lbnRDb21tYW5kXCI+LTwvYnV0dG9uPlxuICAgIDxidXR0b24gW3BlY3RpbkNvbW1hbmRdPVwiaW5jcmVtZW50Q29tbWFuZFwiPis8L2J1dHRvbj5cbiAgPC9zZWN0aW9uPlxuICA8bWF0LWhpbnQgKm5nSWY9XCJoaW50ICYmICFkZW5zZVwiPnt7IGhpbnQgfX08L21hdC1oaW50PlxuICA8bWF0LWVycm9yICpuZ0lmPVwiaGFzRXJyb3JzXCI+e3sgZmlyc3RFcnJvciB9fTwvbWF0LWVycm9yPlxuPC9tYXQtZm9ybS1maWVsZD5cbiJdfQ==
|
|
@@ -2240,21 +2240,45 @@ class NumberInputComponent extends AbstractValueInputComponent {
|
|
|
2240
2240
|
#max_accessor_storage = Number.MAX_SAFE_INTEGER;
|
|
2241
2241
|
get max() { return this.#max_accessor_storage; }
|
|
2242
2242
|
set max(value) { this.#max_accessor_storage = value; }
|
|
2243
|
+
#significantDigits$_accessor_storage = proxify((ValueModel));
|
|
2244
|
+
get significantDigits$() { return this.#significantDigits$_accessor_storage; }
|
|
2245
|
+
set significantDigits$(value) { this.#significantDigits$_accessor_storage = value; }
|
|
2246
|
+
#significantDigits_accessor_storage;
|
|
2247
|
+
get significantDigits() { return this.#significantDigits_accessor_storage; }
|
|
2248
|
+
set significantDigits(value) { this.#significantDigits_accessor_storage = value; }
|
|
2243
2249
|
incrementCommand;
|
|
2244
2250
|
decrementCommand;
|
|
2251
|
+
displayValue$;
|
|
2252
|
+
step$;
|
|
2245
2253
|
constructor() {
|
|
2246
2254
|
super();
|
|
2247
2255
|
const { chain } = Dsl.disposeWith(this);
|
|
2256
|
+
this.step$ = chain(this.significantDigits$).map(v => 10 ** (-v)).otherwise(1);
|
|
2257
|
+
this.displayValue$ = chain(this.value$).map(v => this.clamp(v), {
|
|
2258
|
+
dependsOn: this.significantDigits$
|
|
2259
|
+
});
|
|
2248
2260
|
const normalisedValue$ = chain(this.value$).otherwise(0);
|
|
2249
2261
|
this.incrementCommand = Command.create(() => {
|
|
2250
|
-
this.value$.value =
|
|
2262
|
+
this.value$.value = this.increment(this.value$.value);
|
|
2251
2263
|
}).enableWhile(chain.numericValue(normalisedValue$).isLessThan(this.max$).and(this.enabled$));
|
|
2252
2264
|
this.decrementCommand = Command.create(() => {
|
|
2253
|
-
this.value$.value =
|
|
2265
|
+
this.value$.value = this.decrement(this.value$.value);
|
|
2254
2266
|
}).enableWhile(chain.numericValue(normalisedValue$).isGreaterThan(this.min$).and(this.enabled$));
|
|
2255
2267
|
}
|
|
2268
|
+
increment(value) {
|
|
2269
|
+
return this.clamp((value ?? 0) + this.step$.value);
|
|
2270
|
+
}
|
|
2271
|
+
decrement(value) {
|
|
2272
|
+
return this.clamp((value ?? 0) - this.step$.value);
|
|
2273
|
+
}
|
|
2274
|
+
clamp(value) {
|
|
2275
|
+
return Number(value.toFixed(this.significantDigits));
|
|
2276
|
+
}
|
|
2277
|
+
onValueChange(value) {
|
|
2278
|
+
this.value$.value = value;
|
|
2279
|
+
}
|
|
2256
2280
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2257
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: NumberInputComponent, selector: "aup-number-input", inputs: { autocomplete: "autocomplete", min$: "min$", min: "min", max$: "max$", max: "max" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field floatLabel=\"always\">\n <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n <input type=\"number\"\n matInput\n placeholder=\"{{placeholder}}\"\n [attr.autocomplete]=\"autocomplete\"\n [
|
|
2281
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: NumberInputComponent, selector: "aup-number-input", inputs: { autocomplete: "autocomplete", min$: "min$", min: "min", max$: "max$", max: "max", significantDigits$: "significantDigits$", significantDigits: "significantDigits" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field floatLabel=\"always\">\n <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n <input type=\"number\"\n matInput\n placeholder=\"{{placeholder}}\"\n [attr.autocomplete]=\"autocomplete\"\n [ngModel]=\"displayValue$.value\"\n (ngModelChange)=\"onValueChange($event)\"\n [disabled]=\"!enabled$.value\"\n (keydown.enter)=\"notifyEnterKey()\"\n (keydown.escape)=\"notifyEscapeKey()\"\n [pectinFocusBinding]=\"focusContext\"\n [errorStateMatcher]=\"errorStateMatcher\"\n [min]=\"min\"\n [max]=\"max\"\n [size]=\"4\"\n [step]=\"step$.value\"\n >\n <section matIconSuffix>\n <button [pectinCommand]=\"decrementCommand\">-</button>\n <button [pectinCommand]=\"incrementCommand\">+</button>\n </section>\n <mat-hint *ngIf=\"hint && !dense\">{{ hint }}</mat-hint>\n <mat-error *ngIf=\"hasErrors\">{{ firstError }}</mat-error>\n</mat-form-field>\n", styles: [":host{--width: 56px;--height: 42px;--margin-right: 1px;--border-radius: 3px;--border-color:#d5d5d5;--button-background: #fafafa;--button-background-hover: #efefef}:host input[type=number]{appearance:textfield}:host input[type=number]::-webkit-inner-spin-button,:host input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}:host:focus-within:has(section:not(:focus-within)){--height: 40px;--margin-right: 2px;--border-radius: 2px}:host section[maticonsuffix]{display:flex;flex-direction:row;align-items:stretch;gap:1px;background-color:var(--border-color);border-left:1px solid var(--border-color);width:var(--width);min-width:var(--width);height:var(--height);min-height:var(--height);margin-right:var(--margin-right);border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);overflow:hidden}:host button{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:center;font-weight:600;border-style:none;background-color:var(--button-background)}:host button:hover{background-color:var(--button-background-hover)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$4.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: i2$4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { kind: "directive", type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }] });
|
|
2258
2282
|
}
|
|
2259
2283
|
__decorate([
|
|
2260
2284
|
Proxify(),
|
|
@@ -2272,9 +2296,17 @@ __decorate([
|
|
|
2272
2296
|
StoreInValueModel(),
|
|
2273
2297
|
__metadata("design:type", Object)
|
|
2274
2298
|
], NumberInputComponent.prototype, "max", null);
|
|
2299
|
+
__decorate([
|
|
2300
|
+
Proxify(),
|
|
2301
|
+
__metadata("design:type", ValueModel)
|
|
2302
|
+
], NumberInputComponent.prototype, "significantDigits$", null);
|
|
2303
|
+
__decorate([
|
|
2304
|
+
StoreInValueModel(),
|
|
2305
|
+
__metadata("design:type", Number)
|
|
2306
|
+
], NumberInputComponent.prototype, "significantDigits", null);
|
|
2275
2307
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NumberInputComponent, decorators: [{
|
|
2276
2308
|
type: Component,
|
|
2277
|
-
args: [{ selector: 'aup-number-input', template: "<mat-form-field floatLabel=\"always\">\n <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n <input type=\"number\"\n matInput\n placeholder=\"{{placeholder}}\"\n [attr.autocomplete]=\"autocomplete\"\n [
|
|
2309
|
+
args: [{ selector: 'aup-number-input', template: "<mat-form-field floatLabel=\"always\">\n <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n <input type=\"number\"\n matInput\n placeholder=\"{{placeholder}}\"\n [attr.autocomplete]=\"autocomplete\"\n [ngModel]=\"displayValue$.value\"\n (ngModelChange)=\"onValueChange($event)\"\n [disabled]=\"!enabled$.value\"\n (keydown.enter)=\"notifyEnterKey()\"\n (keydown.escape)=\"notifyEscapeKey()\"\n [pectinFocusBinding]=\"focusContext\"\n [errorStateMatcher]=\"errorStateMatcher\"\n [min]=\"min\"\n [max]=\"max\"\n [size]=\"4\"\n [step]=\"step$.value\"\n >\n <section matIconSuffix>\n <button [pectinCommand]=\"decrementCommand\">-</button>\n <button [pectinCommand]=\"incrementCommand\">+</button>\n </section>\n <mat-hint *ngIf=\"hint && !dense\">{{ hint }}</mat-hint>\n <mat-error *ngIf=\"hasErrors\">{{ firstError }}</mat-error>\n</mat-form-field>\n", styles: [":host{--width: 56px;--height: 42px;--margin-right: 1px;--border-radius: 3px;--border-color:#d5d5d5;--button-background: #fafafa;--button-background-hover: #efefef}:host input[type=number]{appearance:textfield}:host input[type=number]::-webkit-inner-spin-button,:host input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}:host:focus-within:has(section:not(:focus-within)){--height: 40px;--margin-right: 2px;--border-radius: 2px}:host section[maticonsuffix]{display:flex;flex-direction:row;align-items:stretch;gap:1px;background-color:var(--border-color);border-left:1px solid var(--border-color);width:var(--width);min-width:var(--width);height:var(--height);min-height:var(--height);margin-right:var(--margin-right);border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);overflow:hidden}:host button{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:center;font-weight:600;border-style:none;background-color:var(--button-background)}:host button:hover{background-color:var(--button-background-hover)}\n"] }]
|
|
2278
2310
|
}], ctorParameters: function () { return []; }, propDecorators: { autocomplete: [{
|
|
2279
2311
|
type: Input
|
|
2280
2312
|
}], min$: [{
|
|
@@ -2285,6 +2317,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
|
|
|
2285
2317
|
type: Input
|
|
2286
2318
|
}], max: [{
|
|
2287
2319
|
type: Input
|
|
2320
|
+
}], significantDigits$: [{
|
|
2321
|
+
type: Input
|
|
2322
|
+
}], significantDigits: [{
|
|
2323
|
+
type: Input
|
|
2288
2324
|
}] } });
|
|
2289
2325
|
|
|
2290
2326
|
class PasswordInputComponent extends AbstractValueInputComponent {
|