@recursyve/nice-ui-kit.v2 14.0.0-beta.122 → 14.0.0-beta.124

package/fesm2020/recursyve-nice-ui-kit.v2.mjs

@@ -5,7 +5,7 @@ import * as i0 from '@angular/core';
 import { Injectable, NgModule, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, HostBinding, InjectionToken, Directive, HostListener, forwardRef, TemplateRef, Optional, Inject, ViewChild, ContentChild, ViewChildren, Self, Pipe, ElementRef, PLATFORM_ID, ContentChildren, SimpleChange, SkipSelf } from '@angular/core';
 import { plainToInstance } from 'class-transformer';
 import { map, filter, takeUntil, tap, take, debounceTime as debounceTime$1, delay, switchMap } from 'rxjs/operators';
-import { catchError, ReplaySubject, Subject, BehaviorSubject, mergeMap, from, isObservable, firstValueFrom, debounceTime, distinctUntilChanged, startWith, tap as tap$1, Observable, combineLatest, of, fromEvent, merge as merge$1, pairwise } from 'rxjs';
+import { catchError, ReplaySubject, Subject, BehaviorSubject, mergeMap, from, isObservable, firstValueFrom, debounceTime, distinctUntilChanged, startWith, pairwise, tap as tap$1, Observable, combineLatest, of, fromEvent, merge as merge$1 } from 'rxjs';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i2 from '@angular/common';
 import { CommonModule, DatePipe, CurrencyPipe, DOCUMENT, isPlatformServer, NgForOf, NgIf, AsyncPipe, UpperCasePipe } from '@angular/common';
