verben-ng-ui 0.6.7 → 0.6.9
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,30 +1,38 @@
|
|
|
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
|
+
// ✅ FIX: Define provider constant outside the component
|
|
6
|
+
const NUMBER_INPUT_VALUE_ACCESSOR = {
|
|
7
|
+
provide: NG_VALUE_ACCESSOR,
|
|
8
|
+
useExisting: forwardRef(() => NumberInputComponent),
|
|
9
|
+
multi: true,
|
|
10
|
+
};
|
|
5
11
|
export class NumberInputComponent {
|
|
6
|
-
min
|
|
7
|
-
max
|
|
12
|
+
min;
|
|
13
|
+
max;
|
|
8
14
|
step = 1;
|
|
9
15
|
value = 0;
|
|
10
16
|
controlButton = false;
|
|
11
17
|
valueChange = new EventEmitter();
|
|
12
|
-
onChange = () => { };
|
|
18
|
+
onChange = (value) => { };
|
|
13
19
|
onTouched = () => { };
|
|
14
20
|
errorMessage = '';
|
|
15
21
|
inputContainerClass;
|
|
16
22
|
inputWrapperClass;
|
|
17
23
|
increase() {
|
|
18
|
-
if (this.value
|
|
24
|
+
if (this.max === undefined || this.value + this.step <= this.max) {
|
|
19
25
|
this.value += this.step;
|
|
20
26
|
this.validateValue();
|
|
27
|
+
this.valueChange.emit(this.value);
|
|
21
28
|
this.notifyValueChange();
|
|
22
29
|
}
|
|
23
30
|
}
|
|
24
31
|
decrease() {
|
|
25
|
-
if (this.value
|
|
32
|
+
if (this.min === undefined || this.value - this.step >= this.min) {
|
|
26
33
|
this.value -= this.step;
|
|
27
34
|
this.validateValue();
|
|
35
|
+
this.valueChange.emit(this.value);
|
|
28
36
|
this.notifyValueChange();
|
|
29
37
|
}
|
|
30
38
|
}
|
|
@@ -36,24 +44,24 @@ export class NumberInputComponent {
|
|
|
36
44
|
this.notifyValueChange();
|
|
37
45
|
}
|
|
38
46
|
validateValue() {
|
|
39
|
-
if (this.value < this.min) {
|
|
47
|
+
if (this.min !== undefined && this.value < this.min) {
|
|
40
48
|
this.value = this.min;
|
|
41
49
|
this.errorMessage = `Value must be at least ${this.min}`;
|
|
42
50
|
}
|
|
43
|
-
else if (this.value > this.max) {
|
|
51
|
+
else if (this.max !== undefined && this.value > this.max) {
|
|
44
52
|
this.value = this.max;
|
|
45
53
|
this.errorMessage = `Value cannot exceed ${this.max}`;
|
|
46
54
|
}
|
|
47
55
|
else {
|
|
48
56
|
this.errorMessage = '';
|
|
49
57
|
}
|
|
58
|
+
this.valueChange.emit(this.value);
|
|
50
59
|
}
|
|
51
60
|
notifyValueChange() {
|
|
52
61
|
this.onChange(this.value);
|
|
53
62
|
this.onTouched();
|
|
54
|
-
this.valueChange.emit(this.value);
|
|
55
63
|
}
|
|
56
|
-
// Control Value Accessor
|
|
64
|
+
// Control Value Accessor methods
|
|
57
65
|
writeValue(value) {
|
|
58
66
|
this.value = value ?? 0;
|
|
59
67
|
this.validateValue();
|
|
@@ -68,23 +76,11 @@ export class NumberInputComponent {
|
|
|
68
76
|
// Optional: Implement if you want to disable the input field
|
|
69
77
|
}
|
|
70
78
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
71
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: NumberInputComponent, selector: "verben-number-input", inputs: { min: "min", max: "max", step: "step", value: "value", controlButton: "controlButton" }, outputs: { valueChange: "valueChange" }, providers: [
|
|
72
|
-
{
|
|
73
|
-
provide: NG_VALUE_ACCESSOR,
|
|
74
|
-
useExisting: forwardRef(() => NumberInputComponent),
|
|
75
|
-
multi: true,
|
|
76
|
-
},
|
|
77
|
-
], ngImport: i0, template: "<div class=\"input-container {{ inputContainerClass }}\">\n <ng-container *ngIf=\"controlButton\">\n <button (click)=\"decrease()\" [disabled]=\"value <= min\">−</button>\n </ng-container>\n \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 <ng-container *ngIf=\"controlButton\">\n <button (click)=\"increase()\" [disabled]=\"value >= max\">+</button>\n </ng-container>\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"] }] });
|
|
79
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: NumberInputComponent, selector: "verben-number-input", inputs: { min: "min", max: "max", step: "step", value: "value", controlButton: "controlButton" }, outputs: { valueChange: "valueChange" }, providers: [NUMBER_INPUT_VALUE_ACCESSOR], 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
80
|
}
|
|
79
81
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: NumberInputComponent, decorators: [{
|
|
80
82
|
type: Component,
|
|
81
|
-
args: [{ selector: 'verben-number-input', providers: [
|
|
82
|
-
{
|
|
83
|
-
provide: NG_VALUE_ACCESSOR,
|
|
84
|
-
useExisting: forwardRef(() => NumberInputComponent),
|
|
85
|
-
multi: true,
|
|
86
|
-
},
|
|
87
|
-
], template: "<div class=\"input-container {{ inputContainerClass }}\">\n <ng-container *ngIf=\"controlButton\">\n <button (click)=\"decrease()\" [disabled]=\"value <= min\">−</button>\n </ng-container>\n \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 <ng-container *ngIf=\"controlButton\">\n <button (click)=\"increase()\" [disabled]=\"value >= max\">+</button>\n </ng-container>\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"] }]
|
|
83
|
+
args: [{ selector: 'verben-number-input', providers: [NUMBER_INPUT_VALUE_ACCESSOR], 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
84
|
}], propDecorators: { min: [{
|
|
89
85
|
type: Input
|
|
90
86
|
}], max: [{
|
|
@@ -98,4 +94,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImpo
|
|
|
98
94
|
}], valueChange: [{
|
|
99
95
|
type: Output
|
|
100
96
|
}] } });
|
|
101
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
97
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibnVtYmVyLWlucHV0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3ZlcmJlbi1uZy11aS9zcmMvbGliL2NvbXBvbmVudHMvbnVtYmVyLWlucHV0L251bWJlci1pbnB1dC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92ZXJiZW4tbmctdWkvc3JjL2xpYi9jb21wb25lbnRzL251bWJlci1pbnB1dC9udW1iZXItaW5wdXQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxLQUFLLEVBQ0wsTUFBTSxFQUNOLFlBQVksRUFDWixVQUFVLEVBQ1gsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUVMLGlCQUFpQixFQUNsQixNQUFNLGdCQUFnQixDQUFDOzs7QUFFeEIsd0RBQXdEO0FBQ3hELE1BQU0sMkJBQTJCLEdBQUc7SUFDbEMsT0FBTyxFQUFFLGlCQUFpQjtJQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLG9CQUFvQixDQUFDO0lBQ25ELEtBQUssRUFBRSxJQUFJO0NBQ1osQ0FBQztBQVFGLE1BQU0sT0FBTyxvQkFBb0I7SUFDdEIsR0FBRyxDQUFVO0lBQ2IsR0FBRyxDQUFVO0lBQ2IsSUFBSSxHQUFXLENBQUMsQ0FBQztJQUNqQixLQUFLLEdBQVcsQ0FBQyxDQUFDO0lBQ2xCLGFBQWEsR0FBWSxLQUFLLENBQUM7SUFFOUIsV0FBVyxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7SUFFM0MsUUFBUSxHQUFHLENBQUMsS0FBYSxFQUFFLEVBQUUsR0FBRSxDQUFDLENBQUM7SUFDakMsU0FBUyxHQUFHLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztJQUU3QixZQUFZLEdBQVcsRUFBRSxDQUFDO0lBQzFCLG1CQUFtQixDQUFNO0lBQ3pCLGlCQUFpQixDQUFNO0lBRXZCLFFB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QUFwQixvQkFBb0IseUxBRnBCLENBQUMsMkJBQTJCLENBQUMsMEJDdkIxQyxtYUFjRTs7NEZEV1csb0JBQW9CO2tCQU5oQyxTQUFTOytCQUNFLHFCQUFxQixhQUdwQixDQUFDLDJCQUEyQixDQUFDOzhCQUcvQixHQUFHO3NCQUFYLEtBQUs7Z0JBQ0csR0FBRztzQkFBWCxLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csYUFBYTtzQkFBckIsS0FBSztnQkFFSSxXQUFXO3NCQUFwQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgT3V0cHV0LFxuICBFdmVudEVtaXR0ZXIsXG4gIGZvcndhcmRSZWZcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1xuICBDb250cm9sVmFsdWVBY2Nlc3NvcixcbiAgTkdfVkFMVUVfQUNDRVNTT1Jcbn0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG4vLyDinIUgRklYOiBEZWZpbmUgcHJvdmlkZXIgY29uc3RhbnQgb3V0c2lkZSB0aGUgY29tcG9uZW50XG5jb25zdCBOVU1CRVJfSU5QVVRfVkFMVUVfQUNDRVNTT1IgPSB7XG4gIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBOdW1iZXJJbnB1dENvbXBvbmVudCksXG4gIG11bHRpOiB0cnVlLFxufTtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndmVyYmVuLW51bWJlci1pbnB1dCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9udW1iZXItaW5wdXQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9udW1iZXItaW5wdXQuY29tcG9uZW50LmNzcyddLFxuICBwcm92aWRlcnM6IFtOVU1CRVJfSU5QVVRfVkFMVUVfQUNDRVNTT1JdLFxufSlcbmV4cG9ydCBjbGFzcyBOdW1iZXJJbnB1dENvbXBvbmVudCBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yIHtcbiAgQElucHV0KCkgbWluPzogbnVtYmVyO1xuICBASW5wdXQoKSBtYXg/OiBudW1iZXI7XG4gIEBJbnB1dCgpIHN0ZXA6IG51bWJlciA9IDE7XG4gIEBJbnB1dCgpIHZhbHVlOiBudW1iZXIgPSAwO1xuICBASW5wdXQoKSBjb250cm9sQnV0dG9uOiBib29sZWFuID0gZmFsc2U7XG5cbiAgQE91dHB1dCgpIHZhbHVlQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxudW1iZXI+KCk7XG5cbiAgcHJpdmF0ZSBvbkNoYW5nZSA9ICh2YWx1ZTogbnVtYmVyKSA9PiB7fTtcbiAgcHJpdmF0ZSBvblRvdWNoZWQgPSAoKSA9PiB7fTtcblxuICBlcnJvck1lc3NhZ2U6IHN0cmluZyA9ICcnO1xuICBpbnB1dENvbnRhaW5lckNsYXNzOiBhbnk7XG4gIGlucHV0V3JhcHBlckNsYXNzOiBhbnk7XG5cbiAgaW5jcmVhc2UoKSB7XG4gICAgaWYgKHRoaXMubWF4ID09PSB1bmRlZmluZWQgfHwgdGhpcy52YWx1ZSArIHRoaXMuc3RlcCA8PSB0aGlzLm1heCkge1xuICAgICAgdGhpcy52YWx1ZSArPSB0aGlzLnN0ZXA7XG4gICAgICB0aGlzLnZhbGlkYXRlVmFsdWUoKTtcbiAgICAgIHRoaXMudmFsdWVDaGFuZ2UuZW1pdCh0aGlzLnZhbHVlKTtcbiAgICAgIHRoaXMubm90aWZ5VmFsdWVDaGFuZ2UoKTtcbiAgICB9XG4gIH1cblxuICBkZWNyZWFzZSgpIHtcbiAgICBpZiAodGhpcy5taW4gPT09IHVuZGVmaW5lZCB8fCB0aGlzLnZhbHVlIC0gdGhpcy5zdGVwID49IHRoaXMubWluKSB7XG4gICAgICB0aGlzLnZhbHVlIC09IHRoaXMuc3RlcDtcbiAgICAgIHRoaXMudmFsaWRhdGVWYWx1ZSgpO1xuICAgICAgdGhpcy52YWx1ZUNoYW5nZS5lbWl0KHRoaXMudmFsdWUpO1xuICAgICAgdGhpcy5ub3RpZnlWYWx1ZUNoYW5nZSgpO1xuICAgIH1cbiAgfVxuXG4gIG9uSW5wdXQoZXZlbnQ6IEV2ZW50KSB7XG4gICAgY29uc3QgaW5wdXRWYWx1ZSA9IChldmVudC50YXJnZXQgYXMgSFRNTElucHV0RWxlbWVudCkudmFsdWU7XG4gICAgbGV0IG5ld1ZhbHVlID0gTnVtYmVyKGlucHV0VmFsdWUpO1xuICAgIHRoaXMudmFsdWUgPSBuZXdWYWx1ZTtcbiAgICB0aGlzLnZhbGlkYXRlVmFsdWUoKTtcbiAgICB0aGlzLm5vdGlmeVZhbHVlQ2hhbmdlKCk7XG4gIH1cblxuICB2YWxpZGF0ZVZhbHVlKCkge1xuICAgIGlmICh0aGlzLm1pbiAhPT0gdW5kZWZpbmVkICYmIHRoaXMudmFsdWUgPCB0aGlzLm1pbikge1xuICAgICAgdGhpcy52YWx1ZSA9IHRoaXMubWluO1xuICAgICAgdGhpcy5lcnJvck1lc3NhZ2UgPSBgVmFsdWUgbXVzdCBiZSBhdCBsZWFzdCAke3RoaXMubWlufWA7XG4gICAgfSBlbHNlIGlmICh0aGlzLm1heCAhPT0gdW5kZWZpbmVkICYmIHRoaXMudmFsdWUgPiB0aGlzLm1heCkge1xuICAgICAgdGhpcy52YWx1ZSA9IHRoaXMubWF4O1xuICAgICAgdGhpcy5lcnJvck1lc3NhZ2UgPSBgVmFsdWUgY2Fubm90IGV4Y2VlZCAke3RoaXMubWF4fWA7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuZXJyb3JNZXNzYWdlID0gJyc7XG4gICAgfVxuXG4gICAgdGhpcy52YWx1ZUNoYW5nZS5lbWl0KHRoaXMudmFsdWUpO1xuICB9XG5cbiAgbm90aWZ5VmFsdWVDaGFuZ2UoKSB7XG4gICAgdGhpcy5vbkNoYW5nZSh0aGlzLnZhbHVlKTtcbiAgICB0aGlzLm9uVG91Y2hlZCgpO1xuICB9XG5cbiAgLy8gQ29udHJvbCBWYWx1ZSBBY2Nlc3NvciBtZXRob2RzXG4gIHdyaXRlVmFsdWUodmFsdWU6IG51bWJlcik6IHZvaWQge1xuICAgIHRoaXMudmFsdWUgPSB2YWx1ZSA/PyAwO1xuICAgIHRoaXMudmFsaWRhdGVWYWx1ZSgpO1xuICB9XG5cbiAgcmVnaXN0ZXJPbkNoYW5nZShmbjogKHZhbHVlOiBudW1iZXIpID0+IHZvaWQpOiB2b2lkIHtcbiAgICB0aGlzLm9uQ2hhbmdlID0gZm47XG4gIH1cblxuICByZWdpc3Rlck9uVG91Y2hlZChmbjogKCkgPT4gdm9pZCk6IHZvaWQge1xuICAgIHRoaXMub25Ub3VjaGVkID0gZm47XG4gIH1cblxuICBzZXREaXNhYmxlZFN0YXRlPyhpc0Rpc2FibGVkOiBib29sZWFuKTogdm9pZCB7XG4gICAgLy8gT3B0aW9uYWw6IEltcGxlbWVudCBpZiB5b3Ugd2FudCB0byBkaXNhYmxlIHRoZSBpbnB1dCBmaWVsZFxuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiaW5wdXQtY29udGFpbmVyIHt7IGlucHV0Q29udGFpbmVyQ2xhc3MgfX1cIj5cbiAgICA8aW5wdXRcbiAgICAgIHR5cGU9XCJudW1iZXJcIlxuICAgICAgW3ZhbHVlXT1cInZhbHVlXCJcbiAgICAgIChpbnB1dCk9XCJvbklucHV0KCRldmVudClcIlxuICAgICAgW21pbl09XCJtaW5cIlxuICAgICAgW21heF09XCJtYXhcIlxuICAgICAgW3N0ZXBdPVwic3RlcFwiXG4gICAgICAoYmx1cik9XCJ2YWxpZGF0ZVZhbHVlKClcIlxuICAgICAgY2xhc3M9XCJpbnB1dC1maWVsZCB2ZXJiZW4taW5wdXQge3sgaW5wdXRXcmFwcGVyQ2xhc3MgfX1cIlxuICAgIC8+XG5cbiAgPC9kaXY+XG4gIDxwIGNsYXNzPVwiZXJyb3ItbWVzc2FnZVwiICpuZ0lmPVwiZXJyb3JNZXNzYWdlXCI+e3sgZXJyb3JNZXNzYWdlIH19PC9wPlxuICAiXX0=
|
|
@@ -7580,29 +7580,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImpo
|
|
|
7580
7580
|
}]
|
|
7581
7581
|
}] });
|
|
7582
7582
|
|
|
7583
|
+
// ✅ FIX: Define provider constant outside the component
|
|
7584
|
+
const NUMBER_INPUT_VALUE_ACCESSOR = {
|
|
7585
|
+
provide: NG_VALUE_ACCESSOR,
|
|
7586
|
+
useExisting: forwardRef(() => NumberInputComponent),
|
|
7587
|
+
multi: true,
|
|
7588
|
+
};
|
|
7583
7589
|
class NumberInputComponent {
|
|
7584
|
-
min
|
|
7585
|
-
max
|
|
7590
|
+
min;
|
|
7591
|
+
max;
|
|
7586
7592
|
step = 1;
|
|
7587
7593
|
value = 0;
|
|
7588
7594
|
controlButton = false;
|
|
7589
7595
|
valueChange = new EventEmitter();
|
|
7590
|
-
onChange = () => { };
|
|
7596
|
+
onChange = (value) => { };
|
|
7591
7597
|
onTouched = () => { };
|
|
7592
7598
|
errorMessage = '';
|
|
7593
7599
|
inputContainerClass;
|
|
7594
7600
|
inputWrapperClass;
|
|
7595
7601
|
increase() {
|
|
7596
|
-
if (this.value
|
|
7602
|
+
if (this.max === undefined || this.value + this.step <= this.max) {
|
|
7597
7603
|
this.value += this.step;
|
|
7598
7604
|
this.validateValue();
|
|
7605
|
+
this.valueChange.emit(this.value);
|
|
7599
7606
|
this.notifyValueChange();
|
|
7600
7607
|
}
|
|
7601
7608
|
}
|
|
7602
7609
|
decrease() {
|
|
7603
|
-
if (this.value
|
|
7610
|
+
if (this.min === undefined || this.value - this.step >= this.min) {
|
|
7604
7611
|
this.value -= this.step;
|
|
7605
7612
|
this.validateValue();
|
|
7613
|
+
this.valueChange.emit(this.value);
|
|
7606
7614
|
this.notifyValueChange();
|
|
7607
7615
|
}
|
|
7608
7616
|
}
|
|
@@ -7614,24 +7622,24 @@ class NumberInputComponent {
|
|
|
7614
7622
|
this.notifyValueChange();
|
|
7615
7623
|
}
|
|
7616
7624
|
validateValue() {
|
|
7617
|
-
if (this.value < this.min) {
|
|
7625
|
+
if (this.min !== undefined && this.value < this.min) {
|
|
7618
7626
|
this.value = this.min;
|
|
7619
7627
|
this.errorMessage = `Value must be at least ${this.min}`;
|
|
7620
7628
|
}
|
|
7621
|
-
else if (this.value > this.max) {
|
|
7629
|
+
else if (this.max !== undefined && this.value > this.max) {
|
|
7622
7630
|
this.value = this.max;
|
|
7623
7631
|
this.errorMessage = `Value cannot exceed ${this.max}`;
|
|
7624
7632
|
}
|
|
7625
7633
|
else {
|
|
7626
7634
|
this.errorMessage = '';
|
|
7627
7635
|
}
|
|
7636
|
+
this.valueChange.emit(this.value);
|
|
7628
7637
|
}
|
|
7629
7638
|
notifyValueChange() {
|
|
7630
7639
|
this.onChange(this.value);
|
|
7631
7640
|
this.onTouched();
|
|
7632
|
-
this.valueChange.emit(this.value);
|
|
7633
7641
|
}
|
|
7634
|
-
// Control Value Accessor
|
|
7642
|
+
// Control Value Accessor methods
|
|
7635
7643
|
writeValue(value) {
|
|
7636
7644
|
this.value = value ?? 0;
|
|
7637
7645
|
this.validateValue();
|
|
@@ -7646,23 +7654,11 @@ class NumberInputComponent {
|
|
|
7646
7654
|
// Optional: Implement if you want to disable the input field
|
|
7647
7655
|
}
|
|
7648
7656
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7649
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: NumberInputComponent, selector: "verben-number-input", inputs: { min: "min", max: "max", step: "step", value: "value", controlButton: "controlButton" }, outputs: { valueChange: "valueChange" }, providers: [
|
|
7650
|
-
{
|
|
7651
|
-
provide: NG_VALUE_ACCESSOR,
|
|
7652
|
-
useExisting: forwardRef(() => NumberInputComponent),
|
|
7653
|
-
multi: true,
|
|
7654
|
-
},
|
|
7655
|
-
], ngImport: i0, template: "<div class=\"input-container {{ inputContainerClass }}\">\n <ng-container *ngIf=\"controlButton\">\n <button (click)=\"decrease()\" [disabled]=\"value <= min\">−</button>\n </ng-container>\n \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 <ng-container *ngIf=\"controlButton\">\n <button (click)=\"increase()\" [disabled]=\"value >= max\">+</button>\n </ng-container>\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"] }] });
|
|
7657
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: NumberInputComponent, selector: "verben-number-input", inputs: { min: "min", max: "max", step: "step", value: "value", controlButton: "controlButton" }, outputs: { valueChange: "valueChange" }, providers: [NUMBER_INPUT_VALUE_ACCESSOR], 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
7658
|
}
|
|
7657
7659
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: NumberInputComponent, decorators: [{
|
|
7658
7660
|
type: Component,
|
|
7659
|
-
args: [{ selector: 'verben-number-input', providers: [
|
|
7660
|
-
{
|
|
7661
|
-
provide: NG_VALUE_ACCESSOR,
|
|
7662
|
-
useExisting: forwardRef(() => NumberInputComponent),
|
|
7663
|
-
multi: true,
|
|
7664
|
-
},
|
|
7665
|
-
], template: "<div class=\"input-container {{ inputContainerClass }}\">\n <ng-container *ngIf=\"controlButton\">\n <button (click)=\"decrease()\" [disabled]=\"value <= min\">−</button>\n </ng-container>\n \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 <ng-container *ngIf=\"controlButton\">\n <button (click)=\"increase()\" [disabled]=\"value >= max\">+</button>\n </ng-container>\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"] }]
|
|
7661
|
+
args: [{ selector: 'verben-number-input', providers: [NUMBER_INPUT_VALUE_ACCESSOR], 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
7662
|
}], propDecorators: { min: [{
|
|
7667
7663
|
type: Input
|
|
7668
7664
|
}], max: [{
|