tickera-angular-components 0.0.1-dev.152 → 0.0.1-dev.153

package/fesm2022/tickera-angular-components.mjs

@@ -5210,6 +5210,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 class NumberInputComponent {
     transloco;
     injector;
+    elementRef;
     label = '';
     name = '';
     id = '';
@@ -5225,9 +5226,10 @@ class NumberInputComponent {
     onChange = () => { };
     onTouched = () => { };
     _ngControl;
-    constructor(transloco, injector) {
+    constructor(transloco, injector, elementRef) {
         this.transloco = transloco;
         this.injector = injector;
+        this.elementRef = elementRef;
     }
     get ngControl() {
         if (this._ngControl === undefined) {
@@ -5277,6 +5279,7 @@ class NumberInputComponent {
         this.value = next;
         this.onChange(next);
         this.onTouched();
+        this.emitNativeChange();
     }
     decrement() {
         if (!this.canDecrement)
@@ -5287,6 +5290,7 @@ class NumberInputComponent {
         this.value = next;
         this.onChange(next);
         this.onTouched();
+        this.emitNativeChange();
     }
     get canIncrement() {
         if (this.disabled || this.readonly)
@@ -5344,6 +5348,12 @@ class NumberInputComponent {
     round(value) {
         return Math.round(value * 1e8) / 1e8;
     }
+    emitNativeChange() {
+        const inputEl = this.elementRef.nativeElement.querySelector('input');
+        if (inputEl) {
+            inputEl.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+    }
     minValidator(control) {
         if (this.min === null)
             return null;
@@ -5366,7 +5376,7 @@ class NumberInputComponent {
             return null;
         return num > this.max ? { max: { max: this.max, actual: num } } : null;
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NumberInputComponent, deps: [{ token: i2.TranslocoService }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
     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: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -5386,7 +5396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => NumberInputComponent), multi: true },
                     ], 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: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"] }]
-        }], ctorParameters: () => [{ type: i2.TranslocoService }, { type: i0.Injector }], propDecorators: { label: [{
+        }], ctorParameters: () => [{ type: i2.TranslocoService }, { type: i0.Injector }, { type: i0.ElementRef }], propDecorators: { label: [{
                 type: Input
             }], name: [{
                 type: Input