@igo2/common 21.0.0-next.3 → 21.0.0-next.30

package/fesm2022/igo2-common-form.mjs

@@ -1,25 +1,32 @@
 import * as i0 from '@angular/core';
 import { input, output, viewChild, ChangeDetectionStrategy, Component, NgModule, Injectable, signal, inject, ChangeDetectorRef } from '@angular/core';
 import * as i3 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule, UntypedFormBuilder, Validators } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, FormGroup, FormControl, UntypedFormBuilder, Validators } from '@angular/forms';
 import { t } from 'typy';
 import { __decorate } from 'tslib';
-import { MatOptionModule } from '@angular/material/core';
+import * as i8 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i4$1 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { provideNativeDateAdapter, MatOptionModule } from '@angular/material/core';
+import * as i3$1 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i4 from '@angular/material/icon';
+import * as i7 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i2 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
+import * as i2 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i4 from '@angular/material/timepicker';
+import { MatTimepickerModule } from '@angular/material/timepicker';
 import { IgoLanguageModule, LanguageService } from '@igo2/core/language';
+import { Subject, BehaviorSubject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import * as i5 from '@ngx-translate/core';
-import { AsyncPipe, NgClass } from '@angular/common';
-import * as i5$1 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i2$1 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import { BehaviorSubject } from 'rxjs';
+import * as i2$1 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
 import { DynamicOutletComponent } from '@igo2/common/dynamic-component';
+import { NgClass, AsyncPipe } from '@angular/common';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogActions, MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { CustomHtmlComponent } from '@igo2/common/custom-html';
 
@@ -142,10 +149,10 @@ class FormComponent {
     clear() {
         this.form()?.control.reset();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.10", type: FormComponent, isStandalone: true, selector: "igo-form", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, formData: { classPropertyName: "formData", publicName: "formData", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitForm: "submitForm" }, viewQueries: [{ propertyName: "buttons", first: true, predicate: ["buttons"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<form\n  [autocomplete]=\"autocomplete()\"\n  [formGroup]=\"form().control\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div class=\"igo-form-body\" [class.igo-form-body-with-buttons]=\"hasButtons\">\n    <div class=\"igo-form-content\">\n      <ng-content />\n    </div>\n    <div #buttons class=\"igo-form-buttons\">\n      <ng-content select=\"[formButtons]\" />\n    </div>\n  </div>\n</form>\n", styles: [":host{display:block}form{width:100%;height:100%}.igo-form-body,.igo-form-content{height:100%}.igo-form-body-with-buttons .igo-form-content{height:calc(100% - 56px)}.igo-form-content{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.23", type: FormComponent, isStandalone: true, selector: "igo-form", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, formData: { classPropertyName: "formData", publicName: "formData", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitForm: "submitForm" }, viewQueries: [{ propertyName: "buttons", first: true, predicate: ["buttons"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<form\n  [autocomplete]=\"autocomplete()\"\n  [formGroup]=\"form().control\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div class=\"igo-form-body\" [class.igo-form-body-with-buttons]=\"hasButtons\">\n    <div class=\"igo-form-content\">\n      <ng-content />\n    </div>\n    <div #buttons class=\"igo-form-buttons\">\n      <ng-content select=\"[formButtons]\" />\n    </div>\n  </div>\n</form>\n", styles: [":host{display:block}form{width:100%;height:100%}.igo-form-body,.igo-form-content{height:100%}.igo-form-body-with-buttons .igo-form-content{height:calc(100% - 56px)}.igo-form-content{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igo-form', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, ReactiveFormsModule], template: "<form\n  [autocomplete]=\"autocomplete()\"\n  [formGroup]=\"form().control\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div class=\"igo-form-body\" [class.igo-form-body-with-buttons]=\"hasButtons\">\n    <div class=\"igo-form-content\">\n      <ng-content />\n    </div>\n    <div #buttons class=\"igo-form-buttons\">\n      <ng-content select=\"[formButtons]\" />\n    </div>\n  </div>\n</form>\n", styles: [":host{display:block}form{width:100%;height:100%}.igo-form-body,.igo-form-content{height:100%}.igo-form-body-with-buttons .igo-form-content{height:calc(100% - 56px)}.igo-form-content{display:flex}\n"] }]
         }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], formData: [{ type: i0.Input, args: [{ isSignal: true, alias: "formData", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], submitForm: [{ type: i0.Output, args: ["submitForm"] }], buttons: [{ type: i0.ViewChild, args: ['buttons', { isSignal: true }] }] } });
@@ -154,11 +161,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  * @deprecated import the FormComponent directly
  */
 class IgoFormFormModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoFormFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: IgoFormFormModule, imports: [FormComponent], exports: [FormComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoFormFormModule, imports: [FormComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IgoFormFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: IgoFormFormModule, imports: [FormComponent], exports: [FormComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IgoFormFormModule, imports: [FormComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoFormFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IgoFormFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [FormComponent],
@@ -182,10 +189,10 @@ class FormFieldService {
     getFieldByType(type) {
         return FormFieldService.fields[type];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormFieldService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormFieldService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormFieldService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormFieldService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormFieldService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormFieldService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -198,6 +205,284 @@ function IgoFormFieldComponent(type) {
     };
 }
 
+let FormFieldDatetimeComponent = class FormFieldDatetimeComponent {
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    dateTimeGroup = new FormGroup({
+        date: new FormControl(null),
+        time: new FormControl(null)
+    });
+    get dateControl() {
+        return this.dateTimeGroup.controls.date;
+    }
+    get timeControl() {
+        return this.dateTimeGroup.controls.time;
+    }
+    destroy$ = new Subject();
+    syncingExternalToInternal = false;
+    syncingInternalToExternal = false;
+    /**
+     * The field's form control
+     */
+    formControl = input.required(...(ngDevMode ? [{ debugName: "formControl" }] : /* istanbul ignore next */ []));
+    /**
+     * Field showLabel
+     */
+    showLabel = input(false, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Field placeholder used for date input
+     */
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Placeholder used for time input
+     */
+    timePlaceholder = input(...(ngDevMode ? [undefined, { debugName: "timePlaceholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Minimum selectable date
+     */
+    minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum selectable date
+     */
+    maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    /**
+     * Minimum selectable time
+     */
+    minTime = input(null, ...(ngDevMode ? [{ debugName: "minTime" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum selectable time
+     */
+    maxTime = input(null, ...(ngDevMode ? [{ debugName: "maxTime" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional explicit options rendered in the timepicker panel.
+     */
+    options = input(null, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /**
+     * Time option interval for the panel.
+     */
+    interval = input(null, ...(ngDevMode ? [{ debugName: "interval" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether clicking the input should open the timepicker.
+     */
+    openOnClick = input(true, ...(ngDevMode ? [{ debugName: "openOnClick" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether a disable switch should be available
+     */
+    disableSwitch = input(false, ...(ngDevMode ? [{ debugName: "disableSwitch" }] : /* istanbul ignore next */ []));
+    /**
+     * Error messages mapping
+     */
+    errors = input(...(ngDevMode ? [undefined, { debugName: "errors" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the field is required
+     */
+    get required() {
+        return formControlIsRequired(this.formControl());
+    }
+    ngOnInit() {
+        this.disabled.set(this.formControl().disabled);
+        this.syncInternalFromExternal(this.formControl().value);
+        this.formControl()
+            .valueChanges.pipe(takeUntil(this.destroy$))
+            .subscribe((value) => {
+            if (this.syncingInternalToExternal) {
+                return;
+            }
+            this.syncInternalFromExternal(value);
+        });
+        this.formControl()
+            .statusChanges.pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            const isDisabled = this.formControl().disabled;
+            this.disabled.set(isDisabled);
+            if (isDisabled) {
+                this.dateTimeGroup.disable({ emitEvent: false });
+            }
+            else {
+                this.dateTimeGroup.enable({ emitEvent: false });
+                this.updateTimeControlState();
+            }
+        });
+        this.dateTimeGroup.valueChanges
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.updateTimeControlState();
+            this.pushInternalToExternal();
+        });
+        if (this.formControl().disabled) {
+            this.dateTimeGroup.disable({ emitEvent: false });
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    getErrorMessage() {
+        return getControlErrorMessage(this.formControl(), this.errors() || {});
+    }
+    clearDate() {
+        this.dateControl.setValue(null);
+    }
+    clearTime() {
+        this.timeControl.setValue(null);
+    }
+    onDisableSwitchClick() {
+        const disabled = !this.disabled();
+        if (disabled) {
+            this.formControl().disable();
+        }
+        else {
+            this.formControl().enable();
+        }
+        this.disabled.set(disabled);
+    }
+    syncInternalFromExternal(value) {
+        const externalDate = this.toDateValue(value);
+        this.syncingExternalToInternal = true;
+        this.dateTimeGroup.patchValue({
+            date: externalDate ? new Date(externalDate) : null,
+            time: externalDate ? new Date(externalDate) : null
+        }, { emitEvent: false });
+        this.syncingExternalToInternal = false;
+        this.updateTimeControlState();
+    }
+    pushInternalToExternal() {
+        if (this.syncingExternalToInternal) {
+            return;
+        }
+        const { date: datePart, time: timeValue } = this.dateTimeGroup.getRawValue();
+        if (!datePart) {
+            if (this.formControl().value !== null) {
+                this.syncingInternalToExternal = true;
+                this.formControl().setValue(null);
+                this.syncingInternalToExternal = false;
+            }
+            return;
+        }
+        const sourceTime = timeValue;
+        const next = new Date(datePart);
+        next.setHours(sourceTime?.getHours() ?? 0, sourceTime?.getMinutes() ?? 0, sourceTime?.getSeconds() ?? 0, 0);
+        this.syncingInternalToExternal = true;
+        this.formControl().setValue(next);
+        this.syncingInternalToExternal = false;
+    }
+    updateTimeControlState() {
+        const hasDate = !!this.dateControl.value;
+        if (!hasDate && this.timeControl.enabled) {
+            this.timeControl.disable({ emitEvent: false });
+        }
+        else if (hasDate && this.timeControl.disabled && !this.disabled()) {
+            this.timeControl.enable({ emitEvent: false });
+        }
+    }
+    toDateValue(value) {
+        if (value instanceof Date) {
+            return Number.isNaN(value.getTime()) ? null : value;
+        }
+        if (typeof value === 'number' && Number.isFinite(value)) {
+            const date = new Date(value);
+            return Number.isNaN(date.getTime()) ? null : date;
+        }
+        if (typeof value === 'string' && value.trim().length > 0) {
+            const date = new Date(value);
+            return Number.isNaN(date.getTime()) ? null : date;
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormFieldDatetimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: FormFieldDatetimeComponent, isStandalone: true, selector: "igo-form-field-datetime", inputs: { formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, timePlaceholder: { classPropertyName: "timePlaceholder", publicName: "timePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, openOnClick: { classPropertyName: "openOnClick", publicName: "openOnClick", isSignal: true, isRequired: false, transformFunction: null }, disableSwitch: { classPropertyName: "disableSwitch", publicName: "disableSwitch", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideNativeDateAdapter()], ngImport: i0, template: "<div class=\"igo-form-field-datetime-row\">\n  <mat-form-field class=\"igo-form-field-datetime-part\">\n    @if (showLabel() === true) {\n      <mat-label>{{ placeholder() | translate }}</mat-label>\n    }\n\n    <input\n      matInput\n      readonly=\"true\"\n      [matDatepicker]=\"datePicker\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder() | translate\"\n      [formControl]=\"dateControl\"\n      [min]=\"minDate() ?? null\"\n      [max]=\"maxDate() ?? null\"\n    />\n    @if (dateControl.value && !disabled()) {\n      <button matIconSuffix mat-icon-button type=\"button\" (click)=\"clearDate()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    }\n    <mat-datepicker-toggle matIconSuffix [for]=\"datePicker\" />\n    <mat-datepicker #datePicker />\n    @if (disableSwitch() === true) {\n      <mat-checkbox\n        class=\"igo-form-disable-switch\"\n        (click)=\"onDisableSwitchClick()\"\n        [checked]=\"!disabled()\"\n        matPrefix\n      />\n    }\n    @if (formControl().errors) {\n      <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n    }\n  </mat-form-field>\n\n  <mat-form-field class=\"igo-form-field-datetime-part\">\n    <mat-label>{{ timePlaceholder() | translate }}</mat-label>\n\n    <input\n      matInput\n      readonly=\"true\"\n      [matTimepicker]=\"timePicker\"\n      [required]=\"required\"\n      [placeholder]=\"timePlaceholder() | translate\"\n      [formControl]=\"timeControl\"\n      [matTimepickerMin]=\"minTime()\"\n      [matTimepickerMax]=\"maxTime()\"\n      [matTimepickerOpenOnClick]=\"openOnClick()\"\n    />\n\n    @if (timeControl.value && !disabled() && !timeControl.disabled) {\n      <button\n        matIconSuffix\n        mat-icon-button\n        type=\"button\"\n        (click)=\"$event.stopPropagation(); clearTime()\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    }\n    <mat-timepicker-toggle matIconSuffix [for]=\"timePicker\" />\n    <mat-timepicker #timePicker [interval]=\"interval()\" [options]=\"options()\" />\n    @if (formControl().errors) {\n      <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n    }\n  </mat-form-field>\n</div>\n", styles: [":host{display:block}.igo-form-field-datetime-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}.igo-form-field-datetime-part{width:100%;min-width:0}:host ::ng-deep .igo-form-field-datetime-part .mat-mdc-form-field-icon-suffix{display:inline-flex;align-items:center;white-space:nowrap;line-height:1}:host ::ng-deep .igo-form-field-datetime-part .mat-mdc-form-field-icon-suffix .mat-mdc-icon-button,:host ::ng-deep .igo-form-field-datetime-part .mat-mdc-form-field-icon-suffix .mat-mdc-icon-button.mat-mdc-button-base{margin:0}@media(max-width:767px){.igo-form-field-datetime-row{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i4.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby", "panelClass"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i4.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i4.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+};
+FormFieldDatetimeComponent = __decorate([
+    IgoFormFieldComponent('datetime')
+], FormFieldDatetimeComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormFieldDatetimeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'igo-form-field-datetime', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatDatepickerModule,
+                        MatTimepickerModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatCheckboxModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        IgoLanguageModule
+                    ], providers: [provideNativeDateAdapter()], template: "<div class=\"igo-form-field-datetime-row\">\n  <mat-form-field class=\"igo-form-field-datetime-part\">\n    @if (showLabel() === true) {\n      <mat-label>{{ placeholder() | translate }}</mat-label>\n    }\n\n    <input\n      matInput\n      readonly=\"true\"\n      [matDatepicker]=\"datePicker\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder() | translate\"\n      [formControl]=\"dateControl\"\n      [min]=\"minDate() ?? null\"\n      [max]=\"maxDate() ?? null\"\n    />\n    @if (dateControl.value && !disabled()) {\n      <button matIconSuffix mat-icon-button type=\"button\" (click)=\"clearDate()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    }\n    <mat-datepicker-toggle matIconSuffix [for]=\"datePicker\" />\n    <mat-datepicker #datePicker />\n    @if (disableSwitch() === true) {\n      <mat-checkbox\n        class=\"igo-form-disable-switch\"\n        (click)=\"onDisableSwitchClick()\"\n        [checked]=\"!disabled()\"\n        matPrefix\n      />\n    }\n    @if (formControl().errors) {\n      <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n    }\n  </mat-form-field>\n\n  <mat-form-field class=\"igo-form-field-datetime-part\">\n    <mat-label>{{ timePlaceholder() | translate }}</mat-label>\n\n    <input\n      matInput\n      readonly=\"true\"\n      [matTimepicker]=\"timePicker\"\n      [required]=\"required\"\n      [placeholder]=\"timePlaceholder() | translate\"\n      [formControl]=\"timeControl\"\n      [matTimepickerMin]=\"minTime()\"\n      [matTimepickerMax]=\"maxTime()\"\n      [matTimepickerOpenOnClick]=\"openOnClick()\"\n    />\n\n    @if (timeControl.value && !disabled() && !timeControl.disabled) {\n      <button\n        matIconSuffix\n        mat-icon-button\n        type=\"button\"\n        (click)=\"$event.stopPropagation(); clearTime()\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    }\n    <mat-timepicker-toggle matIconSuffix [for]=\"timePicker\" />\n    <mat-timepicker #timePicker [interval]=\"interval()\" [options]=\"options()\" />\n    @if (formControl().errors) {\n      <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n    }\n  </mat-form-field>\n</div>\n", styles: [":host{display:block}.igo-form-field-datetime-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}.igo-form-field-datetime-part{width:100%;min-width:0}:host ::ng-deep .igo-form-field-datetime-part .mat-mdc-form-field-icon-suffix{display:inline-flex;align-items:center;white-space:nowrap;line-height:1}:host ::ng-deep .igo-form-field-datetime-part .mat-mdc-form-field-icon-suffix .mat-mdc-icon-button,:host ::ng-deep .igo-form-field-datetime-part .mat-mdc-form-field-icon-suffix .mat-mdc-icon-button.mat-mdc-button-base{margin:0}@media(max-width:767px){.igo-form-field-datetime-row{grid-template-columns:1fr}}\n"] }]
+        }], propDecorators: { formControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControl", required: true }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], timePlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "timePlaceholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTime", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTime", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: false }] }], openOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnClick", required: false }] }], disableSwitch: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSwitch", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }] } });
+
+/**
+ * This component renders a number field
+ */
+let FormFieldNumberComponent = class FormFieldNumberComponent {
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    hide = true;
+    /**
+     * The field's form control
+     */
+    formControl = input.required(...(ngDevMode ? [{ debugName: "formControl" }] : /* istanbul ignore next */ []));
+    /**
+     * Field showLabel
+     */
+    showLabel = input(false, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Field placeholder
+     */
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Field placeholder
+     */
+    errors = input(...(ngDevMode ? [undefined, { debugName: "errors" }] : /* istanbul ignore next */ []));
+    /**
+     * Wheter a disable switch should be available
+     */
+    disableSwitch = input(false, ...(ngDevMode ? [{ debugName: "disableSwitch" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the field is required
+     */
+    get required() {
+        return formControlIsRequired(this.formControl());
+    }
+    ngOnInit() {
+        this.disabled.set(this.formControl().disabled);
+    }
+    /**
+     * Get error message
+     */
+    getErrorMessage() {
+        return getControlErrorMessage(this.formControl(), this.errors() || {});
+    }
+    onDisableSwitchClick() {
+        this.toggleDisabled();
+    }
+    toggleDisabled() {
+        const disabled = !this.disabled();
+        if (disabled === true) {
+            this.formControl().disable();
+        }
+        else {
+            this.formControl().enable();
+        }
+        this.disabled.set(disabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormFieldNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: FormFieldNumberComponent, isStandalone: true, selector: "igo-form-field-number", inputs: { formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, disableSwitch: { classPropertyName: "disableSwitch", publicName: "disableSwitch", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-form-field>\n  @if (showLabel() === true) {\n    <mat-label>{{ placeholder() | translate }}</mat-label>\n  }\n  <input\n    matInput\n    type=\"number\"\n    [required]=\"required\"\n    [placeholder]=\"placeholder() | translate\"\n    [formControl]=\"formControl()\"\n  />\n  @if (disableSwitch() === true) {\n    <mat-checkbox\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      [checked]=\"!disabled()\"\n      matPrefix\n    />\n  }\n\n  @if (formControl().errors) {\n    <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+};
+FormFieldNumberComponent = __decorate([
+    IgoFormFieldComponent('number')
+], FormFieldNumberComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormFieldNumberComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'igo-form-field-number', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatFormFieldModule,
+                        MatInputModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatCheckboxModule,
+                        MatButtonModule,
+                        IgoLanguageModule
+                    ], template: "<mat-form-field>\n  @if (showLabel() === true) {\n    <mat-label>{{ placeholder() | translate }}</mat-label>\n  }\n  <input\n    matInput\n    type=\"number\"\n    [required]=\"required\"\n    [placeholder]=\"placeholder() | translate\"\n    [formControl]=\"formControl()\"\n  />\n  @if (disableSwitch() === true) {\n    <mat-checkbox\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      [checked]=\"!disabled()\"\n      matPrefix\n    />\n  }\n\n  @if (formControl().errors) {\n    <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n  }\n</mat-form-field>\n" }]
+        }], propDecorators: { formControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControl", required: true }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], disableSwitch: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSwitch", required: false }] }] } });
+
 /**
  * This component renders a select field
  */
@@ -215,6 +500,10 @@ let FormFieldSelectComponent = class FormFieldSelectComponent {
      * The field's form control
      */
     formControl = input.required(...(ngDevMode ? [{ debugName: "formControl" }] : /* istanbul ignore next */ []));
+    /**
+     * Field showLabel
+     */
+    showLabel = input(false, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
     /**
      * Field placeholder
      */
@@ -255,13 +544,13 @@ let FormFieldSelectComponent = class FormFieldSelectComponent {
         }
         this.disabled.set(disabled);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormFieldSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: FormFieldSelectComponent, isStandalone: true, selector: "igo-form-field-select", inputs: { choices: { classPropertyName: "choices", publicName: "choices", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, disableSwitch: { classPropertyName: "disableSwitch", publicName: "disableSwitch", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-form-field>\n  <mat-select\n    [multiple]=\"multiple()\"\n    [required]=\"required\"\n    [placeholder]=\"placeholder() | translate\"\n    [formControl]=\"formControl()\"\n  >\n    @for (choice of choices(); track choice) {\n      <mat-option [value]=\"choice.value\">\n        {{ choice.title }}\n      </mat-option>\n    }\n  </mat-select>\n  @if (disableSwitch() === true) {\n    <mat-icon\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      matPrefix\n      >{{ disabled() === true ? 'check_box_outline_blank' : 'check_box' }}\n    </mat-icon>\n  }\n  @if (formControl().errors) {\n    <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormFieldSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: FormFieldSelectComponent, isStandalone: true, selector: "igo-form-field-select", inputs: { choices: { classPropertyName: "choices", publicName: "choices", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, disableSwitch: { classPropertyName: "disableSwitch", publicName: "disableSwitch", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-form-field>\n  @if (showLabel() === true) {\n    <mat-label>{{ placeholder() | translate }}</mat-label>\n  }\n  <mat-select\n    [multiple]=\"multiple()\"\n    [required]=\"required\"\n    [placeholder]=\"placeholder() | translate\"\n    [formControl]=\"formControl()\"\n  >\n    @for (choice of choices(); track choice) {\n      <mat-option [value]=\"choice.value\">\n        {{ choice.title }}\n      </mat-option>\n    }\n  </mat-select>\n  @if (disableSwitch() === true) {\n    <mat-checkbox\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      [checked]=\"!disabled()\"\n      matPrefix\n    />\n  }\n  @if (formControl().errors) {\n    <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 FormFieldSelectComponent = __decorate([
     IgoFormFieldComponent('select')
 ], FormFieldSelectComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormFieldSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormFieldSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igo-form-field-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatFormFieldModule,
@@ -269,23 +558,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                         FormsModule,
                         ReactiveFormsModule,
                         MatOptionModule,
-                        MatIconModule,
+                        MatCheckboxModule,
                         IgoLanguageModule
-                    ], template: "<mat-form-field>\n  <mat-select\n    [multiple]=\"multiple()\"\n    [required]=\"required\"\n    [placeholder]=\"placeholder() | translate\"\n    [formControl]=\"formControl()\"\n  >\n    @for (choice of choices(); track choice) {\n      <mat-option [value]=\"choice.value\">\n        {{ choice.title }}\n      </mat-option>\n    }\n  </mat-select>\n  @if (disableSwitch() === true) {\n    <mat-icon\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      matPrefix\n      >{{ disabled() === true ? 'check_box_outline_blank' : 'check_box' }}\n    </mat-icon>\n  }\n  @if (formControl().errors) {\n    <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n  }\n</mat-form-field>\n" }]
-        }], propDecorators: { choices: [{ type: i0.Input, args: [{ isSignal: true, alias: "choices", required: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], formControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControl", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], disableSwitch: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSwitch", required: false }] }] } });
+                    ], template: "<mat-form-field>\n  @if (showLabel() === true) {\n    <mat-label>{{ placeholder() | translate }}</mat-label>\n  }\n  <mat-select\n    [multiple]=\"multiple()\"\n    [required]=\"required\"\n    [placeholder]=\"placeholder() | translate\"\n    [formControl]=\"formControl()\"\n  >\n    @for (choice of choices(); track choice) {\n      <mat-option [value]=\"choice.value\">\n        {{ choice.title }}\n      </mat-option>\n    }\n  </mat-select>\n  @if (disableSwitch() === true) {\n    <mat-checkbox\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      [checked]=\"!disabled()\"\n      matPrefix\n    />\n  }\n  @if (formControl().errors) {\n    <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n  }\n</mat-form-field>\n" }]
+        }], propDecorators: { choices: [{ type: i0.Input, args: [{ isSignal: true, alias: "choices", required: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], formControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControl", required: true }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], disableSwitch: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSwitch", required: false }] }] } });
 
 /**
  * This component renders a text field
  */
 let FormFieldTextComponent = class FormFieldTextComponent {
     cdRef = inject(ChangeDetectorRef);
-    disabled$ = new BehaviorSubject(false);
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     hide = true;
     lastTimeoutRequest;
     /**
      * The field's form control
      */
     formControl = input.required(...(ngDevMode ? [{ debugName: "formControl" }] : /* istanbul ignore next */ []));
+    /**
+     * Field showLabel
+     */
+    showLabel = input(false, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
     /**
      * Field placeholder
      */
@@ -309,7 +602,7 @@ let FormFieldTextComponent = class FormFieldTextComponent {
         return formControlIsRequired(this.formControl());
     }
     ngOnInit() {
-        this.disabled$.next(this.formControl().disabled);
+        this.disabled.set(this.formControl().disabled);
     }
     /**
      * Get error message
@@ -321,14 +614,14 @@ let FormFieldTextComponent = class FormFieldTextComponent {
         this.toggleDisabled();
     }
     toggleDisabled() {
-        const disabled = !this.disabled$.value;
+        const disabled = !this.disabled();
         if (disabled === true) {
             this.formControl().disable();
         }
         else {
             this.formControl().enable();
         }
-        this.disabled$.next(disabled);
+        this.disabled.set(disabled);
     }
     togglePassword() {
         this.hide = !this.hide;
@@ -345,13 +638,13 @@ let FormFieldTextComponent = class FormFieldTextComponent {
             }, delayMS);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormFieldTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: FormFieldTextComponent, isStandalone: true, selector: "igo-form-field-text", inputs: { formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isPassword: { classPropertyName: "isPassword", publicName: "isPassword", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, disableSwitch: { classPropertyName: "disableSwitch", publicName: "disableSwitch", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-form-field>\n  <input\n    matInput\n    (blur)=\"delayedHide(0)\"\n    [type]=\"isPassword() ? (hide ? 'password' : 'text') : 'text'\"\n    [required]=\"isPassword() ? 'true' : required\"\n    [placeholder]=\"placeholder() | translate\"\n    [formControl]=\"formControl()\"\n    (change)=\"delayedHide()\"\n  />\n  @if (disableSwitch() === true) {\n    <mat-icon\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      matPrefix\n      >{{\n        (disabled$ | async) === true ? 'check_box_outline_blank' : 'check_box'\n      }}\n    </mat-icon>\n  }\n\n  @if (isPassword()) {\n    <button type=\"button\" matSuffix mat-icon-button (click)=\"togglePassword()\">\n      <mat-icon color=\"primary\">{{\n        hide ? 'visibility_off' : 'visibility'\n      }}</mat-icon>\n    </button>\n  }\n\n  @if (formControl().errors) {\n    <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormFieldTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: FormFieldTextComponent, isStandalone: true, selector: "igo-form-field-text", inputs: { formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isPassword: { classPropertyName: "isPassword", publicName: "isPassword", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, disableSwitch: { classPropertyName: "disableSwitch", publicName: "disableSwitch", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-form-field>\n  @if (showLabel() === true) {\n    <mat-label>{{ placeholder() | translate }}</mat-label>\n  }\n  <input\n    matInput\n    (blur)=\"delayedHide(0)\"\n    [type]=\"isPassword() ? (hide ? 'password' : 'text') : 'text'\"\n    [required]=\"isPassword() ? 'true' : required\"\n    [placeholder]=\"placeholder() | translate\"\n    [formControl]=\"formControl()\"\n    (change)=\"delayedHide()\"\n  />\n  @if (disableSwitch() === true) {\n    <mat-checkbox\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      [checked]=\"!disabled()\"\n      matPrefix\n    />\n  }\n\n  @if (isPassword()) {\n    <button type=\"button\" matSuffix mat-icon-button (click)=\"togglePassword()\">\n      <mat-icon color=\"primary\">{{\n        hide ? 'visibility_off' : 'visibility'\n      }}</mat-icon>\n    </button>\n  }\n\n  @if (formControl().errors) {\n    <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 FormFieldTextComponent = __decorate([
     IgoFormFieldComponent('text')
 ], FormFieldTextComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormFieldTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormFieldTextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igo-form-field-text', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatFormFieldModule,
@@ -359,21 +652,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                         FormsModule,
                         ReactiveFormsModule,
                         MatIconModule,
+                        MatCheckboxModule,
                         MatButtonModule,
-                        AsyncPipe,
                         IgoLanguageModule
-                    ], template: "<mat-form-field>\n  <input\n    matInput\n    (blur)=\"delayedHide(0)\"\n    [type]=\"isPassword() ? (hide ? 'password' : 'text') : 'text'\"\n    [required]=\"isPassword() ? 'true' : required\"\n    [placeholder]=\"placeholder() | translate\"\n    [formControl]=\"formControl()\"\n    (change)=\"delayedHide()\"\n  />\n  @if (disableSwitch() === true) {\n    <mat-icon\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      matPrefix\n      >{{\n        (disabled$ | async) === true ? 'check_box_outline_blank' : 'check_box'\n      }}\n    </mat-icon>\n  }\n\n  @if (isPassword()) {\n    <button type=\"button\" matSuffix mat-icon-button (click)=\"togglePassword()\">\n      <mat-icon color=\"primary\">{{\n        hide ? 'visibility_off' : 'visibility'\n      }}</mat-icon>\n    </button>\n  }\n\n  @if (formControl().errors) {\n    <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n  }\n</mat-form-field>\n" }]
-        }], propDecorators: { formControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControl", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], isPassword: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPassword", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], disableSwitch: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSwitch", required: false }] }] } });
+                    ], template: "<mat-form-field>\n  @if (showLabel() === true) {\n    <mat-label>{{ placeholder() | translate }}</mat-label>\n  }\n  <input\n    matInput\n    (blur)=\"delayedHide(0)\"\n    [type]=\"isPassword() ? (hide ? 'password' : 'text') : 'text'\"\n    [required]=\"isPassword() ? 'true' : required\"\n    [placeholder]=\"placeholder() | translate\"\n    [formControl]=\"formControl()\"\n    (change)=\"delayedHide()\"\n  />\n  @if (disableSwitch() === true) {\n    <mat-checkbox\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      [checked]=\"!disabled()\"\n      matPrefix\n    />\n  }\n\n  @if (isPassword()) {\n    <button type=\"button\" matSuffix mat-icon-button (click)=\"togglePassword()\">\n      <mat-icon color=\"primary\">{{\n        hide ? 'visibility_off' : 'visibility'\n      }}</mat-icon>\n    </button>\n  }\n\n  @if (formControl().errors) {\n    <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n  }\n</mat-form-field>\n" }]
+        }], propDecorators: { formControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControl", required: true }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], isPassword: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPassword", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], disableSwitch: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSwitch", required: false }] }] } });
 
 /**
  * This component renders a textarea field
  */
 let FormFieldTextareaComponent = class FormFieldTextareaComponent {
-    disabled$ = new BehaviorSubject(false);
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     /**
      * The field's form control
      */
     formControl = input.required(...(ngDevMode ? [{ debugName: "formControl" }] : /* istanbul ignore next */ []));
+    /**
+     * Field showLabel
+     */
+    showLabel = input(false, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
     /**
      * Field placeholder
      */
@@ -393,7 +690,7 @@ let FormFieldTextareaComponent = class FormFieldTextareaComponent {
         return formControlIsRequired(this.formControl());
     }
     ngOnInit() {
-        this.disabled$.next(this.formControl().disabled);
+        this.disabled.set(this.formControl().disabled);
     }
     /**
      * Get error message
@@ -405,33 +702,32 @@ let FormFieldTextareaComponent = class FormFieldTextareaComponent {
         this.toggleDisabled();
     }
     toggleDisabled() {
-        const disabled = !this.disabled$.value;
+        const disabled = !this.disabled();
         if (disabled === true) {
             this.formControl().disable();
         }
         else {
             this.formControl().enable();
         }
-        this.disabled$.next(disabled);
+        this.disabled.set(disabled);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormFieldTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: FormFieldTextareaComponent, isStandalone: true, selector: "igo-form-field-textarea", inputs: { formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, disableSwitch: { classPropertyName: "disableSwitch", publicName: "disableSwitch", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-form-field>\n  <textarea\n    matInput\n    [required]=\"required\"\n    [placeholder]=\"placeholder() | translate\"\n    [formControl]=\"formControl()\"\n  >\n  </textarea>\n  @if (disableSwitch() === true) {\n    <mat-icon\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      matPrefix\n      >{{\n        (disabled$ | async) === true ? 'check_box_outline_blank' : 'check_box'\n      }}\n    </mat-icon>\n  }\n  @if (formControl().errors) {\n    <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormFieldTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: FormFieldTextareaComponent, isStandalone: true, selector: "igo-form-field-textarea", inputs: { formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, disableSwitch: { classPropertyName: "disableSwitch", publicName: "disableSwitch", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-form-field>\n  @if (showLabel() === true) {\n    <mat-label>{{ placeholder() | translate }}</mat-label>\n  }\n  <textarea\n    matInput\n    [required]=\"required\"\n    [placeholder]=\"placeholder() | translate\"\n    [formControl]=\"formControl()\"\n  >\n  </textarea>\n  @if (disableSwitch() === true) {\n    <mat-checkbox\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      [checked]=\"!disabled()\"\n      matPrefix\n    />\n  }\n  @if (formControl().errors) {\n    <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 FormFieldTextareaComponent = __decorate([
     IgoFormFieldComponent('textarea')
 ], FormFieldTextareaComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormFieldTextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormFieldTextareaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igo-form-field-textarea', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatFormFieldModule,
                         MatInputModule,
                         FormsModule,
                         ReactiveFormsModule,
-                        MatIconModule,
-                        AsyncPipe,
+                        MatCheckboxModule,
                         IgoLanguageModule
-                    ], template: "<mat-form-field>\n  <textarea\n    matInput\n    [required]=\"required\"\n    [placeholder]=\"placeholder() | translate\"\n    [formControl]=\"formControl()\"\n  >\n  </textarea>\n  @if (disableSwitch() === true) {\n    <mat-icon\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      matPrefix\n      >{{\n        (disabled$ | async) === true ? 'check_box_outline_blank' : 'check_box'\n      }}\n    </mat-icon>\n  }\n  @if (formControl().errors) {\n    <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n  }\n</mat-form-field>\n" }]
-        }], propDecorators: { formControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControl", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], disableSwitch: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSwitch", required: false }] }] } });
+                    ], template: "<mat-form-field>\n  @if (showLabel() === true) {\n    <mat-label>{{ placeholder() | translate }}</mat-label>\n  }\n  <textarea\n    matInput\n    [required]=\"required\"\n    [placeholder]=\"placeholder() | translate\"\n    [formControl]=\"formControl()\"\n  >\n  </textarea>\n  @if (disableSwitch() === true) {\n    <mat-checkbox\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      [checked]=\"!disabled()\"\n      matPrefix\n    />\n  }\n  @if (formControl().errors) {\n    <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n  }\n</mat-form-field>\n" }]
+        }], propDecorators: { formControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControl", required: true }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], disableSwitch: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSwitch", required: false }] }] } });
 
 class FormService {
     formBuilder = inject(UntypedFormBuilder);
@@ -498,10 +794,10 @@ class FormService {
         const args = match[2];
         return Validators[name](args);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -553,16 +849,18 @@ class FormFieldComponent {
         this.fieldSubscribers = Object.assign({}, this.field().subscribers || {});
         return this.fieldSubscribers;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: FormFieldComponent, isStandalone: true, selector: "igo-form-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (field() !== undefined) {\n  <igo-dynamic-outlet\n    [component]=\"getFieldComponent()\"\n    [inputs]=\"getFieldInputs()\"\n    [subscribers]=\"getFieldSubscribers()\"\n  />\n}\n", styles: ["::ng-deep mat-form-field{width:100%}::ng-deep .igo-form-disable-switch{margin-right:8px}\n"], dependencies: [{ kind: "component", type: DynamicOutletComponent, selector: "igo-dynamic-outlet", inputs: ["component", "inputs", "subscribers"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: FormFieldComponent, isStandalone: true, selector: "igo-form-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (field() !== undefined) {\n  <igo-dynamic-outlet\n    [component]=\"getFieldComponent()\"\n    [inputs]=\"getFieldInputs()\"\n    [subscribers]=\"getFieldSubscribers()\"\n  />\n}\n", styles: ["::ng-deep mat-form-field{width:100%}::ng-deep .igo-form-disable-switch{margin-right:8px}\n"], dependencies: [{ kind: "component", type: DynamicOutletComponent, selector: "igo-dynamic-outlet", inputs: ["component", "inputs", "subscribers"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igo-form-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [DynamicOutletComponent], template: "@if (field() !== undefined) {\n  <igo-dynamic-outlet\n    [component]=\"getFieldComponent()\"\n    [inputs]=\"getFieldInputs()\"\n    [subscribers]=\"getFieldSubscribers()\"\n  />\n}\n", styles: ["::ng-deep mat-form-field{width:100%}::ng-deep .igo-form-disable-switch{margin-right:8px}\n"] }]
         }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }] } });
 
 const FORM_FIELD_DIRECTIVES = [
     FormFieldComponent,
+    FormFieldDatetimeComponent,
+    FormFieldNumberComponent,
     FormFieldSelectComponent,
     FormFieldTextComponent,
     FormFieldTextareaComponent
@@ -572,11 +870,11 @@ const FORM_FIELD_DIRECTIVES = [
  * @deprecated import the components directly or FORM_FIELD_DIRECTIVES for every components/directives
  */
 class IgoFormFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: IgoFormFieldModule, imports: [FormFieldComponent, FormFieldSelectComponent, FormFieldTextComponent, FormFieldTextareaComponent], exports: [FormFieldComponent, FormFieldSelectComponent, FormFieldTextComponent, FormFieldTextareaComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoFormFieldModule, imports: [FORM_FIELD_DIRECTIVES] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IgoFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: IgoFormFieldModule, imports: [FormFieldComponent, FormFieldDatetimeComponent, FormFieldNumberComponent, FormFieldSelectComponent, FormFieldTextComponent, FormFieldTextareaComponent], exports: [FormFieldComponent, FormFieldDatetimeComponent, FormFieldNumberComponent, FormFieldSelectComponent, FormFieldTextComponent, FormFieldTextareaComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IgoFormFieldModule, imports: [FORM_FIELD_DIRECTIVES] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoFormFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IgoFormFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...FORM_FIELD_DIRECTIVES],
@@ -637,10 +935,10 @@ class FormGroupComponent {
         const options = this.group().options || {};
         return getControlErrorMessage(this.formControl, options.errors || {});
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: FormGroupComponent, isStandalone: true, selector: "igo-form-group", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (group() && group().fields.length > 0) {\n  <div class=\"igo-form-group-fields\">\n    @for (field of group().fields; track field) {\n      <div class=\"igo-form-field-wrapper\" [ngClass]=\"getFieldNgClass(field)\">\n        <igo-form-field [field]=\"field\" />\n      </div>\n    }\n  </div>\n}\n\n<div class=\"igo-form-group-extra-content\">\n  <ng-content />\n</div>\n\n@if (formControl.errors) {\n  <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n}\n", styles: [":host{width:100%;height:100%;display:block;overflow:auto;padding:10px 5px;box-sizing:border-box}:host .igo-form-field-colspan-2{width:100%}:host .igo-form-field-colspan-1{width:50%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FormFieldComponent, selector: "igo-form-field", inputs: ["field"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: FormGroupComponent, isStandalone: true, selector: "igo-form-group", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (group() && group().fields.length > 0) {\n  <div class=\"igo-form-group-fields\">\n    @for (field of group().fields; track field) {\n      <div class=\"igo-form-field-wrapper\" [ngClass]=\"getFieldNgClass(field)\">\n        <igo-form-field [field]=\"field\" />\n      </div>\n    }\n  </div>\n}\n\n<div class=\"igo-form-group-extra-content\">\n  <ng-content />\n</div>\n\n@if (formControl.errors) {\n  <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n}\n", styles: [":host{width:100%;height:100%;display:block;overflow:auto;padding:10px 5px;box-sizing:border-box}:host .igo-form-field-colspan-2{width:100%}:host .igo-form-field-colspan-1{width:50%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FormFieldComponent, selector: "igo-form-field", inputs: ["field"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igo-form-group', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, FormFieldComponent, MatFormFieldModule, IgoLanguageModule], template: "@if (group() && group().fields.length > 0) {\n  <div class=\"igo-form-group-fields\">\n    @for (field of group().fields; track field) {\n      <div class=\"igo-form-field-wrapper\" [ngClass]=\"getFieldNgClass(field)\">\n        <igo-form-field [field]=\"field\" />\n      </div>\n    }\n  </div>\n}\n\n<div class=\"igo-form-group-extra-content\">\n  <ng-content />\n</div>\n\n@if (formControl.errors) {\n  <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n}\n", styles: [":host{width:100%;height:100%;display:block;overflow:auto;padding:10px 5px;box-sizing:border-box}:host .igo-form-field-colspan-2{width:100%}:host .igo-form-field-colspan-1{width:50%}\n"] }]
         }], propDecorators: { group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }] } });
@@ -649,11 +947,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  * @deprecated import the FormGroupComponent directly
  */
 class IgoFormGroupModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoFormGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: IgoFormGroupModule, imports: [FormGroupComponent], exports: [FormGroupComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoFormGroupModule, imports: [FormGroupComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IgoFormGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: IgoFormGroupModule, imports: [FormGroupComponent], exports: [FormGroupComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IgoFormGroupModule, imports: [FormGroupComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoFormGroupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IgoFormGroupModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [FormGroupComponent],
@@ -670,13 +968,13 @@ const FORM_DIRECTIVES = [
  * @deprecated import the components directly or FORM_DIRECTIVES for every components/directives
  */
 class IgoFormModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: IgoFormModule, imports: [FormFieldComponent, FormFieldSelectComponent, FormFieldTextComponent, FormFieldTextareaComponent, FormGroupComponent,
-            FormComponent], exports: [FormFieldComponent, FormFieldSelectComponent, FormFieldTextComponent, FormFieldTextareaComponent, FormGroupComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IgoFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: IgoFormModule, imports: [FormFieldComponent, FormFieldDatetimeComponent, FormFieldNumberComponent, FormFieldSelectComponent, FormFieldTextComponent, FormFieldTextareaComponent, FormGroupComponent,
+            FormComponent], exports: [FormFieldComponent, FormFieldDatetimeComponent, FormFieldNumberComponent, FormFieldSelectComponent, FormFieldTextComponent, FormFieldTextareaComponent, FormGroupComponent,
             FormComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoFormModule, imports: [FORM_DIRECTIVES] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IgoFormModule, imports: [FORM_DIRECTIVES] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IgoFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...FORM_DIRECTIVES],
@@ -735,10 +1033,10 @@ class FormDialogComponent {
     cancel() {
         this.dialogRef.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: FormDialogComponent, isStandalone: true, selector: "igo-form-dialog", ngImport: i0, template: "<h1 mat-dialog-title>{{ data.title | translate }}</h1>\n\n@if (form$ | async; as form) {\n  <igo-form\n    [form]=\"form\"\n    [formData]=\"(data$ | async)!\"\n    (submitForm)=\"onSubmit($event)\"\n  >\n    @if (form.fields.length) {\n      <div class=\"form-dialog-container\">\n        @for (field of form.fields; track field) {\n          <igo-form-field [field]=\"field\" />\n        }\n        @for (group of form.groups; track group) {\n          <igo-form-group [group]=\"group\" />\n        }\n      </div>\n    }\n    <div formButtons mat-dialog-actions>\n      <button\n        mat-stroked-button\n        type=\"button\"\n        color=\"primary\"\n        (click)=\"cancel()\"\n      >\n        {{ data.cancelButtonText | translate }}\n      </button>\n      <button matButton=\"filled\" type=\"submit\" color=\"primary\">\n        {{ data.processButtonText | translate }}\n      </button>\n    </div>\n  </igo-form>\n}\n<div>\n  @if (data.notice && data.notice !== '') {\n    <igo-custom-html [html]=\"data.notice\" />\n  }\n</div>\n", styles: [":host div[mat-dialog-actions]{margin:10px 0 0}:host .form-dialog-container{width:100%;padding:10px}:host .form-dialog-container igo-form-field,:host .form-dialog-container igo-form-group{display:block;height:auto}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: FormComponent, selector: "igo-form", inputs: ["form", "formData", "autocomplete"], outputs: ["submitForm"] }, { kind: "component", type: FormFieldComponent, selector: "igo-form-field", inputs: ["field"] }, { kind: "component", type: FormGroupComponent, selector: "igo-form-group", inputs: ["group", "errors"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: CustomHtmlComponent, selector: "igo-custom-html", inputs: ["html"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: FormDialogComponent, isStandalone: true, selector: "igo-form-dialog", ngImport: i0, template: "<h1 mat-dialog-title>{{ data.title | translate }}</h1>\n\n@if (form$ | async; as form) {\n  <igo-form\n    [form]=\"form\"\n    [formData]=\"(data$ | async)!\"\n    (submitForm)=\"onSubmit($event)\"\n  >\n    @if (form.fields.length) {\n      <div class=\"form-dialog-container\">\n        @for (field of form.fields; track field) {\n          <igo-form-field [field]=\"field\" />\n        }\n        @for (group of form.groups; track group) {\n          <igo-form-group [group]=\"group\" />\n        }\n      </div>\n    }\n    <div formButtons mat-dialog-actions>\n      <button\n        mat-stroked-button\n        type=\"button\"\n        color=\"primary\"\n        (click)=\"cancel()\"\n      >\n        {{ data.cancelButtonText | translate }}\n      </button>\n      <button matButton=\"filled\" type=\"submit\" color=\"primary\">\n        {{ data.processButtonText | translate }}\n      </button>\n    </div>\n  </igo-form>\n}\n<div>\n  @if (data.notice && data.notice !== '') {\n    <igo-custom-html [html]=\"data.notice\" />\n  }\n</div>\n", styles: [":host div[mat-dialog-actions]{margin:10px 0 0}:host .form-dialog-container{width:100%;padding:10px}:host .form-dialog-container igo-form-field,:host .form-dialog-container igo-form-group{display:block;height:auto}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: FormComponent, selector: "igo-form", inputs: ["form", "formData", "autocomplete"], outputs: ["submitForm"] }, { kind: "component", type: FormFieldComponent, selector: "igo-form-field", inputs: ["field"] }, { kind: "component", type: FormGroupComponent, selector: "igo-form-group", inputs: ["group", "errors"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: CustomHtmlComponent, selector: "igo-custom-html", inputs: ["html"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igo-form-dialog', imports: [
                         MatDialogTitle,
@@ -768,10 +1066,10 @@ class FormDialogService {
         });
         return dialogRef.afterClosed();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormDialogService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormDialogService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormDialogService, decorators: [{
             type: Injectable
         }] });
 
@@ -788,11 +1086,11 @@ class IgoFormDialogModule {
             providers: []
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoFormDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: IgoFormDialogModule, imports: [MatDialogModule, FormDialogComponent], exports: [FormDialogComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoFormDialogModule, providers: [FormDialogService], imports: [MatDialogModule, FormDialogComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IgoFormDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: IgoFormDialogModule, imports: [MatDialogModule, FormDialogComponent], exports: [FormDialogComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IgoFormDialogModule, providers: [FormDialogService], imports: [MatDialogModule, FormDialogComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoFormDialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IgoFormDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [MatDialogModule, FormDialogComponent],
@@ -805,5 +1103,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { FORM_DIRECTIVES, FORM_FIELD_DIRECTIVES, FormComponent, FormDialogComponent, FormDialogService, FormFieldComponent, FormFieldSelectComponent, FormFieldService, FormFieldTextComponent, FormFieldTextareaComponent, FormGroupComponent, FormService, IgoFormDialogModule, IgoFormFieldComponent, IgoFormFieldModule, IgoFormFormModule, IgoFormGroupModule, IgoFormModule, formControlIsRequired, getAllFormFields, getControlErrorMessage, getDefaultErrorMessages, getFormFieldByName };
+export { FORM_DIRECTIVES, FORM_FIELD_DIRECTIVES, FormComponent, FormDialogComponent, FormDialogService, FormFieldComponent, FormFieldDatetimeComponent, FormFieldNumberComponent, FormFieldSelectComponent, FormFieldService, FormFieldTextComponent, FormFieldTextareaComponent, FormGroupComponent, FormService, IgoFormDialogModule, IgoFormFieldComponent, IgoFormFieldModule, IgoFormFormModule, IgoFormGroupModule, IgoFormModule, formControlIsRequired, getAllFormFields, getControlErrorMessage, getDefaultErrorMessages, getFormFieldByName };
 //# sourceMappingURL=igo2-common-form.mjs.map