@coolon/angular-ui-powerups 16.1.0-aplpha.59 → 16.1.0-aplpha.60
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 +49 -10
- package/fesm2022/coolon-angular-ui-powerups.mjs +44 -7
- package/fesm2022/coolon-angular-ui-powerups.mjs.map +1 -1
- package/lib/components/forms/number-input/number-input.component.d.ts +8 -4
- package/package.json +1 -1
|
@@ -1,33 +1,72 @@
|
|
|
1
|
+
import { __decorate, __metadata } from "tslib";
|
|
1
2
|
import { Component, Input } from '@angular/core';
|
|
3
|
+
import { Command, Dsl, Proxify, proxify, StoreInValueModel, ValueModel } from "@coolon/pectin";
|
|
2
4
|
import { AbstractValueInputComponent } from '../abstract-value-input.component';
|
|
3
5
|
import * as i0 from "@angular/core";
|
|
4
6
|
import * as i1 from "@angular/common";
|
|
5
7
|
import * as i2 from "@angular/forms";
|
|
6
8
|
import * as i3 from "@angular/material/input";
|
|
7
9
|
import * as i4 from "@angular/material/form-field";
|
|
8
|
-
import * as i5 from "../../../directives/
|
|
9
|
-
import * as i6 from "
|
|
10
|
+
import * as i5 from "../../../directives/command.directive";
|
|
11
|
+
import * as i6 from "../../../directives/focus-binding.directive";
|
|
10
12
|
export class NumberInputComponent extends AbstractValueInputComponent {
|
|
11
13
|
autocomplete;
|
|
12
|
-
min =
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
#min$_accessor_storage = proxify((ValueModel));
|
|
15
|
+
get min$() { return this.#min$_accessor_storage; }
|
|
16
|
+
set min$(value) { this.#min$_accessor_storage = value; }
|
|
17
|
+
#min_accessor_storage = Number.MIN_SAFE_INTEGER;
|
|
18
|
+
get min() { return this.#min_accessor_storage; }
|
|
19
|
+
set min(value) { this.#min_accessor_storage = value; }
|
|
20
|
+
#max$_accessor_storage = proxify((ValueModel));
|
|
21
|
+
get max$() { return this.#max$_accessor_storage; }
|
|
22
|
+
set max$(value) { this.#max$_accessor_storage = value; }
|
|
23
|
+
#max_accessor_storage = Number.MAX_SAFE_INTEGER;
|
|
24
|
+
get max() { return this.#max_accessor_storage; }
|
|
25
|
+
set max(value) { this.#max_accessor_storage = value; }
|
|
26
|
+
incrementCommand;
|
|
27
|
+
decrementCommand;
|
|
15
28
|
constructor() {
|
|
16
29
|
super();
|
|
30
|
+
const { chain } = Dsl.disposeWith(this);
|
|
31
|
+
const normalisedValue$ = chain(this.value$).otherwise(0);
|
|
32
|
+
this.incrementCommand = Command.create(() => {
|
|
33
|
+
this.value$.value = normalisedValue$.value + 1;
|
|
34
|
+
}).enableWhile(chain.numericValue(normalisedValue$).isLessThan(this.max$).and(this.enabled$));
|
|
35
|
+
this.decrementCommand = Command.create(() => {
|
|
36
|
+
this.value$.value = normalisedValue$.value - 1;
|
|
37
|
+
}).enableWhile(chain.numericValue(normalisedValue$).isGreaterThan(this.min$).and(this.enabled$));
|
|
17
38
|
}
|
|
18
39
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
19
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: NumberInputComponent, selector: "aup-number-input", inputs: { autocomplete: "autocomplete", min: "min", max
|
|
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 [(ngModel)]=\"componentValue$.value\"\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 <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"] }] });
|
|
20
41
|
}
|
|
42
|
+
__decorate([
|
|
43
|
+
Proxify(),
|
|
44
|
+
__metadata("design:type", ValueModel)
|
|
45
|
+
], NumberInputComponent.prototype, "min$", null);
|
|
46
|
+
__decorate([
|
|
47
|
+
StoreInValueModel(),
|
|
48
|
+
__metadata("design:type", Object)
|
|
49
|
+
], NumberInputComponent.prototype, "min", null);
|
|
50
|
+
__decorate([
|
|
51
|
+
Proxify(),
|
|
52
|
+
__metadata("design:type", ValueModel)
|
|
53
|
+
], NumberInputComponent.prototype, "max$", null);
|
|
54
|
+
__decorate([
|
|
55
|
+
StoreInValueModel(),
|
|
56
|
+
__metadata("design:type", Object)
|
|
57
|
+
], NumberInputComponent.prototype, "max", null);
|
|
21
58
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NumberInputComponent, decorators: [{
|
|
22
59
|
type: Component,
|
|
23
|
-
args: [{ selector: 'aup-number-input', template: "<mat-form-field
|
|
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 [(ngModel)]=\"componentValue$.value\"\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 <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"] }]
|
|
24
61
|
}], ctorParameters: function () { return []; }, propDecorators: { autocomplete: [{
|
|
25
62
|
type: Input
|
|
63
|
+
}], min$: [{
|
|
64
|
+
type: Input
|
|
26
65
|
}], min: [{
|
|
27
66
|
type: Input
|
|
28
|
-
}], max
|
|
67
|
+
}], max$: [{
|
|
29
68
|
type: Input
|
|
30
|
-
}],
|
|
69
|
+
}], max: [{
|
|
31
70
|
type: Input
|
|
32
71
|
}] } });
|
|
33
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
72
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibnVtYmVyLWlucHV0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci11aS1wb3dlcnVwcy9zcmMvbGliL2NvbXBvbmVudHMvZm9ybXMvbnVtYmVyLWlucHV0L251bWJlci1pbnB1dC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItdWktcG93ZXJ1cHMvc3JjL2xpYi9jb21wb25lbnRzL2Zvcm1zL251bWJlci1pbnB1dC9udW1iZXItaW5wdXQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsS0FBSyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQy9DLE9BQU8sRUFBQyxPQUFPLEVBQUUsR0FBRyxFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsVUFBVSxFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFDN0YsT0FBTyxFQUFDLDJCQUEyQixFQUFDLE1BQU0sbUNBQW1DLENBQUM7Ozs7Ozs7O0FBUTlFLE1BQU0sT0FBTyxvQkFBcUIsU0FBUSwyQkFBbUM7SUFFbEUsWUFBWSxDQUFTO0lBR3JCLHlCQUEyQixPQUFPLENBQUMsQ0FBQSxVQUFrQixDQUFBLENBQUMsQ0FBQztJQUF2RCxJQUFBLElBQUksMENBQW1EO0lBQXZELElBQUEsSUFBSSxnREFBbUQ7SUFHdkQsd0JBQU0sTUFBTSxDQUFDLGdCQUFnQixDQUFDO0lBQTlCLElBQUEsR0FBRyx5Q0FBMkI7SUFBOUIsSUFBQSxHQUFHLCtDQUEyQjtJQUc5Qix5QkFBMkIsT0FBTyxDQUFDLENBQUEsVUFBa0IsQ0FBQSxDQUFDLENBQUM7SUFBdkQsSUFBQSxJQUFJLDBDQUFtRDtJQUF2RCxJQUFBLElBQUksZ0RBQW1EO0lBR3ZELHdCQUFNLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQztJQUE5QixJQUFBLEdBQUcseUNBQTJCO0lBQTlCLElBQUEsR0FBRywrQ0FBMkI7SUFFcEIsZ0JBQWdCLENBQWdCO0lBQ2hDLGdCQUFnQixDQUFnQjtJQUVuRDtRQUNFLEtBQUssRUFBRSxDQUFDO1FBQ1IsTUFBTSxFQUFDLEtBQUssRUFBQyxHQUFHLEdBQUcsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLENBQUM7UUFFdEMsTUFBTSxnQkFBZ0IsR0FBRyxLQUFLLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUV6RCxJQUFJLENBQUMsZ0JBQWdCLEdBQUcsT0FBTyxDQUFDLE1BQU0sQ0FBQyxHQUFHLEVBQUU7WUFDMUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxLQUFLLEdBQUcsZ0JBQWdCLENBQUMsS0FBSyxHQUFHLENBQUMsQ0FBQztRQUNqRCxDQUFDLENBQUMsQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLFlBQVksQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDO1FBRTlGLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxPQUFPLENBQUMsTUFBTSxDQUFDLEdBQUcsRUFBRTtZQUMxQyxJQUFJLENBQUMsTUFBTSxDQUFDLEtBQUssR0FBRyxnQkFBZ0IsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDO1FBQ2pELENBQUMsQ0FBQyxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUMsWUFBWSxDQUFDLGdCQUFnQixDQUFDLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUM7SUFHbkcsQ0FBQzt1R0FsQ1Usb0JBQW9COzJGQUFwQixvQkFBb0IsNktDVmpDLDYzQkFzQkE7O0FEUFc7SUFEQyxPQUFPLEVBQUU7OEJBQ0osVUFBVTtnREFBdUM7QUFHdkQ7SUFEQyxpQkFBaUIsRUFBRTs7K0NBQ1U7QUFHOUI7SUFEQyxPQUFPLEVBQUU7OEJBQ0osVUFBVTtnREFBdUM7QUFHdkQ7SUFEQyxpQkFBaUIsRUFBRTs7K0NBQ1U7MkZBZDVCLG9CQUFvQjtrQkFMaEMsU0FBUzsrQkFDRSxrQkFBa0I7MEVBTW5CLFlBQVk7c0JBQXBCLEtBQUs7Z0JBR0csSUFBSTtzQkFEWixLQUFLO2dCQUlHLEdBQUc7c0JBRFgsS0FBSztnQkFJRyxJQUFJO3NCQURaLEtBQUs7Z0JBSUcsR0FBRztzQkFEWCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIElucHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7Q29tbWFuZCwgRHNsLCBQcm94aWZ5LCBwcm94aWZ5LCBTdG9yZUluVmFsdWVNb2RlbCwgVmFsdWVNb2RlbH0gZnJvbSBcIkBjb29sb24vcGVjdGluXCI7XG5pbXBvcnQge0Fic3RyYWN0VmFsdWVJbnB1dENvbXBvbmVudH0gZnJvbSAnLi4vYWJzdHJhY3QtdmFsdWUtaW5wdXQuY29tcG9uZW50JztcblxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhdXAtbnVtYmVyLWlucHV0JyxcbiAgdGVtcGxhdGVVcmw6ICcuL251bWJlci1pbnB1dC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL251bWJlci1pbnB1dC5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIE51bWJlcklucHV0Q29tcG9uZW50IGV4dGVuZHMgQWJzdHJhY3RWYWx1ZUlucHV0Q29tcG9uZW50PG51bWJlcj4ge1xuXG4gIEBJbnB1dCgpIGF1dG9jb21wbGV0ZTogc3RyaW5nO1xuXG4gIEBJbnB1dCgpIEBQcm94aWZ5KClcbiAgYWNjZXNzb3IgbWluJDogVmFsdWVNb2RlbDxudW1iZXI+ID0gcHJveGlmeShWYWx1ZU1vZGVsPG51bWJlcj4pO1xuXG4gIEBJbnB1dCgpIEBTdG9yZUluVmFsdWVNb2RlbCgpXG4gIGFjY2Vzc29yIG1pbiA9IE51bWJlci5NSU5fU0FGRV9JTlRFR0VSO1xuXG4gIEBJbnB1dCgpIEBQcm94aWZ5KClcbiAgYWNjZXNzb3IgbWF4JDogVmFsdWVNb2RlbDxudW1iZXI+ID0gcHJveGlmeShWYWx1ZU1vZGVsPG51bWJlcj4pO1xuXG4gIEBJbnB1dCgpIEBTdG9yZUluVmFsdWVNb2RlbCgpXG4gIGFjY2Vzc29yIG1heCA9IE51bWJlci5NQVhfU0FGRV9JTlRFR0VSO1xuXG4gIHByb3RlY3RlZCByZWFkb25seSBpbmNyZW1lbnRDb21tYW5kOiBDb21tYW5kPHZvaWQ+O1xuICBwcm90ZWN0ZWQgcmVhZG9ubHkgZGVjcmVtZW50Q29tbWFuZDogQ29tbWFuZDx2b2lkPjtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICAgIGNvbnN0IHtjaGFpbn0gPSBEc2wuZGlzcG9zZVdpdGgodGhpcyk7XG5cbiAgICBjb25zdCBub3JtYWxpc2VkVmFsdWUkID0gY2hhaW4odGhpcy52YWx1ZSQpLm90aGVyd2lzZSgwKTtcblxuICAgIHRoaXMuaW5jcmVtZW50Q29tbWFuZCA9IENvbW1hbmQuY3JlYXRlKCgpID0+IHtcbiAgICAgIHRoaXMudmFsdWUkLnZhbHVlID0gbm9ybWFsaXNlZFZhbHVlJC52YWx1ZSArIDE7XG4gICAgfSkuZW5hYmxlV2hpbGUoY2hhaW4ubnVtZXJpY1ZhbHVlKG5vcm1hbGlzZWRWYWx1ZSQpLmlzTGVzc1RoYW4odGhpcy5tYXgkKS5hbmQodGhpcy5lbmFibGVkJCkpO1xuXG4gICAgdGhpcy5kZWNyZW1lbnRDb21tYW5kID0gQ29tbWFuZC5jcmVhdGUoKCkgPT4ge1xuICAgICAgdGhpcy52YWx1ZSQudmFsdWUgPSBub3JtYWxpc2VkVmFsdWUkLnZhbHVlIC0gMTtcbiAgICB9KS5lbmFibGVXaGlsZShjaGFpbi5udW1lcmljVmFsdWUobm9ybWFsaXNlZFZhbHVlJCkuaXNHcmVhdGVyVGhhbih0aGlzLm1pbiQpLmFuZCh0aGlzLmVuYWJsZWQkKSk7XG5cblxuICB9XG5cbn1cbiIsIjxtYXQtZm9ybS1maWVsZCBmbG9hdExhYmVsPVwiYWx3YXlzXCI+XG4gIDxtYXQtbGFiZWwgKm5nSWY9XCJsYWJlbFwiPnt7IGxhYmVsIH19PC9tYXQtbGFiZWw+XG4gIDxpbnB1dCB0eXBlPVwibnVtYmVyXCJcbiAgICAgICAgIG1hdElucHV0XG4gICAgICAgICBwbGFjZWhvbGRlcj1cInt7cGxhY2Vob2xkZXJ9fVwiXG4gICAgICAgICBbYXR0ci5hdXRvY29tcGxldGVdPVwiYXV0b2NvbXBsZXRlXCJcbiAgICAgICAgIFsobmdNb2RlbCldPVwiY29tcG9uZW50VmFsdWUkLnZhbHVlXCJcbiAgICAgICAgIFtkaXNhYmxlZF09XCIhZW5hYmxlZCQudmFsdWVcIlxuICAgICAgICAgKGtleWRvd24uZW50ZXIpPVwibm90aWZ5RW50ZXJLZXkoKVwiXG4gICAgICAgICAoa2V5ZG93bi5lc2NhcGUpPVwibm90aWZ5RXNjYXBlS2V5KClcIlxuICAgICAgICAgW3BlY3RpbkZvY3VzQmluZGluZ109XCJmb2N1c0NvbnRleHRcIlxuICAgICAgICAgW2Vycm9yU3RhdGVNYXRjaGVyXT1cImVycm9yU3RhdGVNYXRjaGVyXCJcbiAgICAgICAgIFttaW5dPVwibWluXCJcbiAgICAgICAgIFttYXhdPVwibWF4XCJcbiAgICAgICAgICBbc2l6ZV09XCI0XCI+XG4gIDxzZWN0aW9uIG1hdEljb25TdWZmaXg+XG4gICAgPGJ1dHRvbiBbcGVjdGluQ29tbWFuZF09XCJkZWNyZW1lbnRDb21tYW5kXCI+LTwvYnV0dG9uPlxuICAgIDxidXR0b24gW3BlY3RpbkNvbW1hbmRdPVwiaW5jcmVtZW50Q29tbWFuZFwiPis8L2J1dHRvbj5cbiAgPC9zZWN0aW9uPlxuICA8bWF0LWhpbnQgKm5nSWY9XCJoaW50ICYmICFkZW5zZVwiPnt7IGhpbnQgfX08L21hdC1oaW50PlxuICA8bWF0LWVycm9yICpuZ0lmPVwiaGFzRXJyb3JzXCI+e3sgZmlyc3RFcnJvciB9fTwvbWF0LWVycm9yPlxuPC9tYXQtZm9ybS1maWVsZD5cbiJdfQ==
|
|
@@ -2194,25 +2194,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
|
|
|
2194
2194
|
|
|
2195
2195
|
class NumberInputComponent extends AbstractValueInputComponent {
|
|
2196
2196
|
autocomplete;
|
|
2197
|
-
min =
|
|
2198
|
-
|
|
2199
|
-
|
|
2197
|
+
#min$_accessor_storage = proxify((ValueModel));
|
|
2198
|
+
get min$() { return this.#min$_accessor_storage; }
|
|
2199
|
+
set min$(value) { this.#min$_accessor_storage = value; }
|
|
2200
|
+
#min_accessor_storage = Number.MIN_SAFE_INTEGER;
|
|
2201
|
+
get min() { return this.#min_accessor_storage; }
|
|
2202
|
+
set min(value) { this.#min_accessor_storage = value; }
|
|
2203
|
+
#max$_accessor_storage = proxify((ValueModel));
|
|
2204
|
+
get max$() { return this.#max$_accessor_storage; }
|
|
2205
|
+
set max$(value) { this.#max$_accessor_storage = value; }
|
|
2206
|
+
#max_accessor_storage = Number.MAX_SAFE_INTEGER;
|
|
2207
|
+
get max() { return this.#max_accessor_storage; }
|
|
2208
|
+
set max(value) { this.#max_accessor_storage = value; }
|
|
2209
|
+
incrementCommand;
|
|
2210
|
+
decrementCommand;
|
|
2200
2211
|
constructor() {
|
|
2201
2212
|
super();
|
|
2213
|
+
const { chain } = Dsl.disposeWith(this);
|
|
2214
|
+
const normalisedValue$ = chain(this.value$).otherwise(0);
|
|
2215
|
+
this.incrementCommand = Command.create(() => {
|
|
2216
|
+
this.value$.value = normalisedValue$.value + 1;
|
|
2217
|
+
}).enableWhile(chain.numericValue(normalisedValue$).isLessThan(this.max$).and(this.enabled$));
|
|
2218
|
+
this.decrementCommand = Command.create(() => {
|
|
2219
|
+
this.value$.value = normalisedValue$.value - 1;
|
|
2220
|
+
}).enableWhile(chain.numericValue(normalisedValue$).isGreaterThan(this.min$).and(this.enabled$));
|
|
2202
2221
|
}
|
|
2203
2222
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2204
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: NumberInputComponent, selector: "aup-number-input", inputs: { autocomplete: "autocomplete", min: "min", max
|
|
2223
|
+
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 [(ngModel)]=\"componentValue$.value\"\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 <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"] }] });
|
|
2205
2224
|
}
|
|
2225
|
+
__decorate([
|
|
2226
|
+
Proxify(),
|
|
2227
|
+
__metadata("design:type", ValueModel)
|
|
2228
|
+
], NumberInputComponent.prototype, "min$", null);
|
|
2229
|
+
__decorate([
|
|
2230
|
+
StoreInValueModel(),
|
|
2231
|
+
__metadata("design:type", Object)
|
|
2232
|
+
], NumberInputComponent.prototype, "min", null);
|
|
2233
|
+
__decorate([
|
|
2234
|
+
Proxify(),
|
|
2235
|
+
__metadata("design:type", ValueModel)
|
|
2236
|
+
], NumberInputComponent.prototype, "max$", null);
|
|
2237
|
+
__decorate([
|
|
2238
|
+
StoreInValueModel(),
|
|
2239
|
+
__metadata("design:type", Object)
|
|
2240
|
+
], NumberInputComponent.prototype, "max", null);
|
|
2206
2241
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NumberInputComponent, decorators: [{
|
|
2207
2242
|
type: Component,
|
|
2208
|
-
args: [{ selector: 'aup-number-input', template: "<mat-form-field
|
|
2243
|
+
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)]=\"componentValue$.value\"\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 <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"] }]
|
|
2209
2244
|
}], ctorParameters: function () { return []; }, propDecorators: { autocomplete: [{
|
|
2210
2245
|
type: Input
|
|
2246
|
+
}], min$: [{
|
|
2247
|
+
type: Input
|
|
2211
2248
|
}], min: [{
|
|
2212
2249
|
type: Input
|
|
2213
|
-
}], max
|
|
2250
|
+
}], max$: [{
|
|
2214
2251
|
type: Input
|
|
2215
|
-
}],
|
|
2252
|
+
}], max: [{
|
|
2216
2253
|
type: Input
|
|
2217
2254
|
}] } });
|
|
2218
2255
|
|