tickera-angular-components 0.0.1-dev.117 → 0.0.1-dev.118
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.
|
@@ -4976,8 +4976,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
4976
4976
|
}] } });
|
|
4977
4977
|
|
|
4978
4978
|
class NumberInputComponent {
|
|
4979
|
-
ngControl;
|
|
4980
4979
|
transloco;
|
|
4980
|
+
injector;
|
|
4981
4981
|
label = '';
|
|
4982
4982
|
name = '';
|
|
4983
4983
|
id = '';
|
|
@@ -4992,27 +4992,32 @@ class NumberInputComponent {
|
|
|
4992
4992
|
disabled = false;
|
|
4993
4993
|
onChange = () => { };
|
|
4994
4994
|
onTouched = () => { };
|
|
4995
|
-
|
|
4996
|
-
|
|
4995
|
+
_ngControl;
|
|
4996
|
+
constructor(transloco, injector) {
|
|
4997
4997
|
this.transloco = transloco;
|
|
4998
|
-
|
|
4999
|
-
this.ngControl.valueAccessor = this;
|
|
5000
|
-
}
|
|
4998
|
+
this.injector = injector;
|
|
5001
4999
|
}
|
|
5002
|
-
|
|
5003
|
-
if (this.
|
|
5004
|
-
this.
|
|
5005
|
-
(control) => this.minValidator(control),
|
|
5006
|
-
(control) => this.maxValidator(control),
|
|
5007
|
-
]);
|
|
5000
|
+
get ngControl() {
|
|
5001
|
+
if (this._ngControl === undefined) {
|
|
5002
|
+
this._ngControl = this.injector.get(NgControl, null, { self: true });
|
|
5008
5003
|
}
|
|
5004
|
+
return this._ngControl;
|
|
5009
5005
|
}
|
|
5010
5006
|
ngOnChanges(changes) {
|
|
5011
|
-
console.log('changes', changes);
|
|
5012
5007
|
if (changes['min'] || changes['max']) {
|
|
5013
5008
|
this.ngControl?.control?.updateValueAndValidity();
|
|
5014
5009
|
}
|
|
5015
5010
|
}
|
|
5011
|
+
validate(control) {
|
|
5012
|
+
const errors = {};
|
|
5013
|
+
const minError = this.minValidator(control);
|
|
5014
|
+
const maxError = this.maxValidator(control);
|
|
5015
|
+
if (minError)
|
|
5016
|
+
Object.assign(errors, minError);
|
|
5017
|
+
if (maxError)
|
|
5018
|
+
Object.assign(errors, maxError);
|
|
5019
|
+
return Object.keys(errors).length ? errors : null;
|
|
5020
|
+
}
|
|
5016
5021
|
writeValue(value) {
|
|
5017
5022
|
this.value = value === null || value === undefined || value === '' ? null : Number(value);
|
|
5018
5023
|
}
|
|
@@ -5035,7 +5040,8 @@ class NumberInputComponent {
|
|
|
5035
5040
|
if (!this.canIncrement)
|
|
5036
5041
|
return;
|
|
5037
5042
|
const current = this.value ?? this.min ?? 0;
|
|
5038
|
-
const
|
|
5043
|
+
const step = this.step ?? 1;
|
|
5044
|
+
const next = this.round(this.clamp(current + step));
|
|
5039
5045
|
this.value = next;
|
|
5040
5046
|
this.onChange(next);
|
|
5041
5047
|
this.onTouched();
|
|
@@ -5044,7 +5050,8 @@ class NumberInputComponent {
|
|
|
5044
5050
|
if (!this.canDecrement)
|
|
5045
5051
|
return;
|
|
5046
5052
|
const current = this.value ?? this.min ?? 0;
|
|
5047
|
-
const
|
|
5053
|
+
const step = this.step ?? 1;
|
|
5054
|
+
const next = this.round(this.clamp(current - step));
|
|
5048
5055
|
this.value = next;
|
|
5049
5056
|
this.onChange(next);
|
|
5050
5057
|
this.onTouched();
|
|
@@ -5127,17 +5134,27 @@ class NumberInputComponent {
|
|
|
5127
5134
|
return null;
|
|
5128
5135
|
return num > this.max ? { max: { max: this.max, actual: num } } : null;
|
|
5129
5136
|
}
|
|
5130
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NumberInputComponent, deps: [{ token:
|
|
5131
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: NumberInputComponent, isStandalone: true, selector: "number-input", inputs: { label: "label", name: "name", id: "id", placeholder: "placeholder", required: "required", readonly: "readonly", min: "min", max: "max", step: "step", fieldGroupClass: "fieldGroupClass" },
|
|
5137
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NumberInputComponent, deps: [{ token: i2.TranslocoService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
5138
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: NumberInputComponent, isStandalone: true, selector: "number-input", inputs: { label: "label", name: "name", id: "id", placeholder: "placeholder", required: "required", readonly: "readonly", min: "min", max: "max", step: "step", fieldGroupClass: "fieldGroupClass" }, providers: [
|
|
5139
|
+
{
|
|
5140
|
+
provide: NG_VALUE_ACCESSOR,
|
|
5141
|
+
useExisting: forwardRef(() => NumberInputComponent),
|
|
5142
|
+
multi: true,
|
|
5143
|
+
},
|
|
5144
|
+
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => NumberInputComponent), multi: true },
|
|
5145
|
+
], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"fieldGroupClasses\">\n @if (label) {\n <label [for]=\"inputId\" class=\"number-input-label\">\n {{ label }}\n\n @if (required) {\n <span class=\"number-input-required\">*</span>\n }\n </label>\n }\n\n <div class=\"number-input-group\" [class.error]=\"showError\">\n <button\n type=\"button\"\n class=\"number-input-button\"\n [attr.aria-label]=\"transloco.translate('numberInput.decrement')\"\n [disabled]=\"!canDecrement\"\n (click)=\"decrement()\"\n >\n <i class=\"ri-subtract-line\"></i>\n </button>\n\n <input\n type=\"number\"\n [id]=\"inputId\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n [value]=\"value ?? ''\"\n (input)=\"onInput($event.target.value)\"\n (blur)=\"onTouched()\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [class.disabled]=\"readonly\"\n class=\"number-input\"\n />\n\n <button\n type=\"button\"\n class=\"number-input-button\"\n [attr.aria-label]=\"transloco.translate('numberInput.increment')\"\n [disabled]=\"!canIncrement\"\n (click)=\"increment()\"\n >\n <i class=\"ri-add-line\"></i>\n </button>\n </div>\n\n @if (showError) {\n <div class=\"number-input-error-message\">\n {{ errorMessage }}\n </div>\n }\n</div>\n", styles: [".number-input-label{color:#374151;display:block;font-size:.875rem;font-weight:600;margin-bottom:.25rem}@media(prefers-color-scheme:dark){.number-input-label{color:#d1d5db}}.number-input-group{display:flex;align-items:stretch}.number-input-group.error .number-input{outline-color:#ef4444}@media(prefers-color-scheme:dark){.number-input-group.error .number-input{background-color:#374151;color:#fff;outline-color:#ef4444}}.number-input-group.error .number-input-button{border-color:#ef4444}@media(prefers-color-scheme:dark){.number-input-group.error .number-input-button{background-color:#374151;color:#fff}}.number-input-button{align-items:center;background-color:#fff;border:1px solid #d1d5db;color:#4b5563;cursor:pointer;display:flex;justify-content:center;padding:0;width:2.5rem;transition:background-color .15s ease}.number-input-button:first-child{border-radius:.375rem 0 0 .375rem;margin-right:-1px}.number-input-button:last-child{border-radius:0 .375rem .375rem 0;margin-left:-1px}.number-input-button i{font-size:1.125rem;line-height:1}.number-input-button:hover:not(:disabled){background-color:#f3f4f6;color:#111827}.number-input-button:focus-visible{outline:2px solid #4f46e5;outline-offset:-2px;z-index:1}.number-input-button:disabled{background-color:#e5e7eb;color:#9ca3af;cursor:not-allowed}@media(prefers-color-scheme:dark){.number-input-button{background-color:#1f2937;border-color:#4b5563;color:#d1d5db}.number-input-button:hover:not(:disabled){background-color:#374151;color:#fff}.number-input-button:disabled{background-color:#374151;color:#6b7280}}.number-input{background-color:#fff;border:1px solid #d1d5db;color:#111827;display:block;font-weight:500;outline:1px solid #d1d5db;outline-offset:-1px;padding:.375rem .75rem;text-align:center;width:100%}.number-input::placeholder{color:#9ca3af}.number-input:focus{outline:2px solid #4f46e5;outline-offset:-2px}.number-input.disabled{background-color:#e5e7eb;color:#6b7280;cursor:not-allowed}@media(prefers-color-scheme:dark){.number-input.disabled{background-color:#374151;color:#d1d5db}}.number-input::-webkit-inner-spin-button,.number-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.number-input[type=number]{-moz-appearance:textfield;appearance:textfield}@media(prefers-color-scheme:dark){.number-input{background-color:#1f2937;border-color:#4b5563;color:#f3f4f6}.number-input::placeholder{color:#6b7280}}@media(min-width:768px){.number-input{font-size:.875rem}}.number-input-required{color:#ef4444}.number-input-error-message{color:#ef4444;font-size:.75rem;margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
|
|
5132
5146
|
}
|
|
5133
5147
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NumberInputComponent, decorators: [{
|
|
5134
5148
|
type: Component,
|
|
5135
|
-
args: [{ selector: 'number-input', standalone: true, imports: [
|
|
5136
|
-
|
|
5137
|
-
|
|
5138
|
-
|
|
5139
|
-
|
|
5140
|
-
|
|
5149
|
+
args: [{ selector: 'number-input', standalone: true, imports: [CommonModule, ReactiveFormsModule], providers: [
|
|
5150
|
+
{
|
|
5151
|
+
provide: NG_VALUE_ACCESSOR,
|
|
5152
|
+
useExisting: forwardRef(() => NumberInputComponent),
|
|
5153
|
+
multi: true,
|
|
5154
|
+
},
|
|
5155
|
+
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => NumberInputComponent), multi: true },
|
|
5156
|
+
], template: "<div [class]=\"fieldGroupClasses\">\n @if (label) {\n <label [for]=\"inputId\" class=\"number-input-label\">\n {{ label }}\n\n @if (required) {\n <span class=\"number-input-required\">*</span>\n }\n </label>\n }\n\n <div class=\"number-input-group\" [class.error]=\"showError\">\n <button\n type=\"button\"\n class=\"number-input-button\"\n [attr.aria-label]=\"transloco.translate('numberInput.decrement')\"\n [disabled]=\"!canDecrement\"\n (click)=\"decrement()\"\n >\n <i class=\"ri-subtract-line\"></i>\n </button>\n\n <input\n type=\"number\"\n [id]=\"inputId\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n [value]=\"value ?? ''\"\n (input)=\"onInput($event.target.value)\"\n (blur)=\"onTouched()\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [class.disabled]=\"readonly\"\n class=\"number-input\"\n />\n\n <button\n type=\"button\"\n class=\"number-input-button\"\n [attr.aria-label]=\"transloco.translate('numberInput.increment')\"\n [disabled]=\"!canIncrement\"\n (click)=\"increment()\"\n >\n <i class=\"ri-add-line\"></i>\n </button>\n </div>\n\n @if (showError) {\n <div class=\"number-input-error-message\">\n {{ errorMessage }}\n </div>\n }\n</div>\n", styles: [".number-input-label{color:#374151;display:block;font-size:.875rem;font-weight:600;margin-bottom:.25rem}@media(prefers-color-scheme:dark){.number-input-label{color:#d1d5db}}.number-input-group{display:flex;align-items:stretch}.number-input-group.error .number-input{outline-color:#ef4444}@media(prefers-color-scheme:dark){.number-input-group.error .number-input{background-color:#374151;color:#fff;outline-color:#ef4444}}.number-input-group.error .number-input-button{border-color:#ef4444}@media(prefers-color-scheme:dark){.number-input-group.error .number-input-button{background-color:#374151;color:#fff}}.number-input-button{align-items:center;background-color:#fff;border:1px solid #d1d5db;color:#4b5563;cursor:pointer;display:flex;justify-content:center;padding:0;width:2.5rem;transition:background-color .15s ease}.number-input-button:first-child{border-radius:.375rem 0 0 .375rem;margin-right:-1px}.number-input-button:last-child{border-radius:0 .375rem .375rem 0;margin-left:-1px}.number-input-button i{font-size:1.125rem;line-height:1}.number-input-button:hover:not(:disabled){background-color:#f3f4f6;color:#111827}.number-input-button:focus-visible{outline:2px solid #4f46e5;outline-offset:-2px;z-index:1}.number-input-button:disabled{background-color:#e5e7eb;color:#9ca3af;cursor:not-allowed}@media(prefers-color-scheme:dark){.number-input-button{background-color:#1f2937;border-color:#4b5563;color:#d1d5db}.number-input-button:hover:not(:disabled){background-color:#374151;color:#fff}.number-input-button:disabled{background-color:#374151;color:#6b7280}}.number-input{background-color:#fff;border:1px solid #d1d5db;color:#111827;display:block;font-weight:500;outline:1px solid #d1d5db;outline-offset:-1px;padding:.375rem .75rem;text-align:center;width:100%}.number-input::placeholder{color:#9ca3af}.number-input:focus{outline:2px solid #4f46e5;outline-offset:-2px}.number-input.disabled{background-color:#e5e7eb;color:#6b7280;cursor:not-allowed}@media(prefers-color-scheme:dark){.number-input.disabled{background-color:#374151;color:#d1d5db}}.number-input::-webkit-inner-spin-button,.number-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.number-input[type=number]{-moz-appearance:textfield;appearance:textfield}@media(prefers-color-scheme:dark){.number-input{background-color:#1f2937;border-color:#4b5563;color:#f3f4f6}.number-input::placeholder{color:#6b7280}}@media(min-width:768px){.number-input{font-size:.875rem}}.number-input-required{color:#ef4444}.number-input-error-message{color:#ef4444;font-size:.75rem;margin-top:.25rem}\n"] }]
|
|
5157
|
+
}], ctorParameters: () => [{ type: i2.TranslocoService }, { type: i0.Injector }], propDecorators: { label: [{
|
|
5141
5158
|
type: Input
|
|
5142
5159
|
}], name: [{
|
|
5143
5160
|
type: Input
|