@@ -42,9 +42,10 @@ import { OverlayContainer, Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import * as i5 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i2$3 from '@angular/material/datepicker';
-import { MatDateRangePicker, MatDatepickerModule } from '@angular/material/datepicker';
+import { isSameDay } from 'date-fns';
 import subDays from 'date-fns/subDays';
+import * as i2$3 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i1$7 from 'ngx-mask';
 import * as i1$8 from '@angular/platform-browser';
 import { merge } from 'lodash-es';
@@ -3911,9 +3912,31 @@ class NiceDateRangePickerComponent {
             to: this.max
         };
         this.formGroup.patchValue(this.value);
-        this.formGroup.valueChanges.subscribe((_) => {
+        this.formGroup.valueChanges.pipe(startWith(this.value), pairwise(), filter(([before, after]) => {
+            /**
+             * We filter out the value changes to only emit when the selection is completed/
+             */
+            if (!after.from && !after.to) {
+                return true;
+            }
+            // This is the middle of the selection
+            if (after.from && !after.to) {
+                return false;
+            }
+            // This means that the selection is done
+            if (!before.to && after.to) {
+                return true;
+            }
+            // This is an edge case when we select a new range with an active range selected.
+            // The after.to will be at null after the after.from is emitted
+            if (!isSameDay(before.from, after.from) && isSameDay(before.to, after.to)) {
+                return false;
+            }
+            // Skip if noting has changed
+            return !(isSameDay(before.from, after.from) && !isSameDay(before.to, after.to));
+        })).subscribe((_) => {
             this.value = this.formGroup.getRawValue();
-            this.propage?.(this.value);
+            this.propagate?.(this.value);
         });
     }
     writeValue(value) {
@@ -3921,7 +3944,7 @@ class NiceDateRangePickerComponent {
         this.formGroup.patchValue(this.value);
     }
     registerOnChange(fn) {
-        this.propage = fn;
+        this.propagate = fn;
     }
     registerOnTouched(fn) { }
 }
@@ -3932,7 +3955,7 @@ NiceDateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
             useExisting: forwardRef(() => NiceDateRangePickerComponent),
             multi: true
         }
-    ], viewQueries: [{ propertyName: "picker", first: true, predicate: MatDateRangePicker, descendants: true }], ngImport: i0, template: "<div class=\"nice-date-picker-container\">\n    <div class=\"nice-date-picker-header\">\n        <div class=\"from-to\">\n            <ng-container *ngIf=\"value?.from\">\n                {{ value.from | localizedDate: \"longDate\" }}\n            </ng-container>\n            <ng-container *ngIf=\"value?.to\">\n                <div class=\"separator\">-</div>\n                {{ value.to | localizedDate: \"longDate\" }}\n            </ng-container>\n        </div>\n    </div>\n\n    <mat-date-range-input [formGroup]=\"formGroup\" [max]=\"nowIsMax ? now : null\" [rangePicker]=\"picker\">\n        <input formControlName=\"from\" class=\"hidden-input\" matStartDate placeholder=\"Start date\">\n        <input formControlName=\"to\" class=\"hidden-input\" matEndDate placeholder=\"End date\">\n    </mat-date-range-input>\n\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\n    <mat-date-range-picker\n            [calendarHeaderComponent]=\"HeaderComponent\"\n            #picker\n    ></mat-date-range-picker>\n</div>\n", styles: ["nice-date-range-picker .mat-date-range-input{width:0;height:0;padding:0;margin:0;border:none;visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$3.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$3.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: LocalizedDatePipe, name: "localizedDate" }], encapsulation: i0.ViewEncapsulation.None });
+    ], ngImport: i0, template: "<div class=\"nice-date-picker-container\">\n    <div class=\"nice-date-picker-header\">\n        <div class=\"from-to\">\n            <ng-container *ngIf=\"value?.from\">\n                {{ value.from | localizedDate: \"longDate\" }}\n            </ng-container>\n            <ng-container *ngIf=\"value?.to\">\n                <div class=\"separator\">-</div>\n                {{ value.to | localizedDate: \"longDate\" }}\n            </ng-container>\n        </div>\n    </div>\n\n    <mat-date-range-input [formGroup]=\"formGroup\" [max]=\"nowIsMax ? now : null\" [rangePicker]=\"picker\">\n        <input formControlName=\"from\" class=\"hidden-input\" matStartDate placeholder=\"Start date\">\n        <input formControlName=\"to\" class=\"hidden-input\" matEndDate placeholder=\"End date\">\n    </mat-date-range-input>\n\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\n    <mat-date-range-picker\n            [calendarHeaderComponent]=\"HeaderComponent\"\n            #picker\n    ></mat-date-range-picker>\n</div>\n", styles: ["nice-date-range-picker .mat-date-range-input{width:0;height:0;padding:0;margin:0;border:none;visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$3.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$3.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: LocalizedDatePipe, name: "localizedDate" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceDateRangePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-date-range-picker", encapsulation: ViewEncapsulation.None, providers: [
@@ -3942,10 +3965,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                             multi: true
                         }
                     ], template: "<div class=\"nice-date-picker-container\">\n    <div class=\"nice-date-picker-header\">\n        <div class=\"from-to\">\n            <ng-container *ngIf=\"value?.from\">\n                {{ value.from | localizedDate: \"longDate\" }}\n            </ng-container>\n            <ng-container *ngIf=\"value?.to\">\n                <div class=\"separator\">-</div>\n                {{ value.to | localizedDate: \"longDate\" }}\n            </ng-container>\n        </div>\n    </div>\n\n    <mat-date-range-input [formGroup]=\"formGroup\" [max]=\"nowIsMax ? now : null\" [rangePicker]=\"picker\">\n        <input formControlName=\"from\" class=\"hidden-input\" matStartDate placeholder=\"Start date\">\n        <input formControlName=\"to\" class=\"hidden-input\" matEndDate placeholder=\"End date\">\n    </mat-date-range-input>\n\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\n    <mat-date-range-picker\n            [calendarHeaderComponent]=\"HeaderComponent\"\n            #picker\n    ></mat-date-range-picker>\n</div>\n", styles: ["nice-date-range-picker .mat-date-range-input{width:0;height:0;padding:0;margin:0;border:none;visibility:hidden}\n"] }]
