special-forms 4.0.2 → 4.0.3

package/fesm2015/special-forms.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Pipe, NgModule, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, Directive, Injectable } from '@angular/core';
+import { Pipe, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, Directive, NgModule, Injectable } from '@angular/core';
 import { debounceTime } from 'rxjs/operators';
 import * as i4 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
@@ -8,11 +8,11 @@ import * as i1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i5$1 from '@angular/material/icon';
+import * as i6 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i7 from '@angular/forms';
 import { ReactiveFormsModule, FormControl, FormsModule, FormGroup, FormArray, Validators } from '@angular/forms';
-import * as i8 from '@angular/material/button';
+import * as i7$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i2 from '@angular/material/form-field';
 import * as i5 from '@angular/material/core';
@@ -23,7 +23,7 @@ import * as i3 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i3$1 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i11 from '@angular/material/chips';
+import * as i9 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i2$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -46,27 +46,12 @@ class ErrorMessagePipe {
     }
 }
 ErrorMessagePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ErrorMessagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-ErrorMessagePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: ErrorMessagePipe, name: "errorMessage" });
+ErrorMessagePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: ErrorMessagePipe, isStandalone: true, name: "errorMessage" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ErrorMessagePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: "errorMessage",
-                }]
-        }] });
-
-class ErrorMessagePipeModule {
-}
-ErrorMessagePipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ErrorMessagePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ErrorMessagePipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: ErrorMessagePipeModule, declarations: [ErrorMessagePipe], imports: [CommonModule], exports: [ErrorMessagePipe] });
-ErrorMessagePipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ErrorMessagePipeModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ErrorMessagePipeModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ErrorMessagePipe],
-                    imports: [
-                        CommonModule,
-                    ],
-                    exports: [ErrorMessagePipe],
+                    standalone: true
                 }]
         }] });
 
@@ -84,26 +69,26 @@ class TextByFunctionPipe {
     }
 }
 TextByFunctionPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TextByFunctionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-TextByFunctionPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: TextByFunctionPipe, name: "textByFunction" });
+TextByFunctionPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: TextByFunctionPipe, isStandalone: true, name: "textByFunction" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TextByFunctionPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'textByFunction' }]
+            args: [{ name: 'textByFunction', standalone: true }]
         }] });
 
-class TextByFunctionPipeModule {
+class FormControlsListPipe {
+    transform(controls) {
+        if (!controls)
+            return [];
+        return Object.values(controls)
+            .filter((control) => !control.hidden)
+            .map((control) => control);
+    }
 }
-TextByFunctionPipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TextByFunctionPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TextByFunctionPipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: TextByFunctionPipeModule, declarations: [TextByFunctionPipe], imports: [CommonModule], exports: [TextByFunctionPipe] });
-TextByFunctionPipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TextByFunctionPipeModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TextByFunctionPipeModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [TextByFunctionPipe],
-                    imports: [
-                        CommonModule,
-                    ],
-                    exports: [TextByFunctionPipe],
-                }]
+FormControlsListPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormControlsListPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+FormControlsListPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: FormControlsListPipe, isStandalone: true, name: "controlsList" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormControlsListPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'controlsList', standalone: true }]
         }] });
 
 class SpecialAutocompleteComponent {
@@ -145,7 +130,7 @@ class SpecialAutocompleteComponent {
     }
 }
 SpecialAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpecialAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialAutocompleteComponent, isStandalone: true, selector: "sp-autocomplete", inputs: { control: "control" }, ngImport: i0, template: "<mat-form-field\r\n  class=\"special-autocomplete w-full mb-3 {{ control.styleClasses }}\"\r\n  [id]=\"control.elementId\"\r\n  *ngIf=\"control && !control.hidden\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label\r\n    *ngIf=\"control.label\"\r\n  >\r\n    {{ control.label }}\r\n  </mat-label>\r\n  <input\r\n    type=\"text\"\r\n    autocomplete=\"off\"\r\n    [required]=\"control.required\"\r\n    [readonly]=\"control.readOnly\"\r\n    [placeholder]=\"control.placeholder\"\r\n    matInput\r\n    [formControl]=\"control\"\r\n    [matAutocomplete]=\"auto\"\r\n  />\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    [displayWith]=\"configValue\"\r\n    (optionSelected)=\"optionSelected($event)\"\r\n  >\r\n    <mat-option\r\n      *ngFor=\"let option of settings?.source | async\"\r\n      [value]=\"option\"\r\n    >\r\n      <div class=\"flex items-center\">\r\n        <img\r\n          *ngIf=\"settings.fieldImage\"\r\n          class=\"w-8 pr-2\"\r\n          alt=\"\"\r\n          [src]=\"option | textByFunction: settings.fieldImage\"\r\n        />\r\n        <span>\r\n          {{ option | textByFunction: settings.fieldName }}\r\n        </span>\r\n      </div>\r\n    </mat-option>\r\n  </mat-autocomplete>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n  <button\r\n    *ngIf=\"settings.icon\"\r\n    mat-icon-button\r\n    matSuffix\r\n    (click)=\"iconClick($event)\"\r\n  >\r\n    <mat-icon>\r\n      {{ settings.icon }}\r\n    </mat-icon>\r\n  </button>\r\n  <mat-hint>{{ control.tooltip }}</mat-hint>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: ErrorMessagePipeModule }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "ngmodule", type: TextByFunctionPipeModule }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SpecialAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialAutocompleteComponent, isStandalone: true, selector: "sp-autocomplete", inputs: { control: "control" }, ngImport: i0, template: "<mat-form-field\r\n  class=\"special-autocomplete w-full mb-3 {{ control.styleClasses }}\"\r\n  [id]=\"control.elementId\"\r\n  *ngIf=\"control && !control.hidden\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label\r\n    *ngIf=\"control.label\"\r\n  >\r\n    {{ control.label }}\r\n  </mat-label>\r\n  <input\r\n    type=\"text\"\r\n    autocomplete=\"off\"\r\n    [required]=\"control.required\"\r\n    [readonly]=\"control.readOnly\"\r\n    [placeholder]=\"control.placeholder\"\r\n    matInput\r\n    [formControl]=\"control\"\r\n    [matAutocomplete]=\"auto\"\r\n  />\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    [displayWith]=\"configValue\"\r\n    (optionSelected)=\"optionSelected($event)\"\r\n  >\r\n    <mat-option\r\n      *ngFor=\"let option of settings?.source | async\"\r\n      [value]=\"option\"\r\n    >\r\n      <div class=\"flex items-center\">\r\n        <img\r\n          *ngIf=\"settings.fieldImage\"\r\n          class=\"w-8 pr-2\"\r\n          alt=\"\"\r\n          [src]=\"option | textByFunction: settings.fieldImage\"\r\n        />\r\n        <span>\r\n          {{ option | textByFunction: settings.fieldName }}\r\n        </span>\r\n      </div>\r\n    </mat-option>\r\n  </mat-autocomplete>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n  <button\r\n    *ngIf=\"settings.icon\"\r\n    mat-icon-button\r\n    matSuffix\r\n    (click)=\"iconClick($event)\"\r\n  >\r\n    <mat-icon>\r\n      {{ settings.icon }}\r\n    </mat-icon>\r\n  </button>\r\n  <mat-hint>{{ control.tooltip }}</mat-hint>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'sp-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
@@ -155,8 +140,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         MatIconModule,
                         ReactiveFormsModule,
                         MatButtonModule,
-                        ErrorMessagePipeModule,
-                        TextByFunctionPipeModule,
+                        ErrorMessagePipe,
+                        TextByFunctionPipe,
                     ], template: "<mat-form-field\r\n  class=\"special-autocomplete w-full mb-3 {{ control.styleClasses }}\"\r\n  [id]=\"control.elementId\"\r\n  *ngIf=\"control && !control.hidden\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label\r\n    *ngIf=\"control.label\"\r\n  >\r\n    {{ control.label }}\r\n  </mat-label>\r\n  <input\r\n    type=\"text\"\r\n    autocomplete=\"off\"\r\n    [required]=\"control.required\"\r\n    [readonly]=\"control.readOnly\"\r\n    [placeholder]=\"control.placeholder\"\r\n    matInput\r\n    [formControl]=\"control\"\r\n    [matAutocomplete]=\"auto\"\r\n  />\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    [displayWith]=\"configValue\"\r\n    (optionSelected)=\"optionSelected($event)\"\r\n  >\r\n    <mat-option\r\n      *ngFor=\"let option of settings?.source | async\"\r\n      [value]=\"option\"\r\n    >\r\n      <div class=\"flex items-center\">\r\n        <img\r\n          *ngIf=\"settings.fieldImage\"\r\n          class=\"w-8 pr-2\"\r\n          alt=\"\"\r\n          [src]=\"option | textByFunction: settings.fieldImage\"\r\n        />\r\n        <span>\r\n          {{ option | textByFunction: settings.fieldName }}\r\n        </span>\r\n      </div>\r\n    </mat-option>\r\n  </mat-autocomplete>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n  <button\r\n    *ngIf=\"settings.icon\"\r\n    mat-icon-button\r\n    matSuffix\r\n    (click)=\"iconClick($event)\"\r\n  >\r\n    <mat-icon>\r\n      {{ settings.icon }}\r\n    </mat-icon>\r\n  </button>\r\n  <mat-hint>{{ control.tooltip }}</mat-hint>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { control: [{
                 type: Input
@@ -186,7 +171,7 @@ class SpecialInputComponent {
     }
 }
 SpecialInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpecialInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialInputComponent, isStandalone: true, selector: "sp-input", inputs: { control: "control" }, ngImport: i0, template: "<mat-form-field\n  *ngIf=\"control && !control.hidden\"\n  [id]=\"control.elementId\"\n  class=\"special-input w-full mb-3 {{ control.styleClasses }}\"\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\n>\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\n  <input\n    matInput\n    (blur)=\"onBlurAction()\"\n    (keydown.enter)=\"onEnterClick()\"\n    [inputMask]=\"settings?.mask\"\n    autocomplete=\"off\"\n    [type]=\"settings?.type || 'text'\"\n    [readonly]=\"control.readOnly\"\n    [required]=\"control.required\"\n    [placeholder]=\"control.placeholder\"\n    [formControl]=\"control\"\n  />\n  <mat-hint>\n    {{ control.tooltip }}\n  </mat-hint>\n  <button\n    *ngIf=\"settings?.icon\"\n    mat-icon-button\n    matSuffix\n    (click)=\"iconClick($event)\"\n  >\n    <mat-icon>\n      {{ settings.icon }}\n    </mat-icon>\n  </button>\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\n  <mat-error>\n    {{ control.errors | errorMessage: control.errorMessages }}\n  </mat-error>\n</mat-form-field>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: InputMaskModule }, { kind: "directive", type: i1$2.InputMaskDirective, selector: "[inputMask]", inputs: ["inputMask"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: ErrorMessagePipeModule }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SpecialInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialInputComponent, isStandalone: true, selector: "sp-input", inputs: { control: "control" }, ngImport: i0, template: "<mat-form-field\n  *ngIf=\"control && !control.hidden\"\n  [id]=\"control.elementId\"\n  class=\"special-input w-full mb-3 {{ control.styleClasses }}\"\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\n>\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\n  <input\n    matInput\n    (blur)=\"onBlurAction()\"\n    (keydown.enter)=\"onEnterClick()\"\n    [inputMask]=\"settings?.mask\"\n    autocomplete=\"off\"\n    [type]=\"settings?.type || 'text'\"\n    [readonly]=\"control.readOnly\"\n    [required]=\"control.required\"\n    [placeholder]=\"control.placeholder\"\n    [formControl]=\"control\"\n  />\n  <mat-hint>\n    {{ control.tooltip }}\n  </mat-hint>\n  <button\n    *ngIf=\"settings?.icon\"\n    mat-icon-button\n    matSuffix\n    (click)=\"iconClick($event)\"\n  >\n    <mat-icon>\n      {{ settings.icon }}\n    </mat-icon>\n  </button>\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\n  <mat-error>\n    {{ control.errors | errorMessage: control.errorMessages }}\n  </mat-error>\n</mat-form-field>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: InputMaskModule }, { kind: "directive", type: i1$2.InputMaskDirective, selector: "[inputMask]", inputs: ["inputMask"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialInputComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'sp-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
@@ -196,7 +181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         MatIconModule,
                         ReactiveFormsModule,
                         MatButtonModule,
-                        ErrorMessagePipeModule
+                        ErrorMessagePipe,
                     ], template: "<mat-form-field\n  *ngIf=\"control && !control.hidden\"\n  [id]=\"control.elementId\"\n  class=\"special-input w-full mb-3 {{ control.styleClasses }}\"\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\n>\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\n  <input\n    matInput\n    (blur)=\"onBlurAction()\"\n    (keydown.enter)=\"onEnterClick()\"\n    [inputMask]=\"settings?.mask\"\n    autocomplete=\"off\"\n    [type]=\"settings?.type || 'text'\"\n    [readonly]=\"control.readOnly\"\n    [required]=\"control.required\"\n    [placeholder]=\"control.placeholder\"\n    [formControl]=\"control\"\n  />\n  <mat-hint>\n    {{ control.tooltip }}\n  </mat-hint>\n  <button\n    *ngIf=\"settings?.icon\"\n    mat-icon-button\n    matSuffix\n    (click)=\"iconClick($event)\"\n  >\n    <mat-icon>\n      {{ settings.icon }}\n    </mat-icon>\n  </button>\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\n  <mat-error>\n    {{ control.errors | errorMessage: control.errorMessages }}\n  </mat-error>\n</mat-form-field>\n", styles: [":host{display:contents}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { control: [{
                 type: Input
@@ -218,17 +203,17 @@ class SpecialDropdownComponent {
     }
 }
 SpecialDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpecialDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialDropdownComponent, isStandalone: true, selector: "sp-dropdown", inputs: { control: "control" }, ngImport: i0, template: "<mat-form-field\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-dropdown w-full mb-3 {{ control.styleClasses }}\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label *ngIf=\"control.label\">\r\n    {{ control.label }}\r\n  </mat-label>\r\n  <mat-select\r\n    [formControl]=\"control\"\r\n    [required]=\"control.required\"\r\n    (selectionChange)=\"optionSelected($event.value)\"\r\n    [placeholder]=\"control.placeholder\"\r\n  >\r\n    <mat-option *ngIf=\"!control.required\" [value]=\"null\">\r\n      {{ control.placeholder || control.settings.notSelectedText }}\r\n    </mat-option>\r\n    <mat-option\r\n      *ngFor=\"let item of control.settings.source | async\"\r\n      [value]=\"item[control.settings.fieldId]\"\r\n    >\r\n      {{ item | textByFunction: control.settings.fieldName }}\r\n    </mat-option>\r\n  </mat-select>\r\n  <button\r\n    *ngIf=\"settings.icon\"\r\n    mat-icon-button\r\n    matSuffix\r\n    (click)=\"iconClick($event)\"\r\n  >\r\n    <mat-icon>\r\n      {{ settings.icon }}\r\n    </mat-icon>\r\n  </button>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n  <mat-hint *ngIf=\"control.tooltip\">{{ control.tooltip }}</mat-hint>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ErrorMessagePipeModule }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.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]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: TextByFunctionPipeModule }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SpecialDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialDropdownComponent, isStandalone: true, selector: "sp-dropdown", inputs: { control: "control" }, ngImport: i0, template: "<mat-form-field\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-dropdown w-full mb-3 {{ control.styleClasses }}\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label *ngIf=\"control.label\">\r\n    {{ control.label }}\r\n  </mat-label>\r\n  <mat-select\r\n    [formControl]=\"control\"\r\n    [required]=\"control.required\"\r\n    (selectionChange)=\"optionSelected($event.value)\"\r\n    [placeholder]=\"control.placeholder\"\r\n  >\r\n    <mat-option *ngIf=\"!control.required\" [value]=\"null\">\r\n      {{ control.placeholder || control.settings.notSelectedText }}\r\n    </mat-option>\r\n    <mat-option\r\n      *ngFor=\"let item of control.settings.source | async\"\r\n      [value]=\"item[control.settings.fieldId]\"\r\n    >\r\n      {{ item | textByFunction: control.settings.fieldName }}\r\n    </mat-option>\r\n  </mat-select>\r\n  <button\r\n    *ngIf=\"settings.icon\"\r\n    mat-icon-button\r\n    matSuffix\r\n    (click)=\"iconClick($event)\"\r\n  >\r\n    <mat-icon>\r\n      {{ settings.icon }}\r\n    </mat-icon>\r\n  </button>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n  <mat-hint *ngIf=\"control.tooltip\">{{ control.tooltip }}</mat-hint>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialDropdownComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'sp-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
                         MatSelectModule,
                         ReactiveFormsModule,
-                        ErrorMessagePipeModule,
+                        ErrorMessagePipe,
                         MatIconModule,
                         MatButtonModule,
-                        TextByFunctionPipeModule,
+                        TextByFunctionPipe,
                     ], template: "<mat-form-field\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-dropdown w-full mb-3 {{ control.styleClasses }}\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label *ngIf=\"control.label\">\r\n    {{ control.label }}\r\n  </mat-label>\r\n  <mat-select\r\n    [formControl]=\"control\"\r\n    [required]=\"control.required\"\r\n    (selectionChange)=\"optionSelected($event.value)\"\r\n    [placeholder]=\"control.placeholder\"\r\n  >\r\n    <mat-option *ngIf=\"!control.required\" [value]=\"null\">\r\n      {{ control.placeholder || control.settings.notSelectedText }}\r\n    </mat-option>\r\n    <mat-option\r\n      *ngFor=\"let item of control.settings.source | async\"\r\n      [value]=\"item[control.settings.fieldId]\"\r\n    >\r\n      {{ item | textByFunction: control.settings.fieldName }}\r\n    </mat-option>\r\n  </mat-select>\r\n  <button\r\n    *ngIf=\"settings.icon\"\r\n    mat-icon-button\r\n    matSuffix\r\n    (click)=\"iconClick($event)\"\r\n  >\r\n    <mat-icon>\r\n      {{ settings.icon }}\r\n    </mat-icon>\r\n  </button>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n  <mat-hint *ngIf=\"control.tooltip\">{{ control.tooltip }}</mat-hint>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"] }]
         }], propDecorators: { control: [{
                 type: Input
@@ -243,7 +228,7 @@ class SpecialDatepickerComponent {
     ngOnInit() { }
 }
 SpecialDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpecialDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialDatepickerComponent, isStandalone: true, selector: "sp-datepicker", inputs: { control: "control" }, ngImport: i0, template: "<mat-form-field\n  *ngIf=\"control && !control.hidden\"\n  [id]=\"control.elementId\"\n  class=\"special-datepicker w-full mb-3  {{ control.styleClasses }}\"\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\n>\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\n  <input\n    matInput\n    autocomplete=\"off\"\n    [readonly]=\"control.readOnly\"\n    [matDatepicker]=\"picker\"\n    [required]=\"control.required\"\n    [placeholder]=\"control.placeholder\"\n    [formControl]=\"control\"\n  />\n  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-datepicker #picker startView=\"year\" [startAt]=\"startAt\">\n  </mat-datepicker>\n  <mat-hint>\n    {{ control.tooltip }}\n  </mat-hint>\n  <mat-error>\n    {{ control.errors | errorMessage: control.errorMessages }}\n  </mat-error>\n</mat-form-field>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: ErrorMessagePipeModule }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "ngmodule", type: MatNativeDateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SpecialDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialDatepickerComponent, isStandalone: true, selector: "sp-datepicker", inputs: { control: "control" }, ngImport: i0, template: "<mat-form-field\n  *ngIf=\"control && !control.hidden\"\n  [id]=\"control.elementId\"\n  class=\"special-datepicker w-full mb-3  {{ control.styleClasses }}\"\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\n>\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\n  <input\n    matInput\n    autocomplete=\"off\"\n    [readonly]=\"control.readOnly\"\n    [matDatepicker]=\"picker\"\n    [required]=\"control.required\"\n    [placeholder]=\"control.placeholder\"\n    [formControl]=\"control\"\n  />\n  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-datepicker #picker startView=\"year\" [startAt]=\"startAt\">\n  </mat-datepicker>\n  <mat-hint>\n    {{ control.tooltip }}\n  </mat-hint>\n  <mat-error>\n    {{ control.errors | errorMessage: control.errorMessages }}\n  </mat-error>\n</mat-form-field>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "ngmodule", type: MatNativeDateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialDatepickerComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'sp-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
@@ -253,7 +238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         MatIconModule,
                         ReactiveFormsModule,
                         MatButtonModule,
-                        ErrorMessagePipeModule,
+                        ErrorMessagePipe,
                         MatNativeDateModule,
                     ], template: "<mat-form-field\n  *ngIf=\"control && !control.hidden\"\n  [id]=\"control.elementId\"\n  class=\"special-datepicker w-full mb-3  {{ control.styleClasses }}\"\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\n>\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\n  <input\n    matInput\n    autocomplete=\"off\"\n    [readonly]=\"control.readOnly\"\n    [matDatepicker]=\"picker\"\n    [required]=\"control.required\"\n    [placeholder]=\"control.placeholder\"\n    [formControl]=\"control\"\n  />\n  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-datepicker #picker startView=\"year\" [startAt]=\"startAt\">\n  </mat-datepicker>\n  <mat-hint>\n    {{ control.tooltip }}\n  </mat-hint>\n  <mat-error>\n    {{ control.errors | errorMessage: control.errorMessages }}\n  </mat-error>\n</mat-form-field>\n", styles: [":host{display:contents}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { control: [{
@@ -318,7 +303,7 @@ class SpecialMultipleAutocompleteComponent {
     }
 }
 SpecialMultipleAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialMultipleAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpecialMultipleAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialMultipleAutocompleteComponent, isStandalone: true, selector: "sp-multiple-autocomplete", inputs: { control: "control" }, ngImport: i0, template: "<div\r\n  class=\"special-multiple-autocomplete w-full mb-3 {{ control.styleClasses }}\"\r\n  [id]=\"control.elementId\"\r\n  *ngIf=\"control && !control.hidden\"\r\n>\r\n  <mat-form-field\r\n    class=\"w-full\"\r\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n  >\r\n    <mat-label *ngIf=\"control.label\">\r\n      {{ control.label }}\r\n    </mat-label>\r\n    <input\r\n      type=\"text\"\r\n      autocomplete=\"off\"\r\n      [required]=\"control.required && !control.value?.length\"\r\n      [readonly]=\"control.readOnly\"\r\n      [placeholder]=\"control.placeholder\"\r\n      matInput\r\n      [formControl]=\"internalControl\"\r\n      [matAutocomplete]=\"auto\"\r\n    />\r\n    <mat-autocomplete\r\n      #auto=\"matAutocomplete\"\r\n      [displayWith]=\"configValue\"\r\n      (optionSelected)=\"optionSelected($event)\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let option of settings?.source | async\"\r\n        [value]=\"option\"\r\n      >\r\n        <div class=\"flex items-center\">\r\n          <img\r\n            *ngIf=\"settings.fieldImage\"\r\n            class=\"w-8 pr-2\"\r\n            alt=\"\"\r\n            [src]=\"option | textByFunction: settings.fieldImage\"\r\n          />\r\n          <span>\r\n            {{ option | textByFunction: settings.fieldName }}\r\n          </span>\r\n        </div>\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n    <button\r\n      *ngIf=\"settings.icon\"\r\n      mat-icon-button\r\n      matSuffix\r\n      (click)=\"iconClick($event)\"\r\n    >\r\n      <mat-icon>\r\n        {{ settings.icon }}\r\n      </mat-icon>\r\n    </button>\r\n    <mat-hint>{{ control.tooltip }}</mat-hint>\r\n    <mat-error>\r\n      {{ control.errors | errorMessage: control.errorMessages }}\r\n    </mat-error>\r\n  </mat-form-field>\r\n\r\n  <mat-chip-listbox>\r\n    <mat-chip\r\n      *ngFor=\"let chip of control.value\"\r\n      [removable]=\"true\"\r\n      (removed)=\"remove(chip)\"\r\n    >\r\n      <div class=\"flex items-center\">\r\n        <img\r\n          *ngIf=\"settings.fieldImage\"\r\n          class=\"w-8 pr-2\"\r\n          alt=\"\"\r\n          [src]=\"chip | textByFunction: settings.fieldImage\"\r\n        />\r\n        {{ chip | textByFunction: settings.fieldName }}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </div>\r\n    </mat-chip>\r\n  </mat-chip-listbox>\r\n</div>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: ErrorMessagePipeModule }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "ngmodule", type: TextByFunctionPipeModule }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i11.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i11.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i11.MatChipRemove, selector: "[matChipRemove]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SpecialMultipleAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialMultipleAutocompleteComponent, isStandalone: true, selector: "sp-multiple-autocomplete", inputs: { control: "control" }, ngImport: i0, template: "<div\r\n  class=\"special-multiple-autocomplete w-full mb-3 {{ control.styleClasses }}\"\r\n  [id]=\"control.elementId\"\r\n  *ngIf=\"control && !control.hidden\"\r\n>\r\n  <mat-form-field\r\n    class=\"w-full\"\r\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n  >\r\n    <mat-label *ngIf=\"control.label\">\r\n      {{ control.label }}\r\n    </mat-label>\r\n    <input\r\n      type=\"text\"\r\n      autocomplete=\"off\"\r\n      [required]=\"control.required && !control.value?.length\"\r\n      [readonly]=\"control.readOnly\"\r\n      [placeholder]=\"control.placeholder\"\r\n      matInput\r\n      [formControl]=\"internalControl\"\r\n      [matAutocomplete]=\"auto\"\r\n    />\r\n    <mat-autocomplete\r\n      #auto=\"matAutocomplete\"\r\n      [displayWith]=\"configValue\"\r\n      (optionSelected)=\"optionSelected($event)\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let option of settings?.source | async\"\r\n        [value]=\"option\"\r\n      >\r\n        <div class=\"flex items-center\">\r\n          <img\r\n            *ngIf=\"settings.fieldImage\"\r\n            class=\"w-8 pr-2\"\r\n            alt=\"\"\r\n            [src]=\"option | textByFunction: settings.fieldImage\"\r\n          />\r\n          <span>\r\n            {{ option | textByFunction: settings.fieldName }}\r\n          </span>\r\n        </div>\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n    <button\r\n      *ngIf=\"settings.icon\"\r\n      mat-icon-button\r\n      matSuffix\r\n      (click)=\"iconClick($event)\"\r\n    >\r\n      <mat-icon>\r\n        {{ settings.icon }}\r\n      </mat-icon>\r\n    </button>\r\n    <mat-hint>{{ control.tooltip }}</mat-hint>\r\n    <mat-error>\r\n      {{ control.errors | errorMessage: control.errorMessages }}\r\n    </mat-error>\r\n  </mat-form-field>\r\n\r\n  <mat-chip-listbox>\r\n    <mat-chip\r\n      *ngFor=\"let chip of control.value\"\r\n      [removable]=\"true\"\r\n      (removed)=\"remove(chip)\"\r\n    >\r\n      <div class=\"flex items-center\">\r\n        <img\r\n          *ngIf=\"settings.fieldImage\"\r\n          class=\"w-8 pr-2\"\r\n          alt=\"\"\r\n          [src]=\"chip | textByFunction: settings.fieldImage\"\r\n        />\r\n        {{ chip | textByFunction: settings.fieldName }}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </div>\r\n    </mat-chip>\r\n  </mat-chip-listbox>\r\n</div>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i9.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i9.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i9.MatChipRemove, selector: "[matChipRemove]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialMultipleAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'sp-multiple-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
@@ -328,8 +313,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         MatIconModule,
                         ReactiveFormsModule,
                         MatButtonModule,
-                        ErrorMessagePipeModule,
-                        TextByFunctionPipeModule,
+                        ErrorMessagePipe,
+                        TextByFunctionPipe,
                         MatChipsModule,
                     ], template: "<div\r\n  class=\"special-multiple-autocomplete w-full mb-3 {{ control.styleClasses }}\"\r\n  [id]=\"control.elementId\"\r\n  *ngIf=\"control && !control.hidden\"\r\n>\r\n  <mat-form-field\r\n    class=\"w-full\"\r\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n  >\r\n    <mat-label *ngIf=\"control.label\">\r\n      {{ control.label }}\r\n    </mat-label>\r\n    <input\r\n      type=\"text\"\r\n      autocomplete=\"off\"\r\n      [required]=\"control.required && !control.value?.length\"\r\n      [readonly]=\"control.readOnly\"\r\n      [placeholder]=\"control.placeholder\"\r\n      matInput\r\n      [formControl]=\"internalControl\"\r\n      [matAutocomplete]=\"auto\"\r\n    />\r\n    <mat-autocomplete\r\n      #auto=\"matAutocomplete\"\r\n      [displayWith]=\"configValue\"\r\n      (optionSelected)=\"optionSelected($event)\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let option of settings?.source | async\"\r\n        [value]=\"option\"\r\n      >\r\n        <div class=\"flex items-center\">\r\n          <img\r\n            *ngIf=\"settings.fieldImage\"\r\n            class=\"w-8 pr-2\"\r\n            alt=\"\"\r\n            [src]=\"option | textByFunction: settings.fieldImage\"\r\n          />\r\n          <span>\r\n            {{ option | textByFunction: settings.fieldName }}\r\n          </span>\r\n        </div>\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n    <button\r\n      *ngIf=\"settings.icon\"\r\n      mat-icon-button\r\n      matSuffix\r\n      (click)=\"iconClick($event)\"\r\n    >\r\n      <mat-icon>\r\n        {{ settings.icon }}\r\n      </mat-icon>\r\n    </button>\r\n    <mat-hint>{{ control.tooltip }}</mat-hint>\r\n    <mat-error>\r\n      {{ control.errors | errorMessage: control.errorMessages }}\r\n    </mat-error>\r\n  </mat-form-field>\r\n\r\n  <mat-chip-listbox>\r\n    <mat-chip\r\n      *ngFor=\"let chip of control.value\"\r\n      [removable]=\"true\"\r\n      (removed)=\"remove(chip)\"\r\n    >\r\n      <div class=\"flex items-center\">\r\n        <img\r\n          *ngIf=\"settings.fieldImage\"\r\n          class=\"w-8 pr-2\"\r\n          alt=\"\"\r\n          [src]=\"chip | textByFunction: settings.fieldImage\"\r\n        />\r\n        {{ chip | textByFunction: settings.fieldName }}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </div>\r\n    </mat-chip>\r\n  </mat-chip-listbox>\r\n</div>\r\n", styles: [":host{display:contents}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { control: [{
@@ -341,7 +326,7 @@ class SpecialCheckboxComponent {
     ngOnInit() { }
 }
 SpecialCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpecialCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialCheckboxComponent, isStandalone: true, selector: "sp-checkbox", inputs: { control: "control" }, ngImport: i0, template: "<div\n  *ngIf=\"control && !control.hidden\"\n  [id]=\"control.elementId\"\n  class=\"special-checkbox w-full mb-3 flex flex-col {{ control.styleClasses }}\"\n>\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\n  <mat-checkbox\n    [required]=\"control.required\"\n    [ngModel]=\"control.value\"\n    (ngModelChange)=\"control.setValue($event); control.markAsDirty()\"\n    [indeterminate]=\"control.settings.indeterminate\"\n    [labelPosition]=\"control.settings.labelPosition\"\n    [color]=\"control.settings.color\"\n    [disabled]=\"control.disabled\"\n  >\n    <mat-icon *ngIf=\"control.icon\" matSuffix>{{ control.icon }} </mat-icon>\n    {{ control.placeholder }}\n  </mat-checkbox>\n</div>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i2$1.MatCheckboxRequiredValidator, selector: "mat-checkbox[required][formControlName],             mat-checkbox[required][formControl], mat-checkbox[required][ngModel]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: ErrorMessagePipeModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SpecialCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialCheckboxComponent, isStandalone: true, selector: "sp-checkbox", inputs: { control: "control" }, ngImport: i0, template: "<div\n  *ngIf=\"control && !control.hidden\"\n  [id]=\"control.elementId\"\n  class=\"special-checkbox w-full mb-3 flex flex-col {{ control.styleClasses }}\"\n>\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\n  <mat-checkbox\n    [required]=\"control.required\"\n    [ngModel]=\"control.value\"\n    (ngModelChange)=\"control.setValue($event); control.markAsDirty()\"\n    [indeterminate]=\"control.settings.indeterminate\"\n    [labelPosition]=\"control.settings.labelPosition\"\n    [color]=\"control.settings.color\"\n    [disabled]=\"control.disabled\"\n  >\n    <mat-icon *ngIf=\"control.icon\" matSuffix>{{ control.icon }} </mat-icon>\n    {{ control.placeholder }}\n  </mat-checkbox>\n</div>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i2$1.MatCheckboxRequiredValidator, selector: "mat-checkbox[required][formControlName],             mat-checkbox[required][formControl], mat-checkbox[required][ngModel]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialCheckboxComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'sp-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
@@ -352,7 +337,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         MatIconModule,
                         ReactiveFormsModule,
                         MatButtonModule,
-                        ErrorMessagePipeModule,
+                        ErrorMessagePipe,
                     ], template: "<div\n  *ngIf=\"control && !control.hidden\"\n  [id]=\"control.elementId\"\n  class=\"special-checkbox w-full mb-3 flex flex-col {{ control.styleClasses }}\"\n>\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\n  <mat-checkbox\n    [required]=\"control.required\"\n    [ngModel]=\"control.value\"\n    (ngModelChange)=\"control.setValue($event); control.markAsDirty()\"\n    [indeterminate]=\"control.settings.indeterminate\"\n    [labelPosition]=\"control.settings.labelPosition\"\n    [color]=\"control.settings.color\"\n    [disabled]=\"control.disabled\"\n  >\n    <mat-icon *ngIf=\"control.icon\" matSuffix>{{ control.icon }} </mat-icon>\n    {{ control.placeholder }}\n  </mat-checkbox>\n</div>\n", styles: [":host{display:contents}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { control: [{
                 type: Input
@@ -366,7 +351,7 @@ class SpecialTextAreaComponent {
     ngOnInit() { }
 }
 SpecialTextAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialTextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpecialTextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialTextAreaComponent, isStandalone: true, selector: "sp-text-area", inputs: { control: "control" }, outputs: { onBlur: "onBlur", onEnter: "onEnter" }, ngImport: i0, template: "<mat-form-field\n  *ngIf=\"control && !control.hidden\"\n  [id]=\"control.elementId\"\n  class=\"special-textarea w-full mb-3 {{ control.styleClasses }}\"\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\n>\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\n  <textarea\n    cdkTextareaAutosize\n    #autosize=\"cdkTextareaAutosize\"\n    cdkAutosizeMinRows=\"1\"\n    cdkAutosizeMaxRows=\"5\"\n    matInput\n    (blur)=\"onBlur.emit(control.value)\"\n    (keydown.enter)=\"onEnter.emit(control.value)\"\n    [type]=\"control.settings?.type || 'text'\"\n    [readonly]=\"control.readOnly\"\n    [required]=\"control.required\"\n    [placeholder]=\"control.placeholder\"\n    [formControl]=\"control\"\n  ></textarea>\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }} </mat-icon>\n  <mat-hint>\n    {{ control.tooltip }}\n  </mat-hint>\n  <mat-error>\n    {{ control.errors | errorMessage: control.errorMessages }}\n  </mat-error>\n</mat-form-field>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: InputMaskModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: ErrorMessagePipeModule }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SpecialTextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialTextAreaComponent, isStandalone: true, selector: "sp-text-area", inputs: { control: "control" }, outputs: { onBlur: "onBlur", onEnter: "onEnter" }, ngImport: i0, template: "<mat-form-field\n  *ngIf=\"control && !control.hidden\"\n  [id]=\"control.elementId\"\n  class=\"special-textarea w-full mb-3 {{ control.styleClasses }}\"\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\n>\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\n  <textarea\n    cdkTextareaAutosize\n    #autosize=\"cdkTextareaAutosize\"\n    cdkAutosizeMinRows=\"1\"\n    cdkAutosizeMaxRows=\"5\"\n    matInput\n    (blur)=\"onBlur.emit(control.value)\"\n    (keydown.enter)=\"onEnter.emit(control.value)\"\n    [type]=\"control.settings?.type || 'text'\"\n    [readonly]=\"control.readOnly\"\n    [required]=\"control.required\"\n    [placeholder]=\"control.placeholder\"\n    [formControl]=\"control\"\n  ></textarea>\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }} </mat-icon>\n  <mat-hint>\n    {{ control.tooltip }}\n  </mat-hint>\n  <mat-error>\n    {{ control.errors | errorMessage: control.errorMessages }}\n  </mat-error>\n</mat-form-field>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: InputMaskModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialTextAreaComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'sp-text-area', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
@@ -376,7 +361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         MatIconModule,
                         ReactiveFormsModule,
                         MatButtonModule,
-                        ErrorMessagePipeModule,
+                        ErrorMessagePipe,
                     ], template: "<mat-form-field\n  *ngIf=\"control && !control.hidden\"\n  [id]=\"control.elementId\"\n  class=\"special-textarea w-full mb-3 {{ control.styleClasses }}\"\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\n>\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\n  <textarea\n    cdkTextareaAutosize\n    #autosize=\"cdkTextareaAutosize\"\n    cdkAutosizeMinRows=\"1\"\n    cdkAutosizeMaxRows=\"5\"\n    matInput\n    (blur)=\"onBlur.emit(control.value)\"\n    (keydown.enter)=\"onEnter.emit(control.value)\"\n    [type]=\"control.settings?.type || 'text'\"\n    [readonly]=\"control.readOnly\"\n    [required]=\"control.required\"\n    [placeholder]=\"control.placeholder\"\n    [formControl]=\"control\"\n  ></textarea>\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }} </mat-icon>\n  <mat-hint>\n    {{ control.tooltip }}\n  </mat-hint>\n  <mat-error>\n    {{ control.errors | errorMessage: control.errorMessages }}\n  </mat-error>\n</mat-form-field>\n", styles: [":host{display:contents}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { control: [{
                 type: Input
@@ -441,7 +426,7 @@ class SpecialUploadComponent {
     }
 }
 SpecialUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialUploadComponent, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-SpecialUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialUploadComponent, isStandalone: true, selector: "sp-upload", inputs: { controlSetter: ["control", "controlSetter"] }, ngImport: i0, template: "<div\n  *ngIf=\"control && !control.hidden\"\n  [id]=\"control.elementId\"\n  class=\"special-upload w-full mb-3 {{ control.styleClasses }}\"\n>\n  <ngx-dropzone\n    class=\"special-upload__dropzone\"\n    [ngClass]=\"{\n      'special-upload--error-dashed':\n        !!control.errors && (control.dirty || control.touched)\n    }\"\n    [multiple]=\"control.settings?.multiple\"\n    [accept]=\"\n      control.settings?.accept\n        ? control.settings?.accept\n        : 'image/png, .jpeg, .jpg, image/gif'\n    \"\n    (change)=\"\n      control.settings?.multiple\n        ? onSelectMultiple($event)\n        : onSelectOne($event)\n    \"\n  >\n    <ngx-dropzone-label\n      [ngClass]=\"{\n        'special-upload--error':\n          !!control.errors && (control.dirty || control.touched)\n      }\"\n    >\n      <mat-icon class=\"special-upload__icon\" *ngIf=\"control.icon\"\n        >{{ control.icon }}\n      </mat-icon>\n      <h2 class=\"text-base font-bold\">\n        {{ control.label }}\n      </h2>\n      <h3 class=\"text-base\">\n        {{ control.placeholder }}\n      </h3>\n    </ngx-dropzone-label>\n    <ngx-dropzone-preview\n      *ngFor=\"let file of previewImages\"\n      [removable]=\"true\"\n      (removed)=\"onRemove(file)\"\n    >\n      <ngx-dropzone-label class=\"special-upload__card\">\n        <img class=\"special-upload__card--image\" [src]=\"file?.url\" alt=\"\" />\n      </ngx-dropzone-label>\n    </ngx-dropzone-preview>\n  </ngx-dropzone>\n  <div\n    class=\"special-upload--error mt-2\"\n    *ngIf=\"!!control.errors && (control.dirty || control.touched)\"\n  >\n    {{ control.errors | errorMessage: control.errorMessages }}\n  </div>\n</div>\n", styles: [":host{display:contents}:host .special-upload{margin-bottom:1rem}:host .special-upload__dropzone{min-height:180px;height:unset!important}:host .special-upload__icon{height:64px;width:64px;font-size:64px}:host .special-upload__card{width:100%;height:100%;margin:0;box-sizing:border-box;display:flex;align-items:center;flex-direction:column}:host .special-upload__card--image{width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: NgxDropzoneModule }, { kind: "component", type: i2$2.NgxDropzoneComponent, selector: "ngx-dropzone, [ngx-dropzone]", inputs: ["accept", "disabled", "multiple", "maxFileSize", "expandable", "disableClick", "processDirectoryDrop", "id", "aria-label", "aria-labelledby", "aria-describedby"], outputs: ["change"] }, { kind: "directive", type: i2$2.NgxDropzoneLabelDirective, selector: "ngx-dropzone-label" }, { kind: "component", type: i2$2.NgxDropzonePreviewComponent, selector: "ngx-dropzone-preview", inputs: ["file", "removable"], outputs: ["removed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: ErrorMessagePipeModule }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SpecialUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialUploadComponent, isStandalone: true, selector: "sp-upload", inputs: { controlSetter: ["control", "controlSetter"] }, ngImport: i0, template: "<div\n  *ngIf=\"control && !control.hidden\"\n  [id]=\"control.elementId\"\n  class=\"special-upload w-full mb-3 {{ control.styleClasses }}\"\n>\n  <ngx-dropzone\n    class=\"special-upload__dropzone\"\n    [ngClass]=\"{\n      'special-upload--error-dashed':\n        !!control.errors && (control.dirty || control.touched)\n    }\"\n    [multiple]=\"control.settings?.multiple\"\n    [accept]=\"\n      control.settings?.accept\n        ? control.settings?.accept\n        : 'image/png, .jpeg, .jpg, image/gif'\n    \"\n    (change)=\"\n      control.settings?.multiple\n        ? onSelectMultiple($event)\n        : onSelectOne($event)\n    \"\n  >\n    <ngx-dropzone-label\n      [ngClass]=\"{\n        'special-upload--error':\n          !!control.errors && (control.dirty || control.touched)\n      }\"\n    >\n      <mat-icon class=\"special-upload__icon\" *ngIf=\"control.icon\"\n        >{{ control.icon }}\n      </mat-icon>\n      <h2 class=\"text-base font-bold\">\n        {{ control.label }}\n      </h2>\n      <h3 class=\"text-base\">\n        {{ control.placeholder }}\n      </h3>\n    </ngx-dropzone-label>\n    <ngx-dropzone-preview\n      *ngFor=\"let file of previewImages\"\n      [removable]=\"true\"\n      (removed)=\"onRemove(file)\"\n    >\n      <ngx-dropzone-label class=\"special-upload__card\">\n        <img class=\"special-upload__card--image\" [src]=\"file?.url\" alt=\"\" />\n      </ngx-dropzone-label>\n    </ngx-dropzone-preview>\n  </ngx-dropzone>\n  <div\n    class=\"special-upload--error mt-2\"\n    *ngIf=\"!!control.errors && (control.dirty || control.touched)\"\n  >\n    {{ control.errors | errorMessage: control.errorMessages }}\n  </div>\n</div>\n", styles: [":host{display:contents}:host .special-upload{margin-bottom:1rem}:host .special-upload__dropzone{min-height:180px;height:unset!important}:host .special-upload__icon{height:64px;width:64px;font-size:64px}:host .special-upload__card{width:100%;height:100%;margin:0;box-sizing:border-box;display:flex;align-items:center;flex-direction:column}:host .special-upload__card--image{width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: NgxDropzoneModule }, { kind: "component", type: i2$2.NgxDropzoneComponent, selector: "ngx-dropzone, [ngx-dropzone]", inputs: ["accept", "disabled", "multiple", "maxFileSize", "expandable", "disableClick", "processDirectoryDrop", "id", "aria-label", "aria-labelledby", "aria-describedby"], outputs: ["change"] }, { kind: "directive", type: i2$2.NgxDropzoneLabelDirective, selector: "ngx-dropzone-label" }, { kind: "component", type: i2$2.NgxDropzonePreviewComponent, selector: "ngx-dropzone-preview", inputs: ["file", "removable"], outputs: ["removed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialUploadComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'sp-upload', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
@@ -451,7 +436,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         MatIconModule,
                         ReactiveFormsModule,
                         MatButtonModule,
-                        ErrorMessagePipeModule,
+                        ErrorMessagePipe,
                     ], template: "<div\n  *ngIf=\"control && !control.hidden\"\n  [id]=\"control.elementId\"\n  class=\"special-upload w-full mb-3 {{ control.styleClasses }}\"\n>\n  <ngx-dropzone\n    class=\"special-upload__dropzone\"\n    [ngClass]=\"{\n      'special-upload--error-dashed':\n        !!control.errors && (control.dirty || control.touched)\n    }\"\n    [multiple]=\"control.settings?.multiple\"\n    [accept]=\"\n      control.settings?.accept\n        ? control.settings?.accept\n        : 'image/png, .jpeg, .jpg, image/gif'\n    \"\n    (change)=\"\n      control.settings?.multiple\n        ? onSelectMultiple($event)\n        : onSelectOne($event)\n    \"\n  >\n    <ngx-dropzone-label\n      [ngClass]=\"{\n        'special-upload--error':\n          !!control.errors && (control.dirty || control.touched)\n      }\"\n    >\n      <mat-icon class=\"special-upload__icon\" *ngIf=\"control.icon\"\n        >{{ control.icon }}\n      </mat-icon>\n      <h2 class=\"text-base font-bold\">\n        {{ control.label }}\n      </h2>\n      <h3 class=\"text-base\">\n        {{ control.placeholder }}\n      </h3>\n    </ngx-dropzone-label>\n    <ngx-dropzone-preview\n      *ngFor=\"let file of previewImages\"\n      [removable]=\"true\"\n      (removed)=\"onRemove(file)\"\n    >\n      <ngx-dropzone-label class=\"special-upload__card\">\n        <img class=\"special-upload__card--image\" [src]=\"file?.url\" alt=\"\" />\n      </ngx-dropzone-label>\n    </ngx-dropzone-preview>\n  </ngx-dropzone>\n  <div\n    class=\"special-upload--error mt-2\"\n    *ngIf=\"!!control.errors && (control.dirty || control.touched)\"\n  >\n    {{ control.errors | errorMessage: control.errorMessages }}\n  </div>\n</div>\n", styles: [":host{display:contents}:host .special-upload{margin-bottom:1rem}:host .special-upload__dropzone{min-height:180px;height:unset!important}:host .special-upload__icon{height:64px;width:64px;font-size:64px}:host .special-upload__card{width:100%;height:100%;margin:0;box-sizing:border-box;display:flex;align-items:center;flex-direction:column}:host .special-upload__card--image{width:100%;height:100%;object-fit:cover}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$3.DomSanitizer }]; }, propDecorators: { controlSetter: [{
                 type: Input,
@@ -471,10 +456,10 @@ class SpecialLabelComponent {
     }
 }
 SpecialLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpecialLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialLabelComponent, isStandalone: true, selector: "sp-label", inputs: { control: "control" }, ngImport: i0, template: "<div\n  *ngIf=\"control && !control.hidden\"\n  class=\"special-label px-2 mb-3 {{ control.styleClasses }} {{\n    control.value | textByFunction: settings.stylesPipe\n  }}\"\n  [id]=\"control.elementId\"\n>\n  <div *ngIf=\"!!control.label\" class=\"special-label__title font-bold\">\n    {{ control.label }}\n  </div>\n  <div\n    class=\"special-label__text\"\n    [ngClass]=\"{\n      'cursor-pointer text-blue-600 hover:text-blue-700': settings.isLink\n    }\"\n    (click)=\"onLink()\"\n  >\n    {{ control.value | textByFunction: control.settings.pipe }}\n  </div>\n</div>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: TextByFunctionPipeModule }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SpecialLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialLabelComponent, isStandalone: true, selector: "sp-label", inputs: { control: "control" }, ngImport: i0, template: "<div\n  *ngIf=\"control && !control.hidden\"\n  class=\"special-label px-2 mb-3 {{ control.styleClasses }} {{\n    control.value | textByFunction: settings.stylesPipe\n  }}\"\n  [id]=\"control.elementId\"\n>\n  <div *ngIf=\"!!control.label\" class=\"special-label__title font-bold\">\n    {{ control.label }}\n  </div>\n  <div\n    class=\"special-label__text\"\n    [ngClass]=\"{\n      'cursor-pointer text-blue-600 hover:text-blue-700': settings.isLink\n    }\"\n    (click)=\"onLink()\"\n  >\n    {{ control.value | textByFunction: control.settings.pipe }}\n  </div>\n</div>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialLabelComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'sp-label', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatIconModule, TextByFunctionPipeModule], template: "<div\n  *ngIf=\"control && !control.hidden\"\n  class=\"special-label px-2 mb-3 {{ control.styleClasses }} {{\n    control.value | textByFunction: settings.stylesPipe\n  }}\"\n  [id]=\"control.elementId\"\n>\n  <div *ngIf=\"!!control.label\" class=\"special-label__title font-bold\">\n    {{ control.label }}\n  </div>\n  <div\n    class=\"special-label__text\"\n    [ngClass]=\"{\n      'cursor-pointer text-blue-600 hover:text-blue-700': settings.isLink\n    }\"\n    (click)=\"onLink()\"\n  >\n    {{ control.value | textByFunction: control.settings.pipe }}\n  </div>\n</div>\n", styles: [":host{display:contents}\n"] }]
+            args: [{ standalone: true, selector: 'sp-label', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatIconModule, TextByFunctionPipe], template: "<div\n  *ngIf=\"control && !control.hidden\"\n  class=\"special-label px-2 mb-3 {{ control.styleClasses }} {{\n    control.value | textByFunction: settings.stylesPipe\n  }}\"\n  [id]=\"control.elementId\"\n>\n  <div *ngIf=\"!!control.label\" class=\"special-label__title font-bold\">\n    {{ control.label }}\n  </div>\n  <div\n    class=\"special-label__text\"\n    [ngClass]=\"{\n      'cursor-pointer text-blue-600 hover:text-blue-700': settings.isLink\n    }\"\n    (click)=\"onLink()\"\n  >\n    {{ control.value | textByFunction: control.settings.pipe }}\n  </div>\n</div>\n", styles: [":host{display:contents}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { control: [{
                 type: Input
             }] } });
@@ -533,22 +518,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 type: Input
             }] } });
 
-class FormControlsListPipe {
-    transform(controls) {
-        if (!controls)
-            return [];
-        return Object.values(controls)
-            .filter((control) => !control.hidden)
-            .map((control) => control);
-    }
-}
-FormControlsListPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormControlsListPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-FormControlsListPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: FormControlsListPipe, name: "controlsList" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormControlsListPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'controlsList' }]
-        }] });
-
 class SpecialFormComponent {
     set control(form) {
         this.form = form;
@@ -584,7 +553,7 @@ class SpecialArrayComponent {
     }
 }
 SpecialArrayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpecialArrayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialArrayComponent, selector: "sp-array", inputs: { formArray: ["control", "formArray"] }, ngImport: i0, template: "<div\r\n  *ngIf=\"formArray && !formArray.hidden\"\r\n  [id]=\"formArray.elementId\"\r\n  class=\"special-form-array w-full box-border p-2 {{ formArray.styleClasses }}\"\r\n>\r\n  <div class=\"w-full mt-2 p-3 border-slate-200 border border-solid box-border\">\r\n    <h1 *ngIf=\"!!formArray.label\" class=\"font-bold py-3\">\r\n      {{ formArray.label }}\r\n    </h1>\r\n    <div class=\"divide-y divide-x-0 divide-solid divide-slate-200\">\r\n      <div\r\n        *ngIf=\"formArray.form\"\r\n        [ngClass]=\"{ 'md:grid-cols-15': settings.withActionButtons }\"\r\n        class=\"grid gap-4 grid-cols-12\"\r\n      >\r\n        <ng-container *ngIf=\"!withFormHeader; else FORMHEADERREF\">\r\n          <h2\r\n            [class]=\"item.styleClasses\"\r\n            *ngFor=\"let item of formArray.form.controls | controlsList\"\r\n          >\r\n            {{ item.label }}\r\n          </h2>\r\n          <div\r\n            *ngIf=\"settings.withActionButtons\"\r\n            class=\"\r\n              col-start-7 col-end-13\r\n              md:col-start-13 md:col-end-16\r\n              pb-5\r\n              my-auto\r\n              ml-auto\r\n              md:m-auto\r\n            \"\r\n          ></div>\r\n        </ng-container>\r\n        <ng-template #FORMHEADERREF>\r\n          <ng-template\r\n            *ngFor=\"let item of formArray.form.controls | controlsList\"\r\n            controlRender\r\n            [control]=\"item\"\r\n          ></ng-template>\r\n          <div\r\n            *ngIf=\"settings.withActionButtons\"\r\n            class=\"\r\n              col-start-7 col-end-13\r\n              md:col-start-13 md:col-end-16\r\n              pb-5\r\n              my-auto\r\n              ml-auto\r\n              md:m-auto\r\n            \"\r\n          >\r\n            <button\r\n              mat-flat-button\r\n              color=\"primary\"\r\n              [disabled]=\"formArray.form.invalid\"\r\n              (click)=\"addItem()\"\r\n            >\r\n              {{settings.addActionLabel || 'Add'}}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n      <div\r\n        class=\"w-full pt-5 grid gap-4 grid-cols-12 md:grid-cols-15\"\r\n        *ngFor=\"let formGroup of formArray.controls; let i = index\"\r\n      >\r\n        <ng-template\r\n          *ngFor=\"let item of formGroup.controls | controlsList\"\r\n          controlRender\r\n          [control]=\"item\"\r\n        ></ng-template>\r\n        <div\r\n          class=\"\r\n            col-start-7 col-end-13\r\n            md:col-start-13 md:col-end-16\r\n            pb-5\r\n            my-auto\r\n            ml-auto\r\n            md:m-auto\r\n          \"\r\n        >\r\n          <button mat-flat-button color=\"warn\" (click)=\"removeItem(i)\">\r\n            {{ settings.removeActionLabel || \"Remove\" }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1$1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return i8.MatButton; }), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i0.forwardRef(function () { return FormControlsRenderDirective; }), selector: "[controlRender]", inputs: ["control"] }, { kind: "pipe", type: i0.forwardRef(function () { return FormControlsListPipe; }), name: "controlsList" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SpecialArrayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: SpecialArrayComponent, selector: "sp-array", inputs: { formArray: ["control", "formArray"] }, ngImport: i0, template: "<div\r\n  *ngIf=\"formArray && !formArray.hidden\"\r\n  [id]=\"formArray.elementId\"\r\n  class=\"special-form-array w-full box-border p-2 {{ formArray.styleClasses }}\"\r\n>\r\n  <div class=\"w-full mt-2 p-3 border-slate-200 border border-solid box-border\">\r\n    <h1 *ngIf=\"!!formArray.label\" class=\"font-bold py-3\">\r\n      {{ formArray.label }}\r\n    </h1>\r\n    <div class=\"divide-y divide-x-0 divide-solid divide-slate-200\">\r\n      <div\r\n        *ngIf=\"formArray.form\"\r\n        [ngClass]=\"{ 'md:grid-cols-15': settings.withActionButtons }\"\r\n        class=\"grid gap-4 grid-cols-12\"\r\n      >\r\n        <ng-container *ngIf=\"!withFormHeader; else FORMHEADERREF\">\r\n          <h2\r\n            [class]=\"item.styleClasses\"\r\n            *ngFor=\"let item of formArray.form.controls | controlsList\"\r\n          >\r\n            {{ item.label }}\r\n          </h2>\r\n          <div\r\n            *ngIf=\"settings.withActionButtons\"\r\n            class=\"\r\n              col-start-7 col-end-13\r\n              md:col-start-13 md:col-end-16\r\n              pb-5\r\n              my-auto\r\n              ml-auto\r\n              md:m-auto\r\n            \"\r\n          ></div>\r\n        </ng-container>\r\n        <ng-template #FORMHEADERREF>\r\n          <ng-template\r\n            *ngFor=\"let item of formArray.form.controls | controlsList\"\r\n            controlRender\r\n            [control]=\"item\"\r\n          ></ng-template>\r\n          <div\r\n            *ngIf=\"settings.withActionButtons\"\r\n            class=\"\r\n              col-start-7 col-end-13\r\n              md:col-start-13 md:col-end-16\r\n              pb-5\r\n              my-auto\r\n              ml-auto\r\n              md:m-auto\r\n            \"\r\n          >\r\n            <button\r\n              mat-flat-button\r\n              color=\"primary\"\r\n              [disabled]=\"formArray.form.invalid\"\r\n              (click)=\"addItem()\"\r\n            >\r\n              {{settings.addActionLabel || 'Add'}}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n      <div\r\n        class=\"w-full pt-5 grid gap-4 grid-cols-12 md:grid-cols-15\"\r\n        *ngFor=\"let formGroup of formArray.controls; let i = index\"\r\n      >\r\n        <ng-template\r\n          *ngFor=\"let item of formGroup.controls | controlsList\"\r\n          controlRender\r\n          [control]=\"item\"\r\n        ></ng-template>\r\n        <div\r\n          class=\"\r\n            col-start-7 col-end-13\r\n            md:col-start-13 md:col-end-16\r\n            pb-5\r\n            my-auto\r\n            ml-auto\r\n            md:m-auto\r\n          \"\r\n        >\r\n          <button mat-flat-button color=\"warn\" (click)=\"removeItem(i)\">\r\n            {{ settings.removeActionLabel || \"Remove\" }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1$1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return i7$1.MatButton; }), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i0.forwardRef(function () { return FormControlsRenderDirective; }), selector: "[controlRender]", inputs: ["control"] }, { kind: "pipe", type: i0.forwardRef(function () { return FormControlsListPipe; }), name: "controlsList" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialArrayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sp-array', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  *ngIf=\"formArray && !formArray.hidden\"\r\n  [id]=\"formArray.elementId\"\r\n  class=\"special-form-array w-full box-border p-2 {{ formArray.styleClasses }}\"\r\n>\r\n  <div class=\"w-full mt-2 p-3 border-slate-200 border border-solid box-border\">\r\n    <h1 *ngIf=\"!!formArray.label\" class=\"font-bold py-3\">\r\n      {{ formArray.label }}\r\n    </h1>\r\n    <div class=\"divide-y divide-x-0 divide-solid divide-slate-200\">\r\n      <div\r\n        *ngIf=\"formArray.form\"\r\n        [ngClass]=\"{ 'md:grid-cols-15': settings.withActionButtons }\"\r\n        class=\"grid gap-4 grid-cols-12\"\r\n      >\r\n        <ng-container *ngIf=\"!withFormHeader; else FORMHEADERREF\">\r\n          <h2\r\n            [class]=\"item.styleClasses\"\r\n            *ngFor=\"let item of formArray.form.controls | controlsList\"\r\n          >\r\n            {{ item.label }}\r\n          </h2>\r\n          <div\r\n            *ngIf=\"settings.withActionButtons\"\r\n            class=\"\r\n              col-start-7 col-end-13\r\n              md:col-start-13 md:col-end-16\r\n              pb-5\r\n              my-auto\r\n              ml-auto\r\n              md:m-auto\r\n            \"\r\n          ></div>\r\n        </ng-container>\r\n        <ng-template #FORMHEADERREF>\r\n          <ng-template\r\n            *ngFor=\"let item of formArray.form.controls | controlsList\"\r\n            controlRender\r\n            [control]=\"item\"\r\n          ></ng-template>\r\n          <div\r\n            *ngIf=\"settings.withActionButtons\"\r\n            class=\"\r\n              col-start-7 col-end-13\r\n              md:col-start-13 md:col-end-16\r\n              pb-5\r\n              my-auto\r\n              ml-auto\r\n              md:m-auto\r\n            \"\r\n          >\r\n            <button\r\n              mat-flat-button\r\n              color=\"primary\"\r\n              [disabled]=\"formArray.form.invalid\"\r\n              (click)=\"addItem()\"\r\n            >\r\n              {{settings.addActionLabel || 'Add'}}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n      <div\r\n        class=\"w-full pt-5 grid gap-4 grid-cols-12 md:grid-cols-15\"\r\n        *ngFor=\"let formGroup of formArray.controls; let i = index\"\r\n      >\r\n        <ng-template\r\n          *ngFor=\"let item of formGroup.controls | controlsList\"\r\n          controlRender\r\n          [control]=\"item\"\r\n        ></ng-template>\r\n        <div\r\n          class=\"\r\n            col-start-7 col-end-13\r\n            md:col-start-13 md:col-end-16\r\n            pb-5\r\n            my-auto\r\n            ml-auto\r\n            md:m-auto\r\n          \"\r\n        >\r\n          <button mat-flat-button color=\"warn\" (click)=\"removeItem(i)\">\r\n            {{ settings.removeActionLabel || \"Remove\" }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:contents}\n"] }]
@@ -631,27 +600,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 args: ['control']
             }] } });
 
-class FormControlsListPipeModule {
-}
-FormControlsListPipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormControlsListPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FormControlsListPipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: FormControlsListPipeModule, declarations: [FormControlsListPipe], imports: [CommonModule], exports: [FormControlsListPipe] });
-FormControlsListPipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormControlsListPipeModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormControlsListPipeModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [FormControlsListPipe],
-                    imports: [CommonModule],
-                    exports: [FormControlsListPipe],
-                }]
-        }] });
-
 class SpecialFormModule {
 }
 SpecialFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 SpecialFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: SpecialFormModule, declarations: [SpecialArrayComponent,
         FormControlsRenderDirective,
         SpecialFormComponent], imports: [CommonModule,
-        FormControlsListPipeModule,
+        FormControlsListPipe,
         MatButtonModule,
         SpecialRichtextComponent,
         SpecialDropdownComponent,
@@ -666,7 +621,6 @@ SpecialFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versi
         FormControlsRenderDirective,
         SpecialFormComponent] });
 SpecialFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SpecialFormModule, imports: [CommonModule,
-        FormControlsListPipeModule,
         MatButtonModule,
         SpecialRichtextComponent,
         SpecialDropdownComponent,
@@ -688,7 +642,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                     ],
                     imports: [
                         CommonModule,
-                        FormControlsListPipeModule,
+                        FormControlsListPipe,
                         MatButtonModule,
                         SpecialRichtextComponent,
                         SpecialDropdownComponent,
@@ -1092,5 +1046,5 @@ const numberMask = (max = 1000) => createMask({ alias: 'numeric', min: 0, max })
  * Generated bundle index. Do not edit.
  */
 
-export { EControlTypes, FormControlsRenderDirective, ISpecialControl, SpecialArrayComponent, SpecialAutocompleteComponent, SpecialCheckboxComponent, SpecialDatepickerComponent, SpecialDropdownComponent, SpecialFormArray, SpecialFormBuilderService, SpecialFormComponent, SpecialFormControl, SpecialFormGroup, SpecialFormModule, SpecialInputComponent, SpecialLabelComponent, SpecialMultipleAutocompleteComponent, SpecialRichtextComponent, SpecialTextAreaComponent, SpecialUploadComponent, currencyInputMask, numberMask };
+export { EControlTypes, ErrorMessagePipe, FormControlsListPipe, FormControlsRenderDirective, ISpecialControl, SpecialArrayComponent, SpecialAutocompleteComponent, SpecialCheckboxComponent, SpecialDatepickerComponent, SpecialDropdownComponent, SpecialFormArray, SpecialFormBuilderService, SpecialFormComponent, SpecialFormControl, SpecialFormGroup, SpecialFormModule, SpecialInputComponent, SpecialLabelComponent, SpecialMultipleAutocompleteComponent, SpecialRichtextComponent, SpecialTextAreaComponent, SpecialUploadComponent, TextByFunctionPipe, currencyInputMask, numberMask };
 //# sourceMappingURL=special-forms.mjs.map