verben-ng-ui 0.6.7 → 0.6.8
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.
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
import { Component, Input, Output, EventEmitter, forwardRef
|
|
1
|
+
import { Component, Input, Output, EventEmitter, forwardRef } from '@angular/core';
|
|
2
2
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
import * as i1 from "@angular/common";
|
|
5
5
|
export class NumberInputComponent {
|
|
6
|
-
min
|
|
7
|
-
max
|
|
6
|
+
min; // Optional min value
|
|
7
|
+
max; // Optional max value
|
|
8
8
|
step = 1;
|
|
9
9
|
value = 0;
|
|
10
10
|
controlButton = false;
|
|
11
11
|
valueChange = new EventEmitter();
|
|
12
|
-
onChange = () => { };
|
|
12
|
+
onChange = (value) => { };
|
|
13
13
|
onTouched = () => { };
|
|
14
14
|
errorMessage = '';
|
|
15
15
|
inputContainerClass;
|
|
16
16
|
inputWrapperClass;
|
|
17
17
|
increase() {
|
|
18
|
-
if (this.value
|
|
18
|
+
if (this.max === undefined || this.value + this.step <= this.max) {
|
|
19
19
|
this.value += this.step;
|
|
20
20
|
this.validateValue();
|
|
21
|
-
this.
|
|
21
|
+
this.valueChange.emit(this.value);
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
decrease() {
|
|
25
|
-
if (this.value
|
|
25
|
+
if (this.min === undefined || this.value - this.step >= this.min) {
|
|
26
26
|
this.value -= this.step;
|
|
27
27
|
this.validateValue();
|
|
28
|
-
this.
|
|
28
|
+
this.valueChange.emit(this.value);
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
onInput(event) {
|
|
@@ -33,25 +33,24 @@ export class NumberInputComponent {
|
|
|
33
33
|
let newValue = Number(inputValue);
|
|
34
34
|
this.value = newValue;
|
|
35
35
|
this.validateValue();
|
|
36
|
-
this.notifyValueChange();
|
|
37
36
|
}
|
|
38
37
|
validateValue() {
|
|
39
|
-
if (this.value < this.min) {
|
|
38
|
+
if (this.min !== undefined && this.value < this.min) {
|
|
40
39
|
this.value = this.min;
|
|
41
40
|
this.errorMessage = `Value must be at least ${this.min}`;
|
|
42
41
|
}
|
|
43
|
-
else if (this.value > this.max) {
|
|
42
|
+
else if (this.max !== undefined && this.value > this.max) {
|
|
44
43
|
this.value = this.max;
|
|
45
44
|
this.errorMessage = `Value cannot exceed ${this.max}`;
|
|
46
45
|
}
|
|
47
46
|
else {
|
|
48
47
|
this.errorMessage = '';
|
|
49
48
|
}
|
|
49
|
+
this.valueChange.emit(this.value);
|
|
50
50
|
}
|
|
51
51
|
notifyValueChange() {
|
|
52
52
|
this.onChange(this.value);
|
|
53
53
|
this.onTouched();
|
|
54
|
-
this.valueChange.emit(this.value);
|
|
55
54
|
}
|
|
56
55
|
// Control Value Accessor Methods
|
|
57
56
|
writeValue(value) {
|
|
@@ -74,7 +73,7 @@ export class NumberInputComponent {
|
|
|
74
73
|
useExisting: forwardRef(() => NumberInputComponent),
|
|
75
74
|
multi: true,
|
|
76
75
|
},
|
|
77
|
-
], ngImport: i0, template: "<div class=\"input-container {{ inputContainerClass }}\">\n <
|
|
76
|
+
], ngImport: i0, template: "<div class=\"input-container {{ inputContainerClass }}\">\n <input\n type=\"number\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n (blur)=\"validateValue()\"\n class=\"input-field verben-input {{ inputWrapperClass }}\"\n />\n\n </div>\n <p class=\"error-message\" *ngIf=\"errorMessage\">{{ errorMessage }}</p>\n ", styles: ["*{font-family:sans-serif;font-size:.9rem}.w-100{width:100%}.h-100{height:100%}.flex{display:flex}.flex-col{flex-direction:column}.font-bold{font-weight:700}.justify-center{justify-content:center}.justify-end{justify-content:end}.align-items-center{align-items:center}.grid{display:grid}.verben-error-message{font-size:.8rem;color:red}.verben-input{border:1px solid #cbd5e1;outline:none;border-radius:5px;color:#334155;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.verben-input::placeholder{color:#64748b}.verben-input:hover{border:1px solid #697e97}.verben-input.disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input:disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input.focused{border-color:#3b82f6;outline:none}.verben-input:focus{border-color:#3b82f6;outline:none}.verben-input.ng-invalid{border-color:red}.verben-button{padding:8px 15px;border-radius:4px;border:none;text-align:center}.verben-button.primary{background-color:#ffe681}.verben-button.secondary{background-color:#d9d9d940}.input-container{width:100%}.verben-input{width:100%;background-color:#f9f9f9;border-radius:5px;color:#333;font-size:14px;padding:8px}.number-input{display:flex;align-items:center;border:1px solid #ccc;border-radius:4px;overflow:hidden;width:max-content}.number-input button{background-color:#f0f0f0;border:none;padding:5px 10px;cursor:pointer;font-size:16px}.number-input input{width:50px;text-align:center;border:none;outline:none;font-size:16px}.number-input button:disabled{opacity:.5;cursor:not-allowed}.error-message{color:red;font-size:12px;margin-top:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
78
77
|
}
|
|
79
78
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: NumberInputComponent, decorators: [{
|
|
80
79
|
type: Component,
|
|
@@ -84,7 +83,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImpo
|
|
|
84
83
|
useExisting: forwardRef(() => NumberInputComponent),
|
|
85
84
|
multi: true,
|
|
86
85
|
},
|
|
87
|
-
], template: "<div class=\"input-container {{ inputContainerClass }}\">\n <
|
|
86
|
+
], template: "<div class=\"input-container {{ inputContainerClass }}\">\n <input\n type=\"number\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n (blur)=\"validateValue()\"\n class=\"input-field verben-input {{ inputWrapperClass }}\"\n />\n\n </div>\n <p class=\"error-message\" *ngIf=\"errorMessage\">{{ errorMessage }}</p>\n ", styles: ["*{font-family:sans-serif;font-size:.9rem}.w-100{width:100%}.h-100{height:100%}.flex{display:flex}.flex-col{flex-direction:column}.font-bold{font-weight:700}.justify-center{justify-content:center}.justify-end{justify-content:end}.align-items-center{align-items:center}.grid{display:grid}.verben-error-message{font-size:.8rem;color:red}.verben-input{border:1px solid #cbd5e1;outline:none;border-radius:5px;color:#334155;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.verben-input::placeholder{color:#64748b}.verben-input:hover{border:1px solid #697e97}.verben-input.disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input:disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input.focused{border-color:#3b82f6;outline:none}.verben-input:focus{border-color:#3b82f6;outline:none}.verben-input.ng-invalid{border-color:red}.verben-button{padding:8px 15px;border-radius:4px;border:none;text-align:center}.verben-button.primary{background-color:#ffe681}.verben-button.secondary{background-color:#d9d9d940}.input-container{width:100%}.verben-input{width:100%;background-color:#f9f9f9;border-radius:5px;color:#333;font-size:14px;padding:8px}.number-input{display:flex;align-items:center;border:1px solid #ccc;border-radius:4px;overflow:hidden;width:max-content}.number-input button{background-color:#f0f0f0;border:none;padding:5px 10px;cursor:pointer;font-size:16px}.number-input input{width:50px;text-align:center;border:none;outline:none;font-size:16px}.number-input button:disabled{opacity:.5;cursor:not-allowed}.error-message{color:red;font-size:12px;margin-top:5px}\n"] }]
|
|
88
87
|
}], propDecorators: { min: [{
|
|
89
88
|
type: Input
|
|
90
89
|
}], max: [{
|
|
@@ -98,4 +97,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImpo
|
|
|
98
97
|
}], valueChange: [{
|
|
99
98
|
type: Output
|
|
100
99
|
}] } });
|
|
101
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
100
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibnVtYmVyLWlucHV0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3ZlcmJlbi1uZy11aS9zcmMvbGliL2NvbXBvbmVudHMvbnVtYmVyLWlucHV0L251bWJlci1pbnB1dC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92ZXJiZW4tbmctdWkvc3JjL2xpYi9jb21wb25lbnRzL251bWJlci1pbnB1dC9udW1iZXItaW5wdXQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDbkYsT0FBTyxFQUF3QixpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7QUFjekUsTUFBTSxPQUFPLG9CQUFvQjtJQUN0QixHQUFHLENBQVUsQ0FBQyxxQkFBcUI7SUFDbkMsR0FBRyxDQUFVLENBQUMscUJBQXFCO0lBQ25DLElBQUksR0FBVyxDQUFDLENBQUM7SUFDakIsS0FBSyxHQUFXLENBQUMsQ0FBQztJQUNsQixhQUFhLEdBQVksS0FBSyxDQUFDO0lBRTlCLFdBQVcsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO0lBRTNDLFFBQVEsR0FBRyxDQUFDLEtBQWEsRUFBRSxFQUFFLEdBQUUsQ0FBQyxDQUFDO0lBQ2pDLFNBQVMsR0FBRyxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7SUFFN0IsWUFBWSxHQUFXLEVBQUUsQ0FBQztJQUM1QixtQkFBbUIsQ0FBTTtJQUN6QixpQkFBaUIsQ0FBTTtJQUVyQixRQUFRO1FBQ04sSUFBSSxJQUFJLENBQUMsR0FBRyxLQUFLLFNBQVMsSUFBSSxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxJQUFJLElBQUksSUFBSSxDQUFDLEdBQUcsRUFBRSxDQUFDO1lBQ2pFLElB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QWlCOzRCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxxQkFBcUIsQ0FBQzs0QkFDbkQsS0FBSyxFQUFFLElBQUk7eUJBQ1o7cUJBQ0Y7OEJBR1EsR0FBRztzQkFBWCxLQUFLO2dCQUNHLEdBQUc7c0JBQVgsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBRUksV0FBVztzQkFBcEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBmb3J3YXJkUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3ZlcmJlbi1udW1iZXItaW5wdXQnLFxuICB0ZW1wbGF0ZVVybDogJy4vbnVtYmVyLWlucHV0LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbnVtYmVyLWlucHV0LmNvbXBvbmVudC5jc3MnXSxcbiAgcHJvdmlkZXJzOiBbXG4gICAge1xuICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBOdW1iZXJJbnB1dENvbXBvbmVudCksXG4gICAgICBtdWx0aTogdHJ1ZSxcbiAgICB9LFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBOdW1iZXJJbnB1dENvbXBvbmVudCBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yIHtcbiAgQElucHV0KCkgbWluPzogbnVtYmVyOyAvLyBPcHRpb25hbCBtaW4gdmFsdWVcbiAgQElucHV0KCkgbWF4PzogbnVtYmVyOyAvLyBPcHRpb25hbCBtYXggdmFsdWVcbiAgQElucHV0KCkgc3RlcDogbnVtYmVyID0gMTtcbiAgQElucHV0KCkgdmFsdWU6IG51bWJlciA9IDA7XG4gIEBJbnB1dCgpIGNvbnRyb2xCdXR0b246IGJvb2xlYW4gPSBmYWxzZTtcblxuICBAT3V0cHV0KCkgdmFsdWVDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPG51bWJlcj4oKTtcblxuICBwcml2YXRlIG9uQ2hhbmdlID0gKHZhbHVlOiBudW1iZXIpID0+IHt9O1xuICBwcml2YXRlIG9uVG91Y2hlZCA9ICgpID0+IHt9O1xuXG4gIGVycm9yTWVzc2FnZTogc3RyaW5nID0gJyc7XG5pbnB1dENvbnRhaW5lckNsYXNzOiBhbnk7XG5pbnB1dFdyYXBwZXJDbGFzczogYW55O1xuXG4gIGluY3JlYXNlKCkge1xuICAgIGlmICh0aGlzLm1heCA9PT0gdW5kZWZpbmVkIHx8IHRoaXMudmFsdWUgKyB0aGlzLnN0ZXAgPD0gdGhpcy5tYXgpIHtcbiAgICAgIHRoaXMudmFsdWUgKz0gdGhpcy5zdGVwO1xuICAgICAgdGhpcy52YWxpZGF0ZVZhbHVlKCk7XG4gICAgICB0aGlzLnZhbHVlQ2hhbmdlLmVtaXQodGhpcy52YWx1ZSk7XG4gICAgfVxuICB9XG5cbiAgZGVjcmVhc2UoKSB7XG4gICAgaWYgKHRoaXMubWluID09PSB1bmRlZmluZWQgfHwgdGhpcy52YWx1ZSAtIHRoaXMuc3RlcCA+PSB0aGlzLm1pbikge1xuICAgICAgdGhpcy52YWx1ZSAtPSB0aGlzLnN0ZXA7XG4gICAgICB0aGlzLnZhbGlkYXRlVmFsdWUoKTtcbiAgICAgIHRoaXMudmFsdWVDaGFuZ2UuZW1pdCh0aGlzLnZhbHVlKTtcbiAgICB9XG4gIH1cblxuICBvbklucHV0KGV2ZW50OiBFdmVudCkge1xuICAgIGNvbnN0IGlucHV0VmFsdWUgPSAoZXZlbnQudGFyZ2V0IGFzIEhUTUxJbnB1dEVsZW1lbnQpLnZhbHVlO1xuICAgIGxldCBuZXdWYWx1ZSA9IE51bWJlcihpbnB1dFZhbHVlKTtcbiAgICB0aGlzLnZhbHVlID0gbmV3VmFsdWU7XG4gICAgdGhpcy52YWxpZGF0ZVZhbHVlKCk7XG4gIH1cblxuICB2YWxpZGF0ZVZhbHVlKCkge1xuICAgIGlmICh0aGlzLm1pbiAhPT0gdW5kZWZpbmVkICYmIHRoaXMudmFsdWUgPCB0aGlzLm1pbikge1xuICAgICAgdGhpcy52YWx1ZSA9IHRoaXMubWluO1xuICAgICAgdGhpcy5lcnJvck1lc3NhZ2UgPSBgVmFsdWUgbXVzdCBiZSBhdCBsZWFzdCAke3RoaXMubWlufWA7XG4gICAgfSBlbHNlIGlmICh0aGlzLm1heCAhPT0gdW5kZWZpbmVkICYmIHRoaXMudmFsdWUgPiB0aGlzLm1heCkge1xuICAgICAgdGhpcy52YWx1ZSA9IHRoaXMubWF4O1xuICAgICAgdGhpcy5lcnJvck1lc3NhZ2UgPSBgVmFsdWUgY2Fubm90IGV4Y2VlZCAke3RoaXMubWF4fWA7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuZXJyb3JNZXNzYWdlID0gJyc7XG4gICAgfVxuICAgIHRoaXMudmFsdWVDaGFuZ2UuZW1pdCh0aGlzLnZhbHVlKTtcbiAgfVxuXG4gIG5vdGlmeVZhbHVlQ2hhbmdlKCkge1xuICAgIHRoaXMub25DaGFuZ2UodGhpcy52YWx1ZSk7XG4gICAgdGhpcy5vblRvdWNoZWQoKTtcbiAgfVxuXG4gIC8vIENvbnRyb2wgVmFsdWUgQWNjZXNzb3IgTWV0aG9kc1xuICB3cml0ZVZhbHVlKHZhbHVlOiBudW1iZXIpOiB2b2lkIHtcbiAgICB0aGlzLnZhbHVlID0gdmFsdWUgPz8gMDtcbiAgICB0aGlzLnZhbGlkYXRlVmFsdWUoKTtcbiAgfVxuXG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46ICh2YWx1ZTogbnVtYmVyKSA9PiB2b2lkKTogdm9pZCB7XG4gICAgdGhpcy5vbkNoYW5nZSA9IGZuO1xuICB9XG5cbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46ICgpID0+IHZvaWQpOiB2b2lkIHtcbiAgICB0aGlzLm9uVG91Y2hlZCA9IGZuO1xuICB9XG5cbiAgc2V0RGlzYWJsZWRTdGF0ZT8oaXNEaXNhYmxlZDogYm9vbGVhbik6IHZvaWQge1xuICAgIC8vIE9wdGlvbmFsOiBJbXBsZW1lbnQgaWYgeW91IHdhbnQgdG8gZGlzYWJsZSB0aGUgaW5wdXQgZmllbGRcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImlucHV0LWNvbnRhaW5lciB7eyBpbnB1dENvbnRhaW5lckNsYXNzIH19XCI+XG4gICAgPGlucHV0XG4gICAgICB0eXBlPVwibnVtYmVyXCJcbiAgICAgIFt2YWx1ZV09XCJ2YWx1ZVwiXG4gICAgICAoaW5wdXQpPVwib25JbnB1dCgkZXZlbnQpXCJcbiAgICAgIFttaW5dPVwibWluXCJcbiAgICAgIFttYXhdPVwibWF4XCJcbiAgICAgIFtzdGVwXT1cInN0ZXBcIlxuICAgICAgKGJsdXIpPVwidmFsaWRhdGVWYWx1ZSgpXCJcbiAgICAgIGNsYXNzPVwiaW5wdXQtZmllbGQgdmVyYmVuLWlucHV0IHt7IGlucHV0V3JhcHBlckNsYXNzIH19XCJcbiAgICAvPlxuXG4gIDwvZGl2PlxuICA8cCBjbGFzcz1cImVycm9yLW1lc3NhZ2VcIiAqbmdJZj1cImVycm9yTWVzc2FnZVwiPnt7IGVycm9yTWVzc2FnZSB9fTwvcD5cbiAgIl19
|
|
@@ -7581,29 +7581,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImpo
|
|
|
7581
7581
|
}] });
|
|
7582
7582
|
|
|
7583
7583
|
class NumberInputComponent {
|
|
7584
|
-
min
|
|
7585
|
-
max
|
|
7584
|
+
min; // Optional min value
|
|
7585
|
+
max; // Optional max value
|
|
7586
7586
|
step = 1;
|
|
7587
7587
|
value = 0;
|
|
7588
7588
|
controlButton = false;
|
|
7589
7589
|
valueChange = new EventEmitter();
|
|
7590
|
-
onChange = () => { };
|
|
7590
|
+
onChange = (value) => { };
|
|
7591
7591
|
onTouched = () => { };
|
|
7592
7592
|
errorMessage = '';
|
|
7593
7593
|
inputContainerClass;
|
|
7594
7594
|
inputWrapperClass;
|
|
7595
7595
|
increase() {
|
|
7596
|
-
if (this.value
|
|
7596
|
+
if (this.max === undefined || this.value + this.step <= this.max) {
|
|
7597
7597
|
this.value += this.step;
|
|
7598
7598
|
this.validateValue();
|
|
7599
|
-
this.
|
|
7599
|
+
this.valueChange.emit(this.value);
|
|
7600
7600
|
}
|
|
7601
7601
|
}
|
|
7602
7602
|
decrease() {
|
|
7603
|
-
if (this.value
|
|
7603
|
+
if (this.min === undefined || this.value - this.step >= this.min) {
|
|
7604
7604
|
this.value -= this.step;
|
|
7605
7605
|
this.validateValue();
|
|
7606
|
-
this.
|
|
7606
|
+
this.valueChange.emit(this.value);
|
|
7607
7607
|
}
|
|
7608
7608
|
}
|
|
7609
7609
|
onInput(event) {
|
|
@@ -7611,25 +7611,24 @@ class NumberInputComponent {
|
|
|
7611
7611
|
let newValue = Number(inputValue);
|
|
7612
7612
|
this.value = newValue;
|
|
7613
7613
|
this.validateValue();
|
|
7614
|
-
this.notifyValueChange();
|
|
7615
7614
|
}
|
|
7616
7615
|
validateValue() {
|
|
7617
|
-
if (this.value < this.min) {
|
|
7616
|
+
if (this.min !== undefined && this.value < this.min) {
|
|
7618
7617
|
this.value = this.min;
|
|
7619
7618
|
this.errorMessage = `Value must be at least ${this.min}`;
|
|
7620
7619
|
}
|
|
7621
|
-
else if (this.value > this.max) {
|
|
7620
|
+
else if (this.max !== undefined && this.value > this.max) {
|
|
7622
7621
|
this.value = this.max;
|
|
7623
7622
|
this.errorMessage = `Value cannot exceed ${this.max}`;
|
|
7624
7623
|
}
|
|
7625
7624
|
else {
|
|
7626
7625
|
this.errorMessage = '';
|
|
7627
7626
|
}
|
|
7627
|
+
this.valueChange.emit(this.value);
|
|
7628
7628
|
}
|
|
7629
7629
|
notifyValueChange() {
|
|
7630
7630
|
this.onChange(this.value);
|
|
7631
7631
|
this.onTouched();
|
|
7632
|
-
this.valueChange.emit(this.value);
|
|
7633
7632
|
}
|
|
7634
7633
|
// Control Value Accessor Methods
|
|
7635
7634
|
writeValue(value) {
|
|
@@ -7652,7 +7651,7 @@ class NumberInputComponent {
|
|
|
7652
7651
|
useExisting: forwardRef(() => NumberInputComponent),
|
|
7653
7652
|
multi: true,
|
|
7654
7653
|
},
|
|
7655
|
-
], ngImport: i0, template: "<div class=\"input-container {{ inputContainerClass }}\">\n <
|
|
7654
|
+
], ngImport: i0, template: "<div class=\"input-container {{ inputContainerClass }}\">\n <input\n type=\"number\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n (blur)=\"validateValue()\"\n class=\"input-field verben-input {{ inputWrapperClass }}\"\n />\n\n </div>\n <p class=\"error-message\" *ngIf=\"errorMessage\">{{ errorMessage }}</p>\n ", styles: ["*{font-family:sans-serif;font-size:.9rem}.w-100{width:100%}.h-100{height:100%}.flex{display:flex}.flex-col{flex-direction:column}.font-bold{font-weight:700}.justify-center{justify-content:center}.justify-end{justify-content:end}.align-items-center{align-items:center}.grid{display:grid}.verben-error-message{font-size:.8rem;color:red}.verben-input{border:1px solid #cbd5e1;outline:none;border-radius:5px;color:#334155;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.verben-input::placeholder{color:#64748b}.verben-input:hover{border:1px solid #697e97}.verben-input.disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input:disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input.focused{border-color:#3b82f6;outline:none}.verben-input:focus{border-color:#3b82f6;outline:none}.verben-input.ng-invalid{border-color:red}.verben-button{padding:8px 15px;border-radius:4px;border:none;text-align:center}.verben-button.primary{background-color:#ffe681}.verben-button.secondary{background-color:#d9d9d940}.input-container{width:100%}.verben-input{width:100%;background-color:#f9f9f9;border-radius:5px;color:#333;font-size:14px;padding:8px}.number-input{display:flex;align-items:center;border:1px solid #ccc;border-radius:4px;overflow:hidden;width:max-content}.number-input button{background-color:#f0f0f0;border:none;padding:5px 10px;cursor:pointer;font-size:16px}.number-input input{width:50px;text-align:center;border:none;outline:none;font-size:16px}.number-input button:disabled{opacity:.5;cursor:not-allowed}.error-message{color:red;font-size:12px;margin-top:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
7656
7655
|
}
|
|
7657
7656
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: NumberInputComponent, decorators: [{
|
|
7658
7657
|
type: Component,
|
|
@@ -7662,7 +7661,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImpo
|
|
|
7662
7661
|
useExisting: forwardRef(() => NumberInputComponent),
|
|
7663
7662
|
multi: true,
|
|
7664
7663
|
},
|
|
7665
|
-
], template: "<div class=\"input-container {{ inputContainerClass }}\">\n <
|
|
7664
|
+
], template: "<div class=\"input-container {{ inputContainerClass }}\">\n <input\n type=\"number\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n (blur)=\"validateValue()\"\n class=\"input-field verben-input {{ inputWrapperClass }}\"\n />\n\n </div>\n <p class=\"error-message\" *ngIf=\"errorMessage\">{{ errorMessage }}</p>\n ", styles: ["*{font-family:sans-serif;font-size:.9rem}.w-100{width:100%}.h-100{height:100%}.flex{display:flex}.flex-col{flex-direction:column}.font-bold{font-weight:700}.justify-center{justify-content:center}.justify-end{justify-content:end}.align-items-center{align-items:center}.grid{display:grid}.verben-error-message{font-size:.8rem;color:red}.verben-input{border:1px solid #cbd5e1;outline:none;border-radius:5px;color:#334155;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.verben-input::placeholder{color:#64748b}.verben-input:hover{border:1px solid #697e97}.verben-input.disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input:disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input.focused{border-color:#3b82f6;outline:none}.verben-input:focus{border-color:#3b82f6;outline:none}.verben-input.ng-invalid{border-color:red}.verben-button{padding:8px 15px;border-radius:4px;border:none;text-align:center}.verben-button.primary{background-color:#ffe681}.verben-button.secondary{background-color:#d9d9d940}.input-container{width:100%}.verben-input{width:100%;background-color:#f9f9f9;border-radius:5px;color:#333;font-size:14px;padding:8px}.number-input{display:flex;align-items:center;border:1px solid #ccc;border-radius:4px;overflow:hidden;width:max-content}.number-input button{background-color:#f0f0f0;border:none;padding:5px 10px;cursor:pointer;font-size:16px}.number-input input{width:50px;text-align:center;border:none;outline:none;font-size:16px}.number-input button:disabled{opacity:.5;cursor:not-allowed}.error-message{color:red;font-size:12px;margin-top:5px}\n"] }]
|
|
7666
7665
|
}], propDecorators: { min: [{
|
|
7667
7666
|
type: Input
|
|
7668
7667
|
}], max: [{
|