-        }], propDecorators: { picker: [{
-                type: ViewChild,
-                args: [MatDateRangePicker]
-            }], min: [{
+        }], propDecorators: { min: [{
                 type: Input
             }], max: [{
                 type: Input
@@ -10180,6 +10200,12 @@ class TranslationContextDirective {
     updateLanguage(language) {
         this.activeLanguage$.next(language);
     }
+    reset() {
+        if (!this.translationFormService.languages.length) {
+            return;
+        }
+        this.activeLanguage$.next(this.translationFormService.languages[0]);
+    }
 }
 TranslationContextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: TranslationContextDirective, deps: [{ token: NiceTranslationFormService }], target: i0.ɵɵFactoryTarget.Directive });
 TranslationContextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.3", type: TranslationContextDirective, selector: "[niceTranslationContext]", ngImport: i0 });
@@ -10329,11 +10355,12 @@ class TranslationFormComponent {
     }
 }
 TranslationFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: TranslationFormComponent, deps: [{ token: i1$2.ControlContainer }, { token: TranslationContextDirective }, { token: NiceTranslationFormService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TranslationFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: TranslationFormComponent, selector: "ng-component", inputs: { required: "required", disabled: "disabled", placeholder: "placeholder", floating: "floating", maxLength: "maxLength" }, host: { properties: { "class": "this.classList", "class.floating": "this.shouldLabelFloat", "id": "this.id", "attr.aria-describedby": "this.describedBy" } }, ngImport: i0, template: ``, isInline: true });
+TranslationFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: TranslationFormComponent, selector: "ng-component", inputs: { required: "required", disabled: "disabled", placeholder: "placeholder", floating: "floating", maxLength: "maxLength" }, host: { properties: { "class": "this.classList", "class.floating": "this.shouldLabelFloat", "id": "this.id", "attr.aria-describedby": "this.describedBy" } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: TranslationFormComponent, decorators: [{
             type: Component,
             args: [{
                     template: ``,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: function () { return [{ type: i1$2.ControlContainer }, { type: TranslationContextDirective }, { type: NiceTranslationFormService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { classList: [{
                 type: HostBinding,
@@ -10372,7 +10399,7 @@ TranslationFormTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
             provide: MatFormFieldControl,
             useExisting: TranslationFormTextareaComponent,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<textarea\n    matInput\n    [formControl]=\"currentControl\"\n    [placeholder]=\"placeholder\"\n    [maxlength]=\"maxLength\"\n    [rows]=\"rows\"\n    [cols]=\"cols\"\n    [class.resize-none]=\"!resizable\"\n></textarea>\n", dependencies: [{ kind: "directive", type: i1$4.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: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], usesInheritance: true, ngImport: i0, template: "<textarea\n    *ngIf=\"currentControl\"\n    matInput\n    [formControl]=\"currentControl\"\n    [placeholder]=\"placeholder\"\n    [maxlength]=\"maxLength\"\n    [rows]=\"rows\"\n    [cols]=\"cols\"\n    [class.resize-none]=\"!resizable\"\n></textarea>\n", dependencies: [{ kind: "directive", type: i1$4.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: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: TranslationFormTextareaComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-translation-form-textarea", changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -10380,7 +10407,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                             provide: MatFormFieldControl,
                             useExisting: TranslationFormTextareaComponent,
                         },
-                    ], template: "<textarea\n    matInput\n    [formControl]=\"currentControl\"\n    [placeholder]=\"placeholder\"\n    [maxlength]=\"maxLength\"\n    [rows]=\"rows\"\n    [cols]=\"cols\"\n    [class.resize-none]=\"!resizable\"\n></textarea>\n" }]
+                    ], template: "<textarea\n    *ngIf=\"currentControl\"\n    matInput\n    [formControl]=\"currentControl\"\n    [placeholder]=\"placeholder\"\n    [maxlength]=\"maxLength\"\n    [rows]=\"rows\"\n    [cols]=\"cols\"\n    [class.resize-none]=\"!resizable\"\n></textarea>\n" }]
         }], propDecorators: { resizable: [{
                 type: Input
             }], rows: [{
@@ -10397,7 +10424,7 @@ TranslationFormTextfieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
             provide: MatFormFieldControl,
             useExisting: TranslationFormTextfieldComponent,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<input\n    matInput\n    [formControl]=\"currentControl\"\n    [placeholder]=\"placeholder\"\n    [maxlength]=\"maxLength\"\n/>\n", dependencies: [{ kind: "directive", type: i1$4.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: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], usesInheritance: true, ngImport: i0, template: "<input\n    matInput\n    *ngIf=\"currentControl\"\n    [formControl]=\"currentControl\"\n    [placeholder]=\"placeholder\"\n    [maxlength]=\"maxLength\"\n/>\n", dependencies: [{ kind: "directive", type: i1$4.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: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: TranslationFormTextfieldComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-translation-form-textfield", changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -10405,7 +10432,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                             provide: MatFormFieldControl,
                             useExisting: TranslationFormTextfieldComponent,
                         },
-                    ], template: "<input\n    matInput\n    [formControl]=\"currentControl\"\n    [placeholder]=\"placeholder\"\n    [maxlength]=\"maxLength\"\n/>\n" }]
+                    ], template: "<input\n    matInput\n    *ngIf=\"currentControl\"\n    [formControl]=\"currentControl\"\n    [placeholder]=\"placeholder\"\n    [maxlength]=\"maxLength\"\n/>\n" }]
         }] });
 
 function RequireForLanguages